デザインカンプとは？ ワイヤーフレームとの違いと確認のコツ

デザインカンプは完成に近い見た目の見本で、ワイヤーフレームは中身の並びを決める骨組みなので、確かめる中身がまったく違います。この違いを知っておくと、それぞれの段階で何を見て、何を言えばいいかがはっきりします。

• ワイヤーフレーム：載せる中身と順番を、線と箱で表した設計図。ここでは「抜けがないか」「順番は伝わるか」を見ます。
• デザインカンプ：色や文字、写真を入れた見た目の見本。ここでは「雰囲気は合っているか」「読みやすいか」を見ます。
• プロトタイプや組み上げたページ：実際に触って確かめられる形。ここで、スマホでの見え方や押しやすさ、動きを確かめます。

画像のカンプだけでOKを出すと、スマホで開いたときや、実際の原稿を入れたときに「思っていたのと違う」が起きやすくなります。僕ら格安HP屋が初稿を動くHTMLで見せているのも、このずれを減らすためです。ここでは、どんな進め方の依頼先に頼む場合でも役立つ確かめ方を書いていきます。

ワイヤーフレームは並び、デザインカンプは見た目、プロトタイプは動きを確かめるためのもので、あとの段階ほど完成に近く、直すときの手間も大きくなります。

デジタル庁のウェブアクセシビリティ導入ガイドブック（2025年10月更新）でも、設計・実装の一般的な流れとして、ワイヤーフレームの作成と検証、詳細なデザイン、静的なUIプロトタイプの実装とテスト、本実装という順番が挙げられています。同じ章には、ワイヤーフレームの段階ではHTMLがまだ無いので、画面の読み上げソフトなどで「実際に使えそうか」を試せないこと、HTMLを組み上げるなどしてブラウザで確かめられるプロトタイプを作れば、操作を試して使い心地を確かめられることも書かれています。

プロトタイプの作り方はいろいろです。Figma などのデザインツールには、画面どうしをつないで操作の流れを試せる機能があり、リンクで共有できます（Figma のヘルプ）。一方で、描いた画面をつないだものと、ブラウザで組み上げたHTMLとでは、文字の折り返しや読み込みの速さ、フォームの動きなどが違うことがあります。どちらの形で見せてもらえるのかは、聞いておいて損はありません。

「サイトマップ」を出されたら

ワイヤーフレームの前に、「サイトマップ」と呼ばれるページの一覧を出す依頼先もあります。ここでいうサイトマップは、トップ、サービス、料金、会社概要、お問い合わせのように、どのページを作るかと、ページどうしのつながりを示したものです。1ページの中に何をどの順で並べるかを決めるのがワイヤーフレームなので、サイトマップでは「必要なページがそろっているか」「お客様がたどる順番に無理がないか」を確かめます。検索エンジンに渡す「XMLサイトマップ」とは別のものなので、言葉が同じでも混同しないようにしましょう。検索向けのサイトマップの話はサイトマップとはにまとめています。

段階ごとに見るところを決めておくと、ワイヤーの段階で色を気にしたり、組み上がってから並びを変えたくなったりする手戻りを防げます。

ワイヤーフレームで確かめること

• お客様が知りたいこと（料金、場所、流れ、よくある質問など）が抜けていないか
• いちばん見てほしいことが、上のほうにあるか
• 電話や予約、お問い合わせのボタンが、迷わない場所にあるか
• ページの数と、ページどうしのつながりに無理がないか

デザインカンプで確かめること

• 自社らしさや、お店の雰囲気に合っているか（好みより、見てほしい相手に合うか）
• 文字と背景の色の差は十分か。デジタル庁のガイドブックでは、文字と背景のコントラスト比を4.5：1以上（大きい文字は3：1以上）にすることが求められています
• 赤い字だけ、色だけで大事なことを伝えていないか（同じガイドブックで、色の違いだけで情報を伝えないよう書かれています）
• 写真は本番で使うものか、仮の素材か

プロトタイプ・組み上げたページで確かめること

• 自分のスマホで開いて、片手で読めて、押したいところが押せるか
• 電話番号を押すと電話がかかるか、フォームは最後まで送れて、自動返信のメールが届くか
• ブラウザで文字を大きくしても、読めるか（同じガイドブックでは、ブラウザの機能だけで文字を200%まで大きくでき、重なったり切れたりしないことが求められています）
• 電波の弱い場所でも、待たされすぎずに開くか

全部を完璧に見る必要はありません。それぞれの段階で「今はこれを決める」と区切るだけで、確認の時間も、あとで直す手間もぐっと減ります。使いやすさの考え方はUI・UXとはで、画面の最初の部分の組み立てはファーストビューの作り方で詳しく書いています。

画像のカンプは決まった幅で描いた「絵」なので、スマホでの見え方、動き、実際の文字の量までは確かめきれないのが、いちばんの弱点です。

ホームページを見る人の多くは、スマートフォンで見ています。総務省の通信利用動向調査（令和7年調査、2026年5月公表）では、6歳以上でスマートフォンを使ってインターネットを利用した人は74.3%で、パソコンの45.6%を大きく上回っています。50代でもスマートフォンは89.2%、パソコンは56.8%でした。Google も、検索に載せる中身や順位を決めるときは、スマートフォン向けに表示されたページの中身を使うと説明しています（Google 検索セントラル「モバイルサイトとモバイルファースト インデックスに関するおすすめの方法」）。

ところが、デザインの確認となると、パソコンの大きな画面で、パソコン用のカンプだけを見て済ませてしまうことがあります。画像のカンプで確かめきれないのは、主に次の3つです。

1. スマホでの見え方：スマホの画面は機種ごとに幅が違い、文字の折り返しや写真の切れ方が変わります。パソコン用のカンプをスマホで開いても、それは大きな絵を縮めて見ているだけで、スマホ用の見え方ではありません。
2. 動き：スクロールしたときに現れる演出、メニューの開き方、写真の切り替わりなどは、止まった絵ではわかりません。
3. 文字の量：カンプには短い仮の文章が入っていることがあり、本番の原稿を入れると、見出しが2行になったり、ボタンの文字がはみ出したりします。

カンプを見せてもらうときは、スマホ用の画面もあるか、文章は本番の原稿か、動きはどう確かめられるか、の3つを聞いておくと安心です。画面の幅に合わせて形を変えるしくみは、レスポンシブデザインとはでやさしく説明しています。

デザイン確認のコツは、本番の原稿と写真を入れた状態で、自分のスマホで、決める人を1人に絞って見ることです。

1. 本番の原稿と写真で見る：仮の文章や仮の写真のままでは、本当の見え方はわかりません。原稿はできるだけ先にそろえておきましょう。
2. 自分のスマホで、片手で見る：お客様と同じように、電車の中や店先で見るつもりで、上から下までスクロールしてみます。
3. 見る人と決める人を決める：意見を聞く人は何人いてもかまいませんが、最後に決める人は1人にします。電話や受付を担当している人など、お客様に近い人にも見てもらうと、気づきが増えます。
4. 目的に照らして見る：「好きか嫌いか」より、「見てほしい相手が、次に何をすればいいかわかるか」で判断します。
5. 返事はまとめて1回で：社内の意見をまとめてから、場所・中身・理由をセットで返します。

オンラインで確認するときのコツ

打ち合わせがビデオ通話の場合は、画面共有で説明を聞きながら一度見て、そのあと自分のスマホで開き直すのがおすすめです。説明を聞きながらだと、どうしても「なるほど」と思ってしまいがちで、ひとりで見たときの引っかかりに気づきにくいからです。気になったところは画面の写し（スクリーンショット）を撮り、印をつけて返すと、場所の説明が一言で済みます。社内の何人かで見るときは、同じURLや資料を回して、意見を出す期限を決めておきましょう。

確認メールの返し方（例文）

デザインの確認のメールには、最初に結論（進めてよいか、直してほしいか）を書き、直してほしい点に番号をつけて並べると伝わります。

〇〇様
デザイン案をありがとうございました。社内で確認し、トップページはB案で進めていただきたいと考えています。そのうえで、次の3点の修正をお願いします。
①スマホで見たとき、料金表の文字が小さく感じます。年配のお客様が多いので、一回り大きくしてください。
②トップの写真は、仮のものから、先日お送りした店内の写真に差し替えてください。
③お問い合わせのボタンを、ページの最後だけでなく、料金表のすぐ下にも置いてください。
ほかは、このままで問題ありません。修正後の案は、〇日ごろまでにいただけると助かります。

「全体的にもう少し…」のような感想だけの返事は、作る側が推し量るしかなく、次の案もずれやすくなります。修正の伝え方と、修正が何回まで無料かの考え方は、ホームページ制作の修正は何回まで？にまとめています。

デザイン確認での行き違いは、確かめたときの形と、実際に公開される形がずれていると起きやすくなります。

どれも、依頼する側と作る側のどちらかが悪いというより、「何を、どの形で確かめたか」がそろっていなかったことが原因です。制作の流れ全体でいつ何を決めるかは制作の期間・流れの記事に、デザインの流行との付き合い方はデザインのトレンドに、見積もりの「オリジナル」の中身の確かめ方はテンプレートとオリジナルデザインの違いにまとめています。

格安HP屋では、初稿を画像やラフではなく、パソコンやスマートフォンで実際に開いて触れるHTMLのデザインでお見せしています。

流れは、お問い合わせ（聞き取りは30分ほど）、サイトマップとお見積り、デザイン提案、実装・調整、公開・お渡しの順です。見積もりと一緒に、どんなページを作るかをまとめたサイトマップをお出しし、デザイン提案ではトップページのデザインを2案お出しします。テンプレートは使わず、一社ずつゼロからデザインしたオリジナルです。

初稿が動くHTMLなので、ご自身のスマホで開いて、スクロールしたり、ボタンを押したりしながら確かめられます。文字の大きさや写真の切れ方、ボタンの押しやすさを、完成に近い形で判断できるので、話が早く、行き違いが少なくなります。お客様からの評価が高いのも、この点です。確認はURLを開くだけなので、遠方の方でも、社内の何人かに見てもらう場合でも手間がかかりません。

料金はHP新規制作25万円、HPリニューアル30万円、LP制作8万円（すべて税込）で、ページ数や機能の数で金額は変わりません。サーバー・ドメインの実費（年1〜2万円ほど。名義はお客様）のほかに追加料金はかからず、制作中の修正は回数無制限・追加料金なしです。納品後30日間（リニューアルは60日間）は無償でサポートします。

業種ごとに実際に作ったトップ画面はデザインイメージで、ほかの事例は制作事例でご覧いただけます。

ワイヤーフレームは並び、デザインカンプは見た目、プロトタイプや組み上げたページは使い心地を確かめるもので、最後は自分のスマホで実物を見ることが大切です。

• ワイヤーフレームでは、中身の抜けと順番、ボタンの場所を見る
• デザインカンプでは、雰囲気と読みやすさ（文字と背景の色の差）、写真が本番のものかを見る
• 画像のカンプは、スマホでの見え方・動き・文字の量までは確かめきれない
• 確認は本番の原稿で、自分のスマホで、決める人を1人に。返事は結論から、まとめて1回で

「うちの場合、どんな形でデザインを確かめられるのか」を聞いてみたいだけでもかまいません。相談と見積もりは無料です。お問い合わせからどうぞ。