ホーム画面を作る最後のレッスンでは、架空の料理写真投稿アプリを作っていきます。これまで解説したツールの使い方などを駆使して、実際にUIを作っていきましょう。投稿用コンポーネント作成する1.いよいよ実践!SketchでアプリのUIを作成しましょうここまではSketchの主な機能を一通り説明してきました。本レッスンからは、実際にスマホアプリのUIデザインを作っていきます。今回用意したお題は「料理写真の投稿」アプリです。インスタグラムのように写真を投稿したり閲覧できる機能のアプリを作っていきます。実際にインスタグラムを見ながら作ってみるのもいいと思います。できる方はオリジナル要素を混ぜながら作ってみるのもいいと思います。画面は全部で4つあります。最後まで頑張って作りきりましょう。今回のアプリのコンセプト料理写真投稿SNS今回のアプリのターゲット料理が好きな30代主婦層をターゲットにします。今回作成するホーム画面このレッスンではホーム画面を作っていきます。アプリを立ち上げると必ずこの画面からスタートしますので、ユーザーの印象に残る重要な画面になります。3.UIを作る前準備はじめに作成するUIはアプリを毎回起動したときに表示されるホーム画面を作っていきます。XSサイズのアートボードを作成します。アートボード名は「home」としておきましょう。アートボード作成Colorのシンボルを作成するUIを作成する前に図2カラーのシンボルを作成しておきます。今回のキーカラーは料理好きの30代女性が好みそうな、少し淡い赤色をキーカラーにします。カラーシンボルの作成4.ナビゲーションバーを作成するまずアートボードの背景色を「lv1/color/bg、F7F7F7」に設定します。背景はロックレイヤーにしておきましょう。88pxで作成します。Bar1次に罫線を作成します。0.5pxの「C7C7C7」で作成したオブジェクトを作ります。作成したオブジェクトは「lv1/line/border」にシンボル化します。(図5)シンボル化後、シンボル編集ページに移り、Rectangleを消去します。Bar2次に戻るボタンのベースを作成します。44pxのRectangleオブジェクトを作成します。Bar3ベースを作成したら、戻るボタンの矢印アイコンを作成します。3pxのRectangleオブジェクトを2つ作成し、RectangleをUnionし、左45度に傾けます。(図7)作成した矢印は「lv1/icon/backButton」としてシンボル化します。Bar4シンボルページに移り、「lv1/color/keycolor」を「lv1/icon/backButton」に合わせリサイズし、矢印アイコンとkeycolorを選択した状態でマスクをします。マスク次に作成ページ「home」に戻り、Rectangle左端から10pxの垂直中心の位置に配置します。Bar5矢印アイコンから5pxのマージンをとり、ラベルを配置し、「lv1/txt/backtxt」にシンボル化を行います。Bar6次にRectangleと矢印アイコン、ラベルテキストを選択し、シンボル化します。名前は「lv2/block/nav_Left」とします。シンボル化後、シンボルページに移り、Rectangleを消去します。Bar7最後にナビゲーションバーにタイトルを作成し、ナビゲーション中央に配置し、「lv1/txt/title」にシンボル化します。Bar8ナビゲーションバーの最後の工程になります。