Day18｜出来上がったデザインを確認しよう！

次はデザインのチェックとクライアントのデザインチェックです！🙌

デザイナー・コーダーへの指示出しの実践課題

課題3-1-1 「デザイナーに依頼しよう！」
課題3-1-2 「デザインをチェックしよう！」
課題3-1-3 「クライアントに確認してもらおう！」
課題3-2-1 「コーダーに依頼しよう！」
課題3-2-2 「Webサイトをチェックしよう！」

課題の仕様上、この課題以降は予めこちらで準備したWFやデザインになります。

こちらからお送りするデザインにデザイナーに渡した設計図のURLやWFも入れておりますので、それに沿って「この指示を出したとしたら」という視点でご確認ください！

課題3-1-2｜デザインをチェックしよう！

デザイナーさんから初稿が上がってきたら、まずは一通り自分の目で確認をします。

クライアント・ユーザー視点と、実装するコーダー視点で不足・不備がないかを見ていきましょう。

本講座特典の各種チェックシートを基に解説していくので確認してみましょう！

各種チェックシート
※ご自身のドライブ等に複製してからお使いください！

このチェックシートは基本的に必要となる項目を入れていますが、実際に対応することでもっと追加したい項目が出てくると思います。その時はどんどん自分で項目を追加してオリジナルのチェックシートに仕上げていきましょう💪

デザインカンプのチェック項目（クライアント・ユーザー視点）

クライアント・ユーザー視点でのチェックでは、主に見た目に注目してチェックしていきます。今回の課題では省略していますが、トップページが出来上がった時点で一旦確認し、方向性にズレがないか確認することが多いです。

（※全てのページを作成してから方向性が違うと分かった場合の後戻りが非常に大変なため）

では、その内容を確認していきましょう。

デザイン視点

1.指示書の内容を踏まえたデザインになっているか（配色、フォント、全体の雰囲気）

2.フォントサイズやスタイルが適切か、文字間・行間が整っているか

3.使用している素材は適切か、使用している素材に統一感はあるか、画像の解像度が低くないか

4.色の組み合わせが見やすいか、色の割合・配分は適切か

ユーザー視点

11.プレビュー（100%）で見て違和感がないか

12.伝えたい情報が正しく伝わる構成になっているか

13.サイト内の移動は分かりやすい設計になっているか

14.ダミーテキストのままになっていないか（テキストがまだの場合を除く）

15.スペルミス、誤字・脱字はないか

その他

22.動画埋め込み箇所にはイメージ画像が入っているか

まずは、サイトとして見た時にイメージ通りのものになっているか、Webサイトとして違和感がないか等を確認していきます。

違和感があった場合、その違和感を言語化してデザイナーに伝えるようにしましょう。「なんか違うんだよね～」といった曖昧な指示ではデザイナーも困ってしまいます。事前の情報設計や参考サイトの共有がしっかり行われていればあまりこのようなことは起こりませんが、万が一起こってしまった場合は以下のコラムも参考にしてみてください！

デザインカンプのチェック項目（コーダー視点）

コーダー目線でのチェックは、主に機能面に注目してチェックしていきます。タイミングとしては修正が済んだいちばん最後で構いません。チェックリストを作成していますが、Day19で紹介する情報も参考に確認していきましょう。

チェックシート中では以下の点が主にコーダー目線でチェックが必要になります。

デザイン視点

5.レスポンシブを意識したデザインになっているか

6.アニメーションがある箇所は適切な指示があるか

7.ホバーができる箇所のルールは揃っているか

8.フォーカス時やエラー時の指示はあるか（フォーム）

9.動的部分のパーツは適切か、パーツが揃っているか

10.位置やサイズで意図のない小数点が発生していないか

また、コーダーにデザインカンプを渡す直前に必須で以下の項目も確認しましょう。

ユーザー視点

14.ダミーテキストのままになっていないか

15.スペルミス、誤字・脱字はないか

その他

21.有料画像・イラストは透かしが入っていないものに差し替えてあるか

23.Adobeフォント等のフリーではないフォントは適切に使用できているか

24.マーケティング視点で必要なクリエイティブはあるか（※）

ポイントはコーディングをする際に十分な情報が揃っているか、迷いなくコーディングが出来そうか、という点です。主に動的箇所には「○○の場合こうなる」といった制約が出てくる場合があります。「テキストは1行しかサンプルにないけど、2行になる可能性もあるかな？」など、運用後をイメージした視点で確認していくようにしましょう。

また、コーダーにカンプを渡す直前のチェックでは主に「コーダーがそのまま作成しても問題ないか」を確認するようにしましょう。実装する際にSEO関連の設定もコーダーが済ませてくれることが多いです。自分でSEOの設定をする場合を除き、最低限のOGP・ファビコンといったクリエイティブは準備しておくと後がスムーズです。

ご自身にコーディングの経験が少ない場合はこの確認に高い難易度を感じるかもしれません。しかし、基本的にはデザインコースで学んだことや、下請けの際に言われたことがある事などを思い出して同じようにチェックすると分かりやすいです！

課題3-1-3｜クライアントに確認してもらおう！

チェックを実施するタイミングは人により様々で、全部出来上がってから確認を依頼したり、トップページだけ作成してデザインイメージをすり合わせたりする場合もあります。

前項で解説した通り、どちらかというと後者の方が大きな後戻りが発生しづらくはあるので、クライアント・デザイナー双方と相談して確認のタイミングを作るようにしましょう。

また、チェックしてもらう際はクライアントのWebリテラシーを十分考慮するようにしましょう。クライアントのリテラシーごとにどんな対応が考えられるか一例をまとめました。

Webには親しく様々なツールを使いこなしていたり、Figmaの使用経験がある
→この場合はFigmaのファイルをそのまま共有しても概ね問題ないです。新しいツールを触るのは得意であるが使ったことはないという場合は軽く説明しましょう。

パソコンは日常的によく使う
→この場合はFigmaのプレビューモードがオススメです。リンクをクリックするだけで見た目が表示できるのでツールに触り慣れていない人でも扱いやすいです。

パソコンはメールや文書のみに使う
→この場合はPDFや画像といったファイル形式にして送付するのがオススメです。「操作方法が分からないからまた今度確認しよ…」といった気持ちにさせないようにするのがポイントです。

パソコンはあまり使わないし、苦手である
→この場合はいきなりのファイル共有は控えてオンライン/オフラインにて確認の日を設定し、こちらが操作して見てもらうようにするのがオススメです。また、オフラインの場合はページを印刷して持っていくのも一つの手です。

もし仮に、デザインとコーディングを同じ人が担当する場合はコーディングまでやりきって実際のテストサイトで確認するという方法もあります。実際のサイトになっていた方が分かりやすい・クライアントがパソコンの操作に不慣れだという場合で条件が当てはまればこれもアリです。

あくまでも一例で、唯一の正解という訳ではありません。実施していく中で方法をどんどん模索してください！また、Web業界の技術の進歩スピードは著しいので、使えそうなものは取り入れて試してみてくださいね！

課題を送信しよう！

ここまでで一通りチェックの方法やクライアントへの確認方法が分かったかと思います！早速、デザイナー・クライアント双方に依頼する文章を送信してみましょう💪

デザイナーへは初稿に対する修正や調整、変更の依頼を行います。

クライアントへは完成したデザインを確認してもらう準備をして確認の依頼分を送信しましょう！

クライアントチェックのタイミングについて

ディレクター⇔デザイナーでの詰めの作業とクライアントチェックのタイミングは、実際には様々なタイミングで行われます。

多くの場合は、ディレクター⇔デザイナーでの確認・詰めの作業を済ませてからクライアントに確認します。しかし、納期が厳格に詰まっていてアジャイル型で進めないといけない場合が発生したり、デザイナー・コーダーが一貫して請け負う且つクライアントがデザインツールなどに慣れていない場合はコーディングまで済ませて確認したりと、柔軟に動く場面もあります。

基本的には並行しない方が混乱が起こりにくくはありますが、デザイナーへの修正依頼の間にクライアントに見せなければいけないという場合は、修正中であることやその箇所は必ず伝えてあげるようにしましょう🙆

今回の課題については1日分としてまとめていますが、デザイナーへのフィードバックの返信をした後に送られてきたデザインを使用してクライアントチェックに移行してください🙇