2013年5月22日にSwapSkills Buildの32回目となる「フラットデザインの概要とRWDのWin8 UI」についてのイベントが開催されました。
今回のイベント内容が注目を浴びている事は、席の埋まり具合からも伝わってくるほどで、皆様は熱心に参加されていました。
スピーカーはWeb Directions East CEOで、allWebクリエイター塾でも講師をしている菊池 崇氏です。webでの新しいキーワード「フラットデザイン」「RWDのWin8 UI」について解説していただきました。
菊池氏はフラットデザインが見た目の流行ではなく、コンセプトを理解する事が大事だと話しました。
参考にA List Apartの記事を取り上げ、考え方を紹介していただきました。フラットデザインとは、のぺっとした影の無いデザインという見た目の印象で考えるのではなく、物質の素材を活かすことで、長い間新鮮に感じることができる高い価値を持つデザインを考えるという事です。
記事では、material honesty = （物質に正直な）という言葉を使用しています。
菊池さんが例として、木を模した素材で装飾した車をスライドに映しました。その車の印象からは、何十年か前の映画で見かけるような印象を受けました。反対に、ステレンスのままの外装をほどこした車は現在でも古さを感じさせずに、高い人気を誇っているとのことです。まさに、長い間新鮮に感じる事ができる事を証明する一例です。
次に、実際にフラットデザインを制作する際のポイント5点をまとめて説明していただきました。
1：色は明度と彩度を利用すると良い。
この言葉は、要素がとてもシンプルであるため、微細な色の変化が重要になってくることを意識するためという事です。便利なツールの使用方法として、webインスペクタによるHSLで色を調整する方法の紹介がありました。
2：影を利用しないこと。
3：アイコンをなるべく利用しないこと。
これら2点について、マイクロソフトのサイトを参考に確認していきました。デザイン上の影はなく、コーポレートに関するアイコン以外は使用していませんでした。何となくのイメージでアイコンが多用されているように思われていることが多いが、決してそうではないと菊池氏は話しました。
4：強く押し出すパーツを置かないこと。
Windowsストアアプリのデフォルトの天気アプリ等を使用して確認しました。天気アプリでは、青空の背景に赤いバナーが大きく入っていて必要以上に目に入ってしまう状態でした。あまりに存在が強いため、広告としてはメリットかもしれませんが、アプリとしては必要な情報を取得できない、またはすぐに離脱してしまう可能性が強くなってしまうことを注意しました。
5：背景をうまく利用すること。
グラデーションや影を使用しないことで生まれてしまう、のっぺり感を和らげるために、背景に画像などを有効的に入れることが多い事例の紹介を紹介していただきました。参考のアプリでは、背景の上にタイル状のリンクがありました。メリハリがあり、要素がきれいに見えました。
この後の作業としては、visial studioを用いてアプリを作成するという流れになります。
最後に、フラットデザインは発展途上なので、早目に挑戦し問題の解決策を考える事が大事である。と話されていました。
