クリエイティブを通じて共に歩んだたくさんの方々のおかげで、2024年12月23日にカロアは4周年を迎えました。
しかし私たちはサイト制作に夢中になりすぎて、会社のことを全然アピールできていません。
なのでこの4周年の節目にカロアのことをもっと知ってもらい、愛されるを。もっと。な会社になれるように、普段はあまり表に出ないメンバーの想いや、制作への向き合い方をのぞいてもらうコンテンツをつくりました。
4周年を迎えたカロアを、のぞいてみませんか？
制作の舞台裏を
のぞく！
カロアでは、ノーコードWeb制作プラットフォーム「Studio」での制作を軸に、150を超えるウェブサイトを制作してきました。どのプロジェクトもすっごい大好きで思い入れがあるのですが、その中から少しだけピックアップして、普段は表に出ない制作メンバーの考えと共に、制作の舞台裏を一問一答形式でご紹介。
PICKUP 01
マネーフォワード
お金の課題を解決して人生をもっと前に進むことを目指したサービスを展開する株式会社マネーフォワードの採用サイトと10周年記念サイトのStudio実装をカロアにて担当しました。
interviewed members
ハグリ
creator
どんな経緯でプロジェクトが始まったのですか？
マネーフォワードさんからお問合せをいただいたのがきっかけです。私が偶然にも元々マネーフォワードさんのグループ会社で働いていたので、カルチャーなどは深く理解しているので、ぜひやらせてください！と強めにアピールしました（笑）
ハグリ
サイトのこだわりポイントを教えてください！
マネーフォワードのデザイナーさんが想い描く『マネーフォワードらしさ』を採用サイトのトップの動画や、10周年サイトのアニメーションなどでできる限り再現できるようにしました。
ハグリ
どれも凝ったアニメーションが多いですが、特に頑張った部分ってありますか？
10周年サイトのヒストリー部分のアニメーションですね！レシートっぽい表現をするために、最初にレシートを出して引っ込めたり、うまく他のレシートに干渉しないように調整するのは大変だった記憶があります！
ハグリ
PICKUP 02
ユビー周年サイト
2017年創業の株式会社Ubie。生活者向けプロダクト『症状検索エンジン ユビー』がローンチから3周年を迎え、節目を祝う周年記念サイトをカロアにて担当しました。Ubieのミッションである「テクノロジーで人々を適切な医療に案内する」が順調に達成され、医療と患者のマッチングが進んでいることや、ユビーのこれまでのあゆみを伝えるサイトとなり、SNSでも話題となりました。
interviewed members
いかちゃん
designer
かわいらしさの中に、医療系のクリーンさも感じる素敵なサイトですね。
こちらのデザインのこだわりポイントを教えてください！ありがとうございます＾＾
一番こだわったのは、メインビジュアルの図形のあしらいです！
はじめはシンプルな丸や四角のみでデザインしていたのですが、クライアントさんとミーティングをしながらその場で色々検証し、最終的にユビーさんの雰囲気やオリジナリティーがより表現できるよう、ロゴのパーツから展開した今の形になりました。いかちゃん
医療系のサイトだからこそ、気を遣ったポイントはありますか？
文字サイズは特に気を遣いました。
40〜50代の方も多く利用されるサービスの周年サイトということもあり、本文は少し大きめの17pxに設定しました。
また英語を多用することも避けているので、幅広い方に受け入れられるサイトになっていると思います！いかちゃん
PICKUP 03
TOKYO PRIME
株式会社IRISが運営するタクシーメディア『TOKYO PRIME』のサービスサイトのリニューアルをカロアにて担当しました。『TOKYO PRIME』らしさを盛り込んだグラフィカルなデザインでリニューアルしたい、というご相談を受け、『モダンミュージアム』をイメージした洗練されたデザインを制作しました。また、ポップなアニメーションやタクシー感が伝わる細かな演出にもこだわっており、見ていて楽しいサイトになっています。
interviewed members
くぼちん
PM
デザインのテーマとなった『モダンミュージアム』というイメージは、どのように固めていきましたか？
まず既存のサイトと理想のサイトのポジショニングマップを作成し、そこから『無機質』『有機質』などにカテゴライズしたムードボードも作成して、理想のポジショニングに就くためのイメージを細かく定義していきました。
くぼちん
カロアでは珍しく、デザイナー2人体制での制作でしたが、メリットなどはありましたか？
やはりアイデアの幅が広がることが一番のメリットだったと思います！
また1人にかかる負荷が減る分、全体的に余裕ができて、制作に集中してもらえたこともクオリティの向上に繋がったと思います。
ただ人数が増えるからこそ、設定したゴールにいかにブレずに導くかがとても重要でした。くぼちん
PICKUP 04
エムスリーキャリア
client
エムスリーキャリア株式会社
year
2021 / 2022
医師・薬剤師のための総合的なキャリアサービスを展開するエムスリーキャリア株式会社の総合採用サイトと中途採用サイトをカロアにて担当しました。クリーンさを持たせながらも、アットホームな社風が伝わるやわらかなビジュアルデザインを目指しました。
interviewed members
ハグリ
designer
みずもん
PM
総合採用サイトは、ほとんどハグリさん一人で対応されたとのことですが、どこまでの範囲を対応されたのですか？
まずはコンセプトワークから始めて、メッセージのライティングやデザイン、Studio実装までほぼ全て対応しました。
カロアを設立してまだ間もないタイミングでの、はじめての大きなプロジェクトだったこともあり、がむしゃらにやってました（笑）
非常に思い入れが深いサイトです。ハグリ
新卒採用サイトのこだわりポイントを教えてください！
一番はなんといっても、各々の個性が結集されキラキラ輝くメインビジュアル！一枚画像ではなく、パーツごとに絶対配置をして、細かく調整しました。
あと 『数字で見る』などの下層ページも、見やすくなるように図を使ったりしてこだわってます。みずもん
新卒採用サイトを制作するうえで、苦労した部分などあれば教えてください！
メインビジュアルが決まった後にメインコピーを変更することになって、ビジュアルの再検討に時間を取ってしまったところが大変でした..！
でもデザイナーさんが柔軟に対応してくれたおかげで、より良いサイトに仕上がったなと思います！みずもん
PICKUP 05
ECデータバンク
千葉県柏市を拠点とし、EC運営を効率化するWebサービスを提供している『ECデータバンク株式会社』とカロアによる、エンジニア採用を目的としたコーポレートサイトのリニューアルプロジェクトです。企業風土を理解するために初期から丁寧に対話し、会社の雰囲気や価値観、働くスタッフの温かい人間性を表現したWebサイトとなりました。
interviewed members
きょーぺい
PM
IT系のサイトは少し堅いイメージがありますが、このサイトからはとても温かみを感じます。
このアウトプットに至る経緯を教えてください！そうなんですよね！
「IT系だからカチッとさせよう」というイメージ先行で考えるのではなく、事業の本質や企業の想いを汲み取り、反映させることが大切なんです。
なので今回は、事業内容や従業員の方から滲み出る“温かさ”を軸にサイトを制作したら、らしさが出るのではないかとなり、イラストやテクスチャ感を活かしたデザインになりました！きょーぺい
制作を進める中で、一番苦労したことは何ですか？
予算とイラストの数のバランス調整が大変でした。
イラストをサイト全体に散りばめたかったのですが、予算内では多くのイラスト作成が難しく..
デザイナーさんと色々相談した結果、イラストをパーツごとに分解して散りばめるという方法をとっており、結果使い回し感を出さずに華やかなサイトにすることができました！きょーぺい
制作チーム内でのコミュニケーションはどのようにとりましたか？
カロアは基本フルリモートなので、Zoomやハドルでミーティングを頻繁に行いました！
チーム全員で行うことはもちろん、個人でも連絡を取り合って、認識や方向性のすり合わせ、アイデア出しなど、ワンチームで行いました。
そうやって密にコミュニケーションが取れていたからこそ、全ての関係者が満足できるサイトになったんだと思います！きょーぺい
PICKUP 05
キャリアの地図
client
ONE CAREER PLUS
web site
year
2021 / 2022 / 2023
次のキャリアが見える転職サイト『ONE CAREER PLUS』が、集めた転職事例や体験談を「キャリアの地図」として総まとめする企画サイトの2021 - 2023年版をカロアにて担当しました。毎年、工夫を凝らしたビジュアルを制作しており、2021年は『青い海に浮かぶ地図』2022年は『日本地図を作った伊能忠敬にあやかり、現代と江戸時代の地図を程よく融合した和テイストの地図』2023年は『キャリアの街の探索』をテーマに制作しています。
interviewed members
ひなちゃん
designer
Studio Design Award 2023で3冠を達成した2023年版ですが、ビジュアルがとても面白いなと思っていて、これはどのような流れで制作されたのですか？
プロジェクトマネージャーとクライアントさんの間で、すでにラフが作成されていたので、私はクライアントさんからいただいた『探索する』というテーマから、まずはムードボードを作成しました。
それをもとに、ラフイメージで渡された『俯瞰で見る街』をどう表現するか検証し、最終的にアイソメトリックデザインが採用されたって感じです！ひなちゃん
Studio実装をするうえで、苦労した部分などあれば教えてください！
実装はめちゃくちゃ力技でやっている箇所が..（笑）
2023年版は過去のサイトよりもレイヤー構造がかなり複雑だったので、絶対値やマイナスマージンでの細かや調整に苦労しました。ひなちゃん
一番のこだわりポイントを教えてください！
アニメーションとインタラクティブ要素は特にこだわってます！
トグル機能を使った乗り物の動きや、カスタムコードを使った看板の揺れ、Lottieを使った風船のぷかぷかなど、クライアントさんと何度も微調整を繰り返して、双方納得できる形で公開できました。ひなちゃん
PICKUP 01
M3 career
案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。
caroa project members
ハグリ
designer
質問が入ります。質問が入ります。質問が入ります。
回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。
ハグリ
質問が入ります。質問が入ります。質問が入ります。
回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。
みずもん
質問が入ります。質問が入ります。質問が入ります。
回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。
hinako
PICKUP 02
キャリアの地図
client
ONE CAREER PLUS
web site
year
2021 / 2022 / 2023
案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。
caroa project members
ハグリ
designer
みずもん
designer
hinako
designer
質問が入ります。質問が入ります。質問が入ります。
回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。
ハグリ
質問が入ります。質問が入ります。質問が入ります。
回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。
みずもん
質問が入ります。質問が入ります。質問が入ります。
回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。
hinako
PICKUP 01
キャリアの地図
案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。
caroa project members
ハグリ
designer
ハグリ
designer
ハグリ
designer
ハグリ
designer
質問が入ります。質問が入ります。質問が入ります。
回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。
ハグリ
質問が入ります。質問が入ります。質問が入ります。
回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。
いかちゃん
質問が入ります。質問が入ります。質問が入ります。
回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。
いかちゃん
PICKUP 01
キャリアの地図
案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。案件の概要が入ります。
caroa project members
ハグリ
designer
ハグリ
designer
ハグリ
designer
ハグリ
designer
質問が入ります。質問が入ります。質問が入ります。
回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。
ハグリ
仕事術のひきだしを
のぞく！
カロアメンバーは、個人で活動をしつつカロアにも参画している、という人が多く、それぞれ違った魅力的なスキルや経験を持っています。そんなメンバーたちが、カロアで実践している仕事術の”ひきだし”をご紹介します。
デザイナー
かなめん他業種の横断で
引き出しを増やす
デザイン以外に動画の現場に行ったり、SNSをやったり日々いろんな環境に身を置いているので、「ここの表現こっちに応用したら使えそうだな〜」っていうのを無意識下でストックしています。
プロジェクトマネージャー
くぼちん全員が気持ちよく
仕事ができる状態をつくるいろんなものをコントロールする立場だから、リソース状況やスケジュールはもちろん、悩みを聞く、解決方法を一緒に考える、丸投げしすぎないなど、一緒に足並みをそろえるように意識しています！
デザイナー
なぎデザインの裏側を見る
デザインが作られる過程を見るのが好きで、作業風景をYouTubeやSNSで探して見たりします。デザインのストックが増えたり、新たなツールの使い方を知ることもあり面白いです！
デザイナー
いかちゃんMTG中に
手を動かしちゃうクライアントさんとのMTG中に、これですか？こんな感じですか？って簡易的に見せれるものを作ってしまって、それを見せちゃう方が早く決まる！
バックオフィス
なっつ働きやすい環境に
身を置く
プロジェクトマネージャー
つぼちゃん実装脳で提案する
実装にも携わることが多いので、提案時には最終的に実装した時のことをイメージしながら伝えるようにしてます。そうすることでクライアントも最終どうなるかのイメージができ、安心してもらえるかなと！
デザイナー
きたがわ素直な頭で
デザインする例えばこの4周年サイトだと「カロアをのぞくというコピーだから、カロアをのぞく構図にしよう」とかとか、子供にも伝わる発想にこそ普遍的な魅力があると思うので、素直な表現を心がけています！
デザイナー
あんちゃん提案資料も
丁寧に提案内容に対する作り手の考えや、参考になるイラスト、図解など、提案資料にはいろんなキーワードを盛り込んで、意見交換がしやすくなるよう、認識のズレをなくせるよう心掛けています！
プランナー
???効果的なサイトが
ほしい方へ
デザイナー
えりち曲を流しながら
デザインをするデザインを作るとき、作りたい雰囲気と近しい曲を流すようにしています。すると、とてもナチュラルに雰囲気を作れちゃいます！
プロジェクトマネージャー
きょーぺい自分の考えが100%
伝わっていると過信しない口頭よりFigma画面を見せるなど、耳だけでなく視覚的にも、色々な感覚を使って精度を高めている。少しでも擦り合わせるのと、そうでない時ではアウトプットが全然違うと感じます！
デザイナー
はなデザイナーも
地図作りをするデザイナー側からもプロジェクトを見える化するため地図作りを心がけます！「このアウトプットを作るためには今はここだよね！」と現在地と未来を示す地図を見て同じ方向へ向けチームの力を最大化！
デザイナー
かなめん他業種の横断で
引き出しを増やす
デザイン以外に動画の現場に行ったり、SNSをやったり日々いろんな環境に身を置いているので、「ここの表現こっちに応用したら使えそうだな〜」っていうのを無意識下でストックしています。
プロジェクトマネージャー
くぼちん全員が気持ちよく
仕事ができる状態をつくるいろんなものをコントロールする立場だから、リソース状況やスケジュールはもちろん、悩みを聞く、解決方法を一緒に考える、丸投げしすぎないなど、一緒に足並みをそろえるように意識しています！
デザイナー
なぎデザインの裏側を見る
デザインが作られる過程を見るのが好きで、作業風景をYouTubeやSNSで探して見たりします。デザインのストックが増えたり、新たなツールの使い方を知ることもあり面白いです！
デザイナー
いかちゃんMTG中に
手を動かしちゃうクライアントさんとのMTG中に、これですか？こんな感じですか？って簡易的に見せれるものを作ってしまって、それを見せちゃう方が早く決まる！
バックオフィス
なっつ働きやすい環境に
身を置く
プロジェクトマネージャー
つぼちゃん実装脳で提案する
実装にも携わることが多いので、提案時には最終的に実装した時のことをイメージしながら伝えるようにしてます。そうすることでクライアントも最終どうなるかのイメージができ、安心してもらえるかなと！
デザイナー
きたがわ素直な頭で
デザインする例えばこの4周年サイトだと「カロアをのぞくというコピーだから、カロアをのぞく構図にしよう」とかとか、子供にも伝わる発想にこそ普遍的な魅力があると思うので、素直な表現を心がけています！
プロジェクトマネージャー
あんちゃん提案資料も
丁寧に提案内容に対する作り手の考えや、参考になるイラスト、図解など、提案資料にはいろんなキーワードを盛り込んで、意見交換がしやすくなるよう、認識のズレをなくせるよう心掛けています！
プランナー
???効果的なサイトが
ほしい方へデザイナー
えりち曲を流しながら
デザインをするデザインを作るとき、作りたい雰囲気と近しい曲を流すようにしています。すると、とてもナチュラルに雰囲気を作れちゃいます！
プロジェクトマネージャー
きょーぺい自分の考えが100%
伝わっていると過信しない口頭よりFigma画面を見せるなど、耳だけでなく視覚的にも、色々な感覚を使って精度を高めている。少しでも擦り合わせるのと、そうでない時ではアウトプットが全然違うと感じます！
デザイナー
はなデザイナーも
地図作りをするデザイナー側からもプロジェクトを見える化するため地図作りを心がけます！「このアウトプットを作るためには今はここだよね！」と現在地と未来を示す地図を見て同じ方向へ向けチームの力を最大化！
代表取締役
ハグリ
年収大公開
バックオフィス
なっつ
この”ひきだし”だけは
本当に開けてほしい
バックオフィス
なっつ
やっぱりこの”ひきだし”も
開けてほしい
代表取締役
ハグリ
年収大公開
○○○○○
○○○○
○○○○○○○○○○
○○○○○○
回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります。
バックオフィス
なっつ
この”ひきだし”だけは
本当に開けてほしい
回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります回答が入ります。
カロアをのぞいてみて
興味を持ってくれた方へ
©︎ caroa inc.
