採用コラム

宿泊業界の未来を紡ぐ求人サイト開発

今回は2024年4月に公開された宿泊業界向けの求人サイト、「もしも、この宿ではたらいたら」の制作プロジェクトについてご紹介します。
サイト名・ロゴ・コンテンツの全てがゼロの状態からプロジェクトがスタートした本プロジェクト。
完成に至るまでにどのような試行錯誤があったのか、制作を担当したEVOWORXのディレクター、デザイナー、エンジニアの3名にお話を伺いました。

クライアント

株式会社咲楽

対談メンバー

マネージングディレクター

牧野 圭佑

デザイナー歴4年/ディレクター歴4年
担当区分:ディレクション総合(企画・進行・品質管理・コンテンツ制作)

デザイナー

吉田 奈美

デザイナー歴4年
担当区分:ロゴ・サイトデザイン制作

シニアエンジニア

水野 勇夢

エンジニア歴5年
担当区分:フロントエンド実装

0から1を手作りするプロジェクト

本プロジェクトはどのような経緯から始まりましたか?

牧野:別プロジェクトでご一緒した方から、本プロジェクトに関するお話をいただいたことから始まりました。
「宿泊業界の人材難をどうにかしたい」という課題のもと、宿泊施設で働く人向けの求人サイトを作成したいという熱い思いをお聞きし、是非EVOWORXもお手伝いしたいとご返答させていただきました。
そこからご縁があり、約半年後にプロジェクトが正式にスタートしました。

スタートしてからは、どのような流れでプロジェクトを進めていきましたか?

牧野:完全ゼロベースからのスタートだったので、要件のすり合わせのために打ち合わせは高頻度で行いましたね。
週1回、定例でミーティングを重ねていって、クライアントや外部のパートナーも交えてワンチームで進行していきました。
初回の打ち合わせから2人(水野・吉田)にも出席してもらったよね?

水野:出席しました!いきなりビジネスの話というより、「私は前職〇〇業界で〜」など、まずは自分の人となりを知ってもらおうという姿勢でのぞみましたね。

牧野:制作期間については、キックオフが2023年の7月ごろだったので、約10ヶ月くらいですね。
最初2〜3ヶ月はどういうサイトにするか(サイト名・コンセプト・ロゴなど)を詰めていく期間で、9月から11月がサイトのデザイン、11月から12月がフロントエンド実装という流れだったかと思います。残りの3ヶ月はシステム会社さん(パートナー)の方でバックエンドの実装を進めていただきました。

制作スケジュール

Web戦略・情報設計

7月〜9月

デザイン制作

9月〜11月

実装開発

フロントエンド実装:11月〜12月
バックエンド実装:1月〜3月

サイト公開

2024年4月1日

牧野:ただ、ライティングや撮影なども含めた全体ディレクションを担当していたので、状況に応じたパートナーとの連携やスケジューリングなど、臨機応変な対応が求められました。

吉田:確かに、デザイン工程が終わってからは「記事どうする?」「取材どこにいく?」「誰が撮影する?」とか、コンテンツのお話がほとんどでしたね。

牧野:そうそう。あとはイベント用の素材を準備するために外部のカメラマンさんやイラストレーターさんに依頼したりとか。制作工数だけ見ると短く感じるけど、プロジェクトとしては常に何かしらが動いていました。

お二人(水野・吉田)は定例ミーティングに参加してみてどう感じましたか?

吉田:「宿泊業界の人材難をどうにかしたい」という咲楽さんの想いがダイレクトに伝わってきました。そこからどういうサイトにするかというイメージも掴みやすかったです。

水野:サイト名を一緒に考えたりとか、実装面以外での意見交換もあったので、よりチームで作っているなという感じがしましたね。

吉田:撮影やイベントを経て、クライアントにもチームの一員として直接認識してもらえたので、私たちもプロジェクトの中で動きやすかったです。

クライアントとのコミュニケーションで工夫したことはありますか?

牧野:プロジェクトが停滞しないよう、話し合いの場を作りつつ、こちらから何かを提供し続けることですかね。
週1の定例ミーティングでは、話す内容・持ち帰る内容を事前に決めつつ、常に何かしら提案するようにしていました。
また、チームで進める意識を持つために、窓口は一本化せず、イラストレーターさんは吉田さん、システム会社さんは水野くん、という役割分担をしていました。
あとはキックオフご飯会やお花見にも参加させていただいたりと、長期プロジェクトだからこそ、気持ちが緩まないようコミュニケーションの場が多くあったのは良かったなと思います。

水野:エンジニアとしては「何でも答えられるようにする意識」ですね。
バックエンド実装はシステム会社さんに依頼しているものの、クライアント側には同じプロとして見られていますので、先方を不安にさせないような発言を心がけていました。

コンセプトは「人と宿をつなげる」

採用されたロゴ(左)とサイト名(右)

デザインに込めた想い・コンセプトについて教えてください

吉田:「宿泊業界の人材難」という課題のもと、求職者サイドは「良い条件で安心して働ける場所を見つける」、宿泊業界サイドは「お客様に良いサービスを提供できる人材を見つける」というそれぞれの想いを持っていることがわかり、そこから「人と宿をつなげる」をコンセプトに制作に取り組みました。
コンセプトを体現する上で、ロゴについては、第一印象から「宿」を想起させることが重要であると考え、「宿」の形をモチーフに「つなげたい」という想いを込めて作成。ロゴが正式に決定したのち、サイト全体に対してもロゴのコンセプトを踏襲するという流れで制作しました。
また、差別化という観点では、他の求人サイトと比べて色やモチーフを多く使用することで、親しみやすさ・温かさを感じられるようなデザインを心がけています。

牧野:サイト名が決まった段階で、デザインの方向性は概ね決まっていましたね。求人サイトの場合、「〇〇ナビ」や「転職〇〇」といったタイトルが多い中で、今回、「もしも、この宿ではたらいたら」という情緒的なタイトルが採用されたので、デザインもそのイメージに合わせて、明るく親しみやすいものになっていきました。

サイト名はどのような経緯で決まりましたか?

牧野:外部のコピーライターさんへお声がけをし、提案・打ち合わせを数回重ねた後、複数案の中から採用されました。EVOWORXサイドからサイトコンセプトや「情緒的」などのキーワードをコピーライターさんへ共有しつつ、また、今回は新規サービスになるので「略すことによる覚えやすさ」というのも考慮して選定しています。
見た人が、楽しい”もしも”を想像する、通称「もし宿」という案が出てきた時は、「これいいね!」となりました。

水野:サイト名から決める案件ってそうそうないですよね。

吉田:サイト名がデザインにも影響されてくるので、コンセプトから逸れたものが採用されたらどうしよう…と少し不安もありました。

牧野:その点でもこのサイト名に決まったのは大きかったですね。

はじめての求人サイト開発

実装はどのような流れで進めていきましたか?

水野:求人検索や応募などのサービス(バックエンド)はパートナーのシステム会社さんの方で構築していただいたので、EVOWORXではフロントエンドの実装に集中しました。
案件によっては、システム側によるフロントエンド実装の制限もあったりするのですが、今回はその制限もあまりなかったので、割と自由に実装できましたね。

牧野:システム会社さんを探す段階からフロントエンドの自由度が高いかどうかも考慮して選定していましたね。CSSの制約はあったんだっけ?

水野:Bootstrapの使用が条件となっていましたが、今回のデザインの再現は難しいと判断し、交渉の結果、通常のCSS(Sass)で実装する許可をもらいました。また、以前に別の案件でTailwind CSSを使用した際にバックエンドとの連携がうまくいかなかった経験があったため、今回はその反省を活かすことができたと思います。

フロントエンド実装環境

フレームワーク:Astro
スタイリング:Sass
クライアントサイドスクリプト:Vanilla JS、GSAPSplide

プロジェクトを通して直面した課題や解決策について教えてください

牧野:今回は外部のパートナーが多かったこともあり、各所との連携には苦戦しました。最終的にはパートナーにもミーティングに参加してもらうことで円滑に進めることができましたが、プロジェクト序盤では、EVOWORXの仲介で意見を交換する形になってしまっていたのが反省点です。
ただ、最初から課題は出てくる前提で動いていましたし、先述の定例ミーティングをセッティングしたりと、その都度うまく軌道修正できていたのかなと思います。

吉田:通常のWEBサイトとは違って、マイページ画面や管理画面などのデザインも必要だったので、その点は苦労しました。別案件で似たような画面をデザインしたことはありましたが、今回は完全にゼロからの制作だったので、参考サイトなどを見ながら手探りで進めていました。

水野:僕はエンジニアとして求められる対応力が通常の実務とは違っていた点ですね。
実装に関してはそこまで詰まる部分はなかったのですが、翻訳APIやメールの連携、ドメインの移管作業など、サーバーサイドの対応を求められるシーンもあって、調査に時間を要しました。

プロジェクトを通して新しく挑戦したことはありますか?

牧野:プロジェクト自体チャレンジングなものでしたが、一番は管理画面の設計ですね。
管理画面の配置調整や機能など自由度が高い求人サイト向けCMSを採用したので、求職者がメッセージを送ったらここに飛ばす、SNSログインをつける、csvダウンロードボタンの配置など、フロントエンド実装以外の部分も考える必要がありました。システム会社側の対応力も高く、何でもできますよくらいの温度感だったので、整理するのは大変でしたが楽しかったですね。

吉田:私は2つあって、1つ目はロゴの提案。ロゴをしっかり提案するのは初めてだったので、案出し→絞り込み→ブラッシュアップ、という作業を繰り返しつつ、段階を分けて提案を進めていきました。
2つ目はデザイン以外の仕事にも携われたこと。撮影に参加したり、絵コンテを作ってみたり、香盤表を作成したりと、通常の実務では中々経験できないことに挑戦できたのは良かったです。

水野:僕は先ほどの内容と重複しますが、翻訳APIやメールの連携、ドメインの移管作業など、これまでの案件ではあまり触れることのない領域に挑戦できたことですね。

任せられる、任せてもらえる関係

チーム内の雰囲気はいかがでしたか?

牧野:3人とも年齢が近いこともあって、良い意味で遠慮がなく、和やかな雰囲気だったかなと思います。

吉田:週1の定例ミーティングの前後でコミュニケーションを取っていたので、あまり不安を感じずに進められました。いつも以上にコミュニケーションを取る機会が多かったのは良かったですね。

牧野:何なら2つ前の案件から連続で一緒にやっているので、1年半くらいになるのかな。「あ、またよろしく〜」くらいの感じでした。ただ、水野くんだけは常に進捗を気にしていましたね。僕と吉田さんの会話に割り込んできたりとか。笑

水野:常に自分事化を意識するようにしています。笑

お互いにリスペクトしている部分はありますか?

水野:牧野さんはやっぱりコミュニケーションが上手なところですね。お客さんとのやりとりが毎回円滑に進むのってディレクターとして凄い能力だなと思います。
吉田さんはデザインに対してめちゃくちゃストイックな点ですね。フィードバックがものすごい量で、僕もたくさん刺激をもらいました。

吉田:お二人に共通して言える事ですが、デザイン以外の部分で裁量を持たせてくれたのは嬉しかったですね。信頼してくれているんだなと思います。
あとは「何でも聞いてもらってOK」というオープンな空気感があって、比較的コミュニケーションも取りやすいです。

牧野:私は2人とも前向きなところがいいなと思いますね。新しいことに対して「できない」で終わらせるのではなく、「こうやったらできるかもしれない」という可能性を探る方向に意識が向いているので、クライアントにもスムーズに提案できました。
2人には安心して任せられますし、こちらとしてもやりやすかったです。

はじまりを見届け、”つながり”の第一歩へ

プロジェクトを通して印象に残っている出来事はありますか?

吉田:一番印象に残っているのは撮影ですかね。プロジェクトメンバーで箱根に行ってきました。

牧野:EVOWORXでは出張での撮影ってあまりないので、新鮮で楽しかったです。カメラマンさんと積極的にコミュニケーションを取れたのも貴重な経験でした。
あと印象に残っているのは、イベントに参加させてもらった時に、ブースに吉田さんが制作したデザインがたくさん飾られていたことですかね。

吉田:確かにあれは嬉しかったですね。あんな光景はこれまで見たことなかったです。笑
あとはコンテンツがスタートする瞬間に立ち会えたことですね。自分たちで0から作り上げてきた一発目の記事が投稿されたシーンは強く印象に残っています。

水野:そうですよね。やっぱり最初から作り上げてきたものが、どんどん形になっていって、しっかり運用されているのを見た時は感動しました。今も絶賛求人や応募が増えていっているみたいなので嬉しいですね。

牧野:1人目の求職者登録とかテンション上がったよね。「動いた!はじまった!」って感じで、他のプロジェクトだとなかなかできない体験でした。

最後に本サイトの推しポイントを教えてください

吉田:私はやはりサイト名とロゴです。求人サイトは使ってもらってこそ価値があるので、何回も見にきて欲しい、覚えて帰って欲しいという想いを込めて制作しました。ロゴも大きめに配置しています。

やわらかさを残しつつ、大きめのロゴとコピーが目立つファーストビュー

牧野:僕は構成ですかね。宿泊業界の求人サイトの場合、「施設」から見せるか「求人」から見せるかのどちらかの構成になるのですが、宿泊業界の印象値を上げるためにも「施設」をどれくらい素敵に伝えるかという構造にこだわって設計しています。
施設紹介の文章や「数字で見る」の情報だったり、他サイトの差別化を図る提案や想いを、現在運用をしている咲楽さんやパートナーの協力もあり体現できているのもポイントですね。

ユーザーに安心感を与える、情報の質にこだわった施設ページ

水野:僕はファーストビューですね。ユーザーが検索して最初の表示された画面の印象って、差別化させる上ですごく大事だと思うので、ファーストビューのアニメーションは特に工数をかけて実装しました。

「つながり」を彷彿とさせるファーストビューアニメーション

牧野:ちなみにファーストビューの写真は、カメラマンさんが別日に撮影した選りすぐりのものなんです。あとはイラストもトップページで使用するようなものをAboutページに配置したりと贅沢に使用しています。

吉田:写真もイラストもクオリティ高いですよね。あと、ファーストビューを写真から見せる求人サイトってあまりない気がします。

牧野:普通は情報や検索用のUIを大きく出すとかが多いですね。まずは覚えてほしいというところから、この構成になりました。

“ものづくり”で未来へつなぐ

「もしも、この宿ではたらいたら」の制作プロジェクトについてご紹介しました。
EVOWORXでは、「ものづくりで共に新たな価値をつむぎ未来へつなぐ」をビジョンに掲げ、時には業界の垣根も超えて、お客様との「ものづくり」を支えていきます。

ここまで読んでくださった皆さまが、EVOWORXの「ものづくり」に少しでも興味をもっていただけますと嬉しい限りです。
他にも多数実績を紹介しておりますので、是非お気軽にお問い合わせください。

制作したサイトはこちら

プロジェクトメンバー

Keisuke Makino

Nami Yoshida

Isamu Mizuno