プロトタイプを作成するSketchには、画面のレイアウト・装飾を作るだけでなく、「プロトタイプ」と言って実際にプログラムで実装するのに近い形で画面遷移やアニメーションを再現したものをつくることができます。「プロトタイプ」は、どのボタンを押すと、どの画面に移動することができるのかを伝えるために、UIデザインの成果物として求められるものです。ブックマークUIデザインUXデザインプロトタイピング公開日:2019/08/13最終更新日:2019/08/13目次1.プロトタイピング機能を使う前の準備2.プロトタイピング機能の使い方3.作ったプロトタイプをプレビューする4.プロトタイピング機能のショートカットまとめ1.プロトタイピング機能を使う前の準備Skecth公式からサンプルデータをダウンロードするこのレッスンでは、Sketchが配布しているUIKitを使用して解説していきます。Sketchの公式サイトからUIのサンプルデータをダウンロードしましょう。リンクは以下のURLになります。Document」からファイルをダウンロードしましょう。DL画面ダウンロードしたファイルを確認ダウンロードした「elements-ui-kit.sketch」を開きましょう。今回はUIKitの中の赤枠の緑のFoodのUIKitを使用してプロトタイプを作成していきます。ダウンロードしたファイル2.プロトタイピング機能の使い方ボタンにリンクを追加するリンクとは画面遷移先のことで、ボタンにリンクを追加することによって、そのボタンをクリック・タップすると次の画面に移動することができるようになります。ボタンとなるレイヤーを選択します。Targetのプルダウンをクリックして、移動先となるアートボードを選択します。「+」をクリックした後に表示されるオレンジ色の矢印を、移動先のアートボードに載せてクリックすることでも指定することができます。アニメーションを追加するプロトタイピング機能では、画面が切り替わる際にアニメーションの演出を加えることができます。Targetを指定後、Animationから種類を指定します。アニメーションの種類は以下の5つです。固定スクロール固定スクロールとは、ヘッダーやフッターなどの一部の要素を、スクロールしないように固定しておくデザインのことです。scrolling]にチェックを入れます。以下のサンプルではフッターメニューに固定スクロールを指定しています。3.作ったプロトタイプをプレビューする先程作ったプロトタイプを動かすには図3の「Preview」ボタンを押します。Previewボタン「Preview」を押すと図4のように先程作成したプロトタイプのウィンドウが開きます。リンクを付けたボタンを押すと次の画面に遷移します。このプロトタイプは、Sketchの作業画面でデザインを変更するとすぐに内容が反映されます。プレビュースタート画面を決めるプロトタイプを起動したときに一番最初に起動させたい画面を選択するには、図5のプロトタイプウィンドウの右上にあるフラグマークをクリックします。これにより次回「Preview」ボタンを押したときに必ずフラグマークを押した画面が最初に起動します。スタート画面を決める4.プロトタイピング機能のショートカットまとめ最後にプロトタイピング機能のショートカットキーをまとめて紹介します。