【真似したくなる！参考サイトを集めてみた！】 ファッション編
今回は「ファッション編」ということで、4サイトほどデザインが良いと思ったサイトとまとめました。
個人用まとめサイトですが、参考にしていただければと思います。
⚫︎5人のクリエイターと小松ダウン。｜ビューティー＆ユース｜ユナイテッドアローズ公式通販-UNITED ARROWS ONLINE-
URL:https://store.united-arrows.co.jp/s/brand/by/feature/2023/23aw_komatsu_down_men/
【モバイル表示を意識したレイアウト】
〈ビューティー&ユース〉と小松マテーレのコラボレーションダウンのサイトです。
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用に制作することが多くあります。
こちらのサイトはうまく両方の表示を調整し、表示分けの工数を減らしていると思います。
TYPE：特設サイト
FONT：Press Start 2P、matter,Noto Sans JP
COLOR：
⚫︎CHAMPION WHAT MOVES YOU | ブランドキャンペーン特設サイト
【画像のトリミングでPC表示とモバイル表示のレイアウトを分ける】
CHAMPIONの特設サイトになります。
画像のトリミングをうまく使い、PCとモバイルとの表示を分けています。
もう1つ注目したいのが、「CHAMPION」の文字です。
CHAMPIONのロゴ部分「C」のシンボルマークを残し、その他の「HAMPION」部分はさまざまな書体を使用し、いろいろな場面や人に合わせているところにメッセージ性を感じます。
TYPE：特設ブランドサイト
FONT：pp-m,Noto Sans JP
COLOR：
⚫︎ANATOMICA【Official Site】
【新聞を彷彿とさせるレイアウト】
ANATOMICA（アナトミカ）の公式サイトです。
どこかヨーロッパの新聞を彷彿とさせるデザインです。
PCとモバイルのレイアウトですが、モバイルを意識しつつPCでのレイアウトも美しくまとめています。
TYPE：ブランドサイト
FONT：中ゴシックBBB,JIS2004,sigurd,Libre Franklin
COLOR：
いかがでしたでしょうか？
機会があればぜひ参考にしてみてください。
少しでもお役に立てたら幸いです。
最後までご覧いただきありがとうございました！
この記事が気に入ったらサポートをしてみませんか？