プロジェクト概要
宅配型トランクルーム・プレミアム収納サービス「HEYAHIRO（ヘヤヒロ）」の新規Webサイト立ち上げプロジェクトです。サービスの顔となるロゴデザインの制作から、サイト全体のディレクトリ構成、ワイヤーフレーム作成、ビジュアルデザイン、フロントエンド実装（コーディング）までを一貫して担当しました。さらに、会員登録・決済・マイページ機能などを実装するバックエンドエンジニアへのシステム連携仕様の策定・依頼まで手掛け、会員制Webサービスの基盤をゼロから構築しています。
基本情報
サイト名：HEYAHIRO（ヘヤヒロ）
サイト種別: 会員制サービスサイト（LP、会員登録・決済フロー、マイページ等のシステムUI）
担当領域
Webディレクター / UI・UXデザイナー / フロントエンドエンジニア
（サービスロゴ制作 / サイト全体構成 / ページ構成・ワイヤーフレーム作成 / Webデザイン / HTML・CSS・JavaScriptコーディング / バックエンド開発へのシステム要件・連携仕様の作成）
プロジェクトの目的と課題
-
信頼性を担保するブランド構築: 新規サービスとしての信頼感と清潔感を瞬時に伝えるため、ロゴデザインからUI全体まで一貫したトーン＆マナーを確立すること。
-
抽象的なサービスの視覚化: 「0.5畳」「1.0畳」といった収納スペースの広さを、一般ユーザーが直感的にイメージできるよう分かりやすく伝えること。
-
シンプルで使いやすいシステム: ログイン後のマイページ、アイテムの出し入れ（収納・取出）、退会フロー、エラー画面など、状態（ステータス）によって変化するシステム画面を網羅的に設計し、フリクション（摩擦）のないUIを構築すること。
施策とこだわったポイント
1. サービスの顔となるロゴデザインと、信頼感を生むブランドビジュアルの構築
サービスのコアである「ダンボール（箱）」をモチーフに、複数のアイディア検証を経てロゴマークをゼロから制作しました。アイソメトリックのミニマルな箱のアイコンと、視認性の高いモダンなタイポグラフィの組み合わせは、Web上のあらゆるサイズで美しく機能します。この清潔感と信頼感のある「ブルー」を基調としたロゴの世界観をベースに、UIデザイン全体の一貫したトーン＆マナーを確立しました。
ロゴマーク案（FIX前）
FIXしたロゴデザイン
2. ユーザーの迷いをなくす、直感的なプラン選択と契約フローのUI設計
会員登録時のプラン選択画面では、「0.5畳」などの広さに対し「ダンボール約19個分」という具体的な目安を立体的なイラストとともに配置し、ユーザーが自分の荷物量に合わせて迷わず選べるよう工夫しました。契約手続きへ進む画面では、上部に「収納スペース選択 ＞ お支払い情報の入力 ＞ 内容確認 ＞ ご契約完了」というステップバーを明記。現在どの段階にいるのかを可視化し、入力完了までの心理的ハードルを下げるUX設計を行っています。
3. ECサイトのような心地よさを実現した「マイページ」と「荷物管理」のUI
会員登録後のマイページ（ダッシュボード）は、現在の利用状況（ご契約・ご使用スペース）を一目で把握できるようにし、最も頻繁に行う「収納依頼」「取出依頼」のボタンをメインカラーで大きく配置しました。特に「取出依頼」の画面では、預けている荷物が写真付きのパネルで一覧表示され、ECサイトで買い物をするような直感的で心地よい操作感でアイテムを取り出せる設計にしています。
4. エラー画面から退会手続きまで網羅した、精緻なシステム要件定義
正常なフロー（ハッピーパス）のデザインだけでなく、入力エラー時の警告画面、確認画面、荷物が一つもない時の空画面（エンプティステート）、そして退会手続きの分岐に至るまで、Webアプリケーションとして発生しうるすべての画面遷移を自ら洗い出し、デザインとコーディングを行いました。システムがどう動くべきかを考慮した上でバックエンドエンジニアへ依頼内容（要件定義）をまとめたことで、開発時の認識のズレを防ぎ、スムーズなサービスリリースを牽引しました。
成果・評価
上流から下流まで一貫した設計による、スムーズなサービス立ち上げ
ロゴ制作によるブランディングから、UI/UX設計、システム要件の定義まで、Webサービス構築に必要な工程を横断的に担当しました。デザインとシステムの両面を考慮して画面仕様を整理し、バックエンドエンジニアへ的確に引き継いだことで、開発時の手戻りを最小限に抑え、会員制プラットフォームのスムーズなリリースに貢献しました。
