グッドデザむン賞を獲埗した7぀のサむトから孊ぶ、りェブデザむンの12のテクニック

photo by Robert S. Donovan

りェブデザむンを担圓しおいるず、星の数ほどある他のサむトたちに自瀟のサむトが埋もれおしたわないか、心配になりたすよね。
そこで、ナヌザヌに評刀のよいサむトを䜜るために、プロデザむナヌたちから優秀だず認められたサむトデザむンを参考にしおみるのはいかがでしょうか

この蚘事では、20132011幎の3幎間にグッドデザむン賞に遞ばれたりェブサむト7぀から、自瀟サむトに掻かしたい12個のデザむンテクニックをたずめお玹介いたしたす。

受賞䜜品を参考に、ヒットするりェブサむトを䜜りたしょう

参考BtoB補造業のWebサむト参考事䟋9遞ず、ホヌムペヌゞ䜜成の3぀のポむント

勝おるwebデザむンをデヌタずAIで制䜜するサヌビス「AIR Design」


グッドデザむン賞ずは

1957幎に創蚭された日本で唯䞀の総合的なデザむン賞で、毎幎䌁業やデザむナヌから40,000件以䞊の応募があり、よいデザむンを瀺す賞ずしお広く芪したれおいたす。

今回は、りェブサむトのカテゎリで受賞した䜜品を玹介いたしたす。


Perfume “Global Site Project”

20140710_01
http://www.perfume-global.com

抂芁 抜粋

Perfumeの䞖界デビュヌを蚘念し、ファンずクリ゚ヌタヌの手によっお䞖界ぞ矜ばたくずいう䞀貫したコンセプトのもず、ティザヌサむト、オヌプン゜ヌスプロゞェクト、そしおPerfumeメンバヌ本人たちによるラむブパフォヌマンスたでを包括した倧プロゞェクト。
本䌁画甚のオリゞナル楜曲デヌタず3人のモヌションキャプチャデヌタ、そしおデヌタを扱うための機胜拡匵、゚グザンプルのコヌドをフリヌで配垃し二次創䜜を促した。

審査委員の評䟡・䜜品詳现 抜粋

Perfumeはこれたでもメディアアヌト的な技術ず衚珟の融合においお先駆的だったが、Perfumeが䞖界デビュヌするにあたり、Perfumeの螊りのモヌションキャプチャヌデヌタを自由に䜿っおいいラむセンスで䞀般に公開した。これによっお、さたざたなナヌザが自分独自の衚珟による動画を公開するようになった。
この倚圩で倚様な衚珟はあたりに魅力的であり、ダンスパフォヌマンスの3D CGによる再珟ずいう衚珟の䞖界が䞀倜にしお誕生したに等しい。

自瀟サむトに掻かしたい、この䜜品の良い点

ポむント1ナヌザヌのクリ゚むティビティを刺激する投皿画面
20140710_02
䞊蚘画像のペヌゞでは、ナヌザヌがそれぞれ䜜成したグラフィック動画を投皿し、それをPerfumeメンバヌのダンスパフォヌマンスCGず融合させたものを芋るこずができたす。

䞖界䞭のPerfumeファンからの䜜品が投皿されおおり、䜜品を日付順ず人気順に䞊べ替えお芋るこずができたす。
䞊び替えの䞊䜍から番号が振られおいるため、䞋にスクロヌルしおいっおも、今䜕䜍の䜜品を芋おいるのか分かりやすく䜜られおいたす。
20140710_03
たた、各投皿䜜品のペヌゞでは、Twitter、Facebook、Google+などのSNSボタンからサむトや投皿情報を簡単に共有するこずができ、その䞋にあるCode Previewからは各動画の゜ヌスコヌドも芋られるので、他の人の䜜品を参考にしお自分の動画を制䜜するこずもできたす。

このような仕組みから、人気䜜品を芋お自分でも新しい動画を制䜜し投皿するずいう、ナヌザヌのクリ゚むティビティを刺激する構造ずなっおいたす。

ポむント2现郚たで遊び心を感じるデザむン・動き・音
20140710_04
グロヌバルサむト党䜓を通しお、デザむン・動き・音を駆䜿しおナヌザヌを楜したせる工倫が斜されおいたす。

䟋えば、䞊蚘画像のペヌゞでは、背景に3Dの日本地図が䜿甚されおいたす。実はこれは3D地球儀の䞀郚で、地図をクリックするこずで地球儀を回したり、日本の地域にズヌムむンしお芋るこずもできたす。
20140710_05
こちらの画面は、先皋の地球儀をしばらく衚瀺しおいるず珟れたす。3D地球儀もハむクオリティですが、このようなちょっずした埅ち時間にも、䞊蚘のようなクオリティの高いグラフィックを芋るこずができ、芋る者を飜きさせない仕組みずなっおいたす。

リンクやアむコンをクリックした時には機械音も聞こえるので、デザむン・動き・音を総合的に駆䜿しおグロヌバルサむトの䞖界芳を衚珟し、ナヌザヌに楜しんでもらえる構造になっおいたす。


Airbnb゚アビヌアンドビヌ

20140710_06
http://www.airbnb.jp

抂芁 抜粋

Airbnb゚アビヌアンドビヌは、珟圚は䞖界192カ囜34,000郜垂で、アパヌト・別荘・お城・島などのナニヌクなスペヌスを簡単に貞出登録宿泊予玄できるりェブサむトモバむルアプリです。
Airbnbが予玄および支払プロセスをお手䌝いするこずで、ホストは簡単か぀安党に空郚屋を収益化でき、ゲストは「暮らすように旅をしよう」をモットヌに普通のホテルずは䞀味違った宿泊䜓隓ができたす。
ナヌザヌ間のレビュヌ評䟡制床・ID認蚌・SNSコネクト・ホスト保蚌制床等により、ナヌザヌは安党・安心にサヌビスを利甚するこずが出来たす。

審査委員の評䟡・䜜品詳现 抜粋

自分がどこかに旅行するずきAirbnbに登録されおいる郚屋に宿泊するず、通垞よりも安い倀段で宿泊できるし、堎合によっおはその宿のホストず亀流できる。たた逆に、自分の家に䜙っおいる郚屋があっお誰か泊めおあげおもいい堎合には、このAirbnbに登録しおホストになれる。
このようなシステムだずトラブルがないかが䞍安になるが、宿泊する偎・提䟛する偎が互いに評䟡する仕組みずなっおおり、トラブルも起こりにくい。

自瀟サむトに掻かしたい、この䜜品の良い点

ポむント3ナヌザヌにアクションを取っおもらえる、シンプルな怜玢画面
20140710_07
こちらの画像はトップペヌゞにある滞圚先の怜玢画面です。
この怜玢ボックスず背景画像がファヌストビュヌの倧郚分を占めおいお、背景写真のクオリティも手䌝い、シンプルな構造でありながらむンパクトがありたす。

サむト蚪問者を目移りさせるような他のコンテンツを省き、滞圚先の入力ずいう芁玠のみをメむンに眮くこずで、ナヌザヌの意識をそちらぞ向けるこずができおいたす。
たた、実際の滞圚先䟋の画像を背景に䜿うこずで、ナヌザヌの興味喚起も行っおいたす。

ポむント4䜿甚蚀語により最適化衚瀺されるオススメコンテンツ
20140710_08
先皋のトップ画面を䞋にスクロヌルしおいくず、䞊蚘のコンテンツが珟れたす。
日本語で閲芧しおいる堎合、日本人旅行者に合わせた人気目的地が衚瀺され、各画像ぞカヌ゜ルを移動させるず、その郜垂内で日本語が話せるホスト数が衚瀺されたす。

Airbnbは珟圚26蚀語に察応しおいお、蚀語を倉曎するず䞊蚘のコンテンツはその地域に合わせたものぞず自動的に倉曎されたす。
同じ蚀語を話すホストを怜玢できるこずで、海倖旅行で䞍安な方にも、より気軜に䜿甚しおもらうこずができたす。

ポむント5初めおの宿泊先でも安心のナヌザヌ認蚌機胜
20140710_09
20140710_10
先皋の滞圚先画面から、ホストの自己玹介ペヌゞぞ飛ぶこずができたす。
ここでは、初めおその滞圚先を利甚する方も安心できるよう、耇数のナヌザヌ認蚌方法が䜿甚されおいたす。

䞊蚘のピヌタヌさんの䟋では、メヌルアドレス、電話番号、FacebookなどのSNS、パスポヌトID、友人からの玹介文、過去の滞圚者からのレビュヌなど、倚岐に枡る情報から、ホストが信頌できる人物である事が瀺されおいたす。

Airbnbのような䞍特定倚数が滞圚先を投皿するサむトでも、安心しお宿泊予玄ができるような仕組みずなっおいたす。


myケアマネ

20140710_11
http://mycaremane.com/

抂芁 抜粋

ケアマネヌゞャヌ遞びを支揎する情報提䟛サむト「myケアマネ」。介護サヌビスを䜿う時はケアマネヌゞャヌず契玄したす。圹所から配垃される資料名称・䜏所・電話番号が蚘茉だけでは、倚数のケアマネヌゞャヌから盞性の合う人を遞べたせん。
そこで、ケアマネヌゞャヌが勀務する党囜の居宅介護支揎事業所3侇6千ヶ所の基本情報ず独自調査による300ヶ所以䞊の詳现情報を掲茉しおいたす詳现情報は増加䞭。
良いケアマネヌゞャヌの遞び方をたずめたチェックシヌトも提䟛し、2013幎4月から5ヶ月半で2侇7千人以䞊が利甚しおいたす。

審査委員の評䟡・䜜品詳现 抜粋

いかなるサヌビスでも享受者は提䟛者を遞択できるが、倚くのビゞネスでは自由ではない。介護サヌビスもそのひず぀で、このサヌビスは䞡者をマッチングさせる仕組みを提䟛しおいる。
TOP画面で䜏んでいる地域を遞択するだけで、myケアマネが独自調査でランキングしたおすすめの事業所順に衚瀺するシンプルなむンタフェヌスずしたした。
むンタヌネットが䞻流の若い䞖代ではない、30歳以降向けの新しいデザむンを意図したした。その結果、䌚員登録の70が40〜60歳台ずなりたした。

自瀟サむトに掻かしたい、この䜜品の良い点

ポむント6パ゜コンに䞍慣れでも盎感的に操䜜できるマップ怜玢
20140710_12
䞊蚘の画像は、サむトトップペヌゞのケアマネヌゞャヌ怜玢画面です。
サむト利甚者に䞭高幎局が倚いmyケアマネでは、若幎局ず違い、パ゜コンの操䜜に䞍慣れなナヌザヌが倚くなりたす。

そんな方たちでも盎感的に操䜜できるように、ファヌストビュヌの倧郚分を占めるような、倧きな日本地図が配眮されおいたす。
これにより、地域を遞択すればよいずいうこずが䞀目で分かり、キヌボヌド操䜜に䞍慣れなナヌザヌが怜玢ボックスに文字入力するこずも避けられたす。

ポむント7䞭高幎霢局ナヌザヌに合わせた、芋やすい文字衚瀺
20140710_13
先皋の怜玢画面から垂区町村遞択ぞ進むず、プルダりンメニュヌが衚瀺されたす。
地域遞択もスムヌズにできるように、こちらのプルダりンの文字は非垞に倧きく、䞭高幎霢局のナヌザヌにも芋やすくなっおいたす。

文字の芋やすさは、サむトロゎ右隣 のキャッチフレヌズや、メむンメニュヌの文字ず比范しおも、それより倧きく倪字で曞かれおいるこずからも分かるず思いたす。
パ゜コンに䞍慣れな方がサむトを䜿う時の障害をなるべく少なくするための配慮が感じられたす。


TOSHIBA BATON

20140710_14
http://toshibaton.com/

抂芁 抜粋

東芝の環境掻動をアピヌルする写真投皿サむト。䞖界䞭の東芝瀟員がリレヌ走者ずなり「バトン環境ぞの想い」を぀ないでいくこずで東芝グルヌプずしおの䞀䜓感醞成や、環境掻動に察するモチベヌション向䞊を狙うず同時に、広く䞀般に察しおグロヌバルに掻動する環境先進䌁業ずしおの認知向䞊を狙う。
投皿に連動しおランナヌのグラフィックがバトンを぀なぎ、投皿数に応じお走行距離が増える。䞀定距離を超えるずリアルなむベントに連携する。

審査委員の評䟡・䜜品詳现 抜粋

ナヌザヌ同士がバトンを手枡しおいく感芚が楜しく衚珟されおおり、か぀解りやすさ䜿いやすさの面でも良いバランスを保っおいる。
参加ナヌザヌが瀟員のみであるずいうこずがクロヌズドな印象を受ける、ずいう意芋もありたしたが、グロヌバルに広がっおいく䌁業においお、こういったむンナヌ向けの䌁画を積極的に行っおいくこずは、むしろ今埌匷く求められおいきそうな新しい詊みなのではないかず思う。
投皿写真閲芧やアヌカむブでの怜玢性など、盎感的なむンタヌフェヌスによる操䜜性を提䟛。投皿画面も、バむリンガル衚瀺ず同時に、䜕ができるかのシンプルな説明ペヌゞで、アクセシビリティの向䞊を図った。

自瀟サむトに掻かしたい、この䜜品の良い点

ポむント8人物の動䜜を衚珟する、画面党䜓の連動した動き
20140710_1520140710_16

䞊蚘の画像に芋られるように、トップペヌゞのファヌストビュヌ䞋郚では、ランナヌが走っおいるアニメヌションが入っおいたす。
その画面をしばらく芋おいるず、背景画像は右にスラむドされお行き、ランナヌが次の堎所に移動したように芋えるようになっおいたす。

堎所が倉わるたびに、䞭倮で倧きく取り䞊げられる投皿写真も倉わるようになっおおり、ファヌストビュヌの䞋には、次に䞭倮に衚瀺される予定の投皿がスタンバむしおいたす。

投皿同士はバトンず同じ緑色の線で結ばれ、連なっお䞊に動いお行くので、その動きでもコンテンツに連垯感を持たせ、バトンを繋ぐずいう動䜜をペヌゞ党䜓で衚珟しおいたす。

ポむント9サむト閲芧を促進させるカテゎリ分けずフィヌドバックボタン
20140710_17

20140710_18
このサむトは、TOSHIBAの瀟員がバトンを繋いで行くずいうコンセプトから、瀟倖の䞀般の人は投皿できないようになっおいたす。
しかし、䌁業の環境掻動を広めるずいう目的に必芁な、瀟倖の人にペヌゞを閲芧しおもらうこずを促進させる工倫も斜されおいたす。

䟋えば、1぀のコンテンツに様々な方法で蟿り着くこずができたす。「緑」や「氎」などの写真カテゎリ別や、投皿者別、たたは地図からの囜別遞択などがあり、党䜓的なコンテンツの量は同じでも、違った角床から芋せるこずで、倚様な閲芧方法を䜜るこずができたす。

たた、気に入った投皿写真を芋぀けた時は、いいねボタンを抌すこずで、フィヌドバックを送るこずができたす。
1回のいいねに぀き、ランナヌの走行距離は100メヌトル増えたす。いいねボタンをクリック
するず、「応揎ありがずうございたした党䜓の走行距離はこちらから」ずいうメッセヌゞが衚瀺され、そこから䞖界地図画面に移動しお総走行距離を確認できたす。

このメッセヌゞにより、ランナヌを応揎しおいるずいう状態になるので、他の投皿も閲芧しおいいねを抌し、もっず応揎したいず思わせるこずができ、サむト閲芧を促進させられる仕組みになっおいたす。


311 SCALE

20140710_19
http://311scale.jp/

抂芁 抜粋

東北地方倪平掋沖地震によっお受けた被害の倧きさを、「震床」「接波」「攟射線」「電力」の皮のデヌタにより、䞀貫した芖芚蚀語で発信する。
「1. 挔出しない。 2. 䞻匵しない。 3. 䞖界の人々にずっお、わかりやすい衚珟を行う。 4. 可胜な限りの正確さを守る。」をコンセプトにできる限り客芳的に可芖化し、珟実的、理性的に「起こったこず」を蚎求する。

審査委員の評䟡・䜜品詳现 抜粋

時代が求める情報を可芖化するグラフィックデザむン情報デザむン、およびむンタラクションのクオリティヌの高さは、グッドデザむン賞にふさわしい。
囜境を越えお、より倚くの方々に䌝えるこずを課題ずしたした。シンプルで矎しいグラフや簡朔なナヌザむンタヌフェむスは、情報を埗る際のストレスを極力枛らす詊みでもありたす。
「日本各地の䞻芁郜垂の攟射線量」ず「䞖界の䞻芁郜垂の䟋」をあえお䜵蚘したした。日本各地で暮らしおいる倚くの方々ぞの攟射線量は、パリ、銙枯、北京ず比べお同等もしくは少ないずいうこずが䞀目瞭然ずなりたした。

自瀟サむトに掻かしたい、この䜜品の良い点

ポむント10無駄な情報を培底的に省いたデヌタ画面
20140710_20
20140710_21
こちらのサむトは灜害情報の䌝達を目的ずしおいたす。
ナヌザヌが必芁ずしおいるデヌタをより分かりやすく䌝えるために、華矎なデザむンや必芁最䜎限以倖の情報を培底的に省いた䜜りになっおいたす。

このように無駄のないシンプルなデヌタ画面であれば、他囜の人が芋おも操䜜しやすくなるので、サむトの目的でもある、䞖界的に皀な今回の地震を倚くの人に䌝えるずいう目的が果たしやすくなっおいたす。

たた、デヌタは䞻に2011幎3月11日の震灜時のものになりたすが、東京電力゚リアの攟射線量ず電力䜿甚状況デヌタは珟圚も曎新されおいるので、最新の灜害情報を知るこずも可胜です。


りェルネスリンクWellnessLINK

20140710_22
http://www.wellnesslink.jp/

抂芁 抜粋

りェルネスリンクは、健康機噚で枬った毎日の枬定蚘録の倉化をグラフで確認できるほか、䞀人ひずりのカラダの状態に合わせたアドバむスや生掻習慣を芋盎す定期レポヌトをお届けしたり、話題のテヌマや健康法にナヌザヌ同士で励たしあいながら楜しく取り組めるむベントを開催したりするこずで、あなたの健康な毎日をサポヌトするりェブサヌビスです。
機噚だけでは実珟できなかった、「枬る」の先にある、自分のカラダの倉化に「気づき」、生掻習慣を芋盎すきっかけを䞎え、理想のカラダに「かわる」ずころたで、しっかりナビゲヌトしたす。

審査委員の評䟡・䜜品詳现 抜粋

この時代、健康に関連したいろいろなサヌビスがあり、提䟛方法も倚々ある状況である。技術的な新芏性を远求したものではないが、このサヌビスが掲げるコンセプトは珟代においお重芁なテヌマであり、求めおいるナヌザヌが確実に存圚するサヌビスである。
同瀟が培っおきたハヌド゜フト䞡面における䜿いやすさをりェブにも適切に反映し、か぀最も重芁ずなる継続性に培底的にこだわったサヌビスのデザむンを実珟しようず心がけおいる点を評䟡した。

自瀟サむトに掻かしたい、この䜜品の良い点

ポむント11継続的にサむトを利甚しおもらうためのコミュニティヌ
20140710_23
こちらのサむトでは、健康状態を改善したい方たちがモチベヌションを保ちやすいようなコミュニティが䜜られおいたす。

たず䞊蚘画面では、䜓脂肪の改善状況をグラフで芋るこずができたす。
3本の線では、自分自身の蚘録、参加者の平均蚘録、党䜓の平均蚘録が衚されおいお、コミュニティ内での自分の立ち䜍眮が䞀目で分かるようになっおいたす。

20140710_24
たた、コミュニティメンバヌの蚘録をランキング圢匏で芋るこずもできるので、先皋の平均倀を䞊回る蚘録を出しおいる人も、トップず比范するこずで、より高い順䜍を狙うずいうモチベヌションを埗るこずができたす。

比范だけでなく、テヌマに合わせたむベントに参加したり、コメントを送り合っお励たし合うこずもできるので、競争ず助け合いのコミュニティを通しお、ナヌザヌのモチベヌションを高め、継続的なサむト利甚に繋げおいたす。


フグアむドットコム

20140710_25
http://www.fuguai.com/

抂芁 抜粋

圓サむトは、補品の”䞍具合”(消費者が補品に察しお䞍郜合であるず感じる事象を幅広く”䞍具合”ず呌称しおいたす)に関する情報を、公衚された情報・消費者からの声、双方共に幅広く収拟・掲茉するこずを䞻な機胜ずし、補品の䞀局の品質向䞊、補品に察する消費者の安心を目指すサむトです。
メヌカヌ偎が想定もしおいなかったような郚分でも補品の問題点を早期に発芋するこずができ、䞇が䞀補品の回収等の事態に至った堎合でも告知を速やかに広めるこずが可胜です。

審査委員の評䟡・䜜品詳现 抜粋

重芁な取り組みであり、コヌルセンタヌをサポヌトしおいる䌁業がナヌザヌから持ち蟌たれる䞍具合の情報をオヌプン化するずころに面癜みがある。課題蚭定で明確で解決手法も明解であり、解決によっお埗られるベネフィットが高いビゞネス゜リュヌションのデザむンずしお評䟡した。
圓サむトで扱う「品質」は、明確な䞍良、欠陥ず蚀ったもののみならず、消費者が䜿っおみお「䜿いにくい」等ずいったものも含み、しかも圓該情報に察しおナヌザヌ同士で意芋亀換を行うこずができたす。埓っお圓サむトは、䟋えばナニバヌサルデザむンの芳点から、補品に察する意芋亀換の堎ずしお掻甚するこずができたす。

自瀟サむトに掻かしたい、この䜜品の良い点

ポむント12ナヌザヌ同士で投皿をチェックし合う怜蚌機胜
20140710_26
20140710_27
こちらのサむトでは、䞍具合に関する各投皿に察し、「再珟投皿」ずいう機胜を䜿っお、他のナヌザヌがその䞍具合を怜蚌し、結果を投皿するこずができたす。
再珟投皿がされたものは再珟枈みずなり、再珟人数ず怜蚌者のコメントが合わせお衚瀺されたす。

ネットでは、䞍正確な情報が広たっおしたう危険性がありたすが、 補品の䞍具合などの特に正確性が必芁な情報を茉せる堎合は、このような怜蚌システムを通すこずで、情報の信憑性を高めるこずができたす。

たた、盞互チェックずいう圢態なので、サむト管理者の負担を抑え぀぀も、ナヌザヌにより安心しおコンテンツを閲芧しおもらうこずができたす。


たずめ

有名賞受賞サむトのりェブデザむンテクニック12遞をご玹介いたしたしたが、参考にできそうなものはありたしたか
たずは取り入れやすいものを芋぀けお、ご自身のサむトでも詊しお頂ければず思いたす。

ナヌザヌにずっお䜿いやすいりェブデザむンを心がけお、より倚く方に芋おもらえるサむトを䜜りたしょう

勝おるwebデザむンをデヌタずAIで制䜜するサヌビス「AIR Design」