ウッドフレンズ - ベンチマーKING│みんなでサイト分析

こんにちは。塩っぽいものを食べないと決めたにも関わらずマクドナルドで食事をしてきたお茶目です。今日も頑張ってきましょう。

http://www.woodfriends.jp/index.html

サイトについて

建築事業を行っている会社の住宅情報サイトです。

タイポグラフィ、レイアウトが非常に長けており、WEBだけではなくDTPの知識もあるデザイナーさんなのかな？と思いました。情報設計も緻密に設計されており、いわゆる「物件情報サイト」とは違って、自社のブランドを伝えたいという意図が伝わってきました。

UIについて

「戻る」ボタンを設置する: 各カテゴリから下層ページへ移動すると、「前に戻る」や「一覧に戻る」というリンクが設置されている。ブラウザの戻るボタンやパンクズで事足りるとはいえ、より親切な配慮だと思う。
リッチコンテンツへのリンク: トップページの右側にある「ウッドフレンズの注文住宅」というコンテンツは、FLASHを使ったリッチな動作をしており、それと連動するように、リンク先もリッチコンテンツが展開される。リンク先を想起させるという意味でも、上手い構成だと思う。
専門的な用語は説明をする: 「建築条件付土地」のページでは見出し下に「建築情報土地分譲とは？」という説明がある。また、「家づくりQ&A」や「家づくり用語集」などのコンテンツも用意されており、ユーザへの気配りが感じられる。
お問い合わせでのホスピタリティ: 「お問い合わせ」では「お気軽にお問い合わせください」といったライティングが簡潔に記述されている。また、お問い合わせ内容が分別されており、ユーザが直感的に操作をする事が出来、気を使わせない作りになっている。
必要事項などは簡潔な箇条書きにする: 「物件に関するお問い合わせ」では、「必要事項」が簡潔にまとめられており、簡単に目を通す事が出来る。こういった補助的な情報こそ読みやすさに配慮する必要がある。
グローバルナビゲーションの気持ちよさ: インタラクティブな動作で、使っていて非常に気持ちが良い。全てのページにあるからこそ、気を使いたい部分だ。
コーポレートカラーをキーカラーにする: ロゴをはじめ、見出し要素、リンク色、アイコンまで、統一してコーポレートカラーが使われている。ブランディングとしても、デザイン的なまとまりとしても有効な手段だと思う。
視覚的な情報も用意する: 「物件情報」のエリアから探すでは、それぞれのエリアを視覚的に選択できる図版が用意されている。テキストの箇条書きだけではなく、視覚的に見せた方が有効な場合は、こういった配慮も必要になる。
地図情報はプリントボタンを用意する: 「物件詳細情報」のアクセスMAPはプリントボタンが用意されている。別ウィンドウで開く場合は必須の対応だと思う。
PDFのサイズを明記する: 「週末の折込チラシ」では、PDFのアイコンをつけるだけでなく、サイズも明記されている。
カテゴリごとに階層を示したサイトマップ: サイトマップの見せ方はサイトによって様々だが、こうしてカテゴリごとに階層を示すと、とても見やすい。
404エラーページの対応: 404エラーページが用意されており、サイトの概論とサイトマップへのリンクが用意されている。
テキスト情報の確保: 「分譲マンション」など、各カテゴリのインデックスでは、見出し要素と概論が画像イメージとして提示されているが、この場合は概論をテキスト情報として扱ったほうが、視覚的にも見やすく、ユーザビリティ的にも良い。
ラベルを明示的に関連付ける: 各お問い合わせのフォーム項目には、明示的な関連付けがされていないため、テキストをクリックしてもチェックボックスにチェックが入らない状態になっている。ラベルによる明示的な関連付けを行えば、より直感的な操作が可能になるため、ユーザビリティ的にも良くなる。
フレームを使用しない: 「物件情報」などでは、フレームで情報を提示している箇所がある。スクロールにマウスオンさせて、動かせる、という動作はユーザに不満を感じさせる要因になり得る。縦に長くなってしまう情報を短くまとめる方法は他にもあるはずだ。

デザインについて

文章がメインのページには十分な余白を設ける: 「個人情報保護方針」など、文章メインのページは、全ての同じ構成になっている。メインコンテンツ内の左側に斜線の入ったグレーの余白があり、さらに十分な余白を左右上下に設けている。意識せずに観覧していれば気がつかない点かもしれないが、それはストレスを感じることなく情報を得られてるという事でもある。ホスピタリティというのは、案外“気を使わせない”ところにあるのかもしれない。
雑誌のようなレイアウト: 「オーナーズインタビュー」や「ウッドフレンズスタイルの家づくり」など、見出し要素が縦書きになっていたり、左右上下にイメージ画像が配置されていたり、まるで雑誌のようなレイアウトだ。かといってテキスト情報はしっかりと確保されており、それこそ、雑誌を読む感覚で観覧する事が出来る。
バナーの体裁を整える: トップページにある「注目情報」は、下層ページに移動するとバナーのような形で配置されているが、デザインの体裁が整えて、セルフなコンテンツであると示している。一番下にある「おいしい街」というバナーは、外部リンクになるため体裁をあえて崩している。

情報設計について

ブランドを伝える: 仲介物件を羅列した一般的な物件情報サイトではなく、「WOOD FRIENDS」というブランドを伝えるための構成になっている。例えば、ヘッダー部分にある「物件情報」というコンテンツはプライオリティを下げて右下に配置されている。また、各カテゴリでは「ウッドフレンズの〜」という見出しが目に飛び込んでくる。
また、「デザイナー紹介」や「週末折込チラシ」など、独自のコンテンツも用意され、よりコーポレートカラーが伝わるように考慮されている。
さりげにコンセプトを伝える
: 「暮らしのテーマで選ぶ」では、さりげなく暮らしに対するコンセプトを伝えているように思える。自社ブランドに関するページを設けるより、こういう伝え方の方が、いやらしさもなく、効果的だと思う。