先週、中国の上海に出張で行ってきました。上海は想像していたよりも都会で、活気あふれる街でした。上海におけるナビゲーションデザインというのは、日本のものとは若干違っていて、例えば地下鉄の表示などは日本の感覚でいたら、一駅乗り過ごしてしまうというトラブルもありました。
そんな経験もあり、UIは重要だなと再認識しました。そんなつながりで、今回はUIについて考えさせられるサイトを6つほどご紹介します。
UIを構成するものに、情報、ルック&フィール、フィードバック、機能の4点が挙げられると思います。フィードバックとは、ユーザーがそのUIに触れたときのUIのアクションを指します。HTMLとCSSのみで作るUIは、情報やルック&フィールに関しては幅を持たせられるものの、フィードバックや機能は限定されます。FlashやAjaxといった技術を用いて作られたUIは、良くも悪くもフィードバックおよび機能の面でもコントロールできてしまうため、より深い考察が必要となります。

Karen Nicholl
パプワニューギニア生まれの油絵画家カレン・ニコールのサイトは、一番ユーザーに見せたい自身の絵の見せ方について、ひときわ神経を注いでいるようです。絵を鑑賞する上で、ディテールを細かく観察出きるようにした拡大機能は、人間が気になった点を注意深く見るときに行う感覚に、よく似ています。
また、このUIではアクションを起こすときに、ちょっとしたサウンドを伴います。ウェブにおいてUIの動作時の音というのは軽視されがちですが、映画などを見ると、人が何か電子機器を操作している際は必ず効果音がついているように、現実世界において操作とフィードバックとしての音というのは、深い関連があるように思われます。
このサイト、CHRISTIAN KRAGHというデザイナーが手がけていますが、そのクレジット表記はちょっとオツな方法をとっています。サイト上で右クリックをすると、クレジットがコンテクストメニューとして表示されるのです。

Reform & Revolution / R^(2)
デザインポータルのUIの新しい形かもしれない、と思わせてくれるサイト。複数のコントリビューターがニュースを挙げるというスタイルは、旧来の形を踏襲してはいるものの、ユーザー登録のスムーズさなどに見られるように、なるべく使いやすく、無駄を省いたUIを実現しています。
特に各エントリーの機能のスタイリッシュなまとめ方は斬新なもので、普通ならアイコンを使ってコテコテにしてしまうところを、投稿者の顔、名前、コメント数、投票数、投票、お気に入り登録など豊富な機能があるにもかかわらず、すっきりとしたデザインとなっています。

Hyperlocal Design
90年代に、ジャンプメニューというナビゲーション方式が流行ったことがあります。これは、HTMLのOptionタグと簡単なJavaScriptを組み合わせて、コンパクトなナビゲーションを実現するというものでした。その後、ジャンプメニューというスタイルのナビゲーションは見なくなりましたが、その現代版がこのサイトのナビゲーションといえるのではないでしょうか。
このサイトでは、フォームのようなスタイルを使って、サイトのナビゲーションを実現しています。Flashでこのようなスタイルのナビゲーションを作るにはそこそこの手間がかかるので、制作者も意図的にジャンプメニューのようなナビゲーションを実現したかったのではないかと思われます。右クリックを押して出るフルスクリーンを選ぶとフルスクリーンになりますが、これはまだ多くの人にとって一般的でないようで、ページの下部に説明が書いてあります。

2008 Trends article on LogoLounge.Com
ロゴに関する情報を網羅したポータルサイト「LogoLounge」に、2008年のロゴのトレンドと称する記事が掲載されています。結構興味深い記事で、昨今のロゴデザインにおける表現手法を一言のキーワードにまとめて、十数パターンに分類しています。その中でも個人的に気になったキーワードは、「Supernova」「FoldOver」「Jawbreakers」「Strobe」「Flourish」の5つです。これはロゴに限らず、今のウェブデザインでよく見る装飾といえるのではないでしょうか。
「Supernova」は、爆発したような勢いのあるビジュアル、「FoldOver」は折り返しや重なりを多用した表現、「Jawbreakers」は昔のサイケテイストを感じさせる飴の断面図のようなデザイン、「Strobe」は移動する物体をストロボで撮影したかのような連続柄、「Flourish」は過剰に華麗な装飾が施されたロゴタイプです。これらは言葉で説明するよりも、実際サイトを見てみたほうがいいでしょう。

Your sports opinion - The Roar
使いやすいUI、わかりやすいUI、というものがある一方、コミュニケーションを起こしやすいUIというのもあると筆者は考えています。必ずしもわかりやすいUIがコミュニケーションを発生させやすい、という図式にはならず、一見なんだかわかりづらいUIを持っているにもかかわらず、交流をしていくのには都合がよいという経験は何度かあります。このスポーツの話題を扱ったコミュニティサイトThe Roarも、そういったUIを持っているのではないでしょうか。
常に表示される右側の2カラムは、ユーザーが興味をひきそうな情報をまとめ、トップページにはDiggで使われてたような、気軽に投票できる仕組みを導入することで、サイトへの参加をしやすくしています。一見古めかしいポータルに見えますが、いまどきのコミュニケーションのツボを押さえてます。

think swedish (beta)
この、一見普通のブログに見えるサイトは、Fantasy Interactiveというインタラクティブ・コンテンツ制作を得意とする会社が立ち上げた、リッチメディアブログです。このブログはFlashで作られており、もちろん同様のFlashで作られているブログはいくつも存在してはいますが、インタラクティブ・コンテンツを専門に制作している会社だけあって、完成度が高いのが特徴です。
このサイトの魅力はFlashで作られているという部分ではなく、この会社が手がけた沢山のUI関連の仕事が掲載されている点にあります。記事内で見かける記述「Component showcase」とポートフォリオのことを呼んでいるとおり、コンポーネントのように様々な機能を持つ、UI一式を主にデザインしています。統一感がとれたUIが魅力です。
再び告知
前回も紹介しましたが、「Flashでデザイン 差がつくBlogサイトの作り方」という本が3刷まで行って、その後改訂という流れになりました。「Flashでデザイン 差がつくBlogサイトの作り方 セカンドエディション」という名前で出てます。
改訂するからには、思いっきり遊ぼうということで、単に解説が並ぶだけの本文に加え、新しくキャラクターを考え、そのキャラクターが欄外でいろいろとごちゃごちゃしゃべるという、演出を加えました。
それだけじゃなくて、今回は5章のFlashBlog応用編にて、様々なゲストを招いてFlashBlogを披露していただいてます。FlashBlogも多彩で、フォトアルバムや携帯用Blogビューワー、スケジューラー、外部APIとの連携、Wii対応動画Blogなどなど、そこまでFlashBlogで作るか!というぐらいの11サンプルを収録しております。
サポートサイトもよろしくお願いします。
あとがき
自分の中で(ネット界隈中でもですが)、最近IKZOマッシュアップのブームがきてます。このムーブメント、当初はネタ的なものでしたが、このIKZOLOGICの元ネタがYouTubeにもアップされていて、こちらのほうがIKZOブームとは別なところから海外の人を巻き込んで、リミックス自体への評価を産み出していて面白い動きといえそうです。
関連リンク
WDRDW:海外サイトデザイン探訪 バックナンバー
Karen Nicholl
CHRISTIAN KRAGH
Reform & Revolution / R^(2)
Hyperlocal Design
2008 Trends article on LogoLounge.Com
Your sports opinion - The Roar
Digg
think swedish (beta)
Flashでデザイン 差がつくBlogサイトの作り方
『Flashでデザイン 差がつくBlogサイトの作り方 セカンドエディション』サポートサイト
吉幾三 × Capsule × DaftPunk × BeastieBoys - Starry Sky - IKZOLOGIC Remix -
Capsule x Daft Punk x Beastie Boys - Starry Sky - YEAH! Remix -
原一浩さんプロフィール
1998年にウェブデザイナーとして独立(karadesign)。同年、ウェブデザイン専門のメールメディア「Design Wedge」を発行開始。ウェブデザイン業務の傍ら、海外のウェブデザインに関する情報発信、研究、開発を行う。2006年株式会社エフエックスビイ設立。「Web Designing」や「web creators」など雑誌への寄稿多数。「Web検定」プロジェクトメンバー。SHIFTにて3年間クールサイトレビュアーを勤めた。最近は映像制作とフレームワークに夢中。
http://www.karadesign.com/
http://www.karadesign.com/designwedge/
http://fxb.jp/
このエントリーをブックマークする
このエントリーにトラックバックする
このエントリーのトラックバックURL
http://withd.jp/mt/mt-tb.cgi/2168
WEBの新着記事
2009.06.29
行動につながる情報を見つけ出す
2009.06.25
人柄のデザイン
2009.06.25
Web標準と接する際の3つの留意点
2009.06.18
3年間ありがとうございました、のブックマーク放出
2009.06.11







