思わず購入したくなるようなＥＣサイトとは？
ECサイトの構築は、商品の魅力を伝えるだけでなく、そのショップやブランドの考え方やスタイルを印象付けることも大切。そして利用者が迷わず欲しい商品にたどり着けるかどうか、決済がスムーズに行えるかどうかといったユーザビリティも重要です。しかし、いざECサイトを構築しようとすると、どのようなサイト構成にするか、どんな見せ方にするか悩んでしまうことも多いはず。ここでは、つなWebエディターが独自の目線でECサイトづくりの参考になる事例を5つご紹介します。
土屋鞄製造所
優れた品質とデザインが多くの人に愛される革製品ブランド、土屋鞄製造所のWebサイト。製品の質の高さを感じさせる落ち着いたデザインのWebサイトですが、その品の良さをもたらす決め手はWebフォントの使い方にあるのではないでしょうか。例えば、見出しに使われている秀英明朝は、優しい声色で、そっと語りかけるような印象に。また、商品の説明文にはスッキリとした細めのゴシック体を使うなど、適材適所でフォントがしっかりと使い分けられているのも印象的です。まるで品の良い雑誌を読んでいるような感覚で商品の魅力を読み進めていくことができ、商品の購買意欲をかき立てられます。
つなweBエディターの注目ポイント
品の良さが表れる「文字フォント」
B.R.ONLINE
ファッションを中心にさまざまなライフスタイルを発信する、ファッションメディアマガジン＆ショッピングモール。Webサイトを訪れるとすぐに注目記事の見出しが目に飛び込んできて、興味をそそられます。このWebサイトでは、読み応えのある記事によって商品に対する興味がかき立てられ、その文脈から流れるように商品購入へ誘導しているのが特徴。丁寧な記事の執筆・編集体制を構築できているのが、このサイトの最大の強みだといえるでしょう。デザインも1つのテーマカラーでまとめられていて統一感があり、商品やコンテンツに集中できます。
つなweBエディターの注目ポイント
つくり込まれた「記事コンテンツ」
宇野カバン
岐阜市で手作りランドセルの製造・販売をしているメーカーのWebサイト。ランドセル製造に対する想いがトップページの中にしっかりとまとめられており、ものづくりへの実直さが伝わってきます。オーダーメイドの革製品という「高級感」でも、ランドセルという商品に出がちな「子供っぽさ」でもなく、ほどよい温もりを感じられるのがこのWebサイトの特徴。クラフトマンシップを持ちつつも頑固っぽさはなく、誠実に、子供たちに寄り添ってものづくりをしている、そんな人柄が垣間見えました。ステッチ（縫い目）をモチーフにしたデザインや、グローバルメニューに添えられたイラストからも温もりが伝わります。
つなweBエディターの注目ポイント
温もりが伝わってくる「ステッチのモチーフ」
CLOVERSKY
北欧家具と雑貨を取り扱うECサイトです。ASPショッピングカートサービスの「MakeShop」を使って構築。ASPならではの制約もあると思いますが、それを感じさせない高品質なWebサイトに仕上がっています。PCでもスマホでもハンバーガーメニューを用いて操作性を統一していますが、PCではメニュー一覧が画面全体で開き、たくさんの項目をスッキリと見せることに成功しています。また、白と黒のコントラストを上手に使ったサイトデザインもポイントだと感じました。ところどころに黒い背景のエリアをダイナミックに配置することで、全体的に引き締まった印象を与えています。
つなweBエディターの注目ポイント
引き締まった印象になる「白と黒のコントラスト」
park online store
東京都調布市にある生活雑貨店のECサイト。掲載している写真がどれもハイクオリティで、訪問者の目を惹きつけます。構図にもライティングにもこだわりが感じられ、さらに全体的な色のトーンも統一されているためWebサイト全体で印象のまとまり感が出ています。写真に添えられた文字は、あえてサイズを小さめにした細身のフォント。文字色も若干薄めの色を使い、主役である写真を引き立てます。また、オフィシャルサイトとECサイトを切り分けているので、ECサイトのほうは階層もシンプルで迷わず使いやすいサイトになっています。
つなweBエディターの注目ポイント
こだわりが感じ取れる「写真」
ECサイトは「何を、どのように販売するか」で、デザインもサイト構成も大きく変わってきます。ここで紹介した事例がECサイトづくりの参考になれば幸いです。また、気になった事例があったら、そのWebサイトを制作している制作会社にコンタクトを取ってみるのもオススメ。Web制作のプロならではの視点で、皆さんのWebサイトづくりのお悩みにしっかり答えてくれるはずです。