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