モバイル画面のスライド式ドロワーメニュー - スライド式ドロワーメニュー① カード型UIをつくる

このレッスンでは、Adobe XDを使って、カード型UIをデザインする手順を学びます。

Adobe XDを起動し、「ファイル」→「開く」メニューから、ダウンロードしたサンプルファイルを選択して「開く」をクリックします。すると、動画と同じサンプル画面が表示されます。

幅が自動調整されるテキストエリア

テキストツールを選択し、アートボードをクリックして、テキストを入力すると、テキストの入力と共にテキストエリアの幅が広がります。アセットパネルからタイトル用の文字スタイルを選択して適用します。

長方形ツールで、ガイドに沿って長方形を作ります。この長方形に、画像をドラッグして長方形の背景に画像を配置したら、ダブルクリックして画像の位置を調整します。

画面右のプロパティインスペクターから、角丸に8を設定し、「線」のチェックを外して線を非表示にします。

テキストツールで画面をドラッグすると、横幅が固定で高さが自動調整されるテキストエリアをつくれます。テキストを流し込み、記事タイトル用の文字スタイルを適用します。

タイトルの上にタグを配置します。タグ用のアイコンをアセットパネルから画面にドロップし、その横にテキストツールを使いタグ名を入力します。タグ名には、タグ用の文字スタイルを適用します。アイコンとタグ名をグループ化し、記事タイトルに揃えて配置します。

記事タイトルをより見やすくするため、画像上に半透明のフィルターを作成します。長方形ツールを使って画像と同じサイズのシェイプを作成し、塗りの色を黒に、不透明度を50%に設定します。線と角丸の設定を背景画像と同じにします。

フィルターと画像を共に選択し、右クリックから「最背面へ」を選びます。フィルターがテキストの背面に移動して文字が読みやすくなります。

カード全体を選択し、グループ化します。そのままプロパティインスペクターの「スタック」にチェックを入れると、ドラッグでカード内の要素を並べ替えられるようになります。