サイト内の問い合わせフォームの案内（使い方の説明）を、アニメーションGIFを使って作る方法を説明します。
まずは以下のようにスマートフォンでページを少しずつスクロールしながらスクリーンショットを撮り、これらの画像をパソコンに送ります。
次にスマートフォン（iPhone）のモックアップ画像を、フリー素材サイトからダウンロードします。
今回はfreepikというサイトからiPhone XのPSDファイル（Photoshopファイル）をダウンロードしました。
Photoshopでまずは新規作成。先ほどダウンロードしたiPhoneのモックアップPSDファイルと全てのスクリーンショット画像もPhotoshopで開き、これらを新規作成したファイルにドラッグ&ドロップします。
モックアップとスクリーンショットのサイズが合うように調整します。
スクリーンショット画像がモックアップの四隅をはみ出してしまっているので、このモックアップのレイヤーの下にスクリーンショット画像を移動します。半透明の白いレイヤーがかかっているので、これを非表示にします。スクリーンショット画像のレイヤーは順番に並べ、1番最初のレイヤーを下にし、2〜5番目のスクリーンショット画像レイヤーを非表示にします。
タイムラインを開き、フレームアニメーションを作成していきます。タイムライン上にフレームを6ほど、複製しながら作っていきます。
各フレームの表示時間がデフォルトでは0秒になっているので、これを変更します。今回はとりあえず各フレームそれぞれ2秒ずつにしたいので、全フレームを選択した状態で、フレームの「0秒」という箇所をクリック、時間を指定します。
1番目のフレームには1番目のレイヤーが表示されている状態になっています。各フレームごとに順番にスクリーンショット画像のレイヤーを表示させたいので、2番目のフレームを選択した状態で2番目のレイヤーのみを表示、3番目のフレームを選択した状態で3番目のレイヤーのみを表示、、、という要領で6番目のフレームまで進めます。
「アニメーションを再生」という、再生マークのアイコンをクリックするとアニメーションをプレビューできるので、これを見ながら時間や表示内容を確認します。
カンバスの右側部分には、各コマごとの説明文を入れていきます。新規レイヤーを作り、文字ツールで文字を書いたら、そのレイヤーを複製してレイヤーを6個にし、それぞれのフレームごとに表示・非表示を変えておきます。
「アニメーションを再生」でプレビューして表示を確認し、問題なければWeb用に保存。「最適化ファイル形式」はGIF、「ループオプション」は無限にして、「保存」をクリック。これでアニメーションGIFファイルが作られました。
このGIFファイルをSafariやChromeなどのブラウザで表示して、表示を確認してみてください。
以上になります。
↓この動画でもう少し詳しく説明していますので、よかったら見てください。
