MOONGIFTニコニコ出張所

学ぼう&使おう!業務で使えるオープンソース(144)「マテリアルデザイン」

2014/11/18 11:10 投稿

  • タグ:
  • 登録タグはありません
  • タグ:
  • 登録タグはありません

今回のテーマはマテリアルデザインです。Google I/Oで提唱されていらい、様々なライブラリ、フレームワークが登場しています。とはいえ見た目だけでなくフォーカスやクリックしたときのアニメーションも含めて考える必要があるため、なかなか作るのは難しいと思われます。

そんな中でも幾つか出てきたマテリアルデザインのフレームワーク、ライブラリを含め、その特徴を紹介します。

コンセプト

マテリアルとは素材のことです。これまでのWebやアプリではクリックできるか、入力状態がどうなっているのか、自分がどのステータスにいるのかなどを考えつつ操作しなければなりませんでした。それを実世界にある現象(押したら作用反作用があるなど)を取り入れることでより直感的に、ユーザが考えたりすることなく操作できる仕組みを取り入れています。

すべてのデバイス、スクリーンサイズに

マテリアルデザインは何もスマートフォン、タブレットに限らずすべてのデバイス、スクリーンサイズに対して使えるデザインコンセプトになります。その点はレスポンシブと被った考え方になるかも知れません。デザイン体験が統一できればブランディング向上にもつながるでしょう。

アニメーション

アニメーションはフラットデザインとマテリアルデザインを異なるものにしている肝だと思います。とはいえアニメーションが多ければ良いという訳ではなく、ユーザの迷いをなくすためのサポートができるアニメーションである必要があります。主張しすぎない、かといって気づかれないのでは意味がないと言ったところでしょうか。このあたりのバランスが難しいところだと思います。

肝は情報設計

フラットデザインが流行って以来、情報設計を重視する動きが強まっています。特にアプリのように全世界に対して誰でもすぐに使えるものを考えると適切、かつすっきりとした表示というのは大事になってくるはずです。最初はすっきりとした表示ができても、更新が行われるたびに徐々に機能が追加されていくのはよくあることです。1つ追加する時には1つマイナスするなどといった取り決めが必要でしょう。

 

ここから先は有料になります

ニコニコポイントで購入する

チャンネルに入会して購読する

  • この記事は過去記事の為、今入会しても読めません。ニコニコポイントでご購入下さい。

コメント

コメントはまだありません
コメントを書き込むにはログインしてください。

いまブロマガで人気の記事

継続入会すると1ヶ月分が無料です。 条件を読む

MOONGIFTチャンネル

MOONGIFTチャンネル

月額
¥550  (税込)
このチャンネルの詳細