6月1日にリリースした新サービス「OfferBox mirai」。これまで築き上げてきたOfferBoxのブランドイメージを正しく継承しながら、いかにして低学年層に向けた新しい価値をデザインに宿らせるか。当サービスのデザインを担当した能勢さんと宗安さんに制作のこだわりを聞きました。
※大学1・2年生向け自己探求型キャリア支援サービス「OfferBox mirai」を6月1日より提供開始
株式会社i-plug
能勢プロダクトデザイングループ グループマネージャー
大学在学中にデザイン事業を興し、大手アパレルメーカーのECサービス立ち上げに参画。卒業後は総合通販・EC事業を行う株式会社千趣会に入社し、入社当初からwebディレクション/UXデザイン業務に約7年間従事する。退職後、事業立ち上げメンバーと再合流し、前述のメーカーとのEC/WebCRMプロジェクトなどに10年以上携わるなど、一貫してwebデザイン/UX領域でのキャリアを積む。2023年6月にi-plugに入社。現在はプロダクトデザイングループのマネジメントや、全社横断プロジェクトのデザイン/開発領域の全体管理などを担当している。
株式会社i-plug
宗安プロダクトデザイングループ UI/UXデザインチーム
新卒でデザイナーとしてのキャリアをスタート。その後Webデザイナーを経て受託制作会社でのディレクター職も経験する。前職のシステム開発会社では、新規サービス立ち上げ時のUX、UIデザインやデザインシステム構築をはじめ、リクルーティング、オフィス開設など組織づくりの基盤整備まで幅広く牽引した。2025年3月にi-plugへUI/UXデザインチームのリーダーとして入社。現在はデザインレビューやルール整備といったチームの牽引を中心に、全社的なクリエイティブ案件の内製化にも注力。将来的なデザインの統一や品質向上を目指し、その基盤を整えている。
ブランドのDNAを「解読」し、一貫性を再定義する
鹿毛今回のプロジェクトにおいて、まずデザイナーとして着手されたことは何でしょうか。
能勢長年愛されてきた「OfferBox」というブランドを、デザインの観点から一度「解読」し、文脈を理解して「OfferBox mirai」へと継承する作業が必要でした。
宗安「OfferBox mirai」と主力サービス「OfferBox」は別のサービスです。ただ、「OfferBox mirai」を通じて学生が1-2年生の時に蓄積した経験や学習は、将来「OfferBox」を使う就活生になったときに、自信や強みに変わるはずです。
経験や学習は、彼らの人生において地続きに蓄積されていきます。だから「OfferBox」と完全に切り離されたブランドをつくるのではなく、姉妹ブランドとして感じてもらう必要がありました。そこで考えたのが「共通性の担保」です。そのためには、既存の「OfferBox」のデザインが「なぜ、この形なのか」を遡り、理解する必要がありました。
違和感のない「馴染ませ」：言葉選びとデザイン
鹿毛実際のプロダクトのなかでは、どのようなこだわりを詰め込みましたか？
宗安特にプロダクトのUIには細心の注意を払いました。当サービスを1-2年生で使った後には、「OfferBox」も活用してほしいと考えています。そのため、「OfferBox」と使い勝手やデザインが乖離しすぎるとユーザーが戸惑ってしまうのです。基本的な操作感や表現は、「OfferBox」の設計思想を忠実に踏襲しました。
実は「OfferBox」は、企業側と学生側ではUIからワーディング（テキストのトーン）まで、大きく違います。 例えば、学生向けの画面には柔らかく後押しをするUIや文言を採用する一方で、企業向けの画面にはシンプルで簡潔、フォーマルな表現を使用しています。今回、両サービスの統一性を図るために、企業側と学生側両方のUIを改めて分析しました。
その結果、「OfferBox mirai」のデザイナー視点を起点に、「OfferBox」のデザインの改善点が見つかるなど、相乗効果が生まれました。既存のサービスに捉われるのではなく、新しい視点も取り入れられることにおもしろさを感じているところです。
既存の信頼と新しい価値を両立させたロゴ
鹿毛ロゴのデザインには、こだわりが凝縮されていると伺いました。具体的な制作プロセスを教えてください。
能勢こちらがOfferBox miraiのロゴです。
「OfferBox」のロゴを低学年のうちから同じものとして認識してもらうため、マークの形自体は変えず、既存のブランディングと新しい価値を両立させるための議論を多く重ねましたね。
宗安ロゴタイプに関しては、既存のデザインルールを理解することから始めました。「OfferBox」のロゴタイプのベースには、昔から愛される名作書体の骨格をベースにしていますが、柱の太さや、文字の高さ、角度など細かくカスタマイズされています。具体的にはこちらです。グレーの文字がベースとなった書体でそのまま「OfferBox」と打ち出したものです。黒い文字が、実際のOfferBoxのロゴタイプです。重ね合わせてみると、元々の書体から、文字の高さが調整されていたり、「O」が正円に変更されていたりすることがよくわかります。
もっと細かく小さい部分でいうと、それぞれの文字の角丸の調整などがあります。本来の書体のままだと角が尖っていますが、右側だけわずかに角を丸く調整しています。
そういった既存ロゴの隠れたルールを踏襲しつつ、新しい「mirai」の部分をどうするか検討をしました。左側のグレーがベースとなる書体でmiraiと打ち出したパターン、右側が調整を入れたものです。
「r」はOfferBoxのロゴタイプ内にあるまま利用し、「m」「a」「i」を「mirai」という特有の文字は、今回新しくベースの書体から調整していきました。 わかりやすいポイントは、「m」や「a」の縦の柱の上側部分を削り、かなり丸みを帯びさせたところです。また「i」は、縦ラインを短くし、上のドット（丸）の位置を下げることで、「mirai」という文字列全体でコロンとしたポップな印象になるよう調整しました。ここまで丸みを増やしたのには理由があります。それは当サービスが「OfferBox」よりさらに若い年齢層の学生の皆さんに使ってもらうものだからです。よりポップさや親しみやすさ、気軽さを感じてほしいという狙いがありました。 しかし、可愛らしすぎると子供っぽさがでてしまうので、良い塩梅を考えるのが難しかったです。ただ、元々の「OfferBox」のロゴマークとロゴタイプが、就活に向いたフォーマルな雰囲気であるため、「mirai」は思い切ってポップさに寄せても、全体で並べたときには程よいバランスに調和すると考えました。そういった考えから最終的な細かい調整を重ねてこの形に決定。
能勢デザインが本職ではないプロジェクトプロダクトメンバーたちに、こだわりを各論で伝えてしまうと本質的な議論になりにくいので、細部のディテールを伝える難しさはありました。まずは、前提となるデザインコンセプトである「若さゆえの柔軟さ」や「マチュア（成熟）でない」を表現したいということ、角の尖りや文字の一部分を削ぎ落とすことが与える印象や、その意味を伝えながら、共通認識として持てるようにしました。そこから具体的な案に落とし込み、デザインをベースとして議論しました。
そのほかにも、サービスの関係性やブランディングの観点から「OfferBox」と「mirai」の文字の大きさのバランスなども話し合いました。
鹿毛色のこだわりも教えてください。
能勢「OfferBox」のブランドカラーである「青」は、誠実さを象徴する大切な色です。「mirai」ではその青を起点にしながら、グラデーションを採用しました。新緑など、植物の青々とした若さに見立てています。プロジェクトメンバーとの議論では、マーケティング施策としての使いやすさや、私たちの思いが伝わるかなどを話し合いました。
ユーザーの声と向き合い、プロダクトを磨き続ける
鹿毛デザイナーとして、今後どのようにプロダクトを進化させていきたいですか？
宗安学生が日頃から「正しく」「日常的に」使えるサービスへと作り上げていきたいです。デザイナーの自己満足で終わらせず、愛用してくれる人が増えるようなサービスづくりを目指します。そのためには、学生や企業の皆さんが実際に使っている様子をみて、違和感があれば即座にデザインを直していく必要があります。そうした日々のアップデートこそが、プロダクトを進化させるための重要なプロセスだと思っています。
能勢私たちにとって、リリースは「完成」ではなく、あくまで「スタートライン」です。自分たちがこだわり抜いたデザインが、実際にユーザーの価値につながっているかを確かめながら、改修を繰り返していきます。実際の利用ログやユーザーの声と向き合い、私たちが提供したい価値と、求められている価値を探り続けていきたいです。
