皆さま、こんにちは。
今回はWordPressでWEBサイトを構築する時に必要となる”コーディング指示書”。コーディング指示書は、コーディング作業時に必要な情報を、WEBデザインと合わせてコーディング担当者（コーダー）さんや制作会社さんにお渡しするものです。
くまWEBではコーディング指示書についての記事をシリーズで公開しています。
・コーディング指示書の作成におすすめのツール紹介
・ディレクトリマップの作り方
・サイト基本情報の伝え方
・スライダー、アニメーション（当記事）
・メニュー、ナビゲーション、フォーム
今回は【スライダー、アニメーション】に関する指示の出し方です。
主な6項目について指示出し方法をご紹介します。
- スライダー
- カーソルを合わせた時の動き
- アイコンの動き
- 読み込み中画面（ローディング）
- 画像や要素フェードインの動き
- 隠していた要素を出す動き
デザインデータを見ただけでは、コーディング担当者さんはどんな（スピードや方向など）動きを実装すればよいかわからないため、「このような動きを出して欲しい」といった指示出しが必要となります。
当記事で紹介する指示の出し方が皆さまがイメージする動きとピッタリではないかもしれませんが、「この動きをどう伝えたらいいんだろう？」とお悩みになられている方がコーディング指示を出す際の参考にしていただければ幸いです。
１．スライダー（スライドショー）の指示
スライダー（スライドショー）は限られたスペースで複数の画像やコンテンツを見せられるため、トップページやECサイトの人気商品紹介、メディアの人機記事紹介などによく使われます。
デザインからは「ここは横に動く」程度の内容は伝わりますが、どのようなスピードで動かすかなど必要な項目を、コーディング担当者さんに伝える必要があります。
・最大表示件数
・画像をクリックしたときの動作（例：該当記事へ飛ぶ、指定URLへリンク）
・画像の切り替えスピード
・ループが必要かどうか
・参考URL（イメージと似ているWEBサイトを共有） など
＜指示の書き方例＞
デザインデータのスクリーンショットに書き加えると伝わりやすいです。
２．カーソルを合わせた時の動き（アニメーション）についての指示
カーソルを合わせた時の動きのことを、マウスオーバーやホバー（hover）ということもあります。ブラウザ上でマウスを合わせると動いたり色が変わったり下線が出たり、さまざまな仕掛けを目にしますよね。
カーソルを合わせた時にどういう動きをさせたいかを具体的にコーディング担当者に指示する必要があります。
・色の変化
・動き
・参考URL など
＜指示の書き方例①＞
＜指示の書き方例②＞
専門的な言葉ではなくイメージを具体的に伝えることと、参考URLを提示することで仕上がりにズレが出づらくなります。
３．アイコンの動きの指示
カーソルに連動せず画像が動く部分についての指示です。
訪問者様に見て欲しい部分を目立たせたり、伝えたいことをより強く伝えたりする目的でポイントとして画像に動きを付けると効果的です。すごく目立ちますし、しっかり作り込んだWEBサイトであると感じてもらえます。
・どの画像を動かすか
・動き方
・カーソルを合わせた時の動き
・動きはループするか
・参考URL など
＜指示の書き方例＞
４．読み込み中（ローディング）
WEBサイトを読み込み中であることを訪問者様に伝える役割を持っているのが、ローディングアニメーションです。最近よく使われる動きです。WEBサイトがジワジワと読み込まれるのを訪問者様に見せないようにするために、読み込み中に「ローディング画面」を表示させます。
＜指示方法＞
ローディング画面を出して欲しいということで伝わります。どんなローディング画面にするかはいろいろとパターンが選べますので、ご希望を伝えてください。
・ロゴが浮き上がるような表示をする
・読み込まれている割合が分かるゲージを表示する
・風車のようなクルクルと回るアイコンを使う など
【例】
くまWEBではローディング中に↓以下のような動くシンプルなアイコンを表示させています。
５．画像や要素フェードインの動き
WEBサイトをスクロールした時に、順番に画像が出てきたり、ふわっとフェードインしてきたりする動きについてです。
画像をたくさん使っているWEBサイトや、縦スクロールが長いWEBサイトでは、フェードインしてくる動きがあるとリズムがついて下までスクロールしてもらいやすくなるなど、「おしゃれ」「かわいい」以外のメリットもあると考えます。
・下から上
・左から右
・ランダム などフェードインの方向を指定します。
また、ブラウザに読み込まれた時点でフェードインが発生するので、WEBページ1枚のどの辺りからフェードインのアニメーションをスタートさせるかの指示も必要です。
＜書き方例＞
６．隠していた要素を出す動き
WEBページが表示されたときには隠しておき、決めたタイミングで表示させる動きもあります。
・何をどのタイミングで表示させるか
・表示させた後の動きをどうするか
・参考URL などを指示します
＜書き方例＞
資料請求への誘導や、セール情報などをある一定の時間が経過後に表示させるなど、さまざまな誘導、訴求に使えます。訴求を主目的にする場合、このようなWEBデザインとは少し違う観点から考える必要があるかもしれませんので、ディレクターさんやマーケターさんが指示を考えるのも良いかもしれません。
まとめ
WEBサイトにはデザイン以外にも”動き（アニメーション）”という軸で工夫を凝らすことができます。さまざまな動きを付けられことを知っていただけたら、より一層効果の高いWEBサイトに仕上げることができると思っています。
コーディングの指示にも【参考サイト】があるとチーム全体の作業がスムーズですので、「こんな動きも面白いな」など他のWEBサイトを閲覧しているときに発見があったら、そのサイトをメモしておいていただけると役に立つ時が来ると思います。
どういう動きがあればご自身のWEBサイトが発展するか、効果的になるかなど考えるのは楽しいものですので、WEBサイトの制作やリニューアル時には動きの入れ方にも注力して制作いただけたらより価値のあるWEBサイトができるのではと考えています。