投稿

11月, 2012の投稿を表示しています

【読了】ノンプログラマのためのJavaScriptはじめの一歩

イメージ
WEBで仕事をする上で多少なりとも知っておいたほうが良い知識がJavascriptですよね。

WEBの解析などでもソースを見てなんとなく読める程度の知識は欲しいところですが、この本はサンプルとして90行のコードを紹介し、そのひとつひとつの文の解説で書き方と何が行われているかを紹介、そして文章全体の組み立て方、考え方などひと通りを学ぶことができます。

最後はjQueryの基本と、HTMLの基本、CSSの基本的な部分が書かれています。
Javascriptの本を手に取るということはHTML、CSSの知識は問題無いとおもいますが、jQueryは知っておきたいですよね。

私自身はjQueryの知識が無いので新鮮でしたが。

javascript自体の知識は少しだけしかありませんが、今回この本を買った理由としてはjavascriptの基礎知識があれば、もう少し活用出来るようになりそうなGoogle Apps Script、所謂GASのScript組立の知識としても役立つかなと思ったからです。

もちろんWEBで使うjavascriptとGASは全く別物ですが、同じくfunctionで関数を定義したりvarで変数を定義したり、似た部分も多いんじゃないかと素人ながら感じています。
javascriptを学ぶことで一石二鳥な気がしています。

そんな気持ちで手にとった本ですが、にわかの知識だけだったjavascriptの強化とjQueryを少しかじれて、とても良い本だと思います。
わかりやすい本なので、これから知識を付けたいという人の入門書としては最適ですよ。


ノンプログラマのためのJavaScriptはじめの一歩 (WEB+DB PRESS plus)

Google Spreadsheetを使って、canonicalで指定しているURLをサクッとチェック

イメージ
SEOに携わっているとコンテンツの重要性だの、サイト速度だの色々と問題になりますが、canonicalは指定してるんだっけ?とか、追跡パラメータをcanonicalの指定URLに含めてない?みたいなチェックをサラッとやってのけたいものです。

Google Spreadsheetなら、サイト内のcanonicalで指定されているURLを簡単に抽出出来ます!

importxml("URL","//link[@rel='canonical']/@href")

です。

楽天のサイトで言えば・・・

楽天のトップページにcanonicalが指定されているわけですけど、TOPページのような大きなページは皆がチェックするから別にいいのですが、問題は中の細かいページですよね。



GoogleSpreadsheetでA列にURLを入れて、B列に先程の式を入れた場合です。


B20のセル右上に黒い三角が表示されていますが、自動的にどのURLのソースを引っ張っているかがコメントとして表示されます。

この場合、解析したいページのURLを代入すればOKなので、サンプルURLのリストさえ持っていれば、あとはURLを入れ替えていくだけでサクサクチェック完了!

importXML関数は、Xpathというものを利用していますが、ソース内の文字列を抽出することが可能なので使い道は自由!head要素内のcontentを全部引っ張るなんていう荒業も可能です。他にも便利な関数が色々あるので、ぜひ利用してみてください。

※importxml関数は1スプレッドシートに50個までしか入れられません。

検索結果を表示するURLをウェブサイトへ貼り付ける事でユーザーニーズが埋もれる大罪

サイト内検索はそれをあとで分析するために検索キーワードを取得している事が多いはずですが、サイト内検索は直接ユーザーの検索意図が分かるとともに、サイトの改善に大いに役立ちます。

サイト内検索結果とはいえ、リンクを叩くということはユーザーがそのリンク名に惹かれ、その結果として期待されるものを望んでいるといえるとは思います。誰もが検索ボックスに入れそうにないキーワードに対する補助的な扱いとしてサイト内にリンクを貼るのは構わないと思いますが、それ以上に導線としてちゃんと存在すべきものを検索結果のURLとしてサイトへ貼り付けてしまうことは、ユーザーのニーズを埋もれさせる結果となります。

もちろん、グローバルナビゲーションとして存在しない導線をサイト内検索で把握し、ナビゲーションに追加するという対策もあるでしょう。それも一つのサイト改善ではありますが、より定性データに近い自然な検索キーワードを取得することができなくなります。

サイト内という意味では改善に結びついても、外部からの流入を考えた場合、自社で決めたキーワードで外部から入ってくるわけではなく、むしろユーザーが自然と発想し検索されるキーワードに合わせたタイトルや説明文、そして検索でヒットすることが重要なわけです。

その意味においてウェブサイト内に検索結果URLを貼り付ける事は自らの首を締めているだけで、ウェブマスターとしてはやってはいけない大罪と言えるのではないでしょうか。

Googleショッピングの商品リスティング広告が2013年の2月13日から開始になる

イメージ
アメリカでは10月17日から導入されていますが、日本を含めイギリス、ドイツ、フランス、イタリア、スペイン、オランダ、ブラジル、オーストリア、スイスで2013年2月からGoogleショッピングに登録した商品のリスティング広告配信が始まることになりました。恐らくアメリカはBlack FridayやCyber Mondayに先行する形でリリースを急いだんだと思います。

Google検索結果に「Sponsored」として、現在Adwords広告が占めている部分に商品データが表示されるというものですが、商品名やブランド名での検索でとても力を発揮するものと思われます。

インハウスでSEOやら解析やらを行なっている立場からGoogleショッピングを見ると、Googleショッピングの重要度が日に日に増していると言えます。Adwords等の検索連動型広告の運用を担当している方が一緒にプロダクト広告も管理・運営するのが一番キレイな導入方法なのかもしれません。

(画像はGoogle Commerceブログより)

(参考)Google Shopping goes global

何度も読みたくなる書「学問のすすめ」

イメージ
有名な福沢諭吉の「学問のすすめ」ですが、本書は全く色褪せない本と対話し、社会の中の一人の人間として、また自分というものを見つめなおすきっかけを作る良書ですよね。

今「学問のすすめ」を読んで、前半部分では国とその国民としての1個人というものの存在を考えさせられます。本書の中に「政府は法律をつくり、悪人を罰し、善人を守る。これが政府の「商売」というものだ」という文章がありますが、その意味において「法律」を国民がいかに守る義務があるのかという事を説きます。

「政府の仕事は、犯罪者を取り締まり、罪のない人間を保護することより他にはない」わけですが、政府自体はお金を生み出さないから国民が税金を収めることになる。法律では罪のない人間を保護する方法として「権利」を生んだりしているわけですが、ここで考えさせられるのは「税金」について。

税金を払うのは義務ですが、国が法律を制定しそれを施行し、取り締まる行為は権利ではないはずです。時々警察自体が犯罪を知りながら動かないという意見が出ますが、これがもし本当だとすると義務を果たしていないという事になります。

そして一番考えたのは「インターネット」です。
ダウンロード違法化なども同様に法律が制定されたということは、国民が行なっている行為に基づき罪を犯したものを取り締まるための法律として制定されたということになります。罪とは一体何でしょうか?著作権などに当たるのでしょうが、本当に法律で生み出された権利は罪を犯していない人を守るための権利なのでしょうか?

法律として制定されるということは、それが制定されるだけの事件や出来事などが存在しているはずです。インターネットのダウンロード違法化で言うならば、著作権物が古くはWinny、Shareなどで共有されていた実態がそうなのでしょう。

では、SOPAやACTAのような国際的な法律はどうなのでしょうか?
法律におかしい点があるならば異議を唱えよと言う事も本書内に書かれていることではありますが、このような法律の場合、国民は税金を収め異議を唱え、日本という国に変更を促すという流れになるでしょう。ただ、国際法に批准している国としては恐らく日本内に特別な法律を敷くことは出来ないでしょうから、やはり日本を代表して国際的な会議で疑問を提示するという流れになるのでしょう。

税金を収めている以上、国にそうした対応を行なっていただかなけ…

iPhoneのペーパープロトタイピングをiPhone上で動かせるPOPが面白そう

イメージ
iPhoneやAndroidでペーパープロトタイピングを行うことはUIとその結果のUXを考える上でとても重要なことは言うまでもありません。
また、社内で事前に動きをシミュレートすることで社内同意をとりつけ、その後の開発で出戻りが出にくくなります。
そのペーパープロトタイピングをより強力にサポートし、実際のiPhone上でシミュレートできるのがこのPOP(prototyping on paper)というサービスです。
POP


 手順を見る限りとても簡単で、まず適当な紙にワイヤーフレームを描いていきます。

このフェーズはとても重要なので時間をとってじっくり描きましょう!
 次に、それぞれのワイヤーフレームを写真に収めPOPアプリへインポートしていきます。

POPアプリではコントラスト等を自動調整してくれるみたいです。
そしてPOPアプリでシミュレートするために、"リンクスポット"同士をつなげていき、「ストーリーボード」を作成していけば完成します。

そのプロトタイプを同僚や友人にiPhoneやiPad、ブラウザでシェアできて動かせるだけでなく、そのプロトタイプ上にコメントを直接もらうことができます。

このアプリでスマートフォンアプリで始まるリーンスタートアップや、既存ウェブサービスをiPhoneアプリ化する時などにもすごく有用なサービスであることは間違いありませんよね。

POPはこちら

鹿野さんのUI・デザイン論インタビュー記事が面白い

遅ればせながら昨日読ませていただいた鹿野さんのUI・デザイン論が面白かったので共有。

デザインは“世界観”を築くためにある ― WOW 鹿野護のUI・デザイン論

人は感覚器官の中でも視覚に大部分を頼っていますが、映像によって人の行動が制限されるという概念は「アフォーダンス」にも繋がる概念です。視覚で捉えることにより習慣的に期待されるアクションが生まれ、それを実行に移す。そのアクションが失敗すると、判断脳へと切り替わり、別の手法を試します。

ウェブデザインとは、その期待を裏切らない、考えさせないようなスムーズな動きを実現することが大事です。
スムーズな動きを全て実現したもの、それが一つの世界観になるのでしょう。

一つの世界観が出来上がっている事は非常に重要ですが、単にそれだけであれば「統一感のあるサイト」、「目的を見失わないサイト」などの表現が合うサイトになります。もちろん、そこも実現できていないサイトだらけで、WEB担当者は日々改善を続け、まずはその段階までサイトを構築することが必要でしょう。

ただ鹿野さんは、それだけでは記憶に残らないと言います。
初めて出会ったサイトで「偶然性」、即ちセレンディピティを実現する事で印象付け、再びリピートしたくなるサービスが出来上がる。

ただし、セレンディピティも単にランダムだったり、ユーザー行動をもとにしたレコメンドというものよりは、むしろ「キュレーション」という概念。ただ、インタビューでは深く語られていないものの、「Stumbleupon」を推薦されているということは、キュレーションされたカテゴリ的なものをユーザーが選択するという事が必要になります。

1回目のセレンディピティとキュレーションの部分はそのサイトの目的、例えばECサイトを想像すると矛盾点のように感じられますが、情報サイトであれば矛盾点ではないかもしれません。

鹿野さんはECサイトを手がけるとしたら?という質問で以下のように答えています。


インフォグラフィックス的な要素を軸としたデザインをしてみたら面白いのではないかと思います。もっとダイナミックなレイアウトで、グラフィックデザインがそのまま情報のデザインになるような…。「地下鉄の路線図」じゃないですけど、ピクトグラムで終わらず、もっと情報全体の構造を指し示すようなデザインをやってみたい

つまり、商品を探索し発見するとい…

euroIA 2012 Redux in Tokyo(Euro IA Summit報告会)へ参加しました

報告が遅くなりましたが・・・というか、ずっと下書きに入れてたのですが何かを追加してから投稿しようと思って、結局そのままです・・・


ユーロIAの報告会イベントに参加してきました。
色々と刺激となる内容も多かったのですが、結論から言うと、実務レベルでの方法論としては大きく変更はなく、方法論で新たな発見を生むために必要となる仮説の立て方、考え方が大きく変化し、範囲が大きくなりつつあるという状況でした。
キーワードとしては「クロスチャネル」。
ウェブで今流行のResponsive Web DesignとIAということで、「Responsive IA」という言葉も出てきていました。また、範囲の拡大として長くユーザーの行動を捉えて、可視化していく事が大きな流れとしてあるようです。

またプレゼンの中で触れられていましたが、ウェブサイトを最適化するに従って、店の看板を外すとどこの店舗かわかりづらくなってきており、それはサービスの特色をどこで出すかという事になりますが、その点の難しさは非常に同意しています。ECならAmazonのように、見習うのはもちろん良いし、IA的なプレゼンでどう見せるのが良いか示されるのは大手サイトが中心となります。それを受けて同様の改善を行うとサイト構造が似てくるのは必然です。


自サイト内の導線という意味ではもちろんの事ですが、それだけではなく一連の購買活動を通じた自サイトの位置づけを考える事の重要性も大事です。

【気づきを与えてくれるチャート群】
以下の様なチャートをユーザー調査結果の可視化や、シーン×体験の分類などをビジュアルにすることによって発見できることや、説得力が増すと思われる。


Task Pie Chart

Customer Journey Map

Service Blue Print

Ladder Map