グラフ
数字やデータを、動きで印象に残すグラフの演出です。順に伸びる棒グラフや、スクロールでカウントアップする実績の数字を、デモとコードで紹介しています。
グラフのインタラクション（25件）
-
-
割合の積み上げ横棒グラフが年ごとに並び、区分の移り変わりが見える
-
工程表のグラフの帯が順に伸び、今日の線が進んで済んだ分が濃く塗られる
-
目標の線に向かって実績の棒グラフが伸び、届いた項目に「達成」の札が付く
-
面積で割合を見せるツリーマップのグラフが、タブの切り替えで組み替わる
-
アンケートの賛否の棒グラフが中央の線から左右に伸び、質問ごとに比べられる
-
積み上げの面グラフが下の層から順に満ちて現れる
-
散布図のグラフの点が中心から散って定位置に収まり、重ねると値が出る
-
ウォーターフォールのグラフの段が順に伸び、増減の積み上がりが見える
-
立体の棒グラフが順に伸び、カメラが斜め上から回る
-
タブの切り替えで棒グラフが新しい値へ伸び縮みし、目盛りと値が入れ替わる
-
レーダーグラフが中心から広がり、2 つの系列を比べる
-
1 年分のカレンダーのマス目が順に色づくグラフ
-
同心円のメーターが順に満ちるリング型のグラフ
-
グラフの数字が桁ごとに縦に回って変わる
-
ファネルのグラフの段が順に伸び、段ごとの転換率が現れる
-
円グラフの扇にホバーすると外へ浮き出し、中央の値が替わる
-
折れ線グラフをなぞると、点とツールチップが値についてくる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。