マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEBデザイン WEB制作

知らなかった!じゃ済まされない。フラットデザインの落とし穴

投稿日:2014年12月10日 更新日:

こんばんわ!WEBデザイナー歴10年目に突入間近のHです!

以前、2015年に流行るWEBデザインのトレンドを3つ、ご紹介させて頂きました。

①フラットデザインの更なる普及
②クリックを出来るだけ減らす縦長デザインと面白みを出すパララックス、そしてマルチデバイス対応のレスポンシブデザイン
③通信速度を速めるためWEBフォントの多様化

詳しく知りたい方はこちら↓
先取り!2015年に流行るWEBデザインのトレンドは!?

この3つを大きな柱に2015年のWEBデザインは進化していくのではないかと言われています。

そのうちの1つ目、”フラットデザインの更なる普及”ですが、流行のデザインには思わぬ落とし穴が付き物です。

「クライアントが”フラットデザインにしたい”と言うから。」

クライアントは本当にフラットデザインの本質を理解しているのでしょうか?

”かっこいいから” ”最新のデザインだから”

確かにその通りです。
ですが、ただ流行りに流されているだけ、という事はないでしょうか?

クライアントの過ちを正しい方向へと軌道修正するのもわたしたちの努め。
そこで、クライアントにとってベストな提案をするために、フラットデザインの注意点を把握しておきましょう。

02

フラットデザインの注意点

①本当のデザイン力が求められる

03

出来上がったデザインがシンプルなほど、時間がかからず、簡単で、デザインをそれほど学んでいなくとも出来る、というイメージは大間違いです。

シンプルでクリーンなデザインほど、難しく、労力がかかり、本当のデザインセンスが求められます。

”余白の美”これを追求できるデザイナーほど、フラットデザインの依頼が来た場合、心してかかる必要性を感じます。

ごてごての装飾でごまかせそうなデザインの方がよっぽどラクなんです。(ただ、そういったデザインはテクスチャの処理などで、別の意味で大幅な時間が必要ですが…)
そういったごまかしの効かないデザインほど、一歩でも間違うと、とんでもなくダサくなったり、バランスが悪いちぐはぐなデザインになってしまいます。

デザイナーとして自分がフラットデザインを引き受ける場合は、その力量が自分にあるかどうか、ディレクターの立場の場合は、依頼するデザイナーにそのセンスがあるかどうかを見極めることが必要です。

②ユーザビリティの低下

04
フラットデザインのサイトを見ていて、時々こう感じたことはありませんか?

”え?どこに行けばいいの?”
”え?これボタンだったの?”

ボタンであると感じさせるデザインのコツは、

①矢印などの装飾
②立体感を表すグラデーションやドロップシャドウ
③”詳細はこちら”のような続きがあると思わせるコピー

この3つです。

シンプルなフラットデザインのコンセプトは「余計なものを削ぎ落とす」ですから、まず、②の”立体感”は必要ありません。フラットは”平ら・平面”という意味ですから。

そして③の”コピー”もできるだけ余計なものを削ぎ落とします。
”詳細はこちら”の場合、”詳細”のみ、もしくは”MORE”のみです。

更に①の”矢印などの装飾”も削ぎ落とします。
沢山ボタンが羅列するデザインだとフラットな印象を与えられません。

このような基本コンプトを守りながらデザインしていくと、”え?これボタンだったの?”という印象のデザインが出来やすくなります。

ボタン以外の周りのインターフェースもこれに順じていますから、統一感があるが故に更に判断できないデザインになりやすいでしょう。

このような

ユーザビリティの低下を引き起こしやすくなるデザインである

という事を理解してください。

”流行だから””デザインがかっこいいから”という理由でデザインを進めても、公開後、一般ユーザーの目に留まったときに”分かり難い”という声を聞くことになれば本末転倒。

サイトの目的によって、フラットデザインを採用していいのかどうか、見極めることが必要です。

③数年後、時代遅れになる

05

WEBデザインのまとめサイト等で、特に2~3年前の過去をさかのぼったデザインを見ていると、このように感じた事はありませんか?

”やたら似たようなデザインが多いいなぁ”

そうです。なぜなら、その頃にそのデザインが流行ったからなんです。
今、そのデザインを見ると、古臭いイメージを覚えませんか?

一度、目新しいデザインが流行ると、どこの企業もそのデザインを反映させる傾向にあるので、自然とわたしたちの目に触れる機会が多くなります。

同じデザインを見ていると、だんだんと次第に飽きてきます。

例えると、真新しい芸を披露して一躍、時の人となった芸人が次の年には消えていなくなっている、あの一発屋現象とどことなく似ています。

多く露出している芸能人をテレビで見ているとだんだん飽きてきますよね?その感覚と同じです。

数年先のことなんて誰にも分かりませんが、飽きられる可能性、時代の変化と共にダサくなっていく可能性を考慮しておかなければなりません。

以上のことを踏まえて、フラットデザインを採用するか否か、参考になれば幸いです!

06

株式会社マーカーネットにホームページ制作・WEB制作の依頼をお願いしたい方は是非こちらからどうぞ!

-WEBデザイン, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

今まで角丸のデザインにするには画像を背景に設定したりしていましたが、 幅や高さが変わるとそれに沿った画像を作成しなくてはならない場合があります。 それだと効率も悪く、修正もしづらいためコーディングが大 …

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第一弾として「個性的な英字フォント( …

【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その1~

【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その1~

皆様こんばんは。 今春に新卒で入社しました、ひよっこWEB制作者のMです。 お腹と背中に貼るカイロを装備し、なんとか寒さをしのいでおります。 先日誕生日を迎え、ついにハタチと言えなくなってしまいました …

no image

ブラウザによって画質変わっている!?気づかなかった…ブラウザの自動画像処理!

ブラウザによって画質変わっている!?気づかなかった…ブラウザの自動画像処理! https://www.markernet.co.jp/blog/2015/07/31/post-5902/ Facebo …

【フラットデザインに+α】2014年のWebデザイントレンド3選

【フラットデザインに+α】2014年のWebデザイントレンド3選

近年、あちこちのサイトで見かけるようになったフラットデザイン。 レスポンシブと組み合わせたり、フルスクリーン表示にさせたりと応用法も様々に、オシャレなWEBサイトが増えていますね! そこで、今回はこの …