15.感!高知 気分高まる観光地 高知市|#1日1サイトレビュー
【概要】
高知県高知市のPRサイト(ランディングページ)
【ファーストインプレッション】
元気、地元愛、楽しそう、面白そう
【メインビジュアル】
背景:映像動画。(高知市内の観光地やイベント、それらを訪れる笑顔の女性の姿が映し出される映像)
キャッチコピー:「感!高知」「気分高まるKANKOUCHI」が画面中央に。
【フォント】
Midashi Go MB31
【配色】
#ff96c8 #fad22d #46be91 #f50000 #ffffff
彩度の高めの配色。背景の多くは赤、文字は白。
【構成】
①ファーストビュー:高知市の観光地やイベントの映像を背景に、キャッチコピー「感!高知 気分高まる観光地」を画面中央に配置。キャッチコピーはロゴデザイン化されていて、印象的。
②メッセージ:手書き文字の画像「おかえり、感動!」の下に、高知市からのメッセージ
③画像:四国における高知市の場所をイラスト画像で表現
④ショートムービー:YouTube動画のリンク。画像画像タップでページ内で動画が再生される。内容は、高知市内の観光名所各地と、そこを訪れる女性の映像(約3分)。
⑤カテゴリーごとのショートムービー:体験、食文化、風景ごとにコンテンツを分けて、ショートムービーの画像リンクが貼られている。(これもページ内でYouTube動画が再生される。)
⑥「感!高知マップ」:カテゴリーごとに観光地の写真を探せるページへのリンク。
⑦SNSキャンペーンの紹介:インスタグラムハッシュタグキャンペーン
⑧ポスター画像の紹介
⑨フッター:その他バナーリンク、高知市の市章、連絡先
⑩TOPへ戻るボタン(Back to top):縦線の上をハートが上方向に動いているようなアニメーション効果が付いている
【レスポンシブ】
SPではコンテンツ:縦積み
【あくまでも私見】
▶配色が元気な印象を持たせる。
:赤色と、少し明度の高い3原色(少し濃いめのピンク、黄色、緑)
▶動画だと一目でわかる画像リンクのデザイン
:リンク画像の中央には再生マーク(〇の中に▶)があり、一目で動画だと分かる。カーソルホバー時に画像が少し拡大、再生マークの色が少し透過される(透過度0.5くらい?)。
▶ところどころ画像がハート型に切り抜いてあるのが良い
:かわいい、気分が高まる、わくわくする。そんな印象を持った。登場する人物が明るい笑顔の女性で、配色にパステルカラーがあることから女性に向けてデザインされたサイトだと感じた。フッター下部の「Back to top」のデザインが個人的に好き。
▶ハート型に切り抜かれた画像が、鼓動のように動くのが印象的
:ただのハート型の画像と思いきや、まるで心臓の鼓動のように動く効果がついていて、そこに書かれた情報に自然と目がいってしまう。見ている人の意識を向ける工夫、単調にならない工夫がすごい。 とくにスマホでサイトを見ると、やや画像が直線的に並ぶので、この工夫は大事だと感じた。
【ひとつだけ自分のデザインに取り入れるとしたら】
▶コンテンツにちょっとした動きや変化をCSSで指定する。(単調な画面にしない工夫をしたい)
:画像が直線的に並んでいる部分や、テキストだけの画面は訪問者が流し読みする可能性がある。注目してほしい部分に動きや変化を見せて、コンテンツに意識を向けるデザインができるようになりたい。
(まだ自分は java script は覚えていないので)CSSで出来る範囲で出来るようになりたい。
この記事が気に入ったらサポートをしてみませんか?