UI/UXデザインツール『Sketch』入門

9-2. 詳細画面を作る

このレッスンでは、前回レッスンで作成した、投稿画面から詳細画面へ移る詳細画面の作成を行っていきます。

  • UIデザイン
  • UXデザイン
  • プロトタイピング

公開日:2019/10/15最終更新日:2019/10/15

1.詳細画面を作成準備

図1 今回作成する画面

このレッスンでは、上記図1の検索画面を作っていきます。

iPhoneXSのアートボードを作成し、高さを1137pxに変更し、アートボード名を「Detail」に変更します。(図2)

図2 アートボード

次に前回レッスンで作成した「lv3/bar/navi」、「lv3/bar/TabBar」をinsertから図3のように配置します。(図3)

図3 詳細画面準備1

2.ナビゲーションバーを変更する。

ナビゲーションバーのオーバライドを以下のように変更します。(図4)

  • Noneに変更
    lv1/txt/backtxt」、「lv1/txt/title」、「lv1/color/bar_bg」、「lv1/line/border
  • ステータスバーの変更
    iPhone X/Status Bars/Status Bar (Black)」から「iPhone X/Status Bars/Status Bar (White)」に変更
  • 色の変更
    icon/backButton」をkeycolorからbar_bgに変更
図4 ナビゲーションバー

3.サムネイルの配置

insertから「lv1/img/Post」を配置します。(図5)

図5 サムネイルの配置

4.投稿内容のコンポーネントを作成する

投稿内容のコンポーネントを作成していきます。

insertから「lv2/cell/user」をサムネイル下に配置し、オーバーライドから「lv1/icon/option」を「lv1/icon/tab_heart」に変更します(図6)

図6 投稿内容コンポーネント1

そして、「lv1/color/bar_bg」を375px × 109pxにリサイズ配置し、「lv2/cell/user」から16px下に「lv2/detail/discription」を配置します。

次に、「lv2/detail/discription」の下に、「lv1/line/border」の配置を行い、配置した5つのシンボルを全て選択し、「lv3/detail/Post」にシンボル化を行います。(図7)

図7 投稿内容コンポーネント2

5.材料のコンポーネントを作成する

lv3/detail/Post」から24px下に図8のプロパティーのテキストラベルを作成します。(図8)

図8 材料のコンポーネント1

図8で作成したテキストから8px下に375px × 44pxにリサイズした「lv1/color/bar_bg」を配置します。(図9)

図9 材料のコンポーネント2

lv1/line/border」を「lv1/color/bar_bg」の上に配置を行い、343pxにリサイズします。(図10)

図10 材料のコンポーネント3

図11のプロパティーのテキストラベルを垂直中心揃えで配置します。(図11)

図11 材料のコンポーネント4

上記で作成した、「lv1/color/bar_bg」「lv1/line/border」「テキストラベル×2」を全て選択し、「lv2/list/material_cell」にシンボル化を行います。

図12のように複製し、テキストラベルを個々に変更し材料コンポーネントの完成です。

図12 材料のコンポーネント5

6.作り方のコンポーネントを作成する

lv2/list/material」から24px下に図8のプロパティーのテキストラベルを作成します。(図13)

図13 作り方のコンポーネント1

図13で作成したテキストから8px下に375px × 63pxにリサイズした「lv1/color/bar_bg」を配置します。(図14)

図14 作り方のコンポーネント2

lv1/line/border」を「lv1/color/bar_bg」の上に配置を行い、343pxにリサイズします。(図15)

図15 作り方のコンポーネント3

lv1/color/bar_bg」から左16px、下16pxの位置に図16のプロパティのOvalを配置します(図16)

図16 作り方のコンポーネント4

先程作成した、Ovalの上に図17のプロパティのテキストラベルを配置し、Ovalとテキストラベルを選択し「lv1/number/label」にシンボル化します。(図17)

図17 作り方のコンポーネント5

lv1/number/label」から右16pxに図18のプロパティのテキストラベルを配置します。

配置後、上記で作成した、「lv1/line/border」、「lv1/color/bar_bg」、「lv1/number/label」を全て選択し「lv2/list/make_cell」にシンボル化を行います。

図18 作り方のコンポーネント6

その後、サンプルを追加作成し詳細画面は完成です!お疲れさまでした!(図19)

図19 作り方のコンポーネント7

理解度チェック

UI/UXデザインツール『Sketch』入門

1. Sketchの概要とインストール

2. Sketchの基本操作

3. レイヤーリストの操作

4. ツールバーの操作

5. インスペクタの操作

6. シンボル・オーバーライド・ライブラリーの使い方

7. プロトタイプの作り方

8. Sketchをチームで使う

9. 料理写真投稿アプリを作ってみよう

このレッスンの著者