数年に1度のビッグニュース当日、会社HPのリニューアルが完成しなかった...
2020年12月9日
10:00 プレスリリース配信まであと1時間
10:22 新しくした会社HPに最後(のはずだった)ホットフィックスをデプロイ
10:58 重要なページにリンク切れがあることが判明。緊急対応
11:05 すでに報道各社にはプレスが配信された。しかし会社HPにはまだ未修正が残る
11:18 SNSでの告知直前、しかしOGP画像が適切に表示されない
11:21 すべて修正完了。当初予定時刻から21分遅れとなった。
この記事は、iCARE Advent Calendar 2020の14日目の記事です。
きっかけは、資金調達。
ことの始まりは、私が所属するiCARE社がシリーズDラウンドで大型の資金調達を実施したこと。
そうタイトルにある「数年に1度のビッグイベント」がこの資金調達。スタートアップにとって資金調達に関わるイベントは超重要であることは間違いない。
特に採用の強化という面では、数少ない超強力イベントです。
ならば、資金調達のニュース配信を機に会社HPをリニューアルしよう!と取り組み始めたものの、結果的にニュース配信当日になっていくつもの不具合が発覚し、冒頭のような冷や汗をかく事態におちいってしまったのです。
「もうこんな失敗はしたくない」
「だけど、また同じことを繰り返してしまう不安はある」
そこで、タイミングよくAdvent Calendarの順番が回ってきたので、ここに失敗を防ぐためのチェックリストを書いておきます。未来の自分へのクリスマスプレゼントです。
会社HPリニューアルのプロジェクト概要
まず今回のリニューアルにあたっては、制作会社への外部委託は行わずすべてインハウスで実施しました。また制作するチームも、弊社開発部ではなく(私が管轄する)マーケティングチーム主導で行いました。
なぜマーケティングチームがHP制作を?
iCAREでは、パブリックに公開しているWEBサイトが3つあります。
1. 会社HP(https://www.icare.jpn.com)
2. サービスサイト(https://www.carely.jp)
3. Carelyユーザー向けヘルプセンター
※ CarelyはiCAREが開発・提供しているクラウド型健康管理システムです。
実は3つともマーケティングチームが制作・管理しています。というのも、いづれのWEBサイトも「Carelyを売る」ことが第一の目的だからです。
そして私自身がWordPressでのテーマ制作の経験があり、WEBサイト制作についてはインフラ〜フロントまで一通りの知見があったから。
しかし、この「WordPressなら自信がある」という自惚れが今回の失敗を招くことになるのです。。。(もう二度と自信があるなんて言えません)
もちろん本来業務の片手間に進むプロジェクト
当たり前ですが、マーケティングチームはWEB制作ばかりをやっているわけではありません。たとえばこのあたりが本来業務です。
・WEB広告の運用
・サービスサイトのLPO
・ウェブセミナーの開催
・オンラインカンファレンスへの登壇
・ホワイトペーパーの作成
・ニュース、プレス配信
・取材依頼
・メルマガ配信
・etc...
これら本来業務のかたわらで進むプロジェクトですから、スケジュールは徐々に後ろ倒しになっていきます。
プロジェクト、と大層に言っていますがアサインされているメンバーは二人。私とデザイナーだけ。ワイヤー作成やコピーライティング、PHPが関わる実装は私がするしかない脆弱プロジェクトでしたので、マーケティング業務を進めている間はWEB制作は動きません。
当初制作予定だったページ数を減らし、こだわったデザインをあきらめ、それでも間に合わなさそうなので、ニュース配信3日前からは残業が続く。
そう、この残業も失敗の原因だった。夜遅くに実装すればミスが発生しやすくなることなんて、過去の経験から分かっていたことなのに同じ失敗を繰り返してしまったのです。
リニューアル失敗、を防ぐためのチェックリスト
自身の制作スキルへの過信と、スケジュール遅れによる残業。
なぜ、今回の会社HPリニューアルが失敗したのか。大きく理由をあげればこの2つです。過信と残業。
しかし、人の後悔という想いは長く続きません。
気づけばこの失敗も「そんなことあったねーハハッ」と笑い話にしてしまうでしょう。そして同じ失敗をまた繰り返してしまう。
そんなことが起きないように、以下にHPリニューアル作業における失敗ポイントを回避するチェックリストを記しておきます。未来の私よ、このチェックリストのことは忘れずに覚えておくように。
チェックその1:スケジュールとメンバーアサイン
□ ニュース前日に完成すれば大丈夫!はすでにアウト
□ いざとなれば自分の工数を割けば間にあう!はすでにアウト
□ 本来業務を整理してから取り組み始めるべし
□ 自分がやったほうが早い!は絶対に遅くなる
□ 昔できたから、今回もできる!そんな保証はどこにもない
チェックその2:情報設計とコンテンツ
□ いつもの癖でPCファーストで作るな。時代はモバイルファーストだ。
(BtoBサイトの場合、いまだにモバイル率は3〜4割程度である)
□ グローバルナビゲーションに英語を使うな。読者の99.2%は日本人だ。
□ GoogleAnalyticsで流入数上位のページを洗い出せ。SEO的に重要だ。
□ GoogleAnalyticsで離脱数上位のページを洗い出せ。不要なら捨てろ。
□ Call to Actionを設置しろ。常に見えるように設置しろ。
□ ホームのファーストビューでは、ニュースが見えるようにしろ。
□ ホームには自動更新されるコンテンツを多数配置しろ。
チェックその3:デザイン
□ デザインができたら一番に経営陣に見せること。絶対に指摘がはいる。
□ ホームのヒーローエリアは凝りすぎるな。シンプルに写真1枚でOK。
□ 多様なレスポンシブを考慮しよう。特に横100%デザインは難しいぞ。
□ ちょっとしたアニメーションを含めよう。イケてる風になるぞ。
□ 見出しは大きく。もっと大きく。
□ ささいな明度の違い、Macで見えてもWindowsでは見えないぞ。
□ 不要なアイコンやイラストは載せるな。いさぎよく空白をつくろう。
□ 迷ったら写真に頼れ。iCAREには豊富な写真素材がある。
(常日頃から写真撮影しておくことを絶対におすすめします。)
チェックその4:コーディング / WordPress
□ 忘れがちだけど404ページ、用意しとけ。
□ テーマファイルのコピーは危険。デフォルト状態から作り始めろ。
□ wp-config.phpではサーバー変数を利用しろ。デプロイ時に焦るぞ。
□ カスタム投稿タイプの移行には、Really Simple CSV ImporterとWP CSV Exporterの組み合わせ。
□ SEO系プラグインは最後まで裏切る。最後まで信じず、確認しよう。
□ パーマリンクはなるべくデフォルト設定のまま。いじりすぎると移行が大変だ。
□ WordPress、マイナーバージョン違いでも関数エラー起きるから事前に揃えておけ。
□ メディア(画像類)はS3などストレージサービスに保管しておけ。
□ なんでもかんでもfunctions.phpに書くな。
□ ampライブラリが便利。jQuery使うぐらいなら、ampをまず検討せよ。
チェックその5:デプロイ / ニュース当日
□ IEチェックしたか?絶対に崩れてるぞ、特にflexboxに注意しな。
□ デプロイにどれくらい時間がかかるか事前に計測しておこう。直前で焦る。
□ OGPをチェックしよう。今回のリニューアルでもっとも沼にはまった。
□ 前日の残業は禁止。絶対に設定をミスする。
□ 主要ページのtitleタグを見直せ。絶対に間違ってるから。
□ フォーム類の動作チェック。ここまでで絶対に忘れてるから、今やれ。
□ 配信ニュースのリンクに解析用パラメーターつけた?(utm_***系)
□ もう一度スマホでも動作確認しよう。WiFiではなくモバイル回線でチェックだ。
□ あらためて言うが、過信と残業は禁物だ。謙虚に、誠実に、リニューアルプロジェクトに向き合え。
さいごに余談を
懺悔しておくと、今こうして書いている記事自体もiCARE Advent Calendar 2020の投稿当日の20:39になっている。ギリギリです。
つい1週間前にギリギリなスケジュールでの危険性を身に染みて知っているはずなのに、気付いたらまた過信と残業によって書かれた記事を世に出そうとしている。
こうして人は後悔と失敗を繰り返してしまう。しかし、未来の私がもう一度この記事を読んでくれたときには、なんとか苦い後悔の味を思い出して、近い未来の失敗を回避してくれるかもしれない。
そう願いながら、ここらで筆をおいておきましょう。
明日の@shogodenによる「RailsでSidekiqを使う際に気をつけたいこと」を楽しみに!それではまた。