ウェブ戦略・WEB戦術に関する情報を、海外・国内からご紹介するウェブ戦略専門情報ブログ
ITmediaオルタナティブブログでWEBマーケティング中心に連載中

ウェブ製作関係カテゴリーのブログ記事

WEBサイトの多言語対応最近はWEBサイトも、複数の言語に対応しているところが珍しくありませんね。

例えば日本のサービスであれば

  • 見込み客やサービス利用者の中に日本語がつたない人がいる
  • サービスを使って日本以外の人とコミュニケーションを使う可能性がある
  • 多言語対応によって、市場が拡大する
  • 多言語対応によって、広報的な効果が期待できる

などの理由があれば、ぜひ対応させたいところですよね。

しかし、多言語対応と言っても極端な話、ただGoogle翻訳に通したものを見せれば良いのかというと、もちろんそうではありません。

他にもだいじなポイントがあります。

その点について、今回はMashableの以下の記事をご紹介します。

▼5 Ways to Win at Website Localization :
http://mashable.com/2011/12/22/website-localization/

小ネタですが、サーバサイドでうんたらやる方には、便利ではないかと。

6月半ばから、HTTPヘッダーでcanonical属性を設定してクローラに伝えることができるようになりました。

canonical属性は、一般的にはHTMLファイルの<head>内に直で書くか、ないしHTMLファイルではない場合、htaccessで指定するやり方が一般的です。

例えばこんな感じですね

<Files "/xxx/yyy.xml">
Header set Link "<http://hogehoge.com/xxx/yyy.html>; rel=\"canonical\""
</Files>

htaccessでやってしまえば、大概が何とかなるのですが、サーバがIISの場合もあります。

そんなときに…以下の記事が参考になるかと思います。

▼How To Implement rel=”canonical” HTTP Headers
http://www.searchenginepeople.com/blog/hwoto-canonical-headers.html

IE9_Block_or_NOTIE9のReleaseCandidate版をIE9のベータ版利用者に対して配布し始めたと、先日Microsoftが発表しました。

IE9の機能の詳細などは各社ニュースサイトを見ていただくのがいいかと思います(ITmedia"IE9関連記事"

リリース時期は間近ということですが、とは言え業務システムの関係や、その他諸処の理由でアップグレードをしたくない人もいるはず。
しかし、WindowsUpdate経由でアップデートされますので、 もしかしたら気がついたらアップグレードしてしまうかもしれません。

そういった場合の対策法がIEBlogで公式に紹介されていました。

5年以上前から世界一のドメイン保有数を誇っていたGoDaddyが、内々でオークションに出されているようです。元ネタはこちらです。

GoDaddy Is on the Block - WSJ.com :

理由のほどは明かされていません。昨年度の収益(revenue)は7億5000万ドル~8億ドルとのこと。

損益としてどうなっていたかは分かりませんが、ドメイン商売は極端な安売りをしなければ、経費が妙にアップアップでない限りではそれなりに手元に残るんじゃないかと思います。

なので、理由が知りたいところですね。

特に中小企業ですと、大概大なり小なりエリアマーケティングを行うことになるかと思います。

例えば一部の製造業ですとか、主にニッチな商品を扱っている企業で、全国区でも十分いけるという所も少なからずありますが、実際の営業エリアや予算のことを考えると、近隣エリアのマーケティングを行っていくことになりますよね。

2_1_人口統計.gif

その際、例えばGoogleのキーワードアドバイスツールで、あるKWが地域KW(相続税 さいたま市、など)込みでどのくらい検索されているかということで、ある程度どのエリアに焦点を絞るかを考えていったり、競合のキーワード分析をしていったりすると思います。例えば。

ただ、それですと検索エンジンの検索窓にクエリとして単語を入れた人、というセグメントしか把握できません。なので、

ロジカル・ディスカッション チーム思考の整理術 』という本を読みまして、とても参考になりました。

基本的にはこの本は、社内のミーティングや会議をいかにうまく進めるかという視点で書かれています。

実際役に立ちました。
読んだ数日後のブレストで、この中の手法の一つ二つを使ってみたのですが、かなりやりやすく、中身の濃い時間になったと思います。

ただ、それはもちろんのことですが、むしろこれはお客さんとの対応にとても役に立つ内容だなと感じました。

Googleで検索した際に、時々GoogleMapの表示とともに、いくつかのお店が表示されることがあるかと思います。飲食店などを調べた時に見かけることが多いかもしれないですね。

特に、商圏が地域商圏や近隣商圏であろう、「飲食関係」「病院・診療所」といった、近さがクリティカルになる業種や、「税理士などのサムライ業」「衣料品店」「鍼灸マッサージ」など、密着型の差別化戦略をすることが多い店にとっては、とても有益なものだと思います。

何より、通常の検索結果より上に行くのでなまじっかSEOで上に行くより有用です。

しかし、あまり知名度が高くないせいか、それほど周知されていないようです。キーワードツールでも1000件くらいの検索数しかありませんでした。登録数自体も実際もっとあっても良いんじゃないかと思います。

51GBPS9lP1L._SL100_.jpgWEBマーケティング関連の書籍はたくさんありますが、テクノロジー主導で実際のマーケのお話が手薄だったり、トレンドネタ(Web2.0とか)に特化したもの。

あるいは、デザインなど一部の要素に専門化したものであったりと、ひとまず「WEBマーケティングってなによ」というところを正面から書いた書籍は少ないような印象があります。

なので「お勧めないですか」と聞かれると、困ってしまうことがあるのですが、そういう時お勧めしている本を2冊ご紹介します。

佐藤義典の「戦略BASiCS」関連の本がおすすめ。

WEBやネットではなく、リアルのマーケティングで有名な佐藤義典さんという方がいます。戦略BASicSという単語を聞いたことある方も少なくないかと思います。

この方の本がおすすめで、他にもたくさんありますが、特に『図解 実戦マーケティング戦略』と『経営戦略立案シナリオ』の2冊がおすすめです。

Google Adwordsの「分割」機能が面白い

Google Adwordsに「分割」という機能があります。

実は昨年末から導入されていたらしいのですが、全然気づかず…というか以前あった「Google検索+検索ネットワーク」と「コンテンツネットワーク」の区別を行うだけの機能だと思っていました。

それが、Inside AdWordsで以下のように紹介されていたので使ってみると、これは面白いですね。特にAdWordsの運用期間が長いなどでデータがたくさん溜まっている場合はより面白いと思います。今回はその概要と、個人的におすすめな使い方を書いてみます。

Inside AdWords-Japan: 使いやすくなった [キャンペーン] タブの分析ツール
 http://adwords-ja.blogspot.com/2010/02/blog-post.html

ad_bun01.jpg

分割の仕方

分割の仕方としては、表示している対象ごとに微妙に違うのですが、大まかには

こちらの記事を読んでいて、聴いたことの無い言葉があったので気になって調べました。

  ▼SES London 2010 : PPCかSEO? 究極の検索マーケティング戦争 » SEO Japan

具体的には以下の部分です。

・ブラックハットだが、サーチ・サチュレーションと言うテクニックがある。複数サイトを自作自演で作り、特定のキーワードで検索結果を自社で独占。費用対効果は最強。

。。。ファントマスター氏の発言。責任は持てないけど、と一言。日本語に訳すと「検索の飽和状態」と言う感じでしょうか。マイクロサイトを大量に作る作戦ですよね。やりすぎると、微妙なラインですけど。

サーチ・サチュレーション」ってなんだろう、恐らく「Search Saturation」ですが、果たしてどんなものなのかなぁと。「oxygen saturation」が血中の酸素飽和度のことなので、自社サイトが検索結果をどれくらい埋め尽くしているか、ということだとは思うのですが、具体的にはどんなものかと。

tsuika_pv.gif

アクセス解析ツールが出す指標の一つに「平均ページビュー」があります。

平均ページビュー(以下平均PV)は、訪れた訪問者がサイトのコンテンツに興味を持ってくれているか、あるいはコンテンツのページ間ナビゲーションがうまくいっているかなど、サイト全体のトレンドとしての良し悪しを判断するのに、とても有用な指標です。

同じような指標として「平均滞在時間」がありますが、こちらはちょっとした要因で数字が大きく変わるので扱いが難しいです。

例えば、偶然、「サイトを見るのを中断してお手洗いに行く人が多かったり」すると、値が大幅に大きくなってしまいますし、タブブラウザを使っていると実際の利用動態と全く会わない数字を出してしまう、などの問題があります。

特に母集団(≒ページビュー)が少ないサイトでは顕著です。

対して、平均PVは平均滞在時間ほどのぶれがすくないので、確度の高い指標として有用です。

平均PVだけ見ていても分からないこと

ただ、サイトのパフォーマンスの良し悪しや、それに伴う問題発見をする際、平均PVの数字だけ素直に見ていても分からない、あるいは判断を誤ることがあります。それは例えば以下のような場合です。

All_links_from.jpgSearch Engine Journalから小ネタです。
DOMを解析してクラス単位などで範囲を抽出し、好きな場所のURLを一気にクリップボードにコピーできるFireFoxのAdd-onです。
SEM Toolsというアドオンの一部です。

How to Extract Links from a Page Based on Their Placement | Search Engine Journal
http://www.searchenginejournal.com/extract-links-from-page-based-on-their-placement/15886/

単純なリンク抽出ならSleipnirがおすすめ

個人的にリンクの抽出はSleipnirを使ってました。これがブラウザの標準機能のくせに便利で、重宝していました。具体的には「選択範囲のリンクをコピー(Ctrl+Shift+G)」です。

そして、そのまとめて取ったリンクを「クリップボードから開く(Crtl+Shift+V)」で一気にタブに開いて、簡易リンクチェッカーとして使ったり、そのままExcelに貼って解析に使ったりしていました。

それはそれで便利なのですが、「選択範囲のリンクをコピー」なので、いろいろな箇所のリンクを集めていく、という点では不向きでした。

ただ、結構そういう作業ってありまして、例えばあるページから他のページのクリック遷移率を調べる時などには、いったん全部抽出してから目視でバラしたりして効率が悪かったです。

Get Linksは、それが可能

Get Links、正確にはSEM ToolsのGet Links機能は、それが可能です。ページのDOMを解析して、それ単位でその中のリンクをリストにして出してくれます。複数選択なども可能です。

また、一緒にアンカーテキストも出してくれますので、他のサイトがどういったDOM構造の中どういう発リンク構造をしているのかを、ざざっと見るのにも向いています。(関係ないですがGoogleReaderは凄い数のリンクがありますが、Gmailはほとんど無し。クラス名も結構違って、色々興味深いです)

Mockingbird.jpgWEBサイトを作るとき、いきなりPhotoshopやIllustratorに向かう人がいるとしたら、私はそれは順番としてはあまりよくないかなと思っています。

何でかというと、PhosotshopやIllustratorが得意とするような、いわゆる画像処理の部分というのは、デザインの最終段階の味付けみたいなものじゃないかと思うからです。

その前にまず、

 ・載せたい情報の構造を概念のレベルで整理
 ・それを自分(Webサイト)から見る人に伝えるための画面上での情報の整理、

という2ステップが大雑把にはあるべきかと。

いまさらですが、EFOという言葉を今週月曜日、初めて知りました。 SEOとLPOを入れて、Optimizertion三兄弟…かと思いきや、SMOなんていうのもあるんですね。ちょっとついていけない今日この頃です。

実際に現場では、あまりそのあたりの略称は少なくともうちでは使っていないのですが、一般的にはどうなんでしょう。ただ、CRとかCPOとかは飛び交います。

話がそれましたが、私は以下の記事を見てEFOを知りました。

エントリーフォーム最適化(EFO)の方法:SEOニュース || SEO対策のAxis(アクシス)

Yahoo Web Page Segmentation: Distinguishing Noise from Information

SeobytheSeaから、Yahoo!について、Yahoo!もページをコンテンツとそうじゃないところを分けて考えていますよ、という記事です。

内容は、メニューみたいな各ページの共通部分、ボイラープレートと検索エンジンが呼んでいるような部分や、広告の部分を、Yahoo!は「ノイズ」として分けて考え、重み付けをしていきますよという内容です。

Googleを頭として、ボイラープレートなどの話題は、以前から出ているので、検索エンジン関連に興味がある方はすでに知っていることかもしれません。

excellent_ga.jpgSEOmozで「Excellent Analytics」というツールが紹介されていました。

新手の解析サービスかと思いきや、GoogleAnalyticsとExcelを連携、というかExcel上でGoogleAnalyticsのデータを簡単に取り込めるようにしたものでしす。おぉ。

個人的にはこれはとてもありがたいです。Excel2007以上でないと動きませんが、これだけでも諸所のデメリットを置いておいてもアップグレードしたいです。

Microsoftから、IE6とIE7、IE8の互換モードと標準モード、それぞれのブラウザでの見え方の違いを比較するツール「SuperPreview」というのが出ています。MicrosoftがだしているWEBサイト制作ツール「ExpressionWeb」の機能の一つですが、無料で単体で使用できます。

IEBlog : Supporting Web Standards Development with SuperPreview
http://blogs.msdn.com/ie/archive/2009/09/15/supporting-web-standards-development-with-superpreview.aspx

SEOmozの今週のホワイトボードは、SEOmozのCEOであるRand Fishkin氏のメールマーケティングの話でした。

時代遅れといわれることもあるメールマーケティングですが、そんなことはないですよ、という内容です。

SEOmoz | Whiteboard Friday - Email Marketing & SEO
 http://www.seomoz.org/blog/whiteboard-friday-email-marketing-seo

実際、私の感覚から言ってもメールマーケティングは、きわめて有効な手法です。昔と比べてどんどんとコンペティターが増えているので、相対的に効果が下がっているということはあると思いますが、メインチャネルと考えて間違いないと思います。

※現在進行中緊急性高い話題のようです。2.8.4以前の方要注意ください! こちらが詳しいです。http://blog.yoshitomo.org/archives/524

 

Robert Scoble氏のWordpressも、何度もCrackされていたそうです。

I don’t feel safe with Wordpress, hackers broke in and took things
http://scobleizer.com/2009/09/05/i-dont-feel-safe-with-wordpress-hackers-broke-in-and-took-things/

Crackってどんなものだろうとおもってリンク先を見ると、このタイプ。

SEOのチェックをする際に、サイトの各ページのtitleタグやmeta::descriptionのリストが何かと必要になるんじゃないかな、と思います。

自分の場合、例えば検索順位と月間検索数をつき合わせてのKWごとのパフォーマンスチェックを行う際に使います。「おぉ、この文言は反応がいい」「なら、1位表示されてるのに集客できてないKWのページもこんな感じで作ってみよう」とかです。

なので、自分が運営しているサイトの全ページの特定のタグをリストアップしてくれるソフトを、ずっと探していました。

でも、有料でも全然見つけられないので半ばあきらめてたのですが、なんか実は身近なソフトの組み合わせでできたので、もし同じことで困ってる方はぜひどうぞ。

使うソフトは「Excel」と「DreamWeaver」

使うのはExcelとDreamWeaverです。結論から言ってしまえば、DreamWeaverの検索機能で特定のタグを抜き出す→それをDreamWeaverの機能でxmlに保存→それをExcelで展開。という流れです。

ちなみに、自分は今まで手作業でやってました orz
XMLをEXCELで扱えるというところを全くもって知らなかったので…

作業手順

まずは普通にサイトを開いた状態で、DreamWeaverの検索機能で「ローカルサイト全体(不都合がある場合は「選択したファイル」とかで適当に)」に対して「特定のタグ」検索をします。

TITLEタグの抜き出し

今回はtitleタグとmeta::descriptionタグを抜き出します。
まずはtitleタグですが、上の画像のようにすればOKです。この「特定のタグ」検索は、特に大規模サイトではとても便利なので、もし使ったことのない方はぜひ触ってみてもらえますと。

そして、その結果がでます。そうしたら、結果のタブの左端にある保存ボタン(フロッピーディスクのボタン。っていうかいつまで保存先ってフロッピーなんだろう…)を押して保存します。

保存はXML形式でしか出来ません。
ほんとはここでCSVとかに出力できればもっと楽なんですが(^-^;

検索結果

続いてmetaのdescriptionを同じように抜き出します。

descriptionの検索

同じように保存します。

そしてこの後ですが、このXMLファイルはEXCELでそのまま開けます。

自分が使っているOffice2000では、単純にテーブルとして開くだけですが、Office2007ではXMLハンドリング機能が強化されているので、読み込んだ後にいろいろ加工できます。

で、テーブルとして読み込めれば後は普通にEXCEL的にまとめていけばいいので、こんな感じでファイルごとのSEO関係のタグの一覧がさくっとできます。

エクセルで後はいじるだけ

他のタグでも応用可能なので、工数削減の役に立ちましたら。

サンノゼでのSESでも話題に多く上がっている通り、重複コンテツンは今SEO業界でも注目の話題です。

海外SEO情報ブログで有名な鈴木さんのTwitterを以前に抜粋しましたが、ここでも重複コンテンツの話題が多かったです(SES全体のセッションとしてどうだったのかは把握していませんが…)

SES(Search Engine Strategies)をTwitterで実況::[7korobi8oki.com]

この記事は主に内部SEO作業が中心の内容でした。しかしビジネス向けサイトのことを考えるとそれ以外にも考えることがあるなぁと、FutureLABの記事を読んでいて思いました。

「How B2Bs Can Improve SEO by Avoiding Duplicate Content」という記事です。

How B2Bs Can Improve SEO by Avoiding Duplicate Content | Futurelab – An international marketing strategy consultancy

重複コンテンツを作らないために、企業サイトで、気をつけないといけないこと

記事によると、以下のことをやっている場合には、それが重複とみなされないかどうか確認したほうがよさそうです。

  1. プレスリリースを複数のサイトに出している場合
  2. (なんらかの、例えば販売)パートナーが製品情報などの記述をそのまま引用している可能性がある場合
  3. ブログの投稿が複数のサイトに出るようになっている場合
  4. 同じドメイン内で複数のURLで同じページにたどり着くようになっている場合
  5. 他のサイトにコンテンツを提供している場合

確かにこれは企業サイトとしては良くあるものばかりですね。1のPR系の出稿は一時SEO対策としても持ち上げられていたこともあり(また、今でもよく薦められます)やっている企業は特に中小企業を中心に多いと思います。しかし、特にGoogleは今や「どこがコンテンツでどこがサイドメニューでどこがヘッダー」といったセグメントごとにページを評価しているとのことなので(from これからはページ分割したセグメント単位のSEOで勝負! | 海外SEO情報ブログ・メルマガ)コンテンツ部分だけで評価されれば重複コンテンツとして判断される可能性は、高いかもしれません。

2については、アフィリエイト系のSEOを多くやっている場合は要注意ですね。規模にもよりますが、コンテンツそのままコピーを許すのは止めておいたほうがよさそう。とは言ってもSEO目的なら別に売るつもりもそこまでないと思いますので、そもそもそこまでやらせている企業は少ないのかな…。

3と4については、同じドメインならcanonical属性、違うならどっちかはオリジナルの共通コンテンツを、コンテンツ部分に繋げた方がいいですね。

なぜ重複コンテンツは危険か

Googleも公式に言っていますが、重複コンテンツは別にペナルティを受けるわけではないです。ただ単に検索結果に出なくなるだけです。

検索結果に出なくなるのは、検索結果に同じ内容のコンテンツが並ぶことが、検索エンジンの利用者にとって望ましい結果ではないからです。ただ、先ほどのFutureLabの記事では、「そういった重複コンテンツがYahoo!いわく全体の三分の一を占めている」と書かれています。

特に大手PRサイトだったり、価格比較サイトのようなところとぶつかってしまって、結果として自社のコンテンツが出なくなってしまってしまった場合、集客できていないという意味でペナルティを受けていることとなんら変わりはありません結果として。

なので、ちゃんと先ほどのような対策を打って、自社サイトが上に出るようにしておきましょうねということです。

特に、製造業など、テクニカルタームや部品素材などの専門的な名前でピンポイントで検索する見込み客が多い業界ではなおさらです。

プレスリリースなどを出して、そこからのアクセスを得ることもバックリンクを得ることも大事ですが、バーターとして重複コンテンツ問題が生じないように、SEOをするときには考えないといけないですね。

重複コンテンツ対策

先ほどのFutureLabの記事で紹介されている対策案を紹介します。

  1. サイトマップをGoogleに送り、ページごとの重要性を伝える(サイト内での重複コンテンツ対策ですね)
  2. canonical属性を使う(これもサイト内対策)
  3. コンテンツ提供先には、そのまま自社のコンテンツを使うのではなくユニークな内容を入れるようにしてもらう
  4. 販売パートナーにも、商品紹介などで、自社のコンテンツを使うのではなくユニークな内容を入れるようにしてもらう
  5. 配信しているプレスリリースとは別に、自社のプレスリリースのページではユニークな内容をコンテンツ部分に付加するような運用にする

特にパートナー系が多いサイトは気をつけたほうが良いですね、自社コンテンツとは別にセールスパートナー向けのコンテンツを用意するようにしたほうが良いかも。リソース次第ですが…。

Googleの「Caffeine update」が話題です。

SEOに関わっていると、しかも生業としている人たちにとっては、WeatherReportでさえ、原油の価格と同じようにシビアな問題ですので、非常に気になるところだと思います。

では実際これがどういうものなのかというと、どうもよく分からなかったので辿っていってみました。

ニュースでは

各所の記事によって表現が違うのですが、

グーグルの次世代検索技術「Caffeine」、検索結果に従来版と若干の違い - 毎日jp(毎日新聞)

米Google、検索の次世代インフラをテスト公開 検索スピード、信頼性など3点を改良:CodeZine

という形で、検索エンジンのバージョンアップと言う感じでのヘッドラインが多いです。

元を辿ると

元をたどっていくと、どうやらGoogleのクラウドを支えているファイルシステムのバージョンアップと言うのが、おおまかなところのようです。

GoogleのMatt Cuttsによれば「ちょっと誇張してるかもしれないけど、Googleでは半年たてばコードの半分は書き換えられてる」とのことなので、、ファイルシステムも例外じゃないということでしょうか。(参照:More info on the Caffeine Update

検索インデックス数の増加や、インデックスされるまでの速度の向上、精密さなどの向上というのは、そのファイルシステム上で検索エンジンというアプリを動かすと、前よりパフォーマンスがいいです、といった文脈じゃないかと思います。

Google File System

そのファイルシステムは「Google File System」と呼ばれていて、今回のはいうなればそのVersion2。

Version1が抱えていたいろいろな修正を施したもののようです。詳しくは以下を。

Google File System II: Dawn of the Multiplying Master Nodes
 http://www.theregister.co.uk/2009/08/12/google_file_system_part_deux/

とはいえもともとのGFSも、かなり凄いものの様です。以下のページに骨子と実際のGoogle開発者が書いた論文へのリンクがあります。

Google File System(GFS)技術メモ ― ありえるえりあ
 http://dev.ariel-networks.com/column/tech/google_file_system/view

しかし、検索エンジンもGmailもGoogleReaderもYoutubeも、いろんなサービスをGoogleは自前のクラウドでまかなっていますが、そのことがなんだかんだ言って最大の強みですよね。

例えばGoogleReaderだけとか、個々の機能については他社が戦う余地などあると思いますが、これだけの種類のサービスを自前で安価に運用できる、そしてそれらを連携できると言う点を考えると、総体としてのGoogleというのは、恐ろしい存在だなと思う限りです。

恐ろしい汎用性とスケーラビリティ…。Googleはどこまで先を見て動いているのか。

それはそれとして、カフェインの上でGoogleの各種サービスがどう変わっていくのか、これからがとっても楽しみです(^-^

関連記事

Official Google Webmaster Central Blog: Help test some next-generation infrastructure
 http://googlewebmastercentral.blogspot.com/2009/08/help-test-some-next-generation.html

グーグル、ウェブ検索の次世代アーキテクチャをテスト中 - builder by ZDNet Japan
 http://builder.japan.zdnet.com/news/story/0,3800079086,20398207,00.htm

Googleサービスのウェブサイトのための新ツール

The Wall Street Journal誌によると、米国での歯科医師は、マーケティングを真剣にやらないと経営が厳しい時代に突入しているようです。

Dentists Step Up Marketing as Patients Skip Their Visits - WSJ.com
 http://sec.online.wsj.com/article/SB124995744000721607.html

日本でも、以前から歯科医師の供給過剰が問題になっていて、歯医者の10%~15%が新卒の大学生より月給をもらっていない、なんていうことが話題に上がったりしてましたね。

自分は日本がそうなっているのは、過剰が目に見えてきても歯学部の定員を減らさなかったことや、少子化といった国内の要因のためだと思っていたのですが、アメリカでも同じ状況みたいです。

なぜ同じ理由になっているかは追いきれていないのですが、米国では生き残るためにマーケティングに走り回る歯科医師が増加しているそうです。

歯科は、初回のお客さんさえ集められれば、後は予防の重要性を説いて、親切に治療をしていれば、勝手に顧客ができていって、安定した収入が得られると言う、ある種楽なビジネスモデルが成立していました。

それが、日本の事情で言えば歯科医の増加と少子化、予防の徹底による歯科治療自体の減少で、競争状態になっているようです。

実際駅前には歯科が立ち並んでいますし、歯科医院向けの営業セミナーや書籍は最近よく見かけます。

歯科医院としては悲観的な状況と言えますし、利用者としても金銭のプライオリティが高い医師にかかるのは避けたいはずです。

どうしたらいいのか…in日本

歯科医としては、予防の重要性を説く・歯科医師会全体として足並みをそろえて定期的に歯医者に通うことでQOLがどれだけ改善するか、投資対効果があるかを長いスパンで説いていかないと、いけないかと思います。

ただ、これはどうしても長い目で見ないとどうしようもないかと。そうすると、過剰である都市部から、むしろ足りていない地方に居を構えたり、あるいは、新米ママが通っている、例えばABCの料理教室などと提携して、子供の歯をきれいに保つスクールを一緒に開くなどの、見逃されている市場や参入が難しいとされている市場、新しい需要が見込める提携関係の構築などに向かっていくのが短期的にも効果があるし、患者としてもうれしいのかなと思います。

都市部でやるなら

日本で、それでも都市部で戦うと言うのなら、米国のようにマーケティング、いいかえればきちんと集客→見込み客フォロー→顧客化、といったステップを踏んでいかないといけません。

また、基本的に意思決定者は旦那さんと言うよりは主婦ですよね。なので、デバイスとしてはパソコンと言うよりは携帯端末。携帯端末上で、「地域名 + 歯科」といったキーワードで上位表示されるようになると、世界がかなり変わるはずです。

また、歯科医院は基本的に怖いところですから、いかに安心感を与えられるかが勝負ですね。子供をメインターゲットにするなら、例えば、無痛治療の説明コンテンツを入れたり、しかもそれを、子供用にかみくだいたページを別途用意して、それを子供に見せたら、子供が安心してきてくれるようにしたり。

子供が嫌がって泣き喚くのが奥さんにとって最も大きいストレスじゃないかと思いますので。

また、その場ですぐに電話、メールでの相談、ができるのが望ましいです。予約システムはお金がかかるので、とりあえずは電話での予約がいいと思います。

また、そういった情報が載った携帯HPを、QRコードにして、いろんなところにくっつけてもらわないといけないですね。ティッシュにして近所のラーメン屋にでも置いてもらえれば、結構いいんじゃないでしょうか。待ってる間暇だから見たりしますし。それに、不摂生な人も比較的多そうです(ラーメン好きの方すみません)

などと思いつくまま書きましたが、歯科医院も集客を真剣に考えないといけないですね。 その際に使う媒体は費用対効果を考えれば、Webサイトが一番いいかと。

Webサイトから問い合わせか来店につなげるという集客的な使い方です。
Webサイトで反応が取れるようになったら、QRコードをばらまいて、広告をうってもペイするんじゃないかと思います。

ある種これからが、やりがいのある時代なのかもしれません…と前向きに捕らえて、全国の歯科医師さんがんばってください(by 虫歯持ち & 親知らず未抜歯)


Marketing & Strategy Innovation Blogの以下の記事より。

5 Steps to a Better Design Brief - Marketing & Strategy Innovation Blog
 http://blog.futurelab.net/2009/08/5_steps_to_a_better_design_bri.html

ちょっと意訳気味ですが、お許しください。
顧客目線のデザインを作る際に、ここは確実に抑えておきたいポイントだと思います。

デザインはそれ単体で成立するものじゃなくて、あくまで目的語を必要とする動詞ですよね。 なので、その目的語をまずきちんと把握した上で、デザイン作業に取り掛かろうとしないといけないです。

そこのヒアリングをしなかったりmうまく出来なかったり、不十分だったりすると、顧客満足度は上がらないですし、デザインはビジネス上で役に立たない、一種のオーナメント的な扱いを受けてしまいます。

特にデザインに関わりの無い多数の人にとって、デザインに求めるのは、美しさとか見栄えというよりも、「このデザインにするとどんないいことがあるの」もっと具体的には「売り上げが上がるの」みたいなところなんですよね。

ですので、中小企業の社長さんなどを相手にデザインを作っていると、このあたりがきちんと論理的に説明できないと、なかなか承認がおりないです。

例えばトークとしては

「あなたが売りたいこのサービスは、こういうものですよね、とするとこのあたりをまずきちんとアピールしないと他社との差別化ができないですよ、その他のこれとかこれとかこのポイントは、それを分かってもらった上で知ってもらわないと正しく伝わらないですよ、なのでトップでアピールするのは止めたほうが良いですよね、で、さきほどのところをきちんと見込み客にメッセージとして伝えるには、そうするとこういう配色でこういったものを置いた方が伝わると思います、例えばこんな感じです、目を閉じてパッとこれを見てください、そういったメッセージがさらっと頭に入ってきませんか?それなら、これが…」

…とスラスラいくことはまずないわけですが(笑)
それはそれとして、デザインは論点が分かりづらい分、普通のサービスや製品などよりも、きちんとビジネス的な提案をすることが必要です。感性の次元から引っ張り出していかないと、全然決まらないです(経験のある方も多いはず…)

デザイナーに必要なのは、スキルはもちろんのこと、それ以上に「全体を見る目」「聴く力」「提案力」だと自分は思っています。

以下意訳です。

1.15~30秒くらいでのデザインの説明ができるかどうか

商品を売り込むのと同じで、まずデザインもその魅力の核となる部分を15~30秒で説明すること。

15~30秒というのは「elevator pitch」のことで、「顧客に偶然会ったとき、エレベータを降りるまでの短い時間(15~30秒くらい)に自分の会社(の商品)や自分自身を説明する。」という意味(Goo辞書より)

2.顧客が求めるものの優先順位を決める(決めてあげる)こと

顧客はデザインに対して、いくつかのニーズを持っていることが多いので、それを顧客のビジネスについてヒアリングしながら、優先順位をつけてあげることが必要。顧客の全てのニーズを満たすデザインを作ることは現実的にほぼ不可能。また、優先順位がつけば、そこにピントを合わせたデザインを再提案することも出来る。

3.そのデザインで、顧客にどんな夢を見せたいのか?を決めること

デザインはただきれいにみせるためのものではなくて、何かを伝えるコミュニケーションの手段。

なので、そのデザインで果たして何を伝えて、顧客がそれによって「これを使えば自分は○○について、こんなに幸せになるんだ!」と思わせるか・思わせたいかを決める。

4.全体の戦略の中で、そのデザインがどの役割を負っているか?を把握すること

広告だったり商品開発の一部だったりするわけですが、そのデザインがいったいどんな役割を期待されているのか、他のデザインや他のアクティビティとどんな関係にあるかを把握すること。でないと、シナジー効果を発揮できない可能性が高いばかりか、互いに干渉してだめになってしまうかもしれない。

5.どういう流れでそれを作るか?

デザインをいきなりするんじゃなくて、デザインを施す製品だったりサービスが、販売戦略などの上でどんな制約を負っているか、どういう風に製品を見せたいのかを考えること。でないと、見当違いのものを作ってしまうことが多い。

身につまされるものがあります。えぇえぇ。

VisualStudioをはじめて使ったとき、正直なんだこの便利なものー!と驚きました。「統合開発環境」とやらはすごい!と。

しかしそのワリに、仕事で一番使うJavaScriptでは、今でもAlert()でやっています。今はAptanaとかFireFoxのプラグイン系とか統合環境っぽいものがいくつかありますが、なんでだろ、なかなか手につかないです。そんなに激しいことをやってないせいもある(というかそれがでかそう)。

そんなんであんまりJS系のツールにアンテナが立ってなかったのですが、偶然これが目に。

MS謹製の開発ツールです。でもどうせFireBugがあるからいいやと思って、ちょっと使ってみたらこれがなかなか便利でした。

 ▼Discovering Internet Explorer Developer Tools

イメージとしては「FireBug」+「DeveloperToolbar」みたいな感じです

普通にJavaScriptをデバッグして、ブレークポイントつけて変数WATCHして…というのはもちろん、HTMLやCSSのとこまでいろんなツールがついています。

シンプルなところでは、ウィンドウサイズを1024x768にしてくれるとか、Cookieの状況を見せてくれたり、DOMの各属性を見せてくれたりとかです。

CSSのトレースモード

個人的に一番便利だなーと思ったのが、「トレーススタイル」です。

スタイル関係のツールなのに「HTML」タブの中にあるのですが、これが何が便利だと思ったかと言うと、スタイルのカスケードを見せてくれるんですね。

ie8_devtool.gif

特に、「歴史ある」サイトの場合、それはもう地層のようにCSSが重なってわけが分からなくなっていることがままあります。だからといって!importantを使いまくると、もう袋小路なので結局挙動がおかしいところは追っかけていくしかないのですが、これがもう。

そんなときにこれがあれば、その要素に対して、どこでどいつが被さっているのか、どれが最終的に生きているのかが一目瞭然です。

これでかなりCSSの整理と作成工数削減が出来そうでうれしいです(^-^

Web上でのマーケの仕事をやっていると、その少なからずなところがSEO(検索エンジン対策)に費やされるます。

でもこれが曲者で、自社にせよ顧客のものにせよ、このSEOというのは先が見えず、なかなか精神的にやっかいな代物ですよね。

検索エンジンはころころ挙動が変わるし、情報は玉石混交のきわみですし、パーソナライズの波もあるし、最近ではY!とMSの件もあります。

毎日検索順位やらキーワードごとのアクセス者の動向のレポートに目を通して、うーんうーんと頭を抱えたりする日々です(自分が、ですが)

で、それとつながっていると思ったのが、Sphinn Japan Blog で上がっていたエントリーです。

検索キーワードを意識したコンテンツはヘタレブロガーにも有効
 http://blog.sphinn.jp/2083.html

この記事では、個人ブログの話をしていますがこれは企業サイトにとっても言えることかと感じました。

SEOというか検索エンジンのミッションが何か、とを考えると、「ユーザの検索キーワードに対して適切なコンテンツを提示してあげる」というところに尽きるんじゃないかと思います。

なら、それを満たせれば自然と上位に表示される。細かいことはさておき。

そうしていれば、将来検索エンジンが細かく仕様を変えたとしても、彼らのミッションがぶれない限り、検索順位が落ちることはそうそう無いのでは。

長い目で見て、具体的に必要なこと

そう考えると、自社ないし顧客がリーチしたいと思っている顧客層に対して、彼らが求めるコンテンツをきっちり作ってあげるということをしていくことが、中長期的に見れば必要になります。

リンクを集めたり内的要因のチューニングしたりすることも、短期的にはとても重要なSEO施策なのですが、ブランディングも含めて長く集客しようとするならなおさら。キャンペーンとかは違う(というかそういうのはリスティング広告としてやるべきかな)

サイト全体というくくりで言えば、Web上でのある企業の事業ドメインが何なのかということを、きちんと検索エンジンに伝えられるような作りにする。コンテンツを増やしていく。

つまり「ワンサイト、ワンテーマ」につきるかと。

いまもし、特に自社サイトで内部要因のチューニングや外部からのリンクの獲得にほとんどのリソースをつぎ込んでいる担当の方がいましたら、そのうちの10%でもいいので、長期的なスパンで見たコンテンツに力を使ってほしいと思います。

実例?

現にうちの会社のサイトでも、3年前やら4年前の記事に普通にアクセスがきて、そこからサービス申し込みにつながります。

コンテンツはストック型です。フロー型ではなく。

うちの会社をお世話してくれているコンサルタントI氏の言葉を借りるなら

昔の自分が今の自分を助けてくれる

これに尽きるんじゃないかと思います。

もし参考になりましたら。

IE8には悩まされている方も多いかと思います、いや多いはず。
多くないですか、いやそうでも(以下略)

IE8はIE7から随分と一気にレンダリングの仕様が変わったのと、気がつけばWindowsUdateでどんどん広まっていたので、なかなかしんどい問題です。

きっちり設計してればそんなに崩れたり動かなくなったりしないのですが、いかんせんスピードと対人月効果みたいなもので動いているタスクの場合、そうもいかず。
CSSハックが裏目に出たりと、諸所修正に追われていました。

そんなんをMicrosoftは見越していたのか、互換表示モードというものがついていますね。
これをONにすると、IE7での見た目に準拠した形になり、さらにドメインごとにそれがリストに入り。設定が保存されますので、いちいち毎回切り替える必要はないです。

サイト運営者側で、どちらのモードで見せるか変えられる

とは言え、運営者側で強制的にどちらからのモードで見せたいこともあるかと思います。
例えば、IE8にがんばって対応したから、とかIE8には対応できそうになりから、とりあえず問答無用でIE7で見せたいという場合でしょうか。

これは可能で、metaタグで決められますよね。
正確には、ユーザの互換表示設定を一時的に上書きできます。具体的には以下ですね。


  // IE8モードで見せたいとき
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">

  // IE7モードで見せたいとき
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">


とは言えこれは一時的に上書きするだけで、リストから自動的に外してくれるわけではないです。

ではっそれが無理かというとそうでもないみたいです。以下の記事をご覧ください。

▼IEBlog : IE Compatibility List Pruning
  http://blogs.msdn.com/ie/archive/2009/07/01/ie-compatibility-list-pruning.aspx

具体的には

  1. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">と書く
  2. サーバのルート直下に「IEStandards.xml」をおく
  3. 2のファイルの中身は<IE8StandardsMode/>だけ

としておくと、自動的にサーバがXMLを取りに行き、リストからも消してくれるそうです。

というわけで、もう完璧だ!と思ったらこのXMLの設置をおすすめします(^-^


 

Google Trendでみる社会情勢

よく、検索エンジンの検索窓にはニーズと興味が詰まっているなんて言われます。

そんなことに関連した記事でこんなものがありました。

Google Trendの統計情報は社会情勢を如実に反映しているよ、という内容。

▼Google’s Suicide Watch
http://www.loosewireblog.com/2009/06/googles-suicide-watch.html

この記事の中では"commit suicide painlessly" をまず題材にしていて、日本語だと「苦しまないで自殺する(には)」というところでしょうか、これの検索数の変化を見て、不景気に始まる情勢に沿っているね、という話になっています。

実際、日本をターゲットにして「不況」「不景気」なんかで検索すると、大体世間で騒がれ始めた時期に増えています。

▼Google Trends: 不況
http://www.google.com/trends?q=%E4%B8%8D%E6%B3%81&ctab=0&geo=jp&geor=all&date=all&sort=0

季節モノで言えば「ボーナス」やら「梅雨」なんかは如実に季節性が出ますね。

▼Google Trends: 梅雨
http://www.google.com/trends?q=%E6%A2%85%E9%9B%A8&ctab=443356416&geo=jp&date=all


しかし、自殺の方法はともかく、不況やらなんやら、挙句の果てには梅雨だとか、そんな語句をほんとに検索してるのか、何のために検索しているんだという疑問もあります。

自分の感覚としては、ほんとに調べたいものだけを調べる人っていうのはそれほど多くなくて、ひとたび検索窓に色々打ち込み始めたら、一つや二つ、なんとなく思いついた言葉を検索しているんじゃないかと思います。

そういうのが、つもり積もっているのかな、と。

で、突然マーケティングの話ですが、だとすると、この辺のKWはあんまりキーワードマッチ広告には向いてなさそうですね。

キャッチ勝負でニーズを思い出させる・作ってしまう方向でないと、うまくいかないかなと思います。コンテンツマッチですね。

うーん、しかしそんなこと考えるとこれからはコピーライティング・ボディライティングがどんどん重要になっていきますなぁ…。勉強しないと。

デザインはツールである程度までは何とかなりますがライティングはそーはいかないですもんね。
 

元ネタは

▼Lessons from Gmail: Using Timers Effectively
 http://ajaxian.com/archives/lessons-from-gmail-using-timers-effectively

Gmailのモバイル版の開発者の一人Neil Thomas 氏が、Google Code のディスカッションで書いたことが載っています。

高フリクエンシーのタイマーと低フリクエンシーのタイマー、インターフェイスをもっさりさせないためには、どっちを使えばいい?という内容です。

実際にGmail for Mobile を開発しながら調べたとのことです。

詳細はリンク先を見ていただくとしまして、回答のサマリーとしては

  • 1秒後などの長いタイマーは、多重起動してもほとんどUIをもっさりさせることはない
  • 100ms~200msのタイマーは、かなりインターフェイスに影響を与える
  • なので、長めのタイマーを必要十分に使うというアプローチが最適
  • ただ、やはり細かい間隔のタイマーが必要な場合は、グローバルなタイマーを一つ用意するだけにとどめて、それを使いまわすのがいい。
  • 細かいタイマーをたくさん使うのはとにかくやめたほうがいい

という感じでした。

確かにタイマーって、とりあえず使ってしまいがちだし、間隔も適当にふってしまいがちです。

なんか作ったモノの動作が遅いなーと感じている方は、チェックしてみては、いかが、かと。

オンライン上にはたくさんのWEB系の開発関連ツールがあります。
誰かの紹介記事経由じゃないと探すのがおっくうになるくらい、あります。

逆に言えば、ツールを開発した方としてもなかなかその存在を知ってもらえず、最悪他の類似品に取って代わられるということも。

また、すでに他の人がいいものを作っていたのに、それを知らずに車輪の再発明にリソースを注いでしまうのは、WEB全体としてみればリソースの損失です。

そんなんを解消してくれそうなポータルができました。

 ▼Open Web Tools Directory.
  http://tools.mozilla.com/

使い方は直感的で、下の検索ボックスに「JavaScript」など、探しているツールのKWを入れるだけです。後はアイコンをクリックすれば説明が出ます。

ツールを開発した人へ

ちなみに、開発した人は自分で登録ができます。登録フォームは以下です。

http://spreadsheets.google.com/viewform?formkey=cjJTMzFrOGUtcXRYRm9rcUQtTDd4UkE6MA..

生産性を上げて上げて、余剰時間を別の生産作業に当てて、とまわしていかないと、時間がいくらあっても足りないWEB業界です。

ツールを使ってどんどん効率化していかないと、新しいことも手がつかないですね。

刃を研ぐことにできるだけ時間を使うことが、長い目で見て重要だなと日々思います。

SERP Analytics - Comprehensive Set of SEO and SEM Research Tools.jpg

SEOをする時、一番大事なのは戦場としてどのKWを選ぶかですよね。
具体的には、そのKWで上位表示できそうかどうかという競合調査が必要です。

自分の場合、立ち上げようとしているサイトが、どのくらいの被リンク・内部要因の充実を図れるかを把握した上で、狙っているKWごとに

大雑把には

 ・スニペットとKWの適合具合
 ・被リンク数

あたりと、その他に

 ・ドメインの年齢
 ・インデックス数(コンテンツの量≒内部リンクの量、とすれば)
 ・ページランク(今更感ですが指標として)

などを調べます。

ただこれ、いっこいっこ手で調べていくと大変です。

そんなことを思っていたら、FireFoxにこんなアドインが。

 (Advanced) SERPAnalytics Google search
 https://addons.mozilla.org/ja/firefox/addon/12143

これをインストールすると、FIreFoxの検索ボックスに「SERPAnalytics」というのが追加されて以下の指標が検索結果に付随して出るようになります。

これはらくちん。

「PR,YL/YLD,GI,YI,YD」あたりをチェックしておけば大体事足りますね。

クリティカルキーワードについては、定期的に巡回させてモニターしておきたいです。
なんか仕込もうかな。


指標一覧

PR: ページランク
YL: Yahoo!で"link:"で出る被リンクの数
YLD: Yahoo!で"linkdomain:"で出る被リンクの数
QR: Quantcast での順位。
QuantCastは、Alexaみたいなものです。ただ統計対象が米国のみなので日本でマーケするならあまり関係ないかと。ちなみに1位はGoogle.com、2位はmsn.com、3位がYahoo!です。

 #http://www.quantcast.com/top-sites-1?r=3#3

WR: WebArchiveで保存されている最も古いキャッシュの日付
Cl: この検索結果において得られているであろうクリック数(?)
CE: PPC広告で同じだけトラフィックを得るためのコスト(?)
GI: Googleにインデックスされている数
QT: Quantcast のトラフィック数
Forum: フォーラムからのリンク(どこからかなど詳細不明)
YD: Yahoo! Dir - 米Yahoo!のディレクトリでそのサイトのドメインを検索したときにヒットする数
DZ: - DMOZでそのサイトのドメインを検索したときにヒットする数
Whois: そのドメインをWhoisでひく
YI:米Yahoo!にインデックスされている数
MI: MSNにインデックスされている数
GCD: Googleにキャッシュされている直近の日時

それ以外にも、検索結果で出ているサイトのPageRankの最高値なども表示されます。
うぅむ、かゆいところに手が届く感じ。

データを取る工数が削減できるのは本当にうれしいです。

 

前回の「売り手と買い手の意識のズレは用語のズレに出やすい」の続きです。

ついで、Cnetがニュースにしてる方のお話ですが、IMJ調査の結論としては

「モバイルショッピングサイトではPCサイトに比べて、購入を決めた商品のみを「買い物かご」に入れる、「1点買い」を行っているユーザーが多い」

ということでした。

  ▼モバイルショッピングサイトの「買い物かご」ページに関する ユーザビリティ調査

実感としても確かにそうだと思います。
ただ、このデータだけだとその原因が

  • 単に携帯電話のインターフェイスがプアだから、めんどくさくて少ない点数しか買わない
  • そもそもお客さんは一点買いしようとして携帯サイトにアクセスしてる

のかはっきりと分からないです。

ECサイトが採るべき対策は、このどっちなのかで随分違いますので、気になるところです。
ではどっちなんでしょうか。そしてどうしたらいいんでしょうか。

モバイルでは「1個」、パソコンでは「5個」--ショッピングサイトでの購入個数に大きな違い」という記事がCnetに掲載されています。

IMJモバイルが行った、「モバイルショッピングサイトの「買い物かご」ページに関するユーザビリティ調査」が元ネタなので、こちらを見た方がいいかと。

  ▼モバイルショッピングサイトの「買い物かご」ページに関する ユーザビリティ調査

cnetでは買い物かごの使われ方の調査だけがピックアップされていますが、元ネタの方では、その他にも

  • 最も浸透している名前は「買い物かご」「ショッピングカート」
  • 使いやすい買い物かごを作るためのポイント

などが載っています。

この結果を見ていていくつか感じたことがあったので、その辺りをざっくりと。

以前からずっと、DreamWeaverの検索置換結果をどうにかして、見やすい形に保存できないだろうかと思ってました。理想はCSV、ないしTEXTでも。

理由としてはもう「必要なときに必要なものだけをアップする」したいからです。

自分で全部手を動かすなら、まだなんとかなるかもしれませんが、チーム作業であれば依頼するにも再鑑するにも影響範囲の把握のために、リストがないと厳しい。

ちょっと大きな規模のサイトであれば、わさっとまとめてアップなどしてしまえば何が起こるか分からない。別タスクで修正中のところもあるかもしれませんし。

ASPとかPHPでincludeかけてたらページが見られなくなってしまう恐ろしさも。

と言うわけでDreamWeaverで何とかならないかと、探していました。

一般的な作り方をすれば、WEBサイトってつまりはたくさんのHTMLドキュメントの集まりです。

なので例えば全ページのフッター部分を入れ替えたいとか、メニューを追加したいとか、そういうことをしたくなると、どうしてもめんどくさいです。

ただ現在では、PHPやSSI、WindowsサーバならASPで、パーツを共有化したりと言う手法も広まってるので、そのへんを組み込めば楽になります。

とは言え、原始的な一括置換やらの方法を知っておくと何かと便利かと思いますので、自分が良く使ってるソフトやらやりかたをご紹介します。

071017_04.jpg随分IE7の使用率が増えてきましたね。仕事で実感します。お客さんのお客さんが一般の方が多いせいもあってか、こないだログ見たらIE7が20%に迫っていました。

これは…確かに量販店行ってもほぼ全てVistaですもんね。仕方ないのかも。
そんな状況でWeb系の仕事は中々頭が痛い状況です。

以前に記事でside by sideでInternetExplorer6とInternetExplorer7を共存させる方法の記事を書きました。
http://www.7korobi8oki.com/mt/archives/000094.html

ただ、これ実際やってみると、標準のブラウザ設定周りや、あるいはIEのエンジンを使ったSleipnirみたいなブラウザからIEを呼び出す場合で、どうにも妙な挙動を示すことが多く、正直使うのが怖かったです。

それでいろいろ検索していたら、このマイクロソフト発の方法がどうやら今は一番安定してるみたいですね。

普段はIE6を使いつつ、VirtualPC2007をインストールして、その中でXPをブートして、IE7を使うという方法。
どうやらMicrosoftもおすすめしているようで、今年2007年12月7日までの期限付きですが、ライセンス不要のXPとIE7のセットを無償配布していました。

該当のIEBlogの記事はこちら。
■IE6 and IE7 VPC Refresh Available
http://blogs.msdn.com/ie/archive/2007/08/20/ie6-and-ie7-vpc-refresh-available.aspx


なんかいたれりつくせりなので、とりあえず入れてみました。

yac.gif

こないだ初めて、Yahoo!のFlash広告を作りました。メガバナーっていう 728×90px のFlashバナーでした。
ひとまず普通にあのサイズで作れば良いのかなと思って気軽にはじめたら、どうも色々と制約があるみたいで、結構難儀しました。

まず、入稿するデータは三種類。
  ・スーパーバナーMega(Flash)
  ・スーパーバナーMega(ミドルFlash)
  ・スーパーバナーMega(代替イメージ)

それぞれを、視聴者の閲覧環境によって切り替えるようです。
具体的には、Flashの1フレーム目のバイト数と、閲覧者の回線速度を比較して三つのうちどれを出すか決めているようです。
 

actual.jpg前に、実際にブラウザはどのくらいのサイズで使われているか?というエントリーで書きました、Baekdal氏の調査ですが、予告どおり、最終調査版がこのほどできたそうです。

該当のエントリーはこちら。
Actual Browser Sizes (final) - Baekdal.com

もともとは、JavaScriptで単純に得られる画像解像度をあてにしてWebサイトの横幅を決定するのはどうよ?というところから始まったものです。

実際には最大化してるかどうか分からないし、ツールバーやエクステンションバーもあるし、お気に入り出してるかとか、と。

結論としては以下のようになっています。
 

actual.jpgWebサイトの横幅はどのくらいが良いかと言う話で、よくスクリーンサイズが基準とされますが、

実際はお気に入りが表示されていたり、ブラウザを必ずしも最大化していなかったりで、中々JavaScriptで取得したスクリーンサイズは基準になりませんよね。

その辺りを調査した記事がありました。
11月くらいにはより多くのデータで再分析のレポートをあげてもらえるそうで、大期待です。

Bakal.com::Actual Browser Sizes - Preview

winklogo.gifソフトの使い方解説ムービーを作ったりするのに大変便利だと評判だったWinkが、今月の12日にメジャーバージョンアップされていました。これが、かなりの機能強化でびっくり。

■DebugMode Wink DebugMode Wink [Homepage]

Wink1.xについて

以前の1.xは、

  • 一つのフレームに一つのテキストボックスしか入れられない。
     (かろうじて「コピーして併合」して、2つのボックスを表示することができる)
  • 画像の挿入はできるけど、全く変形などできず融通が利かなくて実質使えない
  • テキストボックスとカーソルと戻る進むボタンくらいしか用意されていない
  • 2バイト文字がちゃんと扱えない。
  • テキストボックス内の書式が、文字サイズとフォントしか変更できず、しかも一括でしかいじれない。
  • アンドゥができない

などの、使いづらい部分がありました。

でも、それをさっぴいても、操作画面を簡単にキャプチャ出来て、テンポ良く注釈やらストップアンドゴーをつけられて、非常にいいソフトでした。

Flashでイチから作るのに比べれば、下手したら10分の1くらいの時間でチュートリアルムービーが作れるんじゃないだろーか、と。

それに、Flashは使い方を覚えないとだめですけど、Winkは、ちょっと使ってみれば、恐らくWebデザイナー的な知識が無くても使えます。

【参考記事】
MOONGIFT - Wink - オープンソースによるIT戦略支援 -
Passion For The Future: デスクトップ操作を録画してFlashプレゼンムービーに変換するWink


Wink2.0にバージョンアップ

そんなすばらしいフリーウェアですが、この度2.0にメジャーバージョンアップ。

主な変更点は、リリースノートによるとこんな感じです。

本家のリリースノートはこちらから。
DebugMode Forums :: View topic - Wink 2.0 (windows) released.

  • アンドゥとリドゥができるようにした。
  • いくつでもテキストボックスを配置できるようにした。
  • いくつでもテキストボックスを配置できるようにした。
  • ムービー中から他のサイトにリンクを貼れるようにした。
  • 画像をちゃんと扱えるようになった。
  • テキストボックスとは別に、矢印などのシェイプを使えるようにした。
  • 音声を扱えるようになった(キャプチャ中でも、アフレコでも)
  • プロパティパネルを使いやすくした。
  • ボタンが全く無い状態で、swfを出力した際に、そのswfがチカチカ点滅するバグを直した。
  • 編集時には見えるが、出力はされないという設定を、フレームにできるようにした。
  • 他のFlash編集ソフトで扱えるように、swfを、Winkで独自の圧縮をかけない設定で出力できるようにした。
  • たくさんのバグつぶし

いやはや、使ってみてびっくりです。
特に、アンドゥとリドゥが出来るようになったことと(それまでは失敗したらフレームを消さないといけなかったり)、いくつでもテキストボックスを配置できるようになったのが、素晴らしく便利。

また、画像を読み込んで普通にリサイズして配置できるのも、当たり前といえば当たり前の機能なんですが、是非できるようになってほしかったので、ありがたいです。

また、リンクを貼れるようになったことで、小さなチュートリアルムービーを組み合わせて、Webアプリケーションのデモを作るなんていうことも、できそうです。

出力形式

Macromedia Flash : 
  いわゆるHTML+swfです。
Standalone EXE : 
  EXE形式です。見た目はFlashで出すのと同じです。結構便利かも。
PDF : 
  各フレームを1ページとして、複数ページのPDFを作ってくれます。
PostScript : 
  とりあえずPSファイルが出ましたのでIllustratorで開いてみたら、
  最初の1フレームの画像が出てきました。謎。
HTML or any of the above image formats. :
  HTMLと好みの画像形式で、縦にずらっと1フレームごとの画像を並べてくれます。


音声の読込

mp3とwaveを読み込めます。
ただ、フレーム単位でしか配置できません。
つまり、1分の音声を読み込ませると、それが終わるまで次のフレームに進まない模様です。

ユーザーフォーラムでも回答がありました。
http://www.debugmode.com/userforums/viewtopic.php?t=2797

なので、喋りながら、後ろで画面を動かすには同時録音しかないみたいです。
この辺は、次期バージョンに期待!という感じでしょうか。


なにはともあれ、
仕事にも私事にも非常に使えそうで、わくわくしてます。

お客さんから、IE7でもWebサイトのデザインは大丈夫なの?という問い合わせがあったのですが、素直にインストールするのは、なんか戻せなくなったりしそうで怖いので、参ったなーと思っていたところ、side by side 共有みたいな形でStandaloneでいけるという記事を見つけました。

 ■Test Internet Explorer 7 Without Installing It
 http://googlesystem.blogspot.com/2006/04/test-internet-explorer-7-without.html


これはこれはと思って、とりあえず朝からやってみた。

Side by Side で使うことは、ちなみにMicrosoftはサポート外を表明してます。

 ■IEBlog : IE December Security Update ? addressing scattered reports of odd browser behavior
 http://blogs.msdn.com/ie/archive/2005/12/16/504864.aspx

もしIE7β1を、サポート外の side by side でIE6と一緒に使うなら、レジストリの値が正確じゃないので、ちゃんと動かないそうです。

「If a user has ever attempted to run IE7 Beta1 in an unsupported side-by-side configuration with a version of IE6, IE7 Beta1 puts a registry key on the machine the first time a user executes the IE7 version of IEXPLORE.EXE. This key is part of an normal IE7 installation on XP, and will not be configured correctly if an unsupported side-by-side install is used. 」

実際、新しいWindowで開こうと思っても、何も開かなかったり、特定のページを開くとハングしたりはしますので、ご注意をば。
てか、とりあえずGoogleが開かんとです。


やり方

まずは、ここからIE7β2をダウンロード。

 ■Internet Explorer 7: downloads
 http://www.microsoft.com/windows/ie/downloads/default.mspx

で、さっきのサイトではWinZipでexeの中身を取り出して、とありますが手元のLhazで出来ました。

"C:\Program Files\Internet Explorer 7"って感じでフォルダを作って中身を放り込みます。

続いて、ie7.bat という名前で、バッチファイルを作ります。
内容は、サイトに掲載されているものそのままでOKでした。

バッチファイルの解説など、詳しくはこちら。

 ■IE7 Standalone Launch Script
 http://weblogs.asp.net/jgalloway/archive/2005/12/28/434132.aspx


で、それを起動するVBスクリプトを、サイトの指定どおりに作ります。

最後に、updateというフォルダに入っている「xmllitesetup.exe 」というものを実行します。
これをしないと、タブが使えないです。

後は、先程のvbsファイルをダブルクリックして起動すればOKでした。


とりあえず、基本的にかなり不安定でした。
とりあえず新しいwindowでは開けないです。ちょいちょい落ちます。
レンダリング自体は、普段Mozillaでチェックしていれば、見た目は、あまり問題なさそうな感じです。

これから、こいつも視野にいれていかないといけないですねぇ。
中々制作側としてはしんどくなりそうです。

でも、新しいものは楽しい…。

InternetExplorerのエンジンを使っていると、HTMLファイルから画像ファイル、JSやCSS、swfなどが、設定によっては、ローカルに「インターネット一時ファイル」とかそんな感じの名前でキャッシュとして保存されてますよね。
  #これって、毎回最新バージョンを確認する設定にしても、
   キャッシュは毎回されてるんですね…いまさら知りました。

で、この辺は自分が確かめたわけではないのであれなのですが、HTMLは「毎回新しいバージョンを確認する」にしておけば、きちんと毎回最新版が来る、らしいですし、制作側でno-cacheを設定しておけば、毎回強制的にクライアントに読み込ませられます。

けど、どうもCSS等は、キャッシュが残ってしまって悪さをすることがあるそうです。
っていうことを、以下の記事で知りました。

Stefan Hayden » Blog Archive » CSS Caching Hack -- Graphic Artist, Technophile, Web Librarian, Embarrassingly cute spelling mistakes.

要は

<link rel="stylesheet" xhref="http://www.hogehoge.com/style.css?version=1" type="text/css" />

にして、パラメータをつけてそれを変更のたびに変えてあげれば、ブラウザはちゃんと最新版を取りに来てくれるよ、ということです。

検索しても中々類似のネタが見つからないので、これが事実なのか分かりませんが、後ろにパラメータをつけて、最新版を持ってこさせるって言うのは、なんかに使えそうですねっ。

Mactopiaの、Internet Explorer 5 for Macによると、Mac用のIe5.2.xが今年いっぱいで開発とサポートが中止されるそうです。

ダウンロードは同ページから来年の1月末日まで可能ということで、早めにキープしておくが吉かも。

複数クラス指定が出来なかったり、background-imageの指定に癖があったりと、なかなか難しいブラウザでした。

でもなんか、CSS自体のサポートは結構良かったような…。

相も変わらずWindowsの和文フォントは汚いままなので、"Yahoo! Japan"の様に、Webサイトの題名となる様なタイトルを示す部分は、画像で作られます。HTMLとしても、SEO対策としても本来はh1で囲みたいところですが、正直しんどいのが現状です('A`)

そんなところに、両者を満足させる方法が、Ten CSS tricks you may not know : evolt.org, Codeという記事に。なんでこんな簡単なことに気がつかなかったのだろう… onz

具体的には

例えばブログの記事を囲む枠をCSSだけで作ろうとすると、数種類のborderから選ぶことになるわけですが、今のところ"実線(solid)"、"破線(dashed)"、"点線(dotted)"、"二重線(double)…など、8種類がCSS2では用意されています。
  #CSS2仕様書はこちら[http://www.y-adagio.com]

CSS3では、さらにいくつかの種類が用意される模様です。波線とか2つの点と短い線の繰り返しとかのようです。
  #CSS3ワーキングドラフト[http://www.d-toybox.com/]

しかし、わりとメジャーな角丸についてはどうしようもなく、必要な場合は画像を作って実現することになりますが、大きさが画像のサイズに縛られるので、使い勝手が悪いのが問題です。コンテンツを他のページに移植するときなど、出来ればフレキシブルにしたいところです。

そんな悩みの一つの解決策として、456BEREA.Streetに、透過画像とCSSのみによる柔軟性のある角丸ボックスの作り方が載っていました。

ちなみにマークアップを維持したい方は
JavaScriptだけで角丸Box。Nifty Corners(TM)がバージョンアップ。」をどうぞっ。

free_tips.jpg前のエントリー「悪いプロジェクトを見極める10コのポイント」を、とてもたくさんの人に興味を持っていただいたようで、ちょっとアクセス数にびびっていたりしますΣ('A`)

今日は、そのエントリーの中で紹介していた、フリーランスにおくるTipsという別記事を読んでみました。
結構なコメント数なので、斜め読みになってしまいましたが、示唆に富んだコメントがたくさんあったように思います。

原文記事はAndy Budd::Blogography: Top Tips For Freelancersから見ることが出来ます。 現在43コメント。


読んでみて、総じて言えるのは

free_tips.jpgプロジェクトリーダーの人、ディレクターの人、個人で全部やってる人など、案件を受けるか否か、受けるならどういう条件で受けるかなどは、常に悩みの種ではないかと思います。

10 Bad Project Warning Signsには、こんな状況には気をつけるというポイントが10個載っています。

お困りのディレクターの方、フリーの方におススメかも。
でも実は一番読んでほしいのは、営業さんかもしれない…。

Return of Design - The Web Design Client's Bill of Rightsという記事です。

Bill of Rightsと言うのは、権利章典のこと。イギリスで名誉革命の後に宣言された奴です。スチュアート朝でしたっけ。一応卒論がその辺りだったのに、もうさっぱり覚えてないのは何故('A`)

そんなごっつい名前がついてますが、内容は昔から言われている「良いWebサイトの条件」みたいな奴です。アクセシビリティという文脈で出てきます。そういえば、アクセシビリティという言葉も、もはや一般的になりましたが、元はユーザビリティと同様にニールセン氏の言葉なんでしょうか。

それはともかく、このサイトでは以下のものを挙げてます。

Internet Explorer 2.0のころから開発に関わっているIE開発者(現プログラムマネージャ)Chris Wilson氏のブログ、IEBlog :にて、新しいInternet Explorer 7に実装されるものの情報がちらほらと掲載されました。

具体的な記事は、IEBlog : IE7 beta 1 ?? A few details…です。著者の育児休暇中に他の開発者が行っていたものだそうです。

具体的には、Web制作者から要望の「アルファチャンネル付きのPNG」がサポートされることが決まったようです。また、CSS周りのバグつぶしに、結構な労力がさかれているとか。Web制作界隈には朗報となりそうです。

big_cssreboot_02.gifThe Web Standards Projectにて、CSS Reboot - May 1st 2005というものについての記事がありました。

どうやら、CSSによるセマンティックなデザインを心がけるサイト制作者達が、5月の1日に一斉にデザインを更新しようじゃないか、という企画のようです。そのOfficialサイトがCSS Reboot - May 1st 2005です。

ちなみに、CSSを推進する集まりが、こういう企画を定期的に行っているということではなく、CSS Reboot についてのページによると、それ以前から、"The May 1st Reboots"という名前で一斉にデザイン衣替えを行っていたりしていたそうです。それはそれでもちろん成功だったのですが、どうもFlashを用いたものが多すぎる、という悩みがあったようです。
  #MAY 1st REBOOT 2005

なので、今年2005年はCSS REBOOTSと称して、CSSを用いたセマンティックなHTMLによるものでREBOOTSを行おうということになり、"CSS REBOOT"が実現されたというのが事の経緯のようです。

Web Browser Standards Supportにて、MSIE 6, Firefox 1.0, and Opera 8の、Web標準規格対応状況が表にされています。具体的にはHTMLとCSSとDOMになってます。

Yが"対応"、Nが"非対応"、Iが"不完全な対応"ですね。
ざっと見ていると、知らない要素がたくさん('A`)

自動段組みスタイル生成機

http://www.inknoise.com/experimental/layoutomatic.phpの「layout-o-matic」は、2段組みや3段組みのベースになるCSSを自動的に生成してくれるというのものです。

全体の枠とmarginとpadding以外は弄れませんが、生成されたスタイルを元に修正していけばOKですね。ぽんっとスタイルが欲しい時に大変便利です。

「Generate box model hack 」のチェックボックスをONにしておけば、IEでのボックスのレンダリング周りのバグを回避することも可能です。
 #widthがmarginとかpaddingとかborderを含んでしまってるという奴

Web制作はかなりめんどくさい作業が多いです。ラフ作っているとき以外は、基本的に楽しくないと思います。強いて言えば、確認しないで基本的なスタイルをサクっと書いて、それが完璧に思い通りに実現した場合、思わず小声でYear!と言うことはあります。

ただ、成功しても、缶コーヒー買いに行く時間が浮くくらいのメリットしか無い上に、失敗すると3倍時間がかかると言う優れものです。そんな感じで、楽しくないコーディング周りを少しでも快適にしようと言う、3K職場改善ソフトをご紹介。

元記事は、Webデザインをする時に色々ためになるSitePointの、"サイト制作に役立つ5つの無料ソフト特集"「5 Free Windows Web Design Apps You Can't Live Without! [Software Tutorials]」。

かなり使えるソフトが載っていました。作者の方々に感謝。

b_color.jpg
参照先:[ws] Color Scheme Generator 2

これは、ひと味違う配色ジェネレータです。モノトーン、反対色、3色配色、4色配色、類似色の色々なパターンを作ることが出来ます。何はともあれいじってみると不意によさげな色が出てきたりします。

いじっているうちに、どうも真ん中に出ている色と、右側のカラーコードのところに出ている色が違うような気がしてきました。

Pinterest記事カタログ
Follow Me on Pinterest
無料メールマガジンを購読
WEB戦略無料メールマガジン

ブログ記事より一歩踏み込んだ
実践ノウハウを無料配信中!
→サンプルはこちら

メールアドレス

RSSリーダーで更新チェック

RSS購読はこちらから

※コンテンツマーケティング専門サイト立ち上げ中です!

Facebookページ

カテゴリー一覧

月別の過去記事

プロフィール

卒業後、紙とWEBのデザイナーとして独立。現在は某マーケ系IT会社で、WEBマーケティングとクリエイティブの制作に従事。趣味は車やバイクでの旅行と旅の動画撮影トランペット。IT系の例に漏れずあたらし物好き。 ITmediaオルタナティブブログでも連載中。


【Google認定資格所有者】

無料ガイドブック

無料ウェブ解析ガイドブック

→ 無料ダウンロードは今すぐ!

無料動画マーケティングガイドブック

→ 無料ダウンロードは今すぐ!

提供中SEO・SEMツール

入力したキーワードの上位サイトの被リンクなどの情報を一括で調査。

→今までのツイートまとめ
[twilog]

WEBマーケ関係オススメ

My photos from flickr

そのほか運営サイト