Webサイトデザインまとめ① - 2014年8月

1. 2014年8月15日
川﨑 陸
Webサイトデザインまとめ①

2. 1
夜空と交差する森の映画祭 2014 HP
▌ 良い点
 各コンテンツページに遷移すると4パターンの背景画像
をランダムで差し替えられ、ユーザを飽きさせない工
夫がされている。
 マウスオーバーすると半透明になるバナーのインタラ
クションは、サイトの世界観の中心である背景画像の
良さを引き出している。
 映像紹介のローディングアイコンが映画のフィルムに
なっており、細部まで世界観を追及している。
 レスポンシブデザインで制作されている。
 ティザーサイト (http://forest-movie-
festival.jp/past/) は背景が動画になっており、4パタ
ーンの動画が連続して流れる。特別な動きはないが、
自然の雰囲気と心地よさを感じさせる。
タイトル：夜空と交差する森の映画祭 2014
URL : http://forest-movie-festival.jp/home/
概要 :
「夜空と交差する森の映画祭 2014」は、五感に訴えかける野外映画鑑賞会。草
や土のにおい、木々と葉が擦れる音、宙に浮かんだ煌めく星々など……余計な電
気信号を消すよう整備された映画館とは真逆の環境で、長編映画・ショートフィ
ルムを複数ステージにてフェス形式でオールナイト上映する。
(Fashion Press記事より抜粋 : http://www.fashion-press.net/news/12267 )
イベントの世界観を徹底して演出

3. 2
映画「ジャッジ!」HP
▌ 良い点
 TOPページに特に記述はなく、テキストはタイトルと
コピー、キャスト、主題歌等の情報だけで、主に画像
や動画等のコンテンツとリンクバナーで構成されてい
る。
 TOPページの画面左にある登場キャスト画像にマウス
オーバーすると、それぞれのセリフが吹き出しで出て
くる仕組みが印象的でユーザの関心を引いている。
 映画内で登場したキャラクターの特設ページもあり (Ｕ
ＲＬは同じ) 、キャラクターの紹介やちくわ笛で主題歌
を演奏した動画など、遊び心に溢れたコンテンツが用
意されている。
タイトル：ジャッジ!
URL : http://judge-movie.com/
概要 :
大手広告代理店に入社して間もない太田喜一郎（妻夫木聡）は、審査員として参
加予定の世界一のテレビCMを決定する広告祭に向かう。夜ごと開催されるパー
ティーには同伴者がいなければならないことから、同じ職場の大田ひかり（北川
景子）も妻として一緒に行くことに。さまざまな国から集結したクリエイターた
ちが自分の会社のCMをグランプリにしようと奔走する中、太田もひかりと共に
奮闘する。(シネマトゥデイより抜粋 :
http://www.cinematoday.jp/movie/T0018112 )
遊び心に溢れた多彩なコンテンツで
ユーザを楽しませている

4. 3
TAKE ACTION Foundation ＨＰ
▌ 良い点
 財団の活動報告がメインコンテンツだが、色使いが明
るく気難しい雰囲気を感じさせない。
 TOPページの活動内容へのリンク画像は主に画像+コピ
ーで構成されており、見て内容が分かりやすい。
 ヘッダに英語サイトへの切り替えのリンクと文字サイ
ズ(S,M,L)の切り替えボタンが付いており、ユーザビリ
ティにも優れている。
タイトル：TAKE ACTION Foundation
URL : http://www.takeactionfoundation.net/
概要 :
中田英寿氏が理事を務める財団。「なにかできること、ひとつ。」をテーマにわ
たしたちの未来、子どもたちの未来のために自身ができることを考え、行動を起
こすキッカケ作りを創出するために2008年に展開されたTAKE ACTION +1
キャンペーン。継続していくことに意味があると考え、TAKE ACTION
FOUNDATIONが設立された。(TAKE ACTION Foundation HPより抜粋 :
http://www.takeactionfoundation.net/about/)
気難しさを全く感じない、親しみやす
い財団のＨＰ

5. 4
ホテルニューオータニ HP
▌ 良い点
 黒を基調とした落ち着いたトーンで、高級感を演出し
ている。
 トップページに予約フォームを設置することで、予約
までのプロセスを最短で設定している。
 外国人富裕層をターゲットとする高級ホテルとして、
日本語、英語、中国語(簡)、中国語(繁)、韓国語に対応
している。
 メインビジュアル下とヘッダ左に会員サイトへのリン
クを設置しており、各会員サイトへの流入口としての
機能も果たしている。
タイトル：ホテル ニューオータニ
URL : http://www.newotani.co.jp/group/noc/index.html
概要 :
2014年に創業50周年を迎える老舗大型宿泊施設。自然との調和を意識した造り
になっており、外国人ビジネスエグゼクティブ、富裕層も御用達の高級ホテルで
ある。
幅広いターゲットのニーズを網羅している

6. 5
SUMMER SONIC 2014 HP
▌ 良い点
 爽やかな色使いのヘッダでのカウントダウンで年に1回
のイベントへのワクワクを煽っている。
 メインビジュアルで昨年の画像、ヘッドライナー、宣
伝動画を載せることで参加意欲をかきたてている。
 外国人ユーザが多いこともあり、英語ページへのリン
クがグローバルナビに設置されている。
 サイト中段にタイムテーブルやアトラクション、動画
等の楽しめるコンテンツ、下段にはツアーバス、メル
マガ、グッズといった必要な情報を分けてまとめるこ
とで、求める情報へアプローチしやすくしている。
タイトル：SUMMER SONIC
URL : http://www.summersonic.com/2014/
概要 :
サマーソニック（SUMMER SONIC）は、毎年8月上旬から中旬の間で2日間、土
曜・日曜に千葉（2000年のみ山梨）と大阪で開催される都市型ロック・フェス
ティバルである。2014年は8/16,17の2日間開催される。
(Wikipediaより抜粋 :
http://ja.wikipedia.org/wiki/%E3%82%B5%E3%83%9E%E3%83%BC%E
3%82%BD%E3%83%8B%E3%83%83%E3%82%AF)
調べる、楽しむ、の両方が可能な
洋楽系夏フェスサイト！