前提

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. どのページ閲覧者・利用者にとって、使いやすく操作がしやすいサイトを設計すること

アートフレアのワードプレス（Lightning）制作ルール

特別な依頼がない限り、禁止している非推奨な項目

  • FTP経由での画像やPHPの操作
  • 親テーマの直接操作、テーマの変更（Lightningしか使いません。）
  • プラグインの新規インストール
  • プラグイン、WordPressの更新（更新通知はそのままでOKです
  • PHPファイルの操作（子テーマで、function.phpであってもNG）
  • 「HTMLブロック」「クラシックブロック」の挿入

ページ制作と同時にお願いしていること

画像の書き出しや大き過ぎる画像の適切な圧縮などお願いします。

1920px以上のファイルはアップロード時に自動でリサイズされます。
容量は自動では圧縮されませんので。200KB以下に押さえてください。

テキストコンテンツなど、CSSで実現可能な場合は編集可能なテキストで実装お願いいたします。

グーグルフォントなどのWEB フォントを使用し、
単調な記号などはFontAwesome、Bootstrap iconなども活用お願いいたします。
※修正が発生した場合は画像よりCSSの方がラクなので。なるべく文字の画像化はしない。
※アドビフォントについてはアドビのガイドラインに則る。

お客様には取材時に「トップページのデザインに準拠した下層ページを制作す る」と説明しています。

ヘッダーと、フッター以外のコンテンツ部分もしっかりと作り込み、サイト全体のトンマナを統一お願いいたします。

※ワイヤーフレームはあくまでもレイアウト例であり、絶対的な仕上がりを決定する仕様書ではありません。
デザインをおかませしているのは見かけや色使いの部分だけではなく、
全体的なバランスやコンテンツの配置をデザイナーとしての知識を織り交ぜていただければ幸いでございます。

ご提供する写真画像のトリミング・リサイズお願いいたします。

異なる写真素材を違和感なく自然に並べるためのワンランクアップとして色調補正もお願いします。

class名・ID名はある程度、わかりやすく統一性のあるものとしてください。

例えば、img1やtable_2などという難解なものはなるべく避け、product-imgや table.price-listなどと命名お願いいたします。

可能な範囲で「メインビジュアル」のスマホでの見え方の調整お願いいたします。

キャッチ・背景画像など のレイアウトの調整お願いいたします。

デスクトップファーストでの制作となります。

デスクトップCSSは＜style.css＞スマートフォン用のCSS記述は＜responsive.css＞というファイルに記載してください。