スタッフ紹介ページのデザイン

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

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

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

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

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

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

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

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