タグ別アーカイブ: WEBサイト

Webサイトのユーザビリティについて、もっと真剣に考えてみよう

Webサイトのユーザビリティについて、もっと真剣に考えてみよう

ユーザービリティという言葉を辞書でひくと、使いやすい、有用であることと出てくる。
Webサイトという言葉とセットもののにように出てくるキーワードだが、毎日さまざまなサイトを見ていて「これは見やすいなー。すごいなー」と思えるサイトに出会うことはそれほど多くない。
自分たちへの反省もこめて、Webサイトのユーザービリティを追求するためにはどう考えるべきかについて、真剣に考えてみようと思う。

ユーザビリティの高いWebサイト。それはサービスの行き届いたレストランのようなもの

ユーザビリティの高いWebサイト。それはサービスの行き届いたレストランのようなもの

まずは、あなたが今までに行ったレストランのなかで、一番思い出に残っているお店を思い出してほしい。一流ホテルのフレンチレストランか、もしくは小さくても満足度の高いお店もある。

たいていの場合、思い出に残るレストランというのは、料理の味はもちろん、サービスにおいてもすぐれている。たとえば、テーブルについてメニューが運ばれてくるタイミング。その際のスタッフの会話力。水をついでくれたグラスの口あたりの良さ。料理が運ばれてくるタイミング・・・。
お客である私たちは、年齢や社会的地位などに関係なく、紳士淑女のように扱われることでとても心地よい時間を過ごしたはずである。

Webサイトのユーザービリティも、同じようなホスピタリティが必要なのだと思う。ご存知のとおり、Webサイトは仕組みから考えれば、自動販売機のようなもの。セルフサービスで好きなように見てくださいというスタンスではあるが、そこに心配りや人の存在感を添えることはいくらでもできるはずだ。
訪問者が、自分は大切に扱われた、このサイトを見て助かったと思うことができれば、それがまさにユーザビリティではないだろうか。

スマホ所有率79.4%※のいま、ユーザビリティはWebサイトの力強い武器である

スマホ所有率79.4%※のいま、ユーザビリティはWebサイトの力強い武器である

そして、最近のスマホ普及率はすごい。そのためスマホやタブレットで見ても、そのサイズに合わせて表示されるレスポンシブデザインが主流になってきたが、スマホでのページ閲覧率はパソコンよりもかなり低くい。一人あたり平均約3ページビューと言われている。

ということは、最初に開いたページを省くと、2クリックする間に欲しい情報が見つからなければアウト。
ユーザビリティの悪いサイト、自分にとってメリットがなさそうなサイトは、さっさとサヨナラされてしまうのだ。制作している側としては悲しいけれど、現実は現実。そのなかで、どれだけ見てもらえるか、お客さまの要望に応えられるかが勝負である。
※メディア環境研究所による「メディア定点調査2018」より
※ページビュー数とは、Webサイト内でページが開かれた回数

Webサイトのユーザビリティを上げるために、忘れてはいけないこと

それでは、どのようにユーザビリティを高めていけばよいのか。必要な視点をご紹介しよう。

サイトのメインターゲットになりきる

もしかしたら、一番むずかしいポイントかもしれないが、絶対必要な視点である。
今作ろうとしているコンテンツを一番見に来てほしい人は、どんな人なのか。何のために、どんなシチュエーションで、どのようにWebサイトを訪問しているのか?徹底的にその人の気持ちになってみることが必要だ。筆者もつねに悶々としているのだが、ここの詰めが甘いと失敗する可能性が高い。

ペルソナ(メインターゲットの詳細なプロフィール)を設定する方法は一般的になってきたが、たいていの場合は中途半端に終わっている気がする。企画段階ではペルソナを入念に考えていても、制作段階において、その人たちがこのページを見たときにどんな気持ちになるか、何を見せてほしいのか、までは詰め切れていないことが多い。

だから、徹底的に「その人」になり切ってみる。ターゲットを決めたら、それ以外の人のことは一旦無視しよう。「もしかしたら、こんな人も見にくるかもしれない・・・」と真剣に考え出すと、コンテンツの内容や並べ方、ボタンの文言などにもどんどん迷いが生じてしまうからだ。

ストーリーは流れているか?

ストーリーは流れているか?

メインターゲットの気持ちになれたら、次はその人がサイト内をどのように動くか、何を見たいかというストーリーを作る。
たとえば、コーヒーカップのオンラインショップであれば、どんなふうに商品を紹介してあげれば読みやすいか。多分、商品の写真を最初に見たいだろうが、それはどのくらいの大きさが一番よいのか。スマホ画面いっぱい?その半分くらい?商品の名前はどの位置にどのくらいの大きさがよいか。カートボタンは、どこにあれば押しやすいのか・・・。

考えることはたくさんあって、だんだん分からなくなる。そんなときは、街にあるコーヒーカップ屋さんのおばちゃんとお客さんを演じてみることをお勧めする。
お客「すいません、コーヒーカップを探しているんですが」
おばちゃん「はいはい、お家で使わはるの?」(大阪のおばちゃんなので関西弁)
お客「いえ、会社で」
おばちゃん「会社用やね。たっぷり入ったほうがいいんかな?」
お客「そうですね。あと、できるだけ冷めにくいほうがいいな。」
おばちゃん「これなんかオススメやけど、お客さんは手が大きいから持ち手もいい感じかも。結構人気なのよ。この間もね・・・」

こんなに会話が弾むかどうかは別として、お客さんがまず知りたいこと、どんな疑問が頭のなかにわいてくるのかをストーリーで考えてみると、必要な要素と不要なもの。その見せ方の順番、優先順位がはっきりしてくる。

不要なものは省く。Webサイトにも断捨離が必要

不要なものは省く。Webサイトにも断捨離が必要

そうやって考えていくうちに、情報はだんだん整理されてくるはずだ。さっきの会話もお客さんにとっては、できるだけシンプルなほうがありがたいはず。多少のお喋りは楽しいものの、コーヒーカップ一つ買うだけで10分も店のおばちゃんと話したい人は稀だろう。
ましてや、買うつもりもないカレー皿やワイングラスのことまで宣伝されたら、すぐにお店を出たくなるかもしれない。

写真、コピー、リンクボタンなどさまざまな情報は、必要なときに必要な場所にあれば、その価値は非常に高くなり感動さえ与えられるが、不要なときには単に邪魔なだけとなってしまう。そこには、文字の書体や大きさ、色使いなども含まれる。
Webサイト訪問者が必要とする情報を、必要なタイミングで提供すること。そのためには、まず不要なものから省いていくのも一つの方法だろう。

訪問者に、一呼吸つかせてあげよう

最後に、もうひとつ。余白があたえる意味の大きさも大切にしたい。
フランス料理のフルコース途中で出てくるシャーベットは、メインとなるメニューの間に、口のなかをさっぱりさせて次の料理を楽しんでもらうためにある。Webサイトでも、そんな一呼吸つける空白を置くことで、ちょっと落ち着いて考えられるようになる。

よく考えて作られているWebサイトを見てみると、この余白の使い方がとても上手である。情報をたっぷりと詰め込むのではなく、ちょっとしたスペースを設けることで訪問者は頭の整理がしやすくなる。デザイン的にも、余白があることでメリハリがつき、目立たせたい情報がぐっと際立ってくるものだ。

ユーザビリティの高いWebサイトは、必ずリピーターを生む

ユーザビリティの高いWebサイトは、必ずリピーターを生む

私たちが居心地のよいレストランについ足を運んでしまうように、Webサイトも同様のことが言える。とくにオンラインショップはその傾向が強い。それほど値段が変わらないなら、自分の買い慣れたサイトで買っておこうと考える人は多いのではないだろうか。ユーザビリティは、オンラインショップの売り上げやサイトのアクセス数に大きく影響するのだ。

それならば、私たちはもっともっと真剣にWebサイトのユーザビリティについて考えるべきだろう。新しいページをどんどん作って訪問者を飽きさせないことも大切だが、その前にいったん足を止めて、このサイトは本当にユーザーが使いやすいか見やすいかを見返してみよう。

長く愛されているレストランに共通しているのは、お客さまをうんと喜ばせたいというホスピタリティが原動力になっていること。Webサイトを制作する私たちも、そんな謙虚な姿勢でもう一度考え直してみる必要がありそうだ。

WordPressで構築する製品情報システム(製品情報CMS)

drw-0

多品種多品目を扱う企業WEBサイトでは、製品や商品、サービスを紹介するための「製品(商品)情報システム」が組み込まれているケースが多い。
「製品情報システム」と聞くと、一から手作りする「スクラッチ開発」で構築する傾向にあるが、当社では、WordPressを「製品情報CMS」に仕立て、比較的短かい納期で、質の高い製品情報システムを数多く提供してきた。
ここでは、過去の導入事例から「製品情報CMS」で実現した要件や解決できた課題を紹介しよう。

WordPressベースの製品情報CMSとスクラッチ開発

drw-1

当社では、WordPressを製品情報システムのベースとすることで、スクラッチ開発では避けて通れない開発工程の一部を省いてきた。いや、「省いた」のではなく実際には「意識しなくてもよくなった」と表現する方が正しいかもしれない。

その工程とは、
・データベース(テーブル)設計/構築
・管理画面の設計/プログラミング
である。

データベースについてはWordPressの構造をそのまま利用するため、開発の段階においては、データベースの存在を意識することはなく、WordPressに標準装備されている機能を呼び出したり、足らずはプラグインをインストールし、そのプラグインが持つ機能を通じてデータベースを呼び出す形になる。
管理画面についても同様に、ログインユーザー管理はもちろん、プラグインが自動生成する入力フォームを利用し、製品情報の入力画面としている。管理画面については、ほぼノンプログラミングに近い。
これらの工程が省かれることが、工数の削減と、この工程で入り込む不具合の排除に寄与しているといえるだろう。

以降では、WordPressベースで製品情報CMSを構築した過去の事例を紹介しよう。
いずれの事例もWordPress標準のカテゴリーと「Advanced Custom Fields」プラグインを駆使して実現したものだ。

製品ごとに仕様項目が異なる製品情報システム

このクライアントは、特定の業界に対応した製品群を製造販売している企業ではあるものの、製品のカテゴリーごとに全く異なるスペック項目を有している。それらの込み入った内容をHTMLに触れることなく誰でも編集したいというのがクライアントから提示された要件であった。

スペック表のような細かなテーブルは、いろいろな方法でWEBサイトに掲載する方法がある。
例えば、
  ・スペック表の部分だけを抜き出してHTMLファイルで記述し、表示処理で組み込んで掲載する。
  ・テキスト入力欄を1つ設けて、そこにHTMLでテーブルを入力する。
  ・リッチテキストエディタの入力欄を1つ設けて、そこにExcel上で作ったテーブルを張り付ける。
  ・スペック表に則した入力項目を準備し、スペック内容だけを入力する。
などが挙げられる。
いずれの方法も、当社で過去に構築したことのある方法であるが、クライアントのWEBサイト運用スキル(HTML知識の有無など)とコストを鑑みてどの方法を採用するかを決定している。
今回のクライアントは、4つ目の「スペック表に則した入力項目を準備し、スペック内容だけを入力する」方法を採用した。

実はこの製品情報CMSに関するコラムは、既に執筆済みなので、詳しくは以下のページを参照されたい。
WordPressでCMS:仕様項目まで更新可能、運用コストを低減

詳細ページに関連情報を集約する製品情報システム

せっかく製品情報システムを作るのだから、できるだけ多くの情報を掲載したい。
たいていのクライアントが異口同音に発するフレーズだ。
我々もそれに応えるべく知恵を絞り、構築作業に勤しむが、忘れてはいけないことがある。
それは、「初期はもちろん、日々の運用でもそれだけ多くの情報を入力しなければならない」ということだ。

クライアントからも、日々の運用負担を考慮し、以下のような要件が提示された。
  ・Q&A1つを、複数の製品および複数の製品カテゴリーに割り当てたい。
  ・アクセサリー1つを、複数の製品および複数の製品カテゴリーに割り当てたい。
  ・既登録の製品を選択するだけで関連製品を登録したい。

Q&Aとアクセサリーは、ほぼ同じ画面構成で以下のようなイメージで管理画面を準備した。
これによって、同じ内容のQ&Aやアクセサリーの情報を製品ごとに登録する手間が省けてクライアントには好評を得た。

drw-2

関連製品の登録は、以下のようなイメージで管理画面を準備した。
「行を追加する」を押下すれば、ひとつの製品に複数の製品を関連付けが可能だ。

drw-3

複数の切り口から製品にたどり着ける製品情報システム

製品情報システムでありがちなのが、「製品カテゴリー(分類)」に従って製品詳細までたどらせる方法。
この「製品カテゴリー」は、製品を提供する側の都合で体系付けされていて、サイト訪問者にとってはピンとこない場合が多い。
サイト訪問者は往々にして、何かの目的を果たしたい、ある課題を解決したい、などいったニーズをもってWEBサイトにやってくるが、そのとき示される入口の情報が「製品カテゴリー」だけでは、自分のニーズがどの製品で満足されるのか頭の中で変換しながら試行錯誤し、製品を探すことになる。

そこで、このクライアントでは、「製品カテゴリー」とは別に「製品用途」と「対応業種」を追加し、3系統の製品体系を準備し、利便性の向上を図った。

以下のようなイメージで複数体系を登録する管理画面を準備した。
この例では1つの製品情報の中で、製品カテゴリーは1つ、用途と業種は複数を設定可能にしている。

drw-4

WordPressでCMSを構築する際の注意点

drw-5

以上、いろいろとWordPressで構築するCMSの利点や管理画面の作りを紹介してきたが、WordPressが万能だとは決して言っていない。例えば製品情報システムの機能としてありがちな「キーワード全文検索」や「複数条件を組み合わせた絞り込み検索」などは、当社でもスクラッチによる開発で実現し、WordPressを用いたCMSでは構築していない。なぜなら、これらの機能はWordPressでも実現できなくはないが、得意ではないからだ。その理由は、データベースのデータの持ち方に起因する。

スクラッチで開発するような製品情報システムの場合、基本は1製品で1レコードの情報を持つことになるが、WordPressの場合、データ構造に柔軟性を持たせるため、1製品で複数レコードを持つことになってしまう。例えば製品情報の項目が20項目あった場合、20レコード以上のレコードが生成されてしまうことになる。また、他にも付属の情報があった場合、それらは1つのテーブルの中に詰め込まれてしまう。
なぜ1製品の情報を複数レコードに持つことが良くないのか?
データベースを用いてシステムを開発することのある読者ならわかると思うが、製品検索の絞り込みで3つの条件を設定して絞り込む場合、少なくとも3回は、データが格納されているテーブルをフルスキャンすることになる。その上、フルスキャンするテーブルには、製品数の項目数倍のレコード数がある(実際は、さらにその2,3倍は格納されている)。否応なく、検索に時間がかかるし、サーバーにも負荷をかけてしまう。そのため、複数の訪問者が同時に検索をかけた場合、相応に待たせてしまうことにもなる。

したがって、WordPressを製品数が数千点以上になるような製品情報システムのCMSとして用いるには無理がある。せいぜい500点以下に留める方がよいだろう。

WordPressは使いよう

drw-6

人に得手不得手があるように、WordPressにも不得手がある。人と同じようにWordPressの得手をほめて伸ばしてあげるように利用すれば、WordPressはその真価を発揮してくれるのではないだろうか。

筆者が最近構想することに、「WordPressとスクラッチ開発のハイブリッドシステム」がある。
製品情報の管理機能であるバックエンドの部分はWordPressで構築し、WEBサイトから直接アクセスされるフロントエンドの部分はスクラッチ開発で検索機能を構築するのである。そして、WordPressのデータベースとスクラッチ開発のデータベースの間に「本番公開機能」を設けてWEBサイトの情報を更新するのだ。なかなかいいアイデアだと思うが、まだ実現には至っていない。

ダブルチェックでWEBサイトの更新ミスを激減させる方法

突然のことに、驚く少年

日々、あなたのまわりで起こる確認ミス。
しっかりダブルチェックさえしていれば、クライアントから怒られることもなかった。もしこれが大きな事故につながるようなことにつながっていたら。冷や汗が背中を伝う・・・。

企業のWEBサイトは、適切なタイミングで新しい情報を更新してこそ意味がある。それによって、ステイクホルダーに最新の情報を提供するとともに、検索エンジン対策としても有効だ。

しかし、その一方で悩みのタネとなるのが、更新の際に発生するミスである。WEB担当者や制作会社が入念にチェックを行ったつもりでも、なぜかミスは起こってしまう。

「何回言ったら分かるんだ!あれほど気をつけろと言っただろ!」

と叱ってみても、根性論で解決するものではない。人間である以上、誰しも間違いは起こりうる。それならば、それを業務としていかにフォローするシステムを作るかの方が賢明だと筆者は考える。

ダブルチェックが重要であることはよく言われることだが、今回はうっかりミスを防ぎ、ダブルチェックの精度、効果を上げるための方法についてご紹介しよう。

あなたの会社で、ヒヤリハット報告が少なくなることになれば、幸いだ。

ダブルチェックの効果と意味とは?

失敗に顔を隠して後悔する少年

ダブルチェックとは、更新作業を行った人以外の誰かが再度チェックを実施すること。WEBサイトの更新でいえば、制作者本人のチェックだけだと思い違いに気づかなかったり、「ここは間違えるはずがないから」と油断があったりするため、物理的に違う目によって違う視点からチェックすることが非常に大切なのだ。

ただ、肝に銘じておきたいのは、なぜかミスというものは何回チェックしてもその網をするっと抜けてしまう傾向にあるということ。うっかりミスが発覚したときに、みんなが口を揃えて言うのは、

「まさか、そんなところが間違っているとは思わなかった」
「そこまでは気づかなかった・・・」

である。

そうなのだ。神様のいたずらかと思うようなところに、静かにこっそり潜んでいるのがミスなのである。

しかし、公共性が高く企業の信頼性にもつながるWEBサイトは、限りなく100%に近い優等生でなければならない。ミスは許されないわけだ。
それを見つけやすいのは、更新作業をした人よりも、間違いなくダブルチェックする人である。WEBサイトをそんな優等生にするためには、発想を切り替える必要がある。

ダブルチェックは、シングルチェックをなぞることではない。

と認識しておこう。

しつこいようだが、ダブルチェックをする人は独自の視点で責任をもってチェックを行うべきである。日頃の業務から学んだダブルチェックの精度を上げ、重大事故につながるミスを防ぐ鉄則をご紹介しよう。

ダブルチェックの鉄則1:ダブルチェッカーに情報を与えすぎない

ダブルチェッカーに情報を与えすぎない

まず最初に気をつけたいのは、ダブルチェックする人にはできるだけ違う視点から確認してもらうことだ。間違っても「私が今から言うところだけ確認して」などと誘導してはいけない。

作業した本人は、ミスが発生していることに100%気づいていないからダブルチェックに回している。そんな人の言いなりになって漫然とチェックを行っていては、せっかくの労力と時間が無意味なものになる。逆にクライアントから大目玉を食らう可能性さえあるのだ。

ダブルチェックを行う人は、その人の頭で考え、なおかつ「どこかにミスが隠れているかも?」と疑いながら確認を実施すべきだ。チェックシートなど基本的なツールを揃えておくことは言うまでもないが、チェックする人が自由な目と心で、時間に余裕をもって確認できるように段取りしよう。

ダブルチェックの鉄則2:しかし、主旨はしっかり伝えるべき

逆に伝えておくべきことは、どういう目的をもって更新・修正を行ったのかということ。
たとえば、比べてみてほしい。

A:「投資家のお客さまから問い合わせ方法が見つけにくいという要望があったので、目に触れやすいこの場所に電話番号を表示しました」
B:「ここにお問い合わせの電話番号を表示しました。間違いがないかチェックしてください」

どちらの頼み方が、より広い視野でチェックを行うことができるだろうか?

電話番号が間違っていないかについては、どちらも同じようにチェックするだろう。しかし、投資家にとっての窓口なら、投資家に最もよく見られている事業紹介やトップメッセージのページにも目立つように掲載すべきではないのか?もしくは、同じような質問が多いならQ&Aを充実させるべきではないか?という議論も出てくるかもしれない。そこまでいくとダブルチェックの範囲を超えてしまうが、本来はそういった視点で改善したり見直してみたりすることが大切なのだ。

またこの視点は、クライアントが制作会社に依頼する際にも同様。何のためにこの情報発信を行うのか、目的を明確に伝えることで制作内容の濃さも変わってくるはずだ。

ダブルチェックの鉄則3:必ずユーザー目線でチェックする

ユーザー目線でチェックする

ここからは、ダブルチェックする人に気をつけてほしいことをご紹介する。

前述のような優等生の解決策を見つけ出すことはなかなか難しい。しかし、ダブルチェックをする際に、サイト訪問者の視点に立つことができれば、新入社員であっても気づくことはたくさんあるはずだ。

不思議なもので、私たちは自分がお客さまの立場であるときには店員さんのサービスの悪さに目がいくのだが、自分が逆の立場になるとなぜかまったく気づかなくなる。

自分がお客さんだったら、この言い回しで理解できるか?この表現で勘違いしないだろうか?想像力をうんと働かせてチェックしよう。

ダブルチェックの鉄則4:小姑になったつもりでチェックする

そういった視点でチェックをしていくうちに、いろいろな問題が浮き上がってくる。

「ん?ちょっとこれおかしくないか?」
「でも、ここまで言うと重箱の隅を突いてるようで、ワタシ、嫌なヤツと思われちゃうかも・・・?」

と思ってしまったりもする。

しかし、そんな遠慮はまったく必要ない!

嫌なヤツで結構。小姑と言われようが、口うるさい年増と陰口をたたかれようが、せっかくの「気づき」は大切にしよう。手厳しい指摘を受けて、その場では嫌な顔をしていた後輩も、きちんとした理由を伝えれば、おおいに納得してくれるはずだ。

あなたが小姑になることでうっかりミスを防ぎ、会社のビジネスを助けたり、誰かの役に立つことになるのだから。
そんな視点を持てるようになった、あなたのダブルチェック精度はかなり上がったことを意味している。

ダブルチェックの鉄則5:ダブルチェックは午前中に

ダブルチェックは午前中に

ここまで読んでお気づきだろうが、ダブルチェックは責任重大。そんな仕事を任された自分を誇りに思うべきである。その責任を果たすためには、自分が最大のパフォーマンスを上げられる環境でチェックに臨もう。

一番いいのは、午前中の頭が冴えた状態で。もしくは、コーヒーを飲んでひと息つき、心を落ち着かせた状態でダブルチェッカーに変身することをお薦めする。

WEBサイトはビジネスの場。その信頼性を高めるのがダブルチェックだ。

信頼性を高めるのがダブルチェック

すぐれたチェックができる人は、鋭いビジネス感覚にあふれた経験豊富な人だと筆者は思う。
たとえば、同じ魚屋さんでも、顧客満足を大切にいい商品を売りたいと願う店主の店が繁盛するように、ユーザー視点で情報提供できる人、そのための間違いを見つけられる人は成果を出しやすいからだ。

WEBサイトは単なる制作物ではなく、クライアントにとってはビジネスの現場である。
自分が作ったりチェックしたら完了なのではなく、そこからクライアントの何かがスタートする原点だ。だからこそ、ダブルチェックする意味があるのだ。

ダブルチェックをフル活用してミスを減らすことはもちろん、改善の第一歩にもつなげてほしい。

WEBサイトコンテンツ、微調整よりも一日早く公開するが勝ち

WEBサイトコンテンツ、微調整よりも一日早く公開するが勝ち

できる限り早く公開して、反応を見て、改善する。それがWEBサイトコンテンツを公開・運営する鉄則と考えよう。
誤解を承知で言ってしまえば、多少の間違いがあっても後でいくらでも修正できるのが、WEBサイトの良いところ。それなのに、ほとんどのWEB担当者、もしくは上司の方々は、慎重の上に慎重を重ねてから公開したいと考えている。

それが日本人の良いところでもあるのだが、WEBサイト運営(特に、ビジネスに直結するコンテンツ)に関しては命取りになる。石橋を叩いているうちに、橋の存在自体が意味をなさなくなった、という事態にならないよう、発想の切り替えが必要なのだ。

コンテンツの目的は?WEBサイトというメディアを選んだ意味を考えよう

コンテンツの目的は?WEBサイトというメディアを選んだ意味を考えよう

「そんなこと言ったって・・・」と思っているあなた。世の中のスピードはおそろしく早くなっている。要因のひとつとして、ネットですぐに多くの情報を得ることができるようになったことが影響しているはず。

たとえば、月曜日の朝、テレビが壊れたとする。ひと昔前なら、週末までガマンしてやっと土曜日に電気屋さんに行って、店頭に並ぶテレビを見比べて、店員さんの話を聞いて、なんなら2~3軒別の店を回ってから注文。「お届けは3日後の水曜日です」という流れが普通だった。
それが今ではどうだろう。月曜の昼休みには、スマホで人気のモデルをチェックして、amazonでユーザーコメントも見て、価格ドットコムで一番安い店を探して注文。上手くいけば、火曜の夜には家で新しいテレビを観ているといった具合である。
味気ないといえば味気ないし、そんな世の中って・・・と筆者もどこかで思っているが、しかし私たちはそんな時代を生きている。しかも、そこで生き残っていくべきWEBサイト運営を任されている立場なのだ。

そこで重要になってくるのは、何よりもタイミングである。「テレビを買いたい。早く家で代わりのテレビを観たい!」と思っている人の目の前に、希望に添った商品を提供し、買いたくなるムードを盛り上げて、安心して注文できる仕組みを用意しておかなければならない。
そのタイミングを逃すことは、ビジネスチャンスを逃すことを意味している。
B2Bビジネスであっても、基本は同じ。WEBサイト運営のコツは、ニーズに沿ったタイミングを逃さないことである。

まず、担当者本人が、意識を変える必要がある

まず、担当者本人が、意識を変える必要がある

「スピードが重要なことは分かった。でも、どうやって?」だんだんそんな気持ちになってきたら、ここからが大切。
まず、自分の意識を変えることである。
これは筆者の自己反省を踏まえつつだが、物事がうまく進まないとき、ネックになっているのは大抵は自分の意識にある。「やらなくちゃいけない」と分かっていても、心のどこかで無理かも・・・と思っていれば、それは絶対に実現しないのだ。

最初に整理すべきことは

  1. 当社がいま抱えている課題は?(それが本当の問題なのかを検討したうえで)
  2. それを解決するためには、何が必要か?
  3. それに対して、WEBサイトで解決できることは何?どうやって?(WEBサイトでできないことは初めからやらない)
  4. そのためにWEBサイトで最低限、必要な情報は?(全体像を踏まえたうえで考える)
  5. その情報を掲載することで、いつまでに、どんな反応を期待する?(アクセス数、問い合わせ数など)
  6. それが上手くいかなかったら、次の手はどうする?
  7. それが上手くいったら、次は何をする?

上記は、WEBサイト作成にあたってほとんどの担当者が考えるステップだと思うが、「4」のあたりからズレてしまうことが多くはないだろうか?
WEBサイトのあるべき全体像をじっくりと考え過ぎて、もしくは、考えようとして目指す山が高すぎて動きがとれず、時間だけが経過してしまう。そうして3ヵ月、半年と時間が過ぎていくうちに、何も変わらないままという事態を招きかねない。

公開時の完成度50%と100%。最終的に勝つのは、どっちか?

公開時の完成度50%と100%。最終的に勝つのは、どっちか?

不安をあおるつもりはないが、競合他社(仮にB社とする)が違う意識をもっていたらどうだろう。
B社は、4の「そのためにWEBサイトで最低限、必要な情報は?」を早急に決めて、たとえば1ヵ月後に、必要最低限のコンテンツを公開したとする。もちろん、準備期間が少ない分、サービスに関する説明不足はあるだろうし、もしかしたらお問い合わせフォームも未だなかったりするかもしれない。
それでも、内容がターゲットニーズに合っていれば、それなりの反応は出てくるだろう。そして大抵の場合、それはあなたも同じように考えていたアイデアだったりする。

B社は、公開初日からその反応を随時チェックしていて、予想していたよりも反応がなければ、2週間ほどでランディングページのキャッチコピーを少し変更する。その反応をみては、イマイチなら予め考えていた別案のアプローチと切り替えたりもする。日々細かいけれど、微調整をしつつ反応をを見ながら改良を加えていく。

その間、数ヵ月。もしあなたが大きな山を眺めてモンモンとした日々を送っていたとしたら。もしくは、ボリュームの多いコンテンツ制作にとりかかり、デザイン案で上司のチェックがなかなか進まなかったら・・・。最終的に、立派なコンテンツができあがったとしても、その頃にはB社が一歩も二歩もリードしている可能性がある。早く動く人は、得るものも大きいのだ。

スピードを落とさずに、失敗もしたくない人のために

スピードを落とさずに、失敗もしたくない人のために

それでは、どうすればよいのだろうか。ビジネスチャンスを逃したくないが、もちろん責任も重大。最初の一歩をどう踏み出せばよいか分からないという方に、以下にいくつかの対策をご紹介したい。

2案から選べないなら、両方試してみる

たとえば、新商品の打ち出し方がどうしても決まらない。制作会社から2~3案出してもらったが、どれも良いような悪いような。ターゲット層の悩みやニーズは分かっているが、どんなふうにアプローチしたら一番心に響くのだろうか・・・。

それなら、どっちも試してみればいい。正直なところ、どちらが受け入れられるかはやってみないと分からない。どんなに優秀なコンサルタントに相談するよりも、実際にターゲットの反応を見てみるほうが答えは明快だ。慎重に慎重を重ねて時間を費やすくらいなら、どっちも試してみて反応をみて、微調整すればそれで十分である。
そして、それが簡単にできるのがWEBサイトの良いところ。GoogleのA/B分析のようなお試しツールも揃っているのだから、無料で使えるものはどんどん使わせてもらおう。

社内意見をまとめるために、まず小さな成果を出す

そういった工夫をしながら、小さなことでもよいのでまず結果を出すことは、社内で同意してもらうのに役立つ。「お試しで公開してみたところ、こんな反応がありました。それを踏まえて、次の一手はこれをやります」と報告されたら、大抵の上司もGOサインを出しやすくなるはず。
担当者のあなたはもちろんだが、上司の方々はもっと責任を負っているのだから、失敗はできるだけ避けたい。たとえ上手く行かなかったとしても、その理由説明や対策案を用意することが求められている。
最初から大きな成功や完璧な完成を狙いすぎてはいけない。WEBサイト運営の世界では、小さなことでも結果を出して、それを積み上げていく者が最終的に勝つのだから。

公開スケジュールの単位は1ヵ月。段階的に公開しよう

公開スケジュールの単位は1ヵ月。段階的に公開しよう

とにかく公開目標を決めることから始めよう。サイトリニューアルなら、基本的に3ヵ月後。しかし、全部を揃えて3ヵ月後に公開する必要はない。準備ができたところからどんどん公開していけばよいのだ。スケジュールの組み方としては、1ヵ月ごとに区切ってみる。最初にもってくるのは、基本的には優先度の高いコンテンツであるべきだが、前準備に時間がかかるなら、手をつけやすい会社情報などから進めるのもひとつ。

どちらにしても大切なことは、社内担当者やWEB制作会社など関係者全員がこのプロジェクトに集中するように仕向けてしまうことである。プロジェクトが長引いてしまう原因の一つに、時間が空いてしまうと各人がそれを思い出すのに起動時間がかかるということ。みんなその時間が億劫だから、難しい話は後回しにしてしまう。その結果、進みが遅くなるのだ。

大きな山は輪切りにして、優先順位をつける

大きな山は輪切りにして、優先順位をつける

何百ページもある自社WEBサイトのリニューアル。コンセプトは決まったものの、どこから手をつけたらいいのか分からない。目の前の山が高すぎる。
そう感じているのなら、中くらいの山に切り分けていこう。最初の一歩が動きやすくなると同時に、何よりも気持ちがラクになるので是非やっていただきたい。

その方法としては、

  • 現状サイトの課題をリストアップする。自分一人でなく、関係者それぞれの意見も出してもらう
  • それぞれの目指すべき姿と対策案を書き出す。できるだけ具体的に書こう
  • それらの優先順位をつけて、公開目標を立てる
  • それでもまだ漠然としていたら、一つひとつの課題をまた細分化する

「難しい」「できない」「分からない」は禁句にする

「難しい」「できない」「分からない」は禁句にする

最後に、少しだけメンタル面の話をさせていただきたい。プロジェクトを前に進めて、できるだけ早く結果を出すために、最も邪魔になるのが上記の3つのフレーズである。誰かがこれを言い出したら、話が進まなくなるし、みんなのやる気が削がれるのだ。

あなたの過去の経験を思い出してほしい。社会人になってからでも、子どもの頃であっても、チームで物事がとても上手く運んだときというのは、全員の気持ちが一つになっていた時ではないだろうか。メンバー全員が前向きになって、協力体制を組み、力を発揮していたときではないだろうか。
もしあなたがチームリーダーであれば、この雰囲気を大切にしてほしい。何事も成せばなる、である。

WEBサイト更新、特に気をつけたいチェックポイント5つ

WEBサイト更新、特に気をつけたいチェックポイント5つ

たとえば、あなたが旅行に出かけたとしましょう。そこで突然、激しい腹痛におそわれ、近くに小ぎれいな病院を見つけます。
「良かった、先生に診てもらおう」と病院のドアを開けようとしたとき、ドアに書かれている文字にふと目がとまりました。

「誠に勝手ながら、本日は3時より休心とさせていただきます」。
「・・・?休心? いやいや、そこは休診でしょうー」と、ついお腹が痛いのも忘れて突っ込んでしまった、あなた。
なんだか、別の病院を探したい気持ちになりませんか?

企業のWEBサイトも同じこと。いくら美しいデザインと立派なキャッチコピーで飾られていても、漢字の表記一つが間違っているだけでも、信頼性を疑われかねないものです。日常的な情報発信が当たり前となり、ソフトの扱いが簡単になるほど起こりやすい、更新ミス。WEBサイト更新作業を長年続けてきたからこそ分かる、起こりやすいミスの傾向とそのチェックポイントをご紹介します。

数字は「間違ったら死ぬ」つもりでチェックしよう

数字は「間違ったら死ぬ」つもりでチェックしよう

漢字の表記も深刻な問題ではあるものの、100歩譲って間違っていたとしても、その責任であなたの命まで奪われることはありません。でも、企業の存続を揺るがしかねないミスのホームランバッターは、なんといっても「価格」でしょう。一桁間違っていようものなら、大変な騒ぎになるはず。

価格だけでなく、品番、用量、サイズなど、数字の情報は責任の重い内容が多いもの。あまり考え過ぎてしまうと、更新作業がとても気が重くなるかもしれないですが、でも実際それほど重要な仕事をしていることを私たちは自覚しなければいけません。
数字の情報を取り扱う場合は、慎重に慎重に、念には念を入れてチェックすることを心がけましょう。

意外に多い、「段落の最初の一文字」間違い

定型フォーマットのページに多い、ミスの代表格がこれ。段落などの文章のかたまりに、最初の一文字だけ関係ない文字が入っているミス、心当たりありませんか?
なぜ、こういうことが起きるか、HTMLを触ったことのある方ならすぐにピンとくるでしょうが、HTMLの定型フォーマットを使って既存のタグを流用しながら、中の文章だけを書きかえる際に、流用元の文章をちゃんと消していないと、こういう恥ずかしい状態になってしまうのです。

一文字だけとはいえ、文章の最初の文字が意味不明だと、玄関を出ていきなり石につまずくようなもの。なんだか気分が悪い。そんなことにならないように、更新作業後にしっかり見直しをしましょう。

スマホが普及すればするほど、リンクはずれの責任は重い

スマホが普及すればするほど、リンクはずれの責任は重い

リンクはずれは、どこのサイトにもあり得るミスながら、これは本当に痛いミスのひとつ。なぜなら、せっかく閲覧者が興味をもってクリックしてくれたにも関わらず、そこへ誘導できなかったのですから。

WEBサイトの訪問者が何ページ見てくれたか(平均ページ閲覧数)は、サイト運営者が思っているほど多くありません。業種やターゲットにもよりますが、せいぜい3~4P見てもらえたらよいところ。加えて、スマホの普及率が上がるにつれて、PCよりもクリック数はかなり減っているのが現実。リンクはずれはビジネスチャンスを一つ逃すくらいの問題なのです。

メタタグ、本当にちゃんと入っているか?

ブラウザ上では見えないことと、非常に地味な作業であるため、これも忘れられやすいミスの代表選手です。しかし、ページのタイトル情報やページ概要説明などのメタタグは、SEOの観点からいえば、イメージ写真よりキャッチコピーより、何よりも大切な情報です。
余談になりますが、青春時代を雨の多い鳥取県で過ごした当社代表の口癖は「弁当忘れても、傘忘れるな」。常にカバンの中には傘がしのばせてありますが、「キャッチ忘れても、メタタグ忘れるな」。机に貼っておくくらいの気持ちで臨みたいものです。

最後に、社長になったつもりでチェックしよう

社長になったつもりでチェックしよう

チェックポイントは言い出せば切りがないですが、自分のチェック能力をもっと向上させたいなら、目線を変えてみることです。WEBサイトの運営担当者という立場でなく、ぐっと目線を上げて企業トップとして、自分のビジネスが上手く回っていくためのツールとして眺めてみるのです。

社長にとって、新商品が戦略どおりに売れるかどうか、発信したニュースがターゲットの心に響くかどうか・・・は、それこそ自分の人生どころか、社員や社員の家族みんなの生活がかかった大切な問題なのです。そんな視点で捉えてみると、ニュースの更新作業一つであっても、キリッとした気持ちで臨むことができるのではないでしょうか。

ダブルチェックでWEBサイトの更新ミスを激減させる方法

WordPressでCMS:仕様項目まで更新可能、運用コストを低減

WordPressでCMS:仕様項目まで更新可能、運用コストを低減

製品カテゴリーごとに異なるスペック項目を持つ企業は多い。一般的な方法論でCMSを開発すると、スクラッチ(手組み)によるものになることが多く、初期コストは莫大なものとなる。

さらに、製品カテゴリーごとにスペック項目が異なるので、データベースにはすべての仕様項目を格納する必要があり、担当者による運用の手間も相当なものになってしまう。

しかし、WordPressが標準で備える管理画面とデータベース構造を利用すれば、一定の品質を確保しながら開発工数を削減でき、情報の更新も複雑さが緩和され担当者は煩わしさから解放される。

当社では早くからWordPressに着目し、試行錯誤を繰り返しながら積極的にCMSツールとして活用してきた。この記事では、WordPressを使った製品情報セクションの複雑な要求仕様を満たす方法を、有用なプラグインソフトを含めて紹介する。

訪問者により有益な情報を提供したいと考えつつも、開発コストと運用方法を解決できずにいたWEB担当者にとって、課題を解決するためのヒントになれば幸いだ。

カテゴリーごとに異なるスペック項目まで更新できる製品検索システム

製品に幅広いカテゴリーを持つメーカーでは、製品分類ごとに仕様の項目が異なっている。それゆえ、これらを管理するCMSも非常に複雑なものとなってしまいがちだ。

一般的なアプローチとしては、システム構築前に分類/品種/品目ごとにすべてのスペック項目を洗い出し、それぞれにデータベース(テーブル)を準備し、その上で管理することになる。

しかしこの手法では、将来にスペック項目が変更された場合や、当初想定していなかった新製品を掲載する際、柔軟性に欠け、その対応にはシステム的な変更作業が伴うことが多い。

当社では、WordPressのカスタムフィールドとプラグインを駆使することで、スペック項目も含めてクライアント自身で製品情報の更新作業を完結できることを実現した。

某機械メーカーが抱えていた課題

某機械メーカーが抱えていた課題

旧サイトでは、全カテゴリー/全製品のスペック項目を漏れなくデータ項目としていた。更新のためのCMSツールは導入されていたものの、更新作業ではデータがある部分のみ入力を行い、表示処理の段階でデータ表示の有無を制御していたのである。

また、スペック項目すべてを一律に管理画面で更新できるようにCMS化すると、製品情報の管理画面が数スクロール分の長さになってしまったり、更新しようとする製品には関係のない項目も表示されることになり、入力間違いが発生するといったトラブルが生じていた。

さらに、データベースのカラムとしてスペック項目を設定していたため、クライアント側で新製品をリリースする際には、新たにスペック項目の追加が必要となってしまう。都度発生する運用コストも本当に必要なのかという疑問の声さえ社内から聞こえていた。

WordPressデータベースの概念図

要求仕様

上記の状況を踏まえ、クライアント側から提示された要件は以下の通りだ。

  • 製品スペックに詳細な表記が必要(項目名、単位、スペック内容、全10~30項目)
  • カテゴリーごとに異なるスペック項目や単位をCMSで管理できること
  • 同一カテゴリー内においても、スペック内容の有無で項目自体の表示/非表示を制御できること
  • 製品スペックを条件にした製品検索は不要

スペック項目にとらわれない情報の保持

スペック項目にとらわれない情報の保持

スペック項目をデータベースのカラムに設定せず、WordPressのカスタムフィールドを利用することで、項目名や項目数に制限されないデータの保持を実現。スペック項目をCMS上で更新でき、その内容を即時登録可能とした。また、後述の「Advanced Custom Fieldsプラグイン」を採用することにより、柔軟性の高い製品登録画面を実現した。

カテゴリーごとはもちろん、製品ごとに異なるスペック項目をCMS上で自由に管理でき、不必要なスペック項目の排除を実現した。

本稼働後、製品に関するすべての情報をクライアント側でメンテナンスできる仕組み

選択項目(マスター)は、WordPressの「タクソノミー」を利用し、管理画面上で追加/削除を行えるように配慮。製品情報のメンテナンスについては、当社に依頼されることはなく、クライアント自身で完結できるようにした。

現行サイトからのスムーズなデータ移行

旧サイトからのデータ移行に際し、当社とクライアントが共同でカテゴリーに共通的なスペック項目をExcelシートにまとめた。クライアントは、初期移行情報としてそのExcelシートに全製品情報を記述。当社は、そのExcelシートをインポートする機能を構築した。

WordPressの管理画面

使えるカスタムフィールドを実現し、開発コストを削減する「Advanced Custom Fields」

WordPressには、「カスタムフィールド」と呼ばれる、投稿する記事に対してタイトルと本文以外の任意の「名前」と「値」を与えることができる機能が標準で準備されているものの、標準のままでは使えない。

「Advanced Custom Fields」は、管理画面からカスタムフィールドを簡単に定義できたり、入力欄を自動生成したりと、WordPressのカスタムフィールドを利用しやすくしてくれるプラグインだ。

また、入力したデータをデータベースから容易に取り出すことができるAPIを提供してくれているので、クライアントの操作で更新内容を表示することも可能にする。

筆者が「Advanced Custom Fields」を利用し、WordPressで実現した機能は以下のものだ。

  • スペック項目、単位、内容を1セットとして自由に追加/削除/編集する機能
  • Excelファイルのインポート機能
  • スペック項目の順番を自由に調整する機能

自由なカテゴライズを実現する「Custom Post Types」

WordPressに標準で実装されている分類項目は「投稿分類」のみだが、「Custom Post Types」を利用すれば、管理画面上で分類項目の追加や、その項目に含まれる選択項目の編集ができるようになる。

また、前述の「Advanced Custom Fields」と連携させれば、WordPressでより柔軟な管理画面を実現することができる。

「Custom Post Types」は、次の機能を実現するために利用した。

  • 製品分類以外の分類項目2種の追加とその選択項目の編集

WordPress

WordPressは、プラグインを組み合わせると、使い勝手の良いデータ入力ツールとして活用することができる。

さらに工夫を加えれば、プログラムの知識のないクライアント側で自由なデータ管理さえ実現してしまうCMSとして活用できるようにもなってしまうスグレものだ。

今後もWordPressを活用したCMSについて情報を提供していく予定なので、あなたのより良いWEBサイトづくりの参考になれば幸いである。