Home > デザイン

2008.08.19

「WEBサイト開発手段のこれから」

Flash好きです。
Ajax大好きです。
Takumaです。
 

【開発】
1 土地・鉱産物・水力などの天然資源を活用して、農場・工場・住宅などをつくり、その地域の産業や交通を盛んにすること。「農地を―する」「未―」
2 新しい技術や製品を実用化すること。「新製品を―する」
3 知恵や能力などを導きだし、活用させること。「子供の情操を―する」→注入》(by Yahoo!辞書)

「HTML」に+「Flash」+「Ajax(javascript×XML)」+新鋭:「Silverlight」

WEBサイトを構成する技術/言語&ソフト(製作側面:システムとはちょっと別の話)は、リッチ表現という市場の中で戦国時代を迎えています。
(※今までもずっとあったのだけど、ここにきてまた激化している)

そんな、最近の事情を以下で解説している。

▼Flash、HTML、AJAX:ウェブアプリ戦争に勝利するのは ▼

http://builder.japan.zdnet.com/news/story/0,3800079086,20378869,00.htm

こんかいは、この記事に準えてお勉強したいなと思います。

■基本的にHTMLと仲良しはJavaScript■■■■■■■■

大昔といっても1990年代のブラウザ戦争から暫くは、そのブラウザのオリジナリティーの差別化の為に、CSSも含めJavaScriptも完全に同期した動作をすることは無かった。

近年。Ajaxが(基本的に新しい技術でないのに)はやり始めたのは、上記が改善されてきた点と高速通信のインフラが整ったことが要因であるといわれている。

というわけで、トップシェアであるIEの次期最新バージョン8でもデフォルトで標準に準拠している点からも、もう数年はこの業界認識とスタンダードは変わらないと考えるのが順当だろう。

■音声とか映像はFlashでしょ・・・3Dも!?■■■■

そもそも、リッチ表現というバックリとした言葉だが、掻い摘んでいうと「なくてもサイトとして成立する要素」という感じである。

音なら無くても・・・サイト見れるジャン。(どーにかなる)
映像無くても・・・サイト見れるジャン。(どーにかなる)
HTML無くても・・・!? 何も写らないジャン。(どーにもならん!!)

という感じである。

でも、WEBという表現インフラと広告媒体が、一定の作業をこなす事で、その表現の可能性を広げられるならパフォーマンスを最大活用すべきというFlashやSilverlightのポジショニングも納得いく。

その「一定の作業をこなす事」が「プラグインのインストール」である。
つまりは新しいソフトを導入しないと、写らないのである。

■もっと広がるリッチ表現の可能性 ■■■■■■■■

さてさて、ここまではエンドユーザから見た際のお話でした。
エンドユーザーから見れば、簡単にストレス無く見れれば・・・

「Ajaxでメインイメージのアコーディオンスライド」しようが
「Flashでメインイメージのアコーディオンスライド」しようが
関係ないのが実情です。

Ajaxサンプル
数年前までFlashでしかされてこなかった、動的表現は直線的なものであればAjaxで可能となっている良い例である。

それでも、エンドユーザーにより上質な「ユーザエクスペリエンス」を提供する為というハードルを考慮した上で、FlashやSilverlightを利用すると決めた場合。

そこについて両陣営は以後、このような表現を開発していると表明している。

AdobeのFlash Playerの新バージョンであるバージョン10では、並はずれた改善が行われている。3Dグラフィック処理、特殊効果、ビデオストリーミングの改善、ハードウェアアクセレレーションを利用したグラフィック、文字列処理などの機能がそれだそうです。

■開発はSilverlightに乗り換えるのか■■■■■■■

Silverlightは音声や動画ストリーミングのサポートなど、いくつかの切実に必要とされる機能を備えているが、Flash陣営からシェアを奪う為には、「3D技術を最初に扱えるようになれば、開発者がSilverlightを使う大きな理由ができるだろう」という専門家の意見を掲載している。

つまりは、「乗り換え」がされるだけのパフォーマンスと理由がSilverlightにないと、行われないわけである。

以前、このブログで紹介した以下の記事に通じる「乗り換え心情」が伺える。

▼Takumart.net:「9倍すごくないと・・・」▼

http://www.takumart.net/wordpress/archives/447

んで、それぞれの陣営がアピールしているメリットを紹介。

▼Silverlightの利点(※一部抜粋)▼
 MicrosoftのSilverlightの売り文句の中で重要なのは、プログラマーの生産性だ。SilverlightはMicrosoftの. NETプログラミング技術で使われているのと同じC#やVB.netに基づいているため、多くのプログラマーは有利なスタートを切ることができ、 Microsoftの評価の高いプログラミングツールも利用することができる。

▼Flashの利点(※一部抜粋)▼
 Flashも豊富なプログラミングツールを持っており、もちろんアプリケーションのデザインに役立つPhotoshopやIllustratorなどのツールとも緊密に連携している。また、インターネットユーザーは比較的迅速にFlashのソフトウェアを最新バージョンにアップデートするため、安定しており一貫性のあるプログラミング基盤となっている。

■ぼやき兼まとめ■■■■■■■■■■■■■■■■■

少なくともここしばらくは、1つの技術が支配的になることはないだろうことは明らかだ。各陣営の支持者は、ライバルの利点を指摘しているという風に記事では、まとめられているが、同感である。

人間、次から次へと欲はでてくるし、他社の技術との差別化ポイントを打ち出していく限り、この状況は変わらないと考えられる。

しかし、新しい参入技術が既存技術に食いつぶされていくことも容易に想像できるが、Silverlightに関しては、バックボーンがでかいので、数年は細々と生き残っていくのでは無いだろうか。

セカンドライフのような話題性が無い限りは、バズ効果をねらった開発は行われないと感じているのがTakumaの率直な印象です。

■+α:その他のきになったキーワード■■■■■■■

・Canvas:ブラウザ上に図を描くために策定された仕様
解説ページリンク

・SVG:XMLベースの2Dベクター画像記述言語
解説ページリンク

・Gears:Webアプリケーションをオフライン状態でも使用可能なブラウザ拡張機能
解説ページリンク

・BrowserPlus:Gearsに対し”繋がっている”ことが前提であるシステム
解説ページリンク

2008.08.10

「Firefox後継製品のアイデアはOSを超える」

ネット好きです。
クラウド技術にドキドキです。
Takumaです。
 

【クラウドコンピューティング】
クラウドコンピューティング(cloud computing)とは、コンピュータ処理の1形態、またはパラダイムである。ネットワーク(特にインターネット)という「雲 = クラウド」の向こう側に、サービスを提供するサーバなどがあるが、ユーザーからはもはやサーバの場所も台数も構成も認識できず、単にサービスを受け取っているようなイメージといえる。

従来より「コンピュータ・システムのイメージ図」などでは、ネットワークを「雲 = クラウド」で表す場合が多く、それが出典であると言われている。(by ウィキペディア辞書)

「Firefox」を出している「Mozillaの研究部門であるMozilla Labs」が「Firefox」の後継製品のコンセプトを募るキャスティングコールプロジェクト「Concept Series」を開始したみたいです。

でも、「便利なブラウザってどんなのだと思う~♪」とかいう次元でなく「クラウドコンピューティング」のエンドユーザー向けソフトをブラウザで先駆けて技術開発するためのアプローチといえると思います。

詳しくは以下の記事を参照。

▼モジラ、「Firefox」後継製品のアイデアを一般から募集–ブラウザのOS化は進むか▼


http://builder.japan.zdnet.com/news/story/
0,3800079086,20378496,00.htm?ref=rss

んで、そのイメージサンプルがこちら

・OSをベースにしたインターフェース
・複数のデータ参照間でのデータ連携作業
 (※OSならコピペやドラッグ&ドロップに近い)
・マシンorデータ参照元でなくユーザ側面でみたデータグルーピング
 (※レコメンドに近い考え方か?)
・指紋認証技術

一部、先進技術等の個人認証側面の実装イメージも含まれているが、その他はブラウザが持つネットワーク機能とOSが持つローカルでの利便性をブラウザ側で吸収してしまうという表現が正しいのではないでしょうか。

当然、複数のデータ参照元は一定のデータ規格を守った上で(XMLの汎用性強化したものとか?)をアップしておく事が必要になるとは思うのですが・・・

デスクトップ上での入力技術が現在のものと大差がなかったのは、それだけ近いうちにMozillaがこのクラウトOSをインフラ同様に実現するという意気込みでしょうか。

ネットという諸刃の剣が魔法の杖にかわる具体的なイメージはでき初めては、いるとは思うのですが・・・この以降(パラダイムシフト)に伴うバランスを開発者が正確に理解するのと、アウトプットとしてエンドユーザに違和感を覚えさせないものをするのは実に大変になると思うのですが。

ドキドキ。

2008.07.24

「セキュリティとサイト設計」

サイト構築好きです。
サイト設計大好きです。
Takumaです。
 

【セキュリティ】
安全。また、保安。防犯。防犯装置。「―システム」(by Yahoo辞書)

EC設計やシステムの絡むサービスサイトの設計を過去も最近もやっている中。
こんな記事を見っけて「あ~あ的なモチベーション」になっています。Takumaです。

んで、それが何かというと・・・
「銀行サイトの75%に設計の問題あり」
はい。設計は難しいですよね。

今のところ、ECどまりで銀行サイトまでの設計&デザインはやった事はないのですが、なかなか根深い問題です。

・ログイン用のボックスをセキュアでないWebページに置く(47%)

・連絡先情報とセキュリティ上の注意事項をセキュアでない
Webページに掲載する(55%)

・取引中に銀行のドメイン外の別サイトにユーザーをリダイレクトする(30%)

・社会保障番号や電子メールアドレスなど他人に推定されやすい情報を
ユーザーIDとして使わせる(28%)

・パスワードや利用明細などの重要な情報を電子メールで送信する(31%)

詳しくはこちら↓

▼銀行サイトの75%に設計の問題あり - ITmedia News▼

http://www.itmedia.co.jp/news/articles/0807/24/news029.html

デザイン時に行う設計で解決できる側面と、システム組み込みの際に注意すべき側面と両方ありますな。セキュリティ上、危険といわれても一般ユーザーからしてみると、ないと不便なものまでありまする。

なやむよね~。ビジネスモデルとユーザビリティとセキュリティ。
完璧に各側面をパーフェクトに満たす物はないだろうけど・・・
っま。バランスですよね。

銀行サイトの設計ぐらいならセキュリティコンサルがつくだろうから
そんな案件が将来きたら頑張ろうw

2008.07.14

「最新くるくるAjax」

「carousel.us」WBE好きです。
3D Ajax大好きです。
Takumaです。
 

【くるくる】
1 物が軽く続いて回るさま。「―(と)回る風車」
2 いく重にも巻きつけるさま。また、まるめるさま。「包帯を―(と)巻く」
3 丸くて愛らしいさま。くりくり。「目が―(と)してかわいい」
4 休まないで身軽に働くさま。「一日中―(と)働く」
5 方針や考えなどが定まらないさま。「―(と)変わる当局の答弁」
6 滞ることなく物事が行われるさま。すらすら。(by Yahoo辞書)

最近、Ajaxの表現性の向上が顕著に見て取れるレベルになってきました。
「仮想3D描画」+「鏡面反射」+「平行モーション」確かに、最近の見せ方的Ajaxだとそれぞれ個別にライブラリ提供されている要素です。

あんなこといいな♪ (Flashみたいな動き)
できたらいいな♪ (Ajaxで簡単にできたら)
あんな夢 (鏡面反射付の3D描画)
こんな夢 (Flashみたいなページ遷移)
いっぱいあるけど~ (んなものないよね~)

ドラ●もん!!

▼carousel.us▼
http://www.piksite.com/carousel.us/

でも・・・処理が重い!!
(リアルタイム演算だからしかたないか~)

補足——————————————————-

Carousel.us is a Javascript 3D carousel, using the prototype.js and scriptaculous.js frameworks. It also uses PHP Easy Reflections v3 by Richard Davey.

ということで、「prototype.js」「scriptaculous.js」と「PHP Easy Reflections v3」が使われているそうです。

ライブラリの利用をうまくするだけで、驚くほど簡単に導入できる時代になりましたね。こわい時代だ・・・

———————————————————–

2008.07.08

「企業のウェブサイトで困ってしまうことランキング」

WEB設計好きです。
WEBデザイン大好き。
Takumaです。
 

【困る】
1 ある物事をどう判断・処理してよいかわからず悩む。取り扱いがやっかいで苦しむ。困惑する。もてあます。手を焼く。「返事に―・る」「聞き分けがなくて―・る」「あいつときたら―・ったもんだ」
2 つらいことにあって苦しむ。難儀する。「人手が足りなくて―・っている」「家が狭くて―・る」
3 不都合である。迷惑する。「人に知られては―・る問題」「隣の騒音に―・っている」
4 金や物がなくて生活に苦しむ。困窮する。
(by Yahoo辞書)

へー、リフレッシュ代休を終えました。Takumaです。
つくづく、定期更新というやつをする事ができない人間だと痛感した次第です。
また、前のペースで更新をやっていこうと思います!!(ゆるして~)

さてさて、「24時間365日働く営業マン」「企業の知的財産」「情報発信基地」
などとよく営業が口にする企業サイト。一企業一サイトという一般的常識になって暫くたちました。

そんな中、こんな記事を発見。

▼企業のウェブサイトで困ってしまうことランキング▼
http://ranking.goo.ne.jp/ranking/092/corporate_website/

TOP5はこちらのようになっています。それと気になったことをぼやこうかしら・・・

・1位:情報が数ヶ月間更新されていない
⇒そうですね。WEBのサイトの提案のときに作って終わりではないということは、必ずお客様に伝えるようにしています。でも、なかなか難しいのですよね専門の担当者がいないと。

・2位:画像が多くて、重い
⇒不必要に画像を乱用したりすると確かにありますね。貸しポジなのに無駄にファーストビューの大半をつかってしまってるとか。意外と個人と違って昔ながらのナローバンドのままの企業さんとかいるわけですから、事業内容にブランディング性が格別必要で無ければ、企業サイトとブランディングサイトは分けるべきだと思います。

・3位:「準備中」のコンテンツだらけ
⇒問答無用ですが・・・意外と多い
というか拡張性を考えたサイト開発をしてれば、ペンディングになってもこんなことは起こらないのだが・・・

・4位:リンク先がPDFファイル
⇒PDFに繋がってるというのも、それ自体は悪くはないのだと思います。しかし、前フリなしはイラっとくる。「(PDF)」と表記するとか、フッター下部にプラグインダウンロードのバナーを置くとか工夫が必要ですよね。当然、一番はHTMLで作れればいいのですが。

・5位:トップページからオールFlash
⇒2位で紹介した通りなのですが、Googleのクローラーが本格的にFlashの中身を読めるようになったとニュースでながれてましたが・・・個人的にも嫌いです。

ユザビリてきにも悪いですし、なにより企業サイトの場合、いろいろな方が見に来る可能性があるわけですから気をつけるべきであり、避けるべきだと思います。

WEB制作会社とか相手先の方のWEBリテラシーが高い事を前提に考えられるのならばいいのですが。

といっても、癖でブラウザ「戻る」とか押して途中までみてたFlashが位置から戻らなくてはいけなくなった時のモチベーションは下がりまくりですがw

———————————————————–

全体的に見れば、設計/デザイン時に当然 気をつけなければいけないことばかりなのですが、公開してから「あっ」という事も正直ありますよね。その前に思い出して一通りチェックしてみてはいかがでしょうか?

2008.07.02

「そういえば、ECのレコメンドアプローチって・・・」

ECサイトでお買い物好きです
レコメンド機能結構好きです。
Takumaです。

【ECサイト】
ECサイト(いーしーさいと:Electronic commerce site)とは自社の商品(広義では他社の商品を販売してもECサイトである)やサービスをインターネット上で販売しているサイトのことである。これとは別にインターネット上で複数の企業や個人の商店を一箇所に集めたサイトをサイバーモール または電子商店街という。(by ウィキペディア辞書)

さあ、長文シリーズの気分が乗ってまいりました。
最近、休日出勤が多かったので月曜日にプロジェクトコンプリートした際に、一気に本部長決済(直談判w)でリフレッシュ代休消化をいただきました。日曜日まで自由人のTakumaです。

さてさて本題。

今回はレコメンドが随分一般化してきたと感じる節がお仕事で体感する事が最近多かったので、それについて色々まとめて見ようかなと思います。

■レコメンドってなあに?■■■■■■■■■■■■■■■■■■

「Amazon.co.jp」等のECサイトで使われている「この本を買った人は、こんな本も買っています」というみせる機能がありますよね。あれのことです。

これは、ユーザーの行動履歴を蓄積・分析し、そのユーザーの嗜好に合わせた商品を表示する方法。

つまりは「あの会社の製品ナンバー●●番の商品がほしい!!」というマニアックなひとでなければ、「●●系の感じの■■が欲しいのよね。まー有名企業の方が安心できるかしら?」という感じでしょう。

「ユーザーの行動履歴を蓄積・分析」とあるけど、これは店員さんなら「よくくるお客さんとの関係で積み重ねられた”勘”とか本部からの提供情報」にあたるわけですな。

そんな時にリアル店舗の店員さんなら「こちらがご希望ですが?こちらの商品も人気があるんですよ」とか「これも合わせてご購入いただくと便利ですよ」とかすすめてきてくれる。これが「レコメンド」です。

■レコメンドってなにがいいの? ■■■■■■■■■■■■■■

「ロングテール理論」というのをご存知でしょうか?これは販売動向の傾向グラフが恐竜の頭から尻尾の流れるかたちに似ていることから名づけらてた理論です。

どんな形?という方は(ウィキペディア:ロングテールをご参照ください。)

まーそんな形なわけです。(←いいかげん orz)

これはWEB2.0というキーワードを耳にするようになった頃から同時に聞こえてきました。というのも詳しくは今回は書きませんが、WEB2.0の技術の一つである「Ajax(他も連動するけど)」が一々、入力欄にユーザーが記入してボタンを押さなくても、いままで拾えなかったユーザの行動(この商品を押した、このページをいききした、この人は前にこんな商品を買った)とかをできて、その場で計算して表示することを可能にしたからです。

つまりはリアル店舗では、定員さんが一人一人のお客様に「これはいかが?じゃあこれは?」ということが現実問題(されても困るがw)できないが、WEBなら一瞬のうちに実現してしまうのだ。つまり不良在庫となりがちな商品でもAmazon.comのようなウェブ店舗では売れるという事象を説明できるのがロングテール手法なのです。

サイト上で考えれば、いちいち微妙にキーワードを変えて検索しなおしたり、その商品カテゴリトップに戻らなくても、ウィンドウショッピングが次々と楽しめるのです。

>>もっと詳しく知りたい人は
「レコメンド技術」が今再び注目される理由–ECサイトのレコメンド技術を考える(1)

上記、参照元をオススメします。

■レコメンドって実際は裏で何をしてるの? ■■■■■■■■■

人気商品ランキング」、「閲覧・購入履歴」、「あなたにおすすめの商品」といった3タイプ」というのをよく目にしますが、基本的にはこんなことをしているようなのです。

1. レコメンドするために必要な情報を収集する
2. 収集した情報をルールに基づきモデル化する
3. 特定の条件によりマッチングしたアイテムを表示する

ということを日々続けているわけです。レコメンド店員さんは大変です。
しかも、その形は大きく4つにわけらるようです。

▼ルールベース方式

:一部抜粋———————————————-
インテンショナル方式」とも呼ばれ、「デジタルカメラを買った人にSDカードを勧める」といった商品の関連性はもちろん、「紙おむつを買った人にビールを勧める」といったように、データマイニングでしか出てこないような意図的なレコメンドができるのが特徴だ。
——————————————————–
「この商品が欲しい人はコレがほしいはずや!!」をひとつひとつ、管理者がルール付けしていく方法。確かに管理者の熱意は直反映されるけど・・・商品数が多かったりするともう大変ですな。

▼コンテンツベース方式

:一部抜粋———————————————-
アイテムごとのスペック、値段、テキストといったコンテンツ情報の類似値を自動計算し、閲覧した商品に類似した商品をレコメンドする方式だ。例えば、ノートパソコンのサイズやメモリー容量、賃貸の間取りや家賃などがレコメンドに必要な情報となる。
——————————————————–

つまりは「この性能ならこっちもありますよ」という感じ。そして「この性能」というのを商品の文中(形式化されていないテキストデータ[通常の自然文]を単語などに分割し、その出現頻度や相関関係などをデータマイニングの手法を使って解析して(これをテキストマイニングというらしい)表示をする手法。似たり寄ったりの商品がでてしまって、面白身や新しい発見に繋がらないことがあるようです。

▼協調フィルタリング

:一部抜粋———————————————-
協調フィルタリングは、ウェブアクセス履歴データなどユーザーの行動履歴を基に、ユーザー同士の嗜好の類似値を自動計算し、「この本を買った人はこんな本も買っています」といったレコメンドを実現する。代表例は「Amazon.com」のレコメンドで、現在ASP型ソリューションとして最も多く採用されている。
——————————————————–

ユーザーの行動履歴のみを情報とし、コンテンツ情報を一切見ていないことが最大の利点。コンテンツ情報を見ないことで、ユーザーは「思いがけない発見」、つまり「セレンディピティ(serendipity):偶然から価値あるものを発見する「能力」」が体験できるからだ。今まで自分が見た商品とはまったく関係ないのに自分の嗜好にマッチしている、といった偶然のお膳立てができるのだ。

コンテンツ情報(いろいろな商品情報の記入とか)をあらかじめ用意する必要もないため管理コストがかからず、膨大なユーザーアイテムに対応できるため、運営者にとっては導入しやすいレコメンド方式らしいです。

でも、普段買わないものとかを一度かうと、それに似たものをしばらくオススメされてしまうこともあるし、レコメンドを始めてすぐには、解析する情報が無いので効果を発揮するには時間がかかるようです。

>>もっと詳しく知りたい人は
協調フィルタリング技術を掘り下げる–ECサイトのレコメンド技術を考える(3)

協調フィルタリングの課題を解決する–ECサイトのレコメンド技術を考える(4)

上記、参照元をオススメします。

▼ベイジアンネットワーク

ベイズ理論という、事前確率および尤度を仮定した下で事後確率を与える確率論の定理で未観測要素を含むコンピュータによる推論等に応用されて統計学的な切り口からレコメンドする方式です。(理論の数式があるけどよく分からんw)

詳しくはベイズ理論(ウィキペディア:ベイズの定理をご参照ください。)

これをレコメンド技術に応用すると、多くのコンテンツ情報やユーザー行動履歴などの細部にわたる事象を計算し、ユーザーが購入する確率の高い商品がレコメンドできると考えられることから、次世代レコメンド方式として注目されているようです。

■レコメンドって実際どんな感じで使えばいいの? ■■■■■■

お仕事で感じたのは、特に設計時にそのレコメンドの特徴をよく理解する事が必要ということです。なんとなく分かってるだけだと、表層リニューアルなら良いのですが、フルリニューアル提案では危険を伴うと思ったのです。

では、どんなことを想定すればいいのでしょうか?

▼ロジックと表示ページを選定する

閲覧ベース(商品詳細ページを閲覧した際の行動履歴)、興味ベース(カートに投入した際の行動履歴)、購入ベース(購入した際の行動履歴)といったデータを活用し、これらのデータに重要度をつけてロジックを絡めたりして商品選定をするようです。

又、ページベースでもレコメンドの手法を変える事も考えるようです。例えば、商品詳細ページに閲覧ベースのロジックを導入するケースや、同ページに閲覧ベースと購入ベースの2つのロジックを導入するケースなどがあるそうです。

例として、オンラインショッピングサイト「マルイウェブチャネル」では、1つの商品詳細ページに購入ベースと閲覧ベースのロジックを導入し、幅広い訴求効果を狙っているそうです。

▼レコメンドティッカーに盛り込む情報を選定すること

レコメンドティッカーとは、レコメンドする商品の内容が表示されるスペースの事で「この製品を買った人はこんな製品も買っています」というティッカーの説明や、「オススメ商品!」といったタイトル、そしてそこに盛り込む商品数を決めるそうです。

ティッカーの基本要素として各商品には、「商品名や商品画像、説明文、価格、テキストリンク」などがついているため、限られた範囲内でティッカーの表示内容を選択しなくてはならないのです。

:一部抜粋———————————————-
例えば、商品詳細ページの半分程のスペースを用意し、関連ベースと購入ベースでレコメンドアイテムを表示するサイトもあれば、これに「最近チェックした商品」という閲覧履歴のロジックも加え、合計3カ所にティッカーを配置するサイトもある。さらに、各ティッカーのタイトル、説明、5商品分の商品画像、カテゴリ、商品名、価格を大きく表示するケースもある。

加えて、レコメンド機能の効果を十分に発揮するには、できるだけ商品画像はあった方が良い。レコメンド機能の利点が「ナビゲーション効果」と「セレンディピティ」(思いがけない発見)にあることはすでに連載の2回目で述べた通りだが、商品画像は直観的に認知できるため、この2つの利点が最大限に生かされる。
——————————————————–

ということです。これは、設計に役立つ情報ですな~♪

▼レコメンドティッカーの表示スペースを選定すること

よくあるレコメンドティッカーの表示ページですが、商品詳細ページやカートページ、購入完了ページの下部に表示するのが多いようです。でも、リニューアルや機能追加の際には、そのスペースの確保が難しいです。デザインや構成がそれぞれ異なるし、ファーストビューで表示したくても、他の要素との優先順位のバランスで頭を悩ませます(><)

:一部抜粋———————————————-
例えばドクターシーラボでは、商品詳細ページに閲覧ベースと閲覧履歴のロジックを導入し、閲覧ベースでレコメンドする商品を縦(右カラム)に、過去に閲覧した商品を横(メインカラム下部)に表示している。

もちろん、一度に目に入る横表示の方が商品を認識しやすいが、ドクターシーラボではサイトの構成を踏まえた上で縦に商品を並べることを選択し、ファーストビューで必ず「この製品を買った人はこんな製品も買っています」と表示されるように工夫している。また、閲覧履歴を商品詳細ページの最後に配置することにより、見直しの機会を与えて離脱を回避している。

このように、ユーザーの導線や視野を意識し、「接客ストーリー」を想定した上でレコメンドティッカーを表示すれば、ユーザーのティッカー認知度が上がり、訴求効果も大きくなる。
——————————————————–

>>もっと詳しく知りたい人は
レコメンド技術を「絵に描いたモチ」で終わらせないために–ECサイトのレコメンド技術を考える(5)

上記、参照元をオススメします。

■ということで・・・ ■■■■■■■■■■■■■■■■■■■

レコメンドが一般化しはじてた、近年のEC業界。設計時に組みこみの検討する機会が増えてきました。

Takumaが最近、勉強している「ディレクション/設計」(デザインは別ですがw)お題としてのキーワードとしては、
「ペルソナ設定/活用」
「コンバージョンシナリオ(上記なら接客ストーリーに近い)」
「ホスピタリティ/one to one を加味した設計」
を掲げています。

やっぱり、これらの一つの形になっている手法として「レコメンドを絡めたサイト設計/構築」があるのですが・・・こりゃやっぱりイバラの道ですな。

でも、前半で書いてある通りWEBのいいところというか専売特許的な側面なので是非マスターしておきたいな~。

サイトの基本的な「設計/デザイン/ディレクション」ができるようになった今。それらの強みをシナジーで発揮していかなければいけないステージに差し掛かっています。

「基礎(最低限の習得)⇒活用(単品で稼げる+情報活用)⇒応用(二つ以上の組み合わせ) の次の何か?(なんだろ~・・・)」この方向性を時代をにらんで見定めている今日この頃です。

2008.06.05

「Windows7スクリーンショット」

「Windows7スクリーンショット」UI設計好きです。
最新ナビゲーション大好きです。
Takumaです。
 

【スクリーンショット】
スクリーンショット、スクリーンキャプチャ、スクリーンダンプとは、コンピュータのモニタもしくはその他の視覚出力デバイス上に表示されたものの全体または一部分を写した画像のこと。(by ウィキペディア辞書)

先日取り上げたWindows7の画面キャプチャがいくつか公開されたようです。

▼Windows7のスクリーンショットいろいろ▼
http://www.crunchgear.com/2008/05/27/
windows-7-screen-grabs-look-better-than-they-sound/

やっぱり、マルチタッチとマウスで両方使えるようにしようとしてますね。
過渡期で初めてだから、担当者の頭を抱える姿が目に浮かぶ・・・

Vista見たいに無駄に重くならないように願ってます。

2008.05.30

「Windows7のマルチタッチ技術の評論」

Windows好きです。
マルチタッチ大好きです。
Takumaです。
 

【マルチタッチ】
指やペンなどで触れて操作する入力装置で、複数のポイントに同時に触れて操作することができる入力方式。 マルチタッチ方式のデバイスは同時に複数箇所に接触してそれぞれに位置や動きを指示することができる。大きな画面で複数人で同時に利用したり、複数の指による操作で、対象の移動や回転、画像のズームなどの動きを直感的に入力することができる。(by E-Wirds より一部抜粋)

先日、取り上げた「Windows7のマルチタッチ機能」の評論が各所で出てき始めている。
今回は、特にカウンターバランスをとるため、いくつかの記事の中から疑問を投げかける色が強い以下の記事になぞらえて考えてみたいと思います。

▼Windows 7のデモはMSお得意のまやかしか?▼
http://www.itmedia.co.jp/anchordesk/articles/0805/29/news080.html

■次世代OSでMac OS Xのまねばかり■

>>抜粋
Windows 7には、iPhoneやMacBook Air、新型MacBook ProといったApple製品のユーザーにとってはおなじみのマルチタッチ機能が搭載されている。さらには、Mac OS XのDock風インタフェースまで搭載されるようだ。

>>感想
この点については「とくに最近」という印象が強い。

確かに上記のような傾向がみられるが、マックがGUIを本格化させてから、Windowsが登場して業界を席捲。その後、WindowsのバージョンアップにつれてマックがWindowsスタイルのタスクバーをとりいれたり、長い目でみれば当然あってしかるべき、しのぎの削りあいと思えてならない。

■マルチタッチ機能■

>>抜粋
複数の指を使って画面を操作するMicrosoftのマルチタッチ式のユーザーインタフェース(UI)は、Windows Vistaを搭載する同社のばかでかいテーブル型PC「Surface Computing」から多くの要素を引き継いでいる。だがこのUIはiPhoneやiPod touchとも驚くほどよく似ており、マルチタッチパッド付きの最近のノート型Macに搭載されているMac OS Xで提供されている機能ともよく似ている。

>>感想
これについては、マックのインターフェースの進化は近年とくに素晴らしいと感じています。これについて、直感的なUIアプローチが可能になった近年では軍配はマックに上がっていると痛感しています。

ただし、この恩恵が事実上、多くのユーザに届くかは若干疑問が残ります。Ipodシリーズでの対等はすごいと感じましたが、PCのOS自体はまだWindowsに部が完全にあります。

マックは自社でのハードで動く事を前提(一部の例外はあれど)としていますが、汎用性の意味でWindowsはより各社のハードの推奨規格を想定にいれながら、しかも次世代というテーマとのバランスをとりながらシフトをユーザに進めなければいけません。
(Windows XPからVistaへの乗り換えがユーザ間でまだまだ行われていない実情と同様に)

その意味で、汎用性を大前提とするWEB業界に身をおく自分としては、Windowsがマックの生み出したヒントをより、多くのユーザが恩恵を受けられるように、言葉は悪いかも知れませんが、マッシュアップさせて普及させる事を心待ちにしています。

■Windows7でマウスは必要か■

>>抜粋
「マルチタッチ機能では画面上の操作が非常に自然で、マウスを使うよりもはるかに素早く操作を実行できる」と説明した。ただし同氏は引き続きマウスも必要だと強調している。

>>感想
前の記事で書いたとおり、当然だと思います。人間の動きをマウスやキーボードで制限している現行のインターフェースが普及している以上、シフトを少しずつしなければ多くのユーザはついていけませんし、マルチタッチ機能が生み出すさらなる動作のIFの大半を抽出し対応策を実現する為には、まだまだ時間がかかるというのが私の感想です。

■稼動ハードの問題■

>>抜粋
Microsoftが恐らく2009年の年末商戦期に向けてWindows 7を出荷するものと予想している。

>>感想
色々と上記の記事では書かれているが、近年の国内だけみれば流通事情をみるにあたり、それほど心配をしていない。

自作で組み立てるコストと比べ、金額はほぼ同じで各メーカーがこなれた金額でオールインワンパソコンを販売している。それに伴い、ユーザの足は少しずつシフトし秋葉原の自作パーツの店も次々に弊店に追い込まれている。(それだけじゃ、ないかもしれないけど。)

としても2009年の年末に販売したところで、マルチタッチが目的で移行するユーザがどれだけいるか疑問だし、あくまで一般ユーザはVistaで見送った結果、7になったという形が多くなるのでは無いだろうか?

■まとめ■

マルチタッチ技術のWindows搭載は直ぐに普及しないにしろ、向こう10年という観点で見た場合には、一つのパラダイムシフトの起因になる事は確かだとおもう。

またPCでのマルチタッチの本格使用がユーザで定着した先には、もうPC媒体から別の媒体とのメインユーザが移行か取り合いが始める可能性がある。(携帯やテレビとか)
というかデジタルインターフェースと人をつなぐ媒体のシフトは必ず起こると思うし。

どっちにしても、時代はマルチタッチに移行を始めているに違いないわけだから、情報設計の基礎は今の内にしっかりやっておきたい。でないと上記の通りIFが増えるインターフェース・スタンダードの中での設計は困難を極めると容易に想像ができるからである。

2008.05.28

「Windows7の目玉はマルチタッチ技術」

「Windows7の目玉はマルチタッチ技術」Windows好きです。
マルチタッチ大好きです。
Takumaです。
 

【マルチタッチ】
指やペンなどで触れて操作する入力装置で、複数のポイントに同時に触れて操作することができる入力方式。 マルチタッチ方式のデバイスは同時に複数箇所に接触してそれぞれに位置や動きを指示することができる。大きな画面で複数人で同時に利用したり、複数の指による操作で、対象の移動や回転、画像のズームなどの動きを直感的に入力することができる。(by E-Wirds より一部抜粋)

えー。マルチタッチ技術とはなんでしょう。
現在の生活の中だと、制約(できる動作やハード側の認識)はあるもの
「ATMのタッチパネル」とか「AppleのiPhone/IPod touch」とかとかでしょうか。

簡単に言えば、
PCでいうマウスが担ってたり、多くの携帯電話のボタンが担っている、
「動かす」とか「押す」という専門用語で言えば「入力作業」を
ディスプレイ画面(専用の物ですが)を直接触って行えるという感じです。

なんと、こんな記事を見っけた事でこんな記事を書いております。

▼builder:MS、「Windows 7」にマルチタッチ技術を搭載へ▼
http://builder.japan.zdnet.com/news/story/0,3800079086,20374109,00.htm

簡単にまとめると、
「2009年遅くにはPCでちゃんとしたマルチタッチ技術が登場して、テスト版なら既にできているよ。それにより、作業によってはマウスより早く処理できるかもね~」

と専門家が先日のフォーラムで語って、しかもMicrosoftは、タッチジェスチャーが次世代のWindows(Windows7)に搭載されることをアピールしているという内容です。

しかも、Microsoftはデモ映像を以下にてレビューしています。

▼Microsoft demonstrates Multi-touch▼
http://windowsvistablog.com/blogs/windowsvista/archive/2008/05/27
/microsoft-demonstrates-multi-touch.aspx

すげー。動いてるー。

思ったより早く、キーボードとかマウスとかの入力技術にとって変わるかもしれませんね。例えば、映画の2002年公開の『マイノリティ・リポート』では、ユーザーインタフェースの近未来をかなりリアルに再現しているといわれていますが・・・いけるんじゃね?

あとは、「人間が行うIfの細分化:これがしたいの洗い出し」とか「音声認識技術:英語とか日本語とか方言とかの識別技術」とか「実用可能なインフラ:コンテンツとかパソコン本体等々」が、いつ揃うかどうかですが・・・(かなり大変かも!?)

まー直ぐには「一般に定着」(既存の全てのインターフェースが担っている機能を実現して、ユーザーの大半が乗り換える)したり、「マイノリティ・リポート」の世界は実現しないだろけど~。目は光らせておかないと時代に置いてかれそうですね(^^;

2008.05.27

「ロゴの方程式」

「ロゴの方程式」デザイン好きです
ロゴ大好きです。
Takumaです。

【方程式】
未知数を含み、その未知数が特定の値をとるときだけに成立する等式。この特定の値を解または根という。(by Yahoo!辞書)

本ブログでも何度かご紹介しているロゴ。
有名企業のロゴの歴史から、組み合わせたロゴまでいろんな記事を紹介してまいりましたが、新展開です。

「ロゴの方程式」を紹介しているサイトを発見しました。
すごい。ロゴが方程式に基づいて作られているのならば、黄金比以上に汎用性のある美術的にアカデミックな論理手法になるはずです。

さあ見てみましょう!!

▼Logologos▼
http://logologos.blogspot.com/





はい。期待をあおってしまい、申し訳ありませんでした。
うん。パロディだわこれ。というか逆算的。

でも好きw

Next »