Finbridge｜情報設計・世界観設計 × Figma / STUDIO実装

▼ View Website

　https://brown086955.studio.site/↗

▼ View Prototype

　　prototype.finbridge.jp ↗

▼ View Design System

　　design.finbridge.jp ↗

課題要件

・心理的ハードル： 「難しそう・堅そう・売り込まれそう」という先入観の払拭
・情報の複雑性： 数値や経営支援という、テキストでは伝わりにくいコンテンツの可視化
・印象の両立： ビジネスにおける「確かな信頼感」と、相談しやすい「伴走感」の共存

設計方針

「数字を整理し、経営を前に進める伴走支援」 をコンセプトに、財務コンサル特有の“堅さ”や“圧迫感”を抑え、相談しやすく寄り添ってくれる印象を重視して設計したLPです。

設計ポイント

① ファーストビュー：空気感と信頼の両立

• シンプルな線画と柔らかい人物イラストを採用し、広く取った余白で圧迫感を軽減。

• 抽象オブジェクトを最小限に配置し、クリーンで洗練された「整理感」を演出。

②世界観・イラスト：テクスチャが生む親近感

• テンプレート的な無機質さを排除し、イラストに細かなTexture（質感）を加えることで温かみと親近感をプラス。

• イラストにTextureを加え、親近感を演出

• AI生成をベースに、Illustrator・Photoshopで緻密に調整を重ね、同一キャラクターとしての統一感を担保。

③ 情報整理・導線：視覚情報による感情の設計

• 「Problem ➔ Risk ➔ Solution ➔ Case Study」の順で、ユーザーの心理に寄り添うストーリーを構築。

• Before / After 構成を用いて改善イメージを視覚化し、複雑な財務内容を直感的に理解できるレイアウトへ。

• 読了後、違和感なく自然にCTA（相談窓口）へ接続する導線設計。

実装・構築

Figmaでの情報設計・AutoLayout設計を行い、STUDIOでレスポンシブ実装まで一貫して制作しました。

Component設計によるUI管理や、ホバー・導線設計・SVG最適化など、実運用を想定した細部調整も行っています。

まとめ

単なるBtoBのコンサルティングLPに留まらず、「相談しやすい財務支援ブランド」としてのアイデンティティを確立。余白・イラストトーン・情報設計のすべてを「静かな信頼感」という世界観へ一貫させたデザイン提案です。

完成デザイン