制作会社から届いたサイトのデザイン案をパソコンの画面に開き、どこを見て意見を返せばいいのか考えている一人の企業のWEB担当者

デザインカンプ・ワイヤーフレームの確認|担当者が見る7つの点

制作会社から、メールが届きます。

「サイトのデザイン案が上がりましたので、ご確認をお願いいたします。今週金曜までにフィードバックをいただけますと幸いです」

添付されたリンクを開くと、きれいな画面が並んでいます。写真も配置も、自分では絶対に作れないもの。しばらく眺めて、こう思う。

「……で、私は何を見ればいいんだろう」

デザインの良し悪しなんて、専門的に習ったことはない。「いいと思います」と返すのは無責任な気もするし、かといって細かく口を出せる自信もない。とりあえず部長に転送してみたら、「ふーん、いいんじゃない」と返ってきた。上司も同じところで止まっている。

そして金曜が来て、「特に問題ありません」と送る。

このもやもやは、デザインの知識が足りないから起きているのではありません。見るべき場所が違うところにあるからです。

デザインの美しさは、プロが責任を持つ領域です。担当者が見るべきなのは、そこではありません。このサイトを来年も再来年も更新していくのは自分だ、という立場からしか見えないことがあります。制作会社は、あなたの会社の中身を知らない。それを知っているのはあなただけです。

結論:デザイン案を見るときは、次の7点を上から順に確認します。好みの話は最後で大丈夫です。
①この画面で何をしてほしいのかが分かるか
②載せる情報が実際に全部載るか(社名、電話、営業時間、注意書き)
③文字が実物の量に耐えるか(サンプルは短く作られている)
④スマホで見たときどうなるか
⑤公開後、自分で更新できる形か
⑥写真・イラストの権利は誰のものか
⑦決められない点を、決められる人に回せているか

このうち②③⑤は、制作会社には絶対に分からないところです。ここを見つけられるのは、社内にいるあなただけです。

何が起きているのか

確認のチャンスは、たいてい2回ある

「デザインを確認してください」と言われる場面は、実は段階が違う2回があります。ここを分けて考えると、見るポイントがはっきりします。

1回目:ワイヤーフレーム(設計図・骨組み)

色も写真もない、灰色の四角と線だけの図です。「ここに見出し、その下に写真3枚、右にお問い合わせボタン」という配置と情報の並び順だけを決めるものです。設計図、間取り図のようなものだと思ってください。

初めて見ると、あまりに素っ気なくて「これで大丈夫なのかな」と不安になります。でもこの段階がいちばん大事です。ここで決まった並び順が、そのまま最後まで残るからです。

2回目:デザインカンプ(完成予想図)

ワイヤーフレームに、色・写真・書体が乗った完成予想図です。ここで初めて「サイトらしく」見えます。

近年は、PDFや画像ではなくデザインツールの共有リンク(Figmaなど)で送られてくることが増えました。ブラウザで開けて、画面の上に直接コメントを書き込めるものです。使い方が分からなければ、遠慮なく「操作を教えてください」と聞いて大丈夫です。慣れていないのは、あなたの落ち度ではありません。むしろ、コメント機能が使えるとやりとりの回数が目に見えて減ります。

後になるほど、直すのが重くなる

サイト制作が骨組み・見た目・公開の3段階で進み、後の段階ほど修正が重くなることを左から右へ並べた図
直しやすいのは左側です。並び順の話は「骨組み」の段階で言えると、いちばん軽く済みます

制作は、おおむね「骨組み → 見た目 → 公開」の順に進みます。そして、後ろに行くほど直すのが重くなります。

たとえば「お問い合わせボタンを、もっと上のほうに置きたい」という要望。骨組みの段階なら、線を1本動かすだけです。見た目ができた後だと、周りの配置もまとめて作り直しになります。公開後なら、費用の話が出てくることもあります。

同じ一言でも、言うタイミングで相手の作業量がまるで違う。だから気になったことは、早い段階でどんどん言っていいのです。むしろ制作会社は、そのほうが助かります。

ここで、多くの担当者がつまずくところがあります。

骨組みの段階で「色や写真がないから、まだ判断できない」と言って、確認を先送りしてしまう。

気持ちはとてもよく分かります。でも骨組みの段階で見てほしいのは、色ではありません。「この順番で情報が並んでいて、うちの会社として困らないか」だけです。それなら、社内にいるあなたが誰よりも判断できます。

制作会社が知らないことがある

制作会社は、WEBのプロです。でも、あなたの会社の事情は知りません。

これらは、聞かれなければ出てきません。そして、知らないまま作られたデザインは、公開後に必ずどこかで無理が出ます。

デザイン確認は、テストではありません。あなたが持っている情報を、まだ間に合ううちに渡す場です。そう考えると、少し気が楽になりませんか。

7つの確認ポイントを、順番に見ていく

上から順に見ていきます。全部を1日でやろうとしなくて大丈夫です。①〜③だけでも、価値のあるフィードバックになります。

①この画面で、何をしてほしいのかが分かるか

まず、デザインを「きれいかどうか」で見るのをやめます。かわりに、こう自問します。

「この画面を見たお客さんに、次に何をしてほしいんだっけ」

トップページなら「事業内容を知ってもらう」かもしれないし、「問い合わせしてもらう」かもしれない。サービス紹介ページなら「資料をダウンロードしてもらう」かもしれません。

その目的が決まったら、画面を上から見て確認します。

もし目的自体が曖昧なら、そこを先に決めるほうが早いです。「このページのゴールは何ですか」と制作会社に聞かれる前に、自分から共有してしまうのが一番強い。目的の整理は問い合わせにつながるページ構成も参考にどうぞ。

②載せる情報が、実際に全部載るか

ここからが、担当者にしか見えない領域です。

デザイン案は、きれいに見えるように作られています。だから、実際には必要な情報が省かれていることがあります。紙に印刷するか、リストにして照らし合わせてみてください。

よく抜けるものを挙げます。

業種によって表示が求められる項目は、社内の法務や上長に一度確認してください。ここは自分だけで判断せず、確認したという記録を残しておくと後々安心です。

「この但し書き、どこに入りますか」の一言は、デザイナーにはとても価値がある指摘です。責めているのではなく、材料を渡している。そういう気持ちで書いて大丈夫です。

③文字が、実物の量に耐えるか

これが、いちばん見落とされて、いちばん後で困るところです。

デザイン案に入っている文章は、見栄えのいい長さで作られています。「確かな技術で、暮らしを支えます」のような、きれいに1行に収まるもの。

でも、実際にあなたが入れる文章は、そうとは限りません。

見るべきは、「うちの実物を入れたら、この枠に収まるか」です。

確認のしかたは簡単です。自社の一番長い商品名・一番長いお知らせタイトルを、その場所に当ててみる。頭の中で置き換えるだけで十分です。はみ出しそうなら、その場で伝えます。

伝え方の例:
「トップの新着情報ですが、うちのお知らせはタイトルが2行になることが多いです(実例:〇〇〇〇〇〇)。2行になったときの見え方を教えていただけますか」

こう聞くだけで、デザイナーは「じゃあ2行想定で組みますね」と直してくれます。公開直前に「入りません」となるより、はるかに軽い。

同じ考え方で、写真がないケースも見ておきましょう。「お知らせに毎回サムネイル画像が付く」デザインだと、画像を用意できない回に困ります。「画像なしでも成立しますか」の一言を足しておくと安心です。更新の実情はお知らせを一人で滞りなく更新する運用にも書いています。

④スマホで見たときどうなるか

いまは、多くの企業サイトでスマートフォンからのアクセスが大きな割合を占めます。それなのに、確認はパソコンの大きな画面でしてしまいがちです。

デザイン案にスマホ版が含まれているか、まず確かめます。含まれていなければ、「スマホでの見え方も確認させてください」と依頼してかまいません。含まれているなら、ここを見ます。

自分のスマホで実際のデザイン案を開いてみるのも有効です。画面サイズの感覚が、ぐっとつかみやすくなります。公開後の見え方の確認はスマホでの表示崩れの見つけ方もどうぞ。

⑤公開後、自分で更新できる形か

ここを見られるのは、あなたしかいません。

デザインが凝っているほど、更新は難しくなることがあります。たとえば「トップページに、写真と見出しを美しく重ねた大きなバナーが3枚」というデザイン。かっこいいのですが、その画像を毎回誰が作るのかという問題が残ります。

確認したいのは、この3つです。

「このバナー、月に1回差し替える予定なんですが、画像は毎回こちらで作る形になりますか」——この質問は、早ければ早いほど効きます。答え次第では、デザインを少し簡単な形に変えてもらう相談ができるからです。

見た目の良さと、続けられる運用。この2つは、ときどきぶつかります。そしてぶつかったとき、続けられるほうを選んだサイトのほうが、1年後にきれいです。更新されないままの「かっこいいサイト」より、地味でも新しい情報が載っているサイトのほうが、お客さんにも社内にも役に立ちます。

決まった更新範囲は、そのままサイト運用マニュアルの元になります。メモしておくと後が楽です。

⑥写真・イラストの権利は誰のものか

デザイン案に入っている写真やイラストが、そのまま公開後も使えるとは限りません。

確認したいのは3つです。

素材サイトの写真には、利用期間や使える範囲に条件が付いていることがあります。「この画像は公開後も、パンフレットに使えますか」と一度聞いておくと、あとで別の部署から「あの写真ちょうだい」と言われたときに困りません。

近年は、AIで生成した画像が素材として使われることもあります。この場合も同じで、「その画像は自社で自由に使ってよいものか」を書面(メールでも可)で確認しておくと安心です。難しい判断は必要ありません。聞いて、返事を残しておく。それだけで十分です。詳しくはサイトに使う素材の権利確認にまとめています。

⑦決められない点を、決められる人に回せているか

最後は、社内の話です。

デザイン確認でいちばん時間を溶かすのは、修正作業ではなく「社内で意見が割れて止まる」時間です。しかも、それが2週間後に起きると、制作は完全に停止します。

だから、確認の段階でこう分けておきます。

種類どうするか
事実の確認(電話番号、社名、表記)自分で確認して、その場で返す
運用の判断(更新しやすさ、載せる情報)自分の意見として返してよい
会社としての判断(方針、ブランド、色、法務)決める人に回す。期限を切って

3つ目を自分で抱え込まないことが大事です。「私が決めていいのかな」と迷った時点で、それは回すべき案件です。

回すときは、丸投げしないのがコツです。「デザイン案です、見てください」ではなく、「A案とB案で、こちらとしてはAを推します。理由は〇〇です。金曜までにご意見をいただけますか」と、判断しやすい形にして渡します。上司も忙しい。判断のポイントを絞ってあげると、返事が驚くほど早くなります。

具体例:実際に返すコメントは、こう書く

7点を見終えたら、コメントにまとめます。長い文章はいりません。場所・気になること・聞きたいことの3つが入っていれば十分です。

悪い例と良い例を並べてみます。

悪い例

全体的にいい感じだと思います。ただ、もう少し明るい雰囲気だと嬉しいです。あと、なんとなく問い合わせがしにくそうな気がしました。

これだと、デザイナーは何をどう直せばいいのか分かりません。「明るい」は色のことなのか、写真のことなのか、余白のことなのか。結果、直しても「思っていたのと違う」となり、往復が増えます。

良い例

ありがとうございます。全体の方向性は問題ありません。以下、社内の事情から3点だけ確認させてください。

1. トップ/新着情報の欄
うちのお知らせはタイトルが2行になることが多いです(実例:「〇〇工場の年末年始休業および出荷スケジュールについて」)。2行になった場合の見え方を教えていただけますか。

2. トップ/メインビジュアルのバナー
こちらは月1回程度の差し替えを予定しています。画像はこちらで作成する想定でしょうか。作成が必要な場合、当方で用意できる形(サイズ・作り方)を教えていただけると助かります。

3. サービス紹介ページ/料金表の下
価格に「税抜」と「別途送料」の注記を必ず入れる決まりがあります。入れる場所をご相談させてください。

色味の方向性については、来週の社内確認のあとにご連絡します。

違いは、主観ではなく事実を渡しているところです。「明るくしてほしい」ではなく「うちの実物はこうなる」。これなら、相手はすぐ動けます。そして最後の一文で、まだ返せない項目と、いつ返すかを伝えている。これがあると、制作会社は待ち時間を計画できます。

伝え方をもう少し詰めたいときは、一度で伝わるフィードバックの書き方に文例をまとめてあります。

あなたへの影響

この7点を見る習慣がつくと、変わることが3つあります。

1つ目は、公開直前の慌ただしさが減ることです。「文字が入らない」「注記の場所がない」「画像が用意できない」——公開1週間前に出てくるこれらの問題は、ほとんどがデザイン段階で見つけられるものです。早く見つかれば、静かに直せます。

2つ目は、制作会社との関係が変わることです。「特に問題ありません」を返し続ける担当者と、「うちの実物だとこうなります」を渡してくれる担当者。制作会社にとって後者は、仕事がしやすい相手です。関係が良くなると、細かい相談も通りやすくなります。

3つ目は、社内での立ち位置です。「デザインの好き嫌い」ではなく「運用と情報の観点」で意見を返せるようになると、あなたの発言は会社の判断として扱われるようになります。これは、次の予算の話をするときにも効いてきます。

明日やること

デザイン案がすでに手元にあるなら、明日30分で、この順に進めてみてください。

  1. 紙かメモに、自社の「一番長い商品名」と「一番長いお知らせタイトル」を書き出す(5分)
  2. デザイン案を開いて、その文字が入る場所を探し、収まるか当ててみる(10分)
  3. 電話番号・営業時間・注記が載っているかを目で追う(5分)
  4. 「これは毎回自分で更新するのか」という目で、もう一度全体を眺める(5分)
  5. 気になった点を、場所+事実+質問の形で3つだけ書いて送る(5分)

まだ案が届いていないなら、先回りして渡してしまう手もあります。「制作に入る前に、うちの実物の文字量と、更新の想定をお送りします」と。これができる担当者は、正直かなり頼もしいです。

今日のチェックリスト

最低ライン(ここだけでも十分価値があります)

余裕があれば

全部にチェックが入らなくて大丈夫です。上の4つを見て返せたなら、その確認はもう十分に役に立っています。

締めに

デザイン案が届いた日、「自分にはこれを評価する資格がない」と感じたなら、それは真面目な人の感覚です。分からないことを分かったふりで通さない。その姿勢は、この仕事でずっと効いてきます。

ただ、ひとつだけ思い出してほしいことがあります。

そのサイトを、来年も再来年も更新していくのは、あなたです。お知らせを載せるのも、価格を直すのも、新しい社員の写真を差し替えるのも。制作会社は、公開の日までしか一緒にいません。

だから、あなたが見るべきなのは「今日きれいかどうか」ではなく、「3年後もちゃんと回るかどうか」です。それを見られるのは、社内にいる人だけです。デザインの専門知識は要りません。要るのは、自分の会社を知っていることだけ。それは、もう持っています。

デザイン案の確認を終えて制作会社へ返事を送り、肩の力を抜いて穏やかにひと息ついている企業のWEB担当者
自分の言葉で返せたなら、それはもう立派な確認です

一度で完璧なフィードバックを返さなくて大丈夫です。気づいたことを、気づいた順に渡していけば、それで進みます。今日ひとつ「うちの場合はこうなります」を伝えられたなら、そのサイトは確実に良くなっています。

※本記事は一般的な実務の考え方をまとめたものです。制作の進め方や工程の呼び方、修正対応の範囲は制作会社・契約内容によって異なります。写真・イラスト等の素材の利用条件、業種ごとに表示が必要な事項については、契約書・各素材の利用規約および所管の公式情報をご確認のうえ、必要に応じて社内の法務担当や制作会社にご相談ください。

よければ、こちらも

公開の直前には自社サイト更新・公開前チェックリストを横に置いておくと安心です。「この案、どう返せばいいか迷っている」というときは、お問い合わせから気軽に声をかけてくださいね。一緒に考えていきましょう。

関連用語