スタートアップ企業を中心に、Webサイト制作からブランド開発、内製化支援などを手掛ける株式会社caroa（以下、カロア）。100サイト以上のStudio活用実績があり、Studio Expertsのゴールドエキスパートランクを保有しています。同社はこのたび、READYFOR株式会社が提供する「レディーフォー遺贈寄付サポートサービス」のサイトリニューアルを手掛けました。クライアント側のデザイナーと役割分担をしながら進める、協業プロジェクトです。今回はカロアの葉栗さん、伊藤さんのお2人に、工夫やこだわり、特に意識したポイントについて詳しくお話を伺いました。想いを引き出し、価値創造につなげるデザインパートナー── まずは株式会社caroaの事業内容と強みについて教えてください。葉栗：弊社はWebサイト制作を中心としたデザインパートナー事業を展開しており、デザインを課題解決のための手段・仕組みと捉えています。そのため、達成したいことやビジネスモデル、今後の事業展開などを丁寧にヒアリングしながら、プロジェクトをご一緒させていただいております。日々交わされる言葉からあふれ出ている思いを拾い上げ、価値創造へ結びつけていくプロセスがカロアの大きな特徴です。── 今回サイト制作を担当されたプロジェクトの概要を教えてください。伊藤：READYFOR株式会社が2021年に開始した「レディーフォー遺贈寄付サポート窓口」のサイトリニューアルがご依頼内容でした。サービスの立ち上げ時に制作したということもあり、長く運用を続ける中で「デザインと事業の乖離」に課題意識が生じたそうです。パンフレットなどの制作物は、READYFOR社のインハウスデザイナーさんが常にアップデートしていたことから非常に高いクオリティだったため、今回はそこで表現されている雰囲気やトンマナをWebサイトへ反映させることも狙いの1つでした。▲レディーフォー遺贈寄付サポート窓口サービスサイト── どのような経緯でカロアに依頼があったのでしょうか？伊藤：Webサイトはもともと「Studio」で構築されていたことから、活用実績が豊富な制作会社を探せるStudio Expertsをチェックし、その上で弊社を選んでくださったと聞いています。お問い合わせ時の決め手は、「カロアの自社サイト内にあるインタビューコンテンツを読み、人柄が垣間見えたから」とのことでした。プロジェクトが始まってからどのようなコミュニケーションをする制作会社なのかは意識していたそうで、クライアントに寄り添う姿勢が、文章から伝わってきたとのことでした。その後、カロアのプランナーが最初の打ち合わせで、READYFOR社の事業内容にとても共感している旨を熱く語ったそうなんですね。その姿が記事を読んだ印象通りで、安心して依頼ができると感じていただけたと伺っています。インタビューのイメージとプランナーの熱意、一連の体験が最終的な決め手になったのかもしれません。丁寧なコミュニケーションによって築かれた信頼関係と共創プロセス── サイトの制作期間と関わったメンバーの人数を教えてください。伊藤：制作期間はおよそ4ヶ月でした。弊社メンバーは、PMを担当した私と実装部分を担った葉栗、アートディレクターの3名。そしてREADYFOR社のディレクター、デザイナー、事業部長、事業部メンバーの4名に参画いただき、合計7名でプロジェクトを進めました。── 制作はどのような流れで進んだのでしょうか？伊藤：まずはクライアント側の要望を確認し、実現のプロセスを考えるところからスタートしました。本案件は、シニアの方を中心に閲覧されているサイトだったこともあり、視認性やアクセシビリティの担保は必須でした。また、それ以上に意識したのはサイト管理のしやすさです。高い頻度で情報の更新がされていたため、CMSの活用なども含めて情報設計を丁寧に進めました。事業部のメンバーであれば誰でもスムーズな運用ができる管理体制をつくる。それが今回のプロジェクトで特に求められた点だったかなと思います。また紙面のグラフィックデザインの場合は、ホバーなどインタラクションまで設計しないため、Webデザインとしての読みやすさや使いやすさはカロアでリードして進めました。実装を想定したデザインをする上ではFigmaは非常に使い勝手が良いのですが、それもWebデザインの経験があるからこそ成り立つことです。今回のプロジェクトでは、そのあたりの進行サポートも同時並行で進めさせていただきました。── 与件整理や各種設計の部分がまずはポイントだったわけですね。その後のデザイン制作はどのように進めたのでしょうか？伊藤：まずは既存サイトのワイヤーをすべて引き直すところからスタートしました。トップページを弊社が作り、下層ページはクライアント側のデザイナーが作成する、というのが大きな流れです。デザインツールはFigmaを使用し、テキストや画像の入れ替えをすればコピー＆ペーストで横展開ができるようコンポーネントも用意しました。▲ワイヤーフレーム〜Webデザインの制作工程デザイン面でリードはしつつも、クライアント側のデザイナーの頭の中にあるイメージ・意見を汲み取る必要があります。そこで、クライアント側のディレクターとデザイナーとともに分科会をセッティングし、細かな調整を重ねていきました。── そのほかに、協業する上で大切にした点はありましたか？伊藤：強く意識したのがお互いの認識合わせです。より納得度・満足度の高いサイトを実現するために、オンラインホワイトボード「FigJam」を活用しました。ワイヤーフレームで全体を俯瞰しながら、気になるセクションやデザインの部分に付箋を貼ってもらったんです。事前に共有可能な課題などは解決しつつ、ニュアンスが伝わりにくい部分は対面でディスカッションをしました。また、振り返りがスムーズにできるよう、会話の内容・履歴をすべて記録することも重要なことでした。自分たちでも細かすぎる管理だと感じつつも、そこまでやるからこそクライアントとの信頼関係が生まれたとも感じています。▲Webデザインの制作工程実装工数を最小限に抑えることで、事業の羅針盤となるデザインに注力できた── 改めて、特にこだわったポイントがあれば教えてください。葉栗：サイト構造を大きく変更した点でしょうか。リニューアル前はCMSやリスト機能を使用せずすべてエディター上でコンテンツを更新していたため、管理が難しい状態にありました。こちらをCMSを活用して管理・運用がしやすい形に整えています。また、「過去に操作を誤ってページが消えてしまった」というお話も事前に伺っていましたので、できるだけCMSの操作だけでコンテンツの入れ替えができるように最大限工夫も施しました。伊藤：ユーザー側からも寄付先を選びやすいUI/UXにするため、寄付先のカテゴリ整理には時間をかけました。リニューアル後のサイトでは、「いのちを守る」というカテゴリの中に医療、動物、貧困、子育て支援、災害支援の5項目が並んでいます。これが以前は、18項目すべて区分けなく並んでいた状態でした。「レディーフォー遺贈寄付サポート窓口が選ばれる理由」のセクションも、現在は「相談件数1000件以上」というような実績を数字で表していますが、以前は掲載されていませんでした。ユーザー体験を良くするために必要な情報は追加しつつ、既存の情報も丁寧に整えています。▲「レディーフォー遺贈寄付サポート窓口が選ばれる理由」のセクション── プロジェクトを振り返り、カロアの強みを活かせた場面はどこだったと感じますか？伊藤：今回のようなプロジェクトでディレクターのアサインはどの制作会社でもしていると思いますが、プロジェクトマネージャー（PM）をチームに入れるのは珍しかったと思います。この点はREADYFOR社の皆さんからも評価していただいた部分です。今回はディレクター、デザイナー、事業部長、メンバーの4名と、密にコミュニケーションを取っていたので、不安要素を感じることなくプロジェクトを進めることができたと聞いています。報連相ではないですが、速やかに情報を行き届くような体制をつくることで、プロジェクト全体の質が高められたのではないでしょうか。葉栗：強み、という表現とは異なりますが、私たちのほうがStudioを使ったサイト制作の経験が豊富でしたので、実装面ではREADYFOR社側の負担が最小限になるような進め方をしました。できるだけデザインに時間を使えるように比重調整をして、Studioを使う意味を持たせました。今回は「Figma to Studio※」を活用することで、実装にかかる時間を最小限に抑えています。コピー&ペーストでデザインデータをインポートできるので、体感ではサイト全体の6〜7割程度が「Figma to Studio」で実装できたと思います。※詳しくはこちら：Figma to Studioについてサイト管理者とユーザー、双方からの高い評価を実現── サイト公開後の反響はいかがでしたか？伊藤：READYFOR社の担当者からは、「運用がしやすくなった」と何度も感謝されています。当初の目的であった管理・運用面の課題は無事に解決できたのではないでしょうか。ユーザー視点では、コンテンツのカテゴリ整理などの情報設計で評価をいただいてます。特にコンテンツの1つとしてコンサルタント紹介のページを作成したのですが、こちらはユーザーにとって信頼できる情報になるようで大変喜ばれています。── 今後、Studioを使ったサイト制作で挑戦したいことはありますか？伊藤：今回はFigmaでデザインデータを共有しながら進めましたが、Studio上で協業する進め方もまた面白そうです。クライアント側でStudioを細かなところまで使えるスキルセットがなければ、こちらがイチからレクチャーをしてもいいですよね。それによってクライアントの自走力は間違いなく上がると思います。キービジュアルや主要パーツは弊社に依頼すれば制作できるので、それ以外では自らの手を動かしてもらう。この関係性ができればクライアントと長くお付き合いできる気がするので、引き続き前向きに検討していきたいですね。カロアが今回手掛けた「レディーフォー遺贈寄付サポートサービス」サイトのリニューアルプロジェクトでは、4ヶ月という短期間で同社のインハウスデザイナーと連携しながらWebサイトの移行に成功しました。グラフィックを専門とするデザイナーとの連携が必要だったことから、FigmaやStudioに関するサポートも実施。クライアントとの密なコミュニケーションを通じて信頼関係を構築し、クオリティの高いWebサイトを完成させたカロアの伴走力を感じるインタビューとなりました。カロアはスタートアップを中心として、デザインの力でビジネスを加速させることを目指したデザインパートナーです。社会に貢献するアイデアを、より多くの方へ届けたいと思っている方はぜひご相談ください。▲カロアによるWebサイト制作実績（一部）