【嫌われないWebデザイン】サイト診断第2弾！ [まぐまぐ！]

2005/02/28

【嫌われないWebデザイン】サイト診断第2弾！

━━嫌われないWebデザイン━━━━━━━━━━━━━━━━━━━━━━

サイト作りの基本を、プロの視点から解説！　 Vol.031　2005/2/28

発行者：『嫌われないWebデザイン』なおき

↓訪問者に逃げられない、見やすいWebデザインの基本
http://www.1000percent-web.com/

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

▼今日の話題

□サイト診断第2弾！
□メルマガ紹介

--------------------------------------------------------------------

ハイホ～！
『嫌われないWebデザイン』のなおきです。

インフルエンザが流行っているみたいですが、
体調はいかがでしょうか？

私の周りでも、インフルエンザにやられて
寝込んでしまう人がけっこういます。
お互い、じゅうぶんに気をつけましょう～。

さてさて、前回に引き続き、サイト診断2回目！

今日の気分は南国♪
オーストラリアはパースにある旅行会社さんのサイトです。

ガッツリ診断しますよ～（^ ^）

--------------------------------------------------------------------
■サイト診断第2弾！
--------------------------------------------------------------------

お名前：BTさん

診断対象サイト：
「パーストラベルモール」
http://www.e-ozmall.com/travel/

診断レベル：「手かげん無しで！」

実はですね。
南国って、私の憧れなんです（^ ^）
（一度も行ったこと無いんですけど・・・）

「イルカと一緒に泳ぐ」なんて、
想像するだけで気が狂いそう（笑）

ですので、
「パーストラベルモール」さんのサイトは
かな～りピュアな（笑）気持ちで診断できそうです（^ ^）

以下、私なりの改善案のご提案です。

-----

●ページデザインについて

色の配色などで苦労されているとのことですが、
それほど問題は無いような気がします。

コンテンツのカテゴリごとに違う色を使われているのも
分かりやすくて、とても見やすいと思います～（^ ^）

配色は、凝りだしたらキリの無い話。

もちろん色にこだわるのも大切ですが、
情報の「見せ方」にこだわるほうが、もっと大切。

一般的な訪問者は、私たちが心配するほどには「色」を気にしません。
情報を探すことに必死だからです。

一定水準はクリアされているのですから、
あまり色使いに時間をかけすぎないほうが、得策かと思いますよ（^ ^）

-----

●細かいところですが・・・

とはいっても、ページデザインに関連して
細かな点でいくつか気づいたことはあります。

重箱のスミをつつくようで恐縮ですが（^ ^；
念のためお知らせしておきます。

【トップ上段の写真つきナビゲーション】

トップページ本文セクションの先頭に
「割引予約」「宿泊施設」「現地ツアー」などの
メニューが写真とセットで並んでいます。

視線を上下左右に忙しく動かさなくてはならないので、
ちょっと疲れてしまうかもしれません（^ ^；

ただ、それぞれの項目にイメージ写真を付けるのは
とても良いアイディアです。

この路線は活かしつつ、
レイアウトを少し変えてみてはいかがでしょうか。

メニューは合計で6個ですから：

*タテ3個 x 2行
*タテ2個 x 3行

どちらかのレイアウトで試してみてください。

ついでに、
写真付きのメニューレイアウトで参考になりそうなサイトを。

「東急ホテルズ」
http://www.tokyuhotels.co.jp/ja/
↑ページ上部に、写真 + テキストリンクのメニューが
ヨコに4個並んでいます。
限られたスペースを上手に使ったレイアウトです（^ ^）

「トヨタ自動車」
http://www.toyota.co.jp/
↑ページ下段右側のバナーリンク群に注目してください。
写真を左に置き、対応するテキストリンクが右に来ています。
このようなレイアウトも、アリかもしれません。

【角丸メニュー群】

ページ最上段右上に
「お申し込みの前に」「Q&A」など
角丸のメニューが並んでいます。

この部分は、それぞれのメニュー画像の間隔を
もっと詰めてしまってよいかと思います。
（5px～10pxくらいが、ちょうど良いでしょうか）

機能の似たメニュー同士をビシッと並べてあげることで、
ひとつの「かたまり」として見てもらえるわけです。

【画像にはaltタグを】

例えば、ページ最上段左側にある英文ロゴ
"Perth Travel Mall -Summer"

このGIF画像のaltタグに、
「パーストラベルモール」を含む文字列を入れてください。

不自然に長くなりすぎなければ、
ここにaltを入れることは、スパムでもなんでもありません。

検索エンジンのロボットはソースコードを先頭から読んでいくので、
ちょっとしたSEOにもなります。
（ただし！
メニュー項目と関係の無い言葉はaltには入れないよう、
くれぐれもご注意ください）

同じく、ページ最上段右上のメニュー画像にも
altタグを入れてあげると、
とくに目の不自由な訪問者に親切ですよ（^ ^）

-----

●言葉の表現

スミマセン、またまた、本当に細かいところなのですが・・・（^ ^；
言葉の表現で、ちょっと気になったところがあります。

「ホテル・コンドミニアム」のカテゴリ

各ホテル紹介ページのいちばん下段右側に
「この商品について質問をする」というリンクがあります。

例えば、こちら↓
http://www.e-ozmall.com/travel/hotel_5/zt_hilton/

旅行業者さんから見れば、「ホテル」というのも
確かにひとつの「商品」には違いないと思います。

でも、旅行者の側からすると、
夢から現実に引き戻されるような、
少し興ざめの気分になってしまうかもしれません・・・（^ ^；

このページを見る人は、
ホテルでの快適な休暇を夢みているはずです。

「ホテルも商品である」ことは頭では分かっていても、
せめて、いっときの夢だけは見させて欲しい・・・。

BTさんの社内のご事情もあるかとは思いますが、
いち旅行者として、ムリを承知の（笑）リクエストです（^ ^）

-----

●予約フォーム

予約フォーム

「お客様番号」と「パスワード」を発行するべきか、
初めて来た人でも予約できるようにするべきか？

この点で悩まれているとのこと。

この問題は：

*頻繁に予約する常連さん（リピーター）
*一度きり、もしくは数回しか予約しないお客さん

どちらの割合が多いか？
どちらを大切にしていきたいか？

にかかってくると思います。

もし、リピーターの割合が多いのであれば、
「お客様番号」と「パスワード」を発行したほうが親切です。

個人情報を予約する度にいちいち入力するのは、
おそろしく面倒だからです。

例えばamazonでは、
ひとりのお客さんごとにカスタマーID（メールアドレス）と
パスワードを発行し、アカウントを作成しています。

私のように、amazonでよく本を買う人間からすれば、
クレジットカード情報などをいちいち入力する手間が省けるので
このサービスはメチャクチャありがたいです（^ ^）

逆に、リピーターが少なく「一度きり」の
お客さんのほうが多いのであれば、
パスワードを発行することは、逆にマイナスになってしまいます。

予約システムをどのようにするかという問題では、
現状の客層、および今後の集客プランも
慎重に考慮する必要があります。

貴社のマネージャーの方ともご相談されてから
判断されたほうが、間違い無いかと思います。

-----

●ネット割引の特典は、より具体的に提示

サイトトップの目立つ位置に、
「インターネット割引予約で簡単予約！」とあります。

ただ、「何が」「どれくらい割引されるのか」が分かりづらい。
「割引」という言葉が、リアルなものとして伝わってこないんですね。

せっかくここで「割引」のオファーを強調しているのですから、
具体的な割引金額の一例（サンプル）を
同じく目立つ位置に入れてみてはいかがでしょうか？

例えば：

○○○ホテル
\50,000 → \35,000

といった具合に。

割引価格のリストを、すべて盛り込む必要はないんです。

とくにオトクなパックを厳選して載せるのが
効果的かと思います。

-----

●写真はBTさんの資産です。

「オーストラリアに旅行に来る人は、何を求めているのか？」

*砂漠を見たい人が多いのか？
*海辺のリゾートで楽しみたい人が多いのか？

お客さんの好み・要望については、
私なんかよりも、BTさんのほうが断然お詳しいはず。

なので、「旅行ビジネスには素人」であることをお断りした上で、
ご参考までに、私の意見を述べさせていただきますね。

現在のサイトのトップページ
メインの横長バナータイトルには、
「広大な平原を一直線に伸びる道路」の写真を使われています。

これはもったいないかも・・・。

サイトの中のページに、、
もっとステキな景色がたくさんあるではないですか～（^ ^）

*まぶしいくらいに真っ白な砂浜
*透き通った海の中を泳ぎまわるイルカ
*青い海にのびる橋「バッセルトンジェッティー」

こういった光景のイメージ写真は、
とくに観光客を集めるサイトにとっては
メチャクチャ貴重な「資産」だと思うのです。

写真のサイズは小さくても、見た瞬間に「おおっ！」と思います。
お世辞ぬきで、グッときます（^ ^）

私が仕事でサイトを作るときも
「キラーイメージ」となるイメージ写真が1枚でも入ると、
ページの印象がガラリと変わります。

デザインうんぬん以前の問題で、
写真そのものが、目に訴えるパワーを持っているからです。

普通、そのような「キラーイメージ」は
そうカンタンに見つかるものではありません。

でも、BTさんはお持ちです。

私からすれば、パースの美しい風景写真は、それこそ「宝の山」。

必ずしも、大きくバーンと載せる必要は無いんです。
目立つところに、ありさえすればいい。

それが、キラーイメージの力なんです（^ ^）

-----

●パースってどんなところ？？

私も、「パース」という場所が
オーストラリアにあることは知っていました。
昔、社会科の時間に習いましたから。

でも、「どのような場所なのか？」という具体的な情報は
BTさんのサイトを拝見するまで知りませんでした。

「パース」と言われて、
「あっ、オーストラリアにある観光地だな」
とはなかなか発想しづらい。

まして、こんなにキレイな海があるなんて、
思いもよらなかった・・・。

私が単に無知なだけかもしれませんが（笑）、
パースについて詳しい知識の無い人は
少なからずいるのではないでしょうか。

「パースというのは、こんなところです！」

パースの「紹介ダイジェストページ」を
一ページ作ってみてはいかがでしょうか？

ここでは、細かい情報は省いてもかまわないと思います。

パースという土地の「エッセンス」を抽出して
分かりやすく伝えてあげるわけです。
（最低限、「オーストラリアにある」ことだけは
目立つ位置で伝えられるとベストです）

もちろん、写真はイメージ重視（！）でベストのものを。

ダイジェストページを作ったら、
トップページの目立つところからリンクすると効果的でしょう。

このような「ダイジェスト形式で見せちゃう作戦」（？）は、
企業サイトで新しいサービスを訪問者に説明するときに、
よく使われる手です。

「パースってどんなところだろう・・・？」

興味本位でやってきた訪問者のハートに
トドメの一撃を刺すわけです（笑）

ここは勝負どころですよ（^ ^）

-----

以上、BTさんの「パーストラベルモール」の診断でした。

既にスッキリさわやかなデザインに仕上がっているので、
情報の「見せ方」にさらなるスパイスを一振りすれば
もっと良いサイトになると思いますよ～（^ ^）

私自身が南国に憧れているものですから
ついつい写真の話が多くなってしまいましたが・・・

でも、だからこそ、いちユーザーとしての素直な意見も
盛り込めたのではないかと思います。

ひとつのヒントとして、活用していただけたらウレシイです。

BTさん、パースのステキな休暇旅行を
パラダイスに飢えた（笑）旅行者に提供してください！

私のご提案も参考にしていただきつつ、
いろいろ考えながら試行錯誤を繰り返していけば
道は自ずと開けるはずです。

「パーストラベルモール」のさらなるご発展を
心よりお祈りいたします～（^ ^）

P.S.
そうそう。
もし、万が一、私がパースに行ってしまうような（笑）機会があれば
安くしていただけないでしょうか（笑）？

いつの日か、イルカと泳ぎたひ～。
（まとまった休みがなかなか取れないのが
ツライところです・・・）

-----

「あなたのサイト無料診断」企画
おかげさまで、今回も（？）無事に終えることができました。

一本締めでもしようかな（笑）

これからも、気が向いたら
どんどんやっていきたいと思います！

いつ飛び出すか分かりませんけど、次回をお楽しみに（^ ^）

--------------------------------------------------------------------
■メルマガ紹介
--------------------------------------------------------------------

「WEBデザイナーが送る：ホームページをもっとすてきに」
http://www.mag2.com/m/0000125587.htm

私と同業、Webデザイナーの1000leavesさんが発行されています。
Webサイトで写真を効果的に見せる（魅せる？）ための
「フォトアルバムキット」を無料で提供。

しかしこのメルマガの本当にすごいところは、
Webサイト作りに関連するテクニック紹介。
例えば「画像ファイル名の効率的な付け方」など
現場でWeb制作に携わる人でないとなかなか気づかない
実用的なノウハウがてんこ盛りです（^ ^）

-----

「ウェブアクセシビリティ入門」
http://www.mag2.com/m/0000145212.htm

GoogleやYahoo!YSTといった検索エンジンが、
ストリクトなHTMLで書かれたページを
優先的に評価する理由を知っていますか？

「それがルールだから」というわけではありません。
HTMLというのは、本来、
「情報」を整理して提供するためのものだからです。

高齢化社会が訪れ、福祉ビジネスも進展しつつある今、
あなたのサイトは障害者や高齢者にも読みやすくできていますか？

このメルマガでは、
ウェブアクセシビリティの基本と必見のノウハウを
実例とともに紹介しています。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
メルマガの感想・ダメ出し（笑）など、何でもお気軽にお寄せください！

なおき
naoki@1000percent-web.com

嫌われないWebデザイン
http://www.1000percent-web.com/

--------------------------------------------------------------------
メルマガ配信解除は、↓こちら
http://www.mag2.com/m/0000135268.htm
（うう、さみしいですけど ^ ^；・・・
短い間でしたが、購読ありがとうございました！）
--------------------------------------------------------------------