明るく、でも落ち着いた。男女問わず入れるアパレルサイト「POPLIN」を作ってみました

明るく、でも落ち着いた。男女問わず入れるアパレルサイト「POPLIN」を作ってみました

記事
デザイン・イラスト
 こんにちは。
 スピードWEB工房のじーのです。

 これまで雑貨店・美容院・技術系メーカー・カフェと、それぞれ違う雰囲気のサンプルサイトをご紹介してきました。

 今回は、街に根ざしたアパレルショップを想定して作ったサイトをご紹介します。
 (実在するお店ではなく、練習用に制作したサンプルです)
スクリーンショット (132).png

今回めざしたバランス

 このサイトで意識したのは、「ポップさ」と「落ち着き」のちょうどいいバランスです。

 明るくて元気な雰囲気は出したい。

 でも、キュートに振りすぎて子どもっぽくはしたくない。

 若い人にも、大人にも、そして男女どちらにも

「入りやすい」

と感じてもらえるお店を目指しました。

 一方向に振り切るのではなく、あえて真ん中を狙う。

 今回はそこがいちばんの工夫どころでした。
スクリーンショット (135).png

こだわった3つのポイント


 ポップさと落ち着きを両立させる配色

 差し色には元気なピンクを使い、明るさや楽しさを出しました。
 その一方で、ベースはアイボリーやくすみのある深い青緑でしっかり締めています。
 派手さと落ち着きを、色の役割分担で両立させました。

 男女どちらも入りやすい写真と言葉

 写真は女性だけに偏らず、男性や街のスナップもバランスよく配置しました。
 かっちりしすぎない自然な表情を選ぶことで、
  「気軽に立ち寄れそう」
という空気感を大切にしています。

 元気さを出す、大胆な文字づかい

 「NEW ARRIVAL」などの見出しは、太くインパクトのある英字で大きく配置しました。
 一部だけ色を変えることで、ポップな遊び心とデザインとしてのまとまりを両立させています。
スクリーンショット (137).png

世界観を、隅々まで統一する

 トップページだけでなく、LOOKBOOKやJOURNAL、Shop Infoといった各ページも、同じトーンで揃えました。

 色の使い方、写真の雰囲気、文字の見せ方を統一する。

 どのページを開いても「同じお店だ」と感じられることが、ブランドらしさのあるサイトには欠かせません。
スクリーンショット (134).png

スマホでも、雰囲気はそのままに

 服を探すとき、多くの方はスマホで見ます。
 だからこそ、小さな画面でもこの
  「明るくて落ち着いた」

雰囲気が崩れないよう調整しました。

 商品写真は大きく見やすく、文字は読みやすく、気になる服からお店の情報へスムーズに進めるように。

 画面が小さくなっても、お店の空気感は損なわないことを大切にしています。
スクリーンショット (141).png
スクリーンショット (142).png

最後に

 写真自体は今回サンプルとしてこちらで用意したものですが、

  「素材の良さを、狙った雰囲気に合わせて配置・構成する」

ことは、私が得意とするところです。

「うちのお店の雰囲気を、そのままホームページで伝えたい」

 ——そんな想いがある方は、ぜひ一度ご相談ください。

 まずはお店のことをお聞かせいただくところから始めます。

 ご閲覧ありがとうございました。

サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す