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

2005/06/27

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

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

サイト作りの基本を、プロの視点から解説！　 Vol.048　2005/6/27

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

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

▼今日の話題
□サイト診断 - 当選者発表～！
□サイト診断第1弾！
□「体験者の声」掲載しました
□メルマガ紹介

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

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

しっかし、暑いですな。

私、夏になると無意味に浮かれます（笑）
カラオケに行くとTUBEの曲を歌いたくなります。

--------------------------------------------------------------------
■当選者発表～！
--------------------------------------------------------------------

「あなたのサイト、無料診断」企画
今回も、多くの方から応募いただきました！
どうもありがとうございます。
（毎度のことですが、全員にお返事できずスミマセン）

自分で言うのもヘンですが（笑）
このような企画に応募するということ自体が、気力のある証拠と思います。

さて、抽選しまして。
以下2名の方のサイトを、ガッツリ診断します！

●中野さん

「築地仲卸　伏高」
http://www.fushitaka.com/

診断レベル：激辛

●佐藤嘉憲さん

「佐藤嘉憲総合事務所」
http://www.geocities.jp/tqswg395/index.html

診断レベル：激辛

お二人とも、ビジネスサイトを運営されています。
サイトのクオリティが、そのまま利益に直結する。

私も、気を引き締めて診断せねば～！

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

さっそく、1番目のサイト診断を。
（いつもと同じく、長文になります。あらかじめご了承ください～）

中野さんが運営されている「築地仲卸　伏高」
http://www.fushitaka.com/

カツオ節やコンブ、煮干、乾物の通販サイトです。

【老舗の迫力！】

最初にサイトを拝見して、絶句しました。

「スゴイ充実しとる・・・」

中野さん、「売上を2倍にしたい」と書かれていますが・・・
すでに、相当な金額が売り上がっていません？（^ ^；

私が無知なだけかもしれませんが、
これだけの情報量を網羅したネットショップには
めったにお目にかかれないと思います。
（お世辞ではなくて！）

*大正時代からご商売されている老舗ならではの迫力
*長年のお客さんとの人間関係、信頼感
*充実した品揃え
*商品とつながりの深いウンチク／トリビア

などなど、情報が本当に豊富だし、なにより風格がある。
私が、逆に勉強させていただきたいくらいです（^ ^；

-----

＜Web制作業者に依頼されるときは、よくよく慎重に！＞

まずは、今回の診断で、いちばんお伝えしたいことを。

現時点で、中野さんがご検討されているかどうかは分かりませんが。
もし、将来的に、
ホームページ作成をWeb制作業者に外注される機会があるようでしたら、
次の点をアドバイスさせてください。

「そもそも、本当に業者に委託してよいのか？」
くれぐれも、慎重にご判断されることを強くオススメします。

当メルマガのVol.045

「丸投げは失敗のもと！？」
http://www.1000percent-web.com/ezine/archives/000114.html

この記事で、
「Web制作会社の人間は、あなたの業界についてはズブのシロウト」
と書きました。

中野さんのご商売は、
それこそ長年経営されている老舗のものです。

長年の店舗経営の過程で経験されたこと、苦労されたこと、
乾物に対する知識、思い入れ・・・。

そのビジネスの本質を、
私たちWeb業界の人間（年齢も若い）に理解しきれるわけがありません。

業者に頼めば、確かに、
「キレイ」で「それっぽい」ページには仕上げてくれるでしょう。

例えば、こんなふうに↓
http://www.toraya-group.co.jp/

トップページの面積の3分の2を
キレイなカツオ節の写真をデカデカと飾り立ててくれるかもしれない。

「プロフェッショナルな」ノウハウを駆使して、
サイト構成もキッチリと編集し直してくれるでしょう。

そんなキレイなページに仕上がれば、
同業の方々にも、きっと自慢できる。

しかし、です。

それだけで、「伏高」さんの本質を表現できるとは限らない。
かえって、お客さんを遠ざけてしまう原因にもなりかねません。

（もちろん、まれに優秀なWeb制作者であれば、
このような問題もカバーできるとは思いますが・・・
そのような人材は少数と思います）

現在の手作りのサイトには、
「当事者」である中野さんにしか表現できない「味」が
それこそギッシリ詰まっていると思います。

その魅力を、ヘタにつぶしてしまうことのないよう。
業者を慎重に精査のうえ、ご判断いただきたいのです。

-----

＜アラ探し！ - 重箱のスミを突つきます・・・＞

白状してしまいます。

中野さんのサイトは内容がすばらしく
改善点を挙げるのが難しいです（^ ^；

というか、ヘンに修正してしまうと、
サイトの魅力自体が失われてしまいそうで・・・
私などは、どうしても慎重にならざるをえません。

しかし、そればかりでは、診断になりませんね（^ ^；
とくにデザイン上の問題に関して、
私なりに気づいた点を書き出してみます。

いわゆる、アラ探し（笑）
重箱のスミですが、ご了承ください～。

-----

●トップページの目立つ位置に、「伏高」の特徴を！

ブラウザで「伏高」のトップページをパッと開いたときに
目に飛び込んでくる部分がありますね。
（スクロールしなくても見える部分）

そこに、お店の特徴を具体的にアピールできる要素を
付け加えてみてはいかがでしょうか？

例えば：

*カツオ節の写真
（パッと見て「美味しそう！」と思えるもの）
*大正時代から続いている、という事実

つまり、中野さんが
「少なくとも、コレだけは死んでも伝えたい」とお考えのものを
ピックアップして掲載するわけです。
（ただし、欲張って盛り込みすぎるのは逆効果！）

もちろん、ページの下のほうまでくまなく探せば、
このような情報を知ることはできます。

では、なぜ、目立つところでいちいちアピールする必要があるのか？

基本的に、サイトにやってくる訪問者は
「何も分かっていない」（笑）と思ったほうが確実だからです。
（とくに、生まれて初めて「伏高」にアクセスしてくる人）

「伏高」のことは、本当に何も知らないわけです。

「ページの下のほうまで読んでくれるだろう」
そんなことは、まず期待しないほうが無難（笑）

例えば、次のような人を想定してみてください。

頭が異常にボケていて、
目が悪くて、
落ち着きがなくて、
しかも酔っ払っている（笑）

このような人にもハッキリと伝わる方法で、
「伏高」の魅力を
分かりやすくアピールしてみてはいかがでしょうか？

-----

●サイトのタイトルが分かりづらい

「んっ、このサイトのタイトルは何だ？？」

初めて「伏高」のトップページを開いて見た数秒の間に、
私が抱いた印象です。
（印象というより、無意識に近い目の動き、というか・・・）

現在のレイアウトでは、
タイトル文字「伏高」が他の要素に殺されてしまっています。

左右に写真があり、スグ下に太字の文章が控えているので、
ページをパッと開いたときに「伏高」のタイトルに目が行きにくい。

例えば、
*「伏高」をロゴ画像（のれんの写真にあるようなもの）として掲載する
*上部にあるエンジ色ナビゲーションの上に移動する（左右の写真も）

などの処置を施して、タイトルが目立つようにしてみてください。

-----

●中央ぞろえ→左ぞろえに

トップページの最下部のほう、「詰め合わせ」の枠に、
「削り節詰合せ」「煮干詰合せ」といったリンク項目が
一覧で表示されています。

この部分は項目がたくさんあるので、
中央ぞろえではなく、左ぞろえのほうが見やすいと思います。

私のサイトで関連するデザインテクニックをご紹介しているので
よろしければ、ご参考に。

「見えない線に沿ってページをレイアウトしよう」
http://www.1000percent-web.com/howto/invisibleline.html

なぜ、左にそろえるかというと：
見えない線に沿って整列させることで、
訪問者は目線を動かしやすくなるんです。

つまり、見やすくなるわけです。

-----

●長い文章には改行を

これも、重箱のスミのような話で恐縮ですけど（^ ^；
文章の見せ方について、ちょっと気になった部分があります。

例えば、こちらのページ↓
http://www.fushitaka.com/2nd/hajimete.html

このページに、例えば次の文章が掲載されています。

引用ここから********************************************************

昭和から平成になる頃、私はサラリーマンを辞めて家業の鰹節屋を継ぐことにしました。
「これからの商売をどうしたもんか」と考えていたとき、昔ながらの良質な食材を求めて
わざわざ築地まで来てくださるお客様が相当数いらっしゃることに気がつきました。
築地に「真っ当な食材」は沢山あります。でも、築地の街は飲食店さんの為にあるような
街ですから、一見、真っ当そうですが、実は真っ当ではない食材も沢山あります。ですから、
商品知識のない一般の方が「真っ当な食材」を築地で見つけることは、簡単そうで、実は、
難しいことなのです。

引用ここまで********************************************************

書籍などの印刷物であれば、
このような文章レイアウトでもとくに問題ありません。

でも、Webページの場合は、少し工夫が必要です。

パソコンのモニターは、ただでさえ見づらい。
目が痛くなってしまう。

文章も、読みやすい、目の負担にならない形で載せたほうが親切です。

例えば、上記の文章レイアウトは次のように修正できます↓

修正例ここから******************************************************

昭和から平成になる頃、私はサラリーマンを辞めて家業の鰹節屋を継ぐことにしました。

「これからの商売をどうしたもんか」と考えていたとき、昔ながらの良質な食材を求めて
わざわざ築地まで来てくださるお客様が相当数いらっしゃることに気がつきました。

築地に「真っ当な食材」は沢山あります。
でも、築地の街は飲食店さんの為にあるような街ですから、一見、真っ当そうですが、
実は真っ当ではない食材も沢山あります。
ですから、商品知識のない一般の方が「真っ当な食材」を築地で見つけることは、
簡単そうで、実は、難しいことなのです。

修正例ここまで******************************************************

いかがでしょうか？

文章の意味をくみ取ったうえで、
適切な位置に改行を入れるなり、行間を空けるなりすると
長い文章でもだいぶ読みやすくなります。

訪問者の目に優しい（？）文章レイアウトを提供するわけです。

-----

●ことばの表記について

ココは本当にどうでもいい部分かもしれませんが（^ ^；
一応ご報告します。

例えば、こちらのページ↓
http://www.fushitaka.com/zouni.html

ページの大見出し「かつお節屋のお雑煮」のスグ右下に、
小さな文字で「築地より真っ当な食材をお届けします」とあります。

この文言をパッと読んだときに、
「築地よりも真っ当な・・・」と受け取ってしまいました。

まあ、スグに正しい意味が把握できたので
大きな問題ではないかもしれませんが、念のため。

-----

●リンクには分かりやすい色を

「どこがリンクなのか？」

サイト全体にわたって言えることですが、
リンクの色が統一されておらず、
どれがリンクなのかが識別しづらいです。

例えば、見出しの文字色を「茶色」で統一するのであれば、
リンクを貼る文字列は違う色にしてあげると、
区別しやすくなります。

加えて、リンクの色は、できるだけ統一してください。
訪問者がリンクを「探す」手間を省いてあげることができるので。

----

以上、私なりの改善案を列記させていただきました。

ただ、細かい部分については、
それほど大きな問題ではないでしょう。
時間的に余裕があるときにでも、
見直していただければじゅうぶんと思います。

くどいようですが。
「伏高」さんのサイトには、

*温かみ
*深み
*信頼感

があります。
とてもリアルな強い印象として、伝わってきます。

このどれをとっても、一朝一夕ではとても出せない。
老舗のお店ならではの、独自の魅力。

「伏高」というサイトにとって、
文句なしに重要な資産といえるでしょう。

将来的に、サイトのデザインを大幅に見直したり、
リニューアルを検討されることもあるかとは思いますが・・・
独自の「持ち味」だけは決して殺してしまわないよう。

このお願いをもって、
サイト診断のシメとさせていただきます。

中野さん、伏高さんの益々のご発展を、
心からお祈り申し上げます！

追伸：
中野さんのサイトを見ていたら、
ダシの効いた美味しいミソ汁が飲みたくなりますた（^ ^）

--------------------------------------------------------------------
■「体験者の声」掲載しました
--------------------------------------------------------------------

当サイトに、「体験者の声」を掲載しました。

「体験者の声」
http://www.1000percent-web.com/testimonial.html

以前にサイト診断をさせていただいた皆さんから
送っていただいたメッセージです。

今までは、「嫌われないWebデザイン」サイトにしても、
このメルマガにしても
「ひとりで運営している」という気持ちが強かったように思います。

学校の教室で、ひとり教壇に立って話をしているけれども、
聴衆はシーンと聴いてるだけ、というような・・・（笑）

しかし、皆さんの声を掲載することで、
なんとなく「つながり」が生まれたような不思議な感じです。

「ひとりでやっているわけじゃ、ないんだ」と。

メッセージを寄せていただいた皆さん、
どうもありがとうございます～（^ ^）

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

「新規開拓なくして成長なし」
http://www.mag2.com/m/0000121339.html

新規開拓・販売促進についての知識と知恵を紹介。
他業種の成功事例も研究することで、
あなたの新規顧客開拓力はグンと高まるハズです！

-----

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

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

しかしこのメルマガの本当にすごいところは、
Webサイト作りに関連するテクニック紹介。
現場でWeb制作に携わる人でないとなかなか気づかない
実用的なノウハウがてんこ盛りです（^ ^）

-----

「スクールでは教えてくれないWebデザイナーになる方法」
http://www.mag2.com/m/0000152499.html

制作現場でお仕事されている方ならではの「リアルな」内容。

スクールに通えば、
まちがいなく制作現場の仕事に「就く」ことはできますが、
仕事を進めるうえでの本質的な考え方、ツボまでは教えてくれません。

その盲点（？）を親切にカバーしてくれるメルマガです。

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

なおき
naoki@1000percent-web.com

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

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