ファッションサイトのデザイン方法【ポートフォリオ作品例】

ファッションサイトのデザイン制作について、ポイントを解説します。

テンプレートのPSDはこちらからダウンロードできます。
ファッションサイトのデザインテンプレート（PSD）
画像やテキストなどを変えて、オリジナルのブランドサイトを作ってみてください♪

ファッションサイトのデザイン制作　４つのポイント

１.  使う色数を抑える

サイトの主役は服やジュエリーなどのアイテムなので、できる限り使う色数を抑えて、アイテムが引き立つようにします。白・黒・グレーなどの無彩色を背景色として使い、有彩色ではアイテムと喧嘩しないアイボリーや薄いトーンの色を使います。

２. 余白を多めに取る

できる限り要素間の余白を広く取ります。要素が接近して、ごちゃごちゃしていると、肝心の服や靴などのアイテムが目立たなくなるからです。

３. ブランドに合わせたフォントの選定

ハイブランドなら上品なセリフ体、身近で先進的なイメージを出したいならサンセリフ体を使います。セリフとサンセリフはそれぞれ日本語フォントの明朝体とゴシック体に対応すると思ってください。

今回のテンプレートはハイブランド寄りの設定のため、VOGUEとHarper’s Bazaarのフォント「Didot」と女性ファッション誌で多用されるBodoniを使用しています。
逆に、先進的なファッションブランドなら、とりあえずFuturaがオススメです。

ただ、最近の潮流としては、ハイブランドのロゴには、サンセリフ体が目立ち始めています。最近バーバリーやセリーヌがロゴを一新しましたが、ともにくっきりとしたサンセリフ体です。
そういう流れはありますが、一般的にはセリフ体の方が高級に見えるので、ハイブランドの設定の架空サイトの場合は、「Didot」や「Bodoni」を使いましょう。

４. 文字の間隔を広く取る

文字の間隔を広くすることで、高級なファッションブランドらしい落ち着いた印象を出します。

Photoshpのトラッキングは100〜200前後にしましょう。

本テンプレートで使用しているフォントや素材について

使用フォント

ロゴ：Bodoni（Adobe Fonts）
メインビジュアルのブラシ文字：SuperFly（有料フォント）
タイトル文字：FuturaとDidot（Adobe Fonts）
その他：游明朝（Mac/Windows標準）

AdobeFontsはCCのプランに入っていれば無料で使えます。
SuperFlyは有料のブラシフォントです。DesignCutsという海外サイトがフォントパック販売セールをよくやっているので、その時に僕は購入しました。PhotoshopVIPさんでセールの案内をやっているので、オシャレなフォントが欲しい方は定期的にチェックしてみてください。

使用素材

使用画像２枚ともUnsplashで見つけました。

メインビジュアル：Unsplash
２枚めの画像：Unsplash