アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » WEB+DESIGN STAGE » 連載 » いま,見ておきたいウェブサイト » 第4回 エア焼肉,Forsman & Bodenfors,Metamosphere

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

第4回 エア焼肉,Forsman & Bodenfors,Metamosphere

なぜか目がかゆく,鼻をかむ回数が増え,外出時にはマスクが手放せなくなってきた今日このごろ,いかがお過ごしでしょうか。今回も個人的に感じた素晴らしいサイトの特徴を,いくつかお話したいと思います。

手抜きなしのディテール

『エア焼肉』

ノートパソコンを使って,手軽に焼肉を食べた気分になれるウェブサービス,『エア焼肉』です。

図1 リアルな音とともに焼肉が焼かれていく

図1 リアルな音とともに焼肉が焼かれていく

credit: RECRUIT MEDIA COMMUNICATIONS

サイトではナレーション付きの映像を使い,エア焼肉の手順をていねいに説明していきます。

図2 映像で手順を説明してくれる

図2 映像で手順を説明してくれる

説明を受けた後は,「さっそく食べてみる」をクリックして,いよいよエア焼肉の開始となります。4種類のお肉から食べたいものを選び,焼き加減を見ながら,エア焼肉を楽しみます。

アイデアだけで勝負しない

図3 キーボード用の紙エプロンも用意

図3 キーボード用の紙エプロンも用意

"手軽に焼肉を食べた気分になれる"という,一見,実にバカバカしいと思われるこのアイデアですが,サイトを訪れるとついついその世界にのめり込んでしまいます。その秘密はどこにあるのでしょうか。

このサイトでは,キーボード用の紙エプロンや,手順を詳細に解説するナレーション,ユーザーに焼肉のタレ付きご飯を用意させる仕組みなど,ユーザーの環境とディテールをかなり丁寧に作り込んでいます。

当然,アイデアのディテールまで丁寧に作り込むのは,時間と手間がかかります。しかし,ディテールの作り込みが甘ければ,せっかくのおもしろいアイデアも一気に陳腐化してしまい,ユーザーのやる気を削いでしまいます。

単純なアイデアだけの勝負に持ち込まず,ディテールを作り込むことで,しっかりとした世界観を作ることに成功した素晴らしいサイトだと思います。

探し物は何ですか?

『Forsman & Bodenfors』

スウェーデン・イエテボリのクリエイティブエージェンシー,Forsman & Bodenforsのサイトです。

図4 画面中央の検索ボックスが印象的

図4 画面中央の検索ボックスが印象的

credit: Thomson Interactive Media

サイトを訪れると,画面中央に現れる大きな検索ボックスに目がいきます。このボックスに文字を入力することで,サイト内に広がるさまざまなコンテンツが探せます。

図5 検索ボックスの文字に応じてコンテンツを表示

図5 検索ボックスの文字に応じてコンテンツを表示

検索ボックスに文字を入力していくと,その文字に対応しているサイト内のコンテンツを次々と表示してくれます。もちろん検索ボックスだけでなく,画面上に表示されたイメージをクリックすることで,直接コンテンツにアクセスすることも可能です。

図6 イメージから直接コンテンツを表示することも可能

図6 イメージから直接コンテンツを表示することも可能

また画面最下部では,アクセス数や検索された回数などが次々と表示されており,サイトに関するさまざまな情報やアクセスデータを確認することもできます。

何を求めてユーザーはやってくるのか

「サイトを訪れるユーザーは,いったい何を見に来るのだろうか。」サイトを制作する際,誰もが頭の中で,繰り返し自分に問いかけているのではないでしょうか。

クリエイティブエージェンシーであるForsman & Bodenforsは,この問いに対し,それは「自らがかかわったさまざまな案件」であるという,しっかりとした答えを持っています。

そして,それらの案件をうまく見せる方法は何か(サイトのトップに並べた案件のイメージ),見てもらえるための仕組みは何か(案件イメージから直接コンテンツへ,案件を無理に分類しない,検索ボックスの導入など)を深く考えています。

ユーザーは何を求めてサイトにやってくるのか。そして,そのためにどのような仕組みを用意しておくのか。サイトを制作する上で非常に重要なこの部分について,もう一度良く考えながら,制作をしていきたいと思わせるサイトです。

著者プロフィール

Lançamento(ランサメント)

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

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

読むウェブ ~本とインタラクション

ディスプレイで読む活字とそのインタラクション(interaction:相互作用)について,最新Webを紹介しながら読み解いていく。

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

この連載では,国内外の最新のウェブサイトを隔週更新で取り上げ,これら最新サイトの特徴や素晴らしい部分を,さまざまな角度から解説していきます。

Windows phoneアプリケーション開発入門

Windows Marcketplace for Mobileがサービス開始され,作成したアプリケーションを個人でも世界をターゲットに公開できる環境が整ってきました。これを機にWindows phoneアプリケーションの開発をしてみませんか?

ここは知っておくべき!Windows Server 2008技術TIPS

5年ぶりのサーバOSとなったWindows Server 2008が出荷されて早2年。2009年にはR2が出荷され,再び注目を集めています。発売前から実施したトレーニングによって感じた,インフラエンジニアの方々に知っておいていただきたい機能を中心にご紹介します。

キーパーソンが見るWeb業界

本連載はWeb Site Expert/gihyo.jpとの連動企画です。阿部淳也, 長谷川敦士, 森田雄のお三方による,Web業界をテーマにした座談会です。

きたみりゅうじの聞かせて珍プレー

ソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお待ちしてます!

ActionScript 3.0で始めるオブジェクト指向スクリプティング

野中文雄氏が,簡単なスクリプトは書いたことがあるという初級者を対象に,ActionScript 3.0の基本からクラス定義までを解説します。

まだ間に合う「ITパスポート」受験対策 原山先生の短期合格塾

この連載では,4月18日のITパスポート試験の受験に向けて,短い期間で効率良く受験対策を行う方法や,確実に得点するための裏ワザなどを伝授していきます。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス