フラットデザインはWebサイトのデザインの方向性のひとつです。スマホ、PC、タブレットなどどのデバイスから見ても見やすいのが特徴です。
フラットデザインとはどういうデザインを指すのか
フラットデザインとは、フラット（平面的）なデザインということで、立体感や動きがないデザインのことです。非常にシンプルで、見やすいのが特徴です。
フラットデザイン以前はリアルデザイン
10年ほど前まではリアルデザインという立体的なデザインがWebサイトのデザインでかっこいいという風潮でした。
例えば影を落としてみたり枠が3D風だったりというデザインがあふれていました。また、画面上でオブジェクトが動いてみたり、フラッシュアニメーションが埋め込まれていたり、ポインタを当てて隠しメニューを探すようなデザインもよく見かけました。ファッションや美容関係、クリエイター系のサイトなどでは特に主流でした。
Webサイトを現実にある物体のようなリアルな見た目にしようというのが、このようなリアルデザインと呼ばれるの目的でした。しかし、2018年現在この手のデザインのサイトはかなり少なくなっています。
フラットデザインの目的
フラットデザインの目的はマルチデバイスへの対応というのが一つの大きなものです。一昔前はwebサイトをデザインする際はPCユーザーからどう見えるかを意識すればよかったわけですが、現在ではスマホやタブレットなども意識をしなければなりません。従来のPCよりも指でタップするという直感的な操作性にマッチングする必要があります。
また多くのデバイスに対応させるためのサイズなどの変更がフラットデザインだと容易です。立体的なデザインだとPCの表示をスマホに変える際に型崩れなどが起きやすくなりますし、ゼロから作るのは手間です。同じ理由でトップページ上のギミックなどもほとんど用いられなくなっています。
フラットデザインのメリット
フラットデザインは具体的にどのようなメリットがあるのでしょうか。やはりスマホとの相性というところが最も大きいようです。
メリット1.レスポンシブデザインとの相性がいい
5年ほど前まではwebサイトはPC版とモバイル版、スマホ版の3種類の表示が別々に設定されていることが一般的でした。WebサイトのURLの最後に/mや/spといった文字列がついていたわけです。
しかし2018年現在、多くのwebサイトはレスポンシブデザインといって、使うデバイスによってwebサイトのデザインが自動的に変化するものが一般的です。
様々なデバイスに対応するにあたって、フラットデザインだとどので座椅子でも美しく見えやすいというのがあります。これが従来のリアルデザインだと素材や文字、グリッドの装飾などのボリュームがあるため潰れたり文字が切れたり、スマホ版だと汚く見えることが多々ありました。
フラットデザインによってどのデバイスでも同じ使い勝手を実現できるようになるのです。
メリット2.ユーザーにとって操作しやすい
また、フラットデザインははっきりした色合いで正方形や長方形などの見やすいアイコンが多く取り入れられています。そのためユーザーがタップやクリックをしやすい作りになっています。これがグラデーションや影が多いデザインだとどこが区切りなのかわかりづらい場合があるのです。
メリット3.文字が見やすい
また、フラットデザインを使い過度な装飾をそぎ落としたことにより、サイトに溢れる無意味な強調がなくなります。すると文字が見やすくなり、見出しやタイトルなどの大きい文字が目立ちやすくなります。
他にも本文中の文字も基本的には単色で記述し、見出しに縁取りや影を使うことも避けます。全体的にすっきりし読みやすいテキストになるのです。
代表的なフラットデザインのwebサイト
今世の中に溢れるwebデザインの多くがフラットデザインに移行していますが、その中でもエポックメイキングなプロダクトを2つご紹介しましょう。
1.windows10のホーム画面
windowsのホーム画面はwindows8からフラットデザインが採用されています。
タイルと呼ばれる四角形のアイコンはタブレット端末での操作性を意識したものでした。windowsはPCのOSなのでスマホ用には想定されていませんが、Surfaceなどのタッチパネル型PCの登場がフラットデザインの需要を高めたわけです。
デザイン性が高いといえばApple製品というイメージがありましたが、windowsもフラットデザインの採用によってスタイリッシュな表示を実現したといえます。
2.iPhoneのホーム画面
iPhoneのホーム画面に表示されるアイコンは丸みを帯びた縁で立体感があるデザインが長らく主流でした。2013年のiOS7以降はフラットデザインが採用されています。平面的でちょっとのっぺりした印象のためリリース当初は「見づらくなった」「ダサい」というような声もありました。
フラットデザインはどこに向かうのか
多くのWebサイトやデバイスに取り入れられているフラットデザインですが、必ずしも良いところばかりではありません。
デメリットとしてはフラットであるがゆえに、どこがボタンでどこがそうでないのかわかりづらくなる場合があることです。これは主にフラットデザインで他のサイトにない高いデザイン性を実現しようとデザイナーが熱中するあまりに起こることが多いです。
つまり、フラットデザインの定番と言われているレイアウトを使うと他のサイトと似たようなデザインになることが多いのです。 定番から外れようとすると見づらくなる可能性が高まります。
ですので、フラットデザイン2.0と言われる新しい流れを生み出そうとする動きもあります。これはフラットデザインに立体感や奥行きを多少加えることでデザイン性を高めアイコンをわかりやすくしようというコンセプトです。
しかし、こうした動きには批判もあります。デザイン性を高めるというのは必ずしもユーザービリティにつながらないということです。デザイナーの自己満足にならないようなデザインであることを常に意識する必要があるのです。
フラットデザインをプロダクトに取り入れるには
フラットデザインを自社のWebサイトや製品サイトに取り入れるためにはどうすれば良いのでしょう。自社でデザイナーを抱える方法と外注する方法の２種類があります。
求人広告でデザイナーを募集する
WebデザイナーはWeb関係の職種の中では比較的人気があり人口も多いです。
しかし、その分レベルがかなり広範になり、一人でデザインを任せられるデザイナーを求人広告で採用するのには相当多くの求職者と会わなければならないでしょう。
自社で育てるくらいの覚悟があればいいのですが、即占領が欲しい場合は条件等によって採用スピードが左右されやすいです。
人材紹介でデザイナーを募集する
人材紹介会社の場合、自社の関係会社の専門学校やセミナーで育成したwebデザイナーを現場を経験させるために送り込もうとする会社が少なからずあるため、全体的なレベルは高くない場合があります。
能力的なマッチングが微妙でコロコロ人が入れ替わったりするので、とりあえず誰かを入れたいという場合はいいかもしれませんが、案件に適性が合わない場合は大変です。
デザインを外部のデザイン会社に外注する
デザイン自体を外部のデザイン会社に丸投げするのは手っ取り早いです。
懸念点としてはwebサイトで訴求したい内容の理解が低いデザイナーが担当すると希望とは違ったものが上がってくる可能性があります。
案件のうち打ち合わせをする際に実際に担当するデザイナーが同席することは稀なので、営業などからうまく意図が伝わっていないと余計な時間がかかることにあります。また、コストも当然高めになります。
デザイナーとクラウドソーシングでマッチングする
フリーのwebデザイナーとクラウドソーシング上でマッチングするという手もあります。Webデザイナーは雇用されるよりもフリーで案件ごとに受注した方が稼げるという傾向が年々強まっており、能力があればすぐ独立といった風潮があります。クラウドソーシングであれば、こうしたデザイナーと直接案件の打ち合わせをすることができます。
フラットデザインを実現できるデザイナーを募集するならクラウドソーシング
フラットデザインを実現できるwebデザイナーを探すならクラウドソーシングがオススメです。案件ごとの契約になるため雇用にはなりませんし、開発が始まるまで費用は一切かかりません。