INDEX
目次
前の章に戻る【5-1】ワイヤーフレームとは？
■ ワイヤーフレームは、ウェブページの設計図
テキスト・画像・リンク等といったページ構成に必要な要素を、どこに配置するか？…等を決めます。
この段階で正確に決める必要は無いのですが、大体の要素を配置する事でページの構成・レイアウト決めの作業を進める事が出来ます。
※上記参考画像は、全体が把握しやすいよう簡易的なサイズにしています。実際のレイアウトは更に大きなサイズになります。
✅ ワイヤーフレームを作成する事で、以下のメリットがあります。
- ウェブサイトの構成や個別ページのレイアウト等を短期間で作成する事で、早い段階で全体像や必要な要素を確認・洗い出しする事が出来る。
-
チームで共有し、完成に近づいたイメージを先に共有する事が出来る。アイデア出し等、建設的なコミュニケーションがしやすくなる。
- クライアントにも確認してもらう事で、クライアント側にも完成イメージを共有できる。
📌 ワイヤーフレーム確認の時点で、チーム内やクライアント側からの修正が入る事もあります。
ワイヤーフレームの確認無くデザイン作業を進めてしまうと、構成面でやり直し作業が発生した場合に多くの時間のロスが発生する事も考えられます。ワイヤーフレームを作ることは、効率的にウェブ制作を進める欠かせない過程の１つになります。
【5-2】ワイヤーフレーム作成の際、必要なことは？
■ サイトマップを設計する
サイトマップとは、「Webサイトにどのようなページが必要か？」を示した構成図の事です。
ウェブサイトを制作する際、まずどのようなページが必要かを確認・整理する必要があります。
サイトマップを作成する事で、サイトの全容を把握する事が出来ます。
■ レイアウト決め
各ページに配置するレイアウト決めます。
最低限、以下3点の要素を配置するのがウェブサイトのオーソドックスなレイアウトになります。
|
ヘッダー
|
基本的にはページ最上部に表示されます。ロゴやサイトメニューが記載されているのが一般的です。
|
|---|---|
|
コンテンツ
|
主となる内容を記載する部分です。テキストや画像等を配置していきます。
|
|
フッター
|
ページの一番下に表示される部分です。各ページの締めの部分とも言えます。
著作権の表記（Copyright）や、プライバシーポリシーへの導線が配置される事が多いです。
|
この他に加え、トップページの場合はメインビジュアル等の要素が配置する場合が多いです。
■ PC用とスマートフォン用の用意
基本的には各ページPC用とスマートフォン用の２パターンを作成します。
横長のPC画面と縦長のスマートフォン画面では、表示が全く異なります。
チームやクライアントに確認してもらう事で、PCとスマートフォンの構成の違いを共有し確認する事が出来ます。
※上記参考画像は、全体が把握しやすいよう簡易的なサイズにしています。実際のレイアウトは更に大きなサイズになります。
※PCの横幅は 1280px～1440px / スマートフォン用の横幅は360px～400pxあたりが主流です。
■ 極力シンプルに
ワイヤーフレームはあくまで設計図。「注力すべきは構成やレイアウトの作成」です。
この時点でデザインする必要はありません。
※デザイン着手は、基本的にはワイヤーフレームをチームやクライアントに確認
→ 確定後になります。
基本的には無彩色（白・グレー・黒）で作成するのが一般的です。
この段階で色を付けると、初見の方が余計な先入観を持ってしまうとも言われています。
作り込み過ぎず、誰が見ても分かりやすいワイヤーフレームを作ることを心掛けましょう。
【5-3】Figmaで用意されているフレームをベースにしてみよう
■ デバイスフレームを使ってみよう
FigmaにはPCやスマートフォン等、色々なデバイスに合わせたサイズのフレームが用意されています。
※使用方法は、フレームツールを選択し、画面右側に”スマホ”,”タブレット”等が表示されるので、そこからドラッグ&ドロップ。
デバイスフレームを配置した後は、縦に伸ばす事で直ぐにワイヤーフレームのベースが作成できます。
【5-4】ガイド（定規・グリッド）を敷いてルールを決めてみよう
■ まずは整ったワイヤーフレームを作る事を意識しましょう。
※次の 「5-5 オブジェクトを配置してみよう」と同時進行で進めてもOKです。
直感的にオブジェクトを配置するだけではなく、ある程度ルールを作って配置してみましょう。
規則的に配置されたワイヤーフレームは、確認する側にも分かりやすく伝えることができます。
前章 4-2 で説明した「定規」「グリッド」を上手く使ってルールを作り、統一感のある解りやすいワイヤーフレームを作りましょう。
※もしくは何か図形を置いて、そこを基準とするのもOKです。
-
例えば、横幅1440pxに設定したフレーム内に、横幅980pxのコンテンツ幅のスペースを設けます。この980pxの配置が真ん中になるよう、両脇の幅を均等（230px）にします。
１つルールを決めたら、全ページ統一のルールにすると良いです。
例えば、コンテンツ幅を980pxと決めたら、全ページ同じコンテンツ幅とするのがベターです。
【5-5】オブジェクトを配置してみよう
■ 図形ツールやテキストツールを使って、オブジェクトを配置してみよう。
１つ前に解説したガイドを基準に、図形ツールやテキストツールを使って上手く配置してみましょう。
コツとしては、余白やテキストサイズをなるべく均一にして配置する事です。
-
バラバラな印象にならないように、規則的な配置を意識してみましょう。※ボックス（箱）を配置して、きれいに整理整頓するようなイメージです。
-
フォントサイズは、本文や見出しなど、各々統一したサイズが理想です。※基準となるフォントサイズは、基本的には16pxです。
-
重複するようなパーツは、コンポーネント（4-3で解説）を使って上手く配置しよう。
【5-6】プレビューしてみよう
■ フレームごとに分けた表示を確認
作ったワイヤーフレームをプレビューしてみましょう。フレームごとに分けた表示を確認する事が出来ます。
☑️ Figmaには2つのプレビュー方法があります。
-
新しいタブに表示画面右上の再生ボタンのアイコンより新しいタブに表示させる事が出来ます。※ショートカットは、
Ctrl + Alt + Enterキー※macはCmd + option + Enterキー -
プレビューこちらは初回は読み込みに少々時間を要しますが、２度目のプレビューではパッと表示させる事が出来ます。※ショートカットは、
Shift + Spaceキー
プレビュー後、キーボードの
←ボタン or →ボタン で、隣のフレームに切り替え出来ます。模擬演習：サンプルデータを参考に、”模写”する事から始めてみましょう。
☑️ サンプルデータはこちら
Figma
Created with Figma
✅ 模写の重要性
模写とは、すでに存在している見本を「100%そのまま再現する」ことを指します。
Figmaの場合、ピクセル単位で一致させることを目指すと良いでしょう。
正しく再現する過程でFigmaの操作に関する細かい疑問が生まれ、それを調べたり、教材を見返して解決することでFigmaの操作方法が身につきます！
- サンプルデータを模写する形で自身のFigmaアカウント内でワイヤーフレームを作成してみましょう！
- 完成したらコーチに提出してワイヤーフレームが正しく完成できているかをチェックしてもらいましょう。
- チェックを待たずに次の章に進んでもOKです。
- 次の章以降でこのワイヤーフレームにデザインやプロトタイプを追加していきます。