2014年のトレンド振り返り（1）「デザイン」

さてついに12月になりました。今月は2014年の振り返りネタをメインにしていこうと思います。まずはデザインをテーマにします。

フラットUI

iOS 7あたりから普及がはじまったフラットUIですが、2014年になってさらに多彩なスタイルシートフレームワークが登場しています。AndroidもフラットUIが使われていること、モバイルファーストの流れもあって、今後もさらにフラットUI化が進んでいくと思われます。

特徴としては空間を広めに使ったデザインで、情報の構造設計に重点を置いているところにあると思います。日本のWebサイト、アプリデザインはごちゃっとしたイメージが強いのでゼロからフラットUIで作るのは困難かも知れません。その点においてもフレームワークを取り入れる価値は大きいと思われます。

マテリアルデザイン

フラットUIの進化形としてGoogleが提唱したのがマテリアルデザインです。現実世界にヒントを得て、ユーザの感じるストレスを極限まで低くしていくことが求められています。押した時の跳ね返りやフォーカスが当たった時のハイライトなど、ユーザが行ったアクションに対して適切なレスポンスを返すことで操作していく中で迷うポイントをなくしていきます。

フラットUIの場合、どこがタップできるのか、タップした時のエフェクトがなかったりする場合が多かったので取り入れるとユーザビリティが高まるでしょう。ただしエフェクトやアニメーションは簡単に実装できるものではないのでゼロから作るのは相当敷居が高くなったと言えます。

管理画面

Bootstrapを使った管理画面デザインも数多く登場しました。Bootstrapを使うといわゆるBootstrap臭が強く出てしまうのでユーザ向けの画面に使うのをはばかられる場合があります。それに対して社内的な管理画面であればそれなりの見栄えであれば十分なのでBootstrapを導入できる余地はとても大きいです。

使いやすい管理画面はシステム管理者にとっても嬉しいものです。作り方が統一されるのは後々のメンテナンスを考えてもメリットがあります。

スタイルガイド

複数人でWeb、アプリデザインを行う上でそのコンセプトや部品の使い方を共通化するためにスタイルガイドはとても大事な存在です。今年はそうしたスタイルガイドライブラリもたくさん登場しました。大きく分けてスタイルシートに直接記述するものと別ファイルに分けるものがあります。

JavaDocやRDocなどの流れを考えるとスタイルシート上にある方が分かりやすいかも知れません。ただし仕様書のようなドキュメントにまとめることを考えると別ファイルの方が柔軟性があることもあります。前者は現場向き、後者は管理者向きかも知れません。

Web Font

Webサイトやアプリをデザインする上でアイコンの存在は欠かせません。従来は画像でしたが、今はWeb Fontを使ってアイコンを提供するケースが増えています。TrueTypeフォントの場合、拡大しても綺麗なままなのでSVG代わりに使うこともできます。基本単色ですが、合字することでカラーリングを表現する試みもあります。

使う際の注意点としては読み込まれない場合にアイコンがトウフになってしまうことでしょうか。そのため万一そうなったとしてもそれなりの表示が保たれるようにする必要があります。完全にアイコン頼りにせず、ラベルと組み合わせて使う必要があるでしょう。