WORKS

HMENZ WEB

#BRANDING　 #WEB　

たとえば、メンズ化粧品のWEBサイトで「黒」を基調にするのは、大きな挑戦です。なぜなら、ブラックは使い方を誤ると重苦しくなるからです。つまり、洗練されたブラックと、圧迫感のあるブラックは、まったく異なります。さらに、商品情報を分かりやすく届ける機能性との両立も必要です。

そこで今回ご紹介するのは、メンズコスメブランド「HMENZ（エイチメンズ）」のWEBデザイン事例です。クライアントはイルミルド株式会社様。

なお、ブランドカラーである「ブラック」を軸に、メンズ化粧品WEBとして商品コンセプトと世界観を伝えるサイトを構築しました。また、同ブランドの撮影についてはHMENZのイメージ写真撮影事例でご紹介しています。

まず、ブランドの象徴である「黒」を使いながらも、WEBとしての美しさを保つことが課題でした。そのため、単に黒いだけでなく、製品の高級感を引き立てる質感の表現が必要です。具体的には、次の3つを解決する必要がありました。

これらの課題を解決するため、&Aは撮影とWEB設計を一体で手がけました。つまり、メンズ化粧品WEBを「撮影の続き」として設計する発想です。なぜなら、撮影とWEBを別々に作ると、どうしても世界観にズレが生じるからです。

また、ブラックを美しく見せるには、余白とタイポグラフィが命です。そのため、情報の優先順位を徹底的に整理し、見せる要素を絞り込みました。同時に、スクロールのリズムにも強くこだわっています。

まず、サイト全体をブラックで統一する大胆な構成を採用しました。そこで、製品パッケージとサイトのトーンを完璧に同期させています。つまり、パッケージを手にした瞬間の印象と、サイトを訪れた印象が一致する設計です。

その結果、ユーザーがブランドに深く没入できるメンズ化粧品WEBが完成しました。なお、黒を使いながらも重苦しくならないバランスが、このサイトの最大の特徴です。

次に、HMENZの世界観をスクロールごとに体感できる構成にしました。具体的には、余白とタイポグラフィを緻密に計算し、情報の優先順位を整理しています。そのおかげで、製品の魅力が直感的に伝わる、説得力のあるページになりました。

また、情報を詰め込まないことが、高級感を演出する大切な判断です。一方、必要な情報は確実に届けるバランスを保っています。

さらに、自社で手がけた高品質なイメージ写真をサイトの要所に配置しました。たとえば、ファーストビューには最も力強い一枚を使っています。このように、写真とデザインを高度に融合させることで、ブランドの信頼性を高めています。

その結果、多くのユーザーから支持されるメンズ化粧品WEBが完成しました。なお、完成したサイトはHMENZ 公式サイトでご覧いただけます。

そもそも、優れたメンズ化粧品WEBは、デザインだけでは完成しません。たとえば、HMENZのように、撮影からWEB設計まで同じチームが担当することで、はじめて一貫した世界観が生まれます。つまり、撮影とWEBは切り離せない一つのプロジェクトです。

HMENZでは、ブラックを軸にしたメンズ化粧品WEBで、ブランドの独自性を最大化しました。なお、イルミルド株式会社様の他のブランドも含め、&Aは化粧品WEBをトータルで対応できます。

同一クライアントの化粧品WEB事例としてWHITH WHITEのブランドサイト制作事例、医療美容系WEB制作の事例としてFelK WEB・ブランディング事例もあわせてご覧いただけます。

メンズ・化粧品ブランドのWEB制作をお考えの方へ

「ブランドの世界観をWEBで表現したい」「撮影からWEB制作まで一貫してお願いしたい」という方のご相談を受け付けています。デザインからコーディングまでワンストップでサポートします。まずはお気軽にお問い合わせください。

クライアント	イルミルド株式会社様（公式サイト）
ブランド	HMENZ（エイチメンズ）（公式サイト）
カテゴリ	メンズスキンケア・コスメ
デザインの特徴	ブラック基調のブランドサイト／撮影ビジュアルと連動
対応範囲	WEBデザイン / コーディング / UI設計 / 撮影ビジュアル連動
関連事例	HMENZ 撮影（同一プロジェクト）／ WHITH WHITE WEB ／ FelK WEB