お問い合わせ

サイトデザインの品質を上げる3つのセルフチェックリスト

UIデザイナー 有山

この記事はミツエーリンクス Advent Calendar 2020 - Adventarの23日目の記事です。

当社では、技術品質、プロセス品質、サービス品質の3つの品質向上をビジョンとして挙げています。今回はその品質の中で、デザインの品質を向上させ管理するプロジェクトにおいて、各フェーズでチェックしている項目とその背景、またチェックリストの注意点についてご紹介いたします。

当社のサイト構築のフローでは、お客様に各ページのデザインカンプの承認をいただいてから、大まかに下記のフローでページを作成しています。

  • 各ページデザイン承認→各ページHTML&CSS設計
  • モジュールデザイン作成→モジュールHTML&CSS設計→ページの量産実装

こちらをUIデザイナーとUI開発者が各専門知識・スキルを活かし分業して対応していきます。当社でのUIデザイナーとUI開発者の職種の詳しい説明については、ぜひ当社CTOの木達が書いたコラム「UIデザイナーとUI開発者」をご覧いただければと思います。

そういったUIデザイナーとUI開発者の対応するフローのなかで、当社では下記のチェックリストを活用しています。

  1. UIデザイナーからUI開発者に入稿するデザイン指示内容のチェックリスト
  2. UI開発者のページ設計後のチェックリスト
  3. ページ量産実装後の実装者のチェックリスト

今回は上記の3つセルフチェックリストご紹介します。

1．UIデザイナーからUI開発者へのデザイン入稿チェックリスト

UIデザイナーはページのデザインカンプを制作し、承認をいただいたのちに、繰り返し登場するデザインパターンを一貫したルールで定義をしていきます。

当社ではこちらをモジュールと呼んでいるのですが、そちらを作成し、UI開発者に連携をする際に下記チェックリストを用いています。

余白

  • line-heightを考慮したマージン指示となっているか
  • 各要素間のマージンは統一を図ったか
    ※ マージンが『意図的』なのか、『偶然』なのか、判断できるようにする

テキスト

  • font-familyを定義し共有したか
  • line-heightを定義し共有したか

カラー

  • メインカラー、サブカラー、テキストカラーを定義し共有したか
  • 背景色を共有したか
  • 罫線色を共有したか

デザインデータの整備

  • 開いたり閉じたりする動きのあるUIの見た目をデザインデータ上に入れたか
  • 見出し・ボックスの伸びた状態の見た目を作成したか
  • いらないレイヤーは消したか・不要とわかる状態になっているか
  • いらないレイヤー効果は消したか
  • レイヤーは整理されているか

その他UI開発者との認識合わせ

  • hoverやfocusのスタイル、transitionなどのアニメーション系の値をUI開発者とすり合わせたか
  • メインビジュアルなど、画像のレスポンシブ時の挙動について共有したか
  • ガワや固有パーツなどについて、デザインでは作られていない画面サイズ（PC表示時/スマートフォン表示時の中間）での見た目をどうするかの認識合わせを行ったか
  • 言われないと分からないようなことを伝えたか
    例）グラデーション・高さ揃え・背景の処理方法・トップページ専用ルール・CSS想定なのか画像想定なのか　など
  • SVGの書き出しルールを連携したか

こちらのチェックリストには、当たり前過ぎるものから、案件特有で考慮しないといけないものまで含まれており、あくまで最低限のチェックリストとなります。

UI開発者に伝える前にチェックを行い、情報を揃えてUI開発者に伝えることで、さらに深いUIデザインについてのコミュニケーションの時間が確保できるようになります。

2.ページ設計後のUI開発者のチェックリスト

UI開発者は、HTML、CSS、JavaScriptや他にもあらゆるフロントエンドの技術において、ソースコードの品質を高く意識して仕事を行っているかと思います。そういった場合に、UI開発者はサイトとしての見た目よりも、ソースコードの品質や運用保守の観点に強く意識を持つことがあります。

当然ながらそれは必要不可欠ではあるのですが、そのためにサイトがユーザーにとって見にくいデザインとなってしまうのは本末転倒です。そこでデザイナーにチェックしてもらう前に、事前にセルフチェックをする際に参考とするのが、下記のチェックリストとなります。

  • デザイン仕様書通り正しく設計しているか
  • デザインがない見た目を考慮して設計しているか
  • レスポンシブで可変したときにレイアウトの崩れがないか・サイズ変化のバランスに問題ないか
  • テキスト量が増減したときの要素の変化に対応しているか
  • モジュールの組み合わせを想定して余白設定しているか
  • 空きすぎたり詰まりすぎている部分はないか
  • 情報のカテゴリのまとまり方が適切か
  • 画像を圧縮しすぎて荒くなっていないかどうか
  • モジュール間マージンや強弱・優先度に問題がないか

こちらのセルフチェックリストは、「1．UIデザイナーからUI開発者に入稿するデザイン指示の項目チェックリスト」がしっかりと共有されていることを前提に活きてくるチェックリストとも言えます。

3.ページ実装量産実装後の実装者のチェックリスト

当社では、数千ページを超える大型のサイトの構築を対応させて頂くケースがよくあります。そんな中で必須となってくるのは、数千を超えるページ量産の品質の保持です。

昨今では条件が揃えば、テンプレートを作成したのちにRPAを用いて、AIによって量産実装を行うことも増えてきました。しかしながら、RPAを用いるにはリニューアル前のサイトが一貫したルールで作成されていることが必要であるため、RPAを用いて実装量産ができるページは限られているのが現状になります。そんなときにはやはり人の手によって、HTMLを実装してページを量産していくことが不可欠となります。そういった大型のサイトでは、往々にしてページの実装後に、意図しないモジュールの組み合わせによって、余白やレイアウトがおかしくなったり、固有パーツが意図せず汎用的に使われたりといったことが起こってきます。

1.と2.で上げたチェックリストは、このフェーズでの手戻りを少なくする目的ではあるのですが、それでもサイトの規模によっては、想定し得ないパターンが発生してくることがあります。その際に実装者は、下記のチェックリストを使用しながら、品質をさらに上げるセルフチェックをしております。

  • モジュールを適切に使用しているか
  • モジュールの組み合わせで、余白が空きすぎたり詰まりすぎている部分はないか
  • テーブルの設定が適切か
  • セル幅の指定がページ内でばらつきはないか
  • セル内のテキスト揃え（左揃え、中央揃え、右揃え）は適切に指定しているか
  • スマートフォン表示時横スクロールの有無の指定
  • 画像の幅が揃っていないことで、レイアウトにばらつきが出ていないか
  • レスポンシブで縮小した際に画像（図版）内の文字が読めるか
  • 画像を圧縮しすぎて荒くなっていないかどうか
  • レイアウト崩れ、サイズ変化、テキスト量変化に対応しているか（設計時・サンプルページで想定できないパターンのチェック）

チェックリストの注意点

これらチェックリストは、各フローで分業化されている作業間で起こりうるコミュニケーションの問題を未然に防ぐことが目的となっております。一方で、こちらのチェックリストに頼りすぎる弊害についても注意しなければなりません。

チェックリストの各項目や、チェックリストの目的を意識して、チェックをしたうえで、改めてその案件ごとにサイトの品質を向上させるために必要なことはないかという視点も捨てないことが必要かと思います。

また、これらの項目は、当社のサイト構築のプロジェクトのなかで培ったナレッジを共有し合い、制作してきたチェックリストになります。

今後もサイト構築の技術が進化していくなかで、さらにこれらのチェックリストは見直していき、より品質が高いサイトを生み出していきたいと思います。

2020年の記事一覧に戻る