こんにちは、デザイン課の佐藤です。

シアンスのWebサイトの制作フローに、「品質管理」というものがあります。
できあがったWebサイトの品質に問題がないか、社内でチェックする工程です。サイトがある程度完成した段階で、クライアントに提出する前に行われます。

デザイナーはここでなるべく差し戻しがないように、この基準を念頭に置いてデザインを作成します。この段階で大きな修正が必要になると構築担当の人の負担も増えてしまうので、毎回ドキドキする工程です。

今回は、この品質管理でどんなところをチェックされるのか、例を少しご紹介したいと思います。

①カラーコントラスト比は一定の基準を満たしているか

背景と文字のコントラスト比が、Webのアクセシビリティガイドラインにおいて一定の基準を満たしているかどうかチェックします。視覚障害のあるユーザーも含めて、すべての人に問題なくWebサイトを利用してもらうために、この基準をクリアする必要があります。

チェックにはカラーコントラストアナライザー (Color Contrast Analyzer) というツールを使用していて、シアンスでは最低でもAAをクリアするようにという基準があります。一見これならいけそう！と思った色合いでも、ツールでチェックしてみるとダメだったりします。

②リンク範囲はタップしやすい大きさになっているか

Webサイトをスマホで見たときに、メニューやボタンなどを誤操作せずタップできるか、という基準です。場合によってはPCよりもだいぶ広めに余白をとる必要があります。GoogleのUIガイドラインであるMaterial Design Guidelineによると、最低でも44dp×44dpは確保する必要があるといわれています。
デザインの段階で、PCの画面上では大丈夫そうでもスマホに表示させると意外と狭かったりするので、実際に操作する感覚で作るように気をつけています。

③1行あたりの文字数は適切か

日本人が横書きで苦痛なく読める1行あたりの字数は、20字＋α程度だと言われています。そのためあまりにも長くなってしまいそうなときには、コンテンツエリア（幅）を狭めたり、フォントサイズを大きくするなどして対応します。

文字に関しては、変な位置での改行が続かないか、長文は読みやすいように段落分けされているか、テキストに対して見出しは大きすぎないかなどといった指摘も入ったりします。印刷媒体と違い、デバイスによって大きさや改行位置なども変わってしまうので、調整が大変な部分でもあります。

④リンクボタンのデザインに一貫性はあるか

このボタンはさっきのボタンと同じデザインだからクリックできる、といったかんじでユーザーがWebサイト回遊中に学習できるように、デザインの法則を決めておく必要があります。

また、Webサイト特有のデザイン要素として、ホバーやアクティブが挙げられます。マウスカーソルを重ねてホバーしているときや、そのページに現在アクセス中であることを示すアクティブ状態のとき、その状態をわかりやすくするために通常とデザインを変える必要があります。
これらのデザインもバラバラだとユーザーを混乱させてしまうので、こちらも一貫性を持たせる必要があります。

⑤英字を使用する場合はターゲットや有効性を慎重に検討したか

英字は使うと雰囲気が出たり、なんか隙間が寂しいな～となったとき装飾として使えたりして便利なのですが、使用する場合はきちんと使うべき理由を考える必要があります。たとえば、病院のWebサイトを作るときなど、ブランディングよりもアクセシビリティに比重を置いたほうがいいときは、一目では理解しづらい英字はノイズとみなされることもあります。

さいごに

今回ご紹介した例の他にも、使いやすいWebサイトを提供するための社内の基準はたくさんあります。よくチェックされる項目はデザイナーが事前に確認しておけるようにまとめられているのですが、案件が増えるごとに発見も増え、新たな指摘が出てきたりもするので、デザイナーは普段からいろんなサイトを見て学んでおくことが大事だなあと感じています。
クライアントの業種によってもデザインに求められる要件は違ってくるので、この業種のWebサイトではこうしたほうがいい、という傾向が掴めるとスムーズに作れるのだと思います。

無駄な工数を増やさず、みんなが健康に働けるように（？）なるべく差し戻しがないよう作っていけるようになりたいなと思います。