ネットショップデザインの参考に!5つの代表的なレイアウト!

LINEで送る
Pocket

こんにちは、お酒は弱いけど飲み会の雰囲気が好きな相馬です。
雰囲気が好きなのでお誘いは基本断らないんですが、ちょっと飲むだけで気持ち悪くなってすぐリバース。気分が晴れてまた飲んですぐリバースのエンドリピート。お酒が強い人が羨ましい。

さてさて、ネットショップを長く運営していると、商品の売上やアクセスの傾向などさまざまな事情で、リニューアルの機会が訪れます。
また、これからネットショップを初めて本格的に運営し始める方もいるかもしれませんね。
Webサイトデザインに欠かすことの出来ない要素が「レイアウト」。
制作会社にオリジナルのデザインを依頼するときはもちろん、無料有料問わずネット上で配布されているテンプレートにも、さまざまなレイアウトのデザインが存在します。

今回は、ネットショップデザインの参考になりそうなレイアウトに着目。
レイアウトを5つの種類に分けながら、どんな時にそのレイアウトを活用するべきなのかをまとめました。

目的別、5つのネットショップのデザインレイアウト

なんと言っても扱いやすい「マルチカラム」

ネットショップだけでなくWebデザインにおいて普遍的なスタンダードであるこのレイアウト。
さまざまなトレンドが生まれ、デザインの傾向が移り変わろうとも、マルチカラムのサイトは数多く存在します。

特徴は、カラムごとに固定されたコンテンツが配置されるため、メインコンテンツとメニューの移動が簡単であること。
ユーザーにも優しい使いやすいレイアウトです。
商品詳細ページを見ながら、他のカテゴリに移動したいなんてときも、ひと目でどこをクリックすれば良いか分かるので、ネットショップにおいても定番と言えるレイアウトですね。数多くのブログでも採用されています。

ガトーフェスタハラダ参照:ガトーフェスタハラダ
左にカテゴリ、右に商品内容という、典型的な2カラムのネットショップのレイアウト。スタンダードでも無駄が無く使いやすい。

商品数やカテゴリ数、情報量の多いネットショップの場合は、マルチカラムがマストです。

臨機応変に管理しやすい「フリーレイアウト」

サイトの横幅を固定して、カラムが内容によって変化するフリーレイアウト。こちらもWebサイト定番のレイアウトです。
情報量が増えていっても応用の効く、将来の展開にも対応しやすいリスクの低いレイアウトです。管理面ではとても便利。

Yahoo! JAPAN参照:Yahoo! JAPAN
日本で最もアクセスのあるサイトのひとつであるYahoo!JAPANのトップページもフリーレイアウト。検索部分は1カラムで、コンテンツ部分は典型的な3カラムのマルチカラムレイアウト。

サイトが成長してもあまりレイアウト崩れを気にすること無くコンテンツを追加できるために、商品以外にも情報更新が多い場合は便利ですが、ちょっと古くさい印象は否めません。

インパクトを求めるなら「ワンカラム」

最近急激に広がり、もはや定番となりつつあるワンカラムのレイアウト。
大きな写真を使ってダイナミックに演出したいときは、このレイアウトが活かされます。
ネットショップでも多く見かけるようになってきました。

MORPHA WORKS参照:MORPHA WORKS
商品ページの写真も横幅いっぱいに大きく表示して、商品の特徴であるきめ細やかさも画面から充分に感じることができる。

大きな写真でリッチ感も出しやすく、こだわりのプレミア感の演出や、商品数は少なくともひとつひとつを丁寧に深く掘り下げてアピールしたいときなどはワンカラムのレイアウトがピッタリです。

たくさんの商品が並べられる「可変グリッドレイアウト」

ブログやメディアサイトなどでよく見かける可変式のグリッドレイアウトも、ネットショップに応用できそうです。
ユーザーのウインドウ環境に合わせてグリッドの並びがスムーズに最適化するため、情報を伝えるデザイン面でのスキが出来にくいメリットがあります。一度に多くのコンテンツへと誘導できるところも魅力です。

quadro参照:quadro
ウインドウのサイズに合わせて配置が変化する可変式のグリッドレイアウト。大小の商品サイズのリズム感が心地よく、まるで写真を並べて商品を選んでいるような印象。

ネットショップでこのレイアウトにすると、一度に多くの商品を、比較的大きな写真で見せることができるのがポイント。お店のように、商品が棚に並んでいるイメージになります。
アパレルや雑貨など、写真が重要になる商品を取り扱う場合は、是非採用したいレイアウトです。

演出重視の「フルスクリーンレイアウト」

純粋に商品を販売するECサイトではあまり見かけないですが、フルスクリーンレイアウトはユーザーに強い印象を与えることが出来ます。
写真が主役になるので、こちらもビジュアル面がキモになるレイアウトです。

Nike参照:Nike & Lidyana
動画をフルスクリーンで採用したとてもクリエイティブな例。単なる動画ではなく、ユーザーのクリックに合わせた商品を演出するインタラクティブな内容。スタートは右下のアラームボタンから。

ネットショップのサイトすべてのページをフルスクリーンにすることは難しく、あまり見かけません。
ただ、商品の特集ページや、商品ページへ誘導するためのコンテンツページでフルスクリーンを採用するのは、そのインパクト力を考えれば効果的だと思います。

まとめ:目的に沿いつつも、ネットショップには魅力あふれるデザインを

以上、ネットショップに採用したい5つのレイアウトでした。

レイアウトはデザインの重要な部分になるので、はじめの段階できっちりと決めていきたいところです。
その際には、目的や商品の性質とともに、魅力的なデザインになることをイメージしてレイアウトを決定しましょう。

ネットショップといえども商品を売ることだけが目的ではありません。
サイトのデザインは商品そのものの魅力を帰ることのできる力を持っています。実店舗で言えば、店内空間のデザインと一緒ですね。

そのサイトを訪れたユーザーが気持ちよく買い物ができる。
そんなサイトになるためのデザインを検討しましょう。

LINEで送る
Pocket

Sliding Sidebar