みなさんこんにちは！ブログデザインうまくいっていますか？
「最近、うまくいってないなぁ…」という人はデザインの良いサイトを真似することが上達への近道。
今回は女性らしい柔らかいトップページを持ったサイトをご紹介します。
ぜひ、参考にしていただいて、あなたのブログもお洒落にしてみませんか？
アカリノオト
今回紹介するサイトはこのサイト。
アカリノオトは「おうち学習」、「推しアイテム」、「ブログ」の３本柱からなるブログ。
メインは子供向けの学習やアイテムを紹介しています。実際に使用してのレビューや写真も満載。こどもを育てる世代に役立つブログになっています。
ぜひ、実際のサイトを閲覧しながら記事を読んでくださいね。
運営者
勉強熱心であり、自身が実際に経験して良い！と思ったものを発信されています。
twitterフォロワーが1000人を超えているのも納得ですね♪ あやまるさんのtwitterはこちら
アカリノオトがお洒落な理由 ５選
ここからは、アカリノオトがお洒落な理由を５つ、説明していきます。
お洒落なサイトを作るにはまず真似から。どのようにして参考にしていくかも解説していきます。
統一感のある落ち着いたカラー
まず目に留まるのが、落ち着いた色。少しくすんだ色相でサイト全体が統一されています。
とても落ち着いていて、やわらかく女性的な印象をもつ配色です。
彩度差が大きくなればなるほど違和感が生まれてきますので、彩度を合わせる事は非常に重要です。
ここでは、気に入った色あいのサイトから色を取得する方法を解説していきます。
下記のリンクより ColorPick Eyedropper をダウンロードし拡張機能をオンにします。
拡張機能をピン止めしてブラウザに常時表示しておきましょう。
小さなウィンドウが開きます。アイコンをあわせた箇所の色番号を表示してくれます。
#8ABBC0が「アカリノオト」の青色部分の色とわかりましたね。
この色をあなたのサイトのデザインカラーに入れると、アカリノオトと同じ色が使用できます。
チェックポイント
色を取得するには「ColorPick Eyedropper」がおすすめ。
お洒落なロゴ
お洒落なサイトや権威性の必要なサイトでは、ロゴが必須ともいえます。
あやまるさんは可愛いリスの画像と独特の味わいのフォントを利用して雰囲気をだしています。
あなたもCanvaなどの画像サイトやソフトを作る事ができます。しかし、注意点があります。
ロゴはなるべく透過素材で作るようにしましょう！
背景などの色に合わせて作ってもよいのですが、サイトのカラーなどを変更する度にロゴも作り直す必要がでてきます。
pngの透過素材でロゴを作成しておくことで、どの様な場所でもすぐ使用できるようになります。
簡単に透過ロゴを作る方法を二つご紹介します。
LOGASTER
LOGASTERは無料で簡単にロゴが作成できる外国のサイトです。
小さな画像なら無料で作成する事ができます。逆に言えば大きい画像は有料になりますのでご注意ください。
ロゴ用の画像やフォントも豊富に用意してあり、調整なども簡単に行えます。
Canva PROで作る
Canvaの有料機能である、Canva Proを使用する事で、簡単に透過画像のロゴを作る事ができます。
無料版では透過画像でdownloadができませんので、私はCanva Proをおすすめします。
- 他の無料サイトやCanva内で気に入った画像を探します
- 気に入った画像を「背景リムーバ」機能で切りぬき
- テキストを配置
- ダウンロードの際、形式を「 .png 」にし、「透過画像」にチェックを入れてダウンロード
これだけで簡単に作る事ができます。
お家デザインのメインビジュアル
アカリノオトではお家をモチーフとしたメインビジュアルを使用しています。可愛いお家が並んでいる様子はとてもポップでデザインチック。
こちらのポイントはサイト背景とメインビジュアルの背景を全く同じ色とする事で、メインビジュアルありながらまるでサイトの余白の様に使用している所です。
写真などを一面に配置すると圧迫感が出がちですが、背景の色を合わせる事で、サイトが広くなったような印象になります。
こちらも一つの案として持っておくと、サイトデザインの幅が広がります。
チェックポイント
メインビジュアルは必ずしも写真やタイトルバナーを入れなくてもよい。
自由線のピックアップバナー
ピックアップバナーとは、メインビジュアルやサイトタイトルの下にくるおすすめの記事などを表示するバナーです。
ほとんどの方は四角い形のまま配置されていますよね。しかしあやまるさんは、こちらにも手を加えています。
自由線のまるっぽい形のバナーを使用する事でやわらかい印象を演出しています。もちろん色もサイトと同じように彩度を合わせています。
こちらも簡単に真似する事ができますので是非挑戦してみましょう。
Canva の無料素材にも自由線の丸があります。色も変更できますのでこちらを利用しましょう。
完全にオリジナルの自由線の丸が作りたい場合はイラストレーターが良いでしょう。
年に何回かアマゾンでお安く契約できる時期がありますので、挑戦してみるのもいいですね。
SWELLの曲線フルワイドブロック
アカリノオトではたくさんの波型の曲線が使用されています。
これは今大人気のWordPressテーマ「 SWELL 」の標準機能「フルワイドブロック」で作られています。
デザインやCSSが苦手な人でも簡単にパラメーターを調整するだけでお洒落な波線を作る事が出来ます。
固定ページでブロックを当てはめていって、オシャレなサイトが出来てしまうのがSWELLの良いところです。
手軽にお洒落なサイトを手に入れたい人は是非SWELLをご検討ください。
あやまるさん自身が SWELLでトップページをサイト型に変更する記事を書いておられます。是非こちらもご参照ください。
【まとめ】アカリノオトがお洒落な理由！
アカリノオトには、オシャレなサイトを作るヒントが満載でしたね！ではここで、そのポイントをおさらいしていきましょう。
アカリノオトがお洒落な理由
❶ 配色の選定とサイト全体での彩度統一
❷ オリジナルロゴを作成
❸ メインビジュアルを背景と同色にしてサイトを広く使う
❹ 自由線のピックアップバナー
❺ SWELLを使用
「 アカリノオト 」にはお洒落なサイトのヒントが満載！トップページだけでなく、記事も必見です。
ぜひあなたも「 アカリノオト 」を参考にしてお洒落なサイトを作ってくださいね！
ではまたっ！
どんぐり所長のおすすめツール
どこでも、どんなデバイスでも順位チェック
ブログ記事の順位を確認していますか？どんなキーワードが上下しているのか知る事はブロガーでは必須と言えます。
ほとんどの方がダウンロード型の順位チェックツールを使用されていますが、私はコレ。「Nobilista」。クラウド型のチェックツールです。
クラウド型とは、ネット上にあるサーバーにデータが保存されている順位チェックツールです。従って、お家のパソコン以外でも情報にアクセスできちゃうんです。これが想像以上に快適で、一度体験すると戻れなくなっちゃう。詳しい記事を書いていますので是非読んでみてください。
実は私、Nobilistaの公式アンバサダーをさせて頂いています。使いだしたら超気に入ってしまって、気づいたらアンバサダーになっていました。そんな私が、おすすめする「Nobilista」。今なら7日間無料でお試しができます。クレジットカードなどの情報を入れなくても試せるので、ぜひあなたにも試してほしい。
＼場所を選ばない快適さを体験して／
Nobilista公式サイト
当サイト推奨 デザインツール
当サイトでは、ブログ初心者でも簡単・無料で美麗なデザインが作成できる、オンライン画像作成フォーム「Canva」を推奨しています。数万点の素材やフォントが用意されていて、選ぶだけで簡単にプロ並みのデザインを作成する事ができます。これから先、会社員の仕事でも使用する事になるかもしれないほど普及が広まっています。覚えるなら早い方がいいですよ！
当サイトのデザインは、SWELLで再現可能
私はSWELLを2年使用してきました。現在４つのサイトでSWELLを使用しています。
SWELLを使用する理由は、簡単・綺麗・速い。
実際このトップページも、SWELLの標準機能だけでデザイン。
お洒落なブログを作りたいあなたにピッタリのWordPressテーマです。
私が実際に使用して実感したSWELLの特徴は以下。
- 完全ブロックエディタ対応
- 直感で使える操作性
- 便利な専用ブロックを多数用意
- お洒落なトップページが簡単に作れる
- 最速レベルのページスピード
- 一度購入すれば複数サイトに何度でも使用可能
- ユーザーの利便性を考える熱意の運営者
- SWELLを紹介すればアフィリエイト報酬が貰える（購入者のみ参加可）
- 販売価格 ￥17,600（税込）
唯一の欠点は価格の高さ。しかしそれは、SWELLがハイクオリティだから。
そして、運営者がとびきりの対応をしてくれる必要経費。
SWELLにはアフィリエイトプログラムがあり、紹介すれば利益を得ることもできます。
よく、「アフィリエイトがあるから紹介しているんでしょ。」と言われますがこれは違います。
惚れ込んだWordPressテーマに、たまたまアフィリエイトがあっただけ。
あなたもSWELLを体験すれば、きっと紹介したくなります。
＼圧倒的な操作性を体験せよ／
あなたも今日からSWELLER！
お気軽にコメントください