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