9-1. ホーム画面を作る

1.いよいよ実践！SketchでアプリのUIを作成しましょう

ここまではSketchの主な機能を一通り説明してきました。本レッスンからは、実際にスマホアプリのUIデザインを作っていきます。

今回用意したお題は「料理写真の投稿」アプリです。インスタグラムのように写真を投稿したり閲覧できる機能のアプリを作っていきます。実際にインスタグラムを見ながら作ってみるのもいいと思います。また、少しできる方はオリジナル要素を混ぜながら作ってみるのもいいと思います。

画面は全部で4つあります。最後まで頑張って作りきりましょう。

今回のアプリのコンセプト

料理写真投稿SNS

今回のアプリのターゲット

料理が好きな30代主婦層をターゲットにします。

2.まずはホーム画面から

このレッスンではホーム画面を作っていきます。アプリを立ち上げると必ずこの画面からスタートしますので、ユーザーの印象に残る重要な画面になります。

3.UIを作る前準備

はじめに作成するUIはアプリを毎回起動したときに表示されるホーム画面を作っていきます。

iPhone XSサイズのアートボードを作成します。アートボード名は「home」としておきましょう。(図2)

Colorのシンボルを作成する

UIを作成する前に図2カラーのシンボルを作成しておきます。

今回のキーカラーは料理好きの30代女性が好みそうな、少し淡い赤色をキーカラーにします。(図3)

4.ナビゲーションバーを作成する

まずアートボードの背景色を「lv1/color/bg、F7F7F7」に設定します。背景はロックレイヤーにしておきましょう。

Navigation Barは「lv1/color/bar_bg、FFFFFF」の375px × 88pxで作成します。

次に罫線を作成します。

375px × 1pxのRectangleオブジェクトを作成し、その上に375 × 0.5pxの「C7C7C7」で作成したオブジェクトを作ります。
作成したオブジェクトは「lv1/line/border」にシンボル化します。(図5)

シンボル化後、シンボル編集ページに移り、Rectangleを消去します。

次に戻るボタンのベースを作成します。

bar_bgの上に180px × 44pxのRectangleオブジェクトを作成します。(図6)

ベースを作成したら、戻るボタンの矢印アイコンを作成します。

14px × 3pxのRectangleオブジェクトを２つ作成し、RectangleをUnionし、左45度に傾けます。(図7)

作成した矢印は「lv1/icon/backButton」としてシンボル化します。

シンボルページに移り、「lv1/color/keycolor」を「lv1/icon/backButton」に合わせリサイズし、矢印アイコンとkeycolorを選択した状態でマスクをします。(図8)

次に作成ページ「home」に戻り、Rectangle左端から10pxの垂直中心の位置に配置します。(図9)

矢印アイコンから5pxのマージンをとり、ラベルを配置し、「lv1/txt/backtxt」にシンボル化を行います。
ラベルのプロパティは

Text : Font : Noto Sans : 16px Wight : Blod Color : E4626E (図10)

次にRectangleと矢印アイコン、ラベルテキストを選択し、シンボル化します。名前は「lv2/block/nav_Left」とします。

シンボル化後、シンボルページに移り、Rectangleを消去します。(図11)

最後にナビゲーションバーにタイトルを作成し、ナビゲーション中央に配置し、「lv1/txt/title」にシンボル化します。
タイトルのプロパティは

Text : Font : Noto Sans : 16px Wight : Blod Color : E4626E (図12)

ナビゲーションバーの最後の工程になります。

上記で作成したシンボルをまとめて選択し、「lv3/bar/navi」としてシンボル化をしてNavigation Barの完成です。(図13)

5.タブバーを作成する

Tab Barを作成する。

Tab Barはアプリ下部にある主にアプリ内の各画面へ遷移することを目的に実装されたものです。

まずTab Barのベースを375×83作成し(図14)、ベースの上に「lv1/line/border」を配置しプロパティパネル上部からFlipさせます。(図15)

ベースが完成したので、iPhoneXのHome IndicatorをiOS UI Designeから配置します。(図16)

次にTab Bar内のボタンを作成していきます。このレッスンで使うアイコンはこちらからダウンロードしてください。

図17のように48 × 49のRectangleを作成し、その上に「lv1/color/keycolor」を26 × 26にリサイズし下記用のように配置します。
上記で作成した２つのオブジェクトを選択し、「lv2/btn/tab」にシンボル化します。次に作成したシンボルを編集していきます。

シンボル化した「lv2/btn/tab」のRectangleを消去します。(図18)
シンボル内の26 × 26の「lv1/color/keycolor」を「lv1/icon/tab_home」に名前を変更しシンボル化します(図19)。シンボルをダブルクリックし、さらにシンボルを編集していきます。