SwapSkills Build（Vol.32）「フラットデザインの概要とRWDのWin8 UI」イベントレポート

SwapSkills Buildの32回目となる「フラットデザインの概要とRWD（レスポンシブウェブデザイン）のWin8 UI」が、2013年5月22日（水⁠）⁠、東京都中央区の「大槻社労士事務所」にて開催されました。本稿では本イベントのレポートをお届けします。

今回のイベント内容が注目を浴びている事は、席の埋まり具合からも伝わってきました。

講師を務めたWeb Directions Eastの菊池崇氏が、WEBでの新しいキーワード「フラットデザイン」「⁠RWDのWin8 UI」について解説しました。

フラットデザインのコンセプト

まず、A List Apartの記事を元にフラットデザインの考え方を紹介していただきました。

フラットデザインとは、のぺっとした影の無いデザインという見た目の印象で考えるのではなく、物質の素材を活かすことで、長い間新鮮に感じることができる、高い価値を持つデザインを考えるという事です。表面的な流行ではなく、WEBという媒体からフラットなデザインに注目されています。

続いて、フラットデザイン制作における要点を紹介していただきました。

フラットデザインは一見簡単そうではありますが、非常に難しい要素があり、その実装のポイントを解説していただきました。以下に、5つのポイントとしてご紹介させていただきます。

1．色は明度と彩度を利用すると良い

Webインスペクタを利用して、HSLで調整する方法の紹介です。

2．影を利用しない

2つ目に、影を利用しない理由としてWEB上には光源がないということを説明していただきました。

その反面、影がないことでユーザーが気づかないデザインになってしまう危険性もあるとのことです。

3．アイコンをなるべく利用しない

フラットデザインを作る際には、アイコンを利用することが多いかと思われていますが、実はあまり利用しないことがフラットデザインを上手に作るポイントです。

その例として、マイクロソフトのサイトを参考に解説されました。デザイン上で影等の装飾はなく、コーポレートに関するアイコン以外は使用していませんでした。アイコンの使用はが少ない方が効果的ということを理解することができました。

4．強く押し出すパーツを置かない

Windowsストアアプリのデフォルトの天気アプリ等を例にあげ、強く押し出されてしまっているパーツに関して解説されました。天気アプリでは、青空の背景に赤いバナーが大きく入っていて必要以上に目に入ってしまう状態でした。

5．背景をうまく利用する

グラデーションや影を使用しないことによる、のっぺり感を和らげるために、背景に画像などを有効的に入れることが多いとのことです。参考例のアプリでは、背景の上にタイル状のリンクがあり、メリハリがあってきれいに見えました。

上記の5点を意識してデザインすることが、フラットデザイン作成のポイントだということです。

次に、WEB標準だけでできるWindowsStoreアプリのテンプレートについて説明していただきました。参考例にだされたものは、allWebクリエイター塾オリジナルのテンプレートで、WEBデザイナーやコーダーがデザインだけに集中してレイアウトできるテンプレートです。

このテンプレートの構成を紹介していただき、どの部分をカスタマイズするとレイアウトが変更できるかなどの解説をしただきました。visial studioを用いてアプリも簡単に作成できるようで、とても便利です。以下に、その便利な点を4つ挙げておきます。

最後に、フラットデザインは発展途上なので、早目に挑戦し問題の解決策を考える事が大事だということを話され、今回の勉強会の締めくくりとなりました。

SwapSkillsBuild（Vol.46）「⁠フラットデザインの概要とRWD（レスポンシブウェブデザイン）のWin8 UI」の様子は動画で配信されるのでぜひ以下のサイトをチェックしてください。