ワイヤーフレームを作成

レイアウトグリッド、長方形ツール、テキストツール、プラグイン、オートレイアウトを使って、スマホで見やすいネットショップの骨組み＝ワイヤーフレームを作ってみましょう。

Contents

完成形のワイヤーフレーム

長方形の作成などはFigma基礎講座を参照してください。

Figmaにプロジェクトを作成する

Figmaを開きます。ブラウザ版またはアプリ版のFigmaを起動します。
新しいファイルを作成
- Figmaのダッシュボードで上部のボタンDesignをクリック。
- 新しい作業画面が開きます。
ファイルに名前をつけましょう。
左上の無題をクリックして、「サイト名」（今回はKOBE MODE)などの名前を付けておきましょう。

フレームを設定する（レイアウトガイドの活用）

スマートフォンサイズのフレームを選択
- ショートカットキー：Fをでも選択可
- 下部にあるツールバー（上図）の左から２番目　# 　ボタンよりフレームを作成
- 右側のフレーム一覧より　スマホサイズ（iPhone16　402px)を選択
背景色を調整（任意）
- フレームを選択したまま、プロパティパネルの「塗り」で背景色を設定（初期設定の白で問題ない場合はスキップ）。
レイアウトガイドを設定
レイアウトガイドを使用して、ワイヤーフレームの整列デザインを整えることができます。
- フレームを選択した状態で、右側のプロパティパネルのレイアウトガイドセクションを見つけます。
- 「+」ボタンをクリックして追加。
グリッドタイプを設定
- グリッド（Grid）：正方形のグリッドで、ピクセル単位の細かい配置に便利。
- 列（Columns）：スマートフォンデザインでは通常「2列」または「4列」に設定すると良いでしょう。
  - カラム数：2～4
  - ガター　Gutter（間隔）：16px
  - マージン　Margin（余白）：16px
- 行(Rows)：高さの基準を決めたい場合に活用。
グリッドの色と透明度を調整
- グリッドがはっきり見えて、写真やオブジェクトが見えにくい時は、透明度を調整して背景要素と重ならないようにします。
デザインをレイアウトガイドに合わせる
配置するUI要素（ボタン、テキスト、画像など）がグリッドに沿うように調整することで、全体のデザインが整った印象になります。

必要なUI要素を配置する

ヘッダーを作成
- テキストツールで店名を入力。整列で中央に配置します。
- 文字の大きさは24px~ぐらいに設定して、ワイヤーフレームなので色は黒のまま使用。
ナビゲーションバーを追加
- ヘッダー左側に、ペンツールを使って二本線を描きます。
- ヘッダー右側に、アイコンを追加します。Figmaのプラグイン（例：「Feather Icons」）を活用。
- 両方とも設定したレイアウトグリッドからはみ出さないように注意しましょう。

Figmaプラグインの活用

1. プラグインのインストール方法

左側メインメニュー（figmaアイコン)をクリックし、プラグイン（Plugins）を選択。プラグインを管理からプラグイン名を検索します。今回は「Feather Icons」を検索します。

2. おすすめプラグイン

Wireframe：UI要素をドラッグ＆ドロップで配置。
Feather Icons：シンプルなアイコンを挿入。
Content Reel：ダミーデータ（テキストや画像）を簡単に追加。
Lorem Ipsum：ダミーテキストを生成。
Unsplash：高品質な画像を直接挿入。