コマースレポート

デザイナーComaCoの東奔西走

文字だらけのWEBサイトを華やかに、わかりやすくするには?

  • 更新日時:2008年10月09日
  • 担当:大河内

人は太古の昔から、文字より先に「絵」を使って情報を伝えてきました。「絵」は誰にでもわかりやすく伝わりやすい反面、抽象的で明確な意味を伝えるには文字の方が適しています。でも文字だらけのサイトではあまりにも寂しく、物足りない感じがしませんか?

私達が普段目にする機会の多いサインは、「一時停止」や「パーキング」などの交通標識、「男性用・女性用トイレ」「非常口」などの公共マークを代表として、ぱっと見て誰でもわかりやすい形や色で表現されています。
例えば、非常口のマークは日本で考案されたものとして有名ですが、出口から人が出て行く様を表したデザインは世代や国を問わず様々なところで使われています。
他にも、イエローにブラックが使われているマークや模様は、ご存知の通り危険あるいは注意という意味。イエロー×ブラックの組合せで視認性を高めていることから、一般には警戒色と言われているようです。
0881008comako_01.gif

コンピュータ上で使われているアイコンもそのわかりやすい一例です。
フォルダはフォルダ。
テキストファイルは文字が書かれている紙。あるいは鉛筆と紙。
ごみ箱はそのままごみ箱。などなど
ひと目でわかりやすい“アイコン”が並んでいます。これを使い出してからパソコンを様々な人が使えるようになり普及したと言っても過言ではないくらい、ステキなUIです。
0881008comako_02.gif

これらはもちろん、WEBサイトでも同様のことが言えます。
ちょっとしたアイコンをプラスするだけで、わかりやすくなり目に留まりやすくなるので様々なサイトで様々なデザインのアイコンを見ることができます。
その作り方も千差万別、立体的なものからドットのみで構成されたシンプルなもの、Web2.0風のものまで・・・サイトに合わせて制作されアイコンはそのWEBサイト全体のデザインを表現していて見るだけでデザインの勉強になります。

実際に、コンテンツタイトルに「文字」プラス「ちょっとしたアイコン」を加えるだけで、ぐっと視認性が増しわかりやすくなります。
実際に例を出して説明すると・・・。
↓アイコンを使用せず、タイトルのみでナビゲーションを作成。
0881008comako_03.gif

↓では次に、タイトル+アイコンでナビゲーションを作成。
0881008comako_04.gif

ひと手間加えるだけで、上記のようなナビゲーションに変身します。
このほかにも、携帯サイトの誘導バナーに携帯電話アイコンを加えたり、プレゼントキャンペーンのページにプレゼントマークを付けたり・・・。
ただ、そのコンテンツを表現するアイコンを選んだり作成したりするのは、WEBサイトのデザインにも合わせなければいけないため、実際は時間のかかる作業です。
さらにアイコンは表現できる“枠”が小さい分、できるだけ要素を単純化しなければならないという問題もあります。

アイコンは便利でひと手間かければ導入できる反面、使いすぎると逆にゴチャゴチャ見えてしまったり、サイトのデザインと統一性がなくなってしまったりと、もちろんデメリットもあり、使い時を考えてデザインしなければいけないと思います。
それらをふまえた上で、より使いやすい、わかりやすいWEBサイトを制作していければと考えています。

担当紹介
鈴木
株式会社コマースデザインプロダクト代表。31年間流通、マーケティング・SP業界に携わる。プライバシーコンサルタント資格取得。
杉浦
チーフディレクター。百貨店での主任経験を生かし、サイトディレクターとして活躍中。現在3歳の子供の子育て奮闘中。
大河内
チーフデザイナー。販促効果、ユーザビリティ、SEOを反映させた総合的デザインをクリエイト。趣味は美術館めぐり。
片倉
担当のSCを持ち集客を上げるために切磋琢磨。バイクに乗っての気分転換は欠かせません。
山田
Eコマースサイトの運用キャリアを経てCMSの企画、設計、システム運用を担当。休日の趣味は浅草探訪。
  • コマースNewsメルマガ登録
プライバシーマーク

当社は(財)日本情報処理開発協会より発行の、個人情報の適切な取り扱いを行う事業者に付与される【プライバシーマーク】(JISQ15001:2006準拠)を、平成19年12月1日に取得更新いたしました。

[株式会社コマースデザインプロダクト] 〒104-0042 東京都中央区入船1-6-8 第5ヒロタビル4F TEL:03-3552-5341

ホームページ制作・運営、メールマガジンの制作・配信代行、個人情報の運用・管理。
ショッピングセンターでのホームページを活用した販売促進ウェブマーケティング支援CMSツール「SES」の開発。

©COMMERCE DESIGN PRODUCT inc. All Right Reserved.