架空LP 人材マッチングサービスWEBサイト【自主制作】

■制作したもの

Photoshopでイラストや写真の加工をおこない、デザインカンプはFigmaを使用して作成いたしました。

※SP版カンプの仕様について： 高解像度ディスプレイでの閲覧やポートフォリオ上での視認性を考慮し、実機サイズの2倍（横幅750px）で制作・掲載しています。

■制作範囲・プロセス

制作背景 
SHElikes PRO デザイナーコースにて制作した「企業向けサービス紹介スライド」をベースに、ターゲットを「フリーランス人材」へと変更し、新たにWebサイトとしての再構築・自主制作を行いました。 

企業向けサービス紹介スライドのポートフォリオは　こちら

再構築のポイント
既存のスライド資料をベースにしつつ、Webサイトという媒体特性に合わせて「情報の体験順序」を再設計しました。静止画としての資料ではなく、ユーザーのスクロールに応じた視線誘導や、コンバージョン（登録）への自然な導線を意識した構成へとアップデートしています。

1. 情報設計（約2時間）
既存の企業向け資料を「フリーランス向けWebサイト」として最適化するため、要件の再整理、ペルソナ設計、競合の市場調査・分析を行いました。

 2. 構成・トーン設定（約5時間）

Webサイトとしての情報優先度を整理し、ワイヤーフレームを作成。また、ターゲットに響く世界観を言語化するため、ムードボードを作成しビジュアルの方向性を固めました。

3. デザイン制作（約8時間）
 導線設計に基づいたUIデザインの制作、および細部のブラッシュアップを行いました。 

■課題要件・ペルソナ

課題要件

本サイトでは、目的を「フリーランス人材の新規登録促進（無料登録）」へと再設計しました。これに伴い、ターゲットも「企業」から「WEB系エンジニアのフリーランス層」へと変更し、情報の優先順位を全面的に組み直しています。

ペルソナ

「フリーランス1年目、30代のWEBエンジニア」を主要ペルソナに設定。独立直後の不安や案件探しの手間に寄り添い、直感的に「自分に合う」と感じてもらえる構成を目指しました。

■デザインコンセプト

〇カラー設計
メインカラー：スライドのデザインを踏襲し、スタートアップらしい先進性を表現するため、鮮やかな水色を採用しました。 

ベースカラー：白と黒を基調としたミニマルな構成にすることで、視覚的なノイズを排除。情報の視認性を高めるとともに、企業の誠実さと信頼感を醸成しています。 

アクセントカラー：CTAボタンなどの重要箇所には、メインカラーの補色であるオレンジを配置。心理的コントラストを利用し、ユーザーを迷わせず次のアクションへ導く設計としています。 

〇タイポグラフィ設計

一貫性のあるフォント選定：サイト全体の統一感とモダンな世界観を演出するため、欧文・和文ともに「Inter」をベースに設計しました。
視認性と可読性の追求：IT系スタートアップと親和性の高いInterを軸に据えることで、英数字の美しさと日本語の読みやすさを両立。さらに、十分な余白（ホワイトスペース）を確保し、ユーザーが視覚的ストレスを感じることなく、スムーズに情報を読み進められるレイアウトを意識しました。

〇スタートアップの世界観を象徴するイラスト選定

スライドのデザインを継承し、冒頭のセクションには先進的なアイソメトリックイラストを採用しました。あわせて単色イラストを各所に組み合わせることで視覚的なリズムを生み出し、情報の優先順位を整理。密度の異なるイラストを使い分けることで、モダンな世界観を損なうことなく、洗練された印象と読みやすさの両立を追求しています。  

■デザインの工夫

〇メインビジュアル

共感を生むビジュアル提示：ターゲットであるフリーランス人材が「自分らしい働き方」を直感的にイメージできるよう、実際に作業をしている人物の写真を大きく配置しました。サービスカラーであるブルーのオーバーレイを重ねることで、ブランドの世界観を統一するとともに、テキストの視認性と先進的な印象を両立させています。

 利用のハードルを下げる工夫： CTAボタンの傍にスマートフォンのモックアップを配置し、実際のサービス画面をあらかじめ提示しました。これにより、登録後の利用イメージを具体化させ、ユーザーの心理的なハードルを下げてアクション（登録）へ導く設計としています。

〇ビジュアルシンボル

「円」と「縁」を繋ぐグラフィック設計
メインビジュアルに配置した大小の円形グラフィックには、単なる装飾以上の意味を込めています。

「縁（えん）」の象徴：サービス名の「Matchii」に合わせ、人と企業が繋がる「ご縁（円）」を円形で表現しました。

成長への軌道：左から右、そして上部へと流れるように円を配置することで、このプラットフォームを通じてユーザーと企業が共に「右肩上がり」に成長していく未来を、抽象的な視覚表現として落とし込んでいます。

 具象的な写真だけでなく、こうした抽象的なシンボルを組み合わせることで、サービスの持つ「温かみ」と「成長性」というブランドメッセージを、ユーザーの潜在意識に届けることを狙いました。

〇プロジェクトカード：エンジニアに馴染む「機能的なUI」 

開発ツールを意識したスタイリング
メインターゲットであるエンジニアが日常的に触れる開発ツールや管理画面を意識し、グレーベースの配色と太字（Bold）を効果的に組み合わせた「ツール感」のあるデザインを採用しました。

これにより、初見でもどこに何の情報があるか直感的に理解できる構成にしています。

情報の階層化と視覚的フック

・視認性と行動喚起： 最も注目される「想定額面」には、サイト全体のアクセントカラーであるオレンジを適用。コントラストを強めることで、情報の優先順位を明確にしました。

・スキルタグの活用 ： 使用技術（#React, #Nextjs 等）をタグ形式で配置。これにより、エンジニアが自分にマッチする案件かどうかを瞬時に判別できる、実用性を重視した UI を目指しました。 

洗練されたクリーンな印象
不要な装飾を削ぎ落とし、適切な余白（ホワイトスペース）を確保することで、ペルソナが好む「透明感のあるモダンなUI」を追求しました。情報量を維持したまま、見た目の重さを軽減し、ユーザーが心地よく閲覧できるレイアウトを意識しました。

〇ユーザーボイス：信頼性と親近感の演出

あたたかみのあるイラスト選定：他の装飾（円やモックアップ）には無機質でモダンなグラフィックを使用していますが、利用者のアイコンにはあえて手書き感のある親しみやすいイラストを採用しました。これにより、機械的なマッチングではなく「血の通った実際の体験談」であることを示し、ユーザーに安心感を与える設計としています。

職種の直感的な判別：エンジニアの職種（フロントエンド、バックエンド等）をハッシュタグ形式で明記しました。自分と同じ領域で活躍する人の声を一目で探せるようにすることで、サービス利用後の姿をより具体的にイメージしてもらえるよう工夫しています。

 ■制作を通じて得た気づきと学び 

ターゲットに応じた情報設計の重要性：同じサービスであっても、対象が「企業」か「個人（フリーランス）」かによって、求める情報や優先順位が大きく異なることを再認識しました。企業向けのスライドでは「実績や信頼性」が重視されますが、今回の個人向けサイトでは「自分らしい働き方が叶うか」という情緒的な価値をいかに優先的に伝えるか、という情報設計の難しさを学びました。

「自分事化」を促すデザインと体験：全セクションにおいて、ユーザーが「これは自分のためのサービスだ」と直感的に感じられるよう、言葉選びやビジュアルのトーンを追求しました。ターゲットの心に届くデザインを論理的に組み立てるプロセスを経験し、一つひとつの要素に意図を込めることの重要性を改めて実感しました。今回の気づきを糧に、今後もユーザー視点に立った丁寧な制作を積み重ねていきたいと考えています。