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

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

2. 1
andymori
▌ 良い点
 派手な色使いだが、全体としてまとまっている。
 各コンテンツのボックスはブラウザサイズによって変
動し、各サイズの端末にも対応している。
 ナビゲーションも整理されており、各メニューのアイ
コンも分かりやすさを助長している。
タイトル：andymori
URL : http://andymori.com/
概要 :
andymori（アンディモリ）は、日本のオルタナティヴ・ロックバンド。和製リ
バティーンズとも呼ばれる。
2007年に早稲田大学で結成され、活動を行っていたが2012年にvo.小山田が脱
法ハーブを服用し、トラブルを頻発。2013年9月24日の武道館ワンマンを以て解
散を発表するものの、7月4日にvo.小山田が河川に飛び込み、重症を負ったため
公演はキャンセルされた。2014年6月27日に復帰が告知されると同時に、8月29
日のSWEET LOVE SHOWERの出演を最後に解散することを発表した。
▌ 改善点
 TOPページにあるボックスが多すぎる印象。ナビにあ
る項目だけでいいのではないかと感じた。
 色使いが派手なので、ページ遷移にもう少し柔らかい
動きをつけるとよりユーザに優しい。
 トップページのデザインに比べ「MAIL」の入力フォー
ム、ボタンが地味で古い。
 ターゲット : andymoriのファン
 ゴール : 情報、コンテンツの提供 (窓口的役割)

3. 2
映画「トランスフォーマー ロストエイジ」
▌ 良い点
 ナビゲーションが映画らしいデザインでタイトルとメ
インビジュアルに溶け込んでいながら、分かりやすく
クリックしやすい位置にある。
 映画の中のニュースや新聞によって映画の世界が展開
されている。また同時に、壁紙の配信も行っている。
http://www.transformersaredangerous.com/?lang=jp
 Yahooとのコラボも面白い！http://promotion.yahoo.co.jp/tf4_a/
タイトル：トランスフォーマー ロストエイジ
URL : http://www.tf-movie.jp/
概要 :
『トランスフォーマー/ロストエイジ』（Transformers: Age of Extinction）は、
ハズブロの玩具『トランスフォーマー』を基とした2014年のアメリカ合衆国の
SFアクション映画である。実写映画『トランスフォーマー』シリーズ（英語版）
の4作目であり、前作『トランスフォーマー/ダークサイド・ムーン』から4年後
の設定となる。
(wikipediaより抜粋 :
http://ja.wikipedia.org/wiki/%E3%83%88%E3%83%A9%E3%83%B3%E
3%82%B9%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%
83%BC/%E3%83%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%82
%A4%E3%82%B8 )
 ターゲット : CM、映画館の予告動画等を見て気
になっている人
 ゴール : 興味があるユーザを引き付け、映画館
へ導くこと。(AISASのS→Aへの引き上げ)
▌ 改善点
 TOPページに遷移する度にポップアップで動画が流れ
て鬱陶しく感じる。
 「NEWS」だけTumblurで制作されており、別ウィン
ドウで表示される。なぜにサイト内で制作しなかった
のか…。
 「GALLARY」にグローバルナビがない。

4. 3
カフェ・ド・ギャラリー アダチ
▌ 良い点
 アクセスはGoogleマップ埋め込みで使いやすい。
 メニューも全国展開するチェーン店並みに充実してい
る。
 右カラムもコンテンツによって変化し、コーヒー豆通
信販売情報やメールフォームなど、次のステップへ進
みやすくなっている。
タイトル：カフェ・ド・ギャラリー アダチ
URL : http://cafe-adachi.com/about-our-coffee/
概要 :
最高のコーヒーを、最高の器で、最高の雰囲気で飲んでもらいたい
このような理念の下、カフェ・ド・ギャラリー アダチは産声を上げました。選
び抜かれたアンティークの数々が、天窓のステンドグラスが、美しいクラシック
の音楽が･･･貴方をお出迎えします。
(カフェ・ド・ギャラリー アダチHPより抜粋 :
http://www.takeactionfoundation.net/about/)
▌ 改善点
 イベント情報がほぼ空欄。
 レスポンシブデザイン(?)だが、画面を縮小して、元に
戻しても、画面が小さいブラウザの仕様から戻らない
。(バグ…？)
 せっかく通信販売メニューが充実しているのに、PDF
をダウンロードしてFAXで注文 or Yahoo ショッピン
グのみというのはもったいない。
 ターゲット : コーヒーマニア、岐阜近辺在住の主婦、
老夫婦
 ゴール : コーヒー豆購入、来店

5. 4
BEAMS
▌ 良い点
 TOPページはナビゲーション+メインビジュアルという
シンプルな構成。
 TOPページでより多くの情報を見たい人は、ビジュア
ル部分のレイアウトの変更も可能。タイトル：BEAMS
URL : http://www.beams.co.jp/
概要 :
ビームス（BEAMS）は1976年に創業した、輸入及びオリジナルの衣料品や雑
貨を販売するセレクトショップである。また、ビームスが展開するオリジナルの
衣料品や雑貨のブランドでもある。2007年3月現在、国内74店舗、海外6店舗
（香港、台湾）。
(wikipediaより抜粋 :
http://ja.wikipedia.org/wiki/%E3%83%93%E3%83%BC%E3%83%A0%
E3%82%B9)
 ターゲット : BEAMS製品購入検討者
 ゴール : 製品情報、各種イベント情報提供
▌ 改善点
 外国語対応コンテンツが中途半端
 トップページのメインビジュアルにマウスオーバーし
た際に出てくるポップアップが唐突で、メインビジュ
アルが見えづらい。
 画面左上(TOPページ以外は画面上部)のロゴがクリッ
クできない。
 左下のFAQ、Privacy Policy等の存在にに気付かない

6. 5
CORSO
▌ 良い点
 各コンテンツへの遷移がスムーズ。(Ajax?Jquery?)
 デザイン(クリエイティブ)が統一されたトーンで、遊
び心のある動きもあって魅力的。
タイトル：CORSO
URL : http://www.corso-hw.com/
概要 :
富山県高岡市にある美容室。
 ターゲット : 見込み顧客( from 口コミ、美容室まとめ
サイト)
 ゴール : 問い合わせ・来店
▌ 改善点
 各第二階層からTOPページに戻ってくるリンク(ナビゲ
ーション)がない。
 「作品づくり☆」のフォントが他のナビゲーションと
違う上に、リンクが飛べない。
 <title>に「CORSO｜富山県高岡市の美容室 美容師の
求人募集」と記載している。ここにまで求人を記載す
る必要はないのではないか…。