デザインについて

株式会社Webの間がデザインする際に考えていることはシンプルでわかりやすいことです。この点に特に注力しています。当然ホームページによって訴求する内容が異なります。しかしシンプルでわかりやすいことはほぼ共通できる概念であると考えています。

具体的にどこがシンプルでわかりやすいのかを例を挙げて説明します。

このホームページはよく取り上げていますが、レーシック体験談+(http://www.lasik-plus.biz/)という視力回復の矯正手術レーシックの体験談を集めたホームページです。

色について

レーシック体験談+はテーマカラーを青にしています。レーシックは医療行為となるため信頼性を感じてもらうことが第一です。全体的な色味が青系なのはこのためです。青は信頼感や爽やかさ、清潔感といった印象を与えます。青を中心に目立たせるべきところは暖色を入れました。

文字サイズ

文字サイズは一般的なホームページよりも大きいです。最近流行りつつあるということもありますが、一番は見やすさです。テーマがレーシックなので来訪者の大半は近視の方です。小さい文字よりも大きい文字で、情報もごちゃごちゃせずにすっきりしている方が見やすいことでしょう。

テキスト主体

株式会社Webの間が作るホームページはテキスト主体となります。見出し部分もできるだけ画像を使わないようにしています。もちろん全く使わないということではなく、不必要な画像を使わないというだけです。特に背景画像は多用しています。テキスト主体であることの利点は一番が検索エンジンとの親和性です。検索エンジンは画像よりもテキストベースの方が適切に評価されやすいです。また画像が多くなるとページの表示が重くなります。表示に時間がかかることによる利点はひとつもありません。ちょっと待つだけで確実にユーザーは離脱します。表示時間にはこだわるべきであると考えています。

カラムと幅

レーシック体験談+は左がコンテンツ、右側がメニューという2カラムの構成です。2カラムなのはわかりやすさです。3カラムになると情報量が増えるのでユーザーに迷いを与える可能性があります。余計な導線を省いた結果がシンプルな2カラムの構造となるのです。3カラムにするほど訴求すべきことがないので2カラムなのは必然でした。広告を考えると3カラムも選択肢に入りますが、レーシック体験談+においては必要ありません。
左がコンテンツ、右がメニューというのはコンテンツ部分を目立たせたいからです。Webにおいて左と右ではやっぱり左の方が目につきます。メニューは右側に配置しましたが、その分幅を充分に取っています。この幅が左にあると長過ぎますが、右ならば許容できます。
全体の幅は980pxです。Yahoo!JAPANがリニューアルしてから以前よりも幅広なレイアウトが多くなりました。日本で一番見慣れているYahoo!JAPANの幅が950pxです。そのためこの幅までは許容するだけの根拠があります。980pxというとYahoo!JAPANよりも広いではないかと思いますが、実際にはコンテンツ部分が640px、右メニューが300px、両者の間隔が10pxと950pxとなります。30pxは左右の見栄えの幅部分で実際にはYahoo!JAPANと同じ幅で提供しています。全体の幅は時代や状況によって適したサイズが異なります。しかし特に意図がなければYahoo!JAPANを基準に考えています。

iPhone対応

株式会社Webの間はホームページにおいて機会損失が生じないことを意識しています。これはホームページへ来訪してくれた方を逃がさないことはもちろんですが、来訪する機会を適切に設けることも考えています。前者はiPhoneをはじめスマートフォンにも対応すること、後者は検索エンジンからの流入を最大限に考慮することです。検索エンジンについてはまたの機会にしますが、iPhoneに対応することは絶対であると考えています。iPhoneで見ると多くのホームページは縮小したような表示になります。もちろん拡大することができるのでユーザーの操作によって情報には届くことができます。しかしこのユーザーによるストレスをなくしてより情報に到達しやすくすることを意識しています。
レーシック体験談+をiPhoneで見ると上記のようになります。PCで見ると左がコンテンツ、右がメニューとなっているのをiPhoneでは縦に一列になるようにしています。コンテンツ部分の幅はPCよりも狭くなります。これは情報の配置を変えることで対応しています。PCで適した配置とiPhoneで適した配置を組み替えているのです。この対応をするのに制作時にひと手間かかっています。でもこのひと手間は大切なエッセンスであると考えています。これを当たり前と考えていることが他の制作会社との大きな違いです。Flashを積極的に採用しないことも同じ理由です。iPhoneFlashを表示しないので不必要に使うと機会損失を招くだけです。


簡単ではありますが株式会社Webの間がデザイン面で考慮していることを例を挙げて説明しました。もちろんこの考え方が優れているとかそういうことではなく、「こんな制作会社もあるよ」くらいに感じてもらえれば充分です。今後はコーディングについても書きたいと考えています。

関連情報