14. 5月 2013 · 1 comment · Categories: WEB制作 · Tags: ,

ペンギン。はい、ごめんください。
半徹夜状態でSEOの大先生方のやり取りを見てて、wktkしてたので、勢いで記事を書きました。

米Google Matt Cutts、Google 検索アルゴリズムの変更計画の詳細を語る::SEM R (#SEMR)

今後行われるグーグルの検索アルゴリズムの大きな変更(ペンギン・アップデート)は、主に「スパムサイトを駆逐するよ」的な害虫駆除のような印象が強かったので、まあ別に驚くこともないかなと思っていました。

ただ、ユーザーとしていつもの検索画面が変わる部分があったので、メモ。

図らずして記事広告になっていないか見なおそう

記事広告のことをアドバトリアルって言うんですね。ラジオCMでは一般的だなあと思ったので、ちょっとネットとのギャップを感じました。
要するに「ステマ記事」がコレに該当するのでは?と思いまして。その辺ロックオンされたら大変じゃないの?それに近いことをやっている場合も注意しておくことにこしたことはありません。好意で書いた紹介記事がステマと思われたら…困りますね。

ただ、このアドバトリアルの排除は、メディアがメディアとしての健全性を保つためというのが主目的のようなので、一般サイトにも影響すると断定はできません。

それでも対処方法を知って先に手を打っておくことができるなら、それに越したことはないと。

  • PageRank を渡さないようにする(アンカータグに rel=”nofollow” を入れる)
  • 訪問者にそれが広告であることを明示する

この2点に注意しましょう。
ページランクを渡さないようにするというのは、高い方から低い方へ流れる影響が強いので、逆だとあまり意味ないんじゃないかとも。大手メディアが「SEOに効果ある記事を書いてやるから金出しな」ってのを止める目的のようですね。

検索結果の1ページ目に”多様性”を持たせる

これが個人的に一番影響が大きと感じた内容でした。

検索者としては色々なページが見れるのが嬉しく、制作側としては「ああ、もう使えないよね、やっぱりね」というのが正直な感想です。
検索結果の1ページ目に、同じサイト内のページをたくさん表示できるようにすることで、閲覧者に訴求しやすくなっていたのが、基本的には1サイト1枠で、あとはまとめられるようです。
現在のフォーラムの検索結果みたいなものかな?と勝手に推測。

検索結果はフォーラムのようにまとまる?

オーソリティーサイトのことについても記載がありましたが、あくまで「個人的に注意したい」点は以上の2つです。

まあ要するに自分達のサービスや商品に自信がなければ、小手先のことやったって自滅するような時代です。もっと自信を持って地道に改善していくのが一番で、「急がばまわれ」って話です。
即効性を求めてお金を払う余裕があるなら、ランディングページ作ってリスティング広告に力を入れたほうが良いですね。

inkscapeはい、ごめんください。
このブログは備忘録として使っているのですが、情報を発信するためのサイトを別途作成中です。そのためのロゴやらイラストやら作るためには、やっぱりベクタデータが扱いやすいんですよね。

でも、Adobe Illustrator は高くて手が出ない!という時に便利なのが、Inkscape。
イラレに慣れてしまうと若干使い勝手が違うので戸惑ってしまいますが、無料のソフトかつUSBにも入れて持ち運べるポータブル版もあるので、ちょっと作りたい時にオススメです。

Inkscape Portable(Windows版)をダウンロードしてみた

Inkscape 公式サイト
Inkscape 公式サイト(ダウンロードページ)

Windows 7/Vista/XP の portable というところからダウンロードして、インストール先をUSBなどにすると良いです。個人的にはレジストリを汚さないのが嬉しい。

is_install01

インストールする際に多言語オプションを求められますが、上図のようにチェックを入れておけば環境設定から日本語を選ぶことができます(2013年4月30日現在、ver 0.48.4)。

Inkscape の日本語化は設定してソフトを再起動するだけ

InkscapePortable.exe をダブルクリックすれば起動しますので、File -> Inkscape Preferences… (Shift+Ctrl+P) を開きます。

is_install02

左側から Interface を選び(下から4つめくらい)、右側の画面で Language を Japanese (ja) にします。あとはこの設定画面と Inkscape のウインドウをすべて閉じ、再度 Inkscape を起動してください。

Inkscape でいつも戸惑うのは、OK とか適用のボタンがないところなんですよね…(選んだ時点で適用されます)

Inkscape の日本語フォントを変更するよ

Inkscape を再起動して、日本語になったと喜んだのも束の間、インターフェイスのフォントが汚い!設定を弄る方法としては2通りあります。

インターフェイスの設定ファイルを変更する方法

1つめは、インターフェイスの設定ファイルを変更する方法。書体以外にも文字の大きさを変えたい場合にオススメです。

Inkscape の インストールフォルダ内の App\Inkscape\etc\gtk-2.0 を開きます。その中に gtkrc という拡張子なしのファイルがあるので、それをテキストエディタで開きます。

一番最後に、下記を追加してください。今回はメイリオ、8pt を指定しています。フォント名のあとの数字がフォントの大きさになります。8はやや小さめ。また、「MS UI Gothic」や「MS PGothic」も指定できますが、Windows7 ならメイリオで良いかと。

上書き保存したら Inkscape を再起動して、メニューのフォントが変わっていることを確認してください。

is_install06

書体の定義を変える方法

参考:InkscapeのUIフォントを直す – Weblog – hail2u.net

2つめは、フォントの定義を変える方法です。「sans」という枠にフォントの候補を設定します。CSS で言う font-family の指定に似ていますね。

Inkscape の インストールフォルダ内の App\Inkscape\etc\pango を開きます。その中に pango.aliases というファイルがありますので、テキストエディタで開きます。

に変更して保存、Inkscape を再起動してください。sans に segoe ui と meiryo を追加しただけです。

is_install05

英文フォントして segoe ui が優先され、日本語フォントはメイリオになります。メニューのショートカットのフォントで違いがよくわかるかと。

どちらもそんなに難しくはないので、お好きな設定をお選びください。ちなみに、両方やっても1つめの設定ファイルの方が優先されます。

それでは、素敵な Inkscape ライフを(^ω^)

秋葉原で行われた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.キーワードに注目してサイトを構造化しよう

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

参考書籍

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

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

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

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

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ライフを~

heart_hand今日は雑記。
SEOのホワイトハットジャパン様の記事はちょっと前からしみじみ拝読しているような状態でしたが、すごく心に刺さって仕事の仕方を改めて改めるきっかけにもなったのでご紹介。

住太陽氏のセミナー「Webクリエイターに足りない、本当のSEOスキル」の感想 | amplifizr, Vol. 5

こんな素敵なセミナーが開催されてるなんて……まだまだ知らないことが多すぎる……と自分の無知加減に凹みつつ、感想だけでもすごくすごくためになりました。ありがとうございます!ありがとうございます!

私自身、SEO はコンテンツを充実させるのが一番だ、という考えは常日頃あります。

ただ、技術的に改善できるところを基本 SEO として提供しているので、それ以上のことを突っ込まなかったのも確か。デザインやコーディングなどの制作がメインになると、そのうちスケジュールに追われてしまう=ちょっと次も無理かもしれないと諦めてしまうサイクルができていたんですね。

SEO の知識はあっても専門でやっているわけではなく、競合するお客様が少ない業種を扱っていたので、順位がどうとか増減がどうしたとかはほとんど気にすることがなく、クライアントもそこまで本気で求めていない(=価値を見いだせない=お金を出さない)という状況でした。

でもウェブ解析を学ぶうち、このままじゃいけないというか、突出するなら今がチャンス、という考えを持つようになり、コンテンツはお客様目線であるべき、というところまでは来ていました。

そこで今回拝見した記事。個人的に琴線に触れたところを引用&メモ。

  • 売りたいものを並べるのではなく、検索者が求める情報を載せることが必要
  • 検索エンジンにアプローチするのではなく、検索者に対するアプローチこそが SEO
  • 技術とは検索エンジンについて考えること。検索者のことを考えるのが SEO で、 SEO は技術ではない
  • 検索者が訪れる用事を作る = SEO
  • SEO 実施者のマインド
    • 訪問者を最大限にもてなし満足を提供することは人様に見せる以上当然
    • コンテンツの質や量にはその分野のプロとしてのプライドがかかっている
    • 検索結果に表示されるどのページよりも正確で詳しく丁寧でないと恥
  • その分野の専門家でないと、優れたコンテンツは作れない
  • 「うちのサービスは」ではなく、「あなたの問題を解決するには」という作りにすべき
  • スクリーンの向こうにいるのは数字ではなく人間だ
  • オーソリティになれ

SEO=技術ではなく検索「者」のことを考えること というのが突き刺さりました。
だから「Search Engine Optimization」ではなく「Search Experience Optimization」であるべきなんだなと。
これをグーグル先生に尋ねたら、すでに英語圏のブログがいくつもあったw 中には SXO と呼称しているところもあったり。UX が UE ではないのと同じことですな。

SEO にしてもマーケティングにしても、小手先のことだけでは通じなくなる世の中になりつつあるのが実感できます。

最近見た動画の影響もあって、安い商品ほどクレームがつきやすく、高い商品は価値を知っている・納得している人が買うからクレームはつきにくい、ついても建設的な要望が多い、というのを思い出しました。

安ければ売れるという時代から抜け出し、ちゃんとした価値のあるものを適正な価格で提供することで、更に価値あるものを提供できる、そんなサイクルに乗りたいです。
そのためには、自分が「本当のプロ」にならなければならないなと。狭くても深く。広げるのは同じような仲間を増やしてその人に頼ればいいし頼られるといい。

そう云う者に、私はなりたい。

WordPress LOGOはい、ごめんください。

wp_is_mobile は 3.4 移行から使える、モバイルからのアクセスを判別する便利な関数です。
例えばスマホ用に見せたい物がある場合や、表示を変更したい場合に、下記のように使えます。

wp_is_mobile のモバイル判別方法

wp-includes/vars.php の 101 行目で、下記のようなコードがあります。

つまり、ユーザーエージェントに下記の文言が含まれていると、モバイルと判断されます。

Mobile, Android, Silk/, Kindle, BlackBerry, Opera Mini, Opera Mobi

WP Super Cache のモバイル判別方法

そしてキャッシュ機能として有名なプラグイン、WP Super Cache 。
これはモバイルにも対応していて、モバイルからのアクセスがあった場合にはキャッシュしないという機能があります。

下記がモバイルと判断されるユーザーエージェントのリスト。これらが含まれていると「モバイルからのアクセスだ」と判断されます。(2013.2.15 ver1.2)

2.0 MMP, 240×320, 400X240, AvantGo, BlackBerry, Blazer, Cellphone, Danger, DoCoMo, Elaine/3.0, EudoraWeb, Googlebot-Mobile, hiptop, IEMobile, KYOCERA/WX310K, LG/U990, MIDP-2., MMEF20, MOT-V, NetFront, Newt, Nintendo Wii, Nitro, Nokia, Opera Mini, Palm, PlayStation Portable, portalmmm, Proxinet, ProxiNet, SHARP-TQ-GX10, SHG-i900, Small, SonyEricsson, Symbian OS, SymbianOS, TS21i-10, UP.Browser, UP.Link, webOS, Windows CE, WinWAP, YahooSeeker/M1A1-R2D2, iPhone, iPod, Android, BlackBerry9530, LG-TU915 Obigo, LGE VX, webOS, Nokia5800

同じく下記も設定されていますが、接続ネットワークでも見てるのかな?

w3c , w3c-, acs-, alav, alca, amoi, audi, avan, benq, bird, blac, blaz, brew, cell, cldc, cmd-, dang, doco, eric, hipt, htc_, inno, ipaq, ipod, jigs, kddi, keji, leno, lg-c, lg-d, lg-g, lge-, lg/u, maui, maxo, midp, mits, mmef, mobi, mot-, moto, mwbp, nec-, newt, noki, palm, pana, pant, phil, play, port, prox, qwap, sage, sams, sany, sch-, sec-, send, seri, sgh-, shar, sie-, siem, smal, smar, sony, sph-, symb, t-mo, teli, tim-, tosh, tsm-, upg1, upsi, vk-v, voda, wap-, wapa, wapi, wapp, wapr, webc, winw, winw, xda , xda-

モバイルとパソコンの表示を変えたい時、管理画面の「詳細」タブから、「詳細」項目の Mobile device support. (External plugin or theme required. See the FAQ for further details.) という部分から設定を確認できます。

チェックが入っていれば、モバイルからのアクセス時にはキャッシュを生成しません。
これによって、「モバイルとパソコンの画面デザインを分けている」かつ「キャッシュ機能を有効にしている」場合でも、キャッシュを作るのはパソコン用画面のみとして対応しているわけです。(モバイル用のキャッシュも作れればいいんだろうけどなあ…)

iPad はパソコン?モバイル?

さて、タブレット端末の場合、私はパソコン用の画面を見せるのが一番良いと思っています(今のところ)。
そのため、iPad での表示はパソコンと同じ物を想定していました。

iPad のユーザーエージェントは下記のようになっています。(Chrome で iOS5 のエミュレートした場合)

Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

wp_is_mobile では、Mobile が引っかかるので モバイルと判断されます。
WP Super Cache では、該当するものがないので パソコンと判断されます。

ただ違うのね、で終わりではありません。

wp_is_mobile でモバイルと判断されるということは、モバイル用の画面を表示する
WP Super Cache でパソコンと判断されるということは、キャッシュを生成する

モバイル用の画面がキャッシュされ、パソコンでアクセスしても有効期限までモバイル用の画面が表示されてしまう。

という状況になります。逆なら、iPad でアクセスしたらパソコン用の画面だけどキャッシュされない、ってなるのですが。

じゃあ、どうしたらいいの?

キャッシュプラグインの内容のほうが複雑なので、

(1) wp_is_mobile をカスタマイズする
(2) 使わないで別の関数を使う

という 2 つの選択肢があります。ただし、(1) はコアファイルの修正なのでお勧めしません。必然的に (2) の選択肢となります。functions.php に is_mobile という関数を作って使うのが一番。

参考:【WordPress】User-agentを判定してモバイル用コンテンツを切り分け、検証する方法

上記コードを functions.php に書いて使います(少し修正しています)。
これでも willcom や google phone に対応できてないのですが、アクセス解析のユーザーエージェントを確認して追加していくくらいでいいのかなあと。

参考:スマートフォンUSERAGENT一覧+モバイル版クローラ | カグア!Googleアナリティクス解説Blog
参考:serbanghita/Mobile-Detect · GitHub

タブレット端末での検証もお忘れなく!

11. 2月 2013 · 1 comment · Categories: WEB制作 · Tags: ,

writing in the journalはい、ごめんください。

毎回お世話になっている 海外SEO情報 のWeb担で面白い記事を見かけました。こちらに掲載されていた「ウェブマスター ツール チェックリスト」がチェックリストの域を超え、ホームページ管理に役立つ情報満載なのです!

参考:その“コンテンツマーケティング”、筋違いですよね? など10+4記事(海外&国内SEO情報) | Web担当者Forum

引用元:ウェブマスター ツール チェックリスト – ウェブマスター ツール ヘルプ

その中で使いたい、優れたコンテンツを作成するための 10 項目

サイトを作る時、ブログを書く時、いつも確認しておきたい10個の項目です。(上記チェックリストから引用)

  • この記事の情報は信頼できますか?
  • この記事はわかりきった内容ではなく、有益で役に立つものですか?オリジナルの情報やレポート、研究、分析が含まれていますか?
  • この記事は検索結果の他のページに比べて、かなり価値がありますか?
  • この記事の内容は、印刷された雑誌、百科事典、書籍などに記載されると思いますか?
  • このサイトは、この題材における第一人者ですか?
  • 記事の中に、スペルや文体の間違い、事実誤認がありませんか?
  • このサイトは検索エンジンが上位にランキングすることを期待してコンテンツを作成していませんか?
  • このコンテンツは、大勢のクリエータによって(または委託して)大量生産されていませんか?あるいは大規模なサイトのネットワークに配信されたものではありませんか?
  • この記事は、メインの記事の邪魔になるほど、過度の広告が含まれていませんか?
  • この記事には有用な詳細情報が不足していませんか?

これを具体的に落としこんだ、マイチェックリスト。

  1. 掲載する情報の裏を取ろう。引用は引用とわかるように、ソース必須。
  2. 引用に留めず、自分なりの考察や、実経験の紹介を必ず含めよう。レビューするくらいの気持ちで。
  3. 他の検索結果をざっと見て、自分の知りたいポイントが載っていないならチャンス!
  4. 今は電子出版も手軽なので、将来は書籍化も夢じゃない!という気持ちで。
  5. 継続は力なり!情報はどんどん古くなるので新しいことをアップし続ければいつの間にか資産に。
  6. 誤字脱字は訪問者の信用を損ねるので、最低2回は見直す。特に会社名とか。
  7. 検索エンジンを意識するよりも、訪問者に有益な情報を提示することに注力しよう。
  8. 重複コンテンツはスパムと判断されるかも。独自性をアピールしよう。
  9. 広告で訪問者を混乱させても意味がない。訪問者様は神様デス。崇め敬い奉りましょう。
  10. 概要紹介で終わらせるよりも、詳細情報を載せると有用性がグッと伝わる。チラリズム。

ユーザーフレンドリーなコンテンツにしましょう!というのがわかります。押し売り・だまし売りからサヨナラバイバイしましょうよ。それにしても、本は既に古い情報だってことの信憑性が増しますね…。

2013年2月。超個人的な思い。

最近コンテンツを考えるたびに思うので、以下雑記です。来年には考えが変わっているかも。

商売でも、ただ並べていれば売れるというのはとうに終わっているはずで、お客様にその危機感があるのは感じます。でも、具体的にどうしたらいいのかわからなくて、リスクのない範囲で変えるだけで依然同じ状況を続けているだけのような気もします。

「何がウリですか?」 → すぐに明確な回答が出てこないのでヒアリングしてやっと聞ける
「イチオシの商品・サービスはどれですか?」 → 全部売りたい
「ホームページで期待する効果は?」 → 自分たちのサービスはすごくいいから知ってほしい

という状況が多いのです。

もちろん、ヒアリングして聞き出すのも仕事だと思っているのですが、「うちのはすごくいいんだよ!みんなに使って欲しいんだよ!」じゃ伝わりません。これってそもそものサービスが顧客視点の欠落だと思うわけです。

お客様の要望通りホームページを作っても根本的に顧客視点がなければ、運用してもっといいものにしましょう、という考えに納得してもらえません。「うん、ウチのサービスは全部載せられたから、情報古くなったら更新しとくよ」と言われて終わりです。

「こういう風になるといいなあと思うから、こういう人が利用してくれると、これだけ喜んでもらえるんだよ」ってスラスラっと言ってくれるところはすごく嬉しくなります。なんて言うか、地平線が見える広い畑の真ん中にいるみたいです。

「ホームページを作れば多少は認知してもらえるから」
「見られる部分だから体裁は整えておきたい」
「ウチはこういうポリシーで来たんだから変えるつもりはない」

という凝り固まった考えには、正直乗りたくないなと思う自分がいます。3つ目のは、それが顧客視点ならいいんですが、安全神話に固執してるのもどうかなあと首を傾げたくなる場面が多くて。

ウェブ解析士に興味を持ったのは、こういうお客様を少しでも変えたい、と思ったのが大きいです。お客様のサービスを知れば知るほど、それが好きになるから。
何とかしたい!ネットはもっと有効なはずだ!と。ホームページ制作は購入で終わるものではなく、投資であるべきです。うまく運用すれば、資産は大きくなります。

そしてもう一つ、新しい情報をどんどん取り入れていかないと自分が古いニンゲンになってしまうのが怖いのです。まあ、新しいことを知るのが楽しいというのもあるのですが。

社会科がホント苦手で、方向音痴で、歴史とかどうでも良くて、経済とか経営とか蕁麻疹が出そうだったんですが、上級ウェブ解析士の勉強をするにつれ氷解するようになりました。
だから「顧客視点とか昔から言われてて、本も山ほど出てるのにどうして足りてないんだろうなあ…」という発見が今更ながらにあったりします。効率よくマーケティングを知れるなんて、いい時代ですね。

素敵なホームページが増えて、気持ちの良い毎日が過ごせれば、それが平和ってことなんじゃないでしょうか、なんて。
お客様の、そのまたお客様に、キモチイイサービスを届けられるようにがんばる。

Finger face with a question
はい、ごめんください。

先日、WordBench 新潟 に参加した際、カスタムフィールドの使いドコロを知りました。

カスタムフィールドの便利さは何となく知っていたのですが、DB 直接構えばいいや~とか思ってたので、ずっと使わないでいました。

それを実例とともに紹介されて感動し、お客さんにも優しい UI が提供できると知って、今まさに作ろうとしている機能をこれで対応しようとしたわけです。

Advanced Custom Fields はあったものの…

プラグイン → 新規追加 で「Advanced Custom Fields」を探し、インストール。そして有効化。
口笛吹きながらさらっと入れることができたんですが・・・左のメニューに表示されない、だと・・・?

バージョンか?競合か?と調べても、特に問題なし。
グーグル先生に尋ねたところ、昨日フォーラムに上がってました。

WordPress › フォーラム » advanced custom fieldsをインストール→メニューに表示されない

そこでも返信したのですが、作者のサイトに確認しに行ったら、ちゃんと書いてありました。

All Discussions – Plugin Support

Dear ACF users, WordPress have recently changed their terms and conditions for hosted plugins. Over the next few weeks I will be focusing on rebuilding and improving ACF to ensure it adheres to the new rules.

In this time, I would appreciate your patience and ask you to first search for information before posting a new discussion.
Cheers, Elliot

俺訳するとこんな感じ。

ACF(advanced custom fields)ユーザーの皆様、WordPress では最近、プラグインのホスティング契約条件が変更されました。
今後数週間にわたって、新しいルールに準拠できるようACFを再構築し改善することに注力いたします。
ご迷惑をおかけしますが、新しくコメントする前にご承知おきください。

主な原因は「プラグインホスティングの契約条件が変わった」ということらしいのですが、ソースがよくわかりませんでした。公式に乗っていても問題を孕んでいるプラグインもあるというし、それらを一掃するために何か変わるのかなとゲスパー。

そんな訳で、公式から自動インストールはしばらくできないようです。
そのため、Github から ZIP ファイルをダウンロードして、解凍したものをアップロードする必要があります。

2013.2.11 時点では、下記のどちらかをダウンロードすれば良いでしょう。

* 3.5.8.1 (latest) – https://github.com/elliotcondon/acf/ (安定版)
* 4.0.0 (beta) – https://github.com/elliotcondon/acf4 (ベータ版)

画面中の「ZIP」をダウンロードして、「ZIP」からダウンロードしたものを advanced-custom-fields フォルダに入れることで動作します。安定版の方はちゃんと日本語化されていました。

有効化しても特に変化がわからないから、「まだ有効化されていません!有効化するには別途ファイルをダウンロードする必要があります」とかアナウンスがあればいいのにと思った次第。
自動インストールはこういう所でつまづいてしまいますね。自戒も込めてエントリー。

これならすぐわかんじゃん!はい、ごめんください。

公開前のページ、つまり「下書き」「レビュー待ち」「予約投稿」の状態の投稿記事や固定ページを、ログインしなくても確認できるプラグイン Public Post Preview が超絶ありがたすぎて鼻水でた勢いで日本語化しました。
といっても、元々わかりやすい英語なので、難しい説明は一切ないんですけどね。

公式:WordPress › Public Post Preview « WordPress Plugins

プラグインのインストール方法は省きますが、プラグインをインストールした lang ディレクトリに下記のファイルをアップロードしてください。(.po を同梱していますが、.mo ファイルだけでも OK です。)

Public Post Preview 日本語訳ファイル(2.1.1 対応版)

2013.04.26 追記:2.2はWP3.5以上からの対応となります。

有効にした後、どうしたらいいの?

設定箇所はなく、サイドバーにメニューは出てきません。新規投稿の状態ではまだ使えませんので、投稿編集画面に下記のような項目が表示されます(日本語にした場合)。

新規投稿の時はまだ使えません

この記事が下書きなどで保存されると、下記のように変わります。

下書きになると限定公開できるようになります

あとはチェックを入れると、下記のように表示が変わり、自動的に限定公開できるようになります。プレビュー画面を共有するんだよ、というのがよくわかりますね。

表示されたURLを使ってくだされ

注意その1◇有効期限があります

デフォルトでは48時間に設定されています。これだと短い!もしくは長い!という方は下記のコードを function.php に追記して有効期限を変更することができます。

14日にしたいなら、 60*60*24*14 ですし、12時間にしたいなら 60*60*12 で OK です。

注意その2◇「非公開」では使えません

「非公開」の記事を設定しようとすると、「この投稿はもう公開されてるから使えないよ」的なメッセージが表示されます。使えるのは下書き、レビュー待ち(保留中)、予約投稿 の3つです。
これらの「プレビュー画面」を強制的に公開するプラグインなのですね。

CMS として使うための必須プラグインと言っても過言ではなぁい!(個人的に)

WordPress を CMS として使っていると、確認だけはするけど CMS にログインする程でもない、という場合・・・例えば上司や別部署、お客様や関連他社の確認が必要になることがよくあります。

今までは共通のログイン ID とパスワードを発行して確認していただいていたのですが、「どうやって見るんだっけ?」という問い合わせが多く、そのたびに通達して毎月の恒例行事となっていました。

それが!ログインしなくても閲覧できるので、ユーザーの登録とか ID 管理とかログイン権限とか関係なく、ちょこっと見せたい時にものすごく重宝します。

ワークフロー機能もついていたらいいのかな?とも思いましたが、このシンプルさがありがたいですね。