ヤフージャパンプレミアム広告賞受賞

自社書籍

新卒採用情報

長期インターンシップ募集

採用情報

Bigmac 社長ブログ

スタッフ厳選!!おすすめ情報

ITAL株式会社

twitter
@Bigmac_work
google+
rss
rss
a
follow us in feedly
hatena.bookmark
このエントリーをはてなブックマークに追加

スタッフ厳選おすすめ情報

2016年12月

おすすめ情報

2016年12月30日

ビジュアルウェイトとは?

what-is-visual-weight

みなさんビジュアルウェイトという言葉は知っていますか?
重さは、見た目だけでなく、色にも重さがあります。
一目でみて重たそう、軽そうと感じるのは何故でしょうか。
今回はそんなビジュアルウェイトについて
書いていきたいと思います。

見た目の重さ?

生活の中で、重たそう、軽そうと印象に繋がるものもは
見た目の大きさです。
当たり前ですが、大きければ大きいほど重く感じます。
逆に小さければ小さいほど軽く感じます。

それではグラフィックの中ではどうでしょうか?
グラフィックの中で占領する
大きさが大きければ大きいほど重く感じます。
逆に小さければ小さいほど軽く感じます。
ところがそこに色彩が加われば、
見た目の大きさだけでなく、
色によって重さが変わります。
つまり人は見た目の大きさではなく、
色によって重さを感じ取っていることが分かります。

色の重さの関係性とは?

先ほどの話であったように、
人は見た目の大きさだけでなく
色によって重さを感じ取っています。
つまり、同じ大きさのもがあったとしても
色によっては重さが違うということです。
例をだしていきます。

1大きさ

形が大きいものと小さいものがあったら、
どちらが重たそうと感じるでしょうか?
よほどのことがない限り、
大きい方が重たいと感じます。
よくある話ですね。

2色の重さ

例えば同じ大きさのもがあったとします。
色は白と黒。どちらが重く感じるでしょうか?
大体の人が黒と答えるはずです。
コントラストの強いもの、
強烈な色のものが一番重く感じるということです。
明度が高いほど軽く感じ、低いほど重く感じます。
では、黒背景の場合はどうなるでしょうか?
この場合色が強烈なのは白ですね。
つまり、黒背景の場合は白が強く出て、
重く感じるということです。
また、赤は黒と同じくらいに重く感じます。

3サイズが違うもの

今まではサイズが同じもので比べてきました。
それでは、サイズが違い、
色も違うものはどうなるでしょうか?
例えば大きいものが白で、
小さいものが黒の箱が置いてあるとします。
どちらが重く感じますか?
大きい箱の方が重く感じそうですが、
この場合は小さく黒い箱の方が重く感じます。
先ほど書いた通り、
人は色によって重さを感じ取っているので、
色が強烈な黒の方が重く感じます。
サイズが変わっても、
小さい黒の方に重さの比重がかかってしまいます。

4テクスチャが加わると

同じ大きさでも、
テクスチャが加わるだけで見た目の重さが変わってきます。
テクスチャがあるのとないのでは、
ある方が重く感じます。

5縁が加わると

今度は縁を加えてみます。
同じ色のものでも、
黒い縁があるものとないものではどう感じますか?
黒い縁がある物の方が重く感じますよね。
黒は近くの色まで重く感じさせてしまう性質があるからです。

デザインに活かそう

早速デザインに活かしてみましょう。
ここは重く感じるなと思ったら、
サイズだけでなく色を変えてみたり、
強く見せたい所には縁をつけてみたりと
様々な所に活かすことが可能です。
ですが、途中で色や縁を加えた場合は
一度全体を見直すことが必要です。
また、黒は特に近くの色を重く感じさせる力があるので、
黒の近くに配置するときは注意が必要です。

その他のビジュアルウェイト

私たちの生活の中にも
ビジュアルウェイトは活かされています。
例えば、引越屋や宅配便のダンボール箱です。
ダンボール箱といえば薄い茶色を
思い浮かべる人は多いと思います。
実際、引越屋や宅配便のダンボール箱はどうでしょうか?
白色の物が多いですよね。
これもビジュアルウェイトが関係しています。
白は茶色に比べ明度が高いので、軽く感じます。
重たい荷物も白いダンボール箱に入れるだけで、
軽いと錯覚します。

他にも囲碁の碁石も黒の方が少し大きく作られています。
この場合、白は膨張色なので黒に比べて
大きく感じ取られてしまうためです。
ファッションで例えるなら、
白は膨張色のためあまり選ばれないと
いわれていることと同じです。

色の大きさや重さは
私たちの生活の中でも活かされることが分かりますね。

まとめ

いかがでしたでしょうか?
色にまつわる不思議な話はたくさんありますね。
そしてデザインだけでなく、
私たちの生活にも活かされていることが分かります。
よく見るダンボールも
そんな意味があったなんてと驚かされました。
私自身も色の重さは明度くらいだろうと思っていたので、
この記事を書いていくうちに、
縁やテクスチャを加えるだけで、
こんなにも見た目の重さが変わることを知ることができました。
これからの自分自身のデザインに活かしていきたいと思います。
もちろんデザインやダンボールだけでなく、
ファッションにも活かせるはずです。
色彩力を磨いて、
自分のファッションにも活かしてみてはいかがでしょうか?
色彩やその意味を調べて活かすだけで、
見えているものも変わってくるはずです。
この記事を読んで、
少しでも色彩について興味を持っていただけたら幸いです。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2016年12月30日

集客は検索だけじゃない!ディスプレイ広告活用術

display-advertising-technique-notjust-searching

検索連動型広告には、大きな弱点があります。

それは、あくまで検索されるキーワードに関連するサービス、
商品にしか広告を出すことができない
という点です。
例えば、どんなに魅力的であっても、
まだ誰も知らないような新しいサービスなどは、
キーワード広告で販売するのは難しいでしょう。

また、そもそも関連するキーワードの検索数が
少なすぎるものには向きません。
「検索エンジンにしか広告が出せない」ということは、
「検索される範囲にしか広告が出せない」ということなのです。

ディスプレイネットワーク広告の最大の魅力は検索されなくても集客できること

ディスプレイネットワーク広告は、検索エンジンではなく
「ホームページそのもの」に広告を載せることが
できるところです。

たとえば、20代女性向けのサービスならば、
そのような女性がたくさん集まっているような
コミュニティサイト、情報サイトに広告を出せば、
収益につながりやすい訪問者を獲得できるでしょう。

ディスプレイネットワーク広告は、リスティング広告のように
Googleアドワーズの管理画面で広告文を作成したり、
キーワードを設定することで、
関連性が高いと検索エンジンが判断したホームページに
広告が自動で表示される仕組みになっています。

テストの量が成果を分ける

キーワード広告とディスプレイネットワーク広告の大きな違いは、
どの程度の予算をかければ、どのようなサイトに、
どの程度広告が表示されるかが事前にわからない
という点です。

キーワード広告であれば、少ない金額からはじめて、

「どのキーワードで表示されていないか」
「平均掲載順位がどのくらいか」

など詳細なレポートがわかる為、
徐々に広告額を上げていくことができます。

しかし、ディスプレイネットワーク広告の場合、
「どのサイトで広告が表示されたか」を
レポートで確認することはできても、
一度も表示されたことのないサイトに関しては
何も手がかりがつかめません。

また、キーワード広告のように
「売れる可能性のあるキーワード」を、
事前に洗い出すことができません。
そのため、売れる可能性のあるサイトを洗い出すためには、
最初にある程度高めの入札価格でスタートをする
必要があるのです。

ディスプレイネットワーク広告は、
とにかく実践・テスト・検証が重要です。

始めのうちは可能な限り関連する多くのサイトに
広告を表示させるようにする
ことを心がけましょう。

広告額の消費が怖いために入札価格を抑えすぎると、
有力なサイトに広告が表示されないだけでなく、
「そもそも広告そのものがほとんど表示されない」
という事態になりかねないからです。

すでに収益を上げているライバルは、
有力なサイトに高めの入札価格を設定して、
表示を独占しているかもしれません。
「表示までもっていけば収益を上げられる」
という場合は機会損失につながります。

まずはキーワード広告とキャンペーンを分けること

ディスプレイネットワーク広告では、
必ず専用のキャンペーンを作るようにしてください。

これはキーワード広告のキャンペーンやグループを
分けて管理しないと、広告の出稿結果や設定、
費用対効果などを判別しにくくなってしまい、
まともに修正がきかなくなってしまうためです。

ディスプレイネットワーク広告で失敗している方の多くが、
ここで引っかかっています。

費用対効果を最大まで高めるには・・・

繰り返しになりますが、
ディスプレイネットワーク広告のポイントは、
「まず広く広告を出して、徐々に無駄を削っていく」
ということです。

最初にキーワードや入札価格を絞りすぎると、
そもそも広告自体が表示されなくなってしまうからです。

しかし、レポートのURLを調べていると、
クリック数が多いのに、ほとんどコンバージョンにつながらない
というサイトが出てきます。

費用の面からも喜ばしいことではないので、
そのようなサイトのURLは広告が
表示されないよう処理してしまいましょう。

成績の良いページに集中して成果を倍増させる

逆に、成績の良いページに重点的に広告を出せば、
成果がいっそう高まります。
そのためにあるのが「手動プレースメント」という、
サイト別に入札価格を設定できる機能です。

広告の費用対効果が高いサイトが明確であれば、
その広告欄をライバルよりも高めの入札価格で
独占してしまいましょう。

ディスプレイネットワーク広告で注意するべき3つのこと

ディスプレイネットワーク広告を成功させるためには、
以下の三点を注意しましょう。

①商品・サービスによる当たり外れが大きく、予測がしづらい

キーワード広告と比べて、ディスプレイネットワーク広告は
「商品、サービスによって当たり外れが非常に大きい」という
特徴があります。
どんなサービスであれば向いているのかは、
事前に予測するのが非常に難しく、
「やってみなければわからない」というのが実際のところです。

なぜなら、
あなたの商品、サービスと関連性が高く、
売り上げにつながる可能性が高いサイトの運営者が、
GoogleやYahoo!と広告契約を結んでいるかどうか。
という私たちが事前に把握、予測ができない要素が
成功のカギとなるからです。

現時点では広告を表示させるのに適したサイトがあまりなくても、
1年後には有力なサイトがディスプレイネットワーク広告を
載せ始めるかもしれません。
実際にGoogleやYahoo!との広告契約を結ぶ
サイトの数は日々増えていっています。

②成果がすぐには出にくい

ディスプレイネットワーク広告は、
リスティング広告に比べすぐに成果が出にくい広告でもあります。
なぜなら、「最初に低めの入札価格を設定し、徐々に上げていく」
という方針がとりやすいキーワード広告に比べ、
ディスプレイ広告は、
最初に費用対効果の悪さを覚悟で高めの入札価格をつけて、
徐々に絞り込む方が理想的な成果を出しやすい
からです。
そのため、最初の2~3ヶ月は「テストの為に広告費を投じる」
くらいの気持ちで挑むことが大切です。

③設定が反映されるのに時間がかかる

キャンペーンやグループの設定、変更を行ってから、
アルゴリズムの調整がしっかり行われるまでには
時間がかかります。

最初に「表示が少なすぎる設定」をしてしまうと、
かなりの期間を無駄にしてしまうので、
ある程度は思い切って表示数を出せる設定を心がけましょう。

入札価格に関しては、少なくともキーワード広告で
売り上げの注力になっているキーワードより
低くならないような金額でスタートしてみてください。

予算の消費が怖い場合は、
1日当たりの上限予算の設定で調整するようにしましょう。
この点はキーワード広告とは逆の考えです。

まとめ

このような問題はありますが、
ディスプレイネットワーク広告は、
ビジネスの将来を見据えたときにも
取り組んでおく価値は高いといえます。

なぜなら、その仕組みをまだ詳しく理解していない方も多く、
業種によってはキーワード広告よりも
ライバルが少ないという可能性も十分に考えられるからです。

キーワード広告で培った手法をそのまま持ち込み、
テキスト広告では実現できない、
ビジュアルを駆使したイメージ広告を使用することもできます。

また、GoogleやYahoo!の広告表示アルゴリズムも
徐々に進化しており、
今後費用対効果はいっそう上がっていくことでしょう。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2016年12月29日

手間のかかるリスティング広告を自動化するには?ツールと方法論の紹介

listing-ads-automation

オンライン・オフラインを問わず、
数あるマーケティング手法の中で、リスティング広告は
最も成果を獲得しやすい手段のひとつです。

また同時に、最も手間のかかる手段でもあると言えるでしょう。

リスティング広告を、手間と効率の線引きから考えてみました。
ご覧ください。

リスティング広告は手間がかかる

リスティング広告の手間を考える上で特徴を並べると、
以下のようになります。

  • リスティング広告は、最もスピーディーに施策の是非を確認できる
  • リスティング広告は、最もデータ量が多い手段である
  • リスティング広告は、手間をかけようと思えばいくらでもかけられる
  • リスティング広告は、どこかで割り切らないと人や時間がいくらあっても足りない

Bigmacもご多分に漏れず、手間と効率の線引きで
常にジレンマを抱えています。

限られた人的・時間的リソースの中で、
お客様に最大限の成果をお届けする。

そのために手間は惜しみませんが、
どこかで切りをつけないと限界が来てしまいます。

だからこそ、効率化もどんどんしていかなければなりません。

限られた人的・時間的リソースを有効活用するための
効率化の選択肢として、

普段のワークフローの中にある
数多くの定型業務を見直し、

簡略化・自動化するためのシステムを
導入するというものがあります。

手動と自動化それぞれの得意不得意を分けて考えることが重要

リスティング広告の運用について、
人的な手動(マニュアル)とシステムでの
自動化(オートメーション)の対立図式で
語られるケースがあります。

しかし実際には、手動と自動化を行うにあたって、
業務内容によって得意な業務、不得意な業務が必ず存在します。

だから、リスティング広告で生じる業務全体を
細かく細分化し、棚卸しすることで
手動と自動化の役割分担をする必要があります。

手動で行うべき業務、自動化できる業務を
それぞれまとめると、以下のようになります。

手動で行うべき業務

手動で行うべき業務には3種類あります。
人間が得意とする部分を割り当てる必要があります。

考える作業全般

  • キャンペーンの企画
  • アカウント全体・詳細の設計
  • KPIの設定
  • 広告運用結果の分析

自動化できない業務

  • 広告における新機能の採用
  • キャンペーンのオプション機能

知見・ノウハウが重要な業務

  • 最適化業務
  • キャンペーン最高性
  • グルーピング
  • 広告テストの設計
  • 広告文の変更と追加
  • 入札ルールの設計
  • 実績を加味した上での予算配分

自動化するべき業務

自動化するべき業務は、ひとことで言うと
人がやっている場合じゃないくらい膨大な量になる業務です。
2種類あります。見ていきましょう。

自動化できる業務

  • レポートの作成
  • コスト、クリックなど指標の定期監視
  • 評価軸やルールが決まっている部分の入札額・予算調整

定期的に更新や変更が発生する業務

  • 内部データとアカウントの同期(商品名・品番など)
  • 商品リスト広告(PLA)などデータフィードが必要なオプション
  • 在庫と連動した入札や広告ON・OFF対応

自動化ツールや自動化システムの導入

リスティング広告の自動化を行うにあたって、
それぞれの業務に対して適切な
自動化ツールや自動化システムを選ぶことがポイントです。

それぞれの業務に関して、見ていきましょう。

レポートの作成を自動化

レポートの作成は、基本的にシステムの規模により
内製するか?外注するか?を判断する必要があります。

また、下記も加味して考える必要があります。

  • レポートの出力数
  • レポートの種類
  • レポート提出の頻度
  • 媒体の数と種類
  • カスタマイズが必要かどうか

レポートの種類が決まっており出力の頻度が少ない場合

VBAによって自動生成するようなツールを開発すれば、
ある程度の作成コスト圧縮は可能です。

その場合、リスティング広告の管理画面や
スケジュール設定を用いて
CSVのレポートデータをダウンロードし、
Excelフォーマットの定型レポートを作ります。

レポートの出力頻度や出力数が多い場合

レポートAPIを利用したシステム開発が必要になる場合があります。
必要な場合は媒体に相談してみるのがおすすめです。

入札管理や運用状況監視を自動化

自動入札管理システムは、
リスティング広告と同じくらいの歴史を持つシステムです。

提供ベンダーのシステムも、
リスティング広告にまつわる膨大な手動作業を自動化し、
実績によって入札や予算管理を自動的に調整することで
投資効率を最大化させるための機能が揃っています。

ほとんどのシステムで、媒体やキャンペーンごとのデータを
集約し、予算進捗や費用対効果の監視機能を
備えています。

ダッシュボードやBI(Business Intelligence)ツールとも呼ばれ、
リスティング広告のみならずあらゆるメディアを包括した
管理ツールとして機能するものが多いです。

自動化ツールも進化し続けているということです。

使いこなすには、リスティングをどこまで自動化するか?
どの機能が必要か?を考えながら選ぶことが重要です。

データフィードの自動化

レポート作成や自動入札管理だけでなく自動化が必要な部分が、
eコマースでの商品情報の利用です。

新商品の掲載、販売終了商品の停止などはもちろん、
なるべくリアルタイムにリスティング広告へ
反映できると良いです。

商品情報を利用するケースは、
リスティング広告以外にも多岐に渡ります。

  • ショッピングモール(Amazon、楽天など)
  • アフィリエイト
  • 比較サイト
  • ショッピングサーチサービス(Googleショッピングなど)

自社の商品情報を更新するメディアは
今後も増え続けることが予想されます。

これを手動で管理するのは、
レポートや自動入札よりさらに大変な作業です。

情報提供先が増えれば、データフォーマットが
それぞれの提供先で微妙に違うケースも多々でてきます。

データの処理タイミングも違う、チャネルごとの価格が違う、
プロモーションの管理方法が違う…と追いかけていくと、
工数が倍々で増えていくのです。

だから、マスターデータを提供先ごとに
適切な形で処理してくれる、
中継役のようなシステムのニーズが高まり、
それがデータフィードの重要性に繋がっています。

データフィードを実現するには、
システム部門の開発者の協力が必須となるでしょう。

データフィードを用いて自動化するものとしては、

  • キーワードの自動入稿
  • 在庫連動
  • 商品リスト広告

があります。順に見ていきましょう。

キーワードの自動入稿

取扱商品のジャンルや種類が多い場合、
それらをリステイング広告ですべて反映する手間は膨大です。

結果的に機会損失につながるため、
商品データベースの情報をキーワード化して入稿することで
機会損失を最小限にとどめることができます。

商品データベースをデータフィード化することが難しい場合でも、
Googleアドワーズが提供する動的検索広告(DSA)の利用を
入り口として検討してみましょう。

在庫連動

eコマースの場合、リアルタイムに在庫が変動します。

データの同期が行われていないと、
すでに販売完了した商品の広告を出してしまうリスクがあります。

商品情報とリスティング広告のキャンペーンを同期させることで、
在庫と連動した入札や広告のON/OFFの対応などを
行うことができます。

商品リスト広告(Product Listing Ads)

Googleアドワーズの商品リスト広告は、
eコマースで無くてはならない広告手法として
認知されてきています。

  • 検索連動型広告よりクリック単価が低い
  • コンバージョン率が比較的高い

という特徴があるためです。

商品リスト広告を利用するには
Googleマーチャントセンターに登録する必要があります。

Googleマーチャントセンターへ自動的に更新情報を
送られるように設計することが、結果的に
在庫連動にも繋がっていきます。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2016年12月29日

2つの機会、どちらを選びますか?

two-opportunities-which-one-would-you-choose

みなさんはchanceという単語をよく口にしたり、
耳にしたりする事があると思います。
このchanceとはみなさんもご存知の通り
「好機・機会」という意味です。
筆者はこれまで野球を続けてきましたが、
チャンスと言われる場面をよく経験し、
またその場面を見て来ました。

しかし、このチャンスと呼ばれる機会には
モノにできるものとそうでないものがあります。
そこにはどのような背景があるのでしょうか。

それは機会という同じ意味をもつ単語が
2種類存在する事が示しているように思います。
chanceと同じ意味を持つ単語、
それはopportunityというものです。
この2つ、意味が同じでも使われ方が違います。
では、どう違うのかこれを説明していきます。

 

chanceとは・・・

chanceとは偶然性がある機会のことをいいます。
たまたま起こった機会や偶然~さんと遭遇しただとか、
自分で作った機会ではない物事を指します。
確実性のない機会であり、自分の起こしたアクションが
あってのものではないということになるのです。
つまりchanceには自分の力や行いが関係しません。
たまたま起こった事ということになります。

opportunityとは・・・

opportunityとは~をするのに
都合の良い機会のことをいいます。
opportunityに偶然性はありません。
わかりやすくいうなら
結果の出やすい機会ということです。
積み重ねたものがあるからこそ巡ってきた機会ですね。
たまたま起こった機会ではなく
起こるべくして起こった機会ということになります。

異なる機会

自ら引き寄せた機会であるかどうか、
というところが異なる点ですね。
チャンスで結果が残せなかった。
すごく悔しい思いをすると思います。
私自身、小さいころから多くのチャンスを経験し、
結果を出すことができずに
悔しい思いをしたことが多々ありました。

ですが、それは自ら引き寄せた物ではないからだと
気付きました。
たまたま巡ってきた機会だから結果が残せなかった。
たまたま巡ってきたものだから、準備ができておらず
自信を持って取り組めない。
だから偶然回ってきたchanceでは
結果を残すことが困難なのだと思います。
逆に努力を惜しまず、
物事に一生懸命取り組んでいる人には
物事を行いやすい機会、
opportunityを作り出すことができるのです。

しかし、一生懸命頑張っているのに
結果が出ないという人もいると思います。
ひたむきに取り組んでいるのに
なぜ私はこんなについていないんだ、
と思う方もいらっしゃるかもしれません。
そこには、取り組み方が間違っていたり、
様々な原因があると思います。

それでも一生懸命取り組むということが
opportunityを生み出す
プロセスになっていると筆者は思っています。
その原因が改善できたときに
チャンスを掴めるような人になっているのだと。

偶然か、必然か

チャンスで結果を残すことができた。
これはたまたまなのか、そうではないのか。
自らが一番理解していると思います。

私は大学時代に野球をしていた時に、
ここぞという場面で、平凡なゴロを打っても
相手のミスを誘ったりする事が多くあり、
友人に「運がいいよな」と言われた事がありました。
しかし、筆者は運も実力のうちという言葉があるように
運も自らの力だと考えています。

そのため、運という力を身に付けるための行動をしていました。
だからこそ生まれた結果であり、
偶然ではないという想いを持っていました。
具体的に言うならば、私はごみ拾いをします。
ごみを拾うのではなく、運を拾うのだという気持ちでやります。
そんなんで運が味方してくれるわけないだろう!!
と思った方もいると思います。

ですが、筆者はこの行動があったからこその
結果だと感じた事が多くありました。
事実、筆者の周りの友人もそれに気付いてからは
運がいいとあまり言わなくなりました。
この行動があったからこそ、
結果があったのだなと納得していました。

ごみをポイ捨てしていたような友人が、
ごみを拾うようになったのも事実です。
もちろんこれは、野球にしっかり向き合った上での
プラスアルファの部分での話になりますが。。。

しかし、これを積み重ねていったことが
自信になりましたし、なにより
良い事があったときにラッキーだけでは
済ませずに裏づけが持てるようになりました。

ちょっとした事かもしれませんが、こういう行動が
opportunityを作っていくのだと私は感じています。
これは仕事にも言えることだと思います。
日頃から自分を見つめ直し、
努力を怠らずに取り組んでいれば、
「この仕事やってみるか」と任せられた時にでも
それまでの日々が準備となり、
しっかりと成果をあげられることに
繋がるのだと私は考えます。

日々をどのように考えて取り組むのか、
どのように行動をするのかはあなた次第。
ですが、その行動ひとつで巡ってくる機会の質が変わるのです。

chanceを待つのか、opportunityを生み出していくのか。
あなたはどちらを選びますか? 

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2016年12月29日

もう迷わない!id・class名、画像ファイル名の付け方まとめ

i-will-not-hesitate-anymore-id-·-class-name-image-file-name-assignment-summary

「自分で考えたこのclass名って問題ないのか…」
「この画像にはなんて名前をつけるのが適切なのか…」

id・class名、画像ファイル名の付け方で悩んでいる
新人コーダーは、私を含め少なくないと思います。

今回は、そんな悩みを解決するべく
画像ファイル名とclass・id名の付け方について
まとめたいと思います。

画像ファイル名、id・class名の共通ルール

1半角英数字のみ使用する。

class・id名は「日本語」、「全角英数字・記号」、
「半角カタカナ」を使用することが出来ません。

また、画像フォルダに「日本語」、「全角英数字・記号」、
「半角カタカナ」を使用すると、
画像が表示されない場合があるので、
半角英数字のみ使用するようにしましょう。

2「-」(ハイフン)、「_」(アンダースコア)、
「.」(ドット※画像ファイル名のみ)以外の記号は使用しない。

エラーを引き起こす原因となるので、使用してはいけません。

3機種依存文字は使用しない。

機種依存文字とは、その名の通り、
各機種(MacやUNIXなど)に依存し、
特定の環境でしか正常に表示されない文字のことです。
仮に、他の環境で表示させた場合、
文字化けを起こして読めなくなります。

記号と同様、エラーを引き起こす原因となるので、
使用してはいけません。
文字を変換するときに、文字の右側に<機種依存文字>と
表示されるので、そこで判断できます。

4スペース(Space)は使用しない。

id・class名にスペースを含んでしまうと、その要素に付けられた
二つ目のid・classとして認識されてしまいます。

また、画像ファイル名にスペースを使用すると
ファイルを正常に処理出来なくなる可能性があるので
使用すべきではありません。

5数字や記号から開始しない

数字から開始しているid・class名は、認識されません。
画像ファイル名に使用した場合もファイルを正常に
処理出来なくなる可能があるので使用すべきではありません。

id・class名の形式

まずはid・class名の形式を決めておきましょう。

例)ヘッダーの背景画像の場合

・header-bg.jpg
単語と単語の間に「-」(ハイフン)を挟む。

・header_bg.jpg
単語と単語の間に「_」(アンダースコア)を挟む。
この書き方のことを「スネークケース」といいます。

・headerBg.png
後に続く単語の頭文字を大文字にする。
この書き方のことを「キャメルケース」といいます。

上記の3通りの中から、自分が使いやすいと思う
書き方に統一しましょう。

画像ファイル名の形式

画像ファイル名のフォーマットは、
id・class名の形式と統一するのが個人的には好ましいと思います。
もちろん、最後に拡張子は付け足して下さいね。

画像ファイル名の基本ルール

「ページ名」_「位置」_「種類(要素)」_
<1>      <2>    <3>
「詳細」「番号(連番)」_「状態」.「拡張子」
<4>    <5>     <6>

上記が基本的な画像ファイル名の付け方です。

このルールを守る利点として

・ファイル名を見ただけでどんな種類の画像で
どこで使われているのか推測出来る
・後々画像が変更になった場合でも
画像の名前を変えずに更新することが出来る

この2点があげられます。

1.ページ名

どのページで使っているかを判断するために付けます。
ですが、ページごとに画像フォルダを分けている場合は不要です。

例)
画像フォルダがページごとに分かれていない場合(/img/)
index_news_bnr01.png

画像フォルダがページごとに分かれている場合(/img/index/)
news_bnr01.png

2.位置

どの部分で使用しているかを判断するために付けます。

例)
ヘッダーで使用している背景の場合
header_bg01.png

サイドバーで使用している画像の場合
side_img01.png

よく使う部位一覧

ページ全体 container
ヘッダー header
サイドバー side
フッター footer
メインコンテンツ main
サブコンテンツ sub
検索ボックス search
ニュース news
お知らせ info
お問い合わせ contact
次へ next
前へ prev
リスト list
注釈 notes
レイアウトのためのボックス unit,box,col,area

 

※もっと詳しく知りたい方はコチラをご覧ください。

3.種類(要素)

な種類の画像なのかを判断するために付けます。

例)
写真画像
img01.jpg

ヘッダーで使用しているロゴ画像の場合
header_logo.png

よく使う種類一覧

画像、図、写真 img,photo
サムネイル thumb
バナー bnr
ボタン btn
ロゴ logo
ナビ nav
見出し ttl
テキスト txt
アイコン icon
背景 bg
矢印 arrow
line
ページトップ pagetop

4詳細

3の「要素」に対して詳細な説明が必要な場合のみ付けます。
基本的にはbtnやiconのように汎用的な画像にしかつけません。

例)
リセットするボタンの場合
btn_reset.png

丸いアイコンの場合
icon_circle.png

5番号

同じ用途の画像が複数あった場合に、
連番で番号を付けて分けます。
連番は2桁でつけるようにします。

例)
サイドバーで使用するバナーAの場合
side_bnr01.jpg

サイドバーで使用するバナーBの場合
side_bnr02.jpg

6「状態」

ロールオーバー(マウスカーソルが要素の上に乗った時)や
カレント(現在地表示)などの、状態を表す必要が
ある際に付けます。

ロールオーバー:○○_over.png、〇〇_hover.png
選択状態 :○○_selected.png
現在地  :○○_current.png、〇〇_here.png

例)
・現在地がAboutページであることを示す
グローバルナビ画像の場合
nav_about_over.png

・レスポンシブウェブデザインの際、
スマートフォンでのみ使用する場合
img_index_sp.png

class・id名の基本ルール

基本的には、画像ファイル名をつけるときのルールと同じです。
(ページ名と拡張子は省きますが。)

ただ、id・class名は意味が分かる範囲で、
可能な限り短くしたほうがいいので、
省いても意味が通じるものは省きましょう。

id・class名の付け方コツ

1.画像ファイル名とid・class名をなるべく統一する

統一出来る部分は統一することで名前を考える手間も省け、
変更箇所の特定がしやすくなります。

例)
・id名
#top-side-nav

・画像ファイル名
top-side-nav-home.png
top-side-nav-access.png

2.デザイン(「見た目」や「位置」)ではなく、
内容(「何処で」「何を表現」するのか)から名前をつける。

見た目や位置に関するid、class名をつけてしまうと、
サイトの仕様が変更された場合に矛盾が生じてしまいます。

例)
・left、right_box …
left や right などの位置を表す名前は、
後で左右を入れ替えた場合などに矛盾が生じてしまいます。

・red、green …
red や green などの色を表す名前は、
後で色を変更した場合などに矛盾が生じてしまいます。

・w500px、size18 …
サイズを表すような名前は、
後でサイズを変更した場合などに矛盾が生じてしまいます。

まとめ

命名規則を守る一番の理由は、作業の効率化につながるからです。
会社などで命名規則が決まっている場合は
その内容に沿って名前を付けるようにすることで、
自分以外の人が書いたソースを見て混乱することが減りますし、
その逆もまた然りです。

今回ご紹介した命名規則は、あくまで一例です。
複数人でコーディングしていく場合以外を除き、
自分が作業しやすいように自分ルールを
つくっていくのもいいかもしれません。

この記事を通して、読者の方が今後、
画像ファイル名、id・class名の付け方で
悩む時間が少しでも削減できれば幸いです。

このエントリーをはてなブックマークに追加
メルマガ登録
1 2 3 4 5 6 7