モックアップの作り方｜ワイヤーフレームとの違いと予約画面の実例

モックアップは、画面の配色、文字、画像、余白などを具体化し、完成時の見た目を検討するためのデザインです。操作を実装する前に、必要な情報が見えるか、何を押せるのか、ブランドの表現が合っているかを確認できます。

Webページでは、構成を考えるワイヤーフレーム、見た目を詰めるモックアップ、操作を試すプロトタイプを、確かめたい内容に応じて使い分けます。PixsoのWebデザイン機能なら、これらの画面を同じファイルで作成して共有できます。ここでは、予約ページを題材にモックアップの役割と作り方を説明します。

1. モックアップはWebデザインのどの工程で使う？

モックアップ、ワイヤーフレーム、プロトタイプは、どれも完成前の検討に使います。ただし、それぞれが答える質問は異なります。

必要な情報や配置を決めた後にモックアップを作ることは多いものの、すべての案件で同じ順序を守る必要はありません。操作の問題が見つかれば構成へ戻り、文章の長さが変われば見た目を調整します。確認したいことを基準に、必要な表現の細かさを選びます。

モックアップとは

モックアップは、一般には模型を意味します。実物の商品を模した模型と同じように、Webデザインでは完成時の外観を具体的に示します。

画面の大まかな配置に、文字のスタイル、画像、色、余白を加えます。静止した画面でもモックアップとして成立します。予約ボタンが描かれていても、実際に予約できるとは限りません。操作を検討したい場合は、その画面をプロトタイプとしてつなぎます。

2. モックアップ、ワイヤーフレーム、プロトタイプの違い

ワイヤーフレームは「何をどこに置くか」、モックアップは「どう見せるか」、プロトタイプは「操作するとどうなるか」を主に確かめます。見た目の細かさと、動かせるかどうかは別の軸です。簡単な図形だけでも操作の流れを試せますし、精細な画面でも操作を付けない場合があります。

2.1 ワイヤーフレームとは

ワイヤーフレームは、画面の情報構成を示す設計図です。色や装飾を細かく決める前に、見出し、本文、画像、操作などの位置と優先順位を整理します。

予約ページなら、講座の概要、参加日時、料金、人数、予約ボタンを配置します。会社の組織図のようにページ同士の階層を示す図ではありません。サイト全体の階層を示すサイトマップと、1つの画面内を組み立てるワイヤーフレームは区別しましょう。

この段階では、予約の判断に必要な情報がそろっているか、操作の前に料金が分かるかを確認します。装飾を増やすより、足りない情報や順序を直す方が重要です。

2.2 プロトタイプとは

プロトタイプは、仮説や操作を確かめるための試作品です。Webデザインでは、画面をつないで操作の流れを試すものも、コードで特定の動作を試すものもあります。

リリース直前の完成形に限られません。企画の初期に、粗い画面で予約の順序を試すこともできます。見た目を整えた後で、日時を選んだ際の表示や確認画面への遷移を試す場合もあります。

モックアップを作った後に画面遷移も確認したい場合は、Pixsoのプロトタイピング機能で操作と遷移を設定します。画面をクリックできることと、本番の予約処理や決済が動くことは別です。チームで試す範囲をそろえておきます。

3. 配色だけでなく、判断に必要な状態を作る

モックアップでは、色や装飾とともに、情報の読み取りやすさを具体化します。ツールを選ぶ際も、必要な画像を配置できるか、文字や図形を編集できるか、共通の部品を再利用できるかを、実際の作業から判断します。

制作工程によって、画像調整と画面設計で別のツールを使うこともあります。大切なのは、見た目を整える作業と、画面として必要な情報をそろえる作業を切り離さないことです。

予約カードを1つ完成させる

例として、「写真講座」の予約カードを作ります。講座名、開催日時、会場、1人あたりの料金、残席表示、人数の選択、予約操作をそろえます。仮の短い文章だけで整えず、長い会場名や2行になる講座名も使います。

1. 情報の優先順位を決める。日時と料金を、予約操作の前に読み取れる位置へ置きます。講座の魅力を伝える写真が、条件の確認を妨げない大きさにします。
2. 文字と余白を設定する。講座名、補足説明、金額、ボタンの役割を分けます。関連する情報を近づけ、講座の説明と予約条件は間隔で区切ります。
3. 通常と満席を作り分ける。満席では「満席」と明記し、予約できない状態を示します。灰色にするだけでは理由が伝わりません。空席通知を提供しないサービスで、その操作を勝手に追加しないようにします。
4. 入力不足の表示を作る。人数を選ばずに進もうとした場面では、「人数を選択してください」を該当箇所の近くに置きます。カード全体の説明をエラーに置き換えず、入力内容を保持します。
5. 狭い幅でも確認する。会場名や料金の補足が折り返しても、ボタンと重ならないかを見ます。文字を小さくして詰め込む前に、縦に並べる方法を検討します。

この段階で確認するのは、選択肢や状態の見た目です。残席が本当に更新されるか、予約が二重に送信されないかは、実装と動作確認で扱います。モックアップには、通常、満席、入力不足の3画面と、切り替わる条件を残しておくと、認識をそろえやすくなります。

4. Pixsoでモックアップからプロトタイプへ進める

4.1 画面構成と画像を同じデザインにまとめる

予約カードの構成を図形と文字で作り、画像、色、スタイルを加えていきます。先に情報構成を確認しておけば、写真や装飾を作り込んだ後の大幅な組み替えを減らせます。

例えば、画像の調整にはPhotoshop、ベクター素材の制作にはIllustrator、画面の共同編集にはFigmaと、作業に応じてツールを使い分けることがあります。複数のツールを使う場合は、書き出す形式、編集できる情報、更新した素材の受け渡し方を決めておくと、モックアップの修正を進めやすくなります。

Pixsoでは、図形、文字、画像を配置して画面を作り、同じファイルをチームで編集できます。ワイヤーフレームの構成を基にモックアップを作り、必要な操作をプロトタイプとしてつなぐ流れを用意できます。

4.2 共通の部品とレイアウトで状態をそろえる

予約ボタンやカードをコンポーネントにし、通常、選択中、利用不可などの外観を整理します。同じ部品を画面ごとに描き直すのではなく、共通にする部分と変える部分を分けます。

Auto Layoutで要素間の間隔と内側の余白を設定し、講座名や説明が長くなった場合の伸び方を確認します。人数の表示が変わっても、ラベルや操作が重ならないようにします。

レビューでは「もっと目立たせる」とだけ伝えるより、「満席の理由を、予約操作の位置で読めるようにする」と具体的にコメントします。修正した箇所を同じファイルで確認すると、見た目の好みと利用上の問題を分けて話し合えます。

4.3 日本語の文章を入れて確認する

日本語の画面では、仮の英単語を置いた状態だけで完成としないようにします。長い施設名、全角・半角が混ざる日時、金額と単位など、実際に使う表記を入れます。見出しと補足の区切り、ボタン内の折り返し、句読点の位置を確認します。

操作方法を確認したいときは、日本語のヘルプセンターを参照できます。画面の文言と操作の説明をそろえ、レビューする人が何を確かめればよいか分かる状態にします。

Pixsoでモックアップを作る

見た目で確認することと、動作で確認することを分ける

モックアップでは、必要な情報が読めるか、操作と状態を見分けられるかを確かめます。予約カードなら、日時、料金、満席、入力不足の見え方まで作ることで、単に色の付いた画面から、判断に使えるデザインへ進められます。

その後、予約確認までの操作をプロトタイプで試し、実装時に必要な動作を引き継ぎます。見た目、遷移、実際の処理をそれぞれ確認すると、チーム内で「完成」が何を指すのかも明確になります。