構造計画研究所
こんにちは、お茶目です。昼夜逆転しちゃいました。
http://www.kke.co.jp/index.html
サイトについて
- バランス
- 情報の組織化がしっかりとされているので、何の情報があるのかが一見して把握できる。優先度の高いコンテンツは、目的型ナビゲーション(ダイレクト)で提供されており、階層構造が浅いため数回のクリックで詳細ページまで到達する事ができる。
- 学習しやすさ
- グローバルナビゲーションでは、メインの情報、サブの情報、ユーティリティの情報が視覚的に区別されており、ナビゲーションの意図を即座に理解する事ができる。
- 一貫性
- ナビゲーションシステム、リンク、レイアウト、ラベル、配置などに一貫性があり、学習しやすく、ユーザーに予想通りの結果を提供している。トップページからランディングページへ移動すると、メインビジュアルエリアが狭くなるが、そのルールが一貫しているため、ユーザーは自分が今どこにいるのかが把握しやすくなる。
- フィードバック
- ロールオーバー表示によって、これからクリックしようとしている選択肢が何かという事が分かりやすくなっている。「詳しくはこちら」をクリックすると、ページ遷移するか、ライトボックスが立ち上がるのだが、その動作が異なることによってフラストレーションを感じるユーザーもいる可能性がある。また、ナビゲーションのカテゴリ表示が強調されており、今どこにいるのかが即座に把握する事ができる。
- 効率性
- 商品・サービスページでは、検索システム、50音・アルファベット索引、サービス一覧での絞り込み機能など、目的の商品を見つけるための手段が複数提供されている。分野別の詳細ページからは主要商品・サービスへのショートカットリンクが提供されている。また、詳細ページからランディングページへ戻る、或はトップページに戻る場合も、視覚的に分かりやすく配慮している。
- わかりやすいラベル
- 専門用語や略語などを使用せず、ユーザーにとって分かりやすいラベルになっている。英語圏向けのページも用意している事もあり、一部英語の見出しも適用している。
- 視覚的な分かりやすさ
- リンクにアンダーラインが表示されていないが、オレンジ色で統一されているため、ユーザーはそれがリンクであると学習する事ができる。また、ユーティリティのアクセスマップ、サイトマップは区別がつきにくいと判断したのか、アイコンを使用している。
- サイトの種類に対する整合性
- 企業サイトに必要な要素、体裁、内容を網羅しているため、ファインダビリティが向上している。
http://www.kke.co.jp/index.html
以上になります。
名古屋学院大学
こんにちは、お茶目です。ベランダでセミが暴れてる…
サイトについて
名古屋学院大学の公式サイトです。まず注目したいのが、様々なステークホルダーを想定し、「対象者別メニュー」というナビゲーションを提供している点だ。それぞれのニーズに適した内容を提供し、最終的な目的地であるコンテンツへの誘導を計っている。当サイトのように情報のボリュームが大きく、想定されるターゲットが多岐に渡る場合はファインダビリティ(見つけやすさ)への配慮を心がけたい。もう一つ特徴的な点として、各ページの下部にサイトマップを配置している点だ。これも全てのユーザーが想定通りに行動するとは限らないので、どのページからでも目的のページを見つけやすくするための配慮だろう。また、サイトマップは検索エンジン向けの最適化を促進する事が出来る(らしい)ので、SEO的にも効果的かもしれない。その他にも、タブ切り替えのUI、ラベリング、検索システム、詳細ページでサマリーを解説してる点など、まだまだ出てきそうだ。
以上になります。
アヤナ リゾート＆スパ
こんにちは、お茶目です。最近肌荒れがひどいんです。
サイトについて
アヤナリゾートの公式サイト。広く浅い階層構造になっており、トップページで下層のナビゲーションも表示させているため、目的のページを見つけやすい。ブラウジングしていて決定的な点に気がついたのが、このサイトは「予約をする」という目的で情報探索しているユーザにとっては非常に不親切だ。まず、トップページでグローバルナビゲーションとは別に、メインビジュアルエリアで「ご宿泊予約リクエスト」という目的別ナビゲーションが提供されているのだが、RESORTのローカルナビゲーションから遷移するページと同じに設定されている。同一ページへのハイパーリンクに対して別のラベルを設定してしまうと混乱を招く恐れがあるので、政治的な理由などがない限りは一貫性を持たせた方が良いだろう。また、サービスを提供しているカテゴリの「予約をする」というリンクはそれ専用の外部ページへ移動するのだが、そのコンテンツが非常に使いづらいインタフェースで、これでは潜在ユーザはおろか顕在ユーザまで離脱してしまう。もっと問題なのが、Javascriptがオンになっていないと、専用ページにすら移動出来ない点だ。そしてさらに、トップページにはヘッダナビゲーションとしてあった「お問い合わせ」が下層ページでは見当たらない。クオリティの高いグラフィックデザイン、イメージ写真によって、ブランドイメージを必要十分に訴求出来ているだけに、勿体ないと思う。
以上になります。
印傳屋｜INDEN-YA
こんにちは、お茶目です。夜は気持ち涼しくなってきた。
サイトについて
甲州に400年以上も伝わる革工芸、「印伝」の老舗 印傳屋のコーポレートサイト。イメージ訴求を中心としたコンテンツとなっており、商品に合わせた美しいモーションが展開される。一般的なコーポレートサイトというとスタティックな印象が強いが、商品そのもののビジュアル面を強く訴求する場合は、ダイナミックなコンテンツが適しているように思う。ナビゲーションは水平に移動するが、整合性が保たれており、非常に使いやすい。FLASHサイトの場合、コンテンツ内での操作が分かりにくい場合があるが、当サイトではコンテキストのリンクの体裁を一貫させている上、戻るボタンも用意しているので、迷う事なくブラウジングする事が出来る。
以上になります。
トヨタ記念病院
こんにちは、お茶目です。死にかけのセミが怖すぎます。
サイトについて
トヨタ記念病院のホームページです。総合病院という事もあり、様々なニーズを持ったユーザーが想定されます。調査、分析の専門家がいるのでしょう、無駄のない設計になっています。
デザインについて
- キーカラーの体裁で強弱を付ける
- キーカラーである濃い緑色のみを利用して、情報の強弱を付けているのが盗聴的だ。ロゴ、ナビゲーション、見出しなど、一貫してそのルールが統一しているので、ユーザーは学習をしやすいのではないかと思う。ビジュアル的にもシンプルで無駄がない印象を受ける。
UIについて
- メインページのアプローチ
- サイトに訪れるユーザは何かしらの疑問を持っているはずなので、サイトのメインページでは、それに答えるアプローチが必要だ。トヨタ記念病院では、グローバルナビゲーション、ヘッダーナビゲーション、検索システム、目的別、連絡先、ニュース、クイックガイド、リクルートなど、およそ必要な情報が網羅されている。
- ハイパーテキストでの組織化
- 項目や階層内のエリア間を関連づけるために、ハイパーテキストリンクを使用している。この組織構造によって高い柔軟性を獲得する事ができる。場合によっては複雑になり、ユーザに混乱をもたらす可能性があるので注意したい。
- アイコンラベリング
- トヨタ記念病院では、PDFや外部リンクを示す場合などに、アイコンを利用している。アイコン言語は具体的かつ視覚的にも認識しやすい情報システムとして、非常に有効である。ただし一見して何を示しているのかが把握できないと、逆に混乱をもたらす事になる。
以上になります。
ユニバーサルスタジオジャパン
こんにちは、お茶目です。暑い日が続いてますね。
サイトについて
ユニバーサルスタジオジャパンのサイトのようです。キラキラしたデザインのノウハウが満載のサイト。
デザインについて
- テーマパークらしい表現
- キラキラしたパーツ群、飛び出すキャラクター、POPなアニメーションなど、テーマパークらしさが上手く表現されている。グラフィックなどの平面デザインを経験したデザイナーが担当したのか、バナーひとつとってもかなりのクオリティが保たれている。特集ページが多いのだが、どのページも似通ったものでなく、オリジナリティ溢れたものになっている。
UIについて
- 関連情報の提供
- それぞれのページに関連する情報を様々な形で提供してる。例えばアトラクションイベントのカテゴリでは、アトラクションの詳細ページから動画、スケジュール、スヌーピーが教えるプレイゾーン、チケットの購入、関連サイト、さらにはUSJファンに向けに思い出写真やコメントを投稿したり、素人の人が楽しみ方を質問できるコンテンツが用意されている。
以上になります。
