![見出し画像](https://assets.st-note.com/production/uploads/images/31191420/rectangle_large_type_2_808aa72d6ba1a123bc34cd0d9ad9f5a5.jpg?width=1200)
CYCLING EHIME-SETOUCHI JAPAN- #1日1サイトレビュー
【概要】
おすすめルートや役立つ記事を紹介している、愛媛県公式のサイクリングサイト。
【印象】
線が細く、情報が詰まっているもスタイリッシュな印象。
【ファーストビュー】
・大きな一枚写真が使われており、スライドショーになっている。写る景色によって、表示される地名も変化する。
【コンテンツ】
・最初、真っ白な画面にメッセージとロゴが現れ、かっこいい印象を与える。
・検索窓や言語選択など細かなところにも動きがあり、作り込まれている。
・メニューバーを開くのに合わせて上のロゴが少し縮小する。
・「初心者」「中級者」「上級者」の3つのレベルに合わせたマークを表示している。hoverすると写真が暗くなり、少し拡大される。(リンク)
・サイクリングルートがレベル別に紹介されており、分かりやすい。関連する記事や他のサイクリングサイトもレベル別になっている。
・トップページのコンテンツは、「About」「レベル紹介」「サイクリングルート」「役立つ記事」「動画」「アクセス」「インフォメーション」となっており、適宜コンバージョンボタンからそれぞれの詳細リンクへ飛べる。メニューバーからも飛べる。
・シンプルなフェードインアップ、フェードインライトなどの動きが施されている。
・ルートの詳細記事が非常に充実している。Google Mapや各地点の標高のグラフ、見所などが分かりやすく掲載されている。○キロ地点の名所の住所や営業時間が載っているのが機能的。
【カラー】
・ベース:白、メイン:ブルー、アクセント:オレンジ
・3つのレベルは青・黄・ピンクで色分けされている。
【フォント】
・"Yu Gothic", YuGothic, 游ゴシック体, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Meiryo UI", Meiryo, メイリオ, Arial, Vardana, "MS PGothic", "MS Pゴシック"
【レスポンシブ】
・790pxがブレイクポイント。
・スマホデバイスでは文字の可変はなく、タブレット以上になると文字可変あり。
・1220px以上から可変しなくなる。
この記事が気に入ったらサポートをしてみませんか?