Web関連

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

0

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

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

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

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

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

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

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

 

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

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

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

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

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

日本語はダサい!

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

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

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

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

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

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

UI/UXデザイン

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    今年のホワイトデーは3Dプリンターが熱い

    前回のコラムでバレンタインについて書きました。バレンタインの次のイベン…

  2. Web関連

    MAツールでまだ接点のない見込み客にアプローチ!?

    MAツールを勉強していると、日本人には常識の観点から作れなかったツール…

  3. Web関連

    今聞いているハイレゾ音楽、本当に「ハイレゾ」?

    2年ほど前に登場し、今ではすっかり浸透している「ハイレゾ音源」。音楽配…

  4. Web関連

    費用対効果抜群!リマーケティング広告について

    インターネット広告には様々な形態が存在します。今回は、その中でも定…

  5. Web関連

    WordPressの予約公開終了・予約上書きが出来るプラグイン「Advanced Schedule …

    WordPressの素晴らしいプラグインを紹介している岸沢です。今…

  6. Web関連

    ホームページ制作会社が紹介するグローバルナビゲーションの情報分類4パターン

    みなさんは、「グローバルナビゲーション」と呼ばれるものをご存じでしょう…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    PCサイトとスマートフォンサイト
  2. SNS関連

    上手く活用できていますか?企業としてのTwitter活用術
  3. AIさくらさん

    【人工知能(AI)×旅行・レジャー】人工知能(AI)が提案する最適なレジャープラ…
  4. Web関連

    たかがキャラクター。されどキャラクター。~町おこし編~
  5. AI関連

    【人工知能(AI)×教育】”24時間365日”人工知能が…
PAGE TOP