神戸港クルーズ船ポータルサイト | サイト分析 #03
※ 本記事は、筆者自身の学習を目的として執筆したものです。内容には、読者の方にとって分かりづらい表現や拙い言い回しが含まれる可能性があります。
また、記載している分析や意図の解釈は、あくまで筆者個人の主観や予測に基づくものであり、実際の制作意図やターゲットとは異なる場合があります。あらかじめご了承ください。
分析するサイト : Garten
概要
今回分析したサイトは神戸港にある複数の遊覧船・レストランクルーズ船をまとめたポータルサイトです。合計5隻あり、遊覧船から豪華レストラン船まで、幅広いスタイルのクルーズが選べます。ウェディング、企業・修学旅行のチャーターなど特別な用途にも対応しているそうです。
目的とターゲット
目的
神戸を観光地として盛り上げたい
予約してもらう
ターゲット
20代~30代の若者カップル(写真のモデルが若者なのでそう推察)
分析
親しみやすさの演出
サイト全体を通して波を模した波形の装飾がちりばめられていたり、シールのような被写体の形に切り抜かれた写真や様々なシェイプに切り抜かれた写真が使われていることにより、可愛らしさや親しみやすさを感じ、クルーズ船という敷居が高そうなイメージを払拭しています。
明快なレイアウト
ほとんどのセクションが中央寄せで組み立てられていて、情報がシンプルに縦に並んでいるので順番がはっきりしていて理解しやすい設計になっています。また情緒面でも、中央寄せのシンプルなレイアウトの純粋さや屈託のなさからも可愛らしさの演出の一端を担っているようにも感じました。
ダイナミックな船の写真
船の紹介セクションで各船がその形に切り取られ背景からはみ出るようにダイナミックに配置されています。船のインパクトを与えて興味をそそらせると同時にサイトの中でここだけ異なるレイアウトがされていて、デザインのメリハリに寄与しています。『クルーズ船のご紹介』というタイトルがボタンにもなっているのがあまり見ない方法で面白いですね。
秀逸な欧文フォント
欧文フォントにReddit Sansというフォントを使っています。見てみるとまず一番の特徴は書き終わりに漢字のハネのような幾何学的な曲線があります。この部分が波を想起させサイトの夏感の演出に寄与しています。横幅も広く丸みを帯びていて冒頭で書いた可愛らしさと親しみやすさも感じます。
reddit fontの起源はredditというアメリカの掲示板型ソーシャルニュースサイトの専用フォントとして開発され、Google fontsで無償提供されています。。reddit fontについて詳しくまとめられて記事があるので興味があったら是非見てみてください。
ホバーで出現するナビゲーション
ヘッダーナビゲーションはハンバーガーメニューをホバーするだけで出現します。メニューが多く常時配置するのは幅を取りデザインのノイズになってしまうので、ホバーで出現させユーザーの手間も最小限に抑えています。
キャプチャ(見本)と模写
お読みいただきありがとうございました。
