#1日1サイトレビュー【058】Loved One | AFRO FUKUOKA 福岡の情報ポータル＆ウェブマガジンさん

Loved One | AFRO FUKUOKA [ONLINE] 福岡の情報ポータル＆ウェブマガジン

今日は甘々❤な地域情報サイトを🥰
サイト上部から下部まで続く縦ラインを作る方法が分かりました✨

【概要】
福岡の情報サイト「AFRO FUKUOKA」の記事
佐賀県とのコラボ

【ターゲット】
福岡在住カップルしぜ20代
遠い場所に遊びに行きたい方
福岡のスポットではなく、他の県に足を伸ばしたい方

【目的】
福岡県民→情報サイトとしての守備範囲を広げ、閲覧数を増やす
佐賀県民→「AFRO FUKUOKA」の認知度アップ👉福岡に訪れてもらう

【印象】
ナチュラル、シンプル、かわいい

【ファーストビュー】

・画像とテキストが対角線上に配置されている。カップルが良く作ってるアルバムのようにも見える。

・カップルの片方が写真を撮っている設定と推測。キャッチコピーやテキストも写真を撮っている方の気持ちだと思う。
お出かけスポットを探しているターゲット（カップル）が疑似体験できる。

・サイト上部からサイト下部まで縦一本ラインをいれることで、順番や時間経過を印象付けられる。

■縦ラインのCSS
body {
　background: url(../img/bg.png)repeat-y center top;
　background-size: 80px;
}

縦ラインは正方形（60×60px）が縦に繰り返し配置されてできていました。

【CSS】background 背景のプロパティを一括指定しよう！

めっちゃ分かりやすいです！✨ありがとうございます！！

【コンテンツ】

・セクションタイトルは時計のイラスト、時間、場所名のセットで統一されている。時間を表示することでターゲットがタイムスケジュールを想像しやすくなる。

・セクションごとにビデオフィルムのように横並びに配置された画像が右から左へと流れるアニメーションがある。

・CSSのwidth指定を、このサイトでは「w1200」や「w832」など具体的に数字を付けたクラス名にしていた。こうしとけばHTMLを見ただけで幅の想像ができていいなと思った。

【カラー】
青がメインカラーで、ややアピールしたい補助的なところに淡いオレンジを使っている。青とオレンジは補色の関係だけど、かなり控えめなオレンジなので色同士ぶつからず調和して見える。でもなじみすぎず自然と目につく。
個人的にかなり好きな組み合わせです🥰

ベースカラー：白
メインカラー：青
サブカラー：淡いオレンジ
文字：青

【フォント】

Montserrat, Helvetica, Lato, "游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

ゴシック体とサンセリフ体で親しみやすい雰囲気。