愛車:マツダアテンザ
Webを中心とした、ビジネス&テクノロジーに関する思いつき
by F-shin
[ このサイトについて ] [ F-shinについて ] [ トップ ]
author:えふしん
photo_20.jpg
藤川真一について


モバツイの中の人
マインドスコープ(株)社長
人の良いジョンカビラと言われます。
AMN sponsor rolls
モバツイの2つのスマートフォン
アンドロイドアプリ!
アンドロイドアプリ モバツイtouch
全てのスマートフォンブラウザと、Nintendo3DSで! HTML5版Webアプリ「モバツイsmart」
本を書きました!
100万人から教わったウェブサービスの極意 ~「モバツイ」開発1268日の知恵と視点
Google Friend Connect
このカテゴリ[会社活動]の最新30件
バルスのツイート機能に関する謝罪を書いたら沢山反応があった件 モバツイの広告の取り組みについて、発表資料の共有 モバツイ、2つのスマホへのチャレンジ「モバツイtouchとsmart」 あなたのシステム開発観は、「動けば良い派」?それとも「ロマン派」? サードパーティツイッタークライアントの生きる道 モノを作る人は、鵜飼いの鵜ではなく鵜飼いの人 ネットは儲かるか?〜1人1円を1億人からもらって1億円売り上げる仕事 映画「ソーシャルネットワーク」の興味深いポイント6点 自分のやりたいことを会社で実現する方法 日本の葛藤 日本をコントロールしているもの 「ぼくはこうしてプログラミングを覚えた」をどう読みましたか? 方向性はあっている、という言葉の危険性 バタラさんとの採用コンテンツ作成秘話 ネットサービス系企業における、積み上げ型タスク管理の危険性 その時、誰がモバツイを必要としたか? - 震災発生から1週間の状況 「ツイッターのおすすめユーザー欄に表示される垢が、同一のグローバルIPアドレスからチョイスされた件」を回避する方法 ツイッターapi利用規約を翻訳しました。 つぶやきから、ソーシャルコマースにならないかを考えています 仕様の決断と、想定外 モバツイのエイプリルフール機能「イマココ(uso)」で、1万ツイート/day突破 モバツイに今いる場所を適当に送信する「イマココ!(uso)」をリリース 仕事のペース 業務ののりしろ ネットビジネスで成功した人は無茶をやってきた人 映画「ソーシャル・ネットワーク」の感想 エンジニアのこだわりと、継続的開発、チャレンジについて。 2010年振り返り2011年これから。 あなたの選択は正社員?非正規雇用? 「このサイトいくらぐらいでできるよ!」のピュア
[このカテゴリをもっと見る]
Powered by
Movable Type

June 03, 2008

仕事で関わっているカラメルをリニューアルしました。

calamel_renew1.jpg

今回の主たる変更はデザインのフルリニューアルです。デザインに関しては、半年以上前からカラメルはどんな人に好きになってもらいたいか?!というところから考え直しました。

それ以外にも細かい変更を入れてるんですが、相応に地味なので、今回のリニューアルでプレスリリースなどは出していません。でも、僕的には結構こだわりの変更を取り入れてたりするので、せめて自分のblogでだけでも、紹介させてください。

そもそも何故、変更点が地味になってしまうのか?

ある時ふと思ったことですが、ECサイトで大事なことって、「面白い機能」とか「キャッチーな機能」じゃないと考えました。

一番大事なのはエンドユーザーに対して、どれだけ「おもてなし」ができるかだと思うんです。

理想としては、お客様が求める商品を1クリックで出してあげて、PV1ページだけで商品を買っていただくのがベスト。もし商品がお好みのものでない時には、いかに「欲しいモノ」に対して的確な答えを、迅速に提示できるか?ということだと考えました。

だから必然的にやってることも地味になるのかなぁと思ったりしました。

ー・ー


そんな中作ったのが、通称「検索ナビゲータ」です。

calamel_renew2.jpg

「検索ナビゲータ」は、検索キーワードや選択したカテゴリ、価格で絞り込んだ検索条件を「文脈」として捕らえて、商品詳細ページにもその文脈をそのまま持ち込んで、「次の商品」を見たり、「検索一覧」に戻ることができます。

もし商品詳細ページの商品が好みでなかったら、さっきの検索結果一覧ページ上に表示されていた、「次の商品」に切り替えることができます。

これはページングにも対応していて、ある条件で絞り込まれた検索結果一覧の最後の商品まで「次の商品」というボタンで先に進むことができます。

「一覧に戻る」を押すと、すぐに検索結果一覧ページに戻ることができて、絞り込み条件を変えることもできます。

calamel_renew2-2.jpg


情報の詳細ページに対して、「次のページ」が提示されているインターフェースと言えば、mixi日記やblogのような時系列に並ぶものでは割と当たり前についているナビゲーションなので、決して特別な機能ではありません。

なので割と自然に「次の商品へ」を押してもらえるかなと思っています。

これは「おもてなし」の一つだと思っていますから、特に機能など意識せず、なんとなーく次に進んでくれる人が増えたら良いなぁと思っています。

目的は無駄をなくした先にある回遊率アップです。もちろん売り上げアップに伴うカラメルの存在感向上も。それに目的達成に対して余分なページ遷移を発生させないことで、探すのが楽しい、とか思ってもらえればラッキーかと。

(と書くと他にも沢山やれることがありそうだな。)

ちなみにSEO絡みでPVを落とすわけにはいかないので、商品詳細ページや一覧ページのURLはリニューアル前と一切変えていません。(クエリストリングを追加しないとか。)そういうのも設計上のポイントだったりします。


ー・ー

もう一点、これはシステム上の制約に起因する話なんですが、商品画像の拡大写真表示というものをつけました。

calamel_renew3.jpg

サムネイルをクリックすると、商品画像のオリジナルサイズでLightBox風に表示します。

calamel_renew4.jpg

カラメルの商品情報の母体となる、Color Me Shop! proというネットショップASPには、「商品画像」以外に3枚の「その他画像」というサブ表示の機能があります。

カラメルは、Color Me Shop!proの商品データをバッチで持ってきているのですが、何の因果か「その他画像」の情報は持っていません。

バッチやDBを拡張することなく「その他画像」を表示したかったので、JavaScriptで画像ファイルに直接アクセスしてみて、画像が存在したら表示する、存在しなかったらなしとみなす、という動的な画像読み込み制御を行っています。

もちろんファイル名が予測可能だからできたという話なんですが、仕事の合間にちょちょっと作ったものですが、結構面白かったです。

こういうのを利用すると、例えば、特定のHTMLをダイナミックに解析して、どこぞのWebサイトに貼ってある画像を持ってきてしまうとか、そういうのがJavaScriptだけでできそうです。または、そのページには必ずあるハズの画像を検索してあったら表示、なかったら非表示とか。

ー・ー

しかし、今回のリニューアル作業は大変でした。朝会社に行ったそばから何故か開発サーバのsambaが繋がらなくて再起動したらLVMのエラーとかで起動しないし、ちょうど、別のシステムの障害は起きるわ、DBのテーブルは壊れてるは、リリースそのものの作業以外のトラブルが多発しました。そんなこと普段ないのに。

どんな呪いかはわからないけど、特に誰も慌てることなく、順調にリリースできてよかったです。
カラメルからとかげキャラクターを引退させたので、その呪いとしか思えんな(w

そんな感じで頑張ってリリースしたものです。是非、ご利用いただければ幸いです。

カラメルは、いわゆるショッピングモールという見せ方以外に「ユーモアと物欲を刺激するショッピングガイド」として、コンテンツを通じて素敵な商品をオススメしていこうという方向性に動いています。

カラメル - ユーモアと物欲を刺激するショッピングガイド

■同じカテゴリ[会社活動]のエントリー
<<前の記事 コミュニケーション能力は相対的な概念
>>次の記事 オレたちがなんとかしちゃってるのがマズイんじゃね?ってよくある現場の一言
■このblogの書き込み最新3件
インターネットの可能性を信じて〜本を書きました。 バルスのツイート機能に関する謝罪を書いたら沢山反応があった件 モバツイの広告の取り組みについて、発表資料の共有
この記事への提案、提言一覧
この記事への提案、提言









あなたの情報を保存しますか?