Bluearch Corporation
Web UIUX
/
ノーコード開発
概要
本プロジェクトのクライアントであるBlueArch株式会社は国産AUVを開発するスタートアップ。以前、一般社団法人設立時にコーポレートサイト制作を行なったクライアントだが、今回一般社団法人の株式会社化に伴い、事業領域・規模の拡大、新たなターゲット顧客にアジャストしたブランディングと構成の刷新を行ったコーポレートサイトを制作したかった。
私はUIUXデザイナーとして、依頼を受けてからリリースまで4週間という短期間で、クライアントの事業領域に精通したディレクターと連携しながら、プロジェクトの進行管理をはじめ、デザインからlow-codeでの実装・リリース前引き渡しまで一気通貫で担当した。
クライアント
BlueArch株式会社
役割
Web UIUX designer
完了
2025.5
Team
In collaboration with a project manager
事業キックオフにふさわしい、インパクトのあるサイトデザイン
Concept
一般社団法人から株式会社化に伴う、変化ポイントをクライアントと確認し、新しいサイトデザインのコンセプトに落とし込んだ。
新しいサイトは、事業領域や規模の大きさを感じさせる没入感のある体験で、ユーザーにビジュアルでもインパクトを残すサイトとすることを決定した。
コンセプトを構成に落とし込む
Wireframing
没入感のあるデザインを実現するため、画面幅を広くとって、余白を生かすレイアウトを組んだ。
会社沿革を紹介するセクションでは、単に一般社団法人→株式会社という流れを掲載するのではなく、一般社団法人時代に現場で培ってきた知見と、東京大学研究室と連携した世界水準の研究開発という、BlueArchのこれまでの歩みからくる独自の強みをフォーカスした情報設計を提案した。
UXを根拠にした提案と意思決定
Design decisions
デザイン提案の際は、アイデアの背景にあるユーザー行動・視線の流れを根拠として説明し、感覚論ではなくロジックでステークホルダーとの議論を進め、ユーザーにとってベストな意思決定を一つ一つ行なった。
01 カルーセル vs 横スクロール
採用募集中の職種リストを掲載するにあたり、カルーセルで職種リストを見せたいという希望をクライアントより受けた。クライアントへのヒアリングで採用状況と今後の予定を確認したところ、募集職種は現在４〜５件、将来的に10件程度に増える見込みだった。
このヒアリング内容を受け、まずカルーセルと横スクロールの2パターンをプロトタイプとしてステークホルダーに共有し、それぞれのメリット・デメリットを提示した。
カルーセル
メリット
インタラクティブで印象が良い
無限にループするため、求人数を多く見せられる
デメリット
無限ループかつインジケータ・進捗バーが実装できないという構造上、ユーザーが「全部で何件の求人があるか」を把握できないという問題がある。ユーザーは、一周したことに気づかず同じ求人を繰り返し確認する可能性がある。
自動送りまたは手動で１枚ずつ送る選択肢しかないため、募集職種が増えると求職者が職種の数だけクリックして1件ずつ確認することになる。応募判断においてスムーズな求人情報へのアクセスは重要なステップであり、それが妨げられる体験設計はコンバージョンにもマイナスに働く。
横スクロール
メリット
ループしないため件数が明確で、ユーザーが全件を把握しやすい
コントロールが完全にユーザー側にあり、求職者の操作ストレスが減る
デメリット
求人数が少ない場合や画面幅が広いデバイスではスクロールを必要としないため、単に横並びのリストとなり視覚的・体験的にチープになる
最終的に、体験のリッチさを優先するためにカルーセルが採用されたが、私が指摘したUX上の問題点を補うため、カルーセル直下に「募集中の職種一覧はこちら」のCTAを追加するという折衷案に着地した。
02 写真を１枚から２枚構成へ
NPO法人から株式会社化したという会社沿革を伝えるセクションで、ワイヤーフレーム上では、各セクションに写真を1枚ずつ掲載する構成だった。株式会社としての強みである研究施設の紹介に使用したい写真として水槽の写真1枚が共有されたが、単体で見ると黒い鏡面のように見え、水槽であること・研究施設の内部であることがパッと伝わりにくかった。
テキストで水槽について触れてはいたものの、サイト上では、ユーザーはテキストより先に写真へ視線が向かう。1枚の写真が持つ情報量だけでは文脈が不足していると考え、研究室内の様子が明確にわかる写真を1枚追加し、2枚構成にすることを提案した。
2枚を組み合わせることで、片方の写真が「研究室内にある水槽」であることがユーザーに自然に伝わり、どちらの写真も意図通りに伝わる構成になると判断した。
03 ビジュアルにこだわりたい部分は複数パターンを提案
ファーストビュー（サイトを開いた時に最初に表示される画面）やビジョンセクションは、ユーザーへの第一印象を左右する重要な部分であり、クライアントの思いを乗せる大切な部分だった。これらはレイアウトや使用素材、明るさなどを細かく調整したデザイン案を複数用意し、こだわってビジュアルを作り上げた。
複数案の中から最終決定を促す際は、「未来への明るさを表現することを重要視するならA案、没入感や威厳を強く表現したい場合はB案」など、判断軸を提供し、感覚ではなく言語化された判断基準をもとにクライアントが決定を下せるようサポートした。
完成したデザイン
UI Design
サイト運用のためのマニュアル整備
Support
更新性のあるサイトとするために、CMSモデルを多数使用して、サイト構築を行なった。それに伴い、クライアントのサイト運用の自走を手助けする運用マニュアルを用意した。マニュアルを整備することにより、今後はクライアントが自分で記事や募集職種などの更新をしていくことができるようになった。
インパクト
Outcomes
4週間でスピーディにサイト公開
クライアントは4週間後の記者発表に向けてサイトリリースを希望しており、そこに間に合う形でコーポレートサイトを公開することができた。
事業キックオフにふさわしい、インパクトのあるサイトが完成
新たな事業領域や規模感に見合ったデザインのサイトが完成し、クライアントからの満足のお声をいただいた。
