フラットデザインをご存じですか？
今ブログ界隈で定番となりつつある（ブログ以外でもですが）デザイン手法の事です。
これを取り入れる事で統一感や権威性を手に入れやすくなります。
では、どうすればこのフラットデザインを手に入れられるのか？
この記事では、どのようなものがフラットデザインなのか。
どうすればフラットデザインになるのか解説していきます。
- フラットデザインとはどんなデザイン？
- フラットデザインのメリット
- フラットデザインの作り方
最後まで読めばあなたもフラットデザインがきっと導入したくなるはず。ぜひ持ちかえってくださいね。
フラットデザインとは
フラットデザインとは読んで字のごとく立体的でない平面的な画像を使用するデザイン手法の事です。
身近な物では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内のロケットのフラットデザインを使用します。
ふちどりがついている画像はフラットデザインでは使用しません。
フラットデザインの場合はいかにシンプルにするかが大事。
イラストは中央やや上目に配置したので十分でしょう。
空いた下部のエリアにはテキストを配置します。
イラスト自体の色が変更できる場合は、背景にあった色あいに変更するようにしましょう。
テキストを配置する
イラストを配置したら、テキストを配置していきます。
こちらもできるだけシンプルに配置します。
なるべく長文にならないよう、絞ったキーワードでテキストを選定してください。
フォントは前述の通り「ゴシック体」「白文字」がおすすめです。
ふちどりがついているフォントはフラットデザインでは使用しません。
これでほぼ完成！
いかがです？簡単にフラットデザインのアイキャッチを作る事ができました。
アクセントを入れる
アクセントとして影などを入れるのも面白いです。
立体にならないように影はつけないでください！…といいましたが、影も平面的に使用します。
使用したイラストの影になるように四角素材などでアクセントをつけます。
バックを思い切って区切って色分けするのも良いですね。
イラストのバックに丸型の素材を追加してみました。
この様な素材の形を変更して行く事でマンネリ化を防ぐことができます。
思い切って色を濃くしてもよいかもしれません。
直線的な影にすることでフラット感を損なわずに影をつけることができます。
慣れたら簡単に作れるようになりますよ！
フラットデザインのまとめ
- サイト全体でフラットデザイン化を考える必要がある
- フラットデザインのイラストの入手方法を考えておく
- 原色は使用しない
- 少しホワイトが入った色を使用する
- 背景は少し濃いめで白文字がかんたん
- フォントは「ゴシック体」
- 配置はシンプルに
慣れてしまえば写真のアイキャッチより簡単なので、ぜひチャレンジしてみてくださいね！
しばゆーさんが運営するサイト「シバログ」
