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

関連記事

  1. Web関連

    作りっぱなしにNO!PDCAを回して、効果的なWebサイトにしよう 第3回:【実践編】メールフォー…

    前回までの記事では、PDCAを回すことの重要性と運用に必要なポイントを…

  2. Web関連

    苦情対応はWebサイトでもできる!クレームを活かす対応方法!

    こんにちは。ISO10002取得のお手伝いを少しだけしていた真野です。…

  3. Web関連

    【人工知能・AI×観光】迷子は人工知能で解決できる!

    観光地や街中で迷子を見かけたり、自分が迷子になった経験はありますでしょ…

  4. Web関連

    色って不思議・・・こんな影響があるんだ!

    こんにちは、管理部の川又です。突然ですが、みなさん何色がお好きですか?…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    音楽だけじゃない!映像美にもこだわったミュージックビデオベスト5
  2. サービス・新技術

    VR(仮想現実)がもたらす新しいコミュニケーション(体験)について考えてみる
  3. Web関連

    CMSとしてのWordPress導入
  4. AI関連

    VUIの先にあるもの
  5. Web関連

    パスワードはなくなる!?噂のFIDOとは
PAGE TOP