秋葉原で行われたSEOセミナー。会場いっぱいでした。はい、ごめんください。
前の日にウェブ解析士マスターの講座に出席して東京にいたのですが、a2i の特別セミナーが次の日にあると知って、条件反射的に申し込んで参加してきました。(なのに新幹線指定席を前日分で予約してるとか…)

今回、ブログなどへのレポート掲載は歓迎しますと公式にアナウンスが出ているので、a2i セミナーのレポートをまとめてみました。個人的に面白かったところを自分用にまとめたので、順序が違っていたり抜けてるところもありますのでご容赦を。

すべてに共通するポイントは「SEOはユーザーの満足度を上げるもの」

参考:【受付終了】特別セミナー「ユーザー行動から取り組むSEO」 3/27(水) | アクセス解析の協議会 アクセス解析イニシアチブ
参考:a2iセミナー「ユーザー行動から取り組むSEO」 – Togetter

第1部は Google ウェブマスターツール(以下WTM)の活用方法を具体的に紹介。古川さん(けんすうさん)が戦略論、辻さんが戦術論というイメージでした。
第2部は Google という会社がどんなことを考えてどんなことをやっているのかの紹介、
第3部はキーワードから導くコンテンツの作り方と事例、といったところです。

第1部
「実例で見る Google ウェブマスターツールを活用した ユーザー中心 SEO の取り組み」

大規模サイトの nanapi ならではの話でした。第一線の方の話は、明日から自分たちの実務に生かせるかというとそう簡単にいくものでもないのですが、とても参考になりましたよ。

参考

膨大なキーワードに対しては優先順位をつけて対応

nanapi は日本を代表する大規模なハウツーサイトです。そのため、自然文による流入もあるのだとか。(「チョコをあげたいけど自信がない場合はどうしたら良いか」的な文章で検索される)
流入キーワードは45万くらいあって、さすがにすべてのキーワードについて最適化することができません。そこで、優先順位をつけたわけです。
具体的な説明は辻さんの担当なので順序が違いますが、WMT を活用した CTR 改善シートが参考になりました(後述)。

ユーザーが探しやすく求めやすいように構造を改善

「寂しい」というキーワードで事例が紹介されていました。色々なシチュエーションが考えられるわけですが、それらのシチュエーションごとにしっかりとコンテンツが用意されているのが nanapi です。
元々は7つのカテゴリに分けていたものを、5000のテーマに細分化し構造化したことでユーザーが探しやすくなりました。(でも、メモに5000万って書いてあるんだけど……万…?)

そのテーマの分け方については、決まったフォーマットがないのでどうやって分けるかが大変だったとのことですが、検索キーワード数と本の目次などを調査して作成し、結果、検索エンジンの上位へ表示されるようになったということです。構造の適正化はもちろん、キーワード密度の関係もあるのかな。

そして検索結果が自動的に表示されるものにはせず、整形し、テキストでの説明も入れて、ユーザーが理解しやすいように徹底。ここは自分のメモがやや違和感あるのですが、この部分(検索結果が自動的に表示)のランディングページは、例えば「LINE」というキーワードで Google などからアクセスされた際に、表示されるページは「LINE」のテーマに関する記事がリストアップされているけれども、「一覧」として出すのではなく「テーマのトップページ」として出したことに意義がある、と解釈。

とことんわかりやすいもの=徹底したユーザー視点

検索エンジンで露出した際に表示される内容、ソーシャルメディアで表示される内容、パンくずで表示されるタイトル、スマホで表示される内容・・・これらをすべて手動で設定したことで、すべてのシチュエーションで最適化されました。
(確か以前けんすうさんがブログで言及されていたような)
(これです → ユーザーのためが最強のSEO!nanapiのSEOで何をしているか – nanapi社長日記 @kensuu

ただ、nanapi の目標は意外とシンプルでした。ユーザーを考えてサービスを作るだけ、という。技術的に具体的なところは、下記の3つ。

1)ユーザーの入力したキーワード(=ニーズ)に合ったページを上位に表示する
2)ユーザーの求めている内容だとすぐに分かるようにする
3)ユーザーにクリックされたページは期待を裏切らないものにする

・・・徹底してますね。曰く、「Google は常にユーザーを見ているので、Google を信頼して一緒にユーザー観点で考える。ユーザーに役立つ物を出していれば Google は認めてくれる」とのことです。

もちろん、それが一朝一夕にできるものではなく、完成もありません。だからそのために PDCA サイクルをこまめに回していくことも必要だということでした。辻さんは、サイクルを回せば回すだけ改善していくと言い切っておられました。

ユーザー中心の効果的な SEO 手法

辻さんの講習は戦術的なところが主でしたが、考え方としても非常に参考になりました。そもそも SEO ってどんなことをするのか。その項目と必要なものは下記のとおりです(SEO の知識・能力は必須)。得意なところを集中して行なうのではなく、バランスを取って全体的にやっていくことが必要でしょうね。

  • マークアップやサイト構成等の修正・・・WEB制作の知識
  • サーバ等記述要件の修正・・・プログラミングに関わること?
  • キーワードマーケティング・・・十分なデータ
  • 検索を踏まえたコンテンツ作成・改善・・・サイトの運用スキル
  • リンクで紹介されやすい状態づくり・・・WEB制作・運用スキル

ここで使うデータは、ユーザーのニーズを探り、ウェブサイトへの満足度を高めるヒントになります。SEO のために必要なデータの取得元ですが、よくある現状は以下のとおり。

  • 検索結果(6割)・・・順位とか?
  • アクセス解析データ(3割)・・・GAとかで見るやつですね
  • GWT(1割)・・・活用されてないっ!

これらの割合を、下記のようにしましょう。

  • 検索結果(2割)・・・気にしてばかりいても仕方ない
  • アクセス解析データ(5割)・・・仮説を立ててしっかり検証!
  • GWT(3割)・・・活用することで更にユーザと強く繋がれるツール

SEO はユーザーのため=サービスにエスコートするためのものなので、SEO の指揮をとるのは、できるだけ社内の意思決定をできる人が望ましいということです。小手先の手法に逃げてしまう事のない、軸をしっかり持ってる人ということですね。

WMT から CTR 改善シートを作る!

面白いのが、上位に表示されてもクリックされない場合。これは WMT から CTR を一覧できるので、優先順位の高い(表示回数の多い)キーワード、かつ、CTR が低いキーワードという視点で見つけることができます。

おそらくユーザーが求めているものではないためと推測できるので、キーワードから仮説を立てて、別のページヘ誘導するようにサイトを改善。こうやってこまめに PDCA を回しているようです。
文章にすると簡単そうですが、優先順位があるとはいえ、膨大なデータに対して施策を行なうのは、普通すぐになんとかできるもんじゃないですよ…!いや、みんなやれないと思ってるだけに、やれる人が成果を出すんでしょうね。

WMT を利用するときに注意したい点

  • Google のパーソナライズに注意
    ・・・検索エンジン結果が人によって変わる場合がある
  • 誘導したいページヘ誘導するように操作するのが基本
  • 定期的に目視確認
    ・・・問題があるか(健康管理)、わかりやすく伝えられているか(改善ポイント)

順位に対してどのように取り組んでいるのか?

これは質問に対する辻さんのコメント。
「検索結果で見ることは不要とクライアントさんにも伝えている。順位を気にするより解析を見るべき。一喜一憂するのではなく大きな変化を見ていく心構えで」

第3部の江沢さんの言葉も要チェック。
数字を見るのではなく、使う人を見るということを忘れずに。

第2部
「ウェブ担当者に知ってほしいホワイトハットSEOの基本と誤解しがちなポイント」

スターターガイド。紙だと親しみがわきます。「white hat」ってそもそもどういう語源なのかなとちょっと調べてみたんですが、「正義の味方」くらいしかわかりませんでしたw 逆の「black hat」が「悪役」という。SEO においては悪役というより犯罪者的なイメージなんですけどね。

グーグルのサーチクオリティチーム所属の金谷さんは、Google ウェブマスター向け公式ブログGoogle ウェブマスター向け公式ヘルプフォーラム の中の人。

今回はホワイトハットSEO、つまり基本に則った堅実な(マジメな)SEO についてのお話です。箇条書きでポイントチェック!

【誤解1】ホワイトハットSEOでは上位表示は難しい?

そもそも検索エンジンばかり見て、上位を狙うことだけ考えていたら、上位に表示されることはありません。上位表示は結果であって目的ではない、くらい考えた方が。
むしろ、ホワイトハットの方が上位に上がったら継続できる可能性が高いというメリットがあります。

【誤解2】ホワイトハットSEOだけでは上位表示できない?

ホワイトハットじゃなきゃ何ですかと。ブラックハット?グレーハット?
小手先の技術に頼って上位表示を狙うとか、そんなリスクを犯す必要はないんです。特にブラックハットはスパムと判断されるので絶対にやめましょう。

ホワイトハットSEOで大切なこと

  • アルゴリズムを分析してイタチごっこしていても仕方ない
  • ユーザーにとって価値のあるコンテンツを提供すること
  • Google がクロールしやすいサイトを作ること
  • Google がインデックスしやすいサイトを作ること
  • WMTが発するメッセージをチェックしよう

オフラインでの評判を高めることも重要

たとえば「地域名+歯医者」で上位表示を狙うということは、リアルでもその地域ナンバーワンを目指すくらいでないといけません。狙ったキーワードで上位表示を狙うということは、これだけの覚悟が必要です。
リアルがしょぼかったり、自社の商品・サービスに自身がないのに、「検索エンジンで1位を取れれば売れるんだ!」と考えるのは本末転倒ですよね。

つまりグーグルが評価しているのはコンテンツ。スターターガイドに書いてある項目をしっかりおさえて、クロールやインデックスされやすいサイトを作りましょう。
スターターガイドはPDFとしてダウンロードできるように公開されています。

参考:検索エンジン最適化 スターターガイド(PDF)

グーグルが色々暴露し始めた

参考:
検索の仕組み – 検索サービス – Google(日本語)
How Search Works – The Story – Inside Search – Google(英語)

グーグルが何をやっているのか、というのが網羅されています。英語版はスクロールで色々出てくるので、見てておもしろいかも。

クロールとインデックス
  1. グーグルボットが巡回して、ユーザーが検索する前に行なっている(30兆ページ超え)
  2. ページとページのリンクを経由して新しいページを発見している。もちろん WMT も有効。
  3. クロールしたページを分類してインデックスを作る。
アルゴリズム
  1. テキストだけでなく、画像で画像を検索したり音声サーチもできる
  2. 入力された情報を手がかりにインデックスから関連ページを探す
  3. 200以上あるランキングアルゴリズムで関連性に伴って優先順位をつける
  4. デバイスに最適化されて表示
スパム対策
  1. アルゴリズムによって自動的に処理されているが、一部手動
  2. 大きな変動があった場合はWMTにメッセージを出している
  3. スパムと判断されてしまったら再審査リクエスト(WMTから)すれば掲載

ユーザーのためのコンテンツをコツコツ作って、ユーザーに認められれば Google にも認められ、更にたくさんのユーザーによって支持されて、コンテンツも良い物になっていく。
ユーザー視点はもちろんですが、自分たちが商品やサービスに自信を持つことが前提条件だなと感じました。

第3部
「検索キーワードからユーザーを描く SEO活用の課題とポイント」

アユダンテの江沢さんは「できるSEO・SEM」の著者のひとり。そして真砂さんは田舎者の私でも聞いたことのある靴下屋さん。サイトをすべてリニューアルした際に本格的に SEO を取り入れた時のお話です。

参考

サイトのタイプとSEO施策

大規模サイト(主に総合EC)= サイトの構造改善に注力すべし

  • 商材が多い=ページ数が増える=ロングテールが狙える
  • 【ポイント】構造認識、URLの正規化、類似ページの精査(順序を変えるページや caronical に注意)、リンク構造、品質(オリジナリティ、自動生成に注意)

商材限定型サイト(主にB2B)= 検索キーワード最適化を徹底すべし

  • 商材が少ないのでビッグ〜ミディアムキーワードを狙う必要がある
  • 【ポイント】キーワード、テーマ性のあるサイト構造、カテゴリ設計、コンテンツ作成

サイト改善前・アユダンテさんによる現状分析と問題点

  • 検索エンジン流入は全体の7割と多いが、その半分はリスティング。新規ユーザーの購入率が低い。
  • オーガニック検索がサイト名や社名関連。一般名称での流入を広げたい。
  • 商品ページへの流入が一桁。
施策前の構造
  • 店舗経験から属性でのカテゴリ分けとなっていた。
  • 人気キーワードが下層に入っていた。
  • アイテムが重複して分散してしまう。
  • 女性が検索してもメンズの5本指がヒットする可能性があった
施策後の構造
  • アイテムからサイトを構成した。
  • 店舗と違ってウェブはユーザーがあらゆるところから来店するという考え方
  • 属性から探すのも残したがメインの導線ではない
  • クロスページを自動で作ってしまうとGoogleに嫌われやすい。
  • ユーザの検索ワードに対してどのページを返すか最適化。

有効なキーワードを増やすためにカテゴリを見直そう

  • 商品を分類するアイテムカテゴリを見直してキーワードを増やした
  • カテゴリの重要なポイント
    • CAT1:最重要ワード
    • CAT2:分類名はキーワードにならないのでページは生成しない
    • CAT3:具体的な色々なキーワードを配置
    • エイリアス:別名機能。複数キーワードの対策にあると便利
  • 重要なキーワードは1カテゴリ1ワード。
  • キーワードからカテゴリをつくる。

SEO にとって一番大切なポイントは「ユーザーニーズとキーワード」

SEO は上位表示ではなく「上位表示を使ったマーケティング」。
ユーザーが何を探し、どんな情報を求め、何があれば買うのか = ユーザー中心のSEO

 

3時間半とは思えないくらいのボリュームでした。まとめるのにもだいぶ端折ってます。ということでまとめのまとめ。

1.ユーザーのためのサイトを作って、 Google WMT でポイントを見つけ改善していこう

2.技術に頼らずホワイトハットなコンテンツを作ろう

3.キーワードに注目してサイトを構造化しよう

とても楽しかったです。講師陣の皆さん、事務局の方々、ありがとうございました!

参考書籍

アユダンテの江沢さん(共著)の本。初心者でも読めます。

けんすうさんがご自身のブログでおすすめされていた本。個人的にはペルソナの方が読みたい。

アユダンテさんのスタッフ(でいいのかな?)による本。すでに絶版…だと…?

個人的にお気に入り。また読み返そう。

2013-03-26 21.33.04はい、ごめんください。
ひじり@今年度最後の雪が降ってた雪国のウェブ解析士(笑)です。

東京はあったかいですね!そりゃ桜も咲くわ…。
えきねっとの早割がその電車以外はすべて無効になるのを買ってから気づいて、しまったこれは遅れる…と思ったものの、埼京線が頑張ってくれたのでなんとかなりました。途中、何か壊れてましたが気にしない。

課題試験1:マクロレポートの提出

ウェブ解析士マスター講座の最初の課題試験に、マクロレポートの提出があります。現状分析を踏まえた上で、アクセス解析のデータなどから全体を俯瞰した視点のレポートです。

ゼロからの作成なので、正直なところ、本当にどこから手を付けたらいいやらわからず、しばらく放置してました。たださすがに締め切りが迫るにつれて焦ってきて、上級でやったレポートに準じて書いてみようと手をつけたわけです。

現状分析はどこまで必要なんだろうなあ…マクロレポートっていうし、すっとばしていいものやら??いやでも最低限のことは入れておかないとだろうし…などと悶々としつつ、時間も時間だったので再提出を覚悟し、添削に期待して提出しました。

ウェブ解析士のレポートは量ではなく、質です。といっても、さすがに12ページは少なかったかなあと。キーワードの表とか入っているし、50件で気づきが生まれるなら、100件もいらなかったなあ。必要な部分が出たらそこはコメントで補足しよう。

そして、ネットプリントでカラー印刷したら5,000円以上かかりました…。セブンのおねーさんはすごく親切だったのですが、今度はちょっと考えます…(某Kさんのお言葉に甘えさせていただこう…)

上級 DAY2 のおさらい

2013-03-26 14.05.17実務的な内容が追加された部分もある上級講座の2日目です。1日目は戦略、2日目は戦術を学びます。戦術の内容がより具体的・実践的になったので、これを使いこなすには結構大変です。その分面白そうなんですがね。

マスター講座の1日目を受けて思ったのは、ここで資料に余計な書き込みをすると後で色々書けなくなるので、青字でポイントだけ書くようにしました。

2日目は割とマスター向けで「こういう教え方」的なポイントが多かったように思います。お昼食べたら思考停止して色々ヤバかったのですが(汗)、それらを振り返りつつ DVD をよく聞いて自分のものにしてしまおう。上級の課題フィードバックは大変だけど楽しそうだな!

ウェブ解析士はレポート業務よりも設計業務の方が重要になってくるというのは私も同意で、話を聞けば聞くほど設計の重要性を感じます。もちろん、設計に縛られすぎない柔軟性も大事で、そうなった時の軸は絶対にブレないようにしておかなきゃね。
そこはクライアントさんとしっかり共有しておきたいところ。

オープンセミナーを5月から開催できたらいいな

スケジュールをざっくり決めたんですが、5月6月は長岡・新潟でオープンセミナーを開いたり、色々な会合に出席したりして、認知度アップの期間にしようかと。
7月に初級の統一試験があるので、それに合わせて初級の講座と試験を予定しています。

個人的に、ウェブ解析を実務に活かすには初級の知識だけでは不十分だと強く思っているので、上級に進みやすいような特典とカリキュラムを考えています。
まあ、ネックは費用なんでしょうが、質が質だけにそれほど下げるつもりはありません。それ以外の部分で価値を出せたらいいな。

WordPress 大好きっ子なので、「WP×ウェブ解析」というテーマが一番やりやすいのですが、私はできるだけウェブ解析に比率を置くつもりでいます。
なので、最初はウェブ制作に直接関わっている人達向けのオープンセミナーを予定しています。WP の紹介と初級講座の情報が結構多くなるんではないかと。

もうひとつ、初級と上級の美味しいとこ取りをした、企業の営業担当者向けのセミナーを考えています。
この内容はまだ未定なのですが、今、私自身が感じていることを解決できるような内容にしたいのです。つまり、ホームページをもっと活かしていくぞ!という考え方ができる営業担当者を育てたいのです。

初級じゃ足りないし、上級じゃ突っ込みすぎる。
アクセス解析データをある程度読むことができ、自分たちが自社のホームページを(サイト制作業者任せにせずに)しっかり営業マンとして育てるための戦略と戦術ってところでしょうか。
んー、営業担当者に限る必要もなく、経営層をターゲットにしてもいいのかな。

あとは会場と集客が必要なんですが……がんばろ。NICOとか長岡商工会議所の情報見ておこうかな。ブース出展とかできたら目新しいかな(お金もかかるのでだいぶ先の話)

上級 DAY1 のロールプレイ練習を行ないました

ウェブ解析士マスターは、表示されたスライドを補完するための説明を行わなくてはなりません。スライドは本当にポイントしか載っていないので、受講者がちゃんと理解できるように、自分の中で噛み砕いて教える必要があるわけです。

新しいカリキュラムの上級講座 DVD を聞きながら自分でポイントを出してみましたが、いざ説明するとなると全然言葉が出てこないことに唖然。
そこで次に行ったのが、いわゆるテープ起こし。写経です。これが実は一番効果的でした。いざとなったら読めるし、自分の言葉で言い換えることができるので、安心感が後押ししたのもあってか理解に繋がりました。当日の新幹線の中でも、乗り物酔いにギリギリ耐えながらやってたんですがね。

前に立つと相変わらず固まるけれど、これは経験積んでくしか!本試験の4日目までに DAY2 含めてできるようになっておかないとね。

マクロ分析レポートの評価

事前に提出したマクロレポートの公開処刑評価をいただきました。一番最初に「じゃあ小杉さんのから」って言われた時は、ああ、はい、きっと点数順だなと思ったのは間違いないはずw 迷いがそのまんま出てたレポートだったのですが、おかげでたくさんのアドバイスをいただけて何よりでした。

現状分析にコミュニケーションデザインを追加して(これはミクロに活かそう!)、行動につながる具体的な施策を追加して、根拠となるデータの表現方法を工夫して、次は合格できるようにがんばります。

マクロレポートの一発合格率は 25% くらいだそうですが、今回7人中3人が合格されたので、高かったのかな。そんな合格者を含む他の方のレポートがとても参考になったので、追試のメリットであるイイトコ鳥を呼ぼうかな。どのみち自分の言葉にする必要があるので、方向性が決まっただけでもありがたい。

これからのオシゴトを考える

講師としての業務と、実務としてのウェブ解析業務は、半々くらいが理想です。そうすると、あまりたくさんのクライアントさんを担当することができないので、本気で解決しようと思ってて、かつ、ある程度ワガママをきいてくれるクライアントさんと濃いお付き合いしていきたいところ。

事例を共有させてくれたり、ちゃんと行動してくれたり、新しい技術の施策を取り入れてくれたり、というモニターやパイオニア的なお付き合いを快諾してくれると嬉しいなあというワガママです。
そのためには全幅の信頼を得る必要が有るため、私にとっても試練です。

例えば、施策を打つ際に仮説を立てるわけですが、仮説検証したら、よくわからなかったとか、うまくいかなかったとか、往々にしてあるわけです。すべてが成功するようなら、ウェブ解析士はあっという間にお払い箱ですよ。

それでも、失敗を失敗で終わらせずに、糧として改善サイクルを回していかなくてはなりませんが「失敗したから信用できない」と言われる恐怖心も少なからずあります。
講座でいくら「失敗を恐れずに、必ず仮説を立ててください」「気づきを見つけてください」と言われても、クライアントさんがどう感じるかはまた別の問題でw

もちろん、最初に説明責任はあるので、リスクを双方納得するのが前提です。それが契約書で終わらずに、人間として信じてくれるようなクライアントさんに会うことができたら。

そんなクライアントさんを失望させることのないウェブ解析士を目指して、引き続きマスター講座をがんばります(`・ω・´)ゞ

19. 3月 2013 · 1 comment · Categories: WEB制作 · Tags: , ,

css_sprite_thumbnailはい、ごめんください。

先月から、片手間にココナラでサービスを出品しています。

ウェブ解析とか、WordPress で困ったことのご相談とか、キャッチコピーとか、チビの声とかw おかげさまで、適度なペースでお声がけいただいています。ありがとうございます。

WordPress のご相談とか、解決できるとこちらもスッキリ気持ちいいです。「わかる人ならわかるんだろうなあ…」と悩むことがありましたら、お手伝いさせてくださいな。

さて前置きが長くなりましたが、先日「CSS スプライト」で作るグローバルメニューのご相談を受けました。CSS スプライトを使ったメニューの説明ページは多いのですが、ご依頼の内容をバッチリ解決できる参考ページが見つからなかったので、ちょいとエントリー。

CSS スプライトって?

一枚の画像を背景に設定し、CSS で表示エリアを設定する手法です。画像の任意の位置(X座標とY座標)と幅、高さがわかれば、四角く切り抜くことができます。

要するに CSS で画像の一部を四角く切り抜いて表示する という手法です。

0.CSS スプライトの基本条件

  • マウスオーバーで画像を変えるため、大抵はリンク(アンカータグ)で利用します。
  • リンクはブロック要素(display:block;)(=四角形)にします。
  • 画像は背景(background-image)として使います。
  • 背景画像を表示する位置(background-position)を決めます。
  • 背景画像はリピートして使えません。(background-repeat:no-repeat;)
  • アンカーの :hover で背景画像の位置を変更します。
  • アンカータグ内に入れたテキストは、text-indent か padding で表示しないようにします。

1.どんなデザインでどんな動きにしたいのか想像してみよう

css_sprite1

こんなグローバルメニューがあるとします。
メニューの周りには背景がありますね。HOME はマウスオーバーした時の状況を表します。
つまり普段は、背景が青、文字は白。マウスオーバーで背景が薄い青、文字が青となります。
まずは動きの想定とデザインを把握しておきましょう。

2.メニューの周りに注目しよう

css_sprite2

グローバルメニューの外側には背景(1)があります。
また、グローバルメニューの左右には、マウスオーバーしても変わらない部分の背景(2)があります。

これらの部分は、X軸(横)方向にリピートして使う必要があります。

ん?CSS スプライトはリピートできましたっけ…?(上記0番で確認してみてください)

CSS スプライトはリピートできません。背景は CSS スプライトとは別に考えましょう

ということで、メニューのまわりで使う背景(1)とメニュー用の背景(2)はそれぞれ切り抜くかスライスして、名前をつけて保存しておきます。

左右の端を角丸にするのは、画像を並べてもいいですが、CSS の border-radius で設定したほうがスマートですね。

3.各メニューの大きさを確認しよう

メニューの高さは全て揃うはずですね。幅がすべて同じ場合は、1つだけ分かれば良いです。違う場合は、それぞれの幅をしっかり確認しておきます。

たとえば今回の例ならすべて同じ大きさなので、1つのメニューは130×60(ピクセル)となります。それが4つあるので、メニュー部分は520×60(ピクセル)となりますね。

css_sprite3

4.上段に通常時、下段に :hover 時のメニューを並べます

メニュー部分のみを切り抜き、キャンバスの大きさを調整します(例では 520×60 となります)。

CSS スプライトにハマってしまう人は、メニューの外の背景ごとコピーしてしまうことが多いようです。必ずメニューのみを使ってください。

キャンバスの高さを2倍にして(例では120px)、メニューをコピー(レイヤーやグループ機能を使える場合は、それらを複製すると使いやすいです)して移動し、縦に並べます。

上段が通常時、下段がマウスオーバー時となります。

css_sprite4

黄色の線で示された部分をスライスして4つの画像にしてもいいですが、1つの画像として保存して進めます。(下記サンプルデモ参照)

5.CSS で設定して仕上げよう!

画像の左上を基準に、位置を指定します。

css_sprite5

右上に行くほど数値が大きくなり、左下に行くほど数値が小さくなります。
だから メニュー画像を設定 = 画像を左に移動させる 時は X座標がマイナスになり、hover 時 = 画像を上に移動させる 時は Y座標がマイナスになるのです。

・・・ややこしいですが、CSS を確認してみてください。

画像の切り抜きさえ間違わなければ、CSS スプライトは難しくありません。
今回のサンプルは下記にあります。基本部分しか入れていないのですが、お好きに使ってください。(あとで改良の余地あり)

CSS スプライトサンプル ZIP DEMO

参考サイト

CSSスプライトで画像を円滑に表示させる | Webクリエイターボックス

基本部分がわかりやすく解説されています。私が今回の記事で言いたかったのは、背景は別になるんだよ!という部分だけです。

CSSスプライトについてあれこれ。

スプライトした際の速度検証や、背景に画像を設定してガチャガチャやる一般的な方法以外にも、色々な方法を紹介しています。深く知りたい方は必見。

Webページの表示速度アップに欠かせないCSSスプライトを超簡単に作成してくれるサイト「SpriteMachine」 | OZPAの表4

CSS スプライトのための画像を作ってくれるサイトの紹介。メニュー画像は個別にあるから、全部くっつけたいよという場合に使えます。

はい、ごめんください。
備忘録のためのメモです。

Advanced Custom Fields はカスタムフィールドを柔軟に設定できるプラグインです。
ここでセレクトボックスを使っているのですが、値と表示名を変えているんですね。

apple : りんご
banana : バナナ
chocolate : チョコレート

という状態です。
設定された値で、画像を表示させることが目的でした。

<img src=”./images/apple.gif” alt=”apple” />

という具合に。

選択肢として使われている表示名も欲しいなあ・・・

上記だと、 alt で表示するものも apple や banana になってしまうので、

<img src=”./images/apple.gif” alt=”りんご” />

と、表示名の値を取得したいところです。

Advanced Custom Fields のセレクトボックスの、ここ!

ですが Advanced Custom Fields の利用方法は値と表示名が同じ場合が前提となっている記事が多いので、なかなか方法が見つかりませんでした。

なら、直接データベース覗いちゃえばいんじゃね?

何処かに格納されているはずなのでデータベースを見てみたところ、フィールド番号で格納されていました。
このフィールド番号を確認する一番簡単な方法は、Chrome などの開発者用ツールで該当する入力欄の id を確認すると良いです。

acf-field_1_label という id が設定されている場合、下記の方法で実現できます。

ポイントは get_field_object で該当フィールドのデータを取得するところですね。

素敵なWPライフを~

ウェブ解析士マスター講座カリキュラムはい、ごめんください。
ひじり@雪国のウェブ解析士(笑)です。ここ数日は暖かくなってきて雪解けの予感。マスター講座を受けての感想やら雑記やらを忘れないうちに書き連ねます。

昨年12月には上級ウェブ解析士の資格を取得し、ウェブマーケティングの知識を得ることができました。上級ウェブ解析士は、ウェブマーケティングをしていたり、ホームページ制作の営業で提案の幅を広げたい方には最適の資格だと思います。

これは個人的な所感ですが、ウェブデザインをやっている方は、ウェブマーケティングのことをあまり知らないのでは。特に、デザインの勉強をしてきた方は芸術家になってしまいやすいなと。そうすると制作側やクライアント側の「好み」で作ってしまう傾向が出てきてしまいます。

企業が持つホームページは見た目のきれいさ以上に、ビジネスに直結していなければなりません。だからウェブマーケティングを学ぶことができればクライアントさんともユーザーさんとも共通認識が生まれ、デザインの設計にもつながります。

上級ウェブ解析士は、提案のための大事なところを効率よく学ぶことができるのが大きいですね。(だからウェブ制作会社の営業さんにぜひ取得してほしい資格です)

ウェブ解析士は、アクセス数を増やすことでも、リピーターを増やすことでもありません。成果を出すために仮設を立て、データを検証・分析し、クライアントさんの行動を促す提案をすることこそが本分です。(「仮説検証原因分析対策立案」ってほとんどお経だw)

今は上級ウェブ解析士兼ウェブディレクターとして仕事してます

冬に上級をとって以来、理想論はいくらでも言えたし、GA を見る機会には恵まれていたけれど、先にも挙げた成果につながる提案をできているかと言われれば、正直なところ NO でした。

かなり自信のある提案は行ないました。これやれば PV も回遊率も滞在時間も絶!対!伸びる!と確信していた提案でしたが、施策(行動)につながらなかったりして。双方で KPI をちゃんと考えていなくて、ヒアリングはしたものの、こちらからの一方的な提案が強すぎたせいかなと反省。

コンサルタントと言っても、ウェブ解析士としてはやはり一緒に作り上げて行きたいもの。そこにはクライアントさんの当事者意識が不可欠です。何とかしたいと思っている方ほどコンサルのしがいがありますが、危機意識の低いクライアントさん(≒「ホームページをキレイにしたい」という要望が一番にある方)は喚起する必要があります。もったいない!

あとは、「じゃあこの数字ちょっと見せて」と言われて目的を聞き、一番いいと思われる数値を出したりとか。
でもこれは、単なるレポート屋になっているだけなんですよね。喜ばれるものの「じゃああとはこっちで検討するから」と言われて終わりでは意味がありません。そこから先にも踏み入って、ウェブにも役割を与えて成果を出すことが重要なのにもったいない!

そして頭を抱えてしまうのが、手段が目的になっている場合。
「スマホ化したい」「管理しやすくしたい」という要望。クライアントさん側の事情はわかるんですが、ユーザーに対する意識が欠けている・・・

スマホ化したら何を期待してます? 何を目的に管理しやすくするんです?
そうするとユーザーさんはどうなります? 成果に繋がってます?

あと一歩踏み込んでそんな話をしたいのですが、案件がまわって来るときには工数や費用、デザインの話だけ・・・要するに設計が蔑ろにされてしまう。ホームページを持つメリットの半分は捨てているといっても過言ではありません。もったいない!

そんなもったいない!に対処すべく、マスターを取ることにしました

商売(サービス)を続けているということは、そこに価値を見出している人がいるわけです。ウェブを使ってその価値を知ってもらい、対価としてお金をいただくことが、主に最終的なゴールになりますね。(業種や目的によっては違う場合もありますが)

なのに、サービス提供側のクライアントさん自身が、自分たちのサービスをうまく伝えられないのが一番の問題だと肌で感じています。買ってみればわかる、経験してみればわかる・・・これじゃ、実物を手にとることができないウェブでは致命的です。

それじゃ駄目なんだ!と言うのは簡単ですが、それでは上記のクライアントさんと何も変わりません。外に理由を求めても仕方ありません。ユーザーさんのことをよく考えるのは、ウェブ解析士だって一緒です。だから私はコンサルティング能力を実戦でつけるために、マスターを受講することにしました。

てなわけで、この時はまだ初級や上級の講師としてマスターを取ろうという気持ちはほとんどありませんでした。

MAXとき2階建て。とくダ値万歳!新潟から東京方面へ・迷子再び

ウェブ解析士関係で東京に行くのは3度目になります。会場が違うと毎回迷います。方向音痴スキルが発動しますが、雨に降られたことがないというのは奇跡?

お決まりのように新宿駅で迷い、会場へ行くにも迷い(徒歩○分って、そんなに早く着かないYO!都会の人は武空術でも使えるの?)、ギリギリになって到着しました。

帰りも少し気を抜けばすぐ迷ってしまい、呆然としたり冷や汗かいたりしながらも、なんとかその日のうちには帰ってこれました。次は大丈夫!たぶん!

マスター講座、1日目

今回の受講生は8名。お一人は欠席だったので、7名で受講することに。

参考:ウェブ解析士認定講座・検定 | 初級・上級・マスター3つの資格を用意: ウェブ解析士マスター認定講座

まずは概要説明。
講座の流れや試験の説明を受けます。
再試験を受けられますという説明から、一発合格者がまずいないということを知る・・・。
そして個人の力だけでは合格は無理だと。受講者みんながチームでがんばらないと受からないよ、という話をさらっといただきました(゚д゚)

そして自己紹介。でも、ただの自己紹介ではありません。講師としての自分のプレゼンです。
仲間への自己紹介と生徒への自己紹介とでは色々異なってきます。自分をプレゼンするのってやってて損はないと思うので、前に立つのが苦手な人は、考えられるターゲットに向けての自己プレゼンを何回もやっておくといいかも。と、やや現実逃避した思考で臨みました。

私はこうやってブログを書いているうえ、遠方からの参加、そして雪国のウェブ解析士とか肩書きを作っているので、印象に残してもらうための手段は割と簡単に用意できました。ただしコミュ障なのでもうガクガクブルブル・・・
終わったあとはそれぞれの長所と改善点を上げてもらいました。他の方の自己紹介も参考になります。声の大きさ、速さって大事ですよね。

そして、上級講座の内容へ

上級の内容を復習するも、改版期なので内容が違う!いや、変わってないところもあるけれど・・・改めて聞くと、色々忘れてるなあと思い知らされます。KPI の設定とか。やっぱりここまでしなきゃならんなとか。プロのウェブ解析士として食っていくってそういうこと。
休憩を含みつつ数時間かけて1日目の講座内容をひと通り説明を受けた(復習した)ところで、各自が講師となってロールプレイ。1・2ページを担当し、担当した人が次の人に担当箇所を指定するという方法で進めました。

ちなみに私の当たったところはスライドを触る必要のない1ページのみでしたが、ほとんど内容を読みあげただけ・・・orz
自分の中で消化して、噛み砕いたものを話すという難しさを知りました。おかげで理解が深まりました。
他の方のロールプレイはすごく参考になるところが多くて、おおーっ!おおーっ!と叫んでいました。心で。いや心の声漏れてたけど。

出された課題は、上級でやった課題の実践版。数字が当てはめられているわけではなく、自分で(チームで)考えなければいけません。ただ、正直なところ施策を続けているところをこれ以上伸ばすとか、難しい・・・。

私は数字は未だに苦手なので(苦手意識を克服しなきゃとは思っているけれど)、KPIを具体化して、そこから伸ばしていける部分を見つけられたらいいなあと思っています。数字見てるだけでは見えてこないところってあると思うんですよね。
タイムリミットが決められている上、そうそう時間をかけてもいられないので、悠長に構えてもいられないのですが。

あとは、初級〜上級講師をすることがマスター認定の条件でもあるので、新潟で開催する予定です。ブログやツイッター、FBで宣伝し、申し込みフォーム用意しますので、新潟近辺の人は是非お申し込みくださいませー!(できれば長岡でやりたいなあ・・・)
余裕があれば、新潟プレゼン研究会で、オープンセミナーの内容をプレゼンしてみたいなあとも。

事例で学ぶウェブ解析【SOHO物件検索サイトの巻】に飛び入り参加!

何があってもいいように新幹線は遅いものを予約していた(実は終電だったことを乗る直前に知った)んですが、講習が終わって事例で学ぶ〜に空きが出たということで、急遽飛び入り参加してきました。

参考:事例で学ぶウェブ解析【SOHO物件検索サイトの巻】 – ウェブ解析勉強会

指をくわえて憧れていた講座だったので、このチャンスは逃す訳にはいかない!と思ったのです。会場がやや離れていたので、案の定迷いに迷ってようやく着いたのですが、ね・・・。

事前にサイトの目的や過去の施策などから Google アナリティクスで解析状況を確認、提案事項をまとめておき、クライアントさんのところでヒアリングを行ない、10分で資料をまとめ(調整して)、5分以内で提案する、というものです。

このテンポの良さがすごく魅力的でした。改善提案も決められた資料があるわけではなく、各自が得意な部分や気になったところを各々の手法で提案するというのも手軽ですね。何より、それぞれ違う視点で改善案が出されるので、私個人としてもそういう見方があったか!!と目から鱗がボロボロ落ちました。色々な方の提案を聞くと、とても参考になりますね。

今回は(いつも?)ある程度アクセス解析をご存知の方がお相手だったので、提案の意思疎通がとても良かったように思いました。

同じようなことを上級〜マスターの方を対象にオンラインでできたら楽しいだろうなあと思っていたので、とても参考になりました。その場でヒアリングして提案する方が資料を作りやすい、伝わりやすい、秘密共有にもなる、と、とても融通がきくのですが、遠方だとそういうわけにもいきませんから。
フェイスチャットしながらでもいいかなあとか。テストをするにしても、マスター試験が落ち着いてからですがね。

そうそう、初級テキストも改版されました。今の状況により合わせられているので、手に入れてない方はオススメですよ!


まったく新しいWEBサイトのユーザビリティ調査ツール – GhostRec.jp

登録~利用開始までは若干時間がかかります

登録は、メールアドレスを検証したいサイトを入力して、届いたメールを確認します。メールマガジンの登録のような気軽さですが、登録しても瞬時にメールが届くわけではありません。

「あれ?来ない?」とちょっと焦りますが、数分で「アカウント作成リクエストを承りました。」というメールが到着します。お申し込み受付フォームへと案内されますが、ここで入力する項目が結構多い。

会社名、部署名、担当者名、メール、電話番号、FAX番号、住所、有料オプション(使わなくてもOK)、備考欄・・・と、利用規約(PDF) を確認してサービスを申し込みます。

すると、「内容を確認するからちょっと待っててね、もしかしたら使えないかもしれないよ」的な申込受理のメールが自動返信されます。

だいぶ時間かかるのかなあ…と思っていたら、5分後くらいに「アカウントを有効化してください」というメールが届きました。画面に従ってアカウントの有効化を行なうと、ようこそメールが届きます。これで使えるようになりました。やったね!

一度登録すると、アカウントとログインIDを無制限に設定できます

(5)アカウント
本サービス利用契約者であるカスタマーは、管理画面にログインし自社の社員等に任意で本サービスの利用権限を付与したアカウントを発行できます。アカウント所有者は、自身の持つアカウント権限において、不特定手数のテスターにログインIDを設定することができます。

(6)ログインID
ログインIDとは、リモート型のユーザビリティ調査を実施する一人ひとりのテスターの登録IDのことで、本サービスカスタマーは、無制限にログインIDを設定できます。

以上、利用規約より抜粋。

ghostrec

アカウントは、主に上記で登録した担当者が管理するものです。GhostRec のプロジェクトを管理したり、ログイン ID を発行してテスター(被験者)を登録したり、追加 RecPV を購入したりすることができます。

ログイン ID は、アカウント所有者、プロジェクト管理、閲覧者の各アクセス権限を有します。このアクセス権限によってできることが異なってくるわけですね。ログイン ID の発行は、メールアドレスとパスワード、アクセス権限の設定のみです。

初回登録時に 100RecPV 分を無料で使えます

GhostRec は訪問者のマウスポインタの移動(追跡)とページのスクロール、ページ遷移の状況を録画して動画で確認できるツールです。1人の訪問者の1ページ分の録画= 1RecPV となります。ある訪問者が2ページ閲覧したものを録画したら 2RecPV になります。訪問者数に限らず、録画したページで計算されるわけですね。

実際にアクセスした画面を録画しているので、スマートフォンや高解像度のモニタなど、環境による表示の違いが見て取れます。Youtube のような動画ではなくて、HTML ベースでキャッシュを取ったところにポインタの動きを再現しているようですね。

ただし、5秒以内で終わってしまう動画が非常に多く、また録画時間が長くてもマウスポインタが動かない時間もある(タブとして開いていた時間が長かっただけ?)ので、わかりやすいデータが取れるのは半分以下となるでしょう。いかにも直帰、というものが無駄になってしまいます。これはこれで有効なデータとして考えたほうがいいのかは、GAなどと組み合わせて検証する必要がありそうです。

2種類のユーザビリティ調査を簡単に行うことができます

まずはプロジェクトを作成するため、プロジェクトタイプを選択します。

クイックユーザビリティ調査

玉石混交の情報ですが、不特定多数の一般的な利用状況を知りたい時に有効です。

発行された Javascript を埋め込むと、アクセスしてきた訪問者が実際に使っている様子を自動的に録画して、あとから確認できます。録画されるのはマウスカーソルとページのスクロール、ページ遷移のみなので、基本的に個人情報は入りません。また、マウストラッキングの情報が集まったページについては、ヒートマップも確認できます。

注意したいのは、すべてのページに対して javascript を埋め込んでしまうと、取得されるページがバラけてしまう上、わかりやすいデータが取れるのはごくわずかになってしまう(=ヒートマップも生成できない)ので、最初は特定のページ(トップページ等)に絞ることをオススメします。

ちなみにこのブログの場合、全ページに埋め込んだら、5時間で 100RecPV を使い果たしてしまいました・・・。

タスク型ユーザビリティ調査

被験者(テスター)を募る必要がありますが、確実に動線を検証したい時に有効です。

テスターとなる人にログイン ID を発行し、たとえば「本社の電話番号を見つけてください」とか「○日の宿泊予約を完了してください」「商品を見つけてお問い合わせしてください」など、想定する動線に基づくタスクを与え、それを遂行してもらう方法です。
ターゲットユーザー層をテスターにすることで「どこで迷うのかな?」という改善ポイントを見つけることができます。

クイックユーザビリティ調査と異なり被験者を集める必要はありますが、 テスターのログインID付与は簡単な上に無制限なので、それほど敷居は高くないでしょう。

最初の 100RecPV を有効活用したいなら、こちらをオススメします。やはり何のために追跡するのか?が大事ですよね。ご利用は計画的に。

有料で使うならいくらかかる?

1 RecPV あたりの金額は、まとめ買いで割り引きされます。

  • 5,000 RecPV まで 20円
  • 15,000 RecPV まで 16円
  • 15,001 RecPV 以上 12円

例えばタスク型で5ページ程度の回遊を想定して、10人のユーザーに依頼するとしたら、

5ページ × 10人 = 50RecPV = 1,000円 となります。

想定外の操作をすることも考慮すると、想定アクセスページ数から予算と人数を調整したほうが良いですね。

実際どんな動画を見れるの?

動画は個別に共有用リンクを生成することができます。わかりやすいサンプルをご紹介。

録画日時:12/27 15:42 録画開始URL:mekemoke.jp/tag/jqm
録画時間:0 分 35 秒(3 ページ) 環境:Japan/FF17.0/Windows
http://play.ghostrec.jp/share/19216-bd1a163442ccc455c26efb0011da59ca04dd1107

録画日時:12/27 14:17 録画開始URL:mekemoke.jp/2012/12/733.html
録画時間:1 分 8 秒(5 ページ) 環境:Japan/FF17.0/Apple
http://play.ghostrec.jp/share/19183-1c1741b8d24155950d6e20164e3feca418b04ebe

録画日時:12/27 14:53 録画開始URL:mekemoke.jp/
録画時間:279 分 37 秒(2 ページ) 環境:Japan/iPhone6.0
http://play.ghostrec.jp/share/19197-bc920a23baa9058564fff26ec3f4d32e136c754b

これらから何がわかるかというと。

  • たくさんのページを読んでくれてありがとう!(・∀・)
  • jQuery Mobile の記事人気だな、ソースをコピペできるようにしとくのはいいな。
  • iPhoneで読まれるとこういう画面になるんだな〜

・・・くらいしかないのですorz
今回の場合、残念な使い方の典型です。目的なく「使ってみた」はやめようというお話。
ユーザビリティ調査ツールは、仮説を立てた上で検証するために利用しましょう。ご利用は計画的に。(二度目)