いま,見ておきたいウェブサイト

第10回 Electrolux Blue Touch,magneticNorth,どんな?文科!数字で見る文部科学省:文部科学省

この記事を読むのに必要な時間:およそ 1.5 分

スッキリと晴れる日がだいぶ少なくなり,生乾きの洗濯物に悩まされつつある今日このごろ,いかがお過ごしでしょうか。今回も個人的に感じた素晴らしいサイトの特徴を,いくつかお話したいと思います。

統一された美しさ

『Electrolux Blue Touch』

スウェーデンに本社のある世界最大の白物家電メーカー,Electrolux(エレクトロラックス)の製品を特集したウェブサイト,『Electrolux Blue Touch』です。

図1 女性による終わりのない映像表現が印象的なトップページ

図1 女性による終わりのない映像表現が印象的なトップページ

Credit: F/NAZCA SAATCHI & SAATCHI, Colmeia

サイトでは「Blue Touch」と呼ばれる,青色のタッチコントロールパネルが特徴的な,3種類の家電製品(電子レンジ,食器洗浄機,冷蔵庫)の使用される状況をイメージした映像を使って、商品の特長を紹介していきます。

図2 製品が使われる状況を映像で表現

図2 製品が使われる状況を映像で表現

一貫性のあるデザイン

使用されている映像表現やグラフィックなど,非常に丁寧に作られているこのウェブサイトですが,中でも"点線"を効果的に使ったデザインが目立ちます。

図3 画面内のデザインに点線が生かされている

図3 画面内のデザインに点線が生かされている

画面内を確認してみると,各コンテンツのタイトルに使われているオリジナルのフォントやナビゲーション,リンク部分や矢印など,点線があらゆる部分のデザインに生かされているのが分かります。

デザインに一貫性を持たせ,細部のデザインにまでそのルールを適用する事で,サイトの統一感をより高めることに成功しているこのウェブサイト。デザインの統一された,美しいウェブサイトを作るための良いお手本となるのではないでしょうか。

操作で広がるウェブサイトの表現

『magneticNorth - an interactive design company, based in the UK』

イギリス・マンチェスターのインタラクティブデザイン会社,magneticNorthのウェブサイトです。

図4 最初に表示される4種類の基本操作

図4 最初に表示される4種類の基本操作

Credit: magneticNorth (mN)

ウェブサイト上にはナビゲーションがありませんが,最初に表示される4つの形をマウスカーソルで画面上に描く事で,ポートフォリオやニュースの確認,コンテンツの検索などが可能です。

図5 マウスで描いた形の中にコンテンツが表示される

図5 マウスで描いた形の中にコンテンツが表示される

画面の上部には,ユーザーの操作履歴が表示されており,選択する事でアンドゥ(ユーザーが行った操作を取り消して元に戻す)操作も可能になっているなど,細かい部分もよく考えられています。

ルールをしっかり守る

一見,操作が難しそうに感じられるこのサイトですが,例えば検索後のコンテンツ表示も,最初に表示される4つの基本操作だけで,さまざまな情報を見ることが可能です。

図6 検索後の表示も基本操作に基づいて行われる

図6 検索後の表示も基本操作に基づいて行われる

このように,ユーザーが迷うことのない自然な操作を可能にするためには,どのような場面でも,基本的な操作ルールがしっかり守られているということが挙げられます。

個人的にウェブサイトを見てまわる際には,表現の幅を広げ,ユーザーの感覚を拡張してくれるような新しい操作方法に、いつも期待をしています。しかし,場面ごとに操作方法が大きく変化したり,新たなルールが発生したりと,操作以前の問題でガッカリする例も少なくありません。

自由に動き回るためのルールひとつで,ユーザーのウェブサイトに対する印象は大きく違ったものとなります。そのためにも,新たなインターフェースや仕組みを作る場合には,その使い勝手を徹底的に検証してもらいたいと思います。

著者プロフィール

Lançamento(ランサメント)

国内外のウェブサイトを日々紹介する Blog『Lançamento』を運営する,自称“フリーランスという名の無職”。目指すは“エクスペリエンスデザイナー”(O'REILLY『Web情報アーキテクチャ』11ページ参照)。2008年の“ジェフの奇跡的な残留”を目の前で見たサッカー好き。

コメント

コメントの記入