フラットデザイン実践のポイント│Web制作会社のフラットデザイン関連コラム

Columnコラム

Webデザイン

10分でわかる!?フラットデザイン実践のポイント

10分でわかる!?フラットデザイン実践のポイント

2015/03/10
このエントリーをはてなブックマークに追加

ファッションと同じように、webデザインにも、その時期ごとの流行があります。
「なんか、Macのサイトみたいな感じで~」とか、「最近はやってるやつ!」などとクライアントから無茶振りされて、現場で説明や制作に困ったという方も多いのではないでしょうか?

挙句の果てに、それらしいシンプルなデザインを作ったら、

「これ、私でもつくれるんじゃないですか?」

と言われてしまったり...
これでは、苦労も報われないですね。

今回は、わかったようでわからない、フラットデザインのポイントを、たった10分でつかめる(かも知れない)要素をまとめました!

「フラットデザイン」=『余分なものを削ぎ落としたデザイン』ではない。

『フラットデザイン』と聞くと、どのようなものを想像するでしょうか?
ちょっと前では、MicrosoftのWindows8 に搭載されたインターフェースがそれにあたります。最近では、iPhone のiOS 8 のUIが、全面的にフラットなデザインになりました。Google の運営するサービスは以前からシンプルなデザインをしていますし、Android もそうなると言われています。
言葉で表すと『平面的で、余計なものを削った』『シンプルな』デザイン、と思われるかもしれませんが、実はそうではありません。
フラットデザインとは、サイトのコンセプトとユーザビリティにこだわったデザインのことだと思います。

flatdesign_15030901.png

意味のない装飾は行わない。色ひとつにも意味を持たせる。

フラットデザインは、PCはもとより、スマートフォン、タブレットなどにも横断して有効なデザイン方法です。むしろ、画面の大きさが小さいスマートフォンなどに、効果が高いデザインと言えます。
表示エリアが限られていますので、ボタンやナビゲーションに余計な装飾は持たせず、意味のあるデザインのみを施すことが重要です。色ひとつ取っても、ひと目で何を表現しているか、わかる配色でなければ、ユーザーを混乱させてしまいます。

工夫次第で、サイトの特徴や『オンリーワン』が、伝わるサイトになる!

装飾を省き、意味のあるものだけで構成したデザインというと、「特徴のない、シンプルなサイト」に落ち着いてしまうと懸念する方もいるかもしれません。確かにそういうリスクはありますが、工夫次第で、いくらでも個性的なデザインにすることが可能です。

大きく分けると、以下の4つです。
・配色... 基本は、コーポレートカラーとグレー系のみで。鮮やかで、わかりやすい色使いを心がけます。
・写真... 写真自体のクオリティが低いと、デザイン全体の印象に大きく響きます。高品質なものが必須になります。
・テキスト... 例えば「○○製品の特長をご紹介します」ではなく「満足度95%の性能」など、限られた文字量の中でわかりやすくキャッチーな言葉を使うことで、ユーザーを惹きつけることが出来ます。
・フォント... フォント選びは、サイトの印象を変える大きな要素です。定番のものばかり使っていませんか?
フラットデザインは、余計な装飾が無いので、これらの要素がユーザーの目に止まりやすくなっています。逆に言えば、このポイントを抑えれば、サイトの打ち出すサービスや特徴を、可視化させることができます。

日本語はダサい!

昔からのwebサイトに総じて言えることですが、日本語はどうしてもダサくなります。
html自体が英語をベースに発展してきた文化なので、仕方のないことかもしれませんが...、シンプルで装飾が少ないフラットデザインでは、文字に目が止まりやすく、そうなると日本語のゴツゴツした不格好な形が、いやでも目につきます。

せっかく高品質な写真をあてても、台無しになってしまいます。

ただ、日本においては、日本語を使わないわけには行きません。

日本語を使いながら、デザインのクオリティを活かすにはどうすればよいでしょう?
ポイントは以下です。
・大きなフォントで、線を細く。
・ゴシックではなく、明朝体を使う。
・欧文フォントも添えて、助けてもらう!


フラットデザインをうまく活かせば、インパクトやメッセージ性の強いサイトをデザインすることが出来ます。また同時にサイト構造がシンプルなため、マルチデバイス対応や、CMSなどの導入も比較的スムーズです。
以上のポイントを抑えて、クライアントを納得させるフラットデザインを作りましょう!

関連するサービス

Webデザイン

デザインガイドライン作成

レスポンシブWebデザイン

UI/UXデザイン

text_totop