Adobe XDで、スタッフのプロフィールカードを1つだけデザインすれば、後はリピートグリッド機能を使って全員の紹介ページがあっという間に完成します。
design-an-employee-bio-page_1000x560

必要な情報

このサンプルファイルには、このチュートリアルの学習内容の練習に使用できるAdobe Stock画像が含まれています。このチュートリアル以外でサンプルファイルを使用する場合には、Adobe Stockのライセンスを購入してください。このサンプルファイルの使用に適用される利用条件については、フォルダー内のReadMeファイルを参照してください。

練習用ファイルは自由にダウンロードしてご利用いただけます。またはご自身のファイルをご利用ください。スタッフカードのレイアウトをデザインしましょう。この練習では、シェイプで切り抜かれた写真、テキスト、グラフィックで構成されるシェイプのスタッフカードを作成します。すべてのカードを選択して、右側のプロパティインスペクターにあるリピートグリッドをクリックします。要素の周囲に2つのハンドルが付いた緑の点線が表示されます。

design-an-employee-bio-page_step1

緑のハンドルをドラッグして、スタッフカードを水平方向に繰り返し、次に垂直方向にも繰り返します。次のカードとの間隔を調整するには、グリッドを選択して、マウスカーソルを次のカードとの間に重ねます。カーソルの形が双方向の矢印に変わり、間隔がピンク色になります。クリック&ドラッグで、カードの間隔を水平方向と垂直方向ともに設定します。

design-an-employee-bio-page_step2

デザインの好みに応じて、スタッフ名のカラー、スタイル、サイズを変更します。他のカード要素のスタイルも適宜調整します。カラー、サイズ、位置などのスタイル変更はグローバル設定のため、グリッド内にある同じタイプの要素すべてに適用されます。

design-an-employee-bio-page_step3

選択ツールを選択したまま、コンピューターに保存された複数の画像をプロフィール画像のシェイプにドラックして、プレースホルダー画像を置き換えます。これで各スタッフの正しいプロフィール画像がグリッドに表示されます。グループオブジェクト内の項目を選択する場合は、Ctrlキー(Windows)または Commandキー(macOS)を押しながらクリックします。

design-an-employee-bio-page_step4

改行で区切ったスタッフ名リストを書式なしのプレーンテキストファイル(拡張子.txt)で作成し、それをスタッフ名オブジェクトにドラッグします。これで、グリッドに各スタッフの正しい名前が表示されます。名前を個別に変更するには、その名前をダブルクリックして上書き入力します。

design-an-employee-bio-page_step5

スタッフの肩書と電話番号でも同じ手順を繰り返します。このように、1つの要素をデザインするだけで、スタッフ紹介ページをすばやく簡単に作成できます。

design-an-employee-bio-page_step6

webやアプリのデザインで、リストやギャラリーなどの要素をレイアウトするときは、リピートグリッドを活用してください。
 

Adobe Stockでは、1億点以上もの質の高いロイヤリティフリーの写真、グラフィック、ビデオ、テンプレートにアクセスでき、クリエイティブプロジェクトをすばやく開始できます。Adobe Stockの無料体験版では、10点の画像を無料でご利用いただけます。

10/15/2019

Adobe Stock提供元:vectorfusionartFarknot Architect

このページは役に立ちましたか。