デザインのアニメーションGIFスクリーンショットをポートフォリオで機能させる3つの方法

最新のWebデザインプロジェクトが完了したら、それを披露してポートフォリオに追加します。 あなたのウェブサイトの訪問者（そして見込み客！）はあなたの素晴らしい仕事が実際に行われているのを見たいと思うでしょう。 優れた画像が重要であり、デジタルスペースでは、プロジェクトの機能を説明したい場合があります。 アニメーションのスクリーンショットでそれを披露することは完璧な解決策かもしれません。

アプリやウェブサイトがどのように機能するかを示す、クールでシンプルなアニメーションのスクリーンショットを見たことがあると思います。 画面キャプチャのGIFを使用すると、特定のタスクがどのように実行されるかをよりよく理解できると同時に、使用可能な機能も表示されます。 ビデオは確かにオプションであり、間違いなくWeb上で重要な位置を占めています。 詳細な製品ビデオやケーススタディは、ビデオ形式の恩恵を確実に受けます。 ただし、アニメーションのスクリーンショットGIFなど、より単純でファイルサイズを意識した選択が、まさにあなたが探しているものかもしれません。

アニメーションのスクリーンショットがポートフォリオにとって重要である理由

「GIF」と「JIF」のどちらの発音でも、GIFは単なる面白い猫や巧妙なタグラインの付いたムービークリップ以上のものである可能性があることを覚えておくことが重要です。 プロジェクトのアニメーションGIFは人目を引くものであり、デザイン機能を示すように慎重に計画する必要があります。 インターフェイス要素のアニメーション化は機能的かつ美的目的の両方であるため、GIFファイルにこれが示されています。 あなたの作品が提示するメニューとオプションをデモンストレーションしてみませんか？ スクロールがどのように機能するかを示してみませんか？ 機能を表示すると、ユーザーはアプリやウェブサイトがどのように役立つかを明確に理解できます。

GIFを作成するためのツール

GIFを作成するための次のツールのいずれかを使用するよりも、ハードワークを示すためのより良い方法はありません。 以下の例は、ユーザーがオプションをタップし、詳細を表示してから、スクロールしてより多くのコンテンツを表示した場合の外観を示しています。

注：このチュートリアルには、視覚的なデザイン手順はありません。 これらのヒントは、ポートフォリオプロジェクトのWebサイトまたはアプリケーションの設計がすでに完了していることを前提としています。

AdobePhotoshopでアニメーションGIFスクリーンショットを作成する方法

私の意見では、AdobePhotoshopとAdobeAfterEffectsがこの仕事に最適なツールです。 どちらも、最終製品を細かく制御できます。 私は個人的にPhotoshopがGIF画面キャプチャを作成するのが好きです（そしてほとんどのデザイナーはそれに非常に精通しています）ので、次の例はこのように構築されます。 始めましょう！

スクロール機能の表示

このデザインはAdobeXDで行われましたが、適切な名前のレイヤーを使用してPhotoshopにエクスポートされました。 この例には、リストページに「MinTourLocations List」、詳細ページに「Sculpture Garden Listing」というレイヤーがあり、最初のスクロールビューから外れた部分は「SculptureGardenListingOverflow」と呼ばれます。

パート1

1.タイムラインの設定と場所のリスト

タイムライン機能は、最終製品のさまざまな画面を作成するために使用するものです。 [ウィンドウ]>[タイムライン]に移動して、タイムラインパネルが開いていることを確認します。

これがリストページです。 ユーザーはここから開始して場所をタップすると、詳細ページに移動します。ここでスクロールして詳細を表示できます。

すでに最初のキーフレームが確立されていることがわかります。 キーフレームに正しいビューが表示されるように、正しいレイヤーが表示されていることを確認してください。

オプション：ユーザーがタップした場所を表示したい場合は、ドットで表示されることがあります。 これを行うには、ドット領域を含むフレームを追加します。

2.個々の場所の詳細

レイヤーで整理できることは大きな利点であり、スクリーンキャプチャGIFを作成するときにすべてをまっすぐに保つのに役立ちます。 タイムラインパネルのオプションに移動し、「新しいフレーム」を選択します。 ここでも同じことが言えます。正しいレイヤーが非表示/表示されていることを確認してください。 これについては、個々のリストを表示する必要があったため、場所リストレイヤーは非表示になっています。

3.個々の場所の詳細スクロールコンテンツ

Sculpture Gardenの個々のリストページにはより多くのコンテンツがあるため、スクロール領域をユーザーに表示する必要があります。 これは別のレイヤーにあったので、このオーバーフローコンテンツを表示するために新しいフレームを作成しました。

4.期間を選択します

これには多少の実験が必要になる場合がありますが、各フレームの期間を選択することが重要です。 ユーザーが各フレームを表示するのに十分な時間を確保する必要がありますが、次のフレームが表示されるまで長く待つ必要はありません。

フレームごとに値を入力し、アニメーション全体で合計5秒にしました。

5.プレビュー

これまでに何が起こっているのかを見てみるのは良いことです。 タイムラインパネルの一番下の行に再生ボタンがあります。 試してみて、改善できることがあるかどうかを確認してください。

（オプション）トゥイーンコントロール

物事は正しく順序付けられていますが、少しびくびくしているようです。 スクリーンショットのアニメーションを調整して、物事が少しスムーズに見えるようにすることができます。 タイムラインオプションには、「トゥイーン」オプションがあります。 現在のフレームと前のフレームの間でスムーズなアニメーションを自動的に作成するために、さらに多くのフレームを自動的に挿入することができます。

リストからリストオーバーフローまで、スクロールアクションのように見えるようにTweenが追加されました。 これらの新しいフレームは、0.05秒という非常に短い期間に設定されました（アプリでのスクロールは比較的高速に行われます）。

これをPhotoshopでループし続ける場合は、「Forever」が選択されていることを確認してください。 ループの数が設定されている場合は、その値を入力できます。

6.スクリーンキャプチャGIFの保存（スクリーンフローのみ）

これをアニメーションの画面フローとして含める場合は、保存が最後のステップになります。 この時点で、スクリーンショットアニメーションが作成され、正しいGIF形式で保存する必要があります。 静止画像の保存には慣れているかもしれませんが、一連の画像の保存は異なります。 このGIFファイルを保存するには、 [ファイル]>[Web用に保存]に移動します。

ここに、GIFに必要なすべての設定が表示されます。 色の数に制限があるため、エクスポートする前に見栄えを良くすることを忘れないでください。 ウェブサイトやアプリケーションは色の範囲が広い傾向があるため、256が最適なオプションである可能性が高いですが、デザインでそれが可能であれば、単純化できます（ファイルサイズを抑えることができます）。

右下隅にはいくつかの「アニメーション」設定もあります。 これを無期限にループさせたい場合は、ループを選択できます。 必要に応じて、設定した回数だけループすることもできます。 目的の場所に保存すると、準備が整います。

パート2：デバイスに搭載されたレイヤードスクリーン

続行することにした場合は、電話でよりリアルに見えるように、レイヤー化するためにいくつかの追加手順が必要です。 タイムラインパネルから、「FlattenFramesIntoLayers」を選択します。 各フレームはフラットレイヤーに変換され、最終的に26フレームになります（つまり、26レイヤーになります）。

保存したら、電話の画像をファイルに追加する必要があります。 これに対応するには、画像サイズのサイズ変更を行う必要があります。

1.アニメーションスクリーンショットのキャンバスサイズを調整します

背景画像は1300X920であるため、キャンバスのサイズをそれに正確に合わせるように調整する必要があります。 [画像]>[キャンバスサイズ]に移動し、正しいサイズを入力します。

2.レイヤーを電話スクリーンに配置する準備をします

次に、背景画像の新しいレイヤーを作成して、アニメーションを上にレイヤー化できるようにします。 ここで、「すべて選択」フレームレイヤーが役立ちます。

3.フレームを再確認します

これは、フレームがまだ計画どおりであることを確認する良い機会です。 タイムラインパネルからアニメーションを再生すると、アニメーション化されたシーケンスが表示されます。

4.画面をゆがめます

すべての画面レイヤーを選択して、すべてを一度にスキューして均一に保つことができるようにすることが重要です。 編集>変換>スキューはこれが行われる場所です。

少し実験が必要ですが、画面の境界に合うようにコーナーを調整して、画面がアニメーションで照らされているように見せます。

5.画像の調整とGIFスクリーンキャプチャの保存

今が調整を行う時です。 保存する前に、色、コントラスト、またはその他の最後の仕上げを行う必要があります。 アニメーションの保存は、パート1のステップ6で行ったものと同じです。

この例では、アニメーションを実際に目立たせるために、背景の彩度を下げ、コントラストを上げています。 これで、実際のデバイス上にあるように見えます。

Giphy

Photoshopがお好みのツールではない場合は、Giphyと呼ばれる無料の簡単なツールがあります。 （プロの使用に加えて、面白いGIFもたくさん作ることができます！）

「スライドショー」を選択した場合、これはアニメーションのスクリーンショットを作成するための良いオプションです。 これを使用するには、画面の個々のファイルを保存する必要があります。 次に、静止画像をドラッグアンドドロップすると、プロセスが開始されます。

ファイルがアップロードされたら、[スライドショーの作成]を選択します。 画像の作成が完了したら、ファイルをダウンロードできます。 それはそれと同じくらい簡単です！

それを記録する

このアプリはとてもシンプルです。 コンピューターの画面で行われたアクションを記録し、記録をRecordit.io Webサイトにアップロードし、共有可能なリンクを作成します。GIFをダウンロードするオプションもあります。

Recorditがコンピューターにインストールされると、タスクバーにアイコンが表示されます。 選択すると、記録する画面の領域にドラッグして選択できます。 これは、Adobe XDでプレビューモードに移行し、プロトタイプをデモに使用できたときに最適でした。

含めるエリアを選択すると、録音ボタンが表示されます。 「記録」を押すと、Recorditは、作成した境界内で、画面上で発生するすべてのことを記録します。 録音が終わったら、「停止」を選択するだけです。

数秒かかりますが、録音が停止すると、Recordit.ioサイトでホストされている録音へのリンクを示すポップアップが表示されます。

画面キャプチャのアニメーションGIFは、ユーザーフローとデザインプロジェクトがどのように機能するかを示すための優れた方法です。 ビデオにもその場所がありますが、GIFは非常にすばやく作成でき、オンラインポートフォリオに簡単に追加できます。

無料のワークシート：対象者とクライアントのペルソナ

コンテンツの関連性と魅力を維持するのに役立つ実用的なガイドをお探しですか？ この3ページのインタラクティブPDFは、視聴者を見つけ、コンテンツを監査し、ビジネスを成長させるためのゲームプランを作成するのに役立ちます。

この記事が気に入った場合は、次の記事もお楽しみいただけます。

• CSSを使用してSVGアニメーションを作成する方法
• WordPressビデオギャラリーを作成する方法
• スキップリンクを使用してWordPressサイトをよりアクセスしやすくする方法