今日のデザイン#027 マテリアルデザインのポイント「インタラクション」のアイデア13選

昨年よりフラットデザインに次ぐこれからの新デザイントレンドとして注目されている「マテリアルデザイン」。
配色やタイポグラフィとアイコンの使い方といったスタイル、レイヤーを感じさせるレイアウトに加え、アニメーション(モーション)がマテリアルデザインの重要な要素です。
[ cf. Google Design ]

とはいえ、静的なデザインしか作ったことがない人にとっては、アニメーションのデザインはなかなかハードルが高いもの。
以下のようなサンプルを参考に、これから先のWebクリエイターにとって必須スキルになるかもしれない「アニメーション(モーション)デザイン」のアイデアのストックを貯めておきましょう!

menu01

menu02

menu04

menu03

timeline

toggle

slide

loading

list

chat

14a8a72e97d4c4160c0111ded5c2b7bf

00785f1e39f93eb41cb423368ad90888

354401419ce6bef30a1b4a6177e8be64

スマホアプリの操作性の快適さを「ヌルヌル動く」と表現することがありますが、マテリアルデザインにおけるモーションのポイントは良い意味での”ひっかかり”。
リキッド感のあるひっかかりが心地よい操作性のポイントになるようです。
メニューなどサイトのキモになる箇所にこういった動きを加えて、今っぽいデザインを作れるようになりたいものです。

[ via Mobile Interaction Design on Behance ]
Designer Info
Designer’s Site

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です