Skip to content

Latest commit

 

History

History
215 lines (174 loc) · 10.9 KB

image.md

File metadata and controls

215 lines (174 loc) · 10.9 KB

画像

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

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

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

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

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

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

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

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

画像のパス指定

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

  • /assets/img/common/logo.svg
  • /assets/img/page/image01.jpg

ルート相対パスのメリットとデメリット

ルート相対パスには以下のようなメリットがあります。

  • どの階層からでも同じパスで参照できるため、パーツを共通化した場合でも扱いやすい。
  • CMSでは絶対パスで出力されることが多いので、CMS化が容易。
  • パスから階層構造をつかみやすい。
  • ルートディレクトリ近くにまとめておけばパスが短く保てる。

ルート相対パスにはデメリットもあります。以下の点に注意して制作をします。

  • フォルダー名を変更するとリンク切れになってしまう。
  • サーバーを通さないと、ローカル環境で画像が表示できない。
  • テキストエディターでパスの補完機能を使うには、若干の設定が必要。
  • 階層の深いファイルへのパスが長くなる。

ファイル名のルール

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

  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_about
  • オープンアイコン → 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_about01
  • 「詳細」をつけるのが難しい見出し → heading01 ※「詳細」の省略

4. 状態

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

マウスオーバー、モバイルとPC、解像度などで画像の切り替えをする場合などには状態を示します。状態の前にはアンダースコアをつけます。

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

alt

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

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

  • SEO目的で本来持っていない情報をもたせたり、過剰に情報をもたせない。
  • 原則として見たときの情報が過不足なく伝わるようにする（画像の完璧な説明ができなくても概要や画像の存在が伝わればいい）。
  • キーワードではなく、読み上げても自然な文章にする。
  • altテキストには「画像」という言葉は使わず、「〜の写真」や「〜のグラフ」「〜の様子（風景）」のような具体的な言葉を使う。
  • テキストを画像化した場合は、そのテキストを使う。
  • 装飾目的やイメージを膨らませるための画像（使用例などは含まない）の場合は空にする。
  • 文章を補足する目的の場合は、前後の文章と続けて読んだときも自然な文章にする。
  • 商品一覧の商品画像のように画像の説明を含めると冗長になってしまう可能性がある場合は空にする（ただし前後の文章で説明できている場合）。
  • 画像を説明するキャプションがある場合は、キャプションの内容と重複しないようにする。

圧縮

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

  • Photoshopの場合は70%前後で書き出す。
  • Tiny PNG、JPEG mini、SVGOMGのようなツールを使う。
  • gulp-imageminなどで自動で圧縮する（設定例は以下）。
const imagemin = require('gulp-imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminPngquant = require('imagemin-pngquant');

gulp.task('image', () => gulp.src(src.image)
  .pipe(changed(dest.image))
  .pipe(plumber({
    errorHandler(err) {
      console.log(err.messageFormatted);
      this.emit('end');
    },
  }))
  .pipe(imagemin([
    imageminMozjpeg({
      // 画質
      quality: 70,
    }),
    imageminPngquant({
      // 画質
      quality: 70,
    }),
    imagemin.svgo({
      plugins: [
        // <metadata>を削除する
        { removeMetadata: false },
        // コードが短くなる場合だけ<path>に変換する
        { convertShapeToPath: false },
        // SVG内に<style>や<script>がなければidを削除する。
        // idにアンカーが貼られていたら削除せずにid名を縮小する。
        { cleanupIDs: false },
      ]
    }),
    imagemin.optipng(),
    imagemin.gifsicle(),
  ]))
  .pipe(gulp.dest(dest.image))
  .pipe(browserSync.reload({ stream: true })));