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. 新しい販売形態であるDtoCについて考えてみる
  3. AIに求められているものは、実は意外な物だった
  4. 新型コロナウイルスで日本の働き方改革が起こる

関連記事

  1. Web関連

    スマートフォンサイトにおけるパララックスデザイン

    こんにちは。育児に家事に大忙しのディレクター、望月です。パ…

  2. Web関連

    セキュリティ対策はクラウドストレージでも必須!!

    データの保存や共有などにとても便利なクラウドストレージ。中でも無料で使…

  3. Web関連

    拡大化するサブスクリプションサービスについて考えてみる

    目次- サブスクリプションサービスとは何か?-…

  4. Web関連

    今話題のマーケティングオートメーション(MA)を考えてみた!

    みなさん、マーケティングオートメーション(MA)という言葉をお聞きにな…

  5. Web関連

    キャッシュレスの時代に備えて、キャッシュレス決済について知ろう!

     お買い物をするときの会計は、現金派ですか?それともキャッシュ…

  6. Web関連

    今、企業が考えるべきSDGsのメリットとデメリット

    ニュースなどでは、SDGs(エスディージーズ)という言葉をよく耳にする…

おすすめ記事

最近の記事

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

アーカイブ

  1. AI関連

    AI導入で店舗業務をデジタル化 キーワードは「効率化と高度化」
  2. Web関連

    e-Sportsのこれから
  3. Web関連

    正しい情報を伝えるために!webでの校正について
  4. Web関連

    CMSの強い味方!? 高さを自動調節してくれるjQueryAutoHeight.…
  5. Web関連

    Web制作にも使えるかもしれない面白い心理学を集めてみました。No,2
PAGE TOP