Skip to content

Latest commit

 

History

History
211 lines (171 loc) · 12.3 KB

image-guideline.md

File metadata and controls

211 lines (171 loc) · 12.3 KB

画像のガイドライン

画像を扱うときの基本的なルールです。

  • ファイル名とフォルダ名に使う文字と記号
  • フォルダ名とディレクトリ構造のルール
  • 画像のパス指定
  • ファイル名のルール
    • 単語の省略
      1. 種類
      1. 詳細
      1. 連番
      1. 状態
  • 使用する形式
  • 書き出しと圧縮
  • altの設定

ファイル名とフォルダ名に使う文字と記号

ファイル名に使うのは半角英数字とハイフンとアンダースコアのみとします。

  • 半角英数字
  • -ハイフン
  • _アンダースコア

これ以外の文字・記号はファイルのやりとりで文字化けしたり、サーバーが対応していない可能性がある、見落としやすい、機種依存文字といった理由で使用しません。

フォルダ名とディレクトリ構造のルール

画像ファイルはルートディレクトリにassetsディレクトリを作り、CSSやJavaScriptと同じ階層に保存します。

.
├── assets/
│   ├── css/
│   │   └── icon/
│   ├── img/
│   │   ├── common/
│   │   ├── home/
│   │   └── product-name/
│   │       ├── common/
│   │       ├── index/
│   │       └── event/
│   ├── js/
│   └── svg/
├── index.html
└── product-name/
    ├── index.html
    └── event.html
  • 画像フォルダ名は/assets/imgとします。
  • 画像は基本的に/assets/imgディレクトリに保存します。
  • 各ディレクトリ内で共通の画像は/assets/img/commonや/assets/img/product-name/commonのようにcommonディレクトリを作ります。
  • 各ディクトリ内はHTMLのファイル名ごとにディレクトリを作ります。/product-name/index.htmlは/assets/img/product-name/index、/product-name/event.htmlは/assets/img/product-name/eventになります。
  • アイコンフォント用のSVGファイルは/assets/css/iconディレクトリに保存します。
  • インラインSVG用のSVGファイルは/assets/svgディレクトリに保存します。
  • img要素で表示させるSVGファイルは/assets/imgディレクトリにJPGなどと同じように保存します。
  • PDFファイルのようなブラウザ上に表示させないファイルも、JPGなどと同様に/assets/img以下に保存します（/assets/pdfディレクトリなどは作らない）。
  • ファイル名とフォルダ名は適切な英単語を使用してローマ字を使いません。ただし、ローマ字表記がサイトの表記上、正しい場合は使用します。
  • 英単語は半角英数字を使います。
  • 英単語はハイフンで区切ります。
  • ブログの投稿画像のような数が増えていくものは2016と01のように西暦4桁と月2桁でフォルダを分けます（更新数が少ない場合は西暦だけで管理）。

CSSをstylesheet、JSをJavaScriptと省略表記にしていない場合は、imgではなくimageとします。

画像のパス指定

画像のパスは以下のようなルート相対パスで指定します。

  • /assets/img/common/logo.svg
  • /assets/img/product-name/image01.jpg

ルート相対パスはサーバーを通さないと表示できないデメリットがありますが、HTMLの保存先が変わってもリンク切れにならないので共通化をしやすいというメリットがあります。

ファイル名のルール

画像ファイルは以下のような順番で名前をつけていきます。

  1. 種類（UIの大分類）
  2. 詳細（どのような場面で使うのか）
  3. 連番（2桁もしくは3桁）
  4. 状態（ユーザーの操作やページの状態で画像を切り替える場合）

ファイル名は画像の役割や連番などを示すようにします。どこで使われるかはファイル名ではなく、ファイルを格納するディレクトリ名で示します。

単語の省略

backgroundやnavigationのような長い単語でなければ基本的に単語の省略はしません。
省略する単語は以下にリストアップしてください。

  • background → bg
  • navigation → nav

1. 種類

ボタンやタイトルのようなUIの種類（大分類）をつけます。

  • メインビジュアル → hero
  • 一般的な画像 → image
  • 地図 → map
  • リストやグラフ → chart
  • バナー・広告 → banner
  • アイコン → icon
  • ロゴマーク → logo
  • タイトル → title
  • 見出し → heading
  • テキスト（見出し以外のテキスト画像） → text
  • 背景画像 → bg
  • ファビコン → favicon
  • OGP画像 → ogp

2. 詳細

種類_詳細 もしくは
種類

「種類」につけた名前に対して、どのような場面で使うのかを示します。「種類」との間にアンダースコアをつけます。特定のシチュエーションを限定できない場合は省略します。

  • メインビジュアルの画像 → hero ※「詳細」の省略
  • 一般的な画像 → image ※「詳細」の省略
  • 導入部分の画像 → image_intro
  • オープンアイコン → icon_open
  • クローズアイコン → icon_close
  • ブランドのロゴ → logo_brand-name
  • タイトル → title ※「詳細」の省略
  • 導入部分の見出し → heading_intro
  • タイトルの背景画像 → bg_title
  • グローバルナビゲーションの背景画像 → bg_global-nav

「詳細」が2つ以上の英単語からなる場合はハイフンで区切ります。
pankuzuのようなローマ字表記は禁止とします。ただし、ローマ字表記がサイトの表記上、正しい場合は使用します。
button_redのような見た目を直接あらわしているような名前は極力避けてください。

画像を書き出す段階でデザインが終わっていなどの理由で適切な単語をつけられない場合は、無理に「詳細」をつけずに、このあとの「連番」だけで管理をします。

3. 連番

種類_詳細+連番 もしくは
種類+連番

ボタンのように数が多かったり、サムネイル画像のように頻繁に追加されるものに関しては、「種類」と「詳細」のあと、もしくは「種類」のあとに01から始まる2桁の連番をつけます。「連番」の前にはアンダースコアをつけません。「詳細」がない場合は必ず連番をつけます。

  • メインビジュアルの1つ目（カルーセルで使用） → hero01 ※「詳細」の省略
  • 一般的な画像の1つ目 → image01 ※「詳細」の省略
  • 導入部分の画像の1つ目 → image_intro01
  • 「詳細」をつけるのが難しい見出し → heading01 ※「詳細」の省略

4. 状態

種類_詳細+連番_状態 もしくは
種類_詳細_状態 もしくは
種類+連番_状態 もしくは
種類+連番_状態_状態

横幅や解像度、ユーザーの操作状態などにおって画像の切り替えをする場合は状態を示します。状態の前にはアンダースコアをつけます。

  • マウスオーバーで切り替わる前の画像 → image01_off
  • マウスオーバーしたときの画像 → image01_on
  • モバイルで表示する画像 → image01_sp
  • PCで表示する画像 → image01_pc
  • 2倍の解像度で表示する画像 → image01_2x

使用する形式

imgタグで読み込む画像の形式は以下のような基準で選択してください。

  • .jpg 写真のような色情報の多い画像に使う。圧縮によってファイルサイズを大きく削減することができる。
  • .svg ロゴやアイコンなどのベクターデータに使う。ファイルサイズが小さく、高解像度でも画質が劣化しない。アピアランスやグラデーションなどは正常に書き出せないので注意。
  • .png SVGで再現しにくいロゴやアイコンで使うことがある。透過が必要な画像に使う（透明部分にチェックを入れてPNG-32で書き出す）。
  • .gif 基本的に使わない。アニメーションGIFに使うことがある。

webp（ウェッピー）は対応ブラウザがまだ十分でないため、基本的には使用しません。

書き出しと圧縮

画像の圧縮は必ずおこなってください。 基準としては以下の通りです。

  • Photoshopで70%前後で書き出す。
  • Tiny PNG、JPEG mini、SVGOMGのようなツールを使う。
  • gulp-imageminなどで自動で圧縮する（設定例は以下）。
.pipe(imagemin({
  // jpgをロスレス圧縮（画質を落とさず、メタデータを削除）。
  progressive: true,
  // gifをインターレースgifにします。
  interlaced: true,
  // PNGファイルの圧縮率（7が最高）を指定します。
  optimizationLevel: 7
}))

altの設定

alt属性は必ず指定してください。HTMLの仕様上は属性の省略が認められていますが、alt属性がないとスクリーンリーダーが画像のパスを読み上げてしまうことがあり、利用者にとって使いにくくなってしまうことがあります。
情報設計者が中心となってaltを設定してください。

alt属性値は以下のルールで指定してください。

  • SEO目的で本来持っていない情報をもたせたり、過剰に情報をもたせない。
  • 原則として、画像を見たときの情報が過不足なく伝わるようにする（画像の完璧な説明ができなくても概要がわかったり、画像が存在することを伝えることができればいい場合もある）。
  • キーワードではなく、読み上げたときにできるだけ自然な文章になるようにする。
  • altテキストには「画像」という言葉は使わず、「写真」「グラフ」「〜の様子（風景）」のような具体的な言葉を使う。
  • 「写真： 」や「グラフ： 」などから始めて、どんな種類の画像が置かれているのかを伝える。
  • テキストを画像化した場合は、そのテキストを使う。
    • 自然な読み上げにする目的でテキストを変更しない。
      • altテキストは画像が読み込めなかった場合でも使用される。
      • 晴眼者が「GOOGLE」を「Google」と変換しているように、スクリーンリーダーの利用者も変換しているため、過剰に対応する必要がない。
      • スクリーンリーダーによって読み上げ方が異なるため、どんな状況でも自然な読み上げにできる保証がない。
  • 装飾目的やイメージを膨らませるための画像（使用例などは含まない）の場合は空にする。
  • 文章を補足する目的の場合は、前後の文章と続けて読んだときに自然な文章になるようにする。
  • 商品一覧の商品画像のように画像の説明を含めると冗長になってしまう可能性がある場合は空にする（ただし前後の文章で説明できている場合）。
  • 画像を説明するキャプションがある場合は、キャプションの内容と重複しないように設定する。
  • グラフ画像のデータがテキスト情報（表組みなど）として存在する場合は、alt="◯◯◯の推移を示すグラフ（データは、この後にある本文を参照）のようにテキストの場所を説明する。
  • グラフのテキスト情報がない場合や、テキスト情報のデータ量が少ない場合は、グラフ画像のaltテキストで説明する。
    • altテキストは、「概要」「主要なデータの説明」「補足的なデータの説明」の順で説明する。
  • クリッカブルマップの場合は、img要素で全体の説明を、area要素で各リンク先の説明をする。

参考サイト