スタッフブログ

コーディングラボのスタッフから、
日々のつぶやきをお届けします。

旬なフラットデザインでホームページをイメージアップ

MicrosoftやAppleも採用するフラットデザインとは?

フラットデザインは、シンプルで伝わりやすく、無駄を削除した最先端のデザインであり、Windows8やiOS7といった最新OSのGUI(グラフィカルユーザーインターフェース)でも採用されています。これらの画面を見てみると、一つ一つのアイコンが以前のつやつやした立体感のあるものから、平面的なペタッとしたイメージのものに変わっており、使用されている色味もほぼ単色とシンプルなデザインになっていることが分かります。

現実感のないフラットなボタン、質感やつや感がないロゴ

webデザインにおいてフラットデザインのポイントとなるのは、「ボタン」と「ロゴ」です。まず、「ボタン」について。いままでは、「現実のボタンのイメージに近づけるため、webページで配置するボタンにも立体感をつけてボタンらしく」という考えが一般的でしたが、昨今ではこのようなデザインでなくてもクリックしてもらえるため、フラットなボタンが主流となってきています。

また、ロゴについては、デザインにマッチするように、自社ホームページで使う企業ロゴを、グラデーションやつや感のないものに変更するところが増えてきています。ちなみに、Appleは2014年に、グラデーションがついたデザインのロゴ(2007年から使用)から、フラットな旧タイプ(2006年以前に使われていた)に戻しましたし、Googleも最近密かにロゴの文字からドロップシャドウを排除し、フラットなデザインになっています。

厳選されたテキストや画像 余白がデザインを引き立たせる

テキストについては、長い説明文をなるべく避けて、短く強い言葉で印象を強くすること、画像については、ひとつの画面にたくさんの画像を盛り込まず、余白を意識しゆとりを持って配置する、のがポイントです。どうしても商品の説明などの長めの文章を盛り込みたいときには、コピー、画像や他の説明との間に充分な余白を持たせて、文字を読みやすくする工夫をするとよいでしょう。

このように、大変シンプルながら、センスが問われるデザインであることがお分かりいただけると思います。デザインで迷われましたら、気軽にご相談ください。