前提

WCAG（Webコンテンツアクセシビリティガイドライン）の内容をふまえて、様々なユーザーが利用できるWEBデザイン制作を行うこととする。

文言・原稿について

  1. 支給された文言・原稿をそのまま使わないこと
  2. ページタイトルとナビゲーションの表記を統一すること
    （例：事業紹介・事業案内、Top・Homeなど）
  3. 固有名詞や特別な意図がある場合を除き、原稿中の英数字は基本的に半角にすること
  4. 12時間24時間表記の統一、金額の数量のカンマを統一すること
  5. 外国語サイトの場合は、その国々特有のルールにのっとた調整をすること

リンクについて

  1. ナビ・ボタンにはフォーカスされていることが分かるように、できる限りホバー処理を加えること
  2. テキストリンクはできる限りでよいが、下線や色でリンクであると区別できるようにすること
  3. 外部リンクには target=”_blank” を指定し、視覚的かつ補足テキストで誰もが認識できるようにすること
  4. pdf、doc、xlsファイルなどページ以外へ直リンクを貼る場合は、視覚的かつ補足テキストで誰もが認識できるようにすること
  5. リンクの文言で「Read more」「詳しく見る」はできるだけ控えて、リンク先のコンテンツが分かる文言にすること
  6. ボタンの色や形はできるだけ統一性を持たせること

タイポグラフィについて

  1. フォントファミリー・ウェイト・サイズ・カラーは、サイトの特性や閲覧環境を考慮し、読みやすいように考慮すること
  2. 大見出し・小見出し・本文・補足的な文章の文字サイズは差をつけること
  3. その場その場で文字スタイルを増やさないこと
  4. 文字サイズの指定の単位はrem（相対指定）を標準とすること
  5. 行間は170〜200％程度とし、cssに単位はつけないこと
  6. 段落の横幅を広げすぎないこと
  7. 本文テキストは読みやすさを考慮して、基本16px以上とすること
  8. WEB上で縦書きを採用する場合は、可読性に十分考慮すること

色について

  1. その場その場で色を増やさないこと
  2. 適切なツールを使用してコントラストや色相差が激しすぎるあるいは無さすぎるなど、視認性・可読性が保てないような配色は用いないこと

余白について

  1. 余白もサイトを構成する重要なコンテンツと認識して効果的に用いる
  2. 各コンテンツの間の余白は適切な値でルール化しておく

レスポンシブ対応について

  1. 各ブレイクポイントはフレームワーク（Bootstrap）に準拠し指定すること
  2. 「どのデバイスでも使いやすいこと」を念頭において対応すること
  3. 基本的に、リンクエリアは最低でも44pxを確保すること

マークアップについて

  1. 作成者以外の人でも編集しやすいよう、構造的で堅牢な制作データを心がけること
    1. コメントアウトを残す
    2. 命名規則
  2. アクセシビリティの観点からも、正しいマークアップを行うこと
    1. ALT属性を適切に指定する
    2. 見出しタグのレベル
  3. 見出しタグを装飾代わりに用いないこと

フォームについて

  1. フォームの入力項目は最低限にとどめ、送信しやすいように意識すること

アクセシビリティ・ユーザビリティについて

これが前提かもしれない・順番変更あり

  1. WCAG 2.1の4つの原則「知覚可能」「理解可能」「理解可能」「堅牢」を意識した制作を行うこと（参考：Ameba Accessibility Guidelines）
  2. どのページ閲覧者・利用者にとって、使いやすく操作がしやすいサイトを設計すること