旧来webサービスをオウンドメディアにして売上2倍 & 契約継続率を10%UPしたって？

## はじめに
はじめまして。筆者はクリエイティブ全般を請け負う中小企業でwebデザイナーをしています。

さて、4月での入社や異動から1ヶ月が経ち、新しい環境に慣れてきた方も多いかと思います。
ここでは筆者の経験談をもとにしたタイトル内容を通じて、今春から（または急に）web担当者に任命された方や新入社員の方などへ、webメディア関連の情報共有をしたいと筆を取ってみました。

今ではオウンドメディアを持つ企業も多くなりましたね。
そのメリットは、ネットで他の諸先輩方が説明してくださっているので割愛しますが、いざ自社で始めて（既にしていたとして）も「言うは易く行うは難し」でしょう。
筆者のような苦労を他の方々が少しでもしないように書いていきたいと思います！
~~（もともとは自分用の備忘録にして残しておきたいと思ったことも執筆理由なのですが）~~

体験談なので自分語りになるかもしれません。ご容赦ください。
あと、長いので時間のある時に興味のある方は読んでいただけると嬉しいです。

想定される対象読者
---
◎ 今春から（または急に）web担当者に任命された方
◎ 新入社員でweb関連の部署に配属となられた方

## 目次
◎ [案件の概要と経緯](#案件の概要と経緯)
◎ [最初に取り組んだこと（スケジュールや方針の決定、技術選定）](#最初に取り組んだことスケジュールや方針の決定技術選定)
◎ [制作時に意識したこと（デザインや機能面の策定）](#制作時に意識したことデザインや機能面の策定)
◎ [新規スタートして3年経過した今（振り返りや反省点）](#新規スタートして3年経過した今振り返りや反省点)
◎ [まとめ](#まとめ)


## 案件の概要と経緯
ことの始まりはコロナ。これにより旧来webサービスの改良に迫られて案件がスタートしました。

そもそも筆者が所属する制作会社は、全国各地・多種多様な業界・業種の経営者のもとを有名タレントが尋ねて対談するインタビュー記事を掲載した経済誌の発行事業に端を発する会社です。
ドットコムバブルがあった2002年ごろからインタビュー記事をwebで閲覧できるサービスを行っており、web上で名刺交換ができるといった（当時としては）独自の特徴も持っていました。

しかし筆者が入社した2015年頃には、制作ベンダーとのコミュニケーションがうまく噛み合わなかったそうで、そこに中小企業でよくある人手不足も重なって運用・保守で現状維持という体制だったのです。
2010年頃にリニューアルしていたそうなのですがデザイン面も古臭く、上記の理由からレスポンシブデザインも当然実装されていませんでした。
こうした状況に、実際にインタビューへ伺う記者らが所属する関連部署（以下、記者陣で表記）や弊社web関係部門の人間を含め、この状況をどうにかしないと……という意識を持っていながら時が過ぎて2020年。
緊急事態宣言により訪問インタビューなどは当然行えず一時的な休刊を余儀なくされました。
その結果、webサービスの存在が改めて再考されることになり、冒頭で説明した状況に至った次第です。

## 最初に取り組んだこと（スケジュールや方針の決定、技術選定）
記者陣の要望は大きく分けて2つありました。
- 掲載／契約料金を2倍にできるようなサービスに改良してほしい
- スマホ対応と動画を載せられるようにしたい

上記を踏まえて、記者陣の統括責任者を交えて案件の詳細を詰めていく打ち合わせを進めていきました。
ちなみに、先立って筆者が旧来サービスの改良を構想して制作していたプロトタイプがあったので、初期段階で目に見える形のものがあったのはスタートダッシュが切れたと実感しています。

打ち合わせにおいて役立ったのは、想定される疑問点や問題、現在と中長期的な状況などを予測して解決策を自分なりに考えておくことでした。
どの会社でもそうでしょうが、基本的に意思決定権を持つような責任者（一般的には部長や工場長など）は多忙です。
相談や報告ひとつにしても<b>「状況説明 → 自分の意見を述べる」</b>を意識すると相手は意思決定をしやすくなるので筆者の体感的にスムーズに進んだように思えました。

<details><summary><font color="red">※「状況説明」に関する補足説明</font></summary><div>

「状況説明」では、相手の理解促進を第一に考えた説明を意識することで論理的思考力が鍛えられたり、見落としていた課題や確認点が見えてきたり、新しいアイデアがひらめいたりすることがあります。
ですから、状況説明前の「説明プロットの構想」など準備段階にある程度の時間をかけるのは個人的には価値があると感じました。

:::note info
あと、大事なのが「相手がクリエイティブ関連のことを何も知らない人間」というくらいの感覚で臨んだほうがスムーズな案件進行につながるかもしれないということです。
これは何も相手を見下すとかいう話ではなく、自分が「さすがにこれくらいは知っているだろう」と無意識のまま話を進めると、その時点でボタンの掛け違いが発生してしまう可能性があるからです。
:::

web関連は使用する技術やサーバー、プログラミング、ドメイン、UI/UX、クラウドなど相関性のある分野が広い上に変化が激しいため認識のズレが特に起こりやすいです。
プロジェクト序盤における<b>「少しの認識のズレ」をスルーして案件を進め、後半やっとそのことに気づく……なんてことになると、誇張抜きに地獄を見る</b>ことになります。

失った時間は決して戻ってきません。人間なのでお互いを100%理解するのは不可能ですが、この認識のズレを少しでも埋めるために話し方・伝え方（コミュニケーション）を工夫するのが大事だと思います。

例えば、ある程度説明を行い一区切り付いたタイミングで「ここまではよろしいでしょうか？」と確認したり、打ち合わせ終了時に「不明点があればメールやチャット、内線でも結構なので気軽に連絡してください」と伝えたりなどです。（後者はその場で質問しづらい方もおられることを想定しての配慮なので状況に応じて付け加えてください）

:::note warn
さらに言うと適度な笑顔と冗談があればなお良しです。タイミングや相手を間違えると大変なことになるので取扱い注意ですが。
とはいえ、かくいう筆者もコミュニケーションはまだまだ未熟で勉強することが多いです。
:::
</div></details>


数度の打ち合わせを通じて下記方針が決まりました。
```
- 掲載／契約料金を2倍とする
- レスポンシブデザイン
- 動画を掲載できる機能を付ける
- 作業効率や将来性に鑑みて旧来の既存サービスを残したまま新たにサービスを立ち上げる
- 旧来サービスで使用頻度の低かった特徴・機能（名刺交換）は省く
- 2020年10月末までには完成させておく（方針決定時は同年5月なので期限は約6ヶ月）
- 提案したプロトタイプに則って制作する
```

上記内容で制作に入っていくことになり、
技術選定については弊社に一任するということだったのでこちらで行いました。
```
* 技術選定
    * WordPress を使用
    * ホスティング先は弊社が既に使っていたXサーバーを使用
```

~~はたして技術選定と呼んでいいのかというシンプルさ、しかも数十分で決まった内容ですが~~ 
時間に追われて適当に決めたわけではありません。

WordPress については世界的なシェア率からセキュリティ面での危惧があったものの、
非エンジニアでも更新・運用できる点とプラグイン（拡張機能）の充実性、サービス継続の信頼性（基幹システムのサービス終了リスクを避けるため）、インタビュー記事の掲載というコンテンツの特徴を加味してデメリットを補って余りあるメリットだと感じました。
加えて、旧来の既存サービスでは制作ベンダーとの意思疎通が一時的に滞って自分たちでうまくコントロールできないという苦い経験がありましたが、WordPress だと扱えるWeb制作会社も多いので、そういった問題を回避できる副次的メリットもありました。

Xサーバーは弊社で従来より使用しており、Xサーバー自身がWordPress を簡単にインストールできる機能を提供してくれていることもあって異論なく採用となりました。

::: note info
デザインも然りですが技術選定でも「なぜ？（そうするのか）」を念頭に、自分の言葉で理由を説明できる状態にしておいたほうが自分も周囲も安心かと思います。
:::


## 制作時に意識したこと（デザインや機能面の策定）
インタビュー記事と動画の掲載だけでは既存料金の2倍は厳しいと考えていました。
そこで、動画だけでなくプレスリリース発信や活用している自社パンフレット／フライヤーなども掲載できるようにしてはどうかと思いつき、「動画・プレスリリース・PRコンテンツ」の掲載を各クライアントが自由に行える専用広告枠を設ける仕様を提案して記者陣にも了承いただけました。

これによりインタビュー記事ではクライアントのソフト面を、専用広告枠では特徴や取り組み、実績などハード面をお伝えいただき、魅力を相乗的に宣伝できる形にしたのです。
それら機能の実現にはカスタムフィールドを使って行うと運用も簡単そうだと感じ、有名プラグインを利用することにしました。

:::note warn
WordPress の特徴に豊富なプラグインがありますが、非公式のプラグインや更新されていない古いプラグインには脆弱性が潜んでいるリスクがあります。WordPress におけるセキュリティリスクの多くはユーザーが追加した（そしてアップデートなど更新を放置した）プラグインに起因するという話もあります。プラグインを新たに使用する際は調べてから採用したほうが無難です。
もちろん、WordPress 本体のアップデートも重要なのは言うまでもありません。
:::

また、弊社経済誌にはインタビュー記事の他に、社会情勢やテクノロジー、アート、映画紹介など様々な分野にまたがった一般コラム記事もありました。
それらもコンテンツとして掲載することで、サイト流入経路の増加を図るとともに、掲載クライアント記事の閲覧数の上昇にもつながるかもしれないと思ったのです。
それに今までずっと埋もれてきた一般コラム記事の有効活用ができるとも感じました。
その時に初めてオウンドメディアとしてのコンセプトがひらめきました。
実際この方針は的中して、一般コラム記事からの流入やサイト回遊率、平均エンゲージメント時間は高く、サイトに貢献してくれています。

コーディングなど開発関連は専門的なので割愛して数点説明すると、
- セキュリティを意識してコーディング時は必要箇所にエスケープ処理を必ず行う（セキュリティ関連のプラグインも導入）
- 拡張性を意識したシンプルなテンプレート構成にして保守性を向上
- 適宜コメントアウトを追加してコードの可読性を高める

次に、デザイン面ではたくさんありますが凝縮すると下記を念頭に制作を進めました。
* デザイン面で意識したこと
    * 掲載クライアントの魅力発信を第一に
    * 幅広い世代を配慮したデザイン（極力テキストで伝える）
    * ストレスを感じないユーザビリティ
    * サイト利用者のニーズに応える配慮

掲載クライアントの魅力発信を第一に
---
ひと目で有名人にインタビューされたことが分かるように各クライアントのコンテンツは、ゲストインタビュアーとの記念写真をサムネイルにしたカード型UIにしました。

一般的なサイトでは、スマホではハンバーガーメニュー、PCではグローバルメニューが上部に配置されていますが、掲載クライアントの魅力を強調したかったのでメニューテキストなどの要素を視界から省くためPCでもハンバーガーメニューを採用しています。
こちらも先程述べた意図と同じく「有名人に取材を受けた」という事実／実績を掲載クライアントがアピールしやすくなるように、と考えたためです。

カード型UIも工夫しました。
例えば、クライアントページをわざわざ表示しなくともインタビュー記事やPRコンテンツを閲覧できるボタンを用意し、動画やプレスリリースはボタンクリックでモーダル表示される機能にして、どこからでも素早く見たい情報を見られるようにしました。

幅広い世代を配慮したデザイン（極力テキストで伝える）
---
弊社経済誌には寺社の住職や宮司、スナックのママさんなど本当に多種多様な業界・業種の、幅広い年齢層の方々が掲載されています。
そのため、普段そこまでwebに慣れ親しんでおられない方々でも使いやすい & 分かりやすいサイトを目指しました。

各クライアントページ内では、インタビュー記事は記事サムネイル画像をクリックで別ウィンドウ表示するようになっているのですが、外部リンクへ飛ぶアイコン（四角のアレ）に誰もが親しんでいるわけではないと想定し「画像クリックで別ウィンドウ表示」とテキストを記述しています。
あと、記事サムネイル画像がクリッカブルであることが分かるようにテキスト要素の下部には逆三角のアイコンを配置しました。

また、一般ユーザー（一般コラム記事からサイト訪問に至ったユーザー）が今見ているサイトはどういったものなのかを手間なく理解できるよう、ヘッダー部のロゴマーク（サイト名）下にサイトの説明文をキャプションサイズで表示しました。

ストレスを感じないユーザビリティ
---
どのコンテンツでもカード型UIを採用し、カテゴリー問わず各コンテンツを明示的に表示することで使い方を感覚的に理解できるような配慮を行いました。
その反動としてサイト全体のデザインは単調となってしまいましたが「情報伝達こそがサイトの存在意義！」との考えで進めました。
配色もキーカラーの藍色や各種ボタン要素以外は極力無彩色で統一するようにしています。
掲載クライアントや一般コラム記事のサムネイル画像で色味が多くなると想定していたからです。

認知負荷が高いとユーザーにしんどい思いをさせてしまいますので、それを極力軽減できるようなシンプルなデザインを大切にしました。

サイト利用者のニーズに応える配慮
---
掲載クライアントの気持ちになってみると、同地域または同業種の存在が気になったりするかもしれない、と思いました。
また、ありがたいことに毎月数十件の新規クライアントにご登録いただいているので自然と自社記事が見つけづらくなってしまいます。
そこで自分の記事または同地域の他企業を見つけやすくするために、キーワード検索のみならず地域や業種別の絞り込み検索も実装しました。
Google Analytics でデータを見てみると、地方一帯で検索されている方もいたりして興味深いです。


## 新規スタートして3年経過した今（振り返りや反省点）
サービス開始から数ヶ月は契約数が旧来サービス比で約2〜3倍の状態が続き、客単価が2倍になったこともあって目に見える形で売上貢献につなげられました。
3年経過した今では、月の新規契約数は落ち着いているものの旧来サービス比では多い状況を維持しており、何より契約更新率を10%向上させることができました。
もちろん引き続き改善や工夫は必要ですが、ひとまず案件は成功だったと実感しています。

振り返りとして、
売上2倍 & 契約継続率を10%UPできた理由は、
- 案件に関わる人たちの認識のズレを極力減らすよう工夫した
- なぜ？（そうするのか）を念頭に選択や動機などの理由付けを意識した
- 自分がユーザー／クライアントになった気持ちで物事を考えた（自分事として捉えた）
- ユーザー像をイメージしたデザインや配慮を大切にした
- 周囲を注視して（オウンドメディアの）コンテンツとして使えそうなネタ元を見つけた（観察力？）

といった部分だったのかなと感じています。

一方、反省点として、
- スケジュール調整の交渉力／折衝能力が不足していた
- 周囲に遠慮して協力を仰がなかった
- 本来コンセプトから決めて進めるべきだった

といった部分を実感しています。

スケジュール調整の交渉力／折衝能力が不足していた
---
これに関しては、記者陣の会社事情の要望に対してうまく交渉できなかった筆者の折衝能力不足が原因だと思います。
不幸中の幸い？で本案件は企画から制作、運用、環境の整備などまで全て筆者一人で進めることが多かったのですが、数人のチームで案件を進める状況を想定すると先方の意見や要望を鵜呑みまたは、その勢いに飲み込まれて流されてしまうのは進捗面や今後の関係性でも支障をきたすリスクが高いと感じます。

逆に「無理です」や「それはできません」などネガティブなことばかり言ってもリスクがあるのでコミュニケーション的に難しい部分ではありますが、「双方の妥結点を見つけて落とし込む」といった考えで冷静に応対できていればスケジュールにゆとりを持たせられたかもしれないと反省しています。

このこと以降、厳しいと感じた場合は「一度検討してみてもよろしいでしょうか？」とお伝えして返答を保留してから「要望の能否を判断及び、できない場合の代替案を考えて提案する」といった姿勢が身につきました。
上記のスタンスは私個人の一例ですが「双方の妥結点を見つけて落とし込む」といった方法を取る場合には役立っている印象です。

:::note warn
役員や代表者など経営者レベルの事情・判断から決めていた内容や方針が大きく覆ることもあります。悔しい思いをする状況もあるかと思いますが、こういった場合は「ぐずぐずしても仕事は溜まっていく一方！」と、前向き？に切り替えて臨んだほうが精神衛生上いいと思います。ここで強く反発したり、抱え込んだりして潰れてしまうのはもったいないです。
:::

周囲に遠慮して協力を仰がなかった
---
自分で進めるほうが圧倒的に早い状況は確かにあるでしょう。忙しそうにされている方々へ成功するのか分からない案件への協力を頼むのは気が引けますし、失敗した時の恐怖や申し訳無さもあります。
でも、アイデア出しといった部分ひとつでも自分ひとりでは限界があります。
筆者には勇気がありませんでしたが、自分から周囲を巻き込んで物事を進めることは、ひとりで成果を出すよりも大きな価値とキャリアにおける学び、成長があると思います。
<font color="#dadada">あと、ひとりで頑張って進めても案件が終わった時の周囲の反応は存外虚しかったりします。これは認知されていないためです。結果は出したけどあまり評価されない、といった悲劇にならないよう注意してください</font>

本来コンセプトから決めて進めるべきだった
---
今回は、認識のズレ回避を意識していたこともあって運良く進んでくれましたが、本来コンセプトは初期段階で決めておく重要事項でしょう。
コンセプトが方針に近いニュアンスを持つ場合もありますし、特にチームで動く際はコンセプトが物事の判断基準のひとつにもなってくれるはずです。
コンセプトを軸にしておくと案件遂行に置いて「本来の目的」を見失いづらくなると思います。


## まとめ
ここまで長文を読んでくださってありがとうございます！
結構当たり前の内容もあったりしたかもしれません。

今まで筆者もネットに溢れる多くの記事・情報に助けていただきながら何とかやってこられたので、ここで記述した内容が少しでもどなたかのお役に立てれば嬉しい限りです。

これからも情報発信を通じて、ネットへ恩返ししたいと思います！