グッドデザイン賞を獲得した7つのサイトから学ぶ、ウェブデザインの12のテクニック

photo by Robert S. Donovan

ウェブデザインを担当していると、星の数ほどある他のサイトたちに自社のサイトが埋もれてしまわないか、心配になりますよね。
そこで、ユーザーに評判のよいサイトを作るために、プロデザイナーたちから優秀だと認められたサイトデザインを参考にしてみるのはいかがでしょうか？

この記事では、2013～2011年の3年間にグッドデザイン賞に選ばれたウェブサイト7つから、自社サイトに活かしたい12個のデザインテクニックをまとめて紹介いたします。

受賞作品を参考に、ヒットするウェブサイトを作りましょう！

参考：BtoB製造業のWebサイト参考事例9選と、ホームページ作成の3つのポイント

グッドデザイン賞とは？

1957年に創設された日本で唯一の総合的なデザイン賞で、毎年企業やデザイナーから40,000件以上の応募があり、よいデザインを示す賞として広く親しまれています。

今回は、ウェブサイトのカテゴリで受賞した作品を紹介いたします。

Perfume “Global Site Project”

http://www.perfume-global.com

＜概要＞　抜粋

Perfumeの世界デビューを記念し、ファンとクリエーターの手によって世界へ羽ばたくという一貫したコンセプトのもと、ティザーサイト、オープンソースプロジェクト、そしてPerfumeメンバー本人たちによるライブパフォーマンスまでを包括した大プロジェクト。
本企画用のオリジナル楽曲データと3人のモーションキャプチャデータ、そしてデータを扱うための機能拡張、エグザンプルのコードをフリーで配布し二次創作を促した。

＜審査委員の評価・作品詳細＞　抜粋

Perfumeはこれまでもメディアアート的な技術と表現の融合において先駆的だったが、Perfumeが世界デビューするにあたり、Perfumeの踊りのモーションキャプチャーデータを自由に使っていいライセンスで一般に公開した。これによって、さまざまなユーザが自分独自の表現による動画を公開するようになった。
この多彩で多様な表現はあまりに魅力的であり、ダンスパフォーマンスの3D CGによる再現という表現の世界が一夜にして誕生したに等しい。

自社サイトに活かしたい、この作品の良い点

ポイント1：ユーザーのクリエイティビティを刺激する投稿画面

上記画像のページでは、ユーザーがそれぞれ作成したグラフィック動画を投稿し、それをPerfumeメンバーのダンスパフォーマンスCGと融合させたものを見ることができます。

世界中のPerfumeファンからの作品が投稿されており、作品を日付順と人気順に並べ替えて見ることができます。
並び替えの上位から番号が振られているため、下にスクロールしていっても、今何位の作品を見ているのか分かりやすく作られています。

また、各投稿作品のページでは、Twitter、Facebook、Google+などのSNSボタンからサイトや投稿情報を簡単に共有することができ、その下にあるCode Previewからは各動画のソースコードも見られるので、他の人の作品を参考にして自分の動画を制作することもできます。

このような仕組みから、人気作品を見て自分でも新しい動画を制作し投稿するという、ユーザーのクリエイティビティを刺激する構造となっています。

ポイント2：細部まで遊び心を感じるデザイン・動き・音

グローバルサイト全体を通して、デザイン・動き・音を駆使してユーザーを楽しませる工夫が施されています。

例えば、上記画像のページでは、背景に3Dの日本地図が使用されています。実はこれは3D地球儀の一部で、地図をクリックすることで地球儀を回したり、日本の地域にズームインして見ることもできます。

こちらの画面は、先程の地球儀をしばらく表示していると現れます。3D地球儀もハイクオリティですが、このようなちょっとした待ち時間にも、上記のようなクオリティの高いグラフィックを見ることができ、見る者を飽きさせない仕組みとなっています。

リンクやアイコンをクリックした時には機械音も聞こえるので、デザイン・動き・音を総合的に駆使してグローバルサイトの世界観を表現し、ユーザーに楽しんでもらえる構造になっています。

Airbnb（エアビーアンドビー）

http://www.airbnb.jp

＜概要＞　抜粋

Airbnb（エアビーアンドビー）は、現在は世界192カ国34,000都市で、アパート・別荘・お城・島などのユニークなスペースを簡単に貸出登録／宿泊予約できるウェブサイト＆モバイルアプリです。
Airbnbが予約および支払プロセスをお手伝いすることで、ホストは簡単かつ安全に空部屋を収益化でき、ゲストは「暮らすように旅をしよう」をモットーに普通のホテルとは一味違った宿泊体験ができます。
ユーザー間のレビュー評価制度・ID認証・SNSコネクト・ホスト保証制度等により、ユーザーは安全・安心にサービスを利用することが出来ます。

＜審査委員の評価・作品詳細＞　抜粋

自分がどこかに旅行するときAirbnbに登録されている部屋に宿泊すると、通常よりも安い値段で宿泊できるし、場合によってはその宿のホストと交流できる。また逆に、自分の家に余っている部屋があって誰か泊めてあげてもいい場合には、このAirbnbに登録してホストになれる。
このようなシステムだとトラブルがないかが不安になるが、宿泊する側・提供する側が互いに評価する仕組みとなっており、トラブルも起こりにくい。

自社サイトに活かしたい、この作品の良い点

ポイント3：ユーザーにアクションを取ってもらえる、シンプルな検索画面

こちらの画像はトップページにある滞在先の検索画面です。
この検索ボックスと背景画像がファーストビューの大部分を占めていて、背景写真のクオリティも手伝い、シンプルな構造でありながらインパクトがあります。

サイト訪問者を目移りさせるような他のコンテンツを省き、滞在先の入力という要素のみをメインに置くことで、ユーザーの意識をそちらへ向けることができています。
また、実際の滞在先例の画像を背景に使うことで、ユーザーの興味喚起も行っています。

ポイント4：使用言語により最適化表示されるオススメコンテンツ

先程のトップ画面を下にスクロールしていくと、上記のコンテンツが現れます。
日本語で閲覧している場合、日本人旅行者に合わせた人気目的地が表示され、各画像へカーソルを移動させると、その都市内で日本語が話せるホスト数が表示されます。

Airbnbは現在26言語に対応していて、言語を変更すると上記のコンテンツはその地域に合わせたものへと自動的に変更されます。
同じ言語を話すホストを検索できることで、海外旅行で不安な方にも、より気軽に使用してもらうことができます。

ポイント5：初めての宿泊先でも安心のユーザー認証機能


先程の滞在先画面から、ホストの自己紹介ページへ飛ぶことができます。
ここでは、初めてその滞在先を利用する方も安心できるよう、複数のユーザー認証方法が使用されています。

上記のピーターさんの例では、メールアドレス、電話番号、FacebookなどのSNS、パスポートID、友人からの紹介文、過去の滞在者からのレビューなど、多岐に渡る情報から、ホストが信頼できる人物である事が示されています。

Airbnbのような不特定多数が滞在先を投稿するサイトでも、安心して宿泊予約ができるような仕組みとなっています。

myケアマネ

http://mycaremane.com/

＜概要＞　抜粋

ケアマネージャー選びを支援する情報提供サイト「myケアマネ」。介護サービスを使う時はケアマネージャーと契約します。役所から配布される資料（名称・住所・電話番号が記載）だけでは、多数のケアマネージャーから相性の合う人を選べません。
そこで、ケアマネージャーが勤務する全国の居宅介護支援事業所3万6千ヶ所の基本情報と独自調査による300ヶ所以上の詳細情報を掲載しています（詳細情報は増加中）。
良いケアマネージャーの選び方をまとめたチェックシートも提供し、2013年4月から5ヶ月半で2万7千人以上が利用しています。

＜審査委員の評価・作品詳細＞　抜粋

いかなるサービスでも享受者は提供者を選択できるが、多くのビジネスでは自由ではない。介護サービスもそのひとつで、このサービスは両者をマッチングさせる仕組みを提供している。
TOP画面で住んでいる地域を選択するだけで、myケアマネが独自調査でランキングしたおすすめの事業所順に表示するシンプルなインタフェースとしました。
インターネットが主流の若い世代ではない、30歳以降向けの新しいデザインを意図しました。その結果、会員登録の70％が40〜60歳台となりました。

自社サイトに活かしたい、この作品の良い点

ポイント6：パソコンに不慣れでも直感的に操作できるマップ検索

上記の画像は、サイトトップページのケアマネージャー検索画面です。
サイト利用者に中高年層が多いmyケアマネでは、若年層と違い、パソコンの操作に不慣れなユーザーが多くなります。

そんな方たちでも直感的に操作できるように、ファーストビューの大部分を占めるような、大きな日本地図が配置されています。
これにより、地域を選択すればよいということが一目で分かり、キーボード操作に不慣れなユーザーが検索ボックスに文字入力することも避けられます。

ポイント7：中高年齢層ユーザーに合わせた、見やすい文字表示

先程の検索画面から市区町村選択へ進むと、プルダウンメニューが表示されます。
地域選択もスムーズにできるように、こちらのプルダウンの文字は非常に大きく、中高年齢層のユーザーにも見やすくなっています。

文字の見やすさは、サイトロゴ右隣 のキャッチフレーズや、メインメニューの文字と比較しても、それより大きく太字で書かれていることからも分かると思います。
パソコンに不慣れな方がサイトを使う時の障害をなるべく少なくするための配慮が感じられます。

TOSHIBA BATON

http://toshibaton.com/

＜概要＞　抜粋

東芝の環境活動をアピールする写真投稿サイト。世界中の東芝社員がリレー走者となり「バトン：環境への想い」をつないでいくことで東芝グループとしての一体感醸成や、環境活動に対するモチベーション向上を狙うと同時に、広く一般に対してグローバルに活動する環境先進企業としての認知向上を狙う。
投稿に連動してランナーのグラフィックがバトンをつなぎ、投稿数に応じて走行距離が増える。一定距離を超えるとリアルなイベントに連携する。

＜審査委員の評価・作品詳細＞　抜粋

ユーザー同士がバトンを手渡していく感覚が楽しく表現されており、かつ解りやすさ使いやすさの面でも良いバランスを保っている。
参加ユーザーが社員のみであるということがクローズドな印象を受ける、という意見もありましたが、グローバルに広がっていく企業において、こういったインナー向けの企画を積極的に行っていくことは、むしろ今後強く求められていきそうな新しい試みなのではないかと思う。
投稿写真閲覧やアーカイブでの検索性など、直感的なインターフェースによる操作性を提供。投稿画面も、バイリンガル表示と同時に、何ができるかのシンプルな説明ページで、アクセシビリティの向上を図った。

自社サイトに活かしたい、この作品の良い点

ポイント8：人物の動作を表現する、画面全体の連動した動き

上記の画像に見られるように、トップページのファーストビュー下部では、ランナーが走っているアニメーションが入っています。
その画面をしばらく見ていると、背景画像は右にスライドされて行き、ランナーが次の場所に移動したように見えるようになっています。

場所が変わるたびに、中央で大きく取り上げられる投稿写真も変わるようになっており、ファーストビューの下には、次に中央に表示される予定の投稿がスタンバイしています。

投稿同士はバトンと同じ緑色の線で結ばれ、連なって上に動いて行くので、その動きでもコンテンツに連帯感を持たせ、バトンを繋ぐという動作をページ全体で表現しています。

ポイント9：サイト閲覧を促進させるカテゴリ分けとフィードバックボタン

このサイトは、TOSHIBAの社員がバトンを繋いで行くというコンセプトから、社外の一般の人は投稿できないようになっています。
しかし、企業の環境活動を広めるという目的に必要な、社外の人にページを閲覧してもらうことを促進させる工夫も施されています。

例えば、1つのコンテンツに様々な方法で辿り着くことができます。「緑」や「水」などの写真カテゴリ別や、投稿者別、または地図からの国別選択などがあり、全体的なコンテンツの量は同じでも、違った角度から見せることで、多様な閲覧方法を作ることができます。

また、気に入った投稿写真を見つけた時は、いいねボタンを押すことで、フィードバックを送ることができます。
1回のいいねにつき、ランナーの走行距離は100メートル増えます。いいねボタンをクリック
すると、「応援ありがとうございました！全体の走行距離はこちらから」というメッセージが表示され、そこから世界地図画面に移動して総走行距離を確認できます。

このメッセージにより、ランナーを応援しているという状態になるので、他の投稿も閲覧していいねを押し、もっと応援したいと思わせることができ、サイト閲覧を促進させられる仕組みになっています。

311 SCALE

http://311scale.jp/

＜概要＞　抜粋

東北地方太平洋沖地震によって受けた被害の大きさを、「震度」「津波」「放射線」「電力」の４種のデータにより、一貫した視覚言語で発信する。
「1. 演出しない。 2. 主張しない。 3. 世界の人々にとって、わかりやすい表現を行う。 4. 可能な限りの正確さを守る。」をコンセプトにできる限り客観的に可視化し、現実的、理性的に「起こったこと」を訴求する。

＜審査委員の評価・作品詳細＞　抜粋

時代が求める情報を可視化するグラフィックデザイン（情報デザイン）、およびインタラクションのクオリティーの高さは、グッドデザイン賞にふさわしい。
国境を越えて、より多くの方々に伝えることを課題としました。シンプルで美しいグラフや簡潔なユーザインターフェイスは、情報を得る際のストレスを極力減らす試みでもあります。
「日本各地の主要都市の放射線量」と「世界の主要都市の例」をあえて併記しました。日本各地で暮らしている多くの方々への放射線量は、パリ、香港、北京と比べて同等もしくは少ないということが一目瞭然となりました。

自社サイトに活かしたい、この作品の良い点

ポイント10：無駄な情報を徹底的に省いたデータ画面


こちらのサイトは災害情報の伝達を目的としています。
ユーザーが必要としているデータをより分かりやすく伝えるために、華美なデザインや必要最低限以外の情報を徹底的に省いた作りになっています。

このように無駄のないシンプルなデータ画面であれば、他国の人が見ても操作しやすくなるので、サイトの目的でもある、世界的に稀な今回の地震を多くの人に伝えるという目的が果たしやすくなっています。

また、データは主に2011年3月11日の震災時のものになりますが、東京電力エリアの放射線量と電力使用状況データは現在も更新されているので、最新の災害情報を知ることも可能です。

ウェルネスリンク（WellnessLINK）

http://www.wellnesslink.jp/

＜概要＞　抜粋

ウェルネスリンクは、健康機器で測った毎日の測定記録の変化をグラフで確認できるほか、一人ひとりのカラダの状態に合わせたアドバイスや生活習慣を見直す定期レポートをお届けしたり、話題のテーマや健康法にユーザー同士で励ましあいながら楽しく取り組めるイベントを開催したりすることで、あなたの健康な毎日をサポートするウェブサービスです。
機器だけでは実現できなかった、「測る」の先にある、自分のカラダの変化に「気づき」、生活習慣を見直すきっかけを与え、理想のカラダに「かわる」ところまで、しっかりナビゲートします。

＜審査委員の評価・作品詳細＞　抜粋

この時代、健康に関連したいろいろなサービスがあり、提供方法も多々ある状況である。技術的な新規性を追求したものではないが、このサービスが掲げるコンセプトは現代において重要なテーマであり、求めているユーザーが確実に存在するサービスである。
同社が培ってきたハード＆ソフト両面における使いやすさをウェブにも適切に反映し、かつ最も重要となる継続性に徹底的にこだわったサービスのデザインを実現しようと心がけている点を評価した。

自社サイトに活かしたい、この作品の良い点

ポイント11：継続的にサイトを利用してもらうためのコミュニティー

こちらのサイトでは、健康状態を改善したい方たちがモチベーションを保ちやすいようなコミュニティが作られています。

まず上記画面では、体脂肪の改善状況をグラフで見ることができます。
3本の線では、自分自身の記録、参加者の平均記録、全体の平均記録が表されていて、コミュニティ内での自分の立ち位置が一目で分かるようになっています。

また、コミュニティメンバーの記録をランキング形式で見ることもできるので、先程の平均値を上回る記録を出している人も、トップと比較することで、より高い順位を狙うというモチベーションを得ることができます。

比較だけでなく、テーマに合わせたイベントに参加したり、コメントを送り合って励まし合うこともできるので、競争と助け合いのコミュニティを通して、ユーザーのモチベーションを高め、継続的なサイト利用に繋げています。

フグアイドットコム

http://www.fuguai.com/

＜概要＞　抜粋

当サイトは、製品の”不具合”(消費者が製品に対して不都合であると感じる事象を幅広く”不具合”と呼称しています)に関する情報を、公表された情報・消費者からの声、双方共に幅広く収拾・掲載することを主な機能とし、製品の一層の品質向上、製品に対する消費者の安心を目指すサイトです。
メーカー側が想定もしていなかったような部分でも製品の問題点を早期に発見することができ、万が一製品の回収等の事態に至った場合でも告知を速やかに広めることが可能です。

＜審査委員の評価・作品詳細＞　抜粋

重要な取り組みであり、コールセンターをサポートしている企業がユーザーから持ち込まれる不具合の情報をオープン化するところに面白みがある。課題設定で明確で解決手法も明解であり、解決によって得られるベネフィットが高いビジネスソリューションのデザインとして評価した。
当サイトで扱う「品質」は、明確な不良、欠陥と言ったもののみならず、消費者が使ってみて「使いにくい」等といったものも含み、しかも当該情報に対してユーザー同士で意見交換を行うことができます。従って当サイトは、例えばユニバーサルデザインの観点から、製品に対する意見交換の場として活用することができます。

自社サイトに活かしたい、この作品の良い点

ポイント12：ユーザー同士で投稿をチェックし合う検証機能


こちらのサイトでは、不具合に関する各投稿に対し、「再現投稿」という機能を使って、他のユーザーがその不具合を検証し、結果を投稿することができます。
再現投稿がされたものは再現済みとなり、再現人数と検証者のコメントが合わせて表示されます。

ネットでは、不正確な情報が広まってしまう危険性がありますが、 製品の不具合などの特に正確性が必要な情報を載せる場合は、このような検証システムを通すことで、情報の信憑性を高めることができます。

また、相互チェックという形態なので、サイト管理者の負担を抑えつつも、ユーザーにより安心してコンテンツを閲覧してもらうことができます。

まとめ

有名賞受賞サイトのウェブデザインテクニック12選をご紹介いたしましたが、参考にできそうなものはありましたか？
まずは取り入れやすいものを見つけて、ご自身のサイトでも試して頂ければと思います。

ユーザーにとって使いやすいウェブデザインを心がけて、より多く方に見てもらえるサイトを作りましょう！