【読了】ノンプログラマのための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のような国際的な法律はどうなのでしょうか？
法律におかしい点があるならば異議を唱えよと言う事も本書内に書かれていることではありますが、このような法律の場合、国民は税金を収め異議を唱え、日本という国に変更を促すという流れになるでしょう。ただ、国際法に批准している国としては恐らく日本内に特別な法律を敷くことは出来ないでしょうから、やはり日本を代表して国際的な会議で疑問を提示するという流れになるのでしょう。

税金を収めている以上、国にそうした対応を行なっていただかなければなりませんが、ここで「民主主義」というものの考え方に対して疑問が出てきます。

リーンスタートアップでも語られている通り、人はプロダクト・サービスを与えられて初めてその事が意識上に浮かび上がり意識して検討するわけですが、異議を唱える法律がニッチな分野に携わる人にしか認識されることがない場合はどうなのでしょうか？

普通賛同者を得られないということは、それだけ説得性に欠けるか、または利益を享受されるものが限定されていて世論がそれを許さないか、などということになるでしょうが、元々の母数が少ない時は人数が少ないからといって蔑ろには出来ないはずで、それに携わる人全員の人数を100とした場合の民主主義的な対応ということになるのかもしれません。

国と同じように、お金を生み出すことがない協会や団体組織についての運営費を収めた見返りは何なのでしょうか。そして参加者にはどのような義務が生まれているのでしょうか？
国と同様に考えれば、協会の規約を遵守することが参加者の義務となりますが、団体に対しては規約がコロコロと変わらない以上、参加者に対して機会を均等に与えたり、参加者メリットを高める仕組みが存在していなければなりません。

協会や団体の運営者が貰うお金とは一体何でしょう？
選挙で有名人を立てる行為はどうなのでしょう？
投票しないという行為は一体どういうことなのでしょう？

本当に色々考えることが出てきます。そして一つ一つの質問に一人ひとりが回答を出していく必要があるのではないでしょうか？

「学問のすすめ」では、そのような大きな枠組だけではなく個人として、そしてその感情、特に嘘や欺きなどの多くの悪徳な感情は「怨望」から発生すると述べられていますが、「怨望は貧乏や地位の低さから生まれたものではない。ただ、人間本来の自然な働きを邪魔して、いいことも悪いこともすべて運任せの世の中になると、これが非常に流行する。」と述べられています。

インターネット上での匿名掲示板などは危ないのかもしれません。
インターネット上での煽るような発言や罵りなどは共感覚の欠如なのかな？と思ったりしなくもないわけですが、特にそのような行為は法律で罰せられるようなものではありません。ただ、ニート問題も含め怨望が相当蔓延しているのかもしれないと思った次第です。

自分の感情を見ていて怨望が生まれていると思ったら、再度落ち着いて自分の行動を見なおさなければとおもいます。

また、様々な業種で言えることかもしれませんが、次の一文は肝に銘じておきたいですね(笑) 「独立の気概がないものは、必ず人に頼ることになる。人に頼る者は、必ずその人を恐れることに生る。人を恐れるものは、必ずその人間にへつらうようになる。常に人を恐れ、へつらうものは、だんだんとそれに慣れ、面の皮だけがどんどんと厚くなり、恥じるべきことを恥じず、論じるべきことを論じず、人を見ればただ卑屈になるばかりとなる」 政府を始め、権力者にくっつくと自分を弱らせるという事ですね。

本書内では「官許」として商品を開発したらまず政府関係の団体に近づくなどという行為を恥ずべき行為としています。それは福沢諭吉が小さな政府を理想としているから、政府が何でもやるという世界ではなく、なるべくそぎ落とし仕事を増やさない事が重要だとしていることも関係しているのでしょう。

「学問のすすめ」を読むと、いろんな疑問が頭をよぎるだけでなく、インターネット上での炎上等の問題、ニートなどの社会問題、そして自分の感情を見つめる事など、イイきっかけになると思います。

まだ読んでいない人も、既に読んだ人も、定期的に再読してみてください。



学問のすすめ 現代語訳 (ちくま新書)

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サイトを手がけるとしたら？という質問で以下のように答えています。

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

つまり、商品を探索し発見するというセレンディピティ性を情報デザインという形で実現するということです。

これは規模によって相当難しい部分ですよね。ただ商品の分類やサービスなど、色々と商品を区切った先で実現することは可能だと思います。

色々と思いを巡らせてみると、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