【day53】東海汽船 新造船 2020夏 就航 #1日1サイトレビュー

東海汽船 新造船 2020夏 就航｜東海汽船

【概要】
東海汽船の新造船2隻についての情報発信サイト

【選んだ理由】
アンカーメニューがオリジナリティがあるなど、遊び心とそのサイトらしさが伝わるため

【参考になるデザイン（PC）】
・ファーストビューは2隻のイラストとロゴ、就航日、グローバルメニュー、キャッチコピー、アンカーメニューが配置
→イラストの上に配置されている要素が現れるアニメーションがそれぞれ違ってリズムがある
→イラストの上には日本の古くからの絵柄（青海波）が上下にうごくアニメーションが配置されていて海を進む船や日本らしさを感じる
・コピーライトは左サイドに縦書きで固定
→コンテンツエリアの外に配置されているので、スクロールしても可読性が落ちない
・アンカーメニューは、2隻が停泊する島と船のイラストになっているし、クリックしたポイントにあわせて船が進む
→オリジナリティと船が進む様子を彷彿させる
・各エリアの見出しはゴシックで大きめで赤色、スライドアップのモーションもある
→エリアの境界線を判別できるし、本文のフォントに対してジャンプ率が高いので視認性が高い
・コンテンツの日本語文は行間が広くとられていて大きめのフォント
→読みやすいしサイトの雰囲気とマッチ
・グレージュの背景部分やNEWSなど、各エリアにはボックスで囲われているところがおおいけどのっぺりに見えない
→影が設定されていたり、見出しやイラストを枠からはみだして配置していることで重なりをつくっている＝のっぺりしない！
・ページトップボタンは魚が話しているようなイラスト
→サイトの雰囲気とあっていて少し身近な印象を与えるし、少し動くモーションもキャッチー
・日本語の見出しは縦書きで表現されている部分もある
→違和感なくサイトに動きがでているし、見出しであることを認識させている
・みているページにあわせて、グローバルナビゲーションのメニュー名に赤色下線が引かれている
→下線の太さはロゴの枠と同じ（もし細かったらちょっと違和感があったかも）
・フッターのSNSアイコンはネイビーなどで統一せず、そのままのカラーリングで配置
→サイトの雰囲気とは少し異なるけど、そのぶん目立つ（敢えてそうしたのかな？）
・サイトで使用されている色が3色のみ
→線画のイラストとも統一感があってシンプル、清い！

【目的】
・東海汽船の新しい船について知ってもらう
・就航した船に乗ってもらう

【フォント】
日本語：Noto Serif JP、游明朝
見出し・英字：Josefin Sans（Google Fonts）
→アンカーメニューではイタリックになっている

【カラー】
ロゴ、見出しなど：E90000（日の丸の赤色）
フォント：002A54（藍色）
背景：fff、EFEDE4（グレージュ）

【レスポンシブ（SP）】
・グローベルメニューはハンバーガーメニューになっている
→ロゴの枠の太さよりちょっと太め？結構目立つ
・REPORTのカモメなど、添えられているイラストのレイアウトがPCサイズとは異なる
→SPサイズでみたときに違和感がなく、エリアの意味あいとしての邪魔にならないレイアウトになっている

【感想まとめ】
・藍色のセリフ体やイラスト、グレージュの背景がマッチしてて個人的にとてもときめいた
・このサイトのように、らしさを遊び心をもって表現できるサイトを作れるようになりたいなぁって思った！

▼PCサイズキャプチャ