爆誕！Webディレクターが本気で自分たちの紹介ページを作ってみた｜前編
デザイン×エンジニアリング×ディレクションをベースに「新しい価値観」を創造するクリエイティブ集団、crage（くらげ）株式会社のディレクションチーム城戸（キド）です。
2023年11月、弊社ディレクターチームのプロモーションページがリリースされました！🎉
今回は、このページ⬆️が作られていった過程を前後編に分けてご紹介していきます。前編の本記事では、案件を進行したメインディレクターの目線から、ディレクターとしてどんなことを考え、プロジェクト全体をどうリードしたのかということを語っていきたいと思います。
自己紹介
改めまして、本プロジェクトのメインディレクターを務めた城戸（キド）と申します。
crage歴＝Webディレクター歴で、丸4年ほどになります。また、ディレクター業務の傍ら、ディレクターチームのサブリーダーも担っています。
crageのディレクターチームは10人くらいで構成されています（※2023年11月時点）。今回はその10人の代表として、私が進行役に抜擢されました。
制作経緯
会社として「チームページ」というものを作るのは実は初めてではなく、今回のディレクターチームページよりも先にデザイナーチームのページがリリースされています。それを見て、ディレクター版もあったらいいかも！という話が上がり、制作することになりました。
社内プロジェクトだとしても始動するには明確な目的が必要なため、すぐに定めることにしました。
あとは期間です。社内の案件はついダラダラと長引いてしまいがちですが、工数を使っている以上は作業費用（＝原価）が発生しているということですので、きっちりとお尻を決めて計画的に進行することを意識しました。
とはいえ、通常の制作案件とは違って会社の売上に直接反映されるものではないため、通常業務と並行して進めるにあたり、このプロジェクトにどれくらいのパワーを割いていただくのか、というのは悩ましい問題でした。
とりあえず最初にスケジュールを引くにあたっては、例えばデザイン作業日数を通常の1.5倍くらいで見込んでおくなど余裕を持たせ、本業との兼ね合いで厳しい場合は適宜調整可能であることを常に伝えていました。
大事なこと
最も意識したのは「ディレクターチームのページなので、ディレクターみんなで作ること」です。
通常の制作と同じく、本プロジェクトでもいわゆる進行役としてのディレクターは私だけでしたが、今回作るのはチームメンバー”全員”のためのページです。つまり、私の後ろに他の10人のディレクターがいたということ。
言い換えれば、10人分の思いと、Webディレクター10人の視線を常に感じながら（笑）のディレクションだったわけです。
そのため、普段はディレクターが代表して決めているようなことでも、今回は1人で考えるわけにはいきませんでした。私1人が考えて出来上がったページだと、チームページではなく「私のページ」になってしまいます。
そうするとチーム内でも「結局考えているのは城戸だけ」「なんかみんなで作ってる感がない……」という雰囲気になり、モチベーションが下がることが容易に想像できます。
だからといって、全員で一緒に取り組もうとしてもなかなか前に進みません。例えば「ペルソナを考えましょう。まずは◯◯さん、どう思いますか？」と10人に聞いていたら、それだけで1時間以上はかかります。集めた内容を検討してみんなで話し合うのにも更に1時間。これでは全員の貴重な時間を最大限に活かすことができない可能性があります。
なので今回は、「みんなに案を出してもらう」パートと「自分が素案を作って持ち込み、それに対して意見をもらう」パートを意図的に使い分けていました。アイディアの数がほしいもの（目的、キャッチコピーなど）は前者、ある程度1人で作業ができるもの（ペルソナ設計、ワイヤーフレーム作成など）は後者といった具合です。
制作プロセス
プロジェクトは以下のような流れで進行しました。
①ユーザー像・流入経路・目的の洗い出し
②伝えるべき情報の整理
③ペルソナ設定
④デザインイメージの設定/ページ構成検討
⑤ワイヤーフレーム作成/コピー検討
⑥デザインラフ作成・選定
⑦デザイン
⑧実装指示作成・連携
⑨実装
⑩検品・リリース
スケジュールの形に落とし込むとこのようになります。
制作の目的とターゲット
まずはターゲットと伝えたいことを考えます。その結果「crageにお仕事を依頼したいクライアント」と「crageへの入社を検討している求職者」という2つのユーザー像が浮かび上がりました。
また、それぞれに対して伝えるべき情報にかなり差があることにも気づきました。例えば「ディレクターの1日の流れ」というコンテンツは求職者にとっては興味深い情報ですが、クライアントにとっては不要ですよね。
そのようにアプローチの異なる情報を1つのページに盛り込むと、結局何を伝えたいのかよくわからないページになってしまいます。
なのでこの時点で思い切って、制作ページ数を2ページにする決断をしました。
デザインの方向性
ここで一旦、デザインの話に移ります。
コンセプト決めの段階において、デザイナーから提案をもらうか、ディレクターが方向性を指示するかというのは悩みどころだと思います。しかし今回はディレクターの思いを反映するページ制作。チームの雰囲気を知っているのは自分たち自身ですので、デザイントーンに関してはまずディレクター側から要望を出す形にしました。
ただ当然ですがデザイナーではないので「こんな感じがいいんじゃない？」というのがすぐ思い浮かぶような引き出しがあるわけでもなく。ではどう決めたかというと、ちょっと泥臭い方法を取りました。
まずは他社の採用サイトなどをたくさん集めて【派手/元気⇔地味/落ち着き】【親しみやすい⇔硬い】という2つの軸でマトリクス図を作成。
この中でcrageのディレクターチームはどの位置だろう、どう見せたいだろうというのを議論しました。
その結果「親しみやすく、元気と落ち着きの中間くらい」という認識にまとまりました。
次に、その範囲に絞って更に他社サイトを探索。
今度は【色数が多い⇔少ない】【彩度が鮮やか⇔淡い】という軸で同様のことを行い、トーンを絞り込んでいきました。
それらの結果「①親しみやすい ②地味すぎずうるさすぎず ③色数は普通〜少なめ ④彩度は淡め」という”crageディレクターチームのイメージ”にたどり着くことができました。
ここまでで大体のトーンは決まりましたが、これだけだと私たちが作りたい雰囲気のズバリを作ってもらうのが難しそうだったので、更に簡易的なムードボードに落とし込むことにしました。
「制作の目的とターゲット」の項目でお話した通り、今回は2つのターゲットに向けて別々のページを作りますので、それぞれに合わせて若干イメージをチューニングしていきます。
クライアント向けのページは「ややシャープめ、色は少なめ」で「信頼感を演出したい」
求職者向けのページは「柔らかめ、少しカラフル」で「親しみやすさと遊び心を演出したい」
ここからどのようにデザインされていったのかは、後編の記事で詳しくご紹介する予定です。
構成検討
トーン決めと並行して、ページ内容の設計を進めていきました。
ワイヤーフレーム制作に入る前に、まずは構成を考えます。消したり入れ替えたりする前提なので、Miroの付箋機能を使ってメモ書きベースでペタペタと貼っていきます。
次に、その構成を元にして「実際のページになったらどんな風になるのか」というイメージを作成しました。使うのは色々な他社サイトの切り貼りです。「どれくらいのボリュームの情報を」「それぞれどんなUIで見せるか」というディティールを掴むために非常に便利なので、個人的にはおすすめの手法です。
これをワイヤーフレームの形にしていきます。
「デザイン案を作るにあたってワイヤーフレームを使いたい」とデザイナーから依頼があったので、この時点ではコンテンツもテキストも仮置きのざっくりとしたものに留めました。今回はコンテンツが肝ですからそちらに力を入れたく（＝時間がとてもかかる）、その反映を待ってもらうと本デザインの着手がかなり後になってしまうからです。
ちなみに、ディレクターによってワイヤーフレーム作りに使うツールは異なる（XD派、Figma派、スプレッドシート派……）と思いますが、私はこのようにMiroでそのまま作るのが一番好きです。
コンテンツ制作
デザイン系の作業を進めてもらっている間、コンテンツ（＝中身）の制作に取り掛かりました。
通常テキスト
実はページの半分くらいは、各メンバーに割り振って考えてもらったテキストなのです！
1から依頼すると各々バラバラな内容になって整合性が取れなくなる上、単純にメンバーの心理的・業務的な負担も大きいので、まずは私の方で「このような内容にしたい」というたたきを作り、それに対しての肉付け作業をお願いするという形を取りました。
執筆してもらった原稿に対して、表記揺れの修正などの最終調整はメインディレクターである私が行います。このようにして「メンバーがみんなで考えたページだけど、しっかり統一感がある」というライティングを実現しました。
キャッチコピー
メインビジュアルやCTA周りの文言は、世界観を表現する重要な要素です。そのため、1人で作ったのではどんなにいいコピーでも全員が納得できるものにはならないと考えました。
なので、こういうところでは「みんなに案を出してもらう」という策を使います。
まずは自由な発想でラフ案を作ってもらいました。それぞれの考案者に「どんなことを考えて書いたのか」を発表してもらい、良さそうなアイディアや共通していそうなキーワードを全員で確認。それらを組み合わせて共通の型に落とし込んだパターンを改めて作ってもらい、投票で絞り込み、最後はデザインとのバランスも考えながら決定していきました。
メンバー紹介
メンバーはどちらのページにも入れていますが、それぞれ内容が異なります。特に力を入れたのは求職者向けページの方で、ホバーorタップすると名刺風のカードが表示されるようになっています！
crageの名刺は社内ツールで行う性格診断を元に一人ひとり違うカラーになっていて、そのこだわり具合が社内外からかなり好評だったりします。
そこから着想を得て、チームページのメンバー紹介を名刺にすれば個性が出るんじゃないかということを提案しました。オンライン面接が主流となり応募者の方に名刺をお見せする機会もあまりないので、魅力をアピールする意味でも一石二鳥です。
ただ実際の名刺を表示するだけではビジネス感が強いので、名刺の体裁は保ちながらもう少しパーソナルな情報を入れたいと考え、本来は住所などの情報が入っている場所に「趣味」「crageの好きなところ」「（性格診断で）選んだキーワード」を入れることに決めました。
また、ワイヤーフレーム段階では表面/裏面をひっくり返して見れるようなギミックも考えていたのですが、UIが複雑になるのでボツに。表面のみに集約する形でいい感じにデザイナーがアレンジしてくれました。
採用ピッチ資料
サイト制作と同時並行で、求職者ページに掲載する採用ピッチ資料（※）の制作にも取り掛かりました。
これはビジュアルにこだわりたかったので、求職者向けページの水彩モチーフをベースにしたデザインをFigmaを用いて作成しました。スライド用のテンプレートをいくつかデザイナーに作ってもらい、中身のコンテンツはディレクターで編集しています。
※ 採用ピッチ資料
応募者に向けた会社説明資料のこと
▼完成したものがこちら
実装への連携
実装者への指示は、BacklogとMiroとFigmaを使い分けました。
Backlog：サーバー情報、各種ドキュメントのリンクなどを集約
Miro：画面遷移や挙動、WordPressに関する指示
Figma：ホバーやアニメーションの指示、デモなど
リリース後にディレクターだけでもメンバー追加などができるようにしたかったので、WordPressでどこをどう編集できるようにするかというのは細かく指示をしました。
今後に向けて
これだけ手間をかけて作ったページですが、100%の出来だとは思っていません。リリースまでで終わりではなく、リリース後もまだまだやることはあります。
それは、今入れているものよりもっといいコンテンツやUIがあるかもしれない、もっと効果の出るページになるかもしれない、ということです。普段の業務でよくLPO（ABテスト）を行っている身なので、こう思うのはある種の職業病かもしれません。
ただ、リリース直後でまだあまり露出ができていないため、何かを検討するだけの材料（＝流入数）が足りない状況です。
よって当面は、中身のエンハンスよりも母数を増やすことを優先していきたいと考えています。（このようにnoteを書かせていただいているのも露出策の一環と言えますね。）
流入状況を見るためにはアナリティクスツールを使います。
crageのホームページには元々GA4とMicrosft Clarityが入っていますので、それをチームページでも見ています。ただし、案件や求人応募の獲得を主目的としているLPなので、ホームページ側とは見るべき数字が少し異なります。そのため、チームページ専用の探索レポートやモニタリングシートを作成しました。
最後に
本プロジェクトはもちろんページの完成が目的でありゴールだったわけですが、その過程で副次的効果もありました。それは、みんなで議論するという作業がチームビルディングにもなったことです。
実はプロジェクトの一番初めに、「ディレクターページがある/作ることによる社内のメリットは何か？」というちょっと変わった質問をさせていただいて、メンバーから意見を募りました。その結果がこちらです。
チーム内で「このプロジェクトをなぜやるのか」「やるとどんないいことがあるのか」という目線が合ったことで、みんなが同じ目的に向かって同じくらいの熱量で関わることができたのではないかと感じています。
今回のようなチーム単位・会社単位のクリエイティブを作るときには、完成だけを目的にするのではなく、チームの関係性向上も視野に入れた進行をしてみてはいかがでしょうか。
ということで、ディレクター視点で語らせていただいた前編は以上となります。後編ではデザイナーの視点も交えて、デザインをどう進めていったのかをご紹介いたします。そちらの記事もお楽しみに！
そして、crageのWebディレクターに興味が湧いたそこのあなた。
まずはこちらのチームページをのぞいてみて、ぜひ私たちのことを知ってください！（早速宣伝😆）
ディレクターチーム 求職者様向けページ
チームの様子やお仕事内容を知ることができます。
エントリーはこちらまで！