売上アップのために知っておくべき基本の設計3つのポイント

最低限すべてのショップが備えておくべきページ

• トップページ
• 商品カテゴリ
• 商品ページ
• カート機能
• お問い合わせ
• ご利用ガイド
• 会社情報

リストアップした情報を分類します

コンテンツ設計で、リストアップした情報をもとに同じような情報をグループ化していきます。
ネットショップサイト全体にどのようなページがあるのか整理し、設計図にしましょう。
情報のグループ化がわからないときは、自分と同じ商材を扱っているネットショップを参考にしましょう。

サイト構造設計とは？

かんたんにいうと洗い出したコンテンツの全体が見えるように図にすることです。
このとき必要なページが抜けていないか改めて確認することができます。
サイト全体の情報設計を図で表したものをサイトマップと呼びます。
ここでは、ネットショップで一番多く使われているサイトマップ（階層型構造）について説明します。

小規模店舗に多い【階層型構造】

商品をカテゴリ別に分類し、カテゴリ単位で構成されたサイトのことを「階層型構造」とよびます。
「TOPページ」「カテゴリページ」「商品ページ」の3つを中心に構成されていることが多く、独自でショップを構築されたECサイトなどによく見られます。

注意すべきところ

たとえばAmazonは、「シューズ＆バッグ > かばん・ラゲッジ > トラベルバッグ > スーツケース」のように5階層以上の深さになっていることが多いです。
このように階層が深くあまりに細分化しすぎると、トップページから一番下のページまでの移動が多くなり（階層が深くなる、といいます）見にくくなります。
商品点数が少ない場合は、必要以上にページを細分化しないようにしましょう。

ナビゲーション設計とは？

サイトマップの情報をもとにページからページへの移動方法を考えることをナビゲーション設計と呼びます。
ページを移動するとき、ウェブサイトはリンクを辿って移動します。
そのリンクを適切に配置することによって、お客様はサイト内を迷うことなく移動することができます。

基本的なナビゲーションの種類

階層型ナビゲーション

サイトの一番上など、目立つ位置に配備されます。
サイトに訪れた人が最初に見る部分でもあります。

関連ナビゲーション

関連性の高いコンテンツへ誘導するためのナビゲーションです。

パンくずナビゲーション

現在位置を表示するためのナビゲーションです。
現在までの階層をたどることができるので、前の閲覧ページに移動するのに便利です。

画面設計とは？

いきなりデザインからはじめるのではなく、デザインの下書きをする必要があります。
各サイトにどのような要素を入れるか？といった【コンテンツの配置】と【購入までの動線】を確認するための設計です。
サイトを構成する要素を図で表したものをワイヤーフレームと呼びます。

ワイヤーフレームを制作することによって、コンテンツや情報設計の不足が見つかることもあるので、かならずこの工程をおこなってください。
ワイヤーフレームは、プロジェクトに関わる人たちとのコミュニケーションにも役立ちます。

社内で協力して制作する場合や社外の人にデザインを依頼するとき、「こんなレイアウトにしたいです」と話をすれば、できあがりのイメージを共有しやすく、新たなアイデアを引き出すきっかけにもなります。
デザインやコーディングといったそのあとの作業をスムーズにおこなうことができます。

また、ワイヤーフレームの多くは線画で表現します。
あくまでもコンテンツの配置図であるため、写真やボタンのサイズなどが厳密に表現されている必要はありません。

詳しくは、ワイヤーフレームの制作方法で説明しているので、参考にしてみてください。

デザイン制作とは？

ワイヤーフレームの設計にもとづき、ネットショップを制作することです。
ここからは、デザインスキルが必須になってきますので、なかなか難しい部分もあります。

デザイン制作では、自分の好きなテイストのデザインを作ってしまいがちですが、大切なことは、【取り扱っている商品】【お客様層】【どういった印象をもってもらいたいか】など見る人のことを考えてデザインすることが大切です。
ほかのネットショップを見て、素敵だなと思ったサイトを見つけ、なぜ良いと思ったのか考え、デザインの参考にしてみましょう。

また、制作ツールはPhotoshop・Illustratorなどがありますが、自分が使いやすいツールで制作してください。
AdobeCCなら体験版を一ヶ月無料で使うことができます。

• 参考：Adobe Illustrator CC
• 参考：Adobe Photoshop CC

デザイン制作については、ネットショップの制作において押さえるべき6つのポイントで詳しく説明しているので、参考にしてみてください。

システム構築設計とは？

デザインが終わったら、デザインをそのままウェブ上で表現していきます。

まずは、ドメインやサーバー、決済画面の構築の話は抜きにして、制作したデザインをどうやってウェブ画面に表示させるかを考えます。

このとき必要になってくるのがHTMLとCSSの知識です。
HTML・CSSを使って設計することをコーディングといいます。

コーディング方法については、コーディングってなに？初心者向けのコーディング基礎知識で詳しく説明しているので、参考にしてみてください。

変更修正がかんたんにできるツールを使う

１回目に制作したワイヤーフレームの内容で、すべてOKとなることはまれです。
作業を進めていく中で、何度か変更や修正が入る場合があります。

そういった場合、すぐにワイヤーフレームを修正し、常に最新の状態にできるよう、かんたんに作れるワイヤーフレームのツールを使用しましょう。
チームでどのツールが一番使いやすいか決めておくことも重要です。

1週間前にミーティングした内容が、ワイヤーフレームに反映されていなかったという状態は良くありません。
情報が共有されていない場合、ほかのメンバーが古いデータのまま作業を進めてしまい、むだな作業に陥ってしまうかもしれません。

参考：初心者でも使える6つ厳選！無料でワイヤーフレームを作成できるツール（TechAcademyマガジン）

デザイン要素を強く出さない

あくまでワイヤーフレームは画面を構成するコンテンツを簡潔にまとめたものです。
色や装飾を追加すると、そちらにばかりに気をとられ、本来確認すべきコンテンツや内容に目がいかなくなってしまいます。

デザイン幅を決める

サイト全体の幅（横の端から端までの幅のこと）は決めておいたほうがデザイン制作のときに誤差が出にくいです。
最近多くのサイトでは1024px（画面の横幅サイズ）くらいでまでに収めて制作されていることが多いです。

理由は現在一般的に普及しているPCのディスプレイ（PCの画面を表示する装置）が1024×768だからです。
デザインのトレンドとしては、900～1000px以上が主流です。
少し横幅が広いほうが情報もすっきり収めることができます。
下記のようなデータもあるので参考にしてみてください。

参考：上位300サイトの約7割がサイト幅「900～1000px」を採用。レスポンシブは1割未満（ネットショップ担当者フォーラム）

カラムを決める

カラムとは段組のことです。
たとえば、新聞やチラシのデザインなどで、見やすいように2段組や3段組にレイアウトを整えたりしませんか？ホームページを作る場合も同じで、最初に段組みをおこない、おおまかなデザインやコンテンツの配置などを決めます。
多くのネットショップでは2カラムを、採用しています。

ワイヤーフレームを構成するパーツの名前と役割

一番シンプルな基本構成の形を例題にし、２カラムデザインのTOPページを構成する、各パーツの名前とその役割を説明します。