natural vision
こんにちは。遅くなりましたが更新です！
サイトについて
レーシック手術を専門とするクリニックのコーポレートサイトです。
白を基調としたレイアウト、整ったシンプルなデザイン、クリニックらしい清潔感を感じました。グローバルナビゲーション下の背景色も目立っていて、インストラクションとしての役目が最大限に生かされています。
UIについて
- ひと目で分かるタイトル
- 当サイトは、ページの内容がひと目で分かるtitle要素にしています。title要素に使用される文字列は、ブラウザのタイトルバーだけでなく、お気に入り(ブックマーク)の登録、検索エンジンの検索結果でも重きが置かれています。タイトルの文字数制限は仕様で決められているわけではありませんが、HTML2.0の仕様書に「半角64文字(全角32文字)は可能とするように」と記述されています。今現在、GoogleやYahoo!などの検索結果でも、32文字くらいまではtitle要素の内容が表示されるため、32文字を目安に記述するのが得策だと思います。「院内のご案内」では、「院内のご案内 - クリニック案内│natural vision」といった具合に、右から左へ階層順に記述されており、ひと目で現在位置を把握することができます。また、タイトルにサイト名を明記しておくことで、何のサイトなのかが分かりやすくユーザーに安心感を与えられます。
- インストラクションの最適化
- 当サイトでは、各カテゴリで配色を分類し、レイアウトで情報を明確に区分しています。情報にイメージを付与することで、サイト内での情報搾取を効率的に行うことができます。ユーザーをゴールへ導くためには、インストラクションを最適化し、情報の手がかりを強化する必要があります。
以上になります。
Bio_100%
こんにちは。気づいたら活字中毒になってました。今日も気分を盛り上げて頑張りましょう。
サイトについて
ゲーム制作を主として活動を行う団体のオフィシャルサイトです。
直感的なFLASHメニュー、背景とのコントラスト、情報量での演出など、基本的ではあるけれど、ユーザビリティにおいて重要なノウハウが多く見られるサイトです。また、サイト固有のキャラクターが随所に登場し、サイト全体を和やかな雰囲気にしている点も注目です。
UIについて
- 直感的に使用可能なFLASHメニュー
- 当サイトのトップページでは、FLASHを利用したリッチコンテンツを展開していますが、コンテンツ部分とナビゲーション部分を分けることで、操作の複雑性を回避しています。このようなリッチコンテンツでありがちなのは、エンターテイメント性を重視し、複雑なナビゲーションを提供しているケースです。運営側はそれでよくても、ユーザが情報を直感的に得ることが出来なければ意味がありません。当然、サイトの目的にもよりますが、エンターテイメント性とナビゲーションという機能は分けて考えた方が得策といえます。
- 背景とのコントラスト
- 当サイトでは、目立たせる要素に対して、背景とのコントラストを高めることで、視認性を向上させています。例えば「イントロダクション」では、白背景に対して彩度の高い水色を使用することでコントラストを十分にとっています。さらに、見出しの背景色(水色)と文字色(白色)のコントラストも高く、視覚的なインパクトを与えています。また、視覚障害を持つユーザにも配慮し、富士通の「カラーセレクター」などを利用し、文字色と背景色のコントラストをチェックする必要があるでしょう。
- 情報量で演出する
- 「ゲームレビュー詳細」では、ページ内の情報量を多くし、認知度を高めています。最近では、タブを利用して情報を一まとめにし、スペースを有効活用しているインタフェースを見かけますが、“見えない情報は見てもらえない可能性もある”ということは念願に置いておく必要があります。当ページのような商品詳細などでは、あえて情報をまとめず、勢いや賑やかさを演出した方が効果的な場合があります。
情報設計について
ソフトバンクテレコム株式会社
こんにちは。最近は松屋のオリジナルカレーばかり食しています。今日も気分を盛り上げて頑張りましょう。
http://www.softbanktelecom.co.jp/ja/
サイトについて
電気通信事業を行う企業のコーポレートサイトです。
非の打ち所のない完成度の高いサイトです。他サイトと比べて一味違うところは、正しい文書構造、論理的なマークアップ、それに相応しいデザインが成されていることです。ノウハウとしてメモ書きしたいことだけ記述しましたが、他にも参考になる点満載なので、コーポレートサイトの参考にするなら是非。
UIについて
- 階層構造を分かりやすくする工夫
- 当サイトのローカルナビゲーションは、背景色を適用させることで、入れ子構造を分かりやすくしています(図1)。発想としては単純なことですが、一目見ただけで階層構造を認識できる認目性を見事に確保しています。普段、サイトを閲覧している際には気づかないような、ちょっとした工夫を発見すると嬉しいですね。こういう時に、サイト分析という視点で閲覧することに意義を感じます。
(図1)
情報設計について
- 正しい文書構造
- 正しい文書構造を論理的にマークアップし、それをデザインとして視覚的に反映させているサイトはなかなかありません。それが実装されているというだけでも、当サイトが高い完成度を誇るということは断言できます。論文と同じように、見出しや箇条書き、強調、引用などには、文書的に正しい構造というものがあります。例えば、中見出しは大見出しの後に出現する、箇条書きの項目はリストとして扱うなどです。正しい文書構造に基づいて、HTMLで論理的なマークアップを行い、定義した要素に相応しい体裁を与えることで、ユーザビリティ、アクセシビリティが飛躍的に向上します。また、ユーザにとってのメリットだけではなく、メンテナンス性の向上、SEO対策など、運営側にも大きなメリットをもたらします。
- コンセプトを伝える
- トップページのメインビジュアルでは、企業コンセプトをリッチコンテンツで表現し、ユニークな訴求を行っています。個人的な見解ですが、コーポレートサイトにおけるコンセプトの訴求は、トップページのメインビジュアルを活用するのが一番効果的だと思っています。ページ単位で訪れたユーザは、一度トップページにアクセスする確立が高いことも分かっており、「伝えたいこと」を伝えるのには最も適したエリアであることは間違いありません。また、「何のサイトなのか？」を認知させるという意味でも、メリットは大きいのではないでしょうか。
http://www.softbanktelecom.co.jp/ja/
以上になります。
東急ステイ青山プレミア
こんにちは。五十嵐隆の復活を間近に控え興奮中(独り言です)。今日も気分を盛り上げて頑張りましょう。
http://www.tokyustay.co.jp/hotel/AO/
サイトについて
ホテル「東京ステイ青山プレミア」のオフィシャルサイトです。
高級感を感じさせるトーン&マナー、ユーザビリティが配慮されたインタフェースからは、ホテルならではのホスピタリティを感じられます。WEBという媒体を利用して、ホテルブランドを上手く訴求できている事例ではないでしょうか。
UIについて
- ナビゲート機能の充実
- グローバルナビゲーションはページ上下に配置され、下層ページではローカルナビゲーションがサイドエリア、メインコンテンツエリア内の下部に配置されています。さらに、フッターエリアにはフッターナビゲーションのほかにロゴが配置されており、ホームに戻ることができます。いつかの記事でも書きましたが、ナビゲーションはあくまで“機能”なので、ページ内で一意のものである必要はありません。我々制作者からすれば、大体の見当はつくサイト構成でも、ユーザーからしてみれば、そんなことは知る由もなく、ナビゲーションだけを頼りに閲覧することになります。出来るだけ直感的に操作が出来るように配慮するのは容易なことではありませんが、常にユーザ視点で取り組む必要はあるでしょう。
- アクセスマップのあり方
- 「所在地・アクセス」では所在地の簡易地図を提供し、補助としてGoogleマップでの確認も行えるようになっています。最近は、GoogleマップAPIを利用したアクセスマップが流行っていますが、アクセシビリティ的な観点でみると、果たしてどうなのだろうというのが私の意見です。確かに機能満載で便利ですが、携帯電話と同じで、高機能であることが逆に扱いづらく感じるユーザもいるかもしれません。また、自由すぎるというのは、不必要な情報も多く含まれているということに他なりません。理想的なのは、当ページのように、必要な情報のみで構成された簡易地図と、“必要な人向け”にGoogleマップの用意をするという構成です。
http://www.tokyustay.co.jp/hotel/AO/
以上になります。
蓼科のリゾートホテル 「蓼科東急リゾート」
こんにちは。GEISAIというイベントに行ったら創作意欲が沸きました。今日も気分を盛り上げて頑張りましょう。
http://www.tateshina-tokyuresort.jp/
サイトについて
リゾートサービスを行う企業のコーポレートサイトです。
情報設計としては、気になる点もいくつかありますが、ユーザのニーズを正確に掴み、更新情報を充実させているという意味では、優秀なサイトといえるのではないでしょうか。
情報設計について
- 旬な情報
- 観光情報は、四季によって内容が異なるため、リアルタイムに情報を得たいところです。当サイトでは「最新情報」で、観光・イベント情報はもちろん、宿泊情報や道路状況まで、調べることができ、リアルタイムに旬な情報を提供しています。見たところ、更新頻度が高いだけでなく、内容も具体的に記述されていて、とても充実しています。宿泊オンライン予約への導線も確保しており、自然の美しさについクリックしてしまいそうです。
- 「限定」で誘導
- 当サイトでは、インターネット予約限定のプランを用意しています。インターネットを介して契約を行えば、当然顧客情報を提示することになり、運営側としてはその後のアピールが円滑になります。また、基本的に人は「限定」という言葉に弱いので、そういう心理をついた誘導方法は覚えておいて損はないでしょう。
http://www.tateshina-tokyuresort.jp/
以上になります。
BLD株式会社
こんばんは。すっかり夜ですが、何とか更新です(苦笑)。
サイトについて
開発業のほか、結婚式場/宿泊施設、レストランの運営を行う企業のコーポレートサイトです。
ユーザ中心に設計されており、分かりやすく、学びやすいインタフェースが実装されています。細かいことでも、実装している、していないのとでは、結果がまったく異なります。おそらくもっともっと効果的なノウハウが隠れていますので、発見された方は是非ともお教えください。
UIについて
- 明示的に伝える
- 当サイトの「お問合わせ」は、ユーザー中心設計が成されており、とても使い勝手が良いです。一つは、必須項目に対して“必須”と明記されている点です。「※」を必須項目として表記するパターンをよく見かけますが、ユーザはそんな注意書きなどを読まずに入力を始め、「※」の意味など意に介さず進行し、入力を忘れてしまうなんてことはよくあるそうです。また、「内容を消去」ボタンと「お問合わせ確認へ」ボタンがはっきりと区別されている点にも注目です。ボタンの体裁がまったく同じだと、うっかりリセットボタンを押下してしまう可能性があります。当ページでは色でのみ差異をつけていますが、大きさや位置も一工夫してみると、さらにトラブルが起きる可能性が低くなります。指示や示唆の対象となっている要素は、出来る限り明示的に伝える努力をしましょう。
- 複数の手段を提供する
- 「資料プリントアウト」では、ZIP形式でダウンロードが行えるほか、プリントアウトも直接行うことができます。閲覧するための複数の手段を提供するということは、それだけユーザのニーズに応えられるということなので、積極的に行っていきたいですね。
- 多機能ライトボックス
- 「事例・実績詳細」では、画面右下の「more picture」でイメージ画像を拡大して観覧することができる。このようなライブラリを利用したインタフェースはすでにスタンダードになりつつありますが、その中でもより優れたものを選びたいところです。当サイトが利用しているLightBoxは「Lightview」といい、背景色のほか、角丸の度合いや、灰色背景の描画ON/OFFとその透明度、zindex、表示の際のエフェクトなどがカスタマイズ可能なほか、スライドショー機能なども実装されており、多機能で様々な応用が利く素晴らしいライブラリです。是非活用してみてください。
デザインについて
- アイコン
- 「アクセスマップ」では、各路線のアイコンを表記し認目性を高めています。アイコンとは、画像を用いて、表示されている行為・対象物・概念を見つけやすく、認識しやすく、学びやすく、覚えやすくすることです。当サイトでは、行為・対象物・概念の実例となる画像、もしくはそれらを一般に連想させる「象徴」の画像を活用し、作業の負担を効率よく減らし、画面や制御装置の浪費を抑え、標識や制御装置を異文化間でもより理解できるようにしています。
以上になります。
シンフォニーマーケティング株式会社
こんにちは。最近主食がカントリーマアムになっているお茶目です。今日も気分を盛り上げて頑張りましょう。
http://www.symphony-marketing.co.jp/
サイトについて
BtoBに特化したハイレベルのマーケティングサービスを提供する企業のコーポレートサイトです。
何を、誰に、どのように伝えるのかを明確にし、それを基に導線設計が成されていることが伺えます。悩みを抱えたユーザがスムーズに情報を得られるような仕組みがこのサイトにはあります。情報設計だけでなく全体的に一貫性のあるインタフェースも手伝って、ユーザビリティ的にも優れたサイトといえるでしょう。
UIについて
- 一貫性のあるインタフェース
- 全体的に一貫性が保たれているサイトなのですが、とにかく「サービス」がその効果を顕著に表しています。それぞれのサービス詳細を見れば分かると思いますが「サービス概要」で概要、図版があり、「主な特徴」「お客様活用例」でそれぞれリスト項目が並べられています。同じ部分が同じ方法で表現させる時、システムはより使いやすく、学びやすくなります。一貫性があると、人は効率的に知識を新たなコンテキスト内に移し変えたり、新しい物事を速く学んだり、ある仕事内容のうち関係のある部分に注意を集中させたりできるのです。そういうデザイン学的な面とは別に、「比較のしやすさ」も大きなメリットになりますよね。単純なことなんですが、実装している、していないでは雲泥の差があることが分かります。
情報設計について
- サービス紹介への巧みな誘導
- 当サイトに訪れるユーザの多くは、抱えている問題を解決するために、具体的な解決手段を求めているはずです。運営側としては、WEBという媒体を使って見込み顧客情報を集め、リアルな営業につなげるというのが主な目的になるのではないでしょうか。「解決手段」というカテゴリを設け、ターゲットユーザが抱えている課題を具体的に提示し、それに対する解決手段として、自社サービスへの誘導を促しています。例えば「展示会フォロー」では、「お客様の課題」で客観的な課題内容を認識させ、「○○マーケティングが解決」で具体的な解決手段を提示し、自社サービスの詳細ページに誘導しています。何を、誰に、どうやって伝えるのかが明確で、マーケティング企業のWEBサイトはさすがだ！と思った次第です。
- ユーティリティを集約する
- 当サイトでは「サイトインフォ」でお問合わせや、サイトマップなどのユーティリティ系のコンテンツを集約している。サイト設計などにもよるかもしれませんが、こういう場合にローカルナビゲーションがあると便利ですよね。ユーティリティ系は基本的にフッター情報が主となることが多いので、お問合わせからサイトマップを見るときなどは、わざわざフッターまでスクロールしなければなりません。サイトによって構成も体裁も変わってくるので一概に「これが良い」とは言えませんが、こういう構成も覚えておきたいですね。
http://www.symphony-marketing.co.jp/
以上になります。
