#UI
「デザイナーよ。足を動かせ。頭を動かせ。手を動かせ。」 ー UI Crunch#14 スマートフォンを超えた体験を創る。導くUI
こんにちは！
渋谷でデザイナーをしているちょいちょい（@739nanak）です。
UI Crunch#14にnoteレポート枠で参加してきました✏️
長いので、ざっと読みたい方は太字だけ追っていくことをお勧めします！
1. かわいいが届くまで （FLOWER/ROLLCAKE） 🖥登壇者・サービス
- 木坂 名央さん（ROLLCAKE株式会社 デザイナー）
- FLOWER（「かわいい」が
【翻訳してみた】マテリアルデザイン - モーションデザインを理解すること
前置き
モーションデザインに関する日本語文献の不足を憂い、自身の知見の為にも翻訳をしてみることにしました。こちらはGoogleが発表したUIガイドラインのマテリアルデザインからモーションデザインについての翻訳になります。
引用元 Google - Material Design
Understanding motion - Material Design
※動画像データもこちらから引用させてい
【翻訳してみた】マテリアルデザイン - 速度について
前置き
モーションデザインに関する日本語文献の不足を憂い、自身の知見の為にも翻訳をしてみることにしました。こちらはGoogleが発表したUIガイドラインのマテリアルデザインからモーションデザインについての翻訳になります。
前章 : マテリアルデザイン - モーションデザインを理解すること
引用元 Google - Material Design
Speed - Material Design
【翻訳してみた】マテリアルデザイン - コレオグラフィ
前置き
モーションデザインに関する日本語文献の不足を憂い、自身の知見の為にも翻訳をしてみることにしました。こちらはGoogleが発表したUIガイドラインのマテリアルデザインからモーションデザインについての翻訳になります。
前章 : マテリアルデザイン - 速度について
引用元 Google - Material Design
Choreography - Material Design
※動
【翻訳してみた】マテリアルデザイン - 動きのカスタマイズ1
前置き
モーションデザインに関する日本語文献の不足を憂い、自身の知見の為にも翻訳をしてみることにしました。こちらはGoogleが発表したUIガイドラインのマテリアルデザインからモーションデザインについての翻訳になります。今回は長いので2つに分けて投稿させていただきます。
前章 : マテリアルデザイン - コレオグラフィ
引用元 Google - Material Design
Customi
パスワードが合っていたことを視覚的にフィードバックするアニメーション
前回に引き続き、今回はパスワードが合っていたバージョン。
パスワードが合っていたことを視覚的にフィードバックするために意識したポイントは以下の2つ。
①チェックマークの出現と色の変化パスワード入力後にチェックマークが出現し、同時に色が変わることでパスワードが間違っていなかったことを視覚的に表現しています。
最初は鍵のアイコンだった部分が、チェックマークに切り替わることで、「鍵を開いた」ことを
エラーを視覚的にフィードバックするアニメーション
パスワードを入力してエラーになった際のアニメーションを作ってみました。
ユーザーが入力に誤りがあったことを即座に認識できるように意識したポイントは以下の3つ。
①ブルッと横に震えるアニメーションこのアニメーションは入力に間違いがあったときによく使われていますね。
現実世界でも人が「NO」を示す際に首を横にふることから、横に震えるアニメーションが誤りを示すことは理解しやすい。
②「Passw
