Archive

Posts Tagged ‘デザイン’

スマートフォン対応でお悩みのWeb担当者様へ。

2月 2nd, 2012
コメントは受け付けていません。

初めまして、児嶋と申します。

株式会社アパレルウェブでWebディレクターとして日夜業務にあたっております。
今後とも、どうぞお見知りおきを。

このブログは、アパレル業界でも特にWeb寄りの方にご覧頂いていると仮定して…
今回は2012年の重要な課題となるであろう、「スマートフォン対応」についてお話ししたいと思います。

iPhone

…と聞いただけで、頭が痛くなった方もいらっしゃるかもしれませんが、、
(かくいう自分もそのひとり)

スマートフォン対応は「面倒なタスク」ではなく、「お客様との接点を増やせる重要なチャンス!」と、
ここはポジティブに考えて頂きたいと思います。


突然ですが、iPhoneの製造元であるAppleのサイトをスマートフォンで見られたことはありますか?

見たことが無い!という方は、是非今すぐ見てみて下さい。
http://www.apple.com/jp/

なんと、Appleはスマートフォン向けのサイトを作っていません。
しかしながら、それほどストレス無く見られるレイアウトではありませんか?

実はこれ、非常に計算し尽くされたレイアウトで構成されているのです。

詳しく知りたい方はこちら↓
pxt | 考察:Appleはスマホサイトを作らない。

とかく「スマートフォン対応」と言いますと、「スマートフォン向けに最適化された専用のレイアウト」を
想像しがちですが、こんなアプローチもあるということを頭の片隅に憶えておいて頂ければと思います。


つまり何が言いたいのかというと、スマートフォン対応とは…

・お客様は、どの様な時間、場所、シーンに居るのか(通勤中?昼休憩?)
・お客様は、どの様なニーズがあるのか(商品情報を知りたい?お店の営業時間を知りたい?)
・お客様と、どの様なコミュニケーションを行っていきたいのか


…を突き詰めて考えていくことであって、やれHTML5だのレスポンシブデザインだの、といった事は二の次である。


とまぁ何だか偉そうですが、そんな風に思うわけです。

方法論や技術論だけではなく、Web上におけるステークホルダーとのエンゲージメントをどの様に深めていくべきか?
それをクライアント様と一緒になって、これからもトコトン追求していきたいと思います。

「iPhoneでもAndroidでも、色々な機種に対応しなければ!」とお悩みのご担当者様。
あなたが考えるべき内容は、そこではありませんよ。


ありきたりのスマートフォン最適化提案にお困りでしたら、アパレルウェブまで是非ご相談ください。

お問い合わせはこちら

kojima WEBマーケ&プロモ, 未分類, 紹介・おすすめ , , , , , , , , , ,

たった一つの違いで画像の効果を上げるコツ

8月 24th, 2011
コメントは受け付けていません。

以前、「たかが画像、されど画像」の記事において、画像内アイコンの変更だけで
CV率(新規登録ボタンのクリック率)が200%まで高まった事例をご紹介させて頂きましたが、
類似の事例がこちらの記事内にもありましたのでご紹介させて頂きます。

まずは下の2つの画像をご覧ください。
UsableWorld.comより引用)






画像内のヒートマップ(赤~緑の色分け)はユーザーの目線が集まった場所を表しており、
赤に近いほどより多くの視線が集まったことを意味しています。

1枚目と2枚目の画像を見比べると、モデルの赤ん坊が正面(こちら側)を見ている1枚目よりも、
右側の文字の方向を見ている2枚目の方が、文字部分に視線が集まっていることが見受けられます。

この現象について、元記事では以下のように説明されています。

『人は必ずしも君の広告クリエイティブではなく、主人公となるグラフィックの被写体が見つめる先を見る傾向がある』

確かに日常生活でも、誰かがある一点に視線を集中させているとその先に何があるのか気になってしまい、
ついその視線を追ってしまうことがありますね。

今回のサイトはそんな何気ない「人間の癖」を上手く利用した好事例だと思います。

これはモデルの着用画像を使用する機会の多いアパレル系のサイトでも参考に出来そうですね。
例えばバッグや靴などの雑貨に注目して欲しい場合は、さりげなくモデルの方にそのアイテムへ
目線を寄せていただいたり、全体のコーディネート画像でも目線は少しだけ外していただくなど、
ちょっとした工夫でより商品への注目、視線を集められるかもしれません。

一度試してみてはいかがでしょうか。
もちろん変更前と変更後の効果測定はお忘れなく。

栗山 芳季 WEBマーケ&プロモ, Web活用術 , ,

そのサイト、本当にユーザー目線に立っていますか?

6月 10th, 2011
コメントは受け付けていません。





















SEO対策やリスティング広告を始めとする集客系の施策がWEBマーケティングにおいて必須項目となり、市場がある程度成熟し始めた昨今、次のステップとしてサイト内部の使い易さ(=ユーザビリティ)の改善を意識する傾向が高まっているように感じられます。

いくらお客様にサイトへ訪問していただいても、品揃えが悪い、商品が探し難い、必要な情報がない、ということではお客様の不満を募らせるだけで売上には繋がりませので、当然といえば当然の傾向だと言えます。

もちろん、日々商品を充実させたり、ナビゲーションを改善したり、アクセス解析ツールを使って人気のあるコンテンツ(お客様が求める情報)をより分かりやすい箇所に配置することなどは、WEBサイトを運営する上で欠かせない作業ですので、実際に取り組まれている方も多くいらっしゃると思います。

一方、ここで抜け落ちてしまいがちなのが、「ユーザーの目線に立ってみる」、すなわち「自分の目線を捨てる」ということです。

これがどういうことかと言うと、例えばサイトのフォントについて、「一般的なサイズが12~14pxくらいだから、うちも12pxにしよう」などと安易に決めてしまってはいませんでしょうか。

このサイズは多くのサイトで使われており、ユーザーが見慣れたサイズなので通常は大きな問題はありません。ただ、もしサイトの訪問者が比較的高年齢層である場合、文字の視認性が低く、お客様にストレスを与えてしまっている可能性があります。

これは年齢の経過による視力の低下により小さな文字が読み難くなることが原因ですが、フォントについてはサイズだけでなく色にも注意する必要があります。人間は加齢により色覚にも変化が現れ、青や緑が見えにくくなる、明度・彩度の低い色が見えにくくなるといった傾向があります。

最近のデザインの流行りとして、フォントの色を黒ではなくグレーにすることがありますが、これもサイトに訪れるお客様の年齢層によっては安易に採用してはいけない手法です。

またその年齢層ですが、総務省の通信利用動向調査によると、既にインターネットユーザーの過半数が40代以上になっています。ということは、平均的なお客様が訪れるサイトの場合、12pxでは過半数のお客様にとって読み辛いといった状態になってしまっている可能性もあります(あくまで傾向であり、必ずしも40代以上の方が12pxの文字を読み辛いと感じるわけではありませんが・・・)。

ユーザビリティについて考える際は、「自分が読み易いからといって、お客様も読み易いとは限らない」ということを常に頭の片隅に置いておくように心掛けたいところです。

もちろんこれだけでなく、他にも注意する点はたくさんあります。

例えばサイトの幅や高さ。会社ではデスクトップのPCを使っているケースが多いと思われますが、実際のお客様は自宅でノートパソコンやネットブックを使ってアクセスする場合もあります。また必ずしも画面を最大化して閲覧するとは限りませんので、自分が普段見ている領域よりもお客様の見ている領域ははるかに狭い可能性もあります。

特にページのファーストビュー(アクセスした際に何もスクロールせず見える範囲)はお客様の行動に大きな影響を与えますので、一般的なお客様がファーストビューでどの範囲まで見ているかを確認することは重要になります。
※統計的なデータによると、横1000px以下、縦550px以下で、それぞれ80%のユーザーをカバーできるそうです。(参考:ファーストビューは何pxまで? ブラウザの表示領域サイズ5年間の変化を大公開

このように、サイトの使い易さを考える際は、自分の目線を捨て、お客様の目線に立って考えてみるということが重要になります。いま一度、お客様の目線に立ってみて、自分のサイトが本当に使い易いサイトになっているか確認してみては如何でしょうか。

栗山 芳季 WEBマーケ&プロモ, Web活用術 , ,

世界の通販(EC)サイトのデザインまとめ

12月 17th, 2009
コメントは受け付けていません。

アパレル業界は空前のECブーム!

というぐらいに本当にたくさんのECサイトが毎日のように立ち上がっていってますね。

まだECサイトはこれからということであれば、是非国内だけでなく海外のECデザインを参考にしてみてはいかがでしょうか?

CartFrenzy

ECサイトでデザインが優れているサイトをカテゴリごとに分類。いろんなサイトを一括で見れます。

参考までに下記のようなサイトが上がってました。

bug

cin

inspectelement.com

個人ブログですが優れたデザインのECサイトを23サイトPICK UPされてます。

参考までに下記のようなサイトが上がってました。

makoosh

rei

ecommr

とにかくたくさんのECサイトデザインが豊富に閲覧できます。

参考までに下記のようなサイトが上がってました。

toobydoo

osa

是非、ご参考にご覧下さい。

海外のECデザインはかなり個性的なものや高機能なものまで日本とはまた違った発展をしているようです。

日本のECサイトのクオリティも非常に高くなってきましたが、まだまだ海外から盗める要素もありそうです。

今後、日本と海外がどういう発展をしていくのか引き続きウォッチしていきます!!

増田智士 紹介・おすすめ ,

何かすごそうなショッピングサイト(よくわからないけど)

6月 26th, 2009
コメントは受け付けていません。

世の中、世界を見ると進んでいます。

日本ばかりにフォーカスしてもつまらないので、ご参考までによく分からないけどすごそうなショッピングサイトを集めてみました。

先進的なのか、お遊びなのか、息抜きにいろいろいじってみてください。

■Etsy
ハンドメイドのものを売り買いするアメリカのサイト。個人個人が出品でき、世界的にも有名です。未来的な検索機能充実。タイムマシーン検索なんかもあったりします(笑)

etsy

http://www.etsy.com/

■Panic Goods
カートへ商品を入れるのが楽しくなっちゃいます。ドラッグ&ドロップでサクサク!衝動買いに要注意!

panic

http://www.panic.com/goods/

■Prickie
Panic Goodsと似てカートへどんどん入れたくなってしまいます。コレクター器質の人はきっとはまりますね。

prickie

http://prickie.com/

■HEMA
商品が買えません。でもとりあえず見てください!おもしろいです。

hema

http://producten.hema.nl/

■oSkope
かっこよく、わかりやすくビジュアル的に商品を提示してくれます。商品はAMAZONなどのAPIを使用。

oskope

http://www.oskope.com/

■Amazon Windowshop
アマゾンのAPIを使ったサイトだと思われます。なんとなくビジュアルと動きがイケてます。

amazonwindow

http://www.windowshop.com/

■Zoomii.com
GoogleMap??なんて思ったら。。。

zoomiibooks

http://zoomii.com/#home

いかがでしたか?意外なヒントがこの中にあるかもしれません。

リッチなコンテンツや見せ方、使いやすさ、直感的操作などECの可能性を秘めているかもしれません。

これらのコンテンツはFlashAJAXFlexなどと言われる技術を用いて構築されてます。

覚えておいて損はないキーワードですので頭の片隅に入れておきましょう。

増田智士 Webトレンド・ニュース , , ,