webサイト分析15｜JAF Mate Online

JAF Mate Online（ジャフメイトオンライン）｜JMO

まとめ

ユーザーに問いかけや気づきを与え、クリックに繋げる見出し。
フォントサイズに規則性がありバランスが良い。
メインビジュアルの背景色は全体では使われておらず、雑誌のページが変わるように、各コンテンツは明確に色分けされている。

---

カテゴリー

自動車関連/記事サイト

概要

⼀般社団法⼈ ⽇本⾃動⾞連盟（JAF）の冊子 『JAF Mate』 から誕⽣した、オンラインメディア。

コンセプト

安心のクルマ生活と、心豊かな人生を
（下層ページに記載）

ターゲット

JAF会員の方
JAF会員に興味のある方

目的

交通安全の啓蒙
自動車利用の推進
JAF新規会員登録

コンバージョンまでの動線

季節にちなんだ最新エッセーや地域のグルメ情報、道路情報の記載。
会員向け優待情報・キャンペーンや懸賞の記載。

---

メインビジュアル

最新エッセーのタイトルと、画像やイラストが大きく記載。
タイトルが、いかにユーザーを惹きつけるかが大事そう。
７つの最新ニュースを左右のボタンで切り替えることができる。

右側にはおすすめ記事を4つピックアップ。
「〜〜は違反？」「〜〜できる？」と、ユーザーへ問いかけ、考えさせる文章が多い。

グローバルナビ

自動車
安全運転
ドライブ・旅行
ライフスタイル
エッセー
JAFで買う
検索する

ホバーするとオレンジの線がひかれる。

メニュー

かなり盛り盛り。カテゴリー内の分類がとても多い。
そもそも小冊子から波及してるので、小冊子のタイトルページも見受けられる。
メニューボタンはスクロールすると常にヘッダーに固定。

コンテンツ

あたらしい記事
おすすめ記事
連載一覧
JAFで買う
会員向けおトク情報など
JAFからのお知らせ
会員優待サービスのご利用
冊子最新号

・あたらしい記事

右側にはキャンペーン情報、キーワード検索、週刊ランキングの紹介が並ぶ。固定はされず、スクロールすると次のコンテンツに移動。

・おすすめ記事

ここは特に日付の記載はなかった。

・連載一覧
種類が豊富。冊子を引き継いだコンテンツが多そう。

右のメニューはSNSボタンが最後。
ここまで来るとフッターまで固定される。

・JAFで買う
以降はコンテンツとして色分けはなくなった（同じ色で彩度違いなど、明確な色分けはない）。
ここより上のコンテンツに重きがあると予測。

「冊子最新号」のみ、英語が左方向へアニメーションがついていた。

・ロゴ/フッター/コピーライト

レスポンシブ

1199pxから、ヘッダーのグローバルナビが２列に。

960pxからハンバーガーメニューに集約。

１つの記事が１列ずつ記載されるようになり、すっきりした印象に。

見出しの視認性も高い。

配色

背景は淡い色が多い。
文字が多いので、邪魔をしない。

フォント

dnp-shuei-gothic-gin-std

白黒トレース

発見と感想

・記事サイトとして、あくまで文字の邪魔にならない、文字のカテゴライズに役立つようなあしらいが見受けられた。
・タイトルだけの記載でなく、ユーザーに気づきを与えたり、問いかけたりすることでクリックに繋げやすいよう工夫してると思った。
・見出し、小見出し、本文の文字サイズのバランスがちょうど良い。
・大事なコンテンツはハッキリと色分けされており、切り替わりが分かりやすい。
・ドライブと関連するからか、配色は自然に由来する色がメインだと思った（推測）。