10月28日 深夜

夜の部屋の写真

ボーン

ついに手を動かし始めたようだな。

ボーン・片桐

ウェブライダー 松尾

ああ、ようやくな。

リニューアルの要件定義が決まった日から3日が過ぎた。
その夜もボーン・片桐は現れていた。

ウェブライダー 松尾

お前と夢の中で会うのも、5度目だな。

ボーン

フッ。
今回の要件定義、昔のお前からは出てこないものだったな。

ウェブライダー 松尾

・・・昔の僕・・・?

ボーン

昔のお前は、何もかも100%を目指すという強いこだわりがあった。
“70%の完成度でも良しとする”、そんな言葉、昔のお前からはけっして出てこなかっただろう。

ウェブライダー 松尾

・・・今回、チームのみんなと語り合った中で、サイトというもののあるべき姿に気付いただけのことさ。
まあ、それなりに時間はかかったけどな。

ボーン

70%の完成度を目指すとはいえ、今回のサイトリニューアルはそれなりにハードだ。
リソースの確保が要となるだろう。

ウェブライダー 松尾

・・・ああ。
リソースがないために中途半端になった以前の過ちを繰り返すわけにはいかない。

ボーン

良い言葉を教えておいてやろう。
“知恵の次に絞るのは的”だ。

ウェブライダー 松尾

・・・!
その言葉は・・・?

松尾がボーンに言葉の意味を質(ただ)そうとしたとき、すでにボーンの姿は消えていた。

ウェブライダー 松尾

“知恵の次に絞るのは的”・・・。

次の日

京都オフィス

ウェブライダー 伊藤

うーん・・・。
どう調整しようかな・・・。

ウェブライダーのオフィスで、伊藤の悩む声が響いていた。

悩む伊藤

伊藤は今回のプロジェクトの進行管理を任されていた。
これまでもさまざまなコンサルの現場でスケジュールを調整してきたが、そんな伊藤が、自身の制作したガントチャートを見ながら深く悩んでいた。

ウェブライダー 赤木

・・・伊藤さん、どうされたんですか?

赤木が声をかけた。
この日2人は、担当案件の都合でオフィスに出社していた。

ウェブライダー 伊藤

赤木さん、実はさ・・・。
今回のサイトリニューアルのスケジュールが、どう調整しても厳しいんだよね。

ウェブライダー 赤木

前回のミーティングで藤原さんも心配されてましたよね・・・。

ウェブライダー 伊藤

そうなんだ。
私も要件定義のミーティングのときから不安だったんだけど、やっぱりかなり厳しくて・・・。
まあ、もともと、このリニューアルのプロジェクト自体、かなりの特急スケジュールだったこともあるんだけど・・・。

よかったら、このガントチャートを見てくれる?

ウェブライダー 赤木

はい、見てみます。

ガントチャート

説明しよう!

「ガントチャート」とは、プロジェクトの工程管理に用いられる、いわゆる工程表のことである。
横軸に時間、縦軸に作業内容や担当者情報を記載し、プロジェクトにおける各種作業フローを視覚的に表現するために作成される。
ウェブライダー社のガントチャートでは、各作業に対して「開始予定日」と「終了予定日」、さらには進捗状況がわかるような「進捗率」の表記を用意している。
そうすることで、プロジェクト管理ツールとしての機能も実現しているのだ。

ウェブライダー 赤木

あれっ・・・。
今回、もともとは2ヶ月間でのリニューアルという話でしたよね。
このガントチャートを見ると、制作だけで3ヶ月間。
現状分析や要件定義を合わせると4ヶ月間・・・。

やっぱり、2ヶ月だと厳しかったということですよね?

ウェブライダー 伊藤

そうなんだよね・・・。
というより、正直なところ、3ヶ月あっても厳しいかもしれない。
制作にどうしても時間がかかる計算で・・・。

ウェブライダー 赤木

えっ・・・。

ウェブライダー 伊藤

実は今、当初と事情が変わってて。
サイトリニューアルのプロジェクトが立ち上がった頃、たしかにうちの会社は受注案件の引き合いが減っていた。
でも今は、受注案件の問い合せ件数が回復しつつあって、松尾さんや私のリソースが無くなり始めてる。

ウェブライダー 赤木

ミニリニューアルの効果ですね!

ミニリニューアルしたウェブライダーのサイトのキャプチャ

説明しよう!

実は今回、ウェブライダーの自社サイトのリニューアルを進める中で、旧サイトから新サイトへのつなぎとなる小規模なサイトリニューアルが進められていた。
そのリニューアルは、スライドを用いて情報の要約を並べる「サマライズコンテンツ」の形態をとったシンプルなものだったが、想定していた以上に反応が良く、旧サイトで低迷していた受託案件の依頼が回復傾向にあった。

前回(第4話)のストーリーで復習する

ウェブライダー 伊藤

そう。
ミニリニューアルを実施してから、問い合わせ件数が明らかに戻ってきた。
まあ、以前のサイトにはなかった「資料請求フォーム」を設置した効果もあるかもしれないけど。

ウェブライダー 赤木

ミニリニューアルされた自社サイトをあらためて見てみました。
情報量としてはまだまだ少ないのかもしれませんが、以前の自社サイトと比べると確実に情報量が増えましたね。
しかも、情報がスライド形式でコンパクトにまとまっていて、とても見やすく、私個人としては好印象です。

ウェブライダーサイトのサマライズ型LPのキャプチャ

ウェブライダー 伊藤

私も同感。
今回、一連のディスカッションでわかってきたことは、これまで、うちは自社の価値を情報としてほとんど発信できていなかったってこと。
情報をしっかり発信するだけで、こんなに反応が変わるんだ、ってことにあらためて気付いたよ。
コンサルのお客さまには、情報を出す大切さを伝えておきながら、自社サイトはなおざりになっていたという状態から、ようやく少しだけ脱した感じ・・・。
まさに医者の不養生という言葉の重みを感じるよね・・・。

ウェブライダー 赤木

そうですね・・・!
自分たちのコンサルのアドバイスの価値を身をもって証明できてよかったです・・・。

ウェブライダー 伊藤

うん・・・。
これは、サイトのフルリニューアルに希望がもててきた!

ウェブライダー 伊藤

・・・と喜びたいところなんだけど、さっきの話に戻すね。

さっき「制作が3ヶ月でも終わらないかもしれない」と言ったけど、このサイトマップを見てほしいんだ。
実際、これだけのページをつくらなきゃいけなくて・・・。

サイトマップ

ウェブライダー 赤木

結構なページ数ですよね・・・。
しかも、「70%の完成度でいい」というルールがあっても、うちでは一つひとつの言葉や画像にすごくこだわるので、結構パワーが必要ですよね。

ウェブライダー 伊藤

そうなんだよね。
とにかく、各ページが思っていた以上に重量級。
そして何より、時間もそうだけど、人が足りない。

うちの各メンバーが別々の事業を担当していて忙しいし、外部のメンバーをアサインするにしても、今回はうちのブランドサイトでもあるから、うちの文化や価値観共有のための時間が必要だし・・・。

ウェブライダー 赤木

今回、デザインは誰が担当されるんですか?

ウェブライダー 伊藤

デザインはうちの中山さんにお願いしようと思ってる。
ただ、中山さんも今、別のプロジェクトで忙しくて、そのプロジェクトの合間を縫っての参加になるから、デザインの方向性はある程度、私のほうで決めておく必要がある。

ウェブライダー 赤木

それは大変ですね・・・。

話す伊藤と赤木

ウェブライダー 伊藤

ちなみに、今回のサイトリニューアルは、基本的には「全員野球」で乗り越えたいと思ってる。
みんな、担当している事業で忙しいとは思うのだけれど、ここまでみんなで一丸となって進んできたし、各事業の詳細ページに関しては、担当している各人に制作を引っ張っていってもらうつもり。

実際に手を動かせないとしても、掲載する情報に関しては、各事業の担当者が最も深い情報をもっているから、その情報の「見える化」はお願いしたい。

今回、各詳細ページに掲載する内容は「サマライズコンテンツ」をベースにするから、デザインやコーディングができない人でも、スライドの作成とプレゼン風のトークスクリプトを用意してもらえればOK。

あとは中山さんがしっかり整えてくれるはず!

ウェブライダー 赤木

ただ、皆さんの中には、あまりプレゼンの経験がない人もいますから、どんなスライドやトークスクリプトが上がってくるかは未知数ですね・・・。

ウェブライダー 伊藤

そうなんだよね・・・。

ウェブライダー 伊藤

あとは、何度も言うとおり、工数の調整が厳しいんだよね・・・。
私もコンサルティングの業務があるし、今後増えてくる案件にも対応しないといけない。

受注案件がまた増えてきたのは本当にありがたいんだけど、今回のリニューアルのタイミングを逃してしまうと、次にリニューアルを進められるのはいつになるかわからない・・・。

ウェブライダー 赤木

・・・。

ウェブライダー 松尾

伊藤さん、優先度をつけてみよう!

そのとき、伊藤に向けて、松尾が声をかけた。

この日、松尾も京都オフィスに出社しており、別室でのビデオ会議から執務室へ戻ってきたところだった。
そして、深刻な顔で会話をしていた伊藤と赤木に向けて、ホワイトボードに書かれていた「70%」という数字を指差していた。

ホワイトボードを指す松尾

ウェブライダー 伊藤

あ、松尾さん、おつかれさまです!

ウェブライダー 赤木

ビデオ会議、今日は長めでしたね。

ウェブライダー 松尾

そうなんだ。
今度始まる案件について打ち合わせしていたら、どんどん盛り上がってしまって・・・。

ウェブライダー 松尾

それにしても、案件の数が戻り始めていてホッとしているよ。
かなりの突貫工事ではあったけれど、サマライズコンテンツを用いたミニリニューアルをおこなってよかった。
自社の価値につながる情報を出すことの大切さを、あらためて感じるね。

ウェブライダー 松尾

・・・と、それはさておき・・・。

伊藤さん!
サイトリニューアルのスケジュール調整の件で苦労をかけていて、ほんっとうに申し訳ない。

ウェブライダー 伊藤

あ、いえいえ、大丈夫です。
スケジュール調整には慣れているので。

・・・ただ、制作期間なんですが、どれだけ短く見積もっても3ヶ月は必要になりそうなんです。
当初、1ヶ月を予定していたんですが、みんなのリソースを考えると、どうしても3ヶ月は必要になりそうで・・・。

とはいえ、正直なところ、この3ヶ月という期間でも、相当ギリギリのスケジュールになりそうです・・・。

ウェブライダー 松尾

・・・なるほど。
僕も内心「工数的に大丈夫かな・・・」と思っていたのだけど、やっぱり厳しいか・・・。

最初のキックオフミーティングで気合いが入りすぎて、かなり高い目標を提示しすぎた感はあるな・・・。

ウェブライダー 伊藤

・・・そうですね。

詳細ページでサマライズコンテンツを用いると仮定しても、サマライズコンテンツはプレゼンテーション設計ありきのコンテンツ。

従来のページ制作よりも制作負荷が下がるように思えて、実はスライドの内容や、プレゼンテーションの内容を考えるのに時間がかかります。
各事業部において、プレゼンに慣れているメンバーとそうでないメンバーでは、サマライズコンテンツの制作時間に大きなズレが出ると思われます。

ウェブライダー 松尾

たしかに・・・。

ウェブライダー 伊藤

また、「お客さまの声」に関しては、オンライン取材に応じてくださるお客さまのアポ取りと、取材のための準備が必要です。
取材後も、文字起こしから原稿作成、記事内に掲載する写真をお客さまからお借りするといったフローが入ります。

そういったことを考えると、「お客さまの声」はとくに重めのコンテンツです。

ウェブライダー 松尾

・・・うーむ。

ウェブライダー 松尾

たとえばなんだけど、今回のサイトリニューアルを「第一弾」「第二弾」という2つのフェーズに分けてみるのはどうかな?

ウェブライダー 赤木

「第一弾」と「第二弾」・・・!

ウェブライダー 松尾

そう。
約3ヶ月後に公開するサイトが「第一弾」のサイト。
その第一弾では、公開の優先度が高いページをまず公開する。
で、後日、第二弾で残りのページを公開する・・・と。

ウェブライダー 伊藤

なるほど、そのように調整してもいいのであれば、不安は取り除けそうです。

ウェブライダー 松尾

前回みんなに共有した「70%の完成」という目標の定義を、ページの質だけでなく、ページの量にも適用する感じだね。

使えるリソースが厳しいときは、ムリは禁物。
ムリに事を進めると、たいてい本質を見失う。

大局観をもって臨機応変に進めたいと思う。

ウェブライダー 松尾

そもそも、前回みんなに伝えたとおり、今度のサイトは「更新・管理のしやすさ」を重視する。
だから、ある程度の形でサイトを公開したあとは、みんなでどんどん更新していこう。

今回のプロジェクトでは、みんなと一緒にウェブライダーという会社の方向性と向き合えたから、更新作業も思いきって進められるはず。

サイト制作のルール 1.70%の完成度でも良しとする(ただし、完成度が求められる箇所は除く) 2.更新・管理のしやすさを重視する

ウェブライダー 伊藤

そう言っていただけると、肩の荷が下ります。

ウェブライダー 松尾

よかった。
今回、伊藤さんがガントチャートで工数の見える化をしてくれたおかげで、どのページにどれくらいの制作工数がかかりそうかが見えてきた。
このガントチャートを参考にしながら、つくるべきページの優先度を決めていこう。

そうして、松尾、伊藤、赤木の3名は、制作するページの優先度を決めるべくディスカッションを重ねた。

3時間後

ウェブライダー 松尾

よし、優先度が整理できた。

ウェブライダー 松尾

ではあらためて、各ページの優先度と役割について説明するね。
優先度が高いものを「1」として、4段階で優先度を決めてみたよ。

各ページに関する目的や優先度が書かれた表

■今回制作するページの詳細と優先度

優先度1

  • トップページ

    1.ひと目でウェブライダーが提供しているソリューションを理解できるページとして

    2.サイト内の各ページへのナビゲーションを用意することで、ウェブライダーという会社や提供しているソリューションをざっくりと知ってもらう

    3.最悪、このトップページだけしか見られない可能性もあると考え、このトップページだけである程度ウェブライダーのことがわかるようにする

  • お問い合わせフォーム

    ウェブライダーへお問い合わせしていただくためのフォーム

  • 資料ダウンロード

    1.ウェブライダーという会社の紹介や提供するソリューションについて網羅的に知ってもらうためのPDF(通称:ホワイトペーパー)がダウンロードできるフォーム

    2.メールアドレスの入力だけでダウンロードできるようにする

  • 会社案内トップ

    1.ウェブライダーという会社の情報をざっくりと知ってもらう

    2.会社案内の各詳細ページへのナビゲーションとして

  • 会社案内 > 会社概要

    ウェブライダーという会社の細かな情報を伝える(代表取締役の名前、本社住所、資本金など)

  • 会社案内 > アクセスマップ

    ウェブライダーのオフィスの場所と最寄り駅の情報などを伝える

  • プライバシーポリシー

    個人情報保護の方針について記載


優先度2

  • サービス紹介トップ

    1.ウェブライダーが手がけるサービスに共通して存在するポリシーについて語る

    2.ウェブライダーが手がける各サービスの詳細ページへのナビゲーション

  • サービス紹介 > 詳細

    1.ウェブライダーが手がける各サービスについて、個別に詳細に語る

    2.サマライズコンテンツをベースとし、プレゼンテーション風の演出をおこない、スライドの設置を軸としたデザインに

    3.スライドとスライドの間をテキスト情報で補う

    4.機能的価値だけでなく、情緒的価値の訴求をおこなうため、メンバーが各サービスに対してどう向き合っているのか、その思いが伝わるような情報を掲載する(テキスト、写真、動画、音声など)

    5.外部にすでにLP(ランディングページ)が存在しているページに関しては、第一弾のサイト公開では、外部LPへリンクを飛ばす

  • 事例紹介トップ

    ウェブライダーが過去に手がけてきた案件について、カテゴリを整理しながら、それぞれの事例の概要を一覧で紹介する

  • 事例紹介 > 詳細

    1.ウェブライダーが過去に手がけてきた案件について、細かな事例を含めて紹介(サイト制作事例、コンテンツ制作事例、コンサルティング事例、SNS運用事例、イベントの企画事例、ワークショップの開催事例など)

    2.それぞれの事例において、どんな課題をどんなソリューションで解決し、どんな成果を挙げてきたのかを詳細に書く

  • ウェブライダーの強み

    1.ウェブライダーという会社が、どんな強みをもち、その強みをどう磨いているのかを伝える

    2.他社と比較し過ぎないよう、他社との違いを伝える

  • 会社案内 >Web rider MISSION

    ウェブライダーという会社の「ビジョン・ミッション・バリュー」「パーパス」について伝え、それらが生まれた経緯についても取り上げる

  • 会社案内 > メンバー紹介

    ウェブライダーのメンバーを紹介し、人となりを知ってもらうことで、安心感と信頼感を訴求する

  • 会社案内 > オフィス&スタジオ紹介

    ウェブライダーのオフィスやスタジオの写真を見てもらい、オフィスの雰囲気からウェブライダーらしさを感じてもらう

  • 会社案内 > 沿革

    ウェブライダーという会社が、今日に至るまでどういった成長を遂げてきたのか、そのプロセスを時系列で伝える


優先度3

  • お客さまの声

    1.ウェブライダーのお客さまにインタビューさせてもらい、ウェブライダーの魅力をお客さま目線で語ってもらう

    2.お客さまとの良好な関係を知っていただくことで、ウェブライダーと具体的に仕事をするイメージを高めてもらう

  • ブログ

    1.ウェブライダーの日常を伝えることで、情緒的価値を伝える

    2.ウェブライダーが体系化した「SEOノウハウ」や「ライティングノウハウ」などを発信し、ウェブライダーにまだ関心がない人たちを集客し、ウェブライダーの存在を知ってもらう


優先度4

  • 採用情報

    ウェブライダーの採用情報を掲載する(現在、急ぎの採用をしていないため、制作の優先度は後回し)

ウェブライダー 松尾

この表にも書いたとおり、優先度3・4に該当する次の3つのコンテンツは第一弾では用意せず、第二弾で制作しよう。

■第二弾で制作するページ

  1. お客さまの声
  2. 自社ブログ
  3. 採用情報
ウェブライダー 松尾

また、サービス紹介ページの中にある「自社プロダクト」のページについては、すでに各プロダクトごとのLP(ランディングページ)が存在しているので、スケジュールが厳しそうであれば、そのLPへのリンクを設置する形で対応しようと思う。

ウェブライダー 伊藤

了解しました!
私も、中途半端に自社サイト内で自社プロダクトについて説明するより、概要だけを伝えて、あとはLPに移動してもらうほうがいいと思います。

もちろん、スケジュールが間に合えば、LP側で訴求できていない情報は、自社サイトの中で訴求しておきたいところです。
たとえば、そのプロダクトの立ち上げの裏側や、メンバーの思いやこだわりなどを訴求できると思います。

ウェブライダー 松尾

たしかに。

ウェブライダー 松尾

ちなみに、「お客さまの声」を第二弾にもっていった理由について、あらためて説明しておくね。

「お客さまの声」は、お客さまに話を伺いながら制作するコンテンツ、つまり、お客さまの大切な時間をいただいて制作するコンテンツだ。
そのため、70%の完成度という括りでつくるのではなく、お客さまにしっかり敬意を払い、むしろ、100%に近い品質のコンテンツをつくりたいと思っている。
そのために、あえて「第二弾」にもってきた。

ウェブライダー 松尾

ただし、「お客さまの声」はウェブライダーの実績紹介のページでもある。
ウェブライダーに案件を発注したいお客さまにとっては、発注するかどうかの決め手となるページだ。

さらには、ウェブライダーの「機能的価値」と「情緒的価値」をブレンドして届けられるメリットもある。
「ウェブライダーとお客さまはどんな関係性を構築しているのか」「ぶっちゃけお客さまから見てウェブライダーの仕事ぶりはどう見えるのか」など、自分たちから発信しにくい自分たちの価値を、お客さまの言葉を借りて伝えられる。

ウェブライダー 赤木

たしかに、お客さまと良好な関係を構築していることが伝わるだけでも、ウェブライダーに依頼しようか迷っている方々の心理的ハードルは下がりますね。

ウェブライダー 松尾

そうなんだ。
だから、本当は先につくっておきたい。

とはいえ、今回のサイトリニューアルでは、「お客さまの声」とは別に「事例紹介」のページもつくることになっている。
よって、第一弾で「事例紹介」のページをつくることで、「お客さまの声」の公開が遅れることをカバーしようと思ってる。

この「事例紹介」のページは、うちがこれまでに手がけてきた案件を、うちの視点で解説するもの。
「お客さまの声」に比べると客観性は弱くなり、情緒的価値は伝えづらくなるかもしれないけれど、その分、「機能的価値」をしっかり伝えようと思う。

ウェブライダーがどんな課題に対して、どんなソリューションを提供でき、そしてどんな成果が期待できるのかを、多くの事例を掲載することで伝え、さまざまなニーズに備えておきたい。

ウェブライダー 伊藤

「事例紹介」については、ウェブライダーの設立当初からの案件を含め、できるだけたくさんの事例を掲載したいと思っています・・・!

ウェブライダー 松尾

いいね。
自分たちが「こういう事例はあまり需要がないだろうな・・・」と思っているものでも、案外「ウェブライダーさんって、そういうことができたんですか!?」と思わぬ需要があったりする。

自分たちの価値の見える化につながる情報は、できるだけたくさん出していったほうがいい。

もちろん、「事例紹介」にてメインで取り上げるのは、初期のミーティングで実施した「NWS分析」を通して列挙した、ウェブライダーならではのソリューションたち。

まずは、「NWS分析」で見えてきた自分たちならではのソリューションの事例を取り上げた上で、それ以外のいろいろな事例も集めよう。
「事例紹介」に関しては、「質」より「量」を重視していこう。

ウェブライダー 赤木

自分が入社前の案件を知るのが楽しみです・・・!

ウェブライダー 伊藤

ちなみに、「自社ブログ」の立ち上げについてです。
今回、自社ブログでは次のふたつの役割を担ってもらうことを想定していました。

■自社ブログが担う役割

  1. ブランディング目的

    ウェブライダーの日常の風景を発信することで、「ウェブライダーってこんな雰囲気の会社なんだ」という「情緒的価値」を感じてもらう。

  2. ノウハウ発信による集客&お客さまとの前提知識の共有目的

    ウェブライダーが体系化した「SEOノウハウ」や「ライティングノウハウ」などを発信し、ウェブライダーの「機能的価値」を感じてもらう。
    また、ノウハウを発信することで、将来のお客さまと前提知識を共有できる。

ウェブライダー 伊藤

ブログを通じて「ウェブライダーのメンバーが仕事にどう向き合っているか」「どのようにお客さまとコミュニケーションしているか」などの日常を伝えることで、自社のブランディングにつながります。

このブランディング用途に関しては、トラフィックを集めることが目的ではありません。
ウェブライダーに仕事を発注したいと思った方々がブログを覗いたとき、「なんだか良い雰囲気の会社だな、安心して依頼できそうだ」と思ってもらうことを重視します。
もちろん、偽りの姿を見せるのはNGです。
自分たちの普段の姿をお客さまに知ってもらうようにします。

一方、「ノウハウ発信による集客目的」という用途でブログを活用する場合もあります。
たとえば、ウェブライダーのSEOノウハウや、ライティングノウハウなどを発信する場合です。

ノウハウを発信することで、ウェブライダーに関心はなくても、ノウハウには関心があるという人たちを集客できます。
それは結果的にウェブライダーの認知度向上につながり、回り回って、お問い合わせ件数の増加や、資料のダウンロード数の増加などにつながるでしょう。
また、ノウハウ系の記事はSEOによる検索結果での上位表示も期待できます。

さらには、将来のお客さまに対して、こちらのノウハウを前もって共有しておくことで、いざ取引が始まった際のやりとりをスムーズにできるメリットもあります。

・・・というわけで、自社ブログはとても大事なコンテンツではあるのですが、WordPressのカスタマイズにリソースが必要だったり、そもそも記事を用意しなければいけないということもあり、今回、第二弾へ移します。

ウェブライダー 松尾

ただし、第一弾ではブログそのものを立ち上げないというわけではなく、外部のプラットフォームを使って、ブログを暫定的に立ち上げておくってことだよね。

ウェブライダー 伊藤

はい。
第一弾では、外部のプラットフォームでブログをつくり、そちらへのリンクを張るようにします。

そして当面の間、外部のブログにて記事を更新し続け、後日、自社ブログを立ち上げたタイミングで、外部で投稿していた記事を自社ブログ内に移行します。
そうすれば、情報発信が手軽にできないといった状態からは脱することができます。

ウェブライダー 赤木

外部のブログには「同じプラットフォームを使っているほかのユーザーさんとのコミュニケーションがとれる」「プラットフォーム側が露出を手伝ってくれる」といったメリットもありますよね。

ウェブライダー 伊藤

そう。
だから、自社ブログへの移行をする際は、そのあたりのメリットも踏まえつつ、場合によっては、一部の記事のみを外部のブログに残す、もしくは自社ブログと並行し、外部のブログでは自社ブログと毛色の違う記事を発信する、という方向性もありだと考えてる。

今回、外部のブログには「note」か「はてなブログ」、松尾さんお気に入りのデザインの「g.o.a.t」あたりを使う予定。

ウェブライダー 松尾

よし、いい感じだ。

ウェブライダー 赤木

一時はどうなるかと心配しましたが、「第一弾」「第二弾」と、公開タイミングを分けたことで、リニューアル作業を前進させられそうですね!

ウェブライダー 松尾

そうだね。
困難にぶつかったときこそ、「分ける」という言葉の大切さが身に染みるね。
自分たちの状況を冷静に「分析」したいときは、とにかく物事を「分けて」考えてみることが大事なんだ。

ウェブライダー 松尾

これで制作に関する憂いは消えたかな?

ウェブライダー 伊藤

あ、制作に関することで、もう一点、相談したいことがあります。

ウェブライダー 松尾

もう一点?

ウェブライダー 伊藤

はい、もう一点というのは、サイト全体のデザインの進め方についてです。

今回、制作を進めるにあたって、私のほうでざっくりとした「WF(ワイヤーフレーム)」を作成します。
そのあとで、中山さんにバトンタッチをし、いきなりコーディングに入ってもらおうと思っています。

ワイヤーフレーム・miro

説明しよう!

「WF(ワイヤーフレーム)」とは、Webサイトの各ページの設計図のこと。
この設計図をベースに、各ページのデザインがおこなわれる。
WFの作成にあたっては、後述する「プロトタイピングツール」を使う場合や、PhotoShopやIllustratorのようなデザインツールを使ってつくられる場合や、Excelを用いてつくられることもある。
今回の伊藤は、普段デザインツールを使わないスタッフでも確認し、共同編集ができるよう、「miro」を用いて作成した。

ウェブライダー 松尾

おお、なるほど・・・!
コーディングベースでデザインすれば、「プロトタイピングツール」を使うように、サイトの使い勝手を確認しながらデザインを進められるメリットはあるね。
そして何より、かなりのスピードで制作を進められる・・・。

ウェブライダー 伊藤

はい。
通常の受託案件の場合、「デザインカンプ」をつくったり、「プロトタイピングツール」を用いて、モックアップをつくってから本番のデザイン制作やコーディングに入るのですが、今回はリソースが限られていることと、デザインがメインのリニューアルではないこともあり、この方法を用います。

説明しよう!

「デザインカンプ」とは、デザインの完成見本として作る画像のこと。

一般的なWebサイト制作の進め方としては、WF(ワイヤーフレーム)と呼ばれる設計図を作成したあとに、このデザインカンプをつくり、デザインカンプをもとに、画像の素材を用意したり、HTMLやCSSなどでデザインをコーディングしていく。
案件によっては、デザインカンプの作成を飛ばし、後述する「プロトタイピングツール」でデザインを始める場合もある。

説明しよう!

「プロトタイピングツール」とは、Webサイトのプロトタイプ(試作モデル)を作成または確認するためのツール。

このツールを使うことで、コードを書かなくても、ページ遷移やポップアップなどの動作や導線を確認できる。
それにより、Webサイトの制作を本格的に進める前にユーザーの利用体験をシミュレーションできる。
プロトタイピングツールには「Adobe XD」や「Sketch」、「Prott」などさまざまなものがある。 ツールによって得意不得意があるため、Webサイトで重視していることやデザインカンプをどうつくるかなどによって選ぶ。

ウェブライダー 松尾

複雑なデザインやデザイン性が重要なサイトの場合は、いきなりコーディングとはいかないけれど、今回僕たちがつくるサイトはシンプルなデザインになる予定だ。
いきなりコーディングから始めても、なんとかなるだろう。

ウェブライダー 伊藤

ありがとうございます。
今回のサイトに関しては、サマライズコンテンツを用いるという点も大きいです。

サービス詳細ページに関しては、サマライズコンテンツがメインとなり、スライドの作成がデザインの肝となります。

つまり、サイトのデザインの多くをPowerPointやKeynoteでつくったスライドが担うということです。
スライドは画像として挿入され、縦に並びますから、コーディングもとくに難しくありません。

ウェブライダー 松尾

いいと思う。

ウェブライダー 伊藤

では、今打ち合わせした内容を中山さんにも共有しておきますね。

ミーティングの風景

いつしか日は暮れ、時刻は18時を指していた。
西の空には優しい光が、希望を迎えるように灯っていた。
松尾、伊藤、赤木の3人は、少し早めにオフィスを後にすることにした。

1週間後

ミーティングの風景

この日、あらためて全社ミーティングが開かれ、サイトリニューアルに関する具体的な作業方針が共有されていた。

ウェブライダー 伊藤

・・・というわけで、今回はこのガントチャートの流れで制作を進めていきます。
私は引き続き本プロジェクトの制作進行を担当しますが、各ページ担当者は、毎日、チャットワークで進捗報告をおこなってください。
そして、サイトリニューアルに関する全体ミーティングは、毎週おこなうことにします。

ガントチャート

ウェブライダー 藤原

わかりました!

ウェブライダー 伊藤

ちなみに、進捗報告については、次のようなルールを設けます。

■進捗報告のルール

  1. 進捗が遅れているのなら、その旨を必ず報告する

    進捗が遅れていたとしても、正直に報告しましょう。
    ガントチャートには進捗という列に「%」の記載がありますが、この「%」は「進捗率」を示しています。
    どこかの進捗率に間違った情報が入ると、全体の進行に影響が出てしまうので、注意してください。

  2. 進捗が遅れたら、遅れる原因を特定し解消する

    進捗が遅れた人を責めてしまうと、遅れの原因の特定に時間がかかってしまうことがあります。
    もちろん遅れてしまうことはよくないことですが、進捗が遅れることには何らかの理由があるはずで、本人が一番気にしているはずです。
    進捗の遅れで気負ってしまうと、現実とかけ離れた進捗報告につながることもあるため、遅れの原因を特定して解消することを一番に考え、進捗が遅れても責めないようにしましょう。

  3. 進捗が遅れている場合、現実的に「いつまでに何ができるか」を考える

    進捗が遅れてしまったら、現実的に「いつまでに何ができるか」を考え、共有してください。
    その情報の共有があれば、起きているトラブルのボトルネックが見えてくる場合があります。
    そうなれば、誰かが何らかの解決策を提案できるかもしれません。
    チームプレイならではの利点を最大限活かし、ピンチのときは、積極的にメンバーの力を借りましょう。

ウェブライダー 藤原

ありがとうございます!
進捗報告には気をつけるようにします・・・!

ウェブライダー 伊藤

まあ、うちのメンバーなら問題ないかなとは思っているのだけど。
もし、進捗が遅れてしまったときは、他案件も含めてタスク調整をするから、まずは相談してね。

ウェブライダー 松尾

支え合うチーム、実に素敵だなあ。

ウェブライダー 広江

うちって、ガチガチに役割分担しなくても、とっさに補いあえるチームワークのよさがあるよね。

ウェブライダー 伊藤

そうそう。
だから、スケジュールがハードには違いないけど、私たちならできるって感じてる。

ウェブライダー 伊藤

ではこのまま、新サイトの「WF(ワイヤーフレーム)」の話題に移ります。

ウェブライダー 伊藤

今回のWFは、私が「miro」を使ってつくりました。
細かくは詰められていないのですが、主要な要素は整理できたと思います。

ウェブライダー 伊藤

WFは「トップページ」と「内部ページ」に分かれていて、内部ページは「一覧ページ」と「詳細ページ」にさらに分かれます。
まずはトップページのWFを見てください。

ウェブライダーサイトのワイヤーフレーム

ウェブライダー 赤木

すごい情報量ですね!
今のミニリニューアルしたサイトとは方向性を変えて、新サイトのトップページは、あえてナビゲーション強めの見せ方にするんですね!

ウェブライダー 伊藤

そう。
今回のサイトの主役となるのは、あくまでも内部の詳細ページ。
内部ページへの回遊のしやすさを優先し、トップページは“サイト内にどんな情報があるか”がわかるよう、見やすい一覧性と使いやすいナビゲーションを大切にします。

ウェブライダー 広江

こうやっていろいろな情報が並ぶと、多様なソリューションをもった会社という印象が伝わるね。

ウェブライダー 達川

たしかに。

ウェブライダー 松尾

ちなみに、ファーストビューにあたる「ブランドの価値を伝えるメッセージ」と書かれているエリアの背景にはどんな画像が入るの?
ここ、メインビジュアルが入るよね?

メッセージエリア

ウェブライダー 伊藤

そこは中山さんと相談して決めますが、私的には、メインビジュアルよりもメッセージが目立つようにしたいと思っています。

ウェブライダー 松尾

メッセージ?
以前のサイトにあった「すべての人をヒーローに」というメッセージかな?

ウェブライダー 伊藤

いえ、そのメッセージではなく、「誰のどんな課題に対して、どんな価値(ソリューション)を提供できるか」というメッセージを掲載したいと思っています。
ファーストビューを見るだけで、「どんな課題に対して、どんな価値を提供してくれる会社なのか」をわかりやすくするためです。

そのため、メインビジュアルを設置するにしても、そのビジュアルは、そのメッセージを補足するものにする予定です。

ウェブライダー 松尾

ということは、以前のサイトにあった、ウェブライダーのキャラクターイラストがドーン!と表示される演出も止めることになるかな?

ウェブライダーのオフィシャルサイトのキャプチャ

2020年10月5日以前のウェブライダーの古い会社サイトを見る
(※2021年1月19日時点のサイトは、2020年10月6日にミニリニューアルされています)

ウェブライダー 伊藤

・・・実はそれも悩んでいます。
あのキャラクターイラストは、ウェブライダーのシンボルイメージでもあり、他社との差別化につながっていましたから。

ただ、あのイラストがトップに大きく表示されると、男性的で力強い印象を与えてしまい、今のウェブライダーの雰囲気と合わなくなってきたのでは?とも思っていました。
さらには、ユニークなイメージが強いことで、「仕事を発注したいのに、アクが強い会社だったらどうしよう・・・」と気後れしてしまうお客さまもいたのではないかと考えました。

元々あのキャラクターは、松尾さんがなりたい姿をイメージしてつくられたと聞いています。
松尾さんがなりたい姿を、会社が目指したい姿として提示することには大きな問題はないのですが、今回、松尾さんのプレゼンスよりもチームとしてのプレゼンスを高めていく上で、あのイラストをトップで大きく使うことがベストなのかは慎重に検討したいです。

個人的には、あのイラストはとても好きです。
イラストレーターさんと一緒に、完成までに何度も何度もブラッシュアップを重ねて、あのイラストが生まれたと聞きました。

もし、デザインを進めていく中で、「やはりあのキャラクターイラストが必要だよね」となったときには、メインビジュアルに組み込んでみますね。

ウェブライダー 松尾

了解!

ウェブライダー 伊藤

また、メッセージエリアの下部には、「お問い合わせ」「資料請求」というCTA(Call To Action)ボタンを設置し、すぐに行動に移りたい方への導線を用意します。

ウェブライダー 達川

まさに「FVO(ファーストビュー最適化)」ですね。
資料請求しやすくなるのは、とてもいいと思います。

ウェブライダー 伊藤

そうなんです。
ファーストビューは、Webサイトにアクセスすると確実に目に入るエリアなので、公開後もPDCAを回して最適化を続けたいと考えています。

では続いては、内部ページのWFです。
内部ページのWFは「一覧ページ」と「詳細ページ」の2つを用意しました。
ざっくりしたWFですが、イメージをつかんでおいてください。

ウェブライダーサイトのワイヤーフレーム2

ウェブライダー 伊藤

今回、各WF全体を通じて意識していることがあります。
藤原さんわかりますか?

ウェブライダー 藤原

各WF全体を通じて意識していること・・・?

ウェブライダー 藤原

あっ!
わかりました!

どのページも、情報を掲載する順番として、最初に「お客さまの課題」について触れたあと、「ウェブライダーではその課題について、どう対応できるのか?そして強みは何か?」といった情報を掲載しています!

ウェブライダー 伊藤

正解!

ウェブライダー 伊藤

今回、その情報の順番を意識した理由は、お客さまの中には、自分の課題をうまく言語化できず、ふわっとした気持ちでウェブライダーのサイトに来られるケースがあるから。
その場合、こちらでお客さまの課題を明確に言語化してあげることで、「そうそう!それに悩んでいたんだよ!」と課題の本質に気付いてもらえる。
課題の本質に気付けば、ウェブライダーが提供しているソリューションにもより強く関心を向けてもらえると考えたんだ。

そのため、どのページでも、最初に「お客さまの課題」について触れることにしてる。

ウェブライダー 松尾

とてもいい構成だと思う。

ウェブライダー 伊藤

ありがとうございます。

私の話は以上です。
ここからは中山さんにバトンタッチをし、デザインの方向性について語ってもらいます。

伊藤がZoomにいるデザイナーの中山に話を振った。

デザイナーの中山は、ウェブライダーのメンバーの中でも最古参にあたる。
ウェブライダーの設立当初からウェブライダーを支えてきたベテランデザイナー。
今回のサイトリニューアルでは、彼がデザインとコーディングを並行して進めることとなっていた。

ウェブライダー 中山

では、ここからは私、中山が話を進めます。

今日皆さんに共有したいのは、私がつくった「ブランドガイドライン」についてです。

このブランドガイドラインでは、今回のサイトリニューアルに関する一連のミーティングで言語化した「ウェブライダーらしさ」をどうデザインに落としこむかという、そのプロセスやロジックをまとめてあります。

このガイドラインでは、サイト全体のデザインのトンマナだけでなく、今後皆さんが制作するスライドのトンマナなどについても触れています。
あらゆるクリエイティブにて、一貫性のあるデザインを意識することで、「ウェブライダーらしさ」がより深く伝わるようになります。

ウェブライダー 中山

ちなみに、今回のブランドガイドラインはGoogleスライドでつくっています。
ガイドラインはこの先、どんどん更新されていく予定なので、みんなで更新・管理しやすいよう、Googleスライドを用いてみました。

現時点ではまだかなりミニマムの状態で、基本的なデザインルールについてしか記載できていませんが、一緒に見ていきましょう。

ウェブライダーブランドDNAガイドラインver2

パーパス、価値の伝え方を創出し続け、伝え方の「気づき」を生み出す存在となる

ビジョン、誰もが誰かにとってのヒーローとなる社会を創る

5つのミッション、価値を磨く、価値を見つける、価値を創る、価値を伝える、価値を守る

ウェブライダーの定義するヒーロー像に基づくバリュー、相手の思考を大切にしよう、人の感情に寄り添おう、自分自身と闘おう、正々堂々とチャレンジしよう、結果だけではなくプロセスも大切にしよう

ウェブライダーらしさ、ウェブライダーらしい、相手の思考を拡張する情報提供をおこない、納得して行動してもらう、情報を受け取った人の感情に寄り添い、大切に言葉を紡いで届ける、結果が出るまで考え、実行し、チャレンジし続ける、読みやすさ、情報の理解しやすさなどの意味のあり、安定感のあるデザイン、ウェブライダーらしくない、不安を煽ったり急がせたり、思考を奪って行動させる、深く考えずに言葉を発する、リンクを買うなど違法行為をする、意味のないデザイン、素人っぽく不安になるデザイン

ビジョンイメージ

コーポレートロゴ

ブランドカラー

ロゴ利用ルール

カラールール※ブランドカラーが引き立つよう、ブランドカラー以外はグレー、ホワイトなど控えめのカラーを使用する。

カラールール※ウェブライダーでは、Webコンテンツ内で以下のようなカラーを用いる場合がある。これらのカラーはコンテンツ内の情報に意味を付与でき、UXを高める効果がある。
※以下の意味でカラールールを徹底しなければ、かえってユーザーを混乱させ、UXを損ねてしまうので注意。
※以下の色味は一例。プロジェクトごとにカラーバランスを調整。

カラールール※カラー作成時には色覚多様性に配慮し、とくに、相反する意味をもつ「赤」と「青」に当たるカラーが同系色にならないようにする。

フォント(日本語・ゴシック)資料や画像などには、ユニバーサルデザイン対応フォント「ヒラギノUD角ゴ」を使用する。「ヒラギノUD角ゴ」を使用できない場合には「ヒラギノ角ゴ」を使用する。「ヒラギノ角ゴ」の使用もできない場合は、「Noto Sans JP」などサンセリフフォントを使用してください。一部、イベントスライドなどで「A-OTF 新ゴ Pro」を使用する場合もある

フォント(日本語・明朝)明朝体はデザイン上の演出で使いたい場合のみ使用する。使用する場合はユニバーサルデザイン対応フォント「ヒラギノUD明朝」を使用する。「ヒラギノUD明朝」を使用できない場合には「ヒラギノ明朝」を使用する。「ヒラギノ明朝」を使用できない場合は、「游明朝」などを使用してください。一部、デザインで強くメッセージを出したい場合など「DNP 秀英明朝 Pr6」を使用する場合もある

ウェブライダー 藤原

このガイドラインを見ていると、自分たちのブランドを大切に育てていこうという気持ちが強くなりますね・・・!

ウェブライダー 広江

とくに、細部の振る舞いにも気を配れるようになりますね。
たとえば、今まで何気なく使っていた色に対して、「なぜ、その色を使うべきなのか?」が言語化されたことで、色使いひとつにも配慮できるようになります。

ウェブライダー 赤木

ウェブライダーのロゴの色が、昔は赤で、今は青という変遷も、ウェブライダーという会社の変化を感じます。

ブランドカラー

ウェブライダー 宮本

フォントはまさに、どんな声色でメッセージを届けるか、ということですよね。
「ヒラギノ」というフォントのスマートさと視認性がいいなと思います。

ちなみに、「ヒラギノ」の名前の由来は、京都の鴨川にある柊野(ひらぎの)という地名らしいですよ。

外部記事:そもそも「ヒラギノフォント」の由来は?

フォント(日本語・ゴシック)資料や画像などには、ユニバーサルデザイン対応フォント「ヒラギノUD角ゴ」を使用する。「ヒラギノUD角ゴ」を使用できない場合には「ヒラギノ角ゴ」を使用する。「ヒラギノ角ゴ」の使用もできない場合は、「Noto Sans JP」などサンセリフフォントを使用してください。一部、イベントスライドなどで「A-OTF 新ゴ Pro」を使用する場合もある

フォント(日本語・明朝)明朝体はデザイン上の演出で使いたい場合のみ使用する。使用する場合はユニバーサルデザイン対応フォント「ヒラギノUD明朝」を使用する。「ヒラギノUD明朝」を使用できない場合には「ヒラギノ明朝」を使用する。「ヒラギノ明朝」を使用できない場合は、「游明朝」などを使用してください。一部、デザインで強くメッセージを出したい場合など「DNP 秀英明朝 Pr6」を使用する場合もある

ウェブライダー 松尾

こうやって、色のルールやフォントのルールが言語化されるだけで、そこに「意味」が生まれるね。
これまでうちは、コンサルを通じて、お客さまのブランドガイドラインはつくってきたけれど、自社用のガイドラインはつくれていなかった。

今回、自社のブランドガイドラインがつくれて、なんだか感慨深いものがあるなあ(笑)

ウェブライダー 中山

そうですね。
私もスッキリと晴れやかな気分です(笑)

ウェブライダー 中山

ひとまず、今日皆さんに共有したかったのは、今回のサイトデザインはこのガイドラインに沿って進めます、ということでした。
皆さんの反応を見て、今回のリニューアルを通して「ウェブライダーらしさ」に関する共通認識が生まれていることをあらためて感じました。

私からは以上です。

ウェブライダー 松尾

中山さん、ありがとう。
サイトデザインの完成がさらに楽しみになったよ。

ウェブライダー 松尾

あと、今日のミーティングで聞いておきたかったこととしては、サーバーの移転の件だ。

宮本さん、CPIサーバーの移転は順調かな?

ウェブライダー 宮本

はい。
ちょうど昨日、旧サーバーからCPIさんの新サーバーへの移転を完了しました。
移転にあたって、旧サイトに残っていた不要なデータは、外部ストレージにバックアップしていますので、かなりスッキリとした状態で移転できたと思います。

今回のサーバー移転について、皆さんにも共有しておきたい話がありますので、明日、あらためて時間をいただいてもよろしいでしょうか?

話す宮本

ウェブライダー 松尾

うん、大丈夫。

みんな、明日のミーティングに参加できる人は、参加してほしい。

ウェブライダー 赤木

明日のミーティングは15時からですね。
私も参加できます!

ウェブライダー 広江

明日は、私も宮本さんと一緒に話をします。

ウェブライダー 松尾

よし、ついにサーバーの移転も完了し、これから、いろいろ動き出すなあ。
ワクワクしてきたぞ。

ウェブライダー 伊藤

・・・ワクワクされているところ恐縮なんですが、何度も言うとおり、今回のスケジュールはなかなかの強行劇です。

皆さん、ガントチャートをこまめに確認しながら、各人のタスクを着実に進めていきましょう。

私も細かくリマインドし、しっかり進行管理をしていきますので、よろしくお願いします。

ガントチャート

ウェブライダー 藤原

はい!!

ウェブライダー 赤木

頑張ります!

ウェブライダー 達川

了解です!

2ヶ月半後

ウェブライダー 伊藤

・・・き、決まらない・・・。
どちらを選べば良いの・・・!?

ウェブライダー 伊藤

どちらを選ぶかで、きっと、サイトの運命は決まる・・・。

画面に映る2つの言葉を前に、伊藤は最後の決断を迫られていた・・・。

次回予告

伊藤が制作したWF(ワイヤーフレーム)が、中山が制作したブランドガイドラインが、そして、皆の背中を押すガントチャートが、今、壮大なる終章へ向けてアレグロのテンポで疾走する・・・!
果たして、彼らがたどり着くWebサイトとは、どんなサイトなのか・・・!
そして、伊藤が語る「サイトの運命を変える選択肢」とは一体・・・!?

次回、大改善!劇的Webリニューアル
第六話「サイトが変われば会社も変わる。サイトリニューアルが教えてくれたこと」

第六話「価値のバトンを渡せ!新章ウェブライダーの幕開け」のイメージ図

今夜も我々のインデックスが加速するッ・・・!
今夜も我々のインデックスが加速するッ・・・!
告知!

来たる2月2日(火)の19時30分から、オンラインイベントにて、今回の優先事項を決定するノウハウや、ストーリーの振り返りをおこないます。
イベントはYouTube LiveやTwitter上で【無料配信】されます。
当日になりましたら、視聴URLをお送りしますので、ぜひ事前申し込みをお願いします。

無料オンラインセミナー緊急開催!「大改善!劇的Webリニューアル」から学ぶ!Webサイト制作の極意