SHEET K-48
形・奥行き・動きで
SVGによる表現
仕組みや
01表現の
形で伝わる、 SVG の表現。
- V01レイヤーの
立体表現 傾けた土台から、 層が 手前へ 浮き上がる。 何の 上に 何が 載り、 何の 中に 何が あるかを、 重なり そのもので 見せる 図。 - V02Lottie アニメーションデザイナーが
作った 動きを、 軽い データの まま SVG で 再生する。 読み込み中・完了・紹介の イラストまで、 無料で 使える 素材が そろっている。 - V03線を
引くように 線が動く アイコン 描かれて 現れる アイコン。 送信・完了・通知など、 操作の あとの 「伝わった」を、 小さな 動きで 返せる。 - V04読み込み中の
表示 待ち時間に「進んでいる」ことを 伝える 小さな 動き。 SVG と その 中の CSS だけで 動き、 ライブラリも いらない。 - V05動く
天気アイコン 太陽の光が 回り、 雲が 流れ、 雨や 雪が 降る。 小さな アイコンの 中で 天気が 動き、 ひと目で 様子が 伝わる。 - V06背景に
敷く 格子が動く 模様 光る、 点が またたく、 波紋が 広がる。 ページの 背景を、 文字の 邪魔を せずに 上品に 動かす模様。
