【受託Web制作】クライアントへお願いしたいデザインチェック項目まとめ

いとたか

こんにちは!駆け出しのPM1年生 いとたかです。

僕は、受託でWeb制作(いわゆるサイト制作)のディレクターのお仕事をしているのですが、以前クライアントにデザインを共有し、確認&OKのご連絡をもらっていたにもかかわらず、コーディングやシステムの完了時点で、再度画面を共有した際に「デザインが全然ダメ!イメージと違うやり直し!!」とご連絡をいただくといった、制作メンバー全員が肝を冷やすミスを経験をしました。

今後2度と同じミスをしないためにも、クライアントへお願いしたいデザインのチェック項目をまとめることにしました。

Web制作の仕方によって活用できるところ、できないところを取捨選択しながらご活用ください。

うちの場合は、こうやってデザインチェック時にミスを防いでいるよ!みたいな知見があればぜひ教えて欲しいです。

WEB制作のご担当者様・ご責任者の方へ

はじめに

  1. 当たり前ですがお送りしたデザインは、そのままユーザーが使用する画面へと反映されます。隅々までデザイン確認を行っていただき修正のご指摘をください。
  2. クライアントからご指示をいただけないと現状お送りしているデザインの良し悪しについて、制作者は判断がつきません。
    デザイン確認&OKサインが出た時点で制作側は「このデザインは良いものだ」と判断し、このデザインを基に全てのページの制作を進めていきます。
    感覚的やイメージを少しでも違った場合、ご連絡をいただくようお願いいたします。

    ※お客様からのご指示がないままですと現状からデザインを変更することはありません。

上記の前提を基にこれから記載するデザインチェック項目をご確認ください。
修正をいただき、これから使用するユーザーのためにより良いモノを一緒に作っていきましょう。

Webサイト制作におけるデザインチェック項目

✔︎ターゲットに訴求したいイメージになっているか?

今回のターゲットは、〇〇(男性・女性等)です。
そのターゲットに対して、▲▲▲(高級感・可愛らしい等)のイメージを訴求するためにデザインを作成しております。
イメージを訴求するにあたってデザインイメージの問題がないかをご確認ください。

✔︎実際の画面幅の確認

デザインデータを、画面一杯に拡大し確認してください。

▶︎画面一杯にして確認する理由
通常デザインデータを全体で見る方が多いと思います。ですが、サイトやサービスを利用するユーザーの目線となって画面を確認することが最も大事です。
デザインデータと比較し実際のサイトとして反映してみると、「なんか思っていたのと違う。」と思われる大きな要因は、確認の時にデザインを画面一杯に表示していなかったからだと考えています。

▶︎PC版の確認方法
①デザインデータを、全画面表示にします
②そこから更に余白なく画面全体にデザインが表示されるように「拡大して」調整してください

①通常のデザインデータを全画面表示にした時
②余白なく画面全体にデザインを拡大した時

▶︎スマートフォンの確認方法
①送られてきたスマートフォン用のデザインをスマートフォンに転送してください
②画像データを開いてください
③画像データを、拡大し、画面一杯に表示されるように調整してください

②画像データを開いた時
③画面一杯に拡大した時

✔︎画像サイズやテキストサイズ・フォントの確認

スクロールの長さや、ボタンのサイズ、画像の大きさ、テキストのサイズを確認してください。

例えば、高齢の方をターゲットににするのであれば、テキストサイズを大きくするなど見やすくする必要があります。

✔︎テキストのチェック

お送りしたデザインの文言を確認していただき修正がございましたらご指示ください。

テキストについては、デザインフェーズ後にも修正は可能ですが、できるだけデザインチェックの機会に修正項目をまとめていただけると、制作側もサービスやサイトの理解度が上がるのでデザインチェック以降の制作段階にも良い影響をもたらすはずです。

✔︎画像のチェック

サンプルで挿入している画像が、ユーザーに与えたいイメージに合っているのか?どうか確認してください。

✔︎イラストのチェック

イラストの役割は、文章で伝えたいことを一眼でわかるように役割を担うことが多いと思います。
なので、配置されているイラストは、ユーザーに一瞬で伝わるのか?確認してみてください。

✔︎足りない&追加するべき要素がないかチェック

上記のチェック項目を確認して最後に、今ある情報で足りない情報や新たに追加するべき要素がないかを確認してください。

このパートにつきましては、無理に追加していただく必要はございません。

終わりに

以上、僕がWebサイト制作のデザインチェック時にクライアントに確認していただきたいデザインチェック項目になります。

まだ、上記のチェック項目だけで僕自身も完璧だとは思っていないので今後知見が溜まってきた際に加筆&修正を加えより、受託でWeb制作をされている皆様のお力添えができる記事にしていきたいと考えております。

以上 PM1年生 いとたかでした。

いいね!
この記事を書いたPM
いとたか
@ito-taka
  • Twitter
  • facebook
  • コーポレートサイト

PM1年生
人材系営業マンから、デザイン系の企画・ディレクターに転身。フリーランス。
受けた話は一旦なんでもyesと答えていたら、いつの間にかWEBサービスの新規開発PMに。。。日々ドタバタなので、学んだことや僕の失敗談などをなるべく包み隠さずお伝えしていきます。