Web関連

【Web制作会社が教える】10分でわかる!?フラットデザイン実践のポイント

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

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

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

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

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

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

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

 

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

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

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

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

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

日本語はダサい!

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

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

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

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

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

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

UI/UXデザイン

WordPressを使った簡単なオリジナル(っぽい)フォトブログ制作2前のページ

映画のWebプロモーションを調べてみた!(1)次のページ

ピックアップ記事

  1. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  2. 新型コロナウイルスで日本の働き方改革が起こる
  3. AIに求められているものは、実は意外な物だった
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    マーケッター必見! 話題のMAツールを比較してみた

    海外では既に当たり前と言われているマーケティングオートメーション(MA…

  2. Web関連

    ついに始まったGoogleの干渉

    米Googleは6月28日、情報の共有を容易にできるようにする為のSN…

  3. Web関連

    Google CardboardでVR体験をしてみた

    皆さんこんにちは。最近屋内と屋外の寒暖差にやられている堀井です。PCを…

  4. Web関連

    現場レベルのデータ分析。セルフサービスBI活用シチュエーションを考えてみた

    従来のやり方や、経験者の勘に従った「こうすれば売れるはず!」というマ…

  5. Web関連

    空腹注意! 飲食業界に関わって学んだこと!

    最近飲食業界のプロジェクトに関わりました。食べることの大好きな私にとっ…

  6. Web関連

    新米ママをサポートする、子育てIoT新技術

    IoTという言葉が生まれて、国内でも2年ほど前から、様々な企業がこの分…

おすすめ記事

最近の記事

  1. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  2. 人が対応するのが正しいの?DX(デジタルトランスフォーメーシ…
  3. 人間拡張って聞いたことがありますか?デジタル化が背中を押して…
  4. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  5. 【初心者向け】ここに注目!スマートフォン用バナーを作成しよう…

アーカイブ

  1. Web関連

    ホームページ更新の手間を省きたい
  2. Web関連

    日本の暦ってステキ ~3月3日について考えてみる編~
  3. Web関連

    HHH戦略で目標やターゲットユーザーを明確にしよう!
  4. Web関連

    ランニングアプリを使って楽しく体力づくり!
  5. Web関連

    よく見るECサイト売り上げアップのまとめ
PAGE TOP