ホームページ制作の途中で、制作会社からデザイン確認用のPDFが送られてくる。
PDFを開いて、文字や写真、色、レイアウトを確認して、赤字を入れて返す。
この方法自体が間違いというわけではありません。
ただし、WEBサイトの最終的なデザイン確認までPDFだけで済ませるのはおすすめしません。
理由は単純です。
WEBサイトはPDFを見るものではなく、ブラウザで操作するものだからです。
パソコン、スマートフォン、タブレット。
画面幅によってレイアウトが変わり、ボタンを押せばページが移動し、メニューが開き、フォームに文字を入力します。
PDFでは、そのかなりの部分が確認できません。
制作初期の方向性確認にPDFや画像を使うのは問題ありません。
ただし、公開前の確認は必ず実際のブラウザで行う。
「デザイン確認」と「WEBサイトとしての確認」は分けて考えるのがおすすめです。
PDFで確認できるのは「WEBデザインの一部分」だけ
まず、PDFで確認できることを整理してみます。
- 大まかなレイアウト
- 使用する写真
- 色
- 文字の内容
- 見出しの大きさ
- コンテンツの並び順
こうした静的な要素を見るにはPDFでも十分です。
特に制作初期に、
こういう雰囲気のサイトにします。
と方向性を共有する用途なら分かりやすいでしょう。
問題は、PDFを「完成するWEBサイトそのもの」として確認してしまうことです。
WEBサイトにはPDFには存在しない要素が大量にあります。
| 確認項目 | ブラウザ | |
|---|---|---|
| 色・写真・文章 | 確認できる | 確認できる |
| 画面幅による変化 | 基本的に確認できない | 確認できる |
| リンク | 実サイト同様には確認できない | 確認できる |
| メニュー操作 | 確認できない | 確認できる |
| ホバー | 確認できない | 確認できる |
| アニメーション | 確認できない | 確認できる |
| フォーム操作 | 確認できない | 確認できる |
| スクロールした印象 | 実際とは異なる | 確認できる |
つまりPDFは、WEBサイトを構成する要素の中から「静止した見た目」を切り取ったものです。
ここを理解しておくと、制作会社との確認作業もかなり分かりやすくなります。
理由1｜WEBサイトには固定された横幅がない
紙のデザインとWEBデザインの大きな違いのひとつです。
A4のチラシなら、サイズは決まっています。
210mm × 297mm。
見る人によって紙の横幅が変わることはありません。
しかしWEBサイトは違います。
たとえば同じページでも、
- 27インチのデスクトップモニター
- 13インチのノートパソコン
- iPad
- 大型スマートフォン
- 小型スマートフォン
では表示領域が違います。
ブラウザのウィンドウを小さくして見る人もいます。
WEBデザインでは、この画面幅の違いに応じてレイアウトを変える「レスポンシブデザイン」が一般的です。
3列だったものが2列になる。
2列だったものが縦1列になる。
横並びのメニューがハンバーガーメニューになる。
写真と文章の位置関係が変わる。
こうした変化を、固定された1枚のPDFだけで確認することはできません。
理由2｜文字は環境によって見え方が変わる
文字も意外と重要です。
PDFで見たときはきれいに1行へ収まっていた見出しが、ブラウザでは2行になる。
逆に、想定より短く見えることもあります。
WEBフォント、OS、ブラウザ、文字サイズなどによって、文字の見え方には差が出ます。
さらにWEBサイトでは、ユーザー自身が文字を拡大していることもあります。
そのため、
PDFではこの位置で改行していたから、WEBでも絶対にここで改行する。
という発想を強く持ちすぎると、レスポンシブデザインとの相性が悪くなります。
もちろん、キャッチコピーなど意図的に改行位置を調整するケースはあります。
ただし本文まで紙媒体のように一文字単位で位置を固定しようとすると、別の画面サイズで不自然になることがあります。
WEBの文字組みは、ある程度「動くもの」として見る必要があります。
理由3｜ボタンは「見た目」だけでは判断できない
たとえばPDFに、きれいな「お問い合わせ」ボタンが配置されていたとします。
色もいい。
大きさもいい。
デザインとしては問題ありません。
でも実際のWEBサイトでは、その先があります。
- 押せることが直感的に分かるか
- マウスを乗せたときに反応するか
- スマホでタップしやすい大きさか
- 正しいページへ移動するか
- 別タブで開くべきリンクになっているか
- キーボード操作でも利用できるか
これらは静止画では判断できません。
WEBデザインで大切なのは、きれいなボタンを描くことではなく、ユーザーが迷わず次の行動へ進めることです。
お問い合わせを増やしたいサイトなら、なおさらです。
理由4｜メニューやアニメーションは動かして初めて分かる
WEBサイトには「動き」があります。
代表的なのがグローバルメニューです。
PCでは横並び。
スマートフォンではメニューアイコンをタップすると画面上へ展開。
さらに、
- ドロップダウンメニュー
- アコーディオン
- スライダー
- モーダルウィンドウ
- スクロールアニメーション
- 固定ヘッダー
などもあります。
これらは動かしてみないと使いやすさが分かりません。
たとえば、見た目は格好いいアニメーションでも、毎回表示されるまで待たされるとストレスになるかもしれません。
固定ヘッダーが大きすぎて、スマートフォンの画面を圧迫することもあります。
WEBサイトでは、動きそのものもデザインの一部です。
だから最終確認では実際に触る必要があります。
理由5｜縦長ページはスクロールして初めて印象が分かる
WEBサイトは縦に長くなることがあります。
特にランディングページでは顕著です。
これをPDFで全体表示すると、ものすごく細長い画像になります。
縮小して全体を見ると、レイアウトのバランスは確認できます。
でもユーザーは実際にはそんな見方をしません。
画面に表示される範囲を見ながら、少しずつ下へスクロールします。
つまり重要なのは、
- 最初の画面で何が伝わるか
- 次を読みたくなるか
- 情報量が多すぎて疲れないか
- 途中で問い合わせしたくなったときに導線があるか
- 同じようなセクションが延々続いて見えないか
といった「読む体験」です。
これは縦長PDFを眺めるだけでは分かりにくい部分です。
理由6｜フォームは実際に入力・送信して確認する
企業サイトで特に重要なのがお問い合わせフォームです。
PDFなら、
- 会社名
- 氏名
- メールアドレス
- 電話番号
- お問い合わせ内容
- 送信ボタン
がきれいに並んでいれば完成したように見えます。
でも、本当に確認したいのはその先です。
入力しやすいか。
必須項目が分かるか。
エラーになったとき何を直せばいいか分かるか。
スマートフォンで入力しにくくないか。
送信後に完了したことが伝わるか。
確認メールが届くか。
管理者にもメールが届くか。
これらはすべて、実際にフォームを操作しなければ確認できません。
フォームは「存在している」だけではなく「最後まで使える」ことを確認する必要があります。
理由7｜WEBデザインの目的は「完成画像を再現すること」ではない
ここが一番重要だと思います。
WEB制作では、デザインカンプを完璧に再現すること自体が目的になってしまうことがあります。
でも本来の目的は違います。
会社を知ってもらう。
商品を買ってもらう。
問い合わせてもらう。
予約してもらう。
資料をダウンロードしてもらう。
ユーザーに必要な情報を伝える。
そのためにデザインがあります。
たとえばPDFを完全再現した結果、スマートフォンでボタンが小さくなって押しにくいなら、変えた方がいい。
文字が読みにくいなら、大きくした方がいい。
PCと同じ配置にするとスマートフォンで不自然なら、順番を変えた方がいい。
WEBデザインは、完成した1枚の絵ではありません。
ユーザーが情報を見て、理解して、操作するための設計です。
「PDFと1px違う」という話より、「このボタンは押しやすいか」の方がユーザーにとっては重要です。
では、WEBデザインはどう確認すればいい？
PDFを使ってはいけない、という話ではありません。
制作工程ごとに確認方法を変えるのが現実的です。
STEP1｜初期デザインは画像やPDFでもOK
制作初期は、デザインツールやPDFなどで方向性を確認します。
この段階では、
- サイト全体の雰囲気
- 配色
- 写真
- コンテンツ構成
- 大まかなレイアウト
を見る。
細かな動作確認をする段階ではありません。
STEP2｜実装後はブラウザで確認する
HTML/CSSやWordPressへ実装されたら、確認方法を切り替えます。
テスト環境など、実際にブラウザからアクセスできる状態で確認します。
ここでは「PDFと同じか」だけを見るのではなく、実際に使ってみます。
STEP3｜PCとスマートフォンの両方を見る
最低でもPCとスマートフォンは確認します。
できれば自分が普段使っているスマートフォンで実際に開いてみる。
ブラウザの開発者ツールでスマートフォン幅へ変更する方法もありますが、実機で触ると気付くこともあります。
STEP4｜クリック・入力・スクロールする
眺めるだけではなく操作します。
- メニューを開く
- リンクを押す
- ページをスクロールする
- フォームへ入力する
- 電話ボタンを確認する
- 外部リンクを確認する
ユーザーが行う操作を一通り試します。
STEP5｜最後に目的を確認する
そして最後に、サイトの目的へ戻ります。
問い合わせを増やしたいサイトなら、問い合わせまで迷わず進めるか。
商品を売りたいECサイトなら、商品を探して購入まで進めるか。
採用サイトなら、仕事内容を理解して応募できるか。
デザイン確認というと色や余白ばかり見てしまいますが、最終的にはここが一番大切です。
制作会社へデザイン確認を依頼されたときのチェックリスト
ホームページ制作を依頼していて「確認してください」と言われたら、次の順番で見ると分かりやすいです。
- 文章や写真に間違いがないか
- サイトの雰囲気が会社やサービスに合っているか
- PCとスマホの両方で読めるか
- メニューやボタンを迷わず操作できるか
- 必要な情報へたどり着けるか
- フォームを最後まで送信できるか
- サイト本来の目的を達成できそうか
逆に、最初から余白1px、文字位置1pxのような部分だけを見ると、確認作業が細部へ寄りすぎます。
もちろん細部を整えることも必要です。
ただ、優先順位があります。
情報が正しい → 使える → 目的を達成できる → 細部を整える。
この順番で見た方が、本当に必要な修正を見つけやすくなります。
まとめ｜WEBサイトは「見る」だけではなく「使って」確認する
PDFや画像によるデザイン確認にはメリットがあります。
制作初期の段階で、色や写真、レイアウト、全体の方向性を共有するには便利です。
ただし、そこでWEBサイトの確認を終わらせない。
実装後はブラウザで開く。
画面幅を変える。
スマートフォンで見る。
スクロールする。
メニューを開く。
リンクを押す。
フォームを送る。
そこまでやって、初めてWEBサイトとして確認できます。
紙なら、完成したデザインを見ることが最終確認になります。
WEBは違います。
WEBサイトのデザインは「どう見えるか」と「どう使えるか」の両方で判断する。
制作会社へ依頼する側も、制作する側も、この認識を共有しておくと「デザイン通りなのに使いにくいサイト」になるのを防ぎやすくなります。
