フラットデザインアイキャッチの作り方【ブログデザイン】
あなたは、ブログのデザインを統一したいと考えていませんか？色を合わせたり、イラストを合わせたり。でも、「どうもうまくいかないなぁ。」と、お悩みではないですか？
そんなあなたに、ひとつ、デザインの手法をお教えします。フラットデザインをご存じですか？今、ブログ界隈で定番となりつつある（ブログ以外でもですが）デザイン手法の事です。
これを取り入れる事で、統一感や権威性を手に入れやすくなります。では、どうすればこのフラットデザインを手に入れられるのか？
この記事では、どのようなものがフラットデザインなのか。どうすればフラットデザインになるのか、解説していきます。
- フラットデザインとはどんなデザイン？
- フラットデザインのメリット
- フラットデザインの作り方
最後まで読めば、あなたもフラットデザインが、きっと導入したくなるはず。ぜひ、持ちかえってくださいね。
フラットデザインとは
フラットデザインとは、読んで字のごとく、立体的でない平面的な画像を使用するデザイン手法の事です。
身近な物では、iPhoneやウインドウズなどのアイコンがフラットデザイン化されています。
フラットデザイン使用のメリット
なぜ、フラットデザインが増えてきているのでしょうか。それには、もちろん理由があります。
ここでは、フラットデザインを使用する事で、得られるメリットを２つ、解説していきます。
視認性の良さ
フラットデザイン利用のメリットは、なんといっても視認性の良さ。フラットな画像だと、小さい画面でもしっかりと画像を視認する事ができます。
対して、立体的な画像の場合、小さくなると見づらくなります。
昨今はPCよりも、スマートフォンなどのモバイル媒体で記事を読むことが増えていますので、小さい媒体でも、見やすい画像が推奨されています。
チェックポイント
フラットデザインは、小さな画像でもみやすい！
統一感で権威性アピール
サイトをフラットデザインで統一する事により、サイトイメージを、より、権威性のあるものにする事ができます。
デザインがバラバラのサイトより、統一感のあるサイトの方が、きっちりしたイメージに見えませんか？
フラットデザインならば、始めにルールを作って、サイトデザインを進めていけば、簡単に統一感を出す事ができます。
チェックポイント
サイト全体で統一すれば、権威性がアップ！
フラットデザインを使用している有名サイト
有名ブロガーたちも、こぞってフラットデザインを導入しています。
では、どのようなブロガーが採用しているのでしょうか。実際に、使用しているサイトをご紹介しますので、是非、覗いて、確認してみてくださいね。
実際のサイトで検証
ここでは、私のtwitter仲間である、しばゆーさん(@shibayu_blog)のサイトを参考に、進めていきます。
しばゆーさんは、「 シバログ｜Googleから学ぶSEOブログ 」を運営されています。
ぜひ、実際に伺ってみてくださいね。
シバログを覗いてみよう
では、シバログでどんなフラットデザインが使用されているか、見ていきましょう。
タイトル・ピックアップバナー
平面的な印象になっているのがわかりますか？
フラットデザインとは、なるべく立体に見えないように、シンプルに、デザインする手法です。
平面的に仕上げていきますので、画像の枠に影などもつけません。ペタッと張り付いている感じに仕上げていきます。
シバログでは、ピックアップバナーに合うように、タイトルもシンプルに仕上げてありますね。
記事一覧
では、記事一覧をみていきましょう。
ここも、当然のようにフラットデザインで統一されています。
統一感を出す為に、全てを同じ色で作るのも手法の一つですが、しばゆーさんは、カテゴリー別に背景の色を変える事で、サイト全体の見え方としてのマンネリ化を防いでいます。
マンネリ化すると、記事が目立たなくなります！
チェックポイント
色を変える事で、マンネリ化を防ぐ。
しばゆーさんが気を付けている事
アイキャッチをフラットデザインにすれば、それで完成！…というわけではありません。サイト全体で、見ていく必要があります。
- 文章のフォントに、ゴシック系を使用する
- 文章の文字色を、少しホワイトを入れた色あいにする
- サイトのメインカラーを、少しホワイトを入れた色あいにする（原色を使用しない）
- 記事の挿絵に、なるべく写真を使用せず、フラットなイラストを使用する
しばゆーさんの素晴らしいところは、サイト全体を、トータルでデザインされている所です！
フラットデザインでサイトを構築しようとお考えの方は、シバログのサイト全体が参考になりますので、ぜひ、伺ってみてくださいね。
SHIBA.logは提携サイト「Kasaiya研究所」のブログ解体新書にて紹介されています。あわせてお読みください。
フラットデザインでアイキャッチを作ってみよう
では、ここからは、デモのアイキャッチを参考に、フラットデザインの作り方を、解説していきます。
色の選定
フラットデザインでアイキャッチ等を作成する場合、基本的に、原色は使いません。原色は、リアルな色合いになるので、立体的に見えやすくなります。
少し、ホワイトが入って、パステルよりになっている色を選択するのがコツです。
パステルカラーの選び方が分からない、という方は、こちらのサイトが参考になります。
パステルカラー｜パステルカラーのカラーコードが一目でわかるWEB色見本
色は、少し濃いめを選ぶのがコツです。理由は、白文字フォントが使いやすいからです。
色が決定したら、バックの色を、その色で染めてしまいましょう。
基本的に、フラットデザインの場合は、背景ベタ塗り一色です。
思い切り、染め上げてください！
フォントの選定
フラットデザインに使用するフォント選びにも、コツがあります。
なるべく、フラットに見せたいので、文字自体の飾りは必要ありません。
できるだけ、文字の幅が一定になる「ゴシック体」を選びます。
ふちどり文字は立体感がでるので、使用しません。
フォントの色
フラットデザインで使用するフォントの色については、白がおすすめです。
背景の色を、少し濃いめにしておくことで、白文字が安定して使用できます。どうしても、カラーフォントが使用したい場合は、必ず背景の色と相性を確認してください。
相性の良い色を、「好き」「嫌い」で簡単に探す事ができるサイトがありますので、こちらを利用すると便利ですね。
PALETTABLE｜Generate beautiful color palettes using the knowledge of millions of designers.
フラットなイラストを手に入れる
フラットデザインを取り入れる際に、一番問題となるのが、「フラットなイラストをどうやって手に入れるか」という事です。
当サイトが推奨している、Canvaの中にも多少は入っていますが、探すのが大変なのが現状です。
ここでは、フラットなデザインが、無料で手に入るサイトを３つ紹介します。
イラストAC
イラストACは、無料でイラストを提供してくれるイラストサイトです。
「フラットデザイン」で検索する事で、画像を絞り込むことができます。
商用利用可
クレジット表記不要
freepic
freepicは、様々な画像が検索できる、イラスト素材サイトです。無料のものと、有料のものが混在しているので、注意が必要です。
こちらのサイトでも、「フラットデザイン」と検索することで、フラットデザイン用の素材を、絞り込むことができます。
記事内の挿絵にも、おすすめです！
商用利用…素材により利用可・利用不可のものがあるので、要確認
クレジット表記…素材により、表記が必要なものと、不必要なものがあるので、要確認
FLAT ICON DESIGN
FLAT ICON DESIGNは、フラットデザインのアイコン提供している、デザイン素材サイトです。
フラットアイコンでは超有名なサイトで、フラットデザインといえば外す事ができません。
こちらの素材を利用して、ぜひ、フラットデザインに挑戦してみましょう。
商用利用可
クレジット表記不要
イラストを配置する
フラットデザインのイラストが手に入ったら、先ほどの背景に配置していきます。
今回は、Canva内のロケットのフラットデザインを使用します。
ふちどりがついている画像は、フラットデザインでは使用しません。
フラットデザインの場合は、いかにシンプルにするかが大事。イラストは、中央やや上目に配置したので十分でしょう。空いた下部のエリアには、テキストを配置します。
イラスト自体の色が変更できる場合は、背景にあった色あいに変更するようにしましょう。
テキストを配置する
イラストを配置したら、テキストを配置していきます。
こちらも、できるだけシンプルに配置します。なるべく長文にならないよう、絞ったキーワードでテキストを選定してください。
フォントは前述の通り「ゴシック体」「白文字」がおすすめです。
ふちどりがついているフォントはフラットデザインでは使用しません。
これでほぼ完成！
いかがです？簡単にフラットデザインのアイキャッチを作る事ができました。
アクセントを入れる
アクセントとして、影などを入れるのも面白いです。立体にならないように、影はつけないでください！…といいましたが、影も平面的に使用します。
使用したイラストの影になるように、四角素材などでアクセントをつけます。
バックを思い切って区切って色分けするのも良いですね。
イラストのバックに、丸型の素材を追加してみました。この様な素材の形を変更して行く事で、マンネリ化を防ぐことができます。思い切って色を濃くしてもよいかもしれません。
直線的な影にすることで、フラット感を損なわずに、影をつけることができます。
慣れたら、簡単に作れるようになりますよ！
フラットデザインのまとめ
- サイト全体で、フラットデザイン化を考える必要がある
- フラットデザインのイラストの入手方法を、考えておく
- 原色は使用しない
- 少しホワイトが入った色を使用する
- 背景は、少し濃いめで白文字がかんたん
- フォントは、「ゴシック体」
- 配置はシンプルに
慣れてしまえば、写真のアイキャッチより簡単なので、ぜひ、チャレンジしてみてくださいね！
しばゆーさんが運営するサイト「シバログ」
推奨デザインツール
当サイトでは、無料でもオシャレなデザインが簡単に作成できる、「 Canva 」を推奨しています。無料でも相当なレベルのデザインができるのですが、一度PROにすると無料には戻れなくなってしまいました。その秘密は、下記の記事に。
コメント