Web制作のデザインとコンテンツの違い、混同が招くトラブル

ワイヤーフレームが承認され、デザインの検討に入ったタイミングで「やっぱり内容を変えたい」「そもそも文章がまだ決まっていなかった」という声が上がることがあります。制作会社としては困る話ですが、クライアントの立場から見れば、デザインを目の前にしたときにはじめて「このテキストで本当に大丈夫か」と気になり出すのは、自然なことかもしれません。

問題の本質は、「デザイン（見た目）」と「コンテンツ（掲載内容）」が、まったく別の作業であるという認識が共有できていないことです。制作会社の側にはこれが自明すぎて、あえて説明しないことも多くあります。しかしクライアントにとっては、両方が「ホームページ」という一つの塊に見えているため、どこからどこまでが何の話なのかが判然としないのです。

この認識のズレは、工程が進むたびに「それはすでに決まっているはず」「いや聞いていない」というすれ違いを生み、手戻りやスケジュール遅延、最終的には完成品への不満につながっていきます。

Webサイトを作るときに登場する「デザイン」「コンテンツ」「ワイヤーフレーム」それぞれが何を意味するのか、なぜ順番通りに進める必要があるのかを、できるだけ具体的に整理します。

デザインとコンテンツ、何がどう違うのか

デザインとは「どう見せるか」の設計

デザインとは、Webサイトの視覚的な表現です。背景の色、見出しのフォントや大きさ、写真の使い方、ボタンの形状、余白のバランス、要素が動くアニメーション——これらがすべてデザインの範疇に入ります。

「こんなデザインにしたい」という言葉でリクエストをいただくことは多いのですが、よく話を聞いてみると、参考に挙げたサイトのコンテンツや構成に惹かれているケースも少なくありません。「かっこいい」と感じる理由が、色使いや写真の選択にあるのか、テキストのわかりやすさや情報の整理にあるのかによって、制作会社が次に取るべき行動はまったく変わります。

コンテンツとは「何を伝えるか」の中身

コンテンツとは、Webサイトに実際に掲載する情報のことです。会社の概要、提供するサービスの説明、価格、スタッフの写真、お客様の声、問い合わせ先の電話番号——こういった「何を伝えるか」の中身がコンテンツです。

よく「デザインは器、コンテンツは中身」という言い方をします。ただこれを「器を先に用意して、あとで中身を入れればいい」と受け取ってしまうと、やっかいなことになります。実際には、コンテンツの量や種類によって器の形が変わるため、コンテンツが決まる前に器だけ完成させることはできないのです。

見た目が変わっても内容は変わらない

デザインを変えてもコンテンツは変わらず、コンテンツを変えてもデザインは変わらない——これが原則です。同じ文章を明朝体で表示しても、ゴシック体で表示しても、書かれている意味は同じです。逆に、文章を書き直してもサイトの色は変わりません。

ところが実際の現場では、「デザインを見ながら文章を考えたい」「デザインが決まってからでないと原稿は書けない」という声もよく出てきます。気持ちはわかりますが、これは工程を逆走することになります。その理由は、次の章で詳しく説明します。

ワイヤーフレームは何を決めるものか

「どこに何を置くか」を決める設計図

デザインとコンテンツの間には、もう一つワイヤーフレームという工程が入ります。ワイヤーフレームは、色も写真も使わず、ページの構造だけを線と四角で表現した設計図です。「このページの上部にはキャッチコピーを大きく表示し、その下に3つのサービスを横並びで並べ、さらに下にはお問い合わせボタンを置く」といった、情報の配置と優先順位を決めるための図です。

ここで重要なのは、ワイヤーフレームはデザインでもなく、コンテンツでもないということです。「サービス説明のブロックをここに置く」とは決まりますが、その説明文の具体的な言葉はまだ決まっていないことがほとんどです。「ここに写真が入る」とは決まりますが、どんな写真を使うかはまだ未確定です。ワイヤーフレームはあくまで「情報の構造と配置を合意する」ための図なのです。

ワイヤーフレーム

サイトの構造と情報配置を決めるための図面。色や装飾を使わず、見出しやテキスト、ボタンの配置など、情報の優先順位や導線を決定することに特化している。

デザインカンプ

本番環境と同じように見える完成形のデザイン画像。ワイヤーフレームで決定した配置をもとに、色・フォント・写真・余白などビジュアルをすべて決定する。これがコーディングの指示書になる。

コンテンツ（原稿・素材）

サイトに実際に掲載するテキスト、写真、図版、動画など。クライアントが用意するものと、制作会社や外部のライター・カメラマンが制作するものに分かれる。

ワイヤーフレームにOKを出すことの意味

クライアントにとって、ワイヤーフレームの確認は地味に見えるかもしれません。色も写真もなく、白黒の図形が並んでいるだけのため、「これって本当に確認できているのか」という感覚になるのも無理はないのです。

しかしワイヤーフレームへのOKは、「このページにはこの情報をこの順番で掲載することに合意した」という意思決定です。この段階でコンテンツの大枠が固まっていないと、後からデザインが出てきたときに「やっぱり情報を追加したい」「この順番を変えてほしい」という変更が発生し、デザインをゼロからやり直す羽目になります。

家の間取り図に捺印した後に「やっぱりリビングと寝室を入れ替えたい」と言い出すようなものです。修正できないわけではありませんが、コストと時間が大きく動くことは避けられません。

なぜこの順番で進めるのか

ワイヤーフレーム→コンテンツ準備→デザインという流れ

Web制作の標準的な流れは、次のような順番で進みます。

• ヒアリング・要件定義
• サイトマップ（どんなページが必要かの整理）
• ワイヤーフレーム（各ページの情報配置の設計）
• コンテンツ準備（テキストや写真素材の用意）
• デザイン制作
• コーディング・開発
• テスト・公開

この流れを理解すると、デザインが始まる前にコンテンツが必要な理由がわかります。デザイナーは、テキストの量や写真の縦横比に合わせてレイアウトを組みます。「3行で収まる説明文」を想定して作ったデザインに、実際には10行の文章が入ってきたとすれば、レイアウトは必ず崩れます。写真が手元にない状態で「ここに大きな写真を配置する」というデザインを作っても、完成後に別の写真を差し込んだとき、デザインが想定通りに見えなくなることもあります。

デザインは、コンテンツという素材があって初めて成立するのです。

「デザインを見てから原稿を書く」はなぜ難しいか

「デザインのイメージが固まってから原稿を考えたい」という気持ちは理解できます。しかし実際には、デザインに依存してコンテンツが書けるわけではありません。「このボタンの色が青になるから文章を変える」という人はいないですし、「フォントが決まってから文章を書く」という人もほぼいないはずです。

それよりも問題なのは、コンテンツが決まっていない状態でデザインを見ると、「この文言でいいのだろうか」という不安が浮かんで、デザインのフィードバックがコンテンツの再検討に変わってしまう点です。デザインを直しているつもりが、実は中身の再考が始まっている——これが「デザインを何度直しても終わらない」という状況の原因のひとつです。

コンテンツが先に固まっていれば、デザインに関するフィードバックは純粋に「見た目の話」として整理できます。「この写真の雰囲気が合わない」「見出しのフォントをもう少し柔らかくしてほしい」といった意見が、コンテンツの変更とごっちゃにならない。両者を分けて進めることは、単なる手順の話ではなく、プロジェクトの議論を健全に保つための構造です。

混同するとどんなトラブルが起きるか

ワイヤーフレームで合意した構成がデザインで覆される

最もよく起きるのは、ワイヤーフレームで合意した構成が、デザインが出てきた段階でひっくり返るケースです。「ワイヤーのときはよさそうに思えたが、デザインを見たら違った」という声は実は少なくない。しかしその「違った」の理由を掘り下げると、「デザインが気に入らない」のではなく「情報の並び方がやっぱり気になる」というケースが多いのです。

デザインの修正で済む問題と、コンテンツや構成の変更を伴う問題は、費用と時間のインパクトがまったく違います。「デザインのボタンの色を変える」はデザイナーに数時間の話ですが、「ページの構成を変える」は設計からやり直しになり、デザインとコーディングが連動してすべて影響を受けます。後半になるほど手戻りのコストは膨らんでいきます。

素材が間に合わずスケジュールが詰まる

「デザインを見てから素材を集めましょう」という流れで進めてしまうと、制作スケジュールの後半で素材集めが始まります。使いたい写真が見つからない、文章がなかなか書けない、社内確認に時間がかかる——こういったコンテンツ側の遅延が、公開日を直撃するのです。

写真1枚でも、撮影が必要なもの、購入が必要なもの、社内承認を通す必要があるものは、「今日集めて今日使える」とはなりません。コンテンツの準備を早い段階で始めることが、制作全体のスケジュールを守る最大の条件の一つだといえます。

デザインフィードバックでコンテンツ変更が発生する

デザインを確認するミーティングで、「この文言を変えてほしい」「やっぱりここにもう一つセクションを追加したい」という要望が出ることがあります。文言の細かい修正程度であればデザイン内での対応も可能ですが、セクションの追加や削除はレイアウトの変更を伴い、デザインと開発の両方に影響します。

これが繰り返されると、プロジェクトの終盤になればなるほど修正コストが積み上がり、予算と納期がじわじわと膨らんでいきます。デザインフィードバックの場では「見た目の評価」だけを行い、コンテンツや構成の変更はワイヤーフレームの段階で済ませておく。この認識がプロジェクトを健全に保つ鍵です。

各工程でクライアントが集中すべきこと

それぞれの工程で「何に集中すべきか」を整理しておくと、プロジェクトの議論がずっと進めやすくなります。

ワイヤーフレームの段階

「何をどこに載せるか」を確定させる時期です。この段階で問うべきことは、「このページに必要な情報が揃っているか」「訪問者がスムーズに問い合わせや購入に進める導線になっているか」「情報の順番に違和感がないか」といった点です。

「この文章をどう書くか」や「どんな色にするか」は、まだ考えなくてよい話です。逆に言えば、構成に関わる変更はこの段階のうちに全部出し切ることが、後の工程をスムーズにする唯一の方法です。「なんとなくOK」で次に進んでしまうと、後から大きな手戻りを招くことになります。

コンテンツ準備の段階

社内でテキストを書き、写真を用意し、必要な情報を制作会社に提供する段階です。「デザインを見てから決める」ではなく、「デザインのための素材を揃える」という意識で動く必要があります。具体的な進め方はサイト用コンテンツの準備ガイドにまとめています。

テキストについては、専門用語や自社ならではの表現を正確に伝えることが最優先です。文章の見栄えをデザイン的に整えるのは制作会社の仕事ですが、「何を伝えるか」の核心は、自社にしか書けないことが多いのです。どんなに優れたデザイナーでも、クライアントの事業の強みや想いを外側から書くことには限界があります。

写真は、完成品のクオリティに直接影響します。クオリティの高い写真があれば、シンプルなデザインでも一気に印象が上がる。撮影が必要な場合は早めに段取りをしておくことを勧めます。

デザインの段階

この段階でクライアントが集中すべきは、純粋に「見た目の話」です。「色のトーンが自社のイメージに合っているか」「フォントの雰囲気が合っているか」「全体的に洗練されて見えるか」「スマートフォンで見たときに読みやすいか」といった、視覚的な評価をする場です。評価の軸に迷ったら、Webデザインの目的と役割で扱っている「ターゲットに響くか」という基準に立ち返ってみてください。

テキストのちょっとした言い回しが気になるのは自然なことです。しかしそれはデザインの話ではありません。修正が必要な場合は「コンテンツの修正が発生する」という認識のうえで、工数と費用への影響を確認してから進めることを勧めます。デザインを見てはじめて「やっぱり文章も変えたい」となるのは、ワイヤーフレームとコンテンツの準備が不十分だったサインです。

まとめ

デザインとコンテンツは、Webサイトを作る上でともに欠かせない要素ですが、担当する作業の内容も、必要な準備も、確認すべきポイントもまったく異なります。

混乱の多くは、「Webサイト全体」という一つの塊として捉えてしまうことから生まれます。しかし実際には、「何を伝えるか（コンテンツ）」「どこに置くか（ワイヤーフレーム）」「どう見せるか（デザイン）」という三つの層が、順番に積み重なって完成していくものです。

どの工程で何が問われているかを理解することが、プロジェクトをスムーズに進め、完成品への納得感を高める最短ルートです。「なんとなく違う気がする」が積み重なって後戻りが続くプロジェクトも、この整理ができていれば、大部分は防げます。デザインとコンテンツ、そしてワイヤーフレームの役割をそれぞれ明確に持ちながら進めることが、質の高いWebサイトを作るための基本的な姿勢なのです。

ホームページ制作・リニューアルのご相談は合同会社ギャラクタスへ

「コンテンツが揃っていないとデザインが始められないと言われたが、どう準備すればいいかわからない」「ワイヤーフレームを確認したが、何を見ればよかったのか今も自信がない」——こういった状況でプロジェクトが止まったり、後から大きな手戻りが発生してしまうケースは珍しくありません。

合同会社ギャラクタスでは、ワイヤーフレームの段階から「これはデザインで調整できます」「これは今決めておく必要があります」という仕分けを丁寧にご説明しながら進めています。何をいつまでに準備すれば制作が動き出せるのか、どの工程でどんな判断をすべきか、プロジェクトの進行に不安がある方は、まず無料相談でご相談ください。