基本的なワイヤーフレームとプロトタイプの作成
Figmaのリデザイン版であるUI3を使用している場合、この記事の一部が製品に表示される内容と一致しない可能性があります。アップデートを行うまで、今しばらくお待ちいただきますようお願いいたします。Figmaの新デザインの詳細はこちら→
このプロジェクトでは、モバイルアプリの基本的なワイヤーフレームとプロトタイプの作成方法を学びます。
例えば、あなたが100万ドルの価値のある新しいアプリのアイデアThis or Thatを思い付いたとしましょう。そのアプリではユーザーに2つの選択肢が提示されて、1つだけ選択しなければならないとします。素晴らしい! ロゴを完成させて会社のノベルティを選ぶ前に、基本的なワイヤーフレームとプロトタイプをデザインして自分のアプリのアイデアをユーザーに試してみたいと思うでしょう。
ワイヤーフレームは、Webページやアプリのローファイなモックアップです。ワイヤーフレームを使用して、色、画像やその他のデザイン要素などに集中する時間をかけ過ぎることなく、自分の最終製品がどのような感じなのかを何度も素早く反復できます。
プロトタイプを使用して、自分のワイヤーフレームを次のレベルに引き上げることができます。プロトタイプはインタラクティブな要素を伴うデザインです。プロトタイプは、ユーザーがあなたの製品にどのように参加して進めていくのかをデザインし、テストしたり示したりするのに役立ちます。
ワイヤーフレームとプロトタイプを一緒に使用すれば、ユーザーがあなたのアプリにどのように参加して進めていくのかを計画するのに役立ちます。
このプロジェクトが終了するまでに、Figmaでのフレーム、シェイプ、テキスト作成作業やプロトタイプ作成を体験できます。さあ、始めましょう。
フレーム、シェイプ、テキストを使用したワイヤーフレームのデザイン
ワイヤーフレームを構築するために、次のオブジェクトを使用します。
- デザインを含める2つのフレーム
- アプリの画像やボタンを表現する7つの長方形
- キーボタンのラベルを識別する4つのテキスト
ファイルを作成
開始するには、新しいデザインファイルが必要です。
ヒント: Webブラウザからfigma.newにアクセスして、新しいデザインファイルを素早く作成できます。
最初のフレームを追加
フレームとは
フレームは、Figmaの主要なビルディングブロックです。フレームは、シェイプ、テキスト、画像などのデザイン要素を保持するコンテナです。それらを使用して、キャンバス上のデザイン要素の整理と構成を行うことができます。
フレームはサイズが自在で、任意の数のデザイン要素を含めることができます。フレームを他のフレーム内にネストさせ、複数の階層レベルの複雑なデザインを作成することもできます。
各フレームはアプリの別ページを示しています。モバイルデバイス用のアプリもデザインしたいので、プリセットのフレームサイズを使用します。このプロジェクトでは、次の2つのフレームに注目しましょう。
- 2つの選択肢が示される「This or That」フレーム
- ユーザーが「This」を選ぶと何が起こるかを示す「This」フレーム
それでは「This or That」フレームから始めましょう。
- ツールバーからフレームアイコンをクリックするか、Fを押します。
- 右のサイドバーのデザインパネルから、iPhone 14 Proプリセットサイズを選択します。
フレームができたので、名前を変更してみましょう。明確な命名構造を確立すれば、ファイル内のレイヤーの検索と管理が簡単になります。
- レイヤーパネルから、キャンバスに配置したフレームの名前をダブルクリックします。
- フレーム名を「This or That」に変更して、Return (Mac)またはEnter (Windows)を押します。
シェイプを追加
色、スタイル、デザインについて非常に細かいところまで説明する必要はないため、アプリのレイアウトを表現する基本的なシェイプを使用します。
2つの選択肢を示す「This or That」フレームに長方形を追加しましょう。
- 長方形ツールを選択するか、Rを押して「This or That」フレーム内をクリックします。
- 右サイドバーの[幅]と[高さ]フィールドを使用して、シェイプのピクセル値を入力します。長方形の幅を319、高さを240に設定しました。
- 長方形をクリックしてドラッグし、フレームの上部に配置します。Figmaでは、自動的にスナップしてオブジェクトをその周辺のオブジェクトに合わせて配置します。この場合、フレームの中央に長方形をスナップします。
- 塗り色をカスタマイズするには、対象の長方形を選択してから右サイドバーの[塗り]セクションでカラーピッカーを開きます。Hexコード#8ED3E2を塗り色として使います。
2つ目の長方形も全く同じサイズにしたいので、1つ目の長方形を複製しましょう。
- 長方形を選択し、Command + D (Mac)またはControl + D (Windows)を押して複製します。
- 新しい長方形が1つ目の長方形の上に直接配置されます。2つ目の長方形をクリックして、フレームの中央にドラッグします。
- 2つ目の長方形の塗り色を変更します。Hexコード#D48C8Cを塗り色として使います。
良いですね! 追加した2つの長方形のレイヤー名を変更しましょう。上の長方形を「This Image」、下の長方形を「That Image」という名前にします。
これで、シェイプを追加して変更する方法と「This Button」と「That Button」を示す長方形を2つ追加する方法が分かりましたね。それぞれの長方形の幅は130、高さは95にします。レイヤー名を変更するようにしましょう。完了すると、フレームはこのような感じになります。
テキストを追加
最初のフレームはほぼ完成しました。「This」と「That」ボタンを識別するテキストを追加しましょう。
- ツールバーからテキストツール選択するか、Tを押します。
- 左下の長方形をクリックして「This」と入力します。
- テキストレイヤーを選択した状態で、[テキスト]設定を使用してサイズを24に調整します。
- テキストレイヤーをクリックしてドラッグし、下の長方形の中央に向かって動かします。Figmaが、視覚的なインジケーターとして赤色のガイドを表示して、テキストレイヤーを長方形の中央に調整します。
これで、テキストレイヤーを長方形レイヤーの上に配置しました。この2つのレイヤーを1つのオブジェクトとして扱うために、1つのグループに結合します。
これらのレイヤーをグループ化するには、キャンバス上のレイヤー全体をカーソルでクリックしてドラッグし、2つのオブジェクトを選択して青色の選択ボックス内にキャプチャします。次に、以下のキーボードのショートカットを使用してグループを作成します:
- macOS: Command + G
- Windows: Control + G
左サイドバーのレイヤーパネルには「Group 1」という名前のレイヤーが1つだけ表示されています。これを「This Button」という名前に変更します。
これで、テキストレイヤーの追加やグループの作成と「That Button」の作成方法が分かりましたね。完了すると、デザインはこのような感じになります。
2つ目のフレームの作成
「This or That」フレームが完成したら、次のフレームの見え方を考える必要があります。
ユーザーが「This Button」をクリックしたら「This Image」を大きく表示して、「That Image」を非表示にする必要があります。
最初から作る必要はありません。Command + D (Mac)またはControl + D (Windows)をクリックして、1つ目のフレームを複製しましょう。新しいフレームを「This」という名前にします。
オブジェクトを選択して[削除]を押し「That Image」を削除します。
次に「This Image」のサイズを拡大して、フレームの大部分を占めるようにします。
プロトタイプ作成を追加
とても面白くて新しいモバイルアプリのワイヤーフレームを2ページ作成できました。
次に、この2つのページがどのように連携するのか明確な指示を出したいとします。ユーザーが「This or That」フレームから「This」フレームに進むにはどうすればいいでしょうか? 2つのページ間を移動する場合に、どのようなインタラクションやアニメーションが考えられるでしょうか?
プロトタイプ作成でその問題を解決できます。
プロトタイピングとは?
プロトタイプ作成では、ユーザーがあなたのデザインでどのように操作するのかを探るインタラクティブなフローを作成できます。Figmaのプロトタイプは、オブジェクト間のコネクションを構築することで作成します。各コネクションは、トリガー(インタラクションを開始させるもの)とアクション(その結果となるもの)で構成されます。
ユーザーが「This or That」フレームの「This Button」をクリックしたら、「This」フレームに移動させるようにしたいとします。
プロトタイプコネクションを作成してインタラクションを構築してみましょう。
- 右サイドバーの[プロトタイプ]タブをクリックします。
- 「This or That」フレームの「This Button」レイヤーにマウスカーソルを合わせます。
- ボタンの端にある青色のプラス記号をクリックして「This」フレームにコネクションをドラッグします。これで、インタラクション詳細モーダルが開きます。
- ドロップダウンメニューから、トリガーを[タップ]に設定します。
- アクションを[次に移動]に設定します。ドロップダウンメニューから、移動先を「This」フレームに設定します。
- [アニメーション]ドロップダウンメニューから、[スマートアニメート]を選択します。
ヒント: スマートアニメートでは、フレーム間で一致するレイヤー名を検索して高度なアニメーションを作成できます。「This Image」と「This Button」とラベル付けした各フレームにレイヤーがあるので、2つのフレーム間のトランジションを自動的に適用するアニメーションを作成できます。スマートアニメートの詳細情報→
インタラクションを作成したら、インタラクション詳細 モーダルを終了します。ツールバーの [プリセット]ボタンを押してテストします。
おめでとうございます、完了しました!
あなたが構築したものを検証している感じがしませんか? 以下のアイデアをご覧ください。
- 「That」フレームをデザインし、ユーザーが「That Button」をクリックすると何が起こるかを示すインタラクションをさらに追加する。
- 「This」フレームに「Next」ボタンを追加して、ユーザーが次の選択に移動できるようにする。
- インタラクションアニメーションのタイプを変更してプロトタイプ作成を探り、プロトタイプをどのように変更するか確認する。