tella
こんにちは、お茶目です。再開しますよー。
サイトについて
がんワクチンの最先端医療サービスを提供する企業のコーポレートサイトです。
デザインについて
- 全体の整合性
- ブランドカラーを彩度の低いグリーンに設定しており、情報レベルによって濃淡を調整したり、見出し、リンク色の背景などに適用している。全体的に整合性があり、非常にバランスが良い。
UIについて
- シナリオに基づいた設計
- 各詳細ページで見出し、概要、小見出し、図のキャプションなど、それぞれの表現が異なっており、情報の重要性やパターンが理解しやすい。また、サブコンテンツエリアでは、カテゴリの内容によって誘導する内容が異なっている(ローカルナビゲーションとは別に)。おそらくシナリオに基づいた設計が成されているのだろう。
- ドロップダウン式のUI
- 良いのか悪いのかは別として、画面のスクロールに合わせて追従するUI、マウスオンするとドロップダウンするUIを導入している。ドロップダウン式のナビゲーションについては、どのページからでもショートカットで遷移出来るという点においては優れていると思うが、コンテンツに被ってしまうのが、個人的には好みでない。
- アクセスページの配慮
- アクセスのページは、最近ではiphoneなどをカーナビとして利用するユーザも増えているので、簡易地図だけでなく、googlemapへのリンクなども用意してあげると良いかもしれない。
以上になります。
大塚製薬
こんにちは。なんだか本当不定期更新になってしまいましたね…。
サイトについて
大塚製薬のコーポレートサイトがリニューアルされたようです。
UIについて
- 直感的な操作性を提供する
- 特定のターゲット層などが確定的でなく、幅広いユーザーの利用が想定できる場合、WEBのリテラシーが低いユーザーでも直感的に操作が行えるUIが好ましいと思います。例えば、ブラウザの機能に依存しがちな、印刷や文字可変といったものは、画面上で操作できた方が親切といえます。当サイトでは文字サイズを変更する機能を提供するだけでなく「文字サイズの変更方法」で画面上での操作に加え、ブラウザでの操作についても詳しくレクチャーしています。
- 本当に必要なインタフェース
- 「お問い合わせ」では、お問い合わせ内容の明確なカテゴリ分け、電話番号の提示、サイドコンテンツによくある質問を設けるなど、ユーザーを迷わせない、窓口の広いインタフェースが提供されています。よくプルダウンメニューでカテゴリ分けをしているサイトを見かけますが、そもそもプルダウンメニューという概念を知らないユーザーもいるかもしれません。入力フォームを見ただけで億劫になり離脱してしまうユーザーもいるかもしれません。問い合わせるまでもなく、FAQで解決してしまう可能性もあります。そういったユーザー行動を予め想定し、適切なインタフェースを提供すれば、見込み顧客を逃すことはないでしょう。
- クリアボタンは付けない
- 「クリア」ボタンは、Webサイトのフォームには不必要な代物です。苦労してフォームを入力したユーザーが誤ってクリアボタンを押下し、離脱してしまうリスクを考えれば、その方が無難だと思います。そもそも入力した内容を全て修正しなければいけないケースは稀であるし(これは私自身の経験上)、ほとんどのフォームにはエラー用のページが用意されているので、誤りがあるのなら確当箇所を修正すれば済む話だと思います。ユーザーの意向で修正を行う場合は、確認ページ、エラーページからでも、入力画面に戻れる仕様にすれば良いのです。
以上になります。
アステラス製薬
色々あって更新が滞りました。すみません…。今日も気分を盛り上げて頑張りましょう。
サイトについて
医薬品の製造・販売などを行う大手企業アステラス製薬のコーポレートサイトです。総合的に見ると非常に優れたサイトだと思います。UIについても様々な工夫が成されていて、非常に参考になります。是非分析してみてください。
UIについて
- 印刷ボタンを常に表示する
- 当サイトでは、ヘッダーエリアに印刷ボタンを配置しています。アクセスなどのページにのみ印刷ボタンを用意するサイトを多く見かけますが、文字サイズの調整と同じでユーザのWEBに対するリテラシーは多種多様なので、出来る限りの選択手段は提供したいですね。
- 音声読み上げボタンについて
- 音声読み上げボタンがあるページでは、ボタンをクリックすることであらかじめ設定された範囲のテキストを読み上げる仕組みになっています(詳しい説明は「音声読み上げについて」へ)。視力が低下してきている高年齢者や弱視等の軽度視覚障害者の方々のためのアクセシビリティ対策として導入されたものだと思いますが、基本的には正しい文書構造で論理的なマークアップが成されていれば必要ない代物な気がします。音声読み上げソフトなどは、ページの内容を上から下へ向かって読み進めるはずですが、当サイトの「音声読み上げボタン」はソース内の真ん中くらいに位置しています。せめてスキップリンクを用意するでもしないと、あまり意味がないのでは？と。さらにボタンが外部リンクとして開くので、戻る術が分からないユーザはさぞ混乱することでしょう。アクセシビリティ対策を行うのは素晴らしいことですが、本末転倒にならないよう配慮したいところです。
情報設計について
- キーワードを表示する
- 「患者さん・ご家族の皆さま」のメインビジュアルでは、「なるほど病気ガイド」というコンテンツが展開され、気になる病気の領域を選び、目的の病名をクリックするとその病気に関するキーワードが吹き出しとなって表示されます。思い当たるキーワードをクリックすると詳細ページに移動し、効率よく情報を得ることができます。詳細ページも非常に分かりやすい構成になっていますが、何かしらの症状を抱えているユーザにとってはショートカットとして利用できる設計だと思います。
- 各ページでQ&Aを表示する
- 「患者さん・ご家族の皆さま」では、各コンテンツでQ&Aを用意しています。Q&Aを一つのカテゴリとして扱うよりも、各ページでユーザの「分からない」について仮説を立て、想定しうる項目を提供した方がより親切だと思います。サイドエリアにQ&Aランキングというコンテンツも用意されている点も素晴らしいと思います。
以上になります。
MUJI VILLAGE-ムジビレッジ
こんにちは。今期初となる鍋パーティを行いました。鍋はおいしくて最高ですね。今日も気分を盛り上げて頑張りましょう。
http://www.muji-village.com/top.html
サイトについて
三菱地所×無印良品が行う分譲マンションプロジェクトのプロモーションサイトです。
無印良品らしい、シンプルでスマートなデザインです。アクセス情報や、間取りのバリエーション紹介など、ユーザーニーズが高いコンテンツに関しては非常に優れたUIを実装しています。
UIについて
- 周辺情報も提示する
- 「ロケーション」では、最寄駅からのアクセス方法を複数の側面から詳細に記している上、目印となる施設をピックアップし、各地点からの距離、徒歩何分かかるかを確認することができます。住宅などの内容を扱う場合は、目的地までの道のりだけではなく、周辺の環境なども重要視されるので、より詳しい方が効果的だと思います。また、各施設のイメージをライトボックスで表示させている点も、親切で良いですね。
- 表の使い勝手を向上させる
- 「PLAN」では、4タイプの間取りバリエーションを一覧表示し、目的別・間取り別にライトアップされたような表現で強調されます。クリックすると拡大されたウィンドウが展開され、そのウィンドウ上からでも他の間取りを選択することができ、非常に操作性に優れたUIといえます。「表」の使い勝手を向上させる手段として、覚えておきたいノウハウです。
http://www.muji-village.com/top.html
以上になります。
AMG - メルセデス・ベンツオフィシャルサイト
こんにちは。昨日はすみませんでした。気づいたら0時を回っておりました。気を取り直して今日から頑張ります。
http://mercedes-amg.jp/standard.html
サイトについて
言わずも知れる高級車、メルセデス・ベンツのオフィシャルサイトです。グラフィック、映像のクオリティが半端じゃありません。見ているだけでウットリしてしまいます。FLASHに関しては初心者で、カッコいい！とかこれやってみたい！とか抽象的な感じになると思いますが、これからは積極的に分析していこうと思います。
UIについて
- 画面を最大サイズで開かない
- いきなりフルスクリーンで展開されるFALSHサイトありますが、あれは半ば強制的に見せられてる感が否めません。ユーザーの中には、突然画面が真っ暗になったりすると、ウイルスに感染したのだと勘違いしてしまう方もいるそうです。当サイトのように、ユーザーの好みに合わせて、拡大/縮小できる方が親切ですね。
- 時系列で情報を伝える
- 映像を主としたコンテンツは、現在位置や残り時間がイメージにしにくいですよね。当サイトでは、「今どこにいるのか」が視覚的に把握できるようになっており、ショートカットや停止なども行えます。ナビゲーションに時間という概念を加えたようなもので、非常に操作がしやすくなります。ユーザーを待たせないための工夫として覚えておきたいですね。
http://mercedes-amg.jp/standard.html
以上になります。
ルネ・シティ駅前ビッグプロジェクト「きれいえ」
こんにちは。今週はいち早く鍋をやるんですが、誰か来ると分かっている時だけ掃除は張り切りますよね。今日も気分を盛り上げて頑張りましょう。
http://www.renai-city.com/kireie/main.html
サイトについて
JR新白岡駅前に開発されたビックタウンのプロジェクト「きれいえ」のプロモーションサイトです。
客観性があり、ユーザーとの親和性が高いので、サイトの誘導に沿って閲覧していれば、ストレスを感じることなく、スムーズに情報を得ることができます。リッチコンテンツの有効な活用事例です。
UIについて
- 新規ウィンドウの扱い
- 当サイトは、本サイトである「リフレの社」から新規ウィンドウで展開されます。ユーザーに中にはマルチウィンドウという概念を理解していない場合があり、Webブラウザの戻ボタンで前ページに戻ろうとしても戻れずに、そこで操作を断念してしまうこともあります。もし、新規ウィンドウでリンク先を表示させるのなら、当サイトのようにリンク先のページに「閉じる」ボタンを用意したほうが親切です。可能であれば、本サイトの方で「クリックすると新しいウィンドウが開きます」などの注意書きを入れた方がさらに良いでしょう。
情報設計について
- ユーザーとのコミュニケーション
- 部屋の片付けに関して、ママ達が抱える悩みを、よりユーザーに近い視点で知ることができます。問題(片付かない)に対して、5つの視点からの事情(5人のママ)を知ることで客観的な情報を得ることができ、ビフォーアフターによって具体的にどこがどう変わったのかを把握することができます。客観性に加えて、ストーリーに沿った単調なペースと、注目させるタイミングなどが実に巧妙で、ユーザーとのコミュニケーションが上手く成り立っている素晴らしい事例だと思います。
http://www.renai-city.com/kireie/main.html
以上になります。
MochiAds
こんにちは。容疑者Xの献身見てきました。原作を忠実に再現していて、期待を裏切らない作品でした。オススメです！今日も気分を盛り上げて頑張りましょう。
サイトについて
ゲーム関連事業を行う企業のコーポレートサイトだと思います(自信薄)。
ゲーム会社らしいポップなデザインが印象的です。“らしさ”を上手く表現している良い事例だと思います。
UIについて
- ラベルとフォームの関連付け
- 「お問い合わせ」では、ラベルとフォーム要素の関連付けがなされており、操作性を向上させています。この関連付けが行われていないと、チェックボックスなどの場合は小さな四角の範囲内でしかクリックすることができず、著しく操作性を低下させます。また、視覚障害を持つユーザーがタブを利用してフォーム内を移動する際、ラベル要素に定義づけが行われていると、ラベル内のテキストが読み上げられるので、アクセシビリティ的にも効果的といえます。さらに特徴的なのが、ラベル要素の幅を指定し、クリックできる範囲を広く確保している点です。これはなかなか面白いノウハウですね。
情報設計について
- “らしさ”の有効な伝え方
- 「Developers」のメインビジュアルエリアでは、キャラクターを操作して宙に浮かぶ丸い物体を壊すという簡易ゲームを楽しむことができます。企業の特徴や売りをクリエイティブに、目に見える形で表現することは、ダイレクトに“らしさ”を伝えるための有効手段になると思います。
以上になります。
