ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【デザイン分析】旅行者向けの総合ブランドサイト

旅行者向けの総合ブランドサイト

3/19

種類
EC・ブランディングサイト
概要
ターゲット
顧客
>新規顧客 >若者 >旅に興味のある若者(20~30)
ページ構成
TOP>・PRODUCT(>各商品ページ) ・ABOUT ・NEWS ・CONTACT)
width/breakPoint
786px(コンテンツ部分)/900px/700px
レイアウト
1column・gridlayout
配色
 

#F6F6F6
背景

 

#313638
文字色

 

#656C6E
footer

 

#939899
下部メニュー

 

#4871A9
button1

 

#70BDD3
button2

 

#2F9BCD
button3

font
Helvetica Neue",Helvetica,Arial,"游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif

感想・いいと思ったpoint

ファストビュー
彩度の高い、世界各地を想像させる写真が魅力的です。高さも1462pxと広めに取られていて開いたときに目が止まります。画像の下部は曲線になっていて、下へのスクロールを促ようになっています。
レイアウト
1カラムで、それぞれの段でグリッドに沿って要素が配置されています。PRODUCT部分のテキストは各見出しだけで、20pxの見やすいサイズになっていて余白も広めに取られています。文字間の空きも含めてページ全体が非常に見やすいと感じます。
配色
CSSでの配色はどちらかというと寒色系の落ち着いたもので、商品写真や旅の写真を引き立てています。
フォント
英数字はHelvetica、日本語は游ゴシックで見せたいようです。Helveticaはロゴとプロポーションが似ています。スタンダードかつ読みやすいフォントが選ばれていると思います。游フォントは個人的に印刷された活字のような印象があるので、白地に近い背景の時は特に合う気がします。
その他
PRODUCTの見出しの商品写真はそれぞれパスポートのような形になっています。コンセプトにも沿っていて、且つラウンドとドロップシャドウがあることで見易さや親しみやすさを感じます。各ページのボタンは細い罫線と線と塗りの色が反転する分かりやすいホバーアニメーションになっています。全体的に見やすくしっかりしたサイトだなという印象を受けました。