WEB屋は語る Magnetic-LaboブログMagnetic Labo Blog WEB屋は語る

Magnetic-LaboのWeb屋ブログです。 山梨にてホームページ制作・Webデザイン・コーディングを行っています。
企業のホームページや個人のホームページ、ECサイトの運営からシステム構築まで、一括して承ります。

有名サイトの検索窓を調べたよ

iroiro

検索窓はどこにある?

サイト内検索機能についてのお話です。
CMSサイトの普及に伴って多くのサイトがコンテンツの増大傾向にありサイト内検索機能は必須とも言える機能になっています。

さて、今回は大手のサイトを中心に検索フォーム、検索窓がどんな場所にどんなサイズで配置されているのかに注目してみました。
このところショッピングサイトについての記事を書いていることもありますのでショップサイトを中心に見てみます。

※調べたサイトは6/10~15のものです。

カラメル

karameru

・位置:ヘッダーの直下に左寄せ
・サイズ:340px×18px
・検索ボタン:画像ボタン[検索]

ロゴに近い場所にあるのですぐに視覚に飛び込んできます。
またサイトのキーカラーの緑色のバーの中にあるのでさらに目立っている気がします。
ショッピングモールということもあり検索窓の位置はかなり視認性の高い位置といえるでしょう。

イオンショップ おうちでイオン

aeon

・位置:ヘッダー内、中央
・サイズ:265px×22px

・検索ボタン:HTMLデフォルトsubmitボタン[検索]

位置はかなり目立つはずの位置なのですがスタイルシートなどでの装飾がないので視覚に飛び込んで来る感じでは無い気がします。
取ってつけたような場所な気がしますね。
どっちかというとデザイン的にもNoGood。

Amazon

amazon

・位置:ヘッダー内 中央右寄り
・サイズ:459px×23px

・検索ボタン:画像ボタン[検索]

かなり広い幅の検索窓です。
Amazonはご存知のとおり、もはや本だけの通販サイトではなく、インターネットの萬家です。
様々なカテゴリーに対応できるような配慮なのでしょう、複雑な組み合わせの長いキーワードも入力しやすい超長サイズです。
デザイン的にな目立つような装飾はありませんがロゴに近く窓サイズが大きいため見つけやすい検索窓です。

HMV

hmv

・位置:ヘッダーメニュー直下
・サイズ:288px×17px

・検索ボタン:画像ボタン[検索]

音楽CD、音楽コンテンツを扱うサイトなので検索窓の重要性はかなり高いと思います。
しかし装飾は割りとスッキリしていて検索窓を注目させようという印象はありません。
ただ検索窓の周囲のマージンの取り方がスッキリしていて視認性は高いような気がしますね。 絶妙なマージン。

無印良品

muji

・位置:右カラム
・サイズ:87px×15px

・検索ボタン:画像ボタン[検索]

今回紹介した中で唯一、ヘッダーに検索窓を持たないサイトです。
しかもサイズが極端に小さいです。
別にネット・ショップを持つサイトの場合、こんなもんでも良いのかも。
※実は無印良品はネットストアがあります。そっちのページは割りと大きめですというか定番っぽい作りです。

楽天

rakuten

・位置:ヘッダーメニュー直下
・サイズ:790px×25px

・検索ボタン:画像ボタン[検索]

今回紹介する中で最も幅の広い検索窓。 前述のAmazonよりもかなり大きい幅。
サイトのキーカラーの赤色のバーの中にあるのですが入力エリアが広すぎるので白い部分が多く一瞬、検索窓に見えない気がします。
白赤カラーのサイトって実は配色が難しいのかも知れません。
大きな検索窓でフォームの使いやすさは今回の比較サイト中、一番かな。

ヤフオク

yahoo

・位置:ヘッダー内 中央右寄り
・サイズ:470px×22px

・検索ボタン:画像ボタン[虫眼鏡ピクトグラム]

かなり広い幅の検索窓です。 ヤフオクも様々なカテゴリーを持つサイトです。
複雑な組み合わせの長いキーワードも入力しやすいサイズになっています。
デザイン的にな目立つような装飾はありませんがロゴに近くサイズが大きいため見つけやすい検索窓です。

Yahoo!ショッピング

yahoosp

・位置:ヘッダー直下中央  
・サイズ:255px×16px

・検索ボタン:HTMLデフォルトsubmitボタン[検索]

今回、紹介する中で一番目立っているかも知れません。
サイズこそ小さいもののオレンジのバーの中にある検索窓は目を引きます。
最近、Yahooもフラットデザインに進んでいるのでこっちもリニューアルされるかな?

ユニクロ

ynikuro

・位置:ヘッダー 右寄り
・サイズ:110px×20px

・検索ボタン:画像ボタン[虫眼鏡ピクトグラム]

ヘッダの右側でサイズも小さく地味な印象です。
幅の小ささは無印良品に次ぐ小ささです。
目に付く場所ではないですがデザインはスッキリして見えますしリピーターになってしまえば違和感は無いかも。
ところでサイトは流行のフラットデザインですね。
このへんのトレンド対応の速さは凄いです。

ZOZOTOWN

zozo

・位置:ヘッダ下 ロゴの真下
・サイズ:305px×19px

・検索ボタン:画像ボタン[虫眼鏡ピクトグラム]

サイズは大きくありませんが十分な高さをとっているため大きくみえます。 位置、サイズともに積極的に検索機能を活用してほしいのであろうことがわかります。

Youtube

youtube

・位置:ヘッダ ロゴの右
・サイズ:423px×23px
・検索ボタン:画像ボタン[虫眼鏡ピクトグラム]

サイズは大きめでヘッダー内で且つロゴのそばにあるのですがあんまり目立っていない気がします。
超有名な大手サイトでリピーターの多いサイトなので、細かいこだわりは不要なのでしょう。
一般のサイトでこの色使いでこの場所だと見つかりにくいかも。

どこの場所に置くべきか、サイズはどうするべきか

ヘッダーの中、あるいはその付近がトレンドではあるようです。
更に見つけやすくするならサイトロゴのそばがいいのかもしれません。
幅は広いほうが使いやすく見つけやすく、高さも低いよりは大きいほうが使いやすい印象です。
ただ検索窓が全くのブランク(空っぽ)だと見つけづらくなってしまうようです。
placeholder属性などで何らかの文言を入れたほうが良いですね。


検索ボタンは画像で作成された[検索]ボタンが最も多く、虫眼鏡アイコンは続く4サイト、デフォルトのHTMLの送信ボタンは2サイトでした。

カラーバー上に検索窓を配置するというのも検索ウインドウを置くのも発見しやすい気がしました。
さらにバーの色は、赤いバー上の検索窓の楽天よりも黒いバー上の検索窓のZOZOTOWNのほうが見つけやすいと感じました。

今回調べたサイトの検索窓のサイズは…
最大幅 790px
最小幅 87px
最大高さ 25px
最小高さ 15px
平均サイズ 323px×20px

…となりました。

ショッピングサイトはもちろん、色々なサイト制作のお役に立てれば幸いです。

では。

大手通販サイトに学ぶ 効率的に視線を集めよう

doko

大手通販サイトをみてみる

ショッピングサイトなどのレイアウトについて記事を投稿させていただいたのですが、結局どうすればいいの?
どんどん派手にしてみよう!
コンテンツを隠すのはコンテンツです


本当に難しいです。

私なりにさらに掘り下げてみたいと思います。

そこでユニクロのサイトです。(またかww)

yunikuro1

ユニクロのサイトを眺めてみると

medatsu2

これかというとこれじゃないわけです。 かと言って

medatsu1

これか? というとこれでもない感じです。
むしろ、

kontents

強いて言うとこれかも知れません。
印象としてはバランス重視型でとびきり目立たせている要素はないように感じます。
※全体のデザインは、トレンドのマットなデザインですね

ユニクロの場合、品揃えの多さは周知の事実ですから、「ユーザが自ら商品をサイトに探しに来る」ということを想定していると思うので、コレを是非どうぞ!のような誘導コンテンツをたくさん張り巡らせる必要は無いと考えたということでしょうか?

よって、どれかを圧倒的に目立たせているコンテンツも無くしたように見えます。

あるとしたらメインビジュアルのスライドショーの部分くらいでしょうか?
そのスライドショーの部分も、他のコンテンツとのデザイン的にバランスを保っていて奇抜なものとは思いません。

ユニクロがやっていること

かといってユニクロのサイトのトップページを見て思うことは目立つ要素が全くないわけではありません。 それは何かというと…

kontents2


コレです。
全体的に価格の表示が目立っています。
値段だけは各コンテンツエリアの決まった場所に「赤く」表示されています。
なるほど。 ユーザの行動を予測した構造だと思います。

前述のとおり「ユーザが自ら商品をサイトに探しに来る」わけですからついでに買ってもらいやすいように値段を目立つように掲載してるのでは無いでしょうか?

「990円くらいならついでにTシャツを1枚買おうかな?」のような感じです。

コンテンツの見せ方というのは考え方(ショップの方針)一つでこのように大きく変わります。
人気の大型店のサイトや競合サイトを研究してみるのも大切です。

では。

Facebookソーシャルプラグインの仕様変更

fblb1

Facebookのソーシャルプラグインに変更があったみたいです

最近はFacebookページのタイムラインをホームページに表示しているのをよく見ます。
今回は、TLを表示するガジェットの仕様が変わったぽいので、ちょっと投稿しておきます。
先日、作成させていただいた一般社団法人ガールスカウト山梨県連盟のサイトをチェックしてみたら気づきました。

赤い枠のところ見て下さい。

gsyamanashi

拡大します。
崩れていますね。

FacebookDevelopers

FacebookDevelopersを見てみると。
https://developers.facebook.com/docs/reference/plugins/like-box/

赤く囲んだところを見て下さい。

likebox

最小の幅の値が292PXとなっています。
今回の一般社団法人ガールスカウト山梨県連盟の場合、あきらかにレフトメニューの幅が292pxより狭いので崩れてしまったようです。
前はこんな表示なかった気がします。(あったかな?)

※試しに292px以下でソースコードを生成してみましたが、小さい幅には出来ないようでした。

FacebookのLike Boxを使ったサイトは、何度も見ていたのでこの変更があったのはごく最近だと思います。

HTML5用のソースのみ

いろいろ調べてみたんですが、HTML5用のソースのみが崩れているようです。
<ifarame>で作られているソースは崩れないのでHTML5用のソースコードを使っている人のみに影響が出てるっぽいです。

気になるWEB担当者のみなさん、自分のサイトをチェックしてみて下さい。

それでは。

どんどん派手にしてみよう!

bt1

目立つが価値

前回は「目立たせる」が「目立たせない」を作るなんてことを書いたのですが、今回はその真逆を書いてみたいと思います。
「言ってること変わってる!」なんて言わずに読んで下さい
前回記事「コンテンツを隠すのはコンテンツです」
http://blog.livedoor.jp/satoshi_magnet/archives/51861075.html

このサイトを見て下さい。
はい、ご存知「東急ハンズ」です。

tkh


各商品コンテンツへの誘導がたくさんあります。
特にページ下部。
目を引くコンテンツがてんこ盛り。

前回の記事では

medatsu2

…はダメで

medatsu1

…は良い

みたいな感じで説明をさせて頂きましたが、その法則が全てのケースで通用をするわけではないということです。

自分で探す、選ぶ喜び

我々は買い物をするときに全て買うものを決めて買い物に行くわけではありません。
衝動買いで「Tシャツ」を買ったとか、「キーホルダー」を買ったとか。
そもそもウインドウショッピングというレジャーもあるくらいです。(レジャーなの?)
一期一会の商品を手に取る楽しさもあります。

このように目的とは全く違った商品を見つける喜びってあると思うんです。

八百屋さんの軒先を覗いてみる

私たちは軒先に並ぶフルーツを見たときそのビタミンカラーに食欲を覚えます。
オレンジを買いたいお客さんが衝動買いでついでにリンゴを買うこともあります。
オレンジを売りたいからといってオレンジ以外の商品をブロッコリーにする必要は無いのです。

a0790_000767

露天商が楽しいわけ

お祭りに行けば出店があります。 殆どが取るに足らないものばかりですが、それでも覗いて歩くのは楽しいものです。
威勢の良い売り子と、色とりどりの食べ物や玩具。
添加物たっぷり…かもしれない甘味など普段は買ったりしませんが、ついつい財布の紐も緩みます。

a1180_006268

a0005_000408


たとえばこんなものも沢山並んでいるから見たくなるわけです。
ポツンと一個あってもあんまり面白くないですよね。

買うという目的だけで訪れるわけではありません。

 ・見て楽しむ  
 ・選んで楽しむ  
 ・探して楽しむ


こういったものも買い物のアミューズメント性に含まれていると思うのです。

こんな感じ

配色やデザインが派手なサイトがダメだというわけではありません。 これを見て下さい。

docchi1

好き嫌いで決めるものでもありませんが、売り方のベクトルが配色などデザインを決める一つの要素であることは間違えありません。

左は赤いパネルだけは目立っていて、それ以外はひかえめに見えます。
一方右はカラフルな模様が華やかでパネル全体が目に飛び込んできます。

ターゲットユーザとお店のブランディングが大事です

結局のところ。
サイトによって使い分けるのが良いということになります。
※使い分けるというよりもバランスです。目立たせ方の工夫が大事ということです。

・商品数がとてつもなく多く、商品探し自体を楽しませて購買意欲をかきたてたいサイト
・プレゼントなどギフトを多く扱っているお店など選ぶ楽しさがコンテンツの目的になっているサイト


…こんなサイトはサイト全体が目立ってもいいかもしれません。

賑やかさ華やかさそれ自体がコンテンツという考え方もあります。

(ただ派手なら良いわけじゃありません、選びやすさ、探しやすさへの配慮は必要。これが実は重要!)

自社のブランディングとターゲットユーザのしぼり込みが大事です。


ちょっと良い感じの賑やかな楽天のサイト
ファッション通販のイーザッカマニアストアーズ!
http://www.rakuten.ne.jp/gold/e-zakkamania/
※ステマじゃないですよ

では。

コンテンツを隠すのはコンテンツです

blogtitle

「目立たせる」が「目立たせない」を作る

最近、楽天、YahooなどASP系ECサイトの案件を担当することが多いのですが、とにかくこの手のサイトの多くは商品ページやカテゴリーページ等にリンクする画像ボタンが大量に並ぶ傾向があるようです。

それは、何らかのコンテンツ(企画ページ、商品)を紹介したいというオーナーの希望なんでしょうが木を隠すなら森になっていないでしょうか? サイトで何かを「目立たせる」ということは「他の何かを目立たなくさせる」と同意です。

TwitterやFBページでもちょっと話したのですが、せっかくなのでもう少しわかりやすく書いてみたいと思います。

medatsu

例えばこんな感じ

真っ赤なパネルを1枚用します。

medatsupanel


これを目立たせたいコンテンツだと仮定します。 このパネルを、グレイのパネルの敷き詰められた中に置いてみます。 上から2番目、左から2番目です。

medatsu1


お!目立ちます。

ではグレイのパネルを、カラフルなパネルに変えてみます。
それから、先ほどと同じように赤いパネルを置いてみます。
上から2番目、左から2番目です。

medatsu2

ありゃま。あんまり目立たない。。。

まず優先順位を決めましょう

先ず「何故、目立つようにしたいのか」を考えましょう。

例えば、ECサイトならば短期的なコンテンツへ誘導するボタンはより目立ったほうが良いですよね。

・季節限定商品
・数量限定商品
・バーゲン、アウトレットセール

こんな感じですね。

これについても更に…

・売れてない商品を売れるようにしたい
・売れている商品をさらに売りたい


こういう考え方もできると思います。

どうあれ、サイトを眺めてみて下さい。
どの商品も売れてくれれば最高ですが、どの商品も売れなくなっているかも知れません。

すごく久しぶりにブログを書いてみる

随分、ブログをサボってしまいました

本当に久しぶりです。 仕事はしていたのですがプライベートな理由で中々、ブログを書けませんでした。

…というのも、今年の1月、3月と相次いで妻の両親が亡くなりバタバタしてしまいました。

病中の看病、葬儀告別式、保険の手続き、相続問題やら… 忙殺されてしまいました。

その間も仕事をこなさねばならず、ブログの方は後回しになってしまいました。

そろそろ頑張ってブログを書いてみますのでよろしくお願いします。
では。

※なんか前もこんなこと言ってたなぁ…

ライフハックで効率アップできるのか!

lh

Webの仕事は制作時間が読めない?

Web制作の仕事は… 原稿や写真・イラスト素材を集めたり、デザインの確認・採決など… クライントの都合で作業が止まることが多々あります。

そんなこんなでタップリ停滞した案件が幾つも重なって始動するとドーンと恐ろしいデスマーチに突入です。

私もこれでクタクタになったりすることが少なくありません。
コレを見ているWeb屋のみなさんもそうですか?

本当にクライアントだけのせいなのか?

前述のとおりクライアントの都合によるところが大きいのは間違い無いとしても1から10まですべてがクライアントのせいなのでしょうか?
こちらの進行(管理)に問題は無いのでしょうか? 自分の行動についてちょっと客観的に分析。

リマインドメールは週一回

あらゆる案件においてリマインドメールは週一回出すようにしています。

でも本当はどうでしょうか?
正直な話、こっちが忙しい時は、クライントの確認待ちをいい事にリマインドメールを出さなかったりすることがあります。
「出すようにしている」のであって「必ず出している」ではありませんね。
これでは自分の都合で催促をしているに過ぎません。
※リマインドメール
進捗状況など「いまどんなかんじですか?」…的な気づきのためのメールです

クライアントにも作業しやすいタイミングがあるはず

自身にもルーズな部分があるのに他人(というかクライアント)をせめることは出来ません。

私が勝手な都合でリマインドメールを出してしまうようにクライアントにも都合があります。

それでもWeb制作に割く時間をつくることができないわけではないと思います。
「今ならイロイロ、溜まった仕事ができそうだなー」なんて日が月に1~2日はあったりするのではないでしょうか?
(Web制作もビジネスの一部ですし、機械損失なんてことも考えられますし)

Web担当者がそんな「よしやるぞ!」というタイミングになったとき、キチンと連絡を取れたりしたら意外にスケジュールも円滑になるんじゃないか…そんな風に感じませんか。

そんなわけで、いざというときにスッと動き出せるフレキシブルな状態を作り出すことができたらどうでしょうか?

であれば円滑にプロジェクトを遂行するには自分の作業スケジュールをちゃんと管理しないといけない…


そこで、ライフハック…

まず何をしよう…

ネットで「ライフハック」を検索すると色々出てきます。
なるほど色んなアイデアがありますね。 簡単そうなものから、そうでないものまで。
で、とりあえずそういったモノを参考に自分で4箇条をつくりました。

マイ・ライフハック4箇条

1.作業場の掃除 10分間 
2.PCのデータの整理 10分間
3.今日1日でやることを紙に書き出す
4.30分間は徹底的にネットサーフィンして遊ぶ


これでどのくらい効率が良くなるかなぁ。
というわけで取り急ぎ今日はここまで。
詳細はそのうち書きたいと思います。

では。
livedoor プロフィール


ホームページ制作
Magnetic Labo

ホームページ制作 Magnetic Labo


タグクラウド
QRコード
QRコード
  • ライブドアブログ