平井先生のオンライン授業日
1限目
学科 デザイン概論④
なぜAmazonのボタンはオレンジと黄色なのか？
2限目
学科 デザイン概論④
「Yahoo!ニュースは読みやすい？」レイアウトの秘密
3限目
学科 デザイン概論④
マイクロインタラクションの魔法 – ユーザー心理の小さな仕掛け
4限目
学科 デザイン概論④
課題制作
5限目
学科 デザイン概論④
課題制作
なぜAmazonのボタンはオレンジと黄色なのか？
アメリカではオレンジは購買意欲を掻き立てる色と言われている。
アマゾンの検索やカートに入れるボタンは黄色系の色が使われているので、
お客さんが商品買いたくなるように設計されている。
「Yahoo!ニュースは読みやすい？」レイアウトの秘密
Yahoo!ニュースはF型と言われる形でサイトが作られている。
F型はしっかり読んでもらいたい時に使用される傾向がある。
対してアメリカのニュースサイトはZ形で作成されている。
Z型 視覚的にアピールしたいときに使用される。
グーテンベルク・ダイアグラム
グーテンベルク・ダイアグラムとは、
人が紙やWebページをどの順番で見ていくかを示した視線の流れのモデルです。
特に横書き・左上から読む文化（日本語横書き／英語など）で使われます。
4つのエリア
ページは次の4つに分けて考えます。
- 第一注視点（左上）
- いちばん最初に見る
- ロゴ、タイトル、キャッチコピー向き
- 強調エリア（右上）
- 重要だと認識しやすい
- ボタン、重要な情報向き
- 弱注視エリア（左下）
- あまり見られない
- 補足情報向き
- 終着点（右下）
- 最後に視線が止まりやすい
- CTA（申し込み・購入ボタン）向き
マイクロインタラクション
マイクロインタラクションは、
ユーザーに安心感と気持ちよさを与える小さな演出です。
SNSのいいねボタンや、Gmailの送信ボタンを押すと
反応してアニメーションが出る。
ユーザーは反応が返ってくるので安心感が出る。
すぐにアニメーションは終わってしまうため、
アニメーションをもう一度見たくなり、
また押してみたいという心理も与えることが出来る。
課題制作の時間では、更にポートフォリオサイトを充実させました。
コメント