デザインを確認する際のポイント

最終更新日 2020/10/16
デザインを確認する際のポイント

制作会社からデザインが上がってきたが、ちょっとイメージと違う気がする。そんな時どのようにフィードバックを行えばよいのか、迷われる方も多いのでは? 今回はサイト制作におけるデザイン作業とそのチェックポイントをご紹介します。 最適なデザインに近づけるよう活用してみてください。

デザインを確認する際のポイント

Webデザイン制作とは?

Webデザインの作業はサイト設計で作成したワイヤーフレーム(構造を定義したもの)をレイアウトや色を付けることによりビジュアル化する作業です。
ほぼ、ブラウザでユーザーが閲覧する見た目と相違のないデータになります。

Webデザインの実務とは?

Webデザインはワイヤーフレームを元にして主に以下のAdobeのグラフィックソフトを用いてWebサイト全体のヴィジュアル化を行います。

Adobe Photoshop

Webサイト全体のコンテンツの配置や装飾を行うことが出来ます。画像編集や加工などもソフト内で行うことができます。

Adobe XD

Photoshop同様コンテンツやテキストの配置と装飾を行うことが出来ます。プロトタイプを作成することが出来るためより実際のWebサイトのイメージがしやすくなります。

Adobe llustrator

ベクターデータで図形やイラストを作成することが出来ます。
主にロゴやアイコンを作成します。

Webデザインのチェックポイント

デザインコンセプトに沿っているか?

クライアントやディレクターで決めたWebサイトのコンセプトがしっかり反映されているか確認しましょう。Webサイトを利用するターゲットがあらかじめ決まっているはずなのでそのターゲットに向けたWebサイトとして正しく機能するかをしっかり考えましょう。

設定したトンマナを踏襲しているか?

トンマナとは

トンマナとは、トーン&マナーの略でありWebサイト全体の配色や色調を意味するトーンとWebサイトの形式を意味するマナーを合わせたもので、Webサイト全体のデザインルールを決めます。
トンマナが揃っていることによってWebサイトの利用者が内容の理解をしやすくなります。
逆にWebデザインのトンマナが揃っていないとWebサイト全体の一貫性が損なわれます。
完成したWebデザインを受け取った際は指示通りのトンマナが細部まで揃っているかしっかり確認しましょう。

ワイヤーフレームに沿った構成要素が配置されているか?

Webサイトの構成要素が設計図であるワイヤーフレームに沿って配置されているかを確認しましょう。デザインデータにワイヤーフレームにはない要素が含まれていたり、指示とは異なる構成になっていた場合、Webサイトの完成イメージに差異が出るため、ワイヤーフレームからの変更点があった場合はその理由を確認しましょう。

レイアウトルール、ナビゲーションルールが適合しているか?

Webサイトの要素のレイアウトやページ移動のナビゲーションはとても重要です。同じWebサイト内でレイアウトやナビゲーションに差異があると利用者が混乱しWebサイトからの離脱率が上がります。
Webサイト内ので使用するアイコンやレイアウトのルールが全て統一されているかを確認しましょう。

ワイヤーフレームで定義された意図が反映されているか?

ワイヤーフレーム制作の時点でWebサイト全体のイメージは、ほぼ固まっています。
ワイヤーフレームを制作する際に定義された構成の意図をWebデザイナーに伝えましょう。
Webデザインをワイヤーフレームと照らし合わせて確認する際は配置だけでなくしっかり構成の意図が反映されているかを確認しましょう。

複数ページを確認する場合のチェックポイント

デザインルールが統一されているか?

コーポレートサイトやECサイトなど複数ページがあるWebサイトのデザインを確認する場合は全てのページのデザインルールが統一されているかを確認する必要があります。
特にページ移動のためのナビゲーションがページごとに変わると移動に時間がかかり利用者のストレスになります。
ナビゲーションやボタンのデザインルールが統一されているかを全ページで確認しましょう。

まとめ

Webサイトの制作の場合Webデザインを行う前にWebサイトの完成イメージは固まっています。構成要素やデザインマナーをしっかり確認し、イメージ通りのWebサイトを制作しましょう。

<関連ページ>
Web制作におけるワイヤーフレームのチェックポイント
https://goodproductionsjp.com/posts/website-guide/wire-frame-check/
Webサイト制作の流れと進め方~企画立案から公開までの5ステップ
https://goodproductionsjp.com/posts/website-guide/how-to-create/

おすすめの記事