【BOOOON制作後記】第2回 TOPページ編

boooon-type (3)

こんにちは。営業部の白鳥です。

前回BOOOONの設立理由やコラム作成の注意点などをご紹介しました。
今回は、TOPページ制作に関して苦労した点や気をつけた点をお話します。

TOPページはカスタム

メディア制作は、弊社ではmitecoが先行していました。webサイトのデザインを見ると、miteocはTOPページがコラム一覧(ギャラリー型)になっています。

miteco1

miteco2

ただ、記事を読まれることを最大の目的にしているmitecoと違い、BOOOONはライターさんからの応募が目的です。

BOOOONのように一定のコンバージョンをゴールにするサイトの最も理想的な形は、TOPページから応募してもらうことでしょう。応募に直接つながる、訴求力のあるTOPページを作る必要がありました。

そのため、BOOOONで使用しているWordpressテーマのTOPページは元々ギャラリー型でしたが、現在のようなランディングページ型にカスタムしてもらいました。

元々のデザイン(ハミングバード)
http://demo-hummingbird.open-cage.com/

BOOOON
http://boooon.net/

TOPページを作る際の流れ

TOPページは以下の流れで制作しました。

1.ライターさんの悩み・ベネフィットの洗い出し
2.文章の執筆
3.TOPページに使用する画像の用意
4.ライターさんへ体験談の執筆依頼
5.最終調整

1.悩み、ベネフィットの洗い出し

BOOOON制作開始時点で「既に弊社の提携ライターとして活躍している人の多い、主婦層をターゲットにする」という大枠だけは決まっていたので、ここから細かな部分を詰めていくことにしました。

まず、文章を執筆する前に着手したのが、現在BOOOONのトップ序盤に掲載されている「主婦層の悩み」と、体験談の上にある「ベネフィット」の部分の洗い出しです。

BOOOON1
※「主婦層の悩み」

BOOOON2
※「ベネフィット」

ここがTOPページの中で最も重要な部分なので、はじめに悩みとベネフィットに何を書くのかを決めておいてから、その他の部分を肉付けしていくという形をとりました。

具体的には、検索で統計データなどを確認して、主婦の方がどういった生活を送っているのか、どんなことに悩んでいるのかを洗い出します。そして、リサーチで分かった主婦の方の悩みを解消するのに、webライターという仕事がどのように役立つのかを考えます。

それぞれ箇条書きにして、関連付けが弱いもの、主婦の方の気持ちを代弁できていないものなどは消していきました。後述しますが、文章は極力短くまとめたかったこともあり、最終的に悩み4項目・ベネフィット7項目という比率になりました。

2.文章の執筆

次に文章の執筆に入りました。執筆の際に注意したのは、TOPページの文章を長くしすぎないようにすることです。

LPは基本長いものが多く、文章メインのものだと5,000文字や10,000文字に達するものもあります。

しかし、私の経験ですが、文章は長ければ長いほど読み手に体力を要求するものです。ターゲットが細切れの時間しか作れない主婦の方ということも考えると、長文は不親切ではないかと感じました。

そのため、極力無駄を省き、伝わる範囲でできるだけ簡潔に、ひとつひとつの説明をまとめています。

また、文章のテイストも気をつかった点のひとつです。私は普段硬めのテイストを使った記事を書くことが多いのですが、BOOOONに関しては口語体をかなり混ぜ込んだ親しみやすいテイストを心がけており、できる限り想定読者に寄り添った表現・言葉選びをするようにしています。

ちなみにペルソナの微妙な違いに合わせて、2案を作りました。代表や同僚の意見も聞きながら、今のものに決まったという具合です。

本来であればA・Bテストなどをした方がよかったと思いますが、制作開始直後に1ヵ月ほどのロスが起きていたためそこまで気が回らず、今回は実施していません。これはBOOOON制作時の反省点および今後の課題です。

ただ、滞在時間は3分56秒・CVRは4.3%と、現状はある程度いい結果が出ているので、もうしばらく様子を見ていこうと思っています。

3.画像の用意

フリー素材は便利ですが、モデルさんの画像を多用すると、「どこかで見たことがある」画像が大量にまぎれてサイトが安っぽくなってしまう可能性がありました。もちろん、予算を掛けられないのですが、少しでもサイトにオリジナリティが欲しい。そのため、TOPページに使っている画像は、ほとんど何かしら加工をしています。

BOOOON3
※冒頭の画像も複数の画像を結合しています

なかでも一番悩んだのは、ベネフィット部分の画像です。端的にその項目の内容を表現してくれる良い画像が全く見つからず、ひたすらフリー素材サイトの画像を漁りました。

最終的に棒人間に吹き出しをつけてしゃべらせるという方法に落ち着いたのは、統一感が欲しかったためです。他のやりようもあったと思いますが、素人っぽさがかえってライターさんからの応募につながっているのでしょうか。

正直なところ画像編集などは全くやったことがなかったので、知識もほとんどありませんでしたが、「それにしてはイメージに近いものができた」とは思っています。ただ、「自分にイラストの知識や技術があれば」とも感じています。

また、画像を色々なツールで編集する中で画質がかなり落ちてしまったので、今後少しずつ改善していく予定です。

さて、TOPページ制作に使用したツールや素材サイトは以下の通りです。何かと便利なものが多いので、参考になればと思います。

吹き出しデザイン
http://fukidesign.com/
⇒色々な種類の吹き出しがあります。現在もコラム用の画像に使わせてもらっています。

いらすとや
http://www.irasutoya.com/search/label/%E6%A3%92%E4%BA%BA%E9%96%93
⇒棒人間のデザインが可愛く、使わせてもらいました。

BAMMER KOUBOU.com
http://www.bannerkoubou.com/photoeditor/stamp_heart
⇒吹き出しをスタンプにするのに利用させてもらいました。

分割結合「あ」
http://www.gigafree.net/tool/connect/bunketsu.html
⇒TOPページの最上段にある画像を結合するのに使用させてもらいました。

Button Maker
http://box.aflat.com/buttonmaker/
⇒問い合わせボタンなどはこのサイトで作成しました。

ぱくたそ
https://www.pakutaso.com/
⇒フリー素材サイトです。おもしろい写真から真面目な写真まで色々あるので便利です。

写真AC
https://www.photo-ac.com/
⇒こちらもフリー素材サイトです。写真の数がかなり豊富なので助かっています。

ちなみにすべて無料です。

4.体験談の執筆依頼

体験談は、こちらからライターさんに声をかけて執筆してもらいました。読者が自分と似た境遇のライターさんを見つけやすいように、できるだけクラスタを分けて依頼しています。

ブーン4

記事内容に関しては、エストリンクスとの関係性やwebライターという仕事に対してバランスよく盛り込んでほしいという気持ちがありました。そのため、大まかな見出しテーマはこちらで提示し、それをライターさん個々にアレンジしてもらうという形にしました。

納品していただいた体験談は私がチェック、細かな部分の編集をしています。修正後の内容をライターさんへ送って最終確認をしてもらい、許諾がとれた体験談から部分的に内容を切り抜いて、TOPページに掲載させてもらいました。

ブーン5

依頼している立場ながら、今でも体験談を読むと感動して少し泣きそうになってしまいます。本当にライターさんに助けてもらっているなぁと感じる次第です。

5.最終調整

体験談をTOPページに差し込んだことで、TOPページの原型はほぼ完成しました。最後に、デザインも含めた細かな部分の最終調整です。

・文字色の調整
・棒人間画像の背景色の調整
・内部リンクの差し込み
・アイテムの配置変更
・h1の文字数調整(一行に収まるように)
・ベネフィット部分の背景色の調整

上記は一例ですが、こういった部分の調整を行っていきました。私の知識だけではどうにもならないこともあり、そういった部分は制作会社さんに要件を伝えて修正してもらいました。特に背景色の変更は、実際に変更してみるとイメージと違うということが多々あり、何度も何度も修正をお願いしてしまい心苦しかったことを覚えています。

そして、最終的に現在の形に落ち着きました。今のところは公開からほぼ手を加えず運営しています。
ただ、運営していく中で少しずつ足りない部分もわかってきたので、時間をかけて微調整をしていければと思っています。

まとめ

今回はBOOOONのTOPページ制作に関してお話ししました。参考になる内容があれば幸いです。

次回は、SNS運用についてお話しします。

ではまた次回。