料理写真投稿アプリを作ってみよう9-4.プロフィール画面を作るUI/UXデザインツール『Sketch』入門9-4.プロフィール画面を作るこのレッスンでは、検索画面に続き、プロフィール画面を作成していきます。このレッスンで1つのアプリのデザインが完成です。今回作成するプロフィール画面このレッスンでは、上記図1のプロフィール画面を作っていきます。初めに、今までと同様にiPhoneXSのアートボードを作成し、アートボード名を「profile」に変更します。アートボード次にinsertから「lv3/bar/TabBar」を配置し、オーバーライドを変更します。タブバー2.ナビゲーションバーを作成するプロフィール画面のナビゲーションバーを作成していきます。シンボルページに移り、「lv3/bar/navi」を複製します。複製後、名前を「lv3/bar/navi_profile」に変更します。次に、テキストラベルのカラーを#3D3D3Dに変更します。最後に右16px、下から10pxの位置に「lv1/icon/setting」を配置します。ナビゲーションバーシンボルを修正後、「lv3/bar/navi_profile」をアートボードのprofileに配置します。(図5)配置後、「block/nav_Left」をオーバーライドからNoneに変更します。シンボル配置後3.プロフィール画面を作成するプロフィール画面を作成していきます。insertから「lv1/color/bar_bg」を配置し375×218にリサイズします。×64pxのOvalを作成します。(図7)作成後、「lv1/img/profile_icon」にシンボル化します。プロフィール画面2「lv1/img/profile_icon」から右48pxに図8のプロパティのテキストラベルを作成します。(図8)作成後、2つのテキストラベルを選択し、「lv1/txt/information」にシンボル化を行います。プロフィール画面3次に、「lv1/txt/information」を2つ複製し、マージンを8pxあけ配置します。(図9)配置後、「lv1/img/profile_icon」を基準とし垂直中心揃えを行います。最後に、上記で作成した「lv1/img/profile_icon」と「lv1/txt/information」×3を「lv2/block/user_information」にシンボル化を行います。プロフィール画面4ユーザーネームとプロフィール文のテキストラベルを作成していきます。「lv2/block/user_information」から下8pxに図10のプロパティのテキストラベルを作成します。ラベルは「lv1/txt/user_name」にシンボル化を行います。同じように、「lv1/txt/user_name」から下8pxに図10のプロパティのテキストラベルを作成します。ラベルは「lv1/txt/user_profile」にシンボル化を行います。プロフィール画面5次にタブメニューを作成していきます。「lv1/txt/user_profile」から下16pxに図10のプロパティでRectangleとテキストを作成していきます。作成後、「lv1/bar/tab_menu」にシンボル化を行います。今回作成するホーム画面6insertから「lv1/line/border」を配置を行います。(図12)上記で作成した、Rectangle、「lv2/block/profile」、「lv1/txt/user_name」、「lv1/txt/user_profile」、「lv1/bar/tab_menu」、「lv1/line/border」を全て選択し、「lv3/profile/cell」にシンボル化を行います。今回作成するホーム画面7最後の工程のサムネイル作成です。165pxのRectangleを作成し、「lv1/img/thumbnail」にシンボル化を行います(図12)。今回作成するホーム画面8「lv1/img/thumbnail」を複製し配置します。今回作成するホーム画面9配置後、個々にイメージを変更し完成となります。今回作成するホーム画面104.まとめこれでUI/UXデザインツール『Sketch』入門は終わりです。Sketchは毎年のように大きなアップデートがあり、より便利な機能が追加されています。世界中で拡張機能が開発されており、ここに載っていない便利な使い方もたくさんあります。