見出し画像

【真似したくなる！参考サイトを集めてみた！】　ファッション編

ころころ。

今回は「ファッション編」ということで、4サイトほどデザインが良いと思ったサイトとまとめました。

個人用まとめサイトですが、参考にしていただければと思います。




⚫︎5人のクリエイターと小松ダウン。｜ビューティー＆ユース｜ユナイテッドアローズ公式通販-UNITED ARROWS ONLINE-

URL:https://store.united-arrows.co.jp/s/brand/by/feature/2023/23aw_komatsu_down_men/

【モバイル表示を意識したレイアウト】
〈ビューティー&ユース〉と小松マテーレのコラボレーションダウンのサイトです。
PCのレイアウトを見ると、モバイル版の表示が想像できるでしょう。
またモバイル表示時にスクロールをすると、一部商品名などが追従してくるのですが、縦スクロールの流れを意識しているレイアウトであることがわかります。

キービジュアル
PC表示
スマホ表示
スクロールをすると右側の商品名などが追従する

  • TYPE：特設サイト

  • FONT：urw-din-condensed,input-mono-compressed,source-han-sans-japanese

  • COLOR：


⚫︎Collaboration with Astroboy | Onitsuka Tiger Japan

URL:https://www.onitsukatiger.com/jp/ja-jp/p/astroboy

【PC表示とモバイル表示のレイアウトの違いがあまりないパターン】
『鉄腕アトム』と『オニツカタイガー』のコラボ商品のサイトです。
こちらのサイトは、PC表示時とモバイル表示に大きな違いはありません。
モバイルファーストのサイトでは、工数や費用削減からモバイル表示をPC上でも行い、背景だけをPC用に制作することが多くあります。
こちらのサイトはうまく両方の表示を調整し、表示分けの工数を減らしていると思います。

キービジュアル
PC表示
スマホ表示

  • TYPE：特設サイト

  • FONT：Press Start 2P、matter,Noto Sans JP

  • COLOR：



⚫︎CHAMPION WHAT MOVES YOU | ブランドキャンペーン特設サイト

【画像のトリミングでPC表示とモバイル表示のレイアウトを分ける】
CHAMPIONの特設サイトになります。
画像のトリミングをうまく使い、PCとモバイルとの表示を分けています。

もう1つ注目したいのが、「CHAMPION」の文字です。
CHAMPIONのロゴ部分「C」のシンボルマークを残し、その他の「HAMPION」部分はさまざまな書体を使用し、いろいろな場面や人に合わせているところにメッセージ性を感じます。

キービジュアル
PC表示
スマホ表示

  • TYPE：特設ブランドサイト

  • FONT：pp-m,Noto Sans JP

  • COLOR：



⚫︎ANATOMICA【Official Site】

【新聞を彷彿とさせるレイアウト】
ANATOMICA（アナトミカ）の公式サイトです。
どこかヨーロッパの新聞を彷彿とさせるデザインです。
PCとモバイルのレイアウトですが、モバイルを意識しつつPCでのレイアウトも美しくまとめています。

キービジュアル　PC表示
スマホ表示

  • TYPE：ブランドサイト

  • FONT：中ゴシックBBB,JIS2004,sigurd,Libre Franklin

  • COLOR：



いかがでしたでしょうか？

機会があればぜひ参考にしてみてください。
少しでもお役に立てたら幸いです。

最後までご覧いただきありがとうございました！

いいなと思ったら応援しよう！