Adobe XDで水平スクローリングを作成する方法
デザイナーとして私たちは皆、視聴者とユーザーに最大のコンテンツをご紹介したいと思っています。次世代のデバイスフォームファクターがより小さくなっていき、スクローリングはウェブサイトやアプリの不可欠なものとなっています。スクローリング機能なしでは、アプリやウェブサイトに表示される詳細や画像を読んだり見たりすることはできません。Adobe XDはデジタル製品のワイヤーフレーム、プロトタイプ、デザインを作成するための設計者や開発者に向けた最適なツールです。Adobe XD スクロールは、"スクロールグループ"のフォームでAdobe XDによって追加された新機能です。
Adobe XDで水平スクローリングアニメーションを作成する方法
XDデザインを作成する場合、長いコンテンツがアートボードに収まらないことがあります。スクロールグループの助けを借りて、単一のアートボード内で様々なスクローリング可能なグループを作成することができます。
スクロールグループが導入される前は、Adobe XDでスクローリングすることはアートボードの垂直スクロールに限られていました。現在、デザイナーが垂直、水平、又は垂直＆水平 (パンとも知られている) のスクロールを導入できる、より多くのオプションを使用できるようになりました。
Adobe XD水平スクロールの作成方法の詳細なガイドを以下にご説明します。
- スクロール可能なグループを作成するには、まずスクロールするレイヤーを有効にする必要があり、コンテンツ グループを選択する必要があります。次に、「水平スクロールボタン」をクリックします。
- 次のステップはAdobe XD のスクロール可能な範囲をデザイン又は選択することです。
- 次に、デザイン モードに移動し、スクロールグループに変更したいオブジェクトを選択します。
- プロパティインスペクタメニューのオプションを選択し(水平を選択)、スクローリングの際に位置を固定しアートボードの幅を指定します。.
- その後、プロトタイプモードを使用してアートボードをワイヤーフレームすることができます。スクローリングや前の位置の維持を行っている間、位置修正のようなプロトタイプモードでは様々なオプションがあります。
- 全てが設定されたら、Adobe XD水平スクロールからなるプロトタイプをプレビューする時間です。アートボードをプレビューするには、デスクトッププレビューをクリックします。プレビュー ウィンドウをドラッグして水平スクロールを表示することもできます。
スクロールグループは固有のUI要素のため、Adobe XDで使用するのに非常に便利です。水平 XDスクロールを作成する方法を考えたところで、垂直又は両方 (水平と垂直) を同じ方法で作成できます。
Adobe XDオルタナティブで水平スクローリングアニメーションを作成する方法
まず目を向けてみましょう。Adobe XDスクローリングはかなり複雑です。さらに、ますます多くのデザイナーがゼロインストール、クラウドベースのツールを好みようになりっています。デザイナーは、いつでもどのデバイスでも、Webブラウザからアクセスできるツールを好みます。
最も高く推奨されているものの１つ。クラウドベース及び完全なオンラインツールは Wondershare Mockitt です。
Wondershare Mockittは、より迅速にアニメーション化やプロトタイプの作成の手助けをします。Wondershare Mockittでは、コーディングの知識を持たずにワンクリックで簡単にプロトタイプをデザインできます。
ソフトウェアバージョンのインストール、ダウンロード又はアップデートの不要はありません。ログインしてブラウザを通じて直接使用できます。効率の向上に役立ち、データのセキュリティとリカバリを確実にします。オンライン/オフラインでデザインをデモし、インスタントフィードバックを得ることもできます。Wondershare Mockittは、簡単に円滑な水平又は垂直スクローリングを作成することを可能にする多種多様なテンプレートが付属しています。
このAdobe XDオルタナティブで水平スクローリングを作成する方法です。その方法は次のとおりです。
1. 新しいプロジェクトを作成する
Wondershare Mockittにログインしたら、新しいプロジェクトを作成しフォームファクタとデバイスタイプを選択することで開始できます。
2. 水平スクロールをデザインする
これで、すべてのワイヤーフレームキャンバスでの作業を開始するように設定されます。
- いくつかのウィジェット及びアイコンを追加します。いくつかの組み込みウィジェットとアイコンが利用可能で、キャンバスにドラッグするかウィジェットをダブルクリックしてキャンバスに追加できます。心配しなくても大丈夫です。簡単にあなたが好きなようにウィジェットを編集することができます。また、再度使用する際にウィジェットを保存することもできます。
- 複数の画像を追加する場合は、水平スクローリングを導入する必要があります。モバイルデバイスで表示すると、動的パネルがデバイスビューポートよりも大きくなることがあります。その場合、より多くを表示するために水平スクロールメニューが必要です。
- Wondershare Mockittテンプレートでは、コンテンツの水平及び垂直スクロール可能な範囲を作成することができます。テンプレートは水平方向、垂直方向又はその両方にスクロールするように設定できます。画面上に複数のスクロール可能な範囲を作成し、さらに別の範囲内にネストさせることもできます。
- 垂直スクロール、水平スクロール、またはマスクされた画像プレゼンテーションのいずれであっても、テンプレートを作成、全てのコンテンツを追加、そのテンプレートを画面上に配置し、プロトタイプに必要なスクロール可能な範囲を調整します。
3. 水平スクロールをプレビューする
水平スクロールをデザインしたら効果をプレビューします。ツールボタンの「プレビュー」をクリックし、スクロールの動作を確認できます。オンライン及びオフラインの両方で、PCやモバイルのウェブページでプレビューできます。
4. アプリ/プロトタイプを共有する
チームと協力して、初期のプロトタイプに関するインプットを取得する必要がありえます。フィードバックを得るためにユーザーとアプリやウェブサイトをテストすることもできます。ツールの共有ボタンをクリックすると、QRコード又は共有可能なリンクを作成することができます。
実際、水平スクロールを導入するにはWondershare Mockittで数回クリックするだけです。またAdobe XDでスクローリングするのとは異なり全てをオンラインで行うことができます。今日のほとんどのデジタル製品で水平スクロールが非常に一般的なため、シンプルなインタラクションにより設計者にとって貴重な時間を確実に節約できるのです。
