企業ホームページ運営の心得

うっかり画像修正ミスの被害を抑える知恵、画像をテキスト検索する方法

キャンペーンバナーの修正ミスによるトラブルを最小限に抑える小技を紹介
Web 2.0時代のド素人Web担当者におくる 企業ホームページ運営の心得

コンテンツは現場にあふれている。会議室で話し合うより職人を呼べ。営業マンと話をさせろ。Web 2.0だ、CGMだ、Ajaxだと騒いでいるのは「インターネット業界」だけ。中小企業の「商売用」ホームページにはそれ以前にもっともっと大切なものがある。企業ホームページの最初の一歩がわからずにボタンを掛け違えているWeb担当者に心得を授ける実践現場主義コラム。

宮脇 睦(有限会社アズモード)

心得其の360

アルナイ論争

ある通販サイトの運営会社にお客から電話がはいります。

980円って表示されているのに、買い物カゴにいれたら1,180円になる

商品番号を聞いた担当者が、データベースで照合すると1,180円に間違いありません。ですが、その旨を伝えてもお客は納得しません。なぜなら980円とサイト上には表示されているからです。現場ではよく耳にする話で、私はこれを「アルナイ論争」と名付けています。客はアルと主張し、店はナイと反論する、あるいはその反対です。

往々にして、どちらも正しいというのが論争の結論です。通販システムの大半はデータベース構造になっており、そこに記された商品情報をもとに会計処理されます。だから店が主張する1,180円は事実です。一方、980円がサイト上に表示されているのも事実です。

両者の食い違いが生まれた理由は「画像」です。お客が見ていたのは、キャンペーン画像(バナー)に書かれた特別価格980円の表示だったのです。

増税時のパニック

現場レベルではよくある話で、キャンペーン終了に合わせてデータベースを更新したものの、画像を更新し忘れていたというものです。もちろん、画像管理とキャンペーンの行程管理をしっかりしていれば防げるトラブルですが、そう完璧にできればだれも苦労などしません。この4月の消費増税の舞台裏で、同様のドタバタ劇があったと耳にします。

今や文字や価格の「画像化」は当たり前です。当然のように価格を含めた画像も量産されています。増税直前となり、何パターンも「税込み価格」を含めた画像を表示していたサイトでは、このすべての更新に追われ、作業予定の大幅な変更を余儀なくされていました。そのとき、何より手間どったのは「価格入り画像」の「捜索」です。

HTMLのファイル管理を構造化していれば、画像は「images」などのフォルダに集約されているものです。しかし、この画像ファイルをすべて開いて確認する不毛な作業は、現場の労働意欲を減退させます。あるいは、サイト上に表示されている状態で目視確認するなら、全面リニューアルなみのチェックが要求されるからです。

価格をテキスト検索する方法

繰り返しになりますが、これらはよくある話で、何度も痛い目を見ています。

お客のサイトで「未更新」の価格が放置されていたことが発覚し、下げた頭は数限りなく、「損害賠償」の一歩手前なら数えるほどあります。責任論でいえば、お客の指示漏れや確認作業の不備が大半ですが、頭に血が上ったお客に「理屈」は通じません。土壇場の交渉術は本稿の趣旨ではないため割愛しますが、管理を請け負う以上、先回りしてアドバイスするのが上策です。

そして見つけたのが次の対策です。

価格をテキスト検索する方法

期間限定キャンペーンも同じ

特別なことはしていません。イメージタグの「alt」に詳細情報を記しておくだけです。

altとは画像の替わりに表示する文章を記述する属性で、「代替テキスト」と呼ばれます。ここに「価格」を入れてしまうのです。

<img src="XXX" alt="売価 980円" >

こうしておくと、価格を含んだ画像を表示しているHTMLのピックアップが簡単になります。ローカル環境なら、MacOSの検索機能で事足り、「捜索」の作業が省略できます。

さらにこうすると、キャンペーン管理にも役立ちます。

<img src="XXX" alt="キャンペーン 期間 2014年5月末" >

「行程管理」を完璧にしていれば、こうした作業は不用というのは正論です。いちいちHTMLを検索する手間も省けます。しかし、うっかり漏れてしまうから「うっかり」で、その万が一が発生したときに、いち早く問題を特定できる「保険」という意味からオススメします。ただし、代替テキストというalt属性本来の役割をお忘れなく。前後の文脈に沿った形で画像の説明を補完しつつ、検索性を高めます。

Web担当者の記憶力

かつて通信回線が貧弱だった時代は、データ量を減らすためテキストを優先し、あるいは画像を読み込まない環境でも「主旨」を伝えるためのaltは必須属性でした。

今でも、アクセシビリティの観点からalt属性は無視できない存在ですが、スマホの回線が光通信のレベルを超えるご時世となり、実作業においてaltはついつい省略しがちです。「画像」を作っているのに、さらに文字を入力することを無駄と感じるのは、いまどきのブラウザならどんな画像でも瞬時に表示してくれるからです。

しかし、価格などの「数字」を画像化したとき、年月が経つほどこの補足が困難となります。多くの人の記憶力は自分が思うほど良いものではなく、すべてのページを正確に把握しているWeb担当者もそれほど多くありません。

数字は信頼の要

増税直前のパニックの舞台裏で、数字の入った画像の特定まではできました。そして次に問題が持ち上がったのが「原版」の消失です。オリジナルの画像素材に手を加えるうちに「原版」がなくなり、増税の締め切りが迫るなか、新たに作成しなければならない「手間」に汗を流したという話もちらほら聞こえてきました。これもちょっとした工夫で、回避できますが、これは次回にて。

冒頭の「アルナイ論争」がどうなったかといえば、削除されずに残っていたイベントページを確認すると、「980円」の画像の脇には「有効期限」として日付が記されています。そもそも論で、この価格は無効であることを客へ告げた後、

誤解を与えたお詫びと、間違いをご指摘いただいたお礼

として、980円での販売を申し出ました。結局、お客は対応に満足し、1,180円の「通常売価」で購入し、リピーターになったと聞きます。「アルナイ論争」は愚策です。折角、お客がデバッグ(確認作業)してくれたのですから、謝意を伝え、真摯に耳を傾け、問題箇所を特定する方が建設的です。

今回のポイント

alt属性の記述は画像管理にも有効

代替テキスト+備忘録で一挙両得

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

レコメンド
Web サイトの行動履歴、購入履歴、会員情報などをもとに興味関心の高い情報を自動 ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]