Graphic Design Works｜Behance
日々のインスピレーションをもとに制作したグラフィックデザイン作品をBehanceに掲載しています。アイデアをすぐにビジュアル化し、作品として発信しています。
Role / Tools / Timeline
Role:UI / Web Visual Designer
Tools:Figma, Codex, Claude Code
Timeline:2026年5月
本プロジェクトでは、サイト全体のビジュアル設計、情報構成、レイアウト、CTA設計、SaaSらしいダッシュボード表現、ページ間の導線設計を担当しました。Codex と Claude Code は、主に実装面での補助ツールとして活用しました。デザイン判断や画面構成をAIに任せるのではなく、コーディングやページ構築の技術的な負担を軽減することで、私はレイアウト、配色、情報の見せ方、SaaSらしい信頼感の表現に集中しました。
Problem
近年、多くの企業がAI導入に関心を持っていますが、実際には「どの業務に使えるのか」「既存ツールとどう連携できるのか」「導入後に安全に運用できるのか」が分かりにくいという課題があります。
特に大企業や伝統的な企業では、AIに対する期待がある一方で、セキュリティ、運用管理、社内承認、既存システムとの接続など、多くの不安要素があります。
そのため、単に「AIで便利になる」と見せるだけではなく、業務フロー、導入ステップ、運用状況、料金、セキュリティまでを整理し、企業担当者が安心して検討できるWeb体験が必要だと考えました。
Target User
本プロジェクトの想定ユーザーは、AI導入を検討している企業担当者、情報システム部門、業務改善担当者、経営層です。
具体的には、社内の問い合わせ対応、請求書処理、営業支援、レポート作成、SaaS間連携など、日常業務の自動化に課題を感じている企業を想定しています。
また、AIに詳しくないユーザーでもサービスの価値を理解できるように、専門用語を前面に出しすぎず、「業務がどのように流れるのか」「導入すると何が変わるのか」が直感的に伝わる構成を意識しました。
Design Goal
デザイン上の目標は、大きく3つあります。
1つ目は、AI導入に対する不安を減らし、信頼感のあるSaaSサービスとして見せることです。白とブルーを基調にした清潔感のあるUI、整理されたDashboard、セキュリティ情報の提示によって、企業向けサービスとしての安心感を表現しました。
2つ目は、複雑なAIワークフローを分かりやすく可視化することです。Request、Agent、Approval、Report という流れや、AI Workflows、Integrations、Observability などの機能を、カード・ステップ・ダッシュボード形式で整理しました。
3つ目は、SaaSサイトとしての導入導線を明確にすることです。無料トライアル、デモ閲覧、料金プラン、導入事例、営業相談など、企業ユーザーが検討段階に応じて次の行動へ進めるCTA設計を意識しました。
Key Decisions
最も重要な設計判断は、FLOWBASE を「AIそのものを売るサイト」ではなく、「企業の業務を流れとして整理するSaaS」として見せたことです。
AIという抽象的な技術をそのまま説明するのではなく、Gmail、Slack、Notion、Salesforce などの業務ツールとつながるワークフローとして表現しました。これにより、ユーザーはAIを特別なものではなく、日常業務の中で使える仕組みとして理解できます。
また、トップページでは大きなビジュアルとDashboardを組み合わせ、先進的で親しみやすい印象を作りました。3DイラストによってAIサービスの未来感を表現しつつ、Dashboardや数値カードによってBtoB SaaSとしての実用性も感じられるようにしています。
ページ構成では、ホーム、プロダクト、導入事例、料金、会社情報を分け、SaaSサービスとして自然な情報探索ができるようにしました。初めて訪れたユーザーはサービス概要を理解し、より検討度の高いユーザーは料金やセキュリティ、導入事例へ進める構造にしています。
UI / Interaction
UIでは、SaaSらしい清潔感とAIサービスらしい軽やかさを両立するため、白、淡いブルー、黒を中心にした配色を採用しました。アクセントカラーにはブルーやパープルを使用し、先進性と信頼感のバランスを意識しています。
Heroセクションでは、「Get more out of your work.」という大きなメッセージと、AIワークフローを象徴する3Dビジュアルを配置しました。その下に、Request、Agent、Approval、Report の流れを示すことで、サービスの価値を視覚的に理解できる構成にしています。
Dashboard部分では、実行数、レイテンシ、成功率、削減時間などの指標をカード形式で整理し、企業ユーザーが運用後の状態をイメージしやすいようにしました。
また、Pricing、FAQ、Security、Contact などのページも用意し、単なるビジュアルモックアップではなく、実際のSaaS企業サイトに近い情報量と導線を持つデモサイトとして設計しました。
Result
最終的に、AI導入支援SaaSを想定した、複数ページ構成のWebデザインデモを制作しました。
本作品では、AIワークフロー、エージェント、外部連携、運用ダッシュボード、料金プラン、導入事例、セキュリティ情報までを一つのブランドサイトとして整理し、企業ユーザーがサービスの価値を理解しやすい構成を目指しました。
実際のプロダクト機能は実装していませんが、SaaSサービスの世界観、情報設計、CTA導線、Dashboard表現、BtoB向けの信頼感を視覚的に伝える作品として制作しました。
Reflection
このプロジェクトを通して、BtoB SaaSサイトでは、見た目の新しさだけでなく、サービスの仕組み、導入後の利用イメージ、料金、セキュリティ、サポート体制までを整理して見せることが重要だと学びました。
特にAIサービスの場合、抽象的で分かりにくい印象になりやすいため、ワークフローやDashboardなどの具体的なUI表現を使うことで、ユーザーが「自分の業務にどう使えるのか」を想像しやすくなると感じました。
今後は、実際の企業担当者へのヒアリングや、導入検討時の意思決定プロセスをさらに調査し、より現実的なSaaSサイトの情報設計やコンバージョン導線に発展させたいです。
※本作品はポートフォリオ用に制作した架空SaaSサービスのWebデザイン提案です。
