「WEBデザインのチェックリストが知りたい！」
「質の高いWEBデザインを作成するために、チェックリストは用意すべき？」
という方向けに、この記事ではWEBデザイナーがチェックリストを用意すべき理由と、WEBデザイン・コーディング・WEBサイト公開前の3項目別にチェックリストを紹介しています。
結論、WEBデザイナーの方はチェックリストを必ず用意しておき、質の低い成果物を納品することを防ぐことが大切です。
チェックリストがなければ、作業後に見直すべきポイントがどこか分からず、成果物の質が毎回バラバラになってしまいます。
質の高い仕事を行なって、稼げるようになるためにもチェックリストは必ず必要なので、この記事を参考に用意してみてください。
WEBデザインのチェックリストを用意する理由
WEBデザインの作成は、クライアントの目的やターゲットユーザーのヒアリングを行なって、明確な理由を持って作成業務に入らなければなりません。
しかし、どれだけ事前のヒアリングを行なって、ターゲットを意識してデザインの作成を行なったとしても、修正なしで完璧なデザインを作成することは難しいです。
なので、WEBデザイナーの方はデザイン作成後に確認するチェックリストを用意しておき、目的を達成できるデザインを作成できているかチェックしなければなりません。
チェックリストがあれば修正すべきポイントを見つけることができ、デザインの質を向上させることができます。
デザイン作成後の見直しを行う癖をつける効果もあるので、この記事で紹介するチェックリストを活用してください。
WEBデザインのチェックリストの他に、コーディングやWEBサイト公開前のチェックリストも紹介しているので要確認です。
WEBデザインのチェックリスト
WEBデザイン作成のチェックリストは以下の通りです。
- ペルソナを考えたデザインか
- サイト全体で一貫したデザインか
- フォントサイズが小さすぎないか
- レスポンシブ対応されているか
- シンプルで情報が伝わるか
- デザインの理由を説明できるか
WEBデザイナーの方は、デザインを作成した後に上記の項目をチェックして、サイトやページの目的を達成できるデザインができているか確認しましょう。
このチェックリストの項目を見直すことで、ユーザビリティの高いデザインかつクライアントの目的を達成できるはずなので、参考にしてください。
ペルソナを考えたデザインか
WEBデザインは常にペルソナを考えて作成することが大切です。
ペルソナとは、サービスや商品の典型的なユーザー像のことで、年齢・性別・居住地・職業・役職・年収・趣味・価値観・休日の過ごし方・ライフスタイルなど、なるべく具体的に人物像をイメージできるところまで深堀りすることが大切です。
必ずサイトのペルソナを把握することから作成が始まると思いますが、もしペルソナを明確にしないで作成してしまった場合は注意が必要です。
ペルソナを把握した上で、ユーザーの共感を促して、行動してもらえるデザインを作成しなければサイトの目的を達成できないので、WEBデザイン作成後は必ずチェックすべきポイントになります。
誰にも響かないデザインを作成してしまうことのないように、WEBデザイン作成前に必ずペルソナを明確にすることから始めるようにしてください。
サイト全体で一貫したデザインか
WEBサイトのデザインが完成したら、クライアントに納品する前に必ず、サイト全体で一貫したデザインになっているかをチェックしなければなりません。
できる限り同じデザインパターンを使用して、ユーザーがサイト内のページを移転する際に違和感を感じないようにしましょう。
特にページ数の多いサイトデザインを作成している場合は、どこかでデザインパターンが変化していたり、ユーザーのニーズから外れてしまっていることがあります。
WEBデザイン初心者の方は、あらかじめ決めたターゲットユーザーやデザインパターンを元にして、デザインがズレることのないように見直しながら作成を進めてください。
もし、一貫したデザインが作成できているか不安だという方は、一旦作成の手を止めてデザインから離れてから再度確認したり、他のWEBデザイナーの方に代わりにチェックしてもらうと良いでしょう。
フォントサイズが小さすぎないか
WEBデザインを作成したら一度画面サイズを小さくして、フォントサイズが小さすぎないかチェックしてください。
フォントサイズが小さすぎるとユーザーに伝えたい情報を届けることができず、行動を適切に促すことができません。
ユーザビリティが下がってサイトから離脱する方が増えてしまう可能性もあるので、画面サイズを小さくしても見やすいフォントサイズになっているかチェックしましょう。
よくあるミスとしては、レスポンシブに対応してパソコン・タブレット・スマホとデバイスの画面サイズごとに設定したフォントサイズが間違っているパターンです。
スマホで設定したフォントサイズがパソコンでも適用されていることがあるので、画面サイズを変更しながらフォントサイズが適切に変更されるか確認してください。
レスポンシブ対応されているか
WEBサイトデザインを行なった場合は、レスポンシブ対応が正常にされているかチェックしてください。
レスポンシブ対応とは、ユーザーが使用しているデバイスの画面サイズに合わせてデザイン表示を変えることで、様々なデバイスからアクセスする現在では、ほとんどのWebサイトでレスポンシブ対応がされています。
レスポンシブ対応をチェックする際は、解説したフォントサイズの他にも画像サイズやコンテンツの配置、ヘッダーやサイドバーなどが正しく変更されているか、画面サイズの変更はスムーズに行われているかを確認してください。
シンプルで情報が伝わるか
シンプルで誰が見ても伝えたい情報が正しく伝わるかもチェックするポイントです。
WEBデザイン作成前は、ペルソナを設置して意識しながら作成できていても、ページ数の多いWEBサイトの場合は、伝えたい情報がよく分からないデザインになってしまいがちです。
WEBデザイナーはクライアントの目的を達成できるデザインを作成するのが仕事なので、見た目がカッコいいことやおしゃれなデザインよりも、ユーザーに情報を正しく届けられるデザインを目指して作成することが大切です。
無理にシンプルなデザインを作成する必要はありませんが、情報量が多く伝えたい内容が分からないデザインよりも、シンプルで1番伝えたい情報だけ分かるデザインの方が優れている場合もあります。
デザインの理由を説明できるか
最後に、作成したWEBデザインの理由を説明できるかチェックしましょう。
デザイン理由の説明を求められることは少ないですが、もしもクライアントの方に確認された場合は、説明できなければなりません。
なぜこの配置にしたのか？メインカラーの理由は？ボタンデザインの理由など、デザインの各要素を説明できる理由を持って作成してください。
WEBデザインのコーディングチェックリスト
次に作成したデザインをコーディングした際のチェックリストは以下の通りです。
- canonicalの設定ルール
- robotsの設定
- DOCTYPE宣言
- copyrightの設定内容
- charsetの設定内容
- JavaScriptのライブラリの指定
コーディングでチェックすべきポイントは明確に決まっており、デザインのチェックリストと違って基本的に変更は必要ありません。
上記のポイントを確認すれば、最低限問題なく機能するので、確実にチェックしてください。
canonicalの設定ルール
Googleに重複コンテンツと認識されないようにcanonicalの設定ルールを明確にしておきましょう。
canonicalの設定ではwwwの有無や/index.html、httpでもアクセスできるように設定します。
canonicalの設定を行なっていないと、同一サイトであっても重複コンテンツとして誤認されてしまう可能性があるので注意が必要です。
クライアントに設定ルールを確認した上で正しくcanonicalが設定できているかチェックしてください。
robotsの設定
サイトページのrobots設定もしっかりチェックしておきます。
重複コンテンツや内容の薄いページが検索エンジンにインデックスされてしまうと、サイト全体の評価を下げてしまう原因になるので、noindexを設定してインデックスされない設定をする必要があります。
noindexが全てのページに設定されていないか、検索エンジン目的ではないページにnoindexが設定されているか確認してください。
DOCTYPE宣言
DOCTYPE宣言や文字コード、description、titleなどはサイトやページの情報をGoogleに正しく伝えるための設定なので、絶対に間違えることのないようにチェックしてください。
特に、DOCTYPE宣言が間違っている場合は、コーディングが正しく読み込まれずエラーが発生する原因となるので、正しく入力されているか確認しましょう。
copyrightの設定内容
サイトの著作権の保持者を明確化する目的で、copyrightの設定内容に間違いがないかチェックしておきましょう。
サイトの情報が無断転載されることを防ぐ効果もあるので、クライアントの方に確認した上でcopyrightを正しく設定できているか確認してください。
charsetの設定内容
charsetといって文字コードが正しく設定されているかチェックしましょう。
charsetが正しく明記されていないと、ユーザーのデバイスによって文字化けして表示されてしまう可能性があります。
基本的にはutf-8を設定して文字化けやエラーを発生させないようにしているので、間違って明記していないか、記載箇所を間違えていない確認してください。
JavaScriptのライブラリの指定
サイト内でJavaScriptのライブラリを使用している場合は、正しく記載できているか、エラーが表示されないか、サイトの表示速度を極端に遅くしていないかチェックしてください。
JavaScriptのライブラリを増やしすぎると、表示速度が遅くなってしまう可能性が高いので、まずはPageSpeed Insightsを利用して表示速度をチェックして、問題があれば不要なライブラリを削除したり、記載方法を変更した改善しましょう。
WEBサイト公開前のチェックリスト
デザインとコーディングが完成したら、すぐにWEBサイトを公開する前に、以下の項目をチェックしてください。
- 404ページは用意されているか
- httpsへのリダイレクト
- wwwなしでもリダイレクト
- 内部リンクが適切か
- meta情報が正しい内容か
- 構文エラーが発生していない
- 画像にaltタグが指定されている
- 指定したデバイスで正しく表示されるか
コーディングのチェックリストで確認した項目も踏まえて確認して、サイトを公開しても問題ないかの最終チェックを行いましょう。
404ページは用意されているか
サイト内検索やリンクでわざと間違ったurlを設定して、404ページが用意されているかかチェックしてください。
404ページが設定されていないと、ユーザーにとっても検索エンジンにとっても良くありません。
httpsへのリダイレクト
httpをSSL化するとhttpsに変わるので、httpからアクセスしたユーザーは自動でhttpsにリダイレクトされるように設定しておきます。
意外と設定し忘れている方が多い項目なので、確実にチェックしてください。
wwwなしでもリダイレクト
httpのリダイレクトと同様にwww.なしでもアクセスできるようにリダイレクトの設定をしておきましょう。
リダイレクトの設定は細かいポイントですが、質の高い仕事を行うためにも必須チェック項目です。
内部リンクが適切か
ページ数が多いサイトの場合は、内部リンクが適切に設定されているかチェックしておきましょう。
内部リンクはユーザーがサイト内を回遊するために重要なので、正しくリンクが機能しているか、重要ページへ適切に誘導できているかを確認してください。
リンクが正しく設定できていない場合は、404ページが表示されるかも同時にチェックすると良いでしょう。
meta情報が正しい内容か
meta情報といって、titleやkeyword、descriptionなどが正しい内容かチェックしてください。
keywordに関しては記載しなくてもSEO上問題がないと言われていることもありますが、特にクライアントからの指定がなければ記載しておきましょう。
その他のmeta情報を間違えてしまうとSEO上非常に問題があるので、確実に確認してください。
構文エラーが発生していない
構文エラーが発生していると、レイアウトに崩れが見られたり、適切に表示されない可能性があるので、Googleの検証を用いてエラーがないかチェックしたり、文法チェックツールを活用して確認してください。
正しい文法で書かれていることで、サイト表示速度が速くなったり、サイトの修正を行いやすい特徴があるので、不具合を発生させる構文エラーはなるべく修正しておきましょう。
画像にaltタグが指定されている
サイト内で使用している全ての画像にaltタグが指定されているかチェックしましょう。
altタグはユーザーが画像を閲覧できない場合に、テキストを表示させる設定で、画像検索からの流入も期待できるので、適切に指定しておく必要があります。
ページ上で右クリックを行なって、ソースの表示を選択すればaltタグを確認できます。
指定したデバイスで正しく表示されるか
パソコン・タブレット・スマホそれぞれのデバイスで正しく表示されるかをチェックしてください。
特に画面幅が変わるタイミングはスムーズになっているか、フォントやコンテンツ幅に不具合はないかを確認しましょう。
スマホやタブレットではメーカーや世代によって動作が多少異なるので、注意が必要です。
まとめ
今回はWEBデザイナーが納品前に確認すべきチェックリストを、デザイン作成・コーディング・サイト公開前の項目別に紹介しました。
チェックリストを用意しておくことで、成果物の納品前にミスがないか確認することができ、質の高い仕事を行えるようになります。
質の高い仕事を行えれば、クライアントの信頼を獲得することができ、単価の高い仕事を受注できる可能性も高くなります。
最低でもこの記事で紹介した項目のチェックは必ず行なった方が良いので、この記事を参考にして、追加すべき項目がある場合は追加して、自分だけのチェックリストを作成してみてください。
