MENU

当サイトはリンクフリーです

当ブログ内の記事本文や図解等は、以下の注意事項を守っていただければご自由にお使いいただいて結構です。

【注意事項】

  • 引用元として当サイト名を記載の上、対象記事へリンクしてください。
  • 添削記事などの紹介者のアイコンは転載不可です。

ご不明な点があれば、twitterのダイレクトメールまでお願い致します。

著者

どんぐり所長

Nobilista公認バッジ

愛用 順位チェックツール

オリジナルグッズ購入

【フラットデザインの作り方】シンプルデザインで統一し権威性アップ

あなたは、ブログのデザインを統一したいと考えていませんか?色を合わせたり、イラストを合わせたり。でも、「どうもうまくいかないなぁ。」と、お悩みではないですか?

そんなあなたに、ひとつ、デザインの手法をお教えします。フラットデザインをご存じですか?今、ブログ界隈で定番となりつつある(ブログ以外でもですが)デザイン手法の事です。

これを取り入れる事で、統一感や権威性を手に入れやすくなります。では、どうすればこのフラットデザインを手に入れられるのか?

この記事では、どのようなものがフラットデザインなのか。どうすればフラットデザインになるのか、解説していきます。

この記事でわかる事
  • フラットデザインとはどんなデザイン?
  • フラットデザインのメリット
  • フラットデザインの作り方

最後まで読めば、あなたもフラットデザインが、きっと導入したくなるはず。ぜひ、持ちかえってくださいね。

目次

フラットデザインとは

フラットデザインとは、読んで字のごとく、立体的でない平面的な画像を使用するデザイン手法の事です。

身近な物では、iPhoneやウインドウズなどのアイコンがフラットデザイン化されています。

フラットデザイン使用メリット

なぜ、フラットデザインが増えてきているのでしょうか。それには、もちろん理由があります。

ここでは、フラットデザインを使用する事で、得られるメリットを2つ、解説していきます。

視認性良さ

フラットデザイン利用のメリットは、なんといっても視認性の良さ。フラットな画像だと、小さい画面でもしっかりと画像を視認する事ができます。

対して、立体的な画像の場合、小さくなると見づらくなります。

昨今はPCよりも、スマートフォンなどのモバイル媒体で記事を読むことが増えていますので、小さい媒体でも、見やすい画像が推奨されています。

チェックポイント

フラットデザインは、小さな画像でもみやすい!

統一感権威性アピール

サイトをフラットデザインで統一する事により、サイトイメージを、より、権威性のあるものにする事ができます。

デザインがバラバラのサイトより、統一感のあるサイトの方が、きっちりしたイメージに見えませんか?

フラットデザインならば、始めにルールを作って、サイトデザインを進めていけば、簡単に統一感を出す事ができます。

チェックポイント

サイト全体で統一すれば、権威性がアップ!

フラットデザイン使用している有名サイト

有名ブロガーたちも、こぞってフラットデザインを導入しています。

では、どのようなブロガーが採用しているのでしょうか。実際に、使用しているサイトをご紹介しますので、是非、覗いて、確認してみてくださいね。

フラットデザインを使用している有名サイト

実際サイト検証

ここでは、私のtwitter仲間である、しばゆーさん(@shibayu_blog)のサイトを参考に、進めていきます。

しばゆーさんは、「 シバログ|Googleから学ぶSEOブログ 」を運営されています。

ブログのデザインやSEO対策について図解などを用いて分かりやすく解説されているので、現在大人気のブログです。

ぜひ、実際に伺ってみてくださいね。

シバログ覗いてみよう

では、シバログでどんなフラットデザインが使用されているか、見ていきましょう。

タイトル・ピックアップバナー

シバログのタイトル付近のフラットデザインの例
シバログのタイトル付近
どんぐり所長
どんぐり所長

平面的な印象になっているのがわかりますか?

フラットデザインとは、なるべく立体に見えないように、シンプルに、デザインする手法です。

平面的に仕上げていきますので、画像の枠に影などもつけません。ペタッと張り付いている感じに仕上げていきます。

シバログでは、ピックアップバナーに合うように、タイトルもシンプルに仕上げてありますね。

記事一覧

では、記事一覧をみていきましょう。

フラットデザインの記事一覧の例
シバログの記事一覧

ここも、当然のようにフラットデザインで統一されています。

統一感を出す為に、全てを同じ色で作るのも手法の一つですが、しばゆーさんは、カテゴリー別に背景の色を変える事で、サイト全体の見え方としてのマンネリ化を防いでいます。

どんぐり所長
どんぐり所長

マンネリ化すると、記事が目立たなくなります!

チェックポイント

色を変える事で、マンネリ化を防ぐ。

しばゆーさん気を付けている事

アイキャッチをフラットデザインにすれば、それで完成!…というわけではありません。サイト全体で、見ていく必要があります。

サイト全体で注意すべきところ
  • 文章のフォントに、ゴシック系を使用する
  • 文章の文字色を、少しホワイトを入れた色あいにする
  • サイトのメインカラーを、少しホワイトを入れた色あいにする(原色を使用しない)
  • 記事の挿絵に、なるべく写真を使用せず、フラットなイラストを使用する
どんぐり所長
どんぐり所長

しばゆーさんの素晴らしいところは、サイト全体を、トータルでデザインされている所です!

フラットデザインでサイトを構築しようとお考えの方は、シバログのサイト全体が参考になりますので、ぜひ、伺ってみてくださいね。

SHIBA.logは提携サイト「Kasaiya研究所」のブログ解体新書にて紹介されています。あわせてお読みください。

フラットデザインアイキャッチ作ってみよう

では、ここからは、デモのアイキャッチを参考に、フラットデザインの作り方を、解説していきます。

選定

フラットデザインでアイキャッチ等を作成する場合、基本的に、原色は使いません。原色は、リアルな色合いになるので、立体的に見えやすくなります。

少し、ホワイトが入って、パステルよりになっている色を選択するのがコツです。

パステルカラーの選び方が分からない、という方は、こちらのサイトが参考になります。

パステルカラーを一覧から選びたいなら

パステルカラー|パステルカラーのカラーコードが一目でわかるWEB色見本

色は、少し濃いめを選ぶのがコツです。理由は、白文字フォントが使いやすいからです。

色が決定したら、バックの色を、その色で染めてしまいましょう。

フラットデザインの背景

基本的に、フラットデザインの場合は、背景ベタ塗り一色です。

どんぐり所長
どんぐり所長

思い切り、染め上げてください!

フォント選定

フラットデザインに使用するフォント選びにも、コツがあります。

フラットデザインにおすすめのフォント
フラットデザインにおすすめのフォント

なるべく、フラットに見せたいので、文字自体の飾りは必要ありません。

できるだけ、文字の幅が一定になる「ゴシック体」を選びます。

ふちどり文字は立体感がでるので、使用しません。

フォント

フラットデザインで使用するフォントの色については、白がおすすめです。

フラットデザインのフォントカラーの例
フラットデザインのフォントカラー

背景の色を、少し濃いめにしておくことで、白文字が安定して使用できます。どうしても、カラーフォントが使用したい場合は、必ず背景の色と相性を確認してください。

相性の良い色を、「好き」「嫌い」で簡単に探す事ができるサイトがありますので、こちらを利用すると便利ですね。

相性の良い色を探すなら

PALETTABLE|Generate beautiful color palettes using the knowledge of millions of designers.

フラットなイラスト手に入れる

フラットデザインを取り入れる際に、一番問題となるのが、「フラットなイラストをどうやって手に入れるか」という事です。

当サイトが推奨している、Canvaの中にも多少は入っていますが、探すのが大変なのが現状です。

ここでは、フラットなデザインが、無料で手に入るサイトを3つ紹介します。

イラストAC

イラストACは、無料でイラストを提供してくれるイラストサイトです。

「フラットデザイン」で検索する事で、画像を絞り込むことができます。

イラストACの特徴

商用利用可
クレジット表記不要

➤➤➤イラストAC「フラットデザイン」

freepic

freepic

freepicは、様々な画像が検索できる、イラスト素材サイトです。無料のものと、有料のものが混在しているので、注意が必要です。

こちらのサイトでも、「フラットデザイン」と検索することで、フラットデザイン用の素材を、絞り込むことができます。

どんぐり所長
どんぐり所長

記事内の挿絵にも、おすすめです!

freepicの特徴

商用利用…素材により利用可・利用不可のものがあるので、要確認
クレジット表記…素材により、表記が必要なものと、不必要なものがあるので、要確認

➤➤➤freepic「フラットデザイン」

FLAT ICON DESIGN

FLAT ICON DESIGN

FLAT ICON DESIGNは、フラットデザインのアイコン提供している、デザイン素材サイトです。

フラットアイコンでは超有名なサイトで、フラットデザインといえば外す事ができません。

こちらの素材を利用して、ぜひ、フラットデザインに挑戦してみましょう。

FLAT ICON DESIGNの特徴

商用利用可
クレジット表記不要

➤➤➤FLAT ICON DESIGN

イラスト配置する

フラットデザインのイラストが手に入ったら、先ほどの背景に配置していきます。

今回は、Canva内のロケットのフラットデザインを使用します。

ふちどりがついている画像は、フラットデザインでは使用しません。

フラットなイラストの配置
フラットなイラストを配置する

フラットデザインの場合は、いかにシンプルにするかが大事。イラストは、中央やや上目に配置したので十分でしょう。空いた下部のエリアには、テキストを配置します。

イラスト自体の色が変更できる場合は、背景にあった色あいに変更するようにしましょう。

テキスト配置する

イラストを配置したら、テキストを配置していきます。

フラットデザインのテキスト配置
テキストを配置する

こちらも、できるだけシンプルに配置します。なるべく長文にならないよう、絞ったキーワードでテキストを選定してください。

フォントは前述の通り「ゴシック体」「白文字」がおすすめです。

ふちどりがついているフォントはフラットデザインでは使用しません。

どんぐり所長
どんぐり所長

これでほぼ完成!

いかがです?簡単にフラットデザインのアイキャッチを作る事ができました。

アクセント入れる

アクセントとして、影などを入れるのも面白いです。立体にならないように、影はつけないでください!…といいましたが、影も平面的に使用します。

フラットな影をつける

使用したイラストの影になるように、四角素材などでアクセントをつけます。

影の色は、背景色の色を少し明度を落とせば使いやすいです。

背景にナナメのアクセントをつける
ナナメにアクセントをつける

バックを思い切って区切って色分けするのも良いですね。

丸形の素材を追加したフラットデザインの例
イラストのバックに丸型の素材を追加

イラストのバックに、丸型の素材を追加してみました。この様な素材の形を変更して行く事で、マンネリ化を防ぐことができます。思い切って色を濃くしてもよいかもしれません。

直線的な影にすることで、フラット感を損なわずに、影をつけることができます。

どんぐり所長
どんぐり所長

慣れたら、簡単に作れるようになりますよ!

フラットデザインに関するQ&A

フラットデザインに写真をいれてもいいですか?

フラットデザインにこだわるならば写真は入れないようにしましょう。リアルな仕上がりになってしまいます。ただし、デザインは自由。あなたの好きなデザインを作りましょう。

フラットデザインにおすすめのフォントは?

ゴシック体です。それもなるべく等幅になるフォントを選ぶと相性がよいです。

フラットデザインに相性の良い色はありますか?

原色よりも、少し白が入ってくすんだ色を使うと相性が良いです。原色はリアルな色調なので合いません。

フラットデザインまとめ

フラットデザインの注意点
  • サイト全体で、フラットデザイン化を考える必要がある
  • フラットデザインのイラストの入手方法を、考えておく
フラットデザインをつくるコツ
  • 原色は使用しない
  • 少しホワイトが入った色を使用する
  • 背景は、少し濃いめで白文字がかんたん
  • フォントは、「ゴシック体」
  • 配置はシンプルに
どんぐり所長
どんぐり所長

慣れてしまえば、写真のアイキャッチより簡単なので、ぜひ、チャレンジしてみてくださいね!

しばゆーさんが運営するサイト「シバログ

推奨ザインツール

当サイトでは、無料でもオシャレなデザインが簡単に作成できる、「 Canva 」を推奨しています。無料でも相当なレベルのデザインができるのですが、一度PROにすると無料には戻れなくなってしまいました。その秘密は、下記の記事に。

Canvaを詳しく知る

おすすめWordpressテーマ

私は、導入するだけで一気にお洒落になるWordpressテーマ「SWELL」をおすすめします。デザイン性はもちろん、その操作性は特筆ものです。

SWELLを愛用する私が実際に使用してきた内容を加えた、詳しい記事を書いています。ぜひご参照ください。

SWELLを詳しく知る

トップページへ戻る

お気軽にコメントください

コメントする

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

目次