【セミナーレポート】図解で考える顧客視点のウェブ解析設計

見習い小僧

先週の土曜日(27日)、アクセス解析で有名な清水誠氏のウェブ解析についてのセミナーに行ってきましたので、そのレポートをまとめておきます。

今回、ハービスENT梅田の貸会議室で行われたこのセミナーには、おそらく20名ほどの参加者が来られていました。男女比はだいたい、半々より少し男性が多めくらいの割合で、メーカー側の担当者さんからWeb制作寄りの人まで、またEC寄りの人からメディア系を手がけた事のある人まで実に様々なクラスタでした。年齢層も幅広かったです。参加者の幅広さをどう捉えたらよいのか・・・5分考えましたがいまいち良い考察ができませんでしたw

講師の清水先生は日本のウェブ解析界ではとても有名な方で、楽天グループでの解析経験等を経て現在はアメリカのAdobe Systemsにて、デジタルマーケティング製品の品質・プロセス改善に取り組んでおられます。更に株式会社イードさんの社外CAO(Chief Analytics Officer)という日本では珍しい職にも就任されています。ノウハウの沢山詰まったブログや、発売されたばかりの本を紹介して頂いたので、今後更に知見を深めたいと思います。

今回、僕が最も関心を持って挑んだテーマは、「ユーザー体験(UX)とアクセス解析がどのように繋がるのか?」という事でした。どちらもとても重要なサイトの要素だという事は認識していましたが、その関連性までは知らなかったのです。それでどういうことだったか、自分なりの理解で説明しますと、①まずユーザー体験を視覚化します(コンセプトダイアグラム)。②それに対してそのサイトが提供している(あるいはこれから提供すべき)機能やコンテンツを当てはめます。③その機能やコンテンツが上手くいっているかどうかを計る為に必要な指標を図にマッピングします。・・・すると、解析をする際にデータに惑わされず、本当に必要なデータを、それが何の為に必要かとセットで見る事が出来る!という事なのです。

上は、試しに小僧ブログのコンセプト・ダイアグラムを作ってみた図です。正しく描けているか少し不安ですが、流れとしてはこの図を基に、「このユーザー体験を実現するためにはどんな機能、コンテンツが必要か?」を考え、更に「それが機能していることを確かめる為にはどんな指標を設けるべきか?」を考えていくのです。

詳しくは清水先生のブログや著書を参考にしていただくとして、ここからは僕の経験談ですが、Googleアナリティクス(僕の場合)を使っていると、一般的に見るべきだとされる指標を、簡単に、しかもとてもかっこ良いデザインで表示できてしまうので、何となくその数値から見えるものは何か?という起点で解析を始めがちでした。でもUX起点で考えると、本当にそのサイトに必要な指標の分析を行えるから、結果にブレが無くなりそうです。更に、無駄な指標の分析にかける時間まで減らせるという事なんですよ。

UXを明確化してサイトの目的を考える。それに基づいて解析をする。単純化すればこれだけの事ですがこれがなかなか難しいと感じて来たので、コンセプトダイアグラムを使った解析の進め方はとても参考になりました。他にもまだ、解析についての大切な考え方が詰め込まれたセミナーでしたが、それも清水先生の本に書かれているそうなのでコンセプトダイアグラムの詳細も含めてそちらをご覧ください。

セミナー後に開かれた懇親会では、参加者による某ECサイト裏話会に参加させてもらったり、清水先生に個別質問ができたりと、最後まで有意義なセミナーでした。今後、今回得た学びは小僧ブログの各指標アップに活かしますので(←活かすとこそこかいw)、乞うご期待です!

 

■おすすめ記事

【見習い小僧×技術小僧】小僧ブログのレスポンシブデザイン化についてまとめ

【Facebook広告】目を引くキャッチ「俺は、ローラが好きなんだ!」

どうせ1人で過ごす花金なので、今夜は7つの魅力的な水族館サイトを見て楽しむ。

紅葉シーズンに向けて気になる、創業100年を超す京都老舗旅館のWebサイト5選

見習い小僧

10月もあと1週間。11月になれば紅葉シーズンがやってきます。先日の記事でも書いたように、秋になると京都は観光客で一段と賑わうので、個人的にはとても好きな季節です。日本人も外国人もいろんな人がいる街って、自分次第でいろんな人に出会えるじゃないですか。

そんな京都の外から来る人はみな、京都内のどこかに泊まるわけですね。いろんな宿泊施設がありますけれど、京都と言えば歴史と伝統の町なので一生に1度くらいは老舗と言われる旅館に泊まってみたいですよね。ということで今回は創業100年を超す京都の老舗旅館のWebサイトを探してみました。取り組みは旅館によって様々。必見です!

 

1.要庵西富家

要庵西富家さんのサイトは、とてもシンプルなデザインです。ほとんどFlashのサイトになっていますが、いくつかのページのみ別に制作されているようです。予約に関するページはありますが、予約自体は電話のみで受付されているようです。

『京都要庵歳時記』というブログを更新されているのですが、画像を多く載せた記事が高頻度で更新されていて、ご主人と女将さんの人柄が伝わってきます。また、外国人向けには英語のページを用意し、旅館の歴史や設備、料理について触れています。

 

2.晴鴨楼

晴鴨楼さんのサイトは、一見クセはありますが旅館サイトに必要そうな要素(コンテンツ)は一通りそろっている印象。宿泊予約もサイトから直接することができます。また、気になるお風呂や客室の写真、アメニティ情報もばっちり!

京都の基本的なイベント情報を掲載したページは親切ですね!外国人向けの英語ページもちゃんと用意されています。全体のデザインとしていわゆる今風のシュッと整ったサイトではありませんが、必要十分。旅館でのユーザー体験に自信があるからこそ、変にサイトを小細工しなくても・・・ということなのかもしれませんね。

 

3.懐石・宿 近又

懐石・宿 近又さんのサイトはメニューがわかりやすく、動くメインビジュアルも魅力的で大きな写真が多いです。時期に合わせておせちの予約を受け付けていることをバナーでお知らせしている点も「更新されている」という安心感がありました。

コンテンツ面で、調理場のスタッフを1人1人顔つきで紹介をしている点に親近感を覚えました。調理場で働く人って泊まりに行っても会えないですから、ある意味サイト限定感がありますね。掲載されているみなさんが、これまたいい笑顔なんです。お客さん的には、そういうのいいですよね!言語も日本語以外に英語、中国語、韓国語に対応していて、特に英語のページは今回挙げた旅館サイトの中でもかなりの充実度。

オンラインショッピングにも取り組んでいる所を見ると、きっとどなたか積極的な担当者の方が中にいらっしゃるんでしょうね。素敵!

 

4.柊屋旅館

柊屋さんのサイトも、お客さん的に旅館に求めるコンテンツはそろっています。部屋の写真を見ていると、「一度は泊まってみたい」という気持ちになります。予約もサイトから直接出来ますし、外国人向けの英語対応もほとんどすべてのページで完了しています。交通案内ページで各交通手段から旅館にたどり着く方法を個別に書いているのが親切ですね。

 

5.俵屋

柊屋さんの向かいにある俵屋さん。こちらも京都の老舗旅館として知らぬ者はいないというほど有名な旅館さんですが、自前のWebサイトはどうやら持っていない様子。晴鴨楼さんのコメントの中で書きましたが、旅館での体験自体に自信があるからこそ、サイトなんぞなくても・・・という考えもあるのかもしれませんね。

とはいえ「俵屋 京都」で検索すると、トリップアドバイザー食べログに様々な利用者コメントが掲載されていたり、個人ブログでも「憧れの俵屋に泊まった!」的な好意的な記事が多数。自分でサイトを持たずともネットで存在感を示す俵屋、恐るべしです。

 

以上、5つの京都老舗旅館のwebサイトを見てきましたが、以前やった『京都の寺社の、見やすい2サイトと動きがかっこいい2サイト+おまけ』まとめの時よりは最先端感はありませんでしたね。とはいえそこは好みもあるので、「最先端だからいい!」「いまどきデザインじゃなきゃダメ」という気は全くないですが、もしサイトリニューアルをお考えの際は、インフォバーンKYOTOへご一報くださいね!お待ちしてます(はーと)

 

■おすすめ記事

京都商工会議所-新入会員交流会-で見つけた興味深いパンフレットその2

【紅葉便り】清水寺の場合!

【見習い小僧×技術小僧】5つの事例から学ぶレスポンシブデザイン

【Facebook広告】目を引くキャッチ「俺は、ローラが好きなんだ!」

見習い小僧

 

ここ数日、ネット上の様々なところで見かける「俺とローラとソニーのブルーレイ」ですが、Facebook広告にもよく出現します。特徴は何と言っても「俺は、ローラが好きなんだ!」というキャッチで、画像はローラとローラのことが大好きな山下真司の顔アップ。説明文の文字数は64文字です。

突き抜けていますよね、この企画。企画全体として、ネットでバズらせることにフォーカスを当てた思い切った施策に思います。商品が、ネット層が好きそうなものゆえに挑戦的なことができるのかな。突き抜けたキャッチ、突き抜けた2人の笑顔。そして説明文でも「とにかくWEBを見てくれ!」と山下さんの話し言葉のようになっている所が一貫していて面白いと思います。

 

※低額から出稿できるFacebook広告ですが、調べてみると意外に事例が少ないなと思い、試しに記事にしてみました。注目すると面白い広告が沢山転がっているので、しばらくシリーズ続けてみます。

 

■おすすめ記事

紅葉シーズンに向けて気になる、創業100年を超す京都老舗旅館のWebサイト5選

【見習い小僧×技術小僧】5つの事例から学ぶレスポンシブデザイン

航空券の手配時に役立った7つのサービス

【時代祭】ひゅーんひゅーんひゅーん!ターーイムスリップ!

見習い小僧

本日、京都では快晴の空のもと、時代祭が行われました。

IMG_5934

時代祭は京都3大祭の1つでして、1895年に平安神宮が創建されたときから続く歴史のあるお祭りなんです。といっても3大祭残りの2つは、約1100年続いている祇園祭と、それより更に長い約1400年間も続いている葵祭なので、3大祭の中ではまだまだルーキーとも言える存在です。(因みに葵祭は、応仁の乱以降の200年、中止されていた期間があるそう。200年間中止て!スケールでか!※京都市観光協会サイトより)

今回も例によってオフィスから高見の見物状態でした。祇園祭と比べて色々な仮装をした人たちが行列を作るので、エンターテイメントとしてはこちらの方が面白く感じる人も多そうです。御池通沿いで見物する人も、祇園祭の山鉾巡行時よりも沢山いたような気がします。

IMG_5937

もうすぐ紅葉が始まるので観光客も沢山来るかな!京都が賑わうの、楽しみだな!

 

■おすすめ記事

【セミナーレポート】図解で考える顧客視点のウェブ解析設計

『ARです蚊?』アプリのサイトできました!←おそっ!

京都観光に役立つ5つのサイト+αを見ながら、この秋のプランを考える

どうせ1人で過ごす花金なので、今夜は7つの魅力的な水族館サイトを見て楽しむ。

見習い小僧

今週もあっという間に過ぎ去り、気が付けば花金!アフター5(インフォバーンはアフター7ですが)の予定はもうお決まりですか?まだ決まっていないって!?こりゃ大変だ!!

・・・うん、僕も決まっていませんけどね。ということでそんなあなたと私の為に今回お届けするのが、目で楽しめる水族館のサイト7選です。基本的に有名なところばかり集めてみましたよ。

 

1.京都水族館

京都水族館

まずは我らが京都水族館。今年できたばかりとあって、サイトも洗練されていますね。メニューなどもわかりやすいです。コンテンツも必要な情報は盛り込まれていてわかりやすいですが、サイトそのもので遊べるという感じではないかなと思います。スマホ向けには、専用ドメインで対応ばっちりです!

サイトに関することではないですが、個人的にめちゃくちゃ気になったのは夜の水族館探検ツアーです。閉館後の夜の『京都水族館』を探検できるそうです。館内にテントを張って、寝袋を用意して・・・ってめちゃくちゃわくわくしますね。参加してみたい!

 

2.すみだ水族館

すみだ水族館

こちらも、東京スカイツリー開業とともにできたばかりの水族館なので、サイト自体の見栄えもとてもわかりやすいです。新着情報のサムネ表示も魅力的です!スマホ表示も、こちらも同じく専用ドメインでの対応。京都水族館と同じオリックス不動産さんが、水族館の企画・運営をされているので、サイトデザインにも似たところが多いです。

すみだ水族館にも、年パス者限定企画『おやこでお泊り水族館-おやすみだ-』があるのですね。この企画はわくわくするなあ。

 

3.サンシャイン水族館

サンシャイン水族館

サンシャイン水族館もサイトはきれいだし、メニューもわかりやすいと思います。メインカラムのおしらせコーナーがちょっとさみしい気もしますが・・・。でもサンシャイン水族館の面白いのはコンテンツ!ライブカメラコーナーがあり、アシカ水槽、ペンギンビーチ、クマノミ水槽の3か所に設置されたカメラから随時動画が配信されています。アシカかわいすぎ!ペンギン動かなさすぎwww

スマホ対応はまだみたいですね、PCサイトがそのまま表示されます。スタッフブログの更新頻度もとても高い!小僧ブログなんかより全然高い!!言ってる場合じゃないですね、自分も頑張りますw

 

4.海遊館

海遊館

ジンベイザメで有名な大阪の水族館、海遊館。背景がフッターまで縦長の水槽のようになっていて、とても美しいです。メニューもわかりやすいし、イベントの紹介などもサムネイルでされていて目を引きます。

『おうちで海遊館』というコーナーでは、海遊館公式YouTubeチャンネルやスタッフブログが更新されています。特にスタッフブログが愛情たっぷり、画像たっぷりでたまりません!

 

5.美ら海水族館

美ら海水族館

沖縄の観光名所、美ら海水族館。ここのサイトは、海遊館のように水槽をイメージしたメインビジュアルですが、水槽の前に立って興奮するお客さんのシルエットを載せているのが個人的には好きでした。というかかっこいい!デザイン面で言うと、今回挙げた他の水族館は背景が白か青なのですが、ここだけ黒。黒だとメインビジュアルの青が余計に映えるのですが、それでいて落ち着いたデザインになる感じです。

コンテンツという意味では、エリアガイドがとても細かいイメージを受けました。また、これまでの来場者データから、混雑時間帯の予想を掲載しているのも、こういう施設ならではのコンテンツだなと感じました。スマホ対応はまだみたいですね。

 

6.八景島シーパラダイス

シーパラダイス

八景島シーパラダイスは、水族館以外の施設もある複合的なテーマパークであったり、水族館だけでも3つあるということで、サイトも少し複雑になっているように思います。ただ、シーパラダイスにいるたくさんの生き物について個別に紹介ページを作っていることや、頻繁に更新されるスタッフブログで紹介されているたくさんの写真(マンボウの正面からの写真は秀逸!)は、半端な努力じゃできません!

 

7.島根県立しまね海洋館

しまね海洋水族館

最後はしまね海洋館です。今回いろいろ見てみるまで、僕はこの水族館の存在を知りませんでした。ではなぜ紹介したかというと、メインビジュアルになっているシロイルカのバブルリングがめちゃくちゃ目を引くものだったからです。Flashだからモバイル対応という意味ではよくないですが、メインビジュアルの訴求力って大切だと改めて感じさせてくれました。

 

こうして見てみると、水族館ってコンテンツの宝庫ですよね。何より、どの場面を写真にしても絵になるっていうのは、そうでない業界の人からすると羨ましいことこの上ないのではないでしょうか?そういう意味では、活かしきれていない資源もたくさんあるし、有効活用することでもっと魅力的になりそうだなあなんて感じました。

今夜はひとり、俺が考える究極の水族館のサイトについてブレストしながら過ごしたいと思いますw

 

■おすすめ記事

紅葉シーズンに向けて気になる、創業100年を超す京都老舗旅館のWebサイト5選

Pinterestを使った企業キャンペーン

京都商工会議所-新入会員交流会-で見つけた興味深いパンフレットその1

『ARです蚊?』がADOBE AIR コンテスト2012でファイナリストに!嬉しい!惜しい!

見習い小僧

7月にAndroid版をリリースした『ARです蚊?』ですが、この度ADOBE AIR コンテスト2012においてファイナリストに選んでいただきました!これはとても嬉しいことです!

ファイナリスト

 

ADOBE AIR コンテストとは、ご存じAdobe社さんが主宰するコンテストです。技術について詳しいことがわからないので公式サイトを引用すると、“アドビの新しいランタイム Adobe® AIR® 向けのアプリケーション、コンテンツ制作にチャレンジする次世代リーダーを発掘することを目的に実施されたAdobe AIRコンテスト”ということです。要するにAdobe® AIR®を使って作られたデジタルワークスを対象としたコンテストです。

アプリ紹介画面

 

ダメもとで応募してみたものの、まさかファイナリストに選んでいただけるとは思っていませんでしたので、メンバー一同大変光栄に感じているのですが、受賞作品達はさすがレベルが高い!最優秀賞『「Live with the Wind.」by 393』はグラフィックがやはり美しいです。Adobe Airのコンテストなので、こういう美しい系のアプリがやっぱり選ばれるのでしょうね!

蚊の季節はとうの昔に過ぎ去りましたが、みなさんも時々思い出したように『ARです蚊?』で遊んでやってくださいね!それでは!

 

■おすすめ記事

【Facebook広告】『監督Xの異常なビデオ』は、意味深な文字画像で目を奪う。

『ARです蚊?』アプリのサイトできました!←おそっ!

【Facebook広告】huluはターゲットに合わせたキャッチで誘導する。

【見習い小僧×技術小僧】小僧ブログのレスポンシブデザイン化についてまとめ

見習い小僧

まとめ

前回、あっさりとレスポンシブデザイン化を完了させてしまいましたので、ここで今回の試みについて小僧なりに(ディレクターなりに)締めをしてみます。まずは小僧ブログレスポンシブ化の一連の流れです。

【見習い小僧×技術小僧】小僧ブログの課題と新企画

【見習い小僧×技術小僧】レスポンシブデザイン!?

【見習い小僧×技術小僧】5つの事例から学ぶレスポンシブデザイン

【見習い小僧×技術小僧】いよいよレスポンシブデザイン実装!!

 

 

実際やってみて感じたのは、レスポンシブデザインはハマればとても作業が素早く進み(=工数が少なくて済む→予算も抑えられる)、ワンソース化することでHTMLのページでも更新が楽になるなということです。でも“ハマれば”と表現したように落とし穴もあって、きっと情報量が多いサイトやデザインにこだわりたいサイト、また複雑な承認フローが必要なプロジェクトだと結局普通に作った方がいい場合も多々あるだろうなという印象です。

今回の場合、作業にかかったのは実質1人日くらいのものです。これだけ短期間でできたのは、技術小僧のジョーがこの技術を既に習得していたということが1番の理由です。ですがそれだけでなく、そもそも小僧ブログが2カラムでページ数も少ないこと、デザインがシンプルでスマホ上での細かな見た目にこだわらなかったこと、更にそれらを小僧と技術小僧だけというシンプルなチーム構成でどんどん意思決定できたことというような条件がなければ厳しかったかなとも思います。

ということで万能ではないかなという気持ちも残りましたが、ひとまず小僧ブログが、スマートフォンからもオリジナリティ溢れるデザインで閲覧できるようになったことは大きな進歩です!とても満足です。しかし実は、他にもやってみたいことはあるので、次回以降このシリーズはスマートフォン対応の枠を飛び出して突き進んでみたいと思います。

 

■おすすめ記事

アジャイル・UX・リーンな時代ver.2 at ロフトワーク烏丸

どうせ1人で過ごす花金なので、今夜は7つの魅力的な水族館サイトを見て楽しむ。

【Facebook広告】目を引くキャッチ「俺は、ローラが好きなんだ!」

【見習い小僧×技術小僧】いよいよレスポンシブデザイン実装!!

見習い小僧

技術小僧のジョーです。以前お話ししたとおり、小僧ブログのスマートフォン最適化はレスポンシブデザインで実装していくことになりました。現時点での小僧ブログスマートフォン対応の要件は、以下の通りです。

sample

5つの事例から学ぶレスポンシブデザイン”でも紹介したように、レスポンシブデザインでサイト構築するためにはブレイクポイント”について必ず考えなければなりません。これはどの画面幅に対してどのCSSを適用するかを決めるものですが、基本的には①スマートフォン②タブレット③PCの3つの画面幅を想定すべきでしょう。ところがこのブレイクポイント、実は標準的な数値や定石というものが無いので、サイトによって設定の仕方がバラバラなのです。そこで、ブレイクポイントを決定する際には、まずは基準のデザインをひとつ設定して、そこからウィンドウサイズを変更したときに内容が最適に表示されるように適宜ブレイクポイントを設定していく、というのが妥当な方法だと考えています。(小僧ブログではもともとのデザインを基準のデザインとして設定します。)

細かいことはさておき、とりあえず今回は2カラムしかないので、ブレイクポイントは1つだけ!!つまりスマートフォンとPCの2パターンに対応させることにしました。そして肝心のブレイクポイントは630pxに設定しました。この630pxを超えると画像が荒くなり、高解像度画像で対応したとしても今度は読み込みに時間がかかります。スマートフォンでサイトを見るなら、「表示の軽さ」というのはとても重要ですよね。

小僧ブログレスポンシブデザイン比較

とまぁ御託はさておき、実はこのサイト、既にレスポンシブデザイン化されています!PCでご覧の方はウィンドウサイズを小さくしてみてください。いかがですか??元のデザインのままスマートフォンに最適化されましたね。今回はPC用の固定幅レイアウトにスマートフォン用の変動幅レイアウトを加える形で設計しました。参考までにレスポンシブしない旧サイトを載せておきます。

小僧ブログ固定幅デザイン

 

■おすすめ記事

Pinterestを使った企業キャンペーン

京都の寺社の、見やすい2サイトと動きがかっこいい2サイト+おまけ

【セミナーレポート】図解で考える顧客視点のウェブ解析設計

2012下期 男の決起集会

見習い小僧

昨日は下期の決起集会と、新しく仲間に加わられた遠藤さんの入社祝いを兼ねて飲み会に行ってきましたよ。

2012下期男の決起集会初めて使ってみたiPhone5のパノラマ写真機能(関係ないけど自慢したいだけ)から見える爽やかな飲み会のひと幕。。。とは裏腹に現場で繰り広げられた数々の珍話。今回も終電を逃しそうになるほど面白い話が沢山できた、良い飲み会になりました!

下期はもっと良い仕事できるよう、頑張るぞ!

はてなさんでまかないランチをいただいたよ。

見習い小僧

本日、はてなブックマークやブログなど、様々なサービスで有名なはてなさんに、ランチをいただきにお邪魔してきました! ということでその話をしようと思ったのですが、はてなさんのまかないランチはとても有名で、様々な人がすでにブログを書いているので、さらっとご紹介します。

IMG_5805

インフォバーンKYOTOから徒歩5分にあるはてなさんのビル。

IMG_5806

ランチルーム(とは言わないと思うけれど・・・)に入ると、早速こんな感じでランチが準備されていました。炊飯器でかい!ずんどう鍋でかい!匂いがグッドスメルすぎる!

IMG_5807

ランチをよそうインフォバーンKYOTOメンバー。そして後ろに並ぶはてなの方々。すみません1番に取っちゃって・・・。でもこうやってみんなで一緒にご飯を食べるっていうのは、とても羨ましくもあります。高校くらいまで遡った感じがしました。

IMG_5808

そしてこれが本日のごはんでした。その名も『豚肉となすとピーナッツの○○』。なんでしたっけ・・・。名前はド忘れしましたが、味は本当に本当に美味しかったです!美味しいだけのご飯なら他でも食べられますが、はてなさんのまかないランチからは「栄養がたっぷり入っているよ~」という味がしました!これ食べたら僕、少々無理しても頑張れる気がする!という気持ちになりましたw

オフィス見学もさせていただいて(写真撮影を忘れました・・・)、至れり尽くせりのランチタイムとなりました。ほんと、ランチ食べるだけに行ってすみません・・・。とはいえせっかくご近所かつ東京‐京都という似た布陣であるので、いつか何かコラボさせていただけたらいいなあなんて1人考えました。以上、取りとめのない、はてなさんにも何の利益ももたらさない日記でしたw