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