株式会社JAFメディアワークス PROJECT

紙からデジタルへ、会員誌の体験をアップデート
「JAF Mate Online」Webサイト構築

Outline

株式会社JAFメディアワークスは、一般社団法人 日本自動車連盟(JAF)が提供する会員向けの月刊誌「JAF Mate」を発行しています。同誌は、50年以上に渡り会員から親しまれ、現在は約2,000万人のJAF会員への情報提供を担っています。

2022年3月15日、同社は「環境負荷の低減」と「デジタル社会における新しいライフスタイルの創出」を目的として、Webメディア「JAF Mate Online」をローンチ。同年4月より、年10回発行してきた月刊誌を年4回の季刊誌へと移行する大転換を遂げました。

ロフトワークはWebサイト構築フェーズから参画し、プロジェクトを推進するためのカウンターパートとして、さまざまな部署・立場のステークホルダーが絡む新規Webメディア立ち上げのプロジェクトマネジメントとクリエイティブディレクションを実施。紙媒体からデジタルメディアへ移行するにあたり、UI/UXデザイン、ブランドデザインを得意とするデザイン会社「Shhh Inc.」と協働しながら、デジタル時代のライフスタイル・嗜好の変化に対応する形で、メディアの「らしさ」をアップデートしました。

JAF Mate Onlineは、公開4ヶ月後となる2022年7月の月間ページビュー数は100万を超えるなど、デジタル版への移行によって大きな反響を得ています。

プロジェクト概要

プロジェクト名:JAF Mate Online/Webサイト構築 プロジェクト
プロジェクト期間: 2021年8月〜2022年3月
クライアント: 株式会社JAFメディアワークス

体制:

  • プロジェクトマネージャー/クリエイティブディレクション:北島 識子
  • クリエイティブディレクション:伊達 善行
  • Webディレクション:重松 佑(Shhh Inc.)
  • デザイン:宇都宮 勝晃(Shhh Inc.)
  • テクニカルディレクション:大森 誠、小野村 香里
  • htmlコーディング:原國 政司(ubu)、坂田 一馬(Good rings)
  • CMS構築:株式会社サイドスリー
  • オンライン版 編集アドバイザー:Camp inc

Approach

メディア本来の「らしさ」をビジュアルと体験に落とし込む

Webサイト設計・デザインにあたり、デザイン会社 Shhh Inc.とともにJAF Mate編集部とプロジェクトメンバーを対象にしたワークショップを実施。JAF Mate Onlineがこれから会員に提供したい価値や体験、「ありたい姿」をディスカッションしました。

ユーザーからの印象・使い勝手などを考慮した上で、新しいメディアの設計・デザインのポイントとなる「らしさ」の共通認識として「信頼感ある」「身近な・安心な」「多彩な」の3つの要素を設定。さらに、創刊から50年以上の歴史を持つ「JAF Mate」がこれまで受け継いできた「冊子性」と「隠れた面白さ」に着眼し、その読書体験を現代のデジタルライフに適応する形でアップデート・再構築しました。

JAF Mate Online らしさのサマリー(資料提供:Shhh Inc.)
「JAF Mateからつづく新しい道」を象徴する、JAF Mate Onlineのロゴ。道のはじめには、JAF Mateからのつづき・延長として、カラー展開するアクセントを設けています。右上にカーブする道はポジティブな印象とともに、曲線が持つ親しみやすさを印象付けています。

リサーチ〜CMSの選定までロフトワークのWebプロジェクトの特徴・進め方

プロジェクトの全体感をつかみ、戦略と戦術に落とし込むことで、Webプロジェクトの「成功のすがた」を描きます。

ロフトワークのWebプロジェクトの特徴・進め方

Output

Topページのファーストビューは冊子の表紙のようなルックを強調する縦長の楕円形サムネイルを採用、レイアウトは変化とリズム感を意識しています。また各セクションの背景色を緩やかなフェードで変化させることで、JAF Mate らしさである「多彩さ」を引き立てています。
曲線的で多様な形のサムネイルは車窓からの景色をイメージしており、眺める楽しさを演出しています。

記事詳細テンプレートは、バリエーション豊富なJAF Mateの各コンテンツのイメージに合わせられるように背景色やKVの縦横比率を変更可能。さらに、ランディングページの制作も出来るようカスタマイズしています。

記事詳細テンプレートは、バリエーション豊富なJAF Mateの各コンテンツのイメージに合わせられるように背景色やKVの縦横比率を変更可能。さらに、ランディングページの制作も出来るようカスタマイズしています。

サイト内の誘導を促進するためのインタラクションとして、サムネイルにカーソルをホバーした際に少し斜めに傾く動きや、メニューアイコンにイラストを取り入れるなど、「楽しさ」「多彩さ」を感じさせる動きを随所に取り入れています。

Member

北島 識子

株式会社ロフトワーク
シニアディレクター / デザインエヴァンジェリスト

Profile

柏木 鉄也

株式会社ロフトワーク
チーフプロデューサー

Profile

重松 佑

重松 佑

株式会社Shhh
代表取締役/ディレクター

宇都宮 勝晃

宇都宮 勝晃

Shhh Inc.
共同創業者 デザイナー

伊達 善行

株式会社ロフトワーク
クリエイティブディレクター

Profile

大森 誠

大森 誠

株式会社ロフトワーク
テクニカルグループ テクニカルディレクター

小野村 香里

株式会社ロフトワーク
テクニカルグループ シニアディレクター

Profile

Event

関連イベント

実践者に学ぶ!大規模プロジェクト推進の極意 全社を巻き込むデジタルシフトの進め方

デジタルシフトやWeb構築など、社内で前例のない0→1のプロジェクトをどのように推進してばいいのでしょうか?

本イベントでは、1,300万部の発行部数を誇る会報誌「JAF Mate」のデジタル化事例をご紹介。プロジェクトのプロセスや過程で浮上した課題への解決策についてご紹介します。

>>イベントを視聴する

Keywords

Next Contents

南海電鉄が大阪・なんばに仕掛ける
街の担い手を育む、レジデンスプログラム