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

> 正式なページ: https://kakuyasuhp.com/column/design-kakunin.html／最終更新: 2026-09-27

運営: 格安HP屋（〒101-0051 東京都千代田区神田神保町3丁目11番6号 神保町ビル10階／050-3109-3399／info@kakuyasuhp.com）

分類: 制作の流れ（テーマ: 作成ツール・依頼先の比較）／公開: 2026-09-27／更新: 2026-09-27／読む時間の目安: 約12分／執筆: 格安HP屋 編集部

## この記事の結論

デザインカンプは、ホームページの完成に近い見た目を画像などで表した「見本」で、中身の並びを決めるワイヤーフレームとは確かめるところが違います。段階ごとに見るところを決めて、最後はスマホで実物を確かめるのが、公開してからの「こんなはずでは」を減らすいちばんの近道です。3つの違いと確認のコツ、確認メールの返し方まで順に書きました。

## 結論｜ワイヤーは「並び」、カンプは「見た目」を決め、最後は実物で確かめる

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

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

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

![この記事のポイント：ワイヤーは並び、カンプは見た目を決める／画像のカンプはスマホと動きが確かめにくい／確認は本番の原稿と自分のスマホで](https://kakuyasuhp.com/assets/column/design-kakunin-1.jpg)

## ワイヤーフレーム・デザインカンプ・プロトタイプの違い

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

| 段階 | どんなものか | 見る形 | ここで確かめること | ここでは確かめにくいこと |
|---|---|---|---|---|
| ワイヤーフレーム | 載せる中身と順番を、線と箱で表した骨組み | 紙、画像、資料 | 中身の抜け、順番、ボタンや電話番号の場所 | 色や写真の雰囲気 |
| デザインカンプ | 色・文字・写真を入れた、完成に近い見た目の見本 | 画像、PDF、デザインツール | 雰囲気、色、写真の見せ方、らしさ | スマホでの崩れ、動き、文字が増えたときの見え方 |
| プロトタイプ | 画面をつないで、押したときの動きを試せる試作 | デザインツールの試作機能、組み上げたHTML | 押しやすさ、画面の流れ、動き | 形によっては、実際の表示と違うことがある |
| テストサイト | 本番と同じしくみで組み上げた、公開前のページ | ブラウザで開くURL | 全ページの表示、フォーム、リンク、速さ | ここでの大きな変更は、手戻りが大きい |

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

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

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

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

## 段階ごとに確かめること｜ワイヤー・カンプ・実物

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

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

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

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

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

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

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

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

## 画像のデザインカンプの限界｜スマホ・動き・文字の量

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

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

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

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

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

## デザイン確認のコツ｜本番の原稿で、スマホで、見る人を決めて

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

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

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

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

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

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

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

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

## デザイン確認でよくある行き違いと防ぎ方

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

| よくある行き違い | 起きやすい理由 | 防ぎ方 |
|---|---|---|
| 写真の雰囲気が思っていたのと違う | カンプの写真が仮の素材だった | 本番の写真を先に渡す。仮かどうかを聞く |
| スマホで見たら文字が小さい、長い | パソコン用のカンプだけで確かめた | スマホ用の画面も見せてもらい、自分のスマホで開く |
| 原稿を入れたら見出しが2行になった | カンプの文章が短い仮のものだった | 本番の原稿を入れた状態で見せてもらう |
| 動きが想像と違う | 止まった絵では動きがわからない | プロトタイプや動くページで確かめる |
| OKを出したあとで、社内から別の意見が出た | 確かめる人が決まっていなかった | 決める人を1人に。関係者には確定前に見てもらう |

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

![格安HP屋の制作の流れ：1 無料相談、2 お見積り（税込・追加料金なし）、3 初稿を動くHTMLでパソコンとスマホで確認、4 修正（制作中は回数無制限）、5 公開（納品後30日の無償サポート）](https://kakuyasuhp.com/assets/column/design-kakunin-2.jpg)

## 格安HP屋に頼むと｜初稿は実際に動くHTML、URLを開くだけ

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

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

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

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

業種ごとに実際に作ったトップ画面は[デザインイメージ](https://kakuyasuhp.com/design-samples.html)で、ほかの事例は[制作事例](https://kakuyasuhp.com/works.html)でご覧いただけます。

## まとめ｜デザインは、段階ごとに見るところを決めて、スマホで確かめる

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

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

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

## よくあるご質問

### Q. ワイヤーフレームやデザインカンプは、必ず作ってもらえるものですか？

決まりはなく、依頼先によって進め方が違います。ワイヤーフレームを省いてデザインから見せる進め方も、画像のカンプを作らずに組み上げたものを見せる進め方もあります。大事なのは、どの段階で、何を、どんな形で見せてもらえるかを、見積もりの段階で聞いておくことです。

### Q. 「モックアップ」と「デザインカンプ」は同じものですか？

ホームページ制作では、完成に近い見た目の見本という、ほぼ同じ意味で使われることがあります。カンプをスマホやパソコンの画面の枠に入れて見せたものを、モックアップと呼ぶ人もいます。言葉の違いにこだわるより、「何を確かめるための見本か」を聞いておくと迷いません。

### Q. デザインカンプは何案くらい出してもらえますか？

依頼先ごとに違います。案の数が多いほど良いとは限らず、目的に合った案かどうかのほうが大事です。いくつかの案から選ぶときは、好みだけでなく「見てほしい相手に伝わるのはどちらか」で比べると決めやすくなります。格安HP屋は、トップページのデザインを2案お出ししています。

### Q. デザインの確認で「OK」を出したら、あとから直せませんか？

直せないわけではありませんが、確定したあとの大きな変更は、別料金や日程の延びにつながることがあります。OKを出す前に、スマホでの見え方と、実際の原稿が入った状態を確かめておくと安心です。修正の条件は、見積書や契約書でも確かめておきましょう。

### Q. ワイヤーフレームを自分で書いて渡してもいいですか？

手書きの紙1枚でも、載せたいことと順番が伝わるので、話が早くなります。上から順に「何を」「どのくらいの大きさで」並べたいかを書き、色や飾りなどの細部は作る側に任せるのがコツです。参考にしたいサイトがあれば、好きなところと一緒に添えてください。

## あわせて読みたい

- [代表挨拶の書き方と例文｜ホームページで信頼される文章](https://kakuyasuhp.com/column/daihyo-aisatsu.html)
- [ホームページの写真の著作権・肖像権｜使う前の確認](https://kakuyasuhp.com/column/shashin-kenri.html)
- [Wixの料金はいくら？独自ドメインで使う実際の費用](https://kakuyasuhp.com/column/wix-ryokin.html)