FINDING
長野 彩乃 2024.05.17

Webサイト運用の道具箱 番外編
読者とのエンゲージメントを、もっと深めるために
メルマガリニューアルの背景とその結果

執筆:長野 彩乃/ロフトワーク マーケティング
編集:岩崎 諒子/Loftwork.com 編集部

シリーズ「Webサイト運用の道具箱」について

ロフトワークは、Webクリエイティブのプロフェッショナルとして、さまざまな企業や大学、自治体のWebサイト制作に携わっています。一方で、実は、ロフトワークにも他社と同様に「Web担当者」がいるんです。

普段、プロジェクトなどの情報発信の裏方として活動している「ロフトワークのWeb担当」がどんな仕事をしているのか、どうやってコミュニケーションを支えているのか。ロフトワークのマーケティングメンバーが、Tipsや小噺的なエピソードをご紹介します。

これまでの記事では、Loftwork.comという「Webサイト」の改善や改修について紹介してきました。

しかし、実はWebサイトの運用は、Webサイトに関する数値を見ているだけでは、効果を最大限発揮することは難しいんです。運用の効果・成果を生むには、ターゲットユーザーに「コンテンツを届けるための施策」についても仮説を立てて、改善サイクルを回していく必要があります。つまり、いかにしてユーザーを集客するのかは、Webサイト運用においてとても大事なテーマなのです。

Loftwork.comへの集客チャネルはいくつかありますが、重要なものが、メールマガジン(以下、メルマガ)「Loftwork magazine」です。10年以上運用している本メルマガは、今もなおロフトワークのコーポレートメディア Loftwork.comの読者とのコミュニケーションチャネルとして重要な役割を果たしています。

以前より購読いただいている方はお気づきかもしれませんが、このメルマガ、昨年12月にリニューアルしました!

読者のみなさんが探している・必要としている情報に、よりアクセスしやすいメディアとして再設計された新しいメルマガ。そこで今回は、「番外編」と銘打って、メルマガのリニューアルにあたり考慮したポイントと、4ヶ月間運用した結果がどうだったのかを、UI・UX改善の視点からお伝えします。

課題:
トップに掲載した記事「以外」のクリック数を上げたい

「Loftwork magazine」は、もとよりWebサイトへの集客チャネルとしてしっかりとした数字を持っていましたが、二つの課題がありました。

課題の一つ目は「1番上の記事ばかりにクリックが集中してしまう」という点でした。編集チームとしては、トップに掲載したもの以外にもできるだけたくさんのコンテンツを見て欲しいのですが、なかなかクリックを誘発できない。コンテンツによっては、稀に2番目以降のクリック数が大きく伸びることもありましたが、とはいえほとんどのケースで、メルマガのトップに掲載された記事が「最強」で、他のコンテンツがなかなかクリックされづらかったのです。

二つ目は、「掲載位置が下に行くにつれて、クリック数がだんだん減ってしまう」こと。コンテンツの内容如何に関わらず、全体の傾向として下に位置するコンテンツほどクリック数を獲得する上で不利になってしまうことが課題でした。

こうした状況により、コンテンツやイベントに集客したい担当者にとっては、メルマガのどの位置に掲載されるかが重要視されていました。ときには社内から、「私のプロジェクトの記事(イベント情報)をトップに掲載してほしい」というリクエストがくることも。しかし、どのコンテンツをトップに載せるかは、毎回マーケティングの戦略や計画に沿って決めているため、社内からの要望に応えることは難しい。

そのため、今回のリニューアルでは、トップ以外の場所にあるコンテンツのクリック数を上げることと同時に、メルマガ全体のクリック数をバランス良く分布させることを主眼において実施しました。

結果:
リニューアルして、クリック数が1.6倍に増えた!

結論から先にお伝えすると、数字が改善しました!

1番上の掲載記事以外の記事の平均クリック数は、リニューアル前と比較して約1.6倍に増えました。合計のクリック数も中央値も同様に1.6倍です。また、「クリック数をバランスを良く分布させたい」という課題に関しても数値が改善されました。

こうした改善施策は、やったからといって必ず数値が改善される訳では無いので、担当者として、この結果はとても嬉しかったです。
(ここで、1.6倍って多いの…?と疑問に思う方もいるかもしれません。補足しておくと、UI・UX改善施策に対して安定して1.6倍の数値結果が出続けることは珍しく、今回のリニューアルの効果が大きかったことを実感しています。同じような仕事をしている方には、きっと伝わるはず…!)

変化した数字1:
1番上の記事以外のクリック数増加

一つ目の課題だった「1番上の記事ばかりにクリックが集中してしまう」について、どのように数値が改善したかを紹介します。

下のグラフは、リニューアル以前・以後、それぞれ15号分の内、トップ以外に掲載したコンテンツのクリック数のヒストグラムです。左の青がリニューアル前、右のピンクがリニューアル後の数値を表しています。

クリック数に応じて13の階級を設定し(X軸)、各階級に該当するコンテンツがいくつあるのか(Y軸)を示しています。
横軸(X軸)のクリック数階級は、左に行くほど数値が小さく、右に行くほど大きくなります。(詳細の数値は伏せています)
階級が低い方の数値が高いと「クリック数が少ない記事が多い」階級が高い方の数値が高くなると「クリック数が高い記事が多い」といったような見方です。

グラフの画像:リニューアル前15号分のクリック数分布
リニューアル前15号分のクリック数分布
グラフの画像:リニューアル後15号分のクリック数分布
リニューアル後15号分のクリック数分布

リニューアル以前の状態を示す青いグラフを見ると、クリックされた回数がより少ない左側の2つ目と3つ目の階級が突出して高い、つまり、クリック数が少ないコンテンツの数が多いと言えます。

今回、メルマガをリニューアルした結果として、以下のような変化が見られました。

  1. 最もクリック数が低い階級1,2に該当する記事の数が減った。特に、数値が最も低い階級に該当するコンテンツの数は3分の1以下になった。2つ目に数値が低いコンテンツも、リニューアル前の6割程度まで減少している。
  2. 階級4以降の階級に該当する記事数が全体的に増加した。特に、階級4については1.4倍、階級5はおよそ3.6倍まで、該当するコンテンツの数が増えた。
  3. リニューアル以前には見られなかった、クリック数がより多い階級の記事がいくつか発生した。

なぜ、今回のリニューアルによって数字が改善できたのか。以下で、UI・UXの改善に向けた仮説の設定と、その改善ポイントを解説します。

変化した数字2:
掲載位置に依存せずにクリック数が分布する

次に、二つ目の課題「掲載位置が下に行くにつれて、クリック数がだんだん減ってしまう」についての改善結果を説明します。

下のグラフは、リニューアル以前・以後、それぞれ15号分のうち、掲載位置が2~7番目の記事のクリック数合計を100としたときの、内訳です。

グラフ画像:リニューアル前15号分の掲載位置が2~7番目の記事のクリック数割合
リニューアル前15号分の掲載位置が2~7番目の記事のクリック数割合
グラフ画像:リニューアル前15号分の掲載位置が2~7番目の記事のクリック数割合
リニューアル後15号分の掲載位置が2~7番目の記事のクリック数割合

掲載2番目の割合が減り(29.2%→23.0%)、リニューアル後は、掲載3,4,5番目の割合がほとんどおなじになっていることがわかります。特に5番目の記事は、4番目よりも僅かですが、数字が高くなっています。

この結果から、「掲載位置が下に行くにつれて、クリック数がだんだん減ってしまう」という課題に対しても改善がみられたとわかりました。

リニューアルの方針は
「読者が求めるコンテンツによりリーチしやすくする」こと

今回のメルマガリニューアルで最も重要視したのは、読者がメルマガを開封してから、いかにスムーズに、読者自身にとって「関係がありそう」あるいは「興味がある」と思うコンテンツにリーチできるか?です。

それぞれ、具体的なポイントに絞ってビフォア&アフターをひとつずつ紹介していきます。

メルマガリニューアル、3つのポイント

  1. 大見出しではコンテンツの種別ではなく、「テーマ」を見せる
  2. 気になるテーマのコンテンツへ直接ジャンプできる、アンカーリンクの設置
  3. 情報のボリュームを絞り、一つひとつのコンテンツを立たせる

ポイント1:
大見出しではコンテンツの種別ではなく、「テーマ」を見せる

リニューアル以前は、「EVENT」「PROJECT」といった、いわゆるコンテンツの「種別」を示す大見出しをつけていました。しかし、このUIだと、読者が自分にとって関心のあるコンテンツかどうかを認識するのに、見出しや本文を読み込む必要がありました。

一方で、読者がポータルサイト等のさまざまなコンテンツが存在するWebサイトで、最新情報やTopに掲載されてコンテンツ以外を探す場合は、読者自身が関心のあるキーワードやテーマからコンテンツを探すことが多いはずです。例えば、「ファッションのトレンドについて知りたい」「おすすめの映画の情報について知りたい」等。

ロフトワークのWebサイトも、近年、まるでメディアサイトのように循環型経済や新規事業開発、トランジションデザイン、アートといった、多種多様なコンテンツを扱うようになりました。「イベント情報(EVENT)」や「プロジェクト事例(PROJECT)」といった、コンテンツの種別ごとに最新情報を並べていくだけでは、さまざまニーズを持った読者に向けてコンテンツを適切に届けることは難しいのではないか、と考えました。

そこで、興味のあるテーマやキーワードをひと目でキャッチアップできるように、大見出しの考え方を抜本的に見直しました。

画像:以前のメルマガの見出しデザイン
リニューアル前のメルマガの見出し
画像:以後のメルマガの見出しデザイン
リニューアル後のメルマガの見出し

これまで、「EVENT」「PROJECT」などのコンテンツの種別によって分類されていたコンテンツを、例えば「循環型経済とデザイン」「事業開発とデザイン」など、コンテンツの中身を一段抽象化したテーマによって分類する方針に変更しました。これによって、読者がその号のメルマガ全体を見渡しながら、自分の興味・関心軸でコンテンツを選んでクリックしやすくなりました。

ポイント2:
気になるテーマのコンテンツへ直接ジャンプできる、アンカーリンクの追加

画像:アンカーリンクのついたメルマガのデザイン
アンカーリンクのついたリニューアル後のメルマガ

大見出し改善に加えて設置したのが、メルマガ冒頭のアンカーリンクです。メルマガは一定の長さがあるコンテンツなので、下までスクロールしないとどんな記事が掲載されているのかわかりません。忙しい読者でも、ファーストビューの時点でどのようなコンテンツが掲載されているのかをキャッチアップできるように、インデックスとして大見出しを一覧化し、かつ関心のあるコンテンツにそのままジャンプできるアンカーリンクを取り入れました。

大見出しの方針変更とアンカーリンクの追加。2つの改善によって、数値にも変化が現れました。リニューアル以前は上から順にコンテンツのクリック数が減少していましたが、リニューアル後は、メルマガの後半に掲載したコンテンツでもテーマと内容によって十分数値が伸びることを確認できました。

ポイント3:
情報のボリュームを絞り、一つひとつのコンテンツを立たせる

リニューアル以前は、すべてのコンテンツに170〜200字の本文テキストがありました。これらのテキストはWebサイトのコンテンツを要約しているため、メディアとして一定の読み応えがあること、またWebサイトまで行かなくてもメルマガだけである程度内容をキャッチアップできるという点では、以前のUIにも一定の利便性がありました。

しかし、改めて見てみると一覧性が弱いこと、また前述の通り、中身を読み込まないと内容をキャッチアップしづらいことは確かです。また、メルマガだけで内容を把握できる反面、読者をWebサイトへ誘導しにくくなってしまうというデメリットもありました。

そこで、今回のリニューアルでは思い切って本文テキストを大幅にカットしました。特に注目してほしいトップ掲載コンテンツのみ従来通りのボリュームですが、説明がないとわかりづらいプロジェクト事例記事や、一部のイベント情報のみ本文を入れ、それ以外のコンテンツのテキスト要素を見出しコピーとタグのみに絞りました。また、本文を入れる場合も100文字以内と、テキストの量を大きく減らしています。さらに、一つひとつのコンテンツが引き立つように、テキスト要素と画像の画角やレイアウトを工夫しました。

すべてに本文を掲載していたリニューアル前のメルマガ
本文を大幅カットしたリニューアル後のメルマガ

まとめ

今回のリニューアルで大切にしたのは、Loftworkのメルマガを通じて、読者により良い体験を提供することと、求められている情報をより適切に届けることです。メルマガを通して読者とのより良い関係を築いた先にこそ、私たちが目指すCVがあるはず、という想いの中でリニューアルを進めていきました。

リニューアルに着手したきっかけこそ、数値改善を目指すものでしたが、自分たちが達成したい目的だけにとらわれるのではなく、読者の目線に立って真摯に改善の道筋を模索した結果として数値の改善がついてきたのではないか、と感じています。今回のリニューアルを通して、こうした体験価値の向上に向けたプロセスをチームのメンバーみんなで経験できたことで、多くの学びを得ました。

シリーズ:Webサイト運用の道具箱

普段、プロジェクトなどの情報発信の裏方として活動している「ロフトワークのWeb担当」がどんな仕事をしているのか、どうやってコミュニケーションを支えているのか。ロフトワークのWeb担当者が、Tipsや小噺的なエピソードをご紹介します。

Keywords

Next Contents

街の緑、食品ざんさ……都市の「分解」を可視化する。
「分解可能性都市」展示レポート