CHROMA

世の中の "当たり前" を確認する

WebDesignCheckList

Design

はじめにっと

いま思いつくもの書きだしてみた。Web製作者じゃない人にフィードバック求めるときにも使いたかったので少しアバウトに書いてるところがある。勉強不足な箇所も多々あるので、今後勉強してもう少しチェックの量や質を上げる( ｰ`дｰ´)ｷﾘｯ

確認するとき・してもらう時はこの記事の上から下の順に確認する。

デザイン意図の説明

制作したデザイン意図について説明するとき、まずはこちら側から全体に向けて伝えます。

最初に伝えることは下記です。

  • デザイン内での4原則適用方法
  • レイアウト
  • 階層別タイトル
  • フォント
  • 色合い
  • 写真・イラストの選択意図
  • アイコンの使用意図

コンテンツ、構造の確認

最初に企画書や簡単な画面構成図を頂いていれば下記の内容を確認をします。

デザイン原則

デザインの4原則は守れているかを確認します。セパレーションが適切にとれているか、強調箇所は誰が見てもわかるようになっているか、等など..。最後にルールに沿って共通化されているかを確認します。

  • 反復
  • 近接
  • コントラスト
  • 整列
  • ルールの共通化はされているか

パフォーマンスの確認

パフォーマンス

  • ページ読み込み速度は遅くないか。また、速すぎないか
  • 画像は荒れていないか
  • 速度が低下するようなリッチすぎる画像を無駄に使っていないか
  • mac,windowsでみた時の色の違いは気にする程度か(特に薄い色をフォントに使っとき)

テキスト、禁則処理の確認

  • 禁則処理は正しく行われているか
    参考：禁則処理(wikipedia)
  • 見た目による改行に問題はないか
  • 文章表現の堅さ・柔らかさは適切か
  • 変換ミスはないか

テイスト・写真・イラスト等の確認

ここは勉強不足なこともあり、ざっくりとしたことしかまだ分からない。今後勉強してもう少しチェックの量や質を上げる( ｰ`дｰ´)ｷﾘｯ

  • ターゲット層にあったテイストとなっているか
  • 色の確認
  • フォントの確認
  • 親サービス(例えばGoogle・Yahoo)があり、子孫サービス制作時はテイストが共通化されている箇所が残っているか確認
  • 可読性の適切さ、リンク色はリンクとして認識できるかどうか
  • アイコン・イラストは不要に大きくなったり小さくなったりしてないか
  • アイコン・イラストのテイストは共通化されているか
  • 写真のトリミング箇所は問題ないか(特に人の画像を扱った時)
  • 写真は飛んでいる箇所など無いか
  • グラデーションやテクスチャの使用は必要か。程度は正しいか