多彩な演出でモード×アートを表現
HARE：ハレ
1. HAREウェブサイトの概要
HARE（ハレ）は、株式会社アダストリアが運営する日本発のファッションブランドです。
クールなモノトーンをベースにしたモードブランドで、国内店舗数は30店舗前後、ファッションビルおよび路面店舗を中心に展開し、中価格帯でトレンドファッションを提供しています。
HARE公式Webサイトは、「ブランド紹介」「コレクション情報」「ニュース」「店舗情報」「オンラインストアリンク」などを中心としたブランドの顔としての役割を担っています。
最新のコラボレーションやキャンペーン、新作コレクション情報が目立つ構成になっており、凝った演出表現でブランドイメージを可視化することに力を入れているのが特徴です。
2. サイトのターゲット
主なターゲット：主に 20〜30代中心で、感度が高く、トレンドに敏感な層。
性別：メンズ・ウィメンズとも展開しています。
個性的な表現・多層的で現実的な価値観で商品を選ぶ層。
ブランドとしてのストーリー性やトレンド性、ブランド体験・限定性・コラボなどに魅力を感じる層。
3. トップページの印象
HAREウェブサイトは、モード感にあふれた、個性的な表情で訪問者を迎えてくれます。
スプラッシュページ
カウントアップのロード画面に続いて、ランウェイをモデルが歩くコレクションショーの動画が表示されます。
クールな画面でブランドへの期待感を高める幕開けです。
ファーストビュー
サイトトップページのファーストビューは、個性的なデザインと演出で、ブランドのコンセプトを感覚的に伝えています。
手前には大きく「AUTUMN 2025」のタイポグラフィ、その後ろをコレクションアイテムを着用したモデル画像が、斜め方向のカルーセルで流れていきます。
一つ一つの商品を見せるというよりも、（今シーズンの）ブランドイメージを雰囲気で感じてもらう構成のように感じます。
ノースクロールのページ構成
トップページはスクロールスタイルではなく、ファーストビューのヒーローイメージの左右に配置したリンクでアクションを促し、次の展開に導く設計です。
左側面
ブランドロゴ、コラボレーションページへのリンク、各種SNSへのリンクが設けられています。
右側面
オンラインストア、ハンバーガーメニューが上部に並び、側面中央部にはコレクションへのリンクが設けられています。
ホバー演出の工夫
SNSリンクは「FOLLOW US」の文字がレコード盤のように回転し、ホバー時にTwitter、Instagram、TikTokへのリンクが表示されます。
コラボレーションページリンクの場合は、ホバーで左側にわずかに見えていた黒いドロワーが動き、その先のアクションを促す効果を出しています。
また、コレクションへのリンクは、ホバー時に波打つような動作→焦点を結ぶように再び文字が表示される細やかな動きの演出が施されています。
同時に、カルーセルの帯も弧を描き、私には重力が生じて曲がる光のイメージ図を思い起こさせました。
あらゆる方法でアクションへの注目を促す演出が取られている印象です。
4. ウェブサイトの特徴
HAREウェブサイトのデザインは、ブランドコンセプトを的確に反映しており、ブランドイメージを崩すことなくユーザーの期待に応えています。
ブランドコンセプトの提示
ABOUTページで、はっきりとブランドコンセプトが示されています。
その文字サイズは「最大限大きく」とったという印象で、文章というよりはもっと視覚に訴えるものであり、「テキストビジュアル」という言葉で表現したいようなデザインです。
この文字サイズとデザインは、ブランドの意志の強さを表しているように感じました。
ブランドイメージの一貫性
「カルチャーやアートが融和」したブランドというコンセプトにふさわしく、サイト全体が作品性を感じるデザインで設計されています。
トップページで言うと斜めのカルーセル、「2025」の文字を切ったデザイン、数々のホバー表現‥etc。
COLLECTIONページでは、スクロールに合わせて横に動くスライダー、ABOUTページでは、背景画像がスクロールに応じてクロスするように動く演出など。
過剰とも思える多彩な演出が施されたサイトからは、「カルチャーを作る」「新感覚を表現」「モードブランド」という意識が強く感じられました。
サイトの色彩
背景色：薄いグレー、グレー、濃いグレー。
ブランドカラー：黒。
全体がモノトーンで統一されており、ブランドコンセプトを忠実に表現しています。
色の使い方も迷いのないシャープさで、モード感を強調しています。
テキスト
文字情報は非常に少なく、言葉ではなくイメージで伝えるサイトです。
使われるフォントはゴシック・セリフ系で、英字に関してはコンデンスドフォント（幅の狭いフォント）を積極的に使用し、クールで尖った印象を高める効果を生み出しているように感じました。
5. ユーザーインターフェース
HARE の ウェブサイトは多くの演出で新しい感覚を与えながらも、比較的シンプルな構成でユーザーを誘導しています。
シンプルなナビゲーション
ハンバーガーメニューによるナビゲーション項目が明瞭で、「COLLECTION」「NEWS」「STORES」「ONLINE STORE」など必要なものだけが揃っており、ユーザーが目的を迷いにくい構成です。
演出を凝らした導線
メインメニューのシンプルさと対をなすように、トップページにはユーザーが楽しんでページ遷移を行える仕掛けがあり、サイト体験の豊かさを提供しています。
モバイル対応
モバイルでの表示に最適化された設計です。トップページのカルーセル方向が変更されるなど、モバイルに合わせた設計変更で対応しています。
まとめ
HARE公式ウェブサイトは、「モード × ストリート × アート」感を持ったデザインで、ブランドコンセプトを視覚的に表現しています。
トップページを筆頭に、凝ったアニメーション表現を多用し、それらを絶妙に組み合わせて完成度の高いサイトに仕上げています。
モノトーンのページを単調に見せない演出の加え方やジャンプ率の大きなデザインなどの視覚表現は流石で、流行に敏感な層であるユーザーへの意識を強く感じました。
プロダクツのモード感をサイトデザインでも表現することは、ユーザーにブランドの心を伝える上で重要でしょう。
ファンの期待を裏切らない、大胆な表現を可能にする細やかなサイト設計は、ブランドの基盤の確かさを感じさせてくれました。