Web Design Detail

[架空サイト] MEN'S REFAINE LAB

20代〜30代後半の男性を想定し、ブランド体験と情報の伝わりやすさを両立できるよう、サイト全体の設計から実装まで一貫して制作した架空の化粧品ブランドサイトです。

PROJECT OVERVIEW

作品概要

20代〜30代後半の男性をターゲットに、ブランドの清潔感と信頼感を伝えながら、サービスの目的と提供価値が自然に伝わるよう設計した架空の化粧品ブランドサイトです。

案件概要

男性向け化粧品ブランド「MEN'S REFAINE LAB」を想定した、複数ページ構成のコーポレート寄りサイトです。ブランドの世界観だけでなく、サービス内容や導線のわかりやすさも重視し、Figmaでのデザインカンプ制作からフロント実装まで一貫して対応しました。

制作目的

ブランドに興味を持ってもらう入口として、清潔感や信頼感のある印象を与えながら、「立ち寄れる・試せる・続けられる」という提供価値が自然に伝わる見せ方にすること。

ターゲット

20代〜30代後半の男性ユーザー。スキンケアに興味はあるものの、ハードルの高さや継続のしづらさを感じやすい層を想定し、親しみやすさと信頼感の両立を意識しました。

レイアウト設計

ファーストビューでブランドの第一印象とキーメッセージが伝わるよう情報を整理し、その後のセクションでサービス内容や価値が段階的に理解できる構成にしています。複数ページサイトとして、各ページの役割が重複しないよう整理しながら、全体として一貫した導線とトーンになるよう設計しました。

制作期間

14日（構成検討〜実装）

Figmaでの構成設計とデザインカンプ制作を起点に、コーディング実装まで一貫して行い、ブランドの世界観と情報のわかりやすさが両立するよう制作しました。

担当範囲

構成 / デザイン / コーディング / 実装調整

情報設計からビジュアル設計、フロント実装までを一貫して担当し、複数ページ全体で統一感のある見せ方になるよう調整しました。

使用ツール

Figma / Photoshop / Illustrator / HTML / CSS / JavaScript / PHP

デザインカンプ制作からビジュアル調整、画面実装までを行い、見た目の再現性と閲覧しやすさの両立を意識して仕上げました。

想定媒体

PC / スマートフォン

PCでの情報整理だけでなく、スマートフォンでも情報の優先順位が崩れないよう、レスポンシブでの見え方を意識して設計しています

制作ポイント

ブランドの世界観を視覚的に伝えるだけでなく、サービスの目的や提供価値が段階的に理解できる構成にすることで、複数ページサイトとしての設計力が伝わるよう意識しました。デザインカンプから実装まで一貫して対応する中で、見た目と使いやすさの両立を重視しています。

Design Points

コーポレート寄りのブランドサイトとして、第一印象の見せ方だけでなく、サービス内容や導線のわかりやすさまで含めて設計することが重要だと考え、全体構成とトーンの一貫性を意識して制作しました。

ファーストビューでブランドの印象とキーメッセージが伝わるよう要素を整理し、その後のセクションでサービス内容や提供価値が自然に理解できる流れを設計しました。情報量が増えても読みづらくならないよう、見出しと余白で整理しています。

複数ページのサイトとして、閲覧者が迷わず必要な情報へ進めるよう、ページごとの役割と導線のつながりを整理しました。各ページを個別に見ても伝わり、全体で見ても一貫性が出る構成を意識しています。

Figmaで制作したデザインカンプをもとに、コーディング実装まで一貫して対応することで、意図した見た目や余白感を崩さずに再現しました。ビジュアル面だけでなく、実装後の見え方や操作感まで含めて調整しています。