見出し画像

100.Odakyu feel free trip #1日1サイトレビュー

【印象】
・爽やか、可愛い、繊細な印象
【ファーストビュー】
・写真を全面に表示。ゆっくりと拡大し、自動で切り替わる仕様になっている
・中央に線の細い手書き風フォントでサイト名を表示。文字色は白を使用。視認性を上げるために写真を少し暗くしている。手書き文字の下にゴシック体の柔らかいフォントを使用してキャッチコピーを表示している。繊細さや可愛らしい印象が出ている
・ヘッダーは背景色無し。右側にロゴ、左側にメニューを配置している。追従は無し
・画面右側に現在の写真が何枚目かを表示するアイコンを配置。次の写真が表示されるまでの時間で円を描いている
・画面右下に動画を流すボタンを設置している。角丸で背景が写真になっており、追従する仕様。スクロールするとボタンが円に変わる
【コンテンツ】
・セクションタイトルは小さめのフォントサイズで英字を表示。日本語表記は無し。その下にFVと同じ手書き風フォントも配置している
・写真の切り抜きを角丸で行う、ボタンやアイコンの枠線も円や角丸になっているなど曲線を使うことで柔らかい印象を演出している
・セクションタイトルの周りに花を思わせるあしらいを表示したり、写真の角に水玉の図形を配置していたりと可愛らしい印象
・追従するボタンの他にも動画を大きく埋め込んだセクションを設けている。観光についての案内をしているサイトなので、より雰囲気が掴みやすい動画を注目しやすい位置に配置していると思われる
・「ABOUT」セクションでは写真をななめに重ね、背面に円を敷いている。楽しそうなイメージを持った
・文字量が少なめなこと、背景色が白であしらいも淡い色が中心なことから写真や手書きフォントのあしらいが目に入りやすくなっている
・「JOURNAL」セクションではそれぞれの観光地名を色分けして表示。「VIEW MORE」にホバーで矢印アイコンの周りの円がそれぞれの色に合わせて変わるようになっている
【カラー】
・白、灰色、水色、青、緑、茶色、黒に近い青
・テキストカラーは黒に近い青#161B21
【フォント】
・本文にfot-tsukuardgothic-std
・英字セクションタイトルにfutura-pt
・手書き風フォントはAntro Vectra
・YakuHanRPを使用
【レスポンシブ】
・ヘッダー右側にハンバーガーメニュー(白背景、2本線、メニュー表記無し)を配置。追従する仕様。タップすると画面いっぱいにメニューが開く。「JOURNAL」セクションへのリンクは写真付きで配置している
・FVの動画ボタンは画面下部中央に移動。追従は無しに仕様変更している(SP版ではハンバーガーメニューが追従するため?)