間違えて通学してしまい、セブンイレブンから学校に行く途中で気づいて慌てて帰宅！！
やってしまった～💦
一限目の途中で参加。
自由時間でさっそく,先日作成したWEBさいとのトップにアニメーションを取り入れてみた。
ずっとコパイロットと喧嘩して、話にならないのでチャッピーに切り替え。
大人の対応だった。
これからはまずチャッピーにしようと思う。
■アニメーションとは何か
画⾯上の⽂字や画像、ボタン、背景などに動きをつけることで、
利⽤者が情報を理解しやすくなったり、操作しやすくなったりします
利⽤者が画⾯の内容を理解しやすくするための⼿段であり、
情報を整理して伝える役割
■Webに動きが効果的な理由
⼈は動いているものを⾒ると⾃然に視線を向ける傾向があります
この性質を利⽤することで、デザイナーは⾒てほしい場所へ視線を誘導
動きは⽬⽴たせるための⼯夫であり、
情報を整理するための⽅法でもあります。
■アニメーションの役割
動きによって情報の重要性を伝えることができます
⾒せ⽅だけでなく伝え⽅そのものに関わっています
■視線を導く仕組み
⼈は画⾯を⾒る時、すべてを同時に読んでいるわけではありません。
まず全体を⾒て、その中で⽬⽴つものに注⽬します。
動きのあるものは強い視線誘導になります
視線誘導として使う場合は、動かす場所を限定することが⼤切
■理解を助ける動き
画⾯の変化を理解しやすくする役割があります。
利⽤者が操作した結果、何が変わったのかを⾃然に伝えることができます
利⽤者は変化の流れを感じることで、現在の状態を把握しやすくなります。
■操作に安⼼感を与える
ボタンを押した時に少し沈んだり、⾊が変化したりすると、操作が認識されたことが伝わります
⾒た⽬以上に、操作性を⽀える役割があります
■印象を作る表現
ゆっくり滑らかな動きは落ち着いた印象になります。
⾼級感や丁寧さを感じさせます。
⼀⽅で速く軽快な動きは、元気さや新しさを感じさせます。
ゲームやイベント系サイトではこのような表現がよく使われます
情報だけでなく、雰囲気を伝える役割
■良いアニメーションとは
⼤切なのは動きが⽬⽴つことではなく、役⽴つこと
デザイナーは、⾒せるための動きではなく、伝えるための動きを考える必要があります
■悪いアニメーションとは
悪いアニメーションは、⽬的がなく過剰な動きです
動きは強い表現だからこそ使いすぎに注意が必要です。
派⼿さを出したくても、必要以上に追加すると逆効果
要な場所に必要なだけ使うことが基本
■基礎理論
変化を⾒ることで、利⽤者は情報の重要性を判断します。
動いているものは「何か意味がある」と感じやすいからです。
Webアニメーションはこの視覚特性を活⽤しています。
⼈の感じ⽅を理解して設計することで、より分かりやすい画⾯を作ることができます。
■Webで使われるアニメーションの種類
■フェードアニメーション→要素が徐々に現れたり消えたりする表現
■スライドアニメーション→要素が画⾯の外や別の位置から移動して現れる表現
■拡⼤と縮⼩→要素の⼤きさを変化させるアニメーションです。特に注⽬を集めたい時に使われる
■ホバーアニメーション→マウスカーソルを重ねた時に起こる変化
■ローディングアニメーション→読み込み中であることを知らせる
■スクロールアニメーション→ページを上下に移動した時に連動して動く表現
■パララックス→複数の要素を異なる速度で動かす表現。主に背景と前⾯の動きに差をつけて、奥⾏きや⽴体感を感じさせます
■マイクロインタラクション→⼩さな操作に対する細かな反応。例えばボタンを押した時の⼩さな反応や、通知アイコンの変化
■実例を⾒る時の考え⽅
その動きが視線を集めるためなのか、変化を伝えるためなのか、
操作を補助するためなのかを考えます。
⽬的を意識して観察すると理解が深まります
■AI時代の制作環境
アニメーションのアイデアを考えること、実装⽅法を調べること、コードを書くこと、複数案を⽐較することなど、多くの作業をAIが⽀援できます
■AIが得意なこと
既に存在する情報を整理し、提案することが得意
コードの⽣成にも強みがあります。
CSSやJavaScriptの記述を⽀援できるため、作業時間を短縮できます。
特に試作段階では、AIによる⽀援が⾮常に有効です
ただし、AIが提案する内容は万能ではありません。
提案がそのまま最適とは限らず、使い⽅を判断する⼈が必要です。
■AIが苦⼿なこと
特に苦⼿なのは、⽬的の優先順位を考えること
利⽤者の感情や空気感を細かく読み取ることも難しい
AIは制作を助ける道具ではありますが、最終的な判断は⼈
■AIと⼀緒に作る考え⽅
AIを使う⼈と使わない⼈では、作業効率に差が⽣まれやすくなります
完成品を作るものというより、作業を補助するもの
⾃分の考えを整理し、⽬的を明確にし、必要な情報を引き出します。
使いこなすためには、考える⼒が必要
■Webデザイナーの価値
なぜその動きが必要かを考えるのは⼈です。
利⽤者に何を感じてほしいのかを設計することが重要
技術だけでなく、設計⼒が求められます
■提案する⼒
アニメーションを追加する時、その理由を説明できなければいけません
AIが案を出しても、理由を伝えるのは⼈の役割
■設計する⼒
アニメーションもデザインの⼀部であり、設計が必要です。
どこに使うかだけでなく、どのくらい動かすかも考えます
設計とは、⽬的に合わせて要素を調整することです。
感覚だけではなく、意図を持って決める必要があります
■AI活⽤の実際
実際の現場では、AIを使って制作の準備を進めることが増えています。
例えば、アニメーション案を複数作って⽐較したり、簡単なコードを⽣成して確認したりします
ただし、AIが出す案をそのまま採⽤することは少なく、多くの場合は修正が⼊ります
■これから必要な⼒
単純な作業⼒だけでなく、⾒る⼒、考える⼒、説明する⼒が重要
■AI時代の考え⽅
AIは制作を変えていますが、デザインの本質は変わっていません。
利⽤者に伝わるものを作ることが⽬的
これからのWebデザイナーは、作る⼈であると同時に、
判断する⼈であることが求められます
■なぜ判断が必要なのか
アニメーションは状況によって最適解が変わります。
だからこそWebデザイナーが考え、判断する必要があります。
技術だけでなく、⽬的に応じた選択が求められます
■誰に向けるかを考える
■⽬的を明確にする
■動きの強さを決める
■速度を決める
■タイミングを決める
■情報量との関係
■デザイン全体との調和
■実務での判断
■良い判断基準