Googleが推奨する「マテリアルデザイン」
装飾を排除したシンプルな見た目や、独特なインタラクションがフォーカスされがちですが、
実はこのデザイン思想の背景には、スマホ社会における大きな問題への解決の文脈が含まれています。
それは、
「あらゆるスクリーンサイズに最適化する」
ということです。
「端末の数だけスクリーンサイズがある」
というほどに、微妙な変化を遂げながら進化する解像度のトレンドですが、
新しいデバイスが登場するたびに、
「げっ！また仕事が増えた。。」
と不安を漏らしていたデザイナーも少なく無いはず。
作り手の心情として、
「ユーザーに届けるものは細部まできっちり丁寧にデザインしたい」
という反面、
「解像度別のパーツ書き出しが、もはや修行の域。。。」
なんてことが繰り返されていました。
そこで登場し始めたのがこのこの「マテリアルデザイン」です。
スクリーンサイズが変化してもフレキシブルに対応できるように、
装飾を減らしたミニマルデザインをベースに、
その独特な「奥行き」と「触感」を表現することで、
ユーザーにとって直感的に操作できる工夫がなされています。
今回はそんな、「マテリアルデザイン」のデザイン思想を踏襲した
おすすめのスマホアプリを10サービスほど紹介したいと思います。
1. Google+
本家なだけあって、余すことなくマテリアルデザインを体感できます。
カード読み込み時のちょっとしたインタラクションや、
遷移時のアニメーションが非常に心地よく、奥行きを感じるアプリです。
2. Airbnb
シェアリングサービスとして有名な「Airbnb」
宿泊先をより魅力的に見えるように写真を大きく扱った作りが印象的。
3. Cal: Any.do Calendar | カレンダー
スケジュール管理をしてくれるアプリ。
Googleアカウントと同期すると便利なこのアプリですが、
操作が直感的でわかりやすく、縦横のスワイプのシームレスさが絶妙に気持ち良いアプリです。
5. Endomondo
ランニングの計測系アプリ。
大きなボタンと、カラフルなアイコンが印象的なこのアプリ。
ワークアウトの結果画面にはカードUIが使われています。
6. Evernote
FABのインタラクションが目を引くアプリですが、
画面設計も優れており、サービス独自の複雑な機能を、
マテリアルデザインを踏襲したUIでしっかりと消化させている辺りが非常に参考になります。
7. EyeEm
画像加工系のアプリ。
全体的に黒を基調とし、ダイナミックな写真が印象的なアプリですが、
ゆとりを持って組まれたレイアウトと、遷移時のシームレスさが心地よい奥行きを演出しています。
8. Fancy
おしゃれなアイテムが買えるEC系のアプリ。
でかでかと表示された写真のインパクトと、ゆったりとした作りが印象的なアプリですが、
遷移時の微妙なスケール感が、奥行きをうまく演出していて、
ページを繰るような感覚で楽しめるアプリです。
9. The Hunt
ファッション系のアプリ。
FABなど、ボタンを押した際の画面切り替え時のトランジションが印象的で、
場面の変化をうまく演出しています。
10. Tumblr
独自カスタムが可能なPCサイトとは違い、シンプルな作りが売りのアプリ版Tumblr。
硬すぎず、ゆるすぎず、絶妙なテイストのアイコンと、ゆとりのあるレイアウトが
安心感を演出しているこのアプリ。
実は、右下のFABがドラッグできるという遊び心もにくいですよね。
以上、
パッと思い浮かんだものをご紹介しましたが、
マテリアルデザイン対応しているアプリは今後もますます増えてくることかと思います。
ここで注意すべきは、
ただ、「マテリアルデザインのガイドラインを遵守する」ということではなく、
それぞれサービスの世界観に合わせて、
マテリアルデザインをうまく取り入れ（場合によってはhackし）、
ユーザーにとって使いやすいものへと消化させる
ことだと思います。
そういう意味でマテリアルデザインは
「厳格なレギュレーション」ではなく、
「参考にすべき指標」
として、よりフレキシブルに捉えるべきだと感じるようになりました。
【番外編】 Material Design UI Template
最後に、
マテリアルデザインの実装の参考例として、
以下のようなUIサンプルに特化したアプリも数多くありますので、
デザインする際の参考としてみてはいかがでしょうか。
0コメント