「ワイヤーフレーム」と「デザインカンプ」
『ワイヤーフレーム』とは、Webページのレイアウト（配置）の設計図のようなものです。
Webサイトを制作する際に必要な準備の1つで、このワイヤーフレームの出来が後の工程（デザインカンプやコーディング）に影響を与えることが多々あるため、できる限り「後の工程を見据えた設計」が必要になります。
ちなみに、ワイヤーフレームは下記の画像のように、四角とダミーテキストで作られることが多く、あくまでもレイアウトの設計図のためシンプルな色使いになることが多いです。
ワイヤーフレーム（PC表示）
ワイヤーフレーム（スマホ表示）
この記事の目次
ワイヤーフレームを作成するツール
このワイヤーフレームを作成するツールとして様々なものがあります。
- Adobe Photoshop
- Adobe Xd
- Figma
中には、「Excel」や「パワーポイント」を使う人も中にはいますが、ガイド線を元にレイアウトを決めることができる「Photoshop」や「Figma」などのグラフィックツールがよく使われています。
ここでは、Photoshopにガイド線を引いてワイヤーフレームを作成していきます。（ワイヤーフレームは、IllustratorよりPhotoshopで作成することをおすすめします）
コツとしましては、ワイヤーフレームの作成時に「どのようにHTMLやCSSを組んでいくか？」というのを想像しながら組み立てていくことで後工程であるコーディングの負担を減らすことができるようになります。
ワイヤーフレームの準備
PC表示のワイヤーフレームを作る時は以下の流れでベースを作成します。
1.「新規作成」→「Web一般（1366×768）」を選択。複数ページを１つのPSDファイル内に作成する場合はアートボードを複数設置します。
2.ここでは、コンテンツ部分を（max-width:1000px）とするガイド線を最初に設定するため、「表示」→「新規ガイドレイアウトを作成」を開く。
3.「列」にチェックを入れ、「数」を12、「幅」を65px、「間隔」を20pxに設定する。
この設定にすることで、ガイドの範囲がちょうど1000pxとなります。
※「列を中央に揃える」にもチェック入れておきます。
4.同じ作業スペースにアートボード（他のページ用やスマホ表示用）を追加するため、「移動ツール」の状態で「アートボード」をクリックします。
すると、四方に⊕（アートボード追加ボタン）が表示されるため、追加したい場所のボタンをクリックします。
5.同じサイズのアートボードが追加されます。
6.もしスマホ用のアートボードにする場合は、追加されたアートボードの「プロパティ」にてW（横幅）を375pxに変更します。
あとは、必要に応じて「アートボード」の名前を「トップPC表示」「トップスマホ表示」などに変更してお使いください。
※1つのPSDファイルにたくさんのアートボードを入れて作業をするとPCのスペックによっては非常に重くなることがありますので、その場合はページごとにPSDファイルを分けておくと良いでしょう。
アートボードの長さを調節する
初期状態では、コンテンツの量によって高さが変わるため、状況に応じて足したり引いたりすることがあります。
1.「移動ツール」の状態で「アートボード」をクリックし、下中央のバウンディングボックスをドラッグします。
このように、アートボードの高さを変更することができます。
ワイヤーフレームの作成
リサーチしたサイトを参考に、「長方形シェイプツール（推奨）」を使ってワイヤーフレームを作成していきます。
ワイヤーフレームを作っていると、たくさんのシェイプレイヤーやテキストレイヤーが混在するようになるため、事前に「ヘッダー」「メイン」「フッター」などのグループを作っておき、その中に該当するパーツを入れていきます。
※この時に作成するグループが、コーディングする時の<header>や<footer>、<div>タグとして利用することができるので、よく考えてグルーピングしていくことをおすすめします。
レイヤーパネルのフォルダの形をしたアイコンから追加→名前の変更をしていきます。
グループ化をするメリット
ワイヤーフレームで設置した要素をグループ化するメリットは、後々の管理がしやすくなることはもちろん、このグループをそのままHTMLのグループタグとして使うことができます。
例えば以下のようにグループでまとめた場合、
- ワイヤーフレーム（<body>）
- ヘッダー（<header>）
- ロゴ（<div class=”logo”>）
- ナビメニュー（<nav>）
- ヒーロー（<div class=”hero”>）
- ヒーロー画像（<div>もしくは<img>）
- メイン（<main>）
- コンテンツ部分（<div>や<article>、<section>など）
- フッター（<footer>）
- コピーライト（<p>、<copy>など）
- ヘッダー（<header>）
といった感じでワイヤーフレームの時点でHTMLの構成をある程度決めておくことができるため、コーディングではこれ（グループ）に合わせて記述していくことができ、コーディングが非常に楽になるかと思います。
デザインカンプの準備
『デザインカンプ』とは、レイアウトの設計図である「ワイヤーフレーム」に対し「Webページの完成見本」となります。
完成見本のため、実際に使用する画像やテキストをワイヤーフレームに沿って設置していき、Web上でもこのデザインカンプと同じ見た目になるように、HTMLやCSSでコーディングしていく流れとなります。
また、デザインカンプを作成する前に、この準備をしておくことでワイヤーフレームとデザインカンプが別々で管理できるようになるのでやっておくと良いでしょう。
デザインカンプの準備
1.ワイヤーフレーム制作で追加されたレイヤー、グループを全て選択し、１つのグループにする。
2.グループ名を「ワイヤーフレーム」に変更する。（このフォルダがHTMLタグの<body>となります）
3.ワイヤーフレームのグループを複製する。
4.複製したグループ名を「デザインカンプ」に変更し、ワイヤーフレームのグループを非表示にする。
レイヤーをロックしておくのも有効です。
5.ここから「デザインカンプ」のフォルダにあるレイヤーを基にデザインカンプを作成していくのですが、
- テキストは実際に表示する文章に差し替える
- 画像はできる限りワイヤーフレームで設置した「長方形シェイプレイヤー」に合うように加工（トリミング）しておき、「クリッピングマスク」を使って設置する。
- 背景色や背景画像を設置する場合はレイヤーの位置に注意する。
このあたりに注意しながら作成し、完成したものが下記の画像となります。
デザインカンプ（PC表示）
デザインカンプ（スマホ表示）
デザインカンプにはフェードインなどの動きや、背景画像固定やパララックスの表現ができない静止画のため、自分がわかる場所にメモを残しておくと良いでしょう。
（Adobe Xdはそのあたりの設定もできる場合があります）
あとはこのデザインカンプを基にコーディングし、Webページを作っていきます。
何度も書いていますが、ワイヤーフレームの段階で設計をしっかりと決めておくことが、コーディングの負担を減らすコツになるため、それを意識しながらワイヤーフレームを作成すると良いでしょう。
