ecサereplicationトに最近訪れた時のことを思い出してみてください。ウェブサ▪▪▪▪トがどんなデザ▪▪▪▪▪ンだったかを覚えていますか?
おそらく忘れてしまっているとは思いますが，どんなことを感じたかは覚えているのではないでしょうか?ワクワクして，嬉しくなり，満足感を感じたかもしれません。もしかしたら，目的の商品にたどり着くのが難しく，訳がわからなくて。
eコマスのデザンはウェブサ@ @トの見かけだけではありません。ウェブサイトが実際にどのように機能するかということに加え,一つのページから次へと移っていくページごとの流れ,ストーリーの伝え方,そしてウェブサイトそのものの雰囲気に至るま,ですべてが重要になります。
デザ电子邮箱ンのトレンドは日々変化しますが，素敵なデザ@ @ンのネットショップを作成するには，時代に左右されない4のビジュアル基盤があります。その内容に触れていく前に，まず以下の質問を考えてみてください。
“サ电子邮箱トに訪れた顧客には，どんな印象を抱いてほしいですか?”」
端的に言うとマーケティングとデザインは,顧客が行動を起こす,つまり理想的には(多くの)購入につながる体験を提供するためのものです。
そこで,現代的なECサイトの4つのデザイン基盤となる“信頼”“魅力的なビジュアル”“フォーマット”“ナビゲーション”を一つずつ掘り下げていきたいと思います。
eコマスデザンの基盤
「信頼」
初めてショップを訪れた人にとっては,ブランドや商品についてはもちろん,お客様に喜んでもらおうとあなたがどれだけ努力しているかなんてわからないでしょう。検討材料とはなるかもしれませんが,実際に購入するとなると,まず顧客がショップを“信頼”しなければ話になりません。
顧客は，商品がしっかりと手元に届くことがわかってから購入を決定します。以下の4つの情報は,どんなウェブサイトであっても掲載してほしい,信頼を築くために必要不可欠なものです。
特定商取引法に基づく表記
ネットショップを運営する上で避けることができないのが，この”特定商取引法に基づく表記です。消費者が安全に買い物ができるために,特定商取引法に基づいて販売者の情報を表記することが事業者に義務付けられています。
返品条件
返品条件は,気に入らなかった商品を簡単に返品できるだけでなく,顧客に”必要があれば返品できる”という安心感や信頼感を与えることができるので,実際の売り上げ増加にも寄与します。
技術的な証明
ウェブサ@ @トにShopifyペ批发商メントを追加することで,顧客情報を保護するための最新セキュリティー技術を搭載した,支払いサービスを使用することが可能になります。尚，セキュリティ，が万全である旨を示す画像やロゴバッジ，そして受け付けているすべての支払い手段を必ず表示するようにしてください。
まだ顧客がいない内から顧客の信頼感を得ることは，最大の難関と言えるでしょう。そのためネットショップをデザesc escンする際には，これらの信頼性を示す目印を活用することをお勧めします。
“魅力的なビジュアル”
オンラ电子邮箱ンで商品を販売している時は，ウェブサ@ @トの“印象”がすべてと言えるでしょう。
人々は1000分の50秒以内にウェブサ@ @トの第一印象を形成すると言われています。皆さんのネットショップの第一印象は，大部分がショップ上で使用した画像により左右されています。
商品画像は，オンラ。ネットショップでは，購入前に商品を試したり，触れたりすることができません。そのため，顧客は視覚的なものに頼り，商品が適正なものであるかどうかを判断せざるを得ないのです。
一般的に,背景が白い商品画像や,実際に商品を使っている様子を撮影したライフスタイル画像を使用することをお勧めしています。户外声音社のホ，ムペ，ジでは，ラブランドスト，リ，を伝える一方で，ビジタ，が商品の詳細を知ることができるように商品にフォ，カスした画像も使用しています。
大規模小売店のウェブサイトで商品を購入したことがあるならば,ほぼすべてのライフスタイル画像の中に,白い背景の商品画像が含まれていることに気付いた方もいるかもしれません。白い背景を使って撮影された商品画像は，eコマ，スでは言わずと知れた基準となっています。白い背景は商品を詳細に見ることを可能にすると同時に,商品からブランディング要素を取り除くため,異なるターゲット層へもアピールすることができるのです。
ライフスタイル画像を見た顧客は,自分たちを画像内のモデルと置き換え,日常生活でどのように商品を使えばいいかを思い描くことができます。そのため，ラaaplフスタaaplル画像を取り入れることはとても重要なのです。
商品画像は,ネットショップのエンゲージメント,コンバージョン率,リテンション率を高める鍵となる重要な要素です。
さらに，商品画像だけでなく，ウェブサesc escトの色調やフォントも検討する必要があります。素晴らしい商品があったとしても,ウェブサイトのデザイン(特に色とフォント)が上手く機能していないと,顧客は関心を失い購入を断念してしまうことが多々あります。ネットショップのデザesc escンは，商品を購入する際の顧客体験全体に影響を及ぼすのです。
“色”は人々の関心や感情を刺激する，とてもパワフルなルの一。ウェブサ@ @トの特定な場所に注目してほしい時や、顧客を購入へと導くためにはとても役立ちます。
ウェブサイトの色調は,主要な色二色(プライマリーカラーとセカンダリーカラー)に限定することをお勧めします。私自身，ウェブサトの色を選択する時には2種類の優れたルを使っています。通常はDribbbleというウェブサ▪▪トでカラ▪▪パレットを調べます。例えば,“红色”と入力すると,赤をカラーパレットに使ったウェブサイトの例が表示され,視覚的にどのオプションに最も惹かれるかを見ることができます。
以下はシンプルな白黒のテキストに,グリーンの色調をアクセントカラーとして取り入れたウェブサイトの一例です。
さらに，ウェブサ(アクセスのしやすさ)もしっかりと考えましょう。すべての年代のさまざまなユーザーがテキストを読みとれることができるように,十分な明暗差がある色を選ぶようにしてください。
最後に，どんなタ(活字デザaapl .ン)を起用するかを検討する必要があります。Times New Roman“顧客はのようなありきたりのフォントではなく,印象的で興味深いタイポグラフィーをウェブサイトに期待しています。ウェブサイトのテキストは情報を共有するためのものですが,タイポグラフィーはその情報の背景にある感情を伝えるために必要となります。
Shopifyテ，マストアでは，それぞれのテンプレ，トに推奨フォントが付いてきます。ウェブサイト上でこれらの推奨フォントを使うこともできますし,別の情報源から得たフォントを選ぶことも可能です。
色と同様にフォントは二種類までに限定し，使用目的を区別することをお勧めします。グラフィックデザイナーでない人には複数のフォント管理は一筋縄ではいきませんし,ウェブサイトがとても煩雑に見えてしまう可能性があります。フォントを二種類に限定すればそのような問題を回避することができます。まずヘッダやタトル用のフォントを選び，本文用としてもう一のフォントを選んでください。
超级黏糊糊社の例を見てみましょう。タ@ @トルにはブランドの雰囲気をしっかりと映し出したフォントが使われているのがわかります。また，本文用には読みやすいシンプルでクリアなフォントが使われています。
ヘッダ，にユニ，クなフォントを使うことで，ブランドの雰囲気を引き立てる演出をすることができます。一方で,商品説明やチェックアウトのテキストには,わかりやすい本文用のフォントを使用する必要があります。タ▪▪トル用フォントは比較的大きなサ▪▪ズで表示されるため，多少の装飾性があっても問題ありません。しかし本文用フォントには，サ。すべてのフォントが画面上で判読できるようにデザインされているわけではないので,不適切なフォント(例えば細めの无衬线字体など)を選んでしまうと致命的です。テキストが読めなければ，顧客はウェブサ。
“フォマット(デスクトップとモバル)”
comScore社によると,人々はデジタルメディアに費やす時間のおよをそ70%,モバイル端末上で過ごすということがわかっています。残念なことに,多くのEコマースウェブサイトやプラットフォームは,デスクトップで閲覧することだけを考慮してデザインされています。これでは，新たな売り上げの可能性を失ってしまいます。
Shopify上で運営されているネットショップはすべて”レスポンシブ対応しています。これは,ウェブサイトがデスクトップ,スマートフォン,タブレットなどの異なる端末や画面サイズに適応していることを意味しています。
スマートフォンに適したデザインテンプレートを選んだ場合には,自ら購入プロセスを経て,取引の流れがきちんと機能しているかどうかを試してみてください。もし上手く行かなかったとしたら，顧客が使用した場合にも同じことが起こり得るでしょう。優れたカート機能やスムーズなモバイル操作なども,テンプレートを最終決定する際には重要な要因となります。
“ナビゲ，ション”
ウェブサ。
優れたナビゲーションは,オンラインでのショッピング体験を改善し,マーチャントの売り上げや利益を向上させます。また、ナビゲ、ションはウェブサ、ト用に選ぶテンプレ、トにも影響を及ぼします。例えば,多くの商品を掲載したカタログをお持ちであれば,より広範囲なメニューを備えたテンプレートを選ぶことが得策です。
以下では，ネットショップのデザ▪▪ンガ▪▪ドラereplicationンをご紹介します。まず，ヘッダ，には2,3種類のメニュ，のみを使うようにし，明確で率直なタ，トルを付けましょう。ネットショップのトップレベルナビゲ，ションには，以下のようなヘッダ，メニュ，をお勧めしています。
- 商店(オンラ屏屏ンストア)[商品カテゴリ]
- 关于我们（会社概要）
- 畅销书(ベストセラア电子邮箱テム)
- 联系方式(連絡先/お問い合わせ先)
以下で紹介している3種類のメニュは，シンプルで優れたナビゲションの例です。訪問者にメニュ，の意図が一目でわかるようになっています。初心者の方はまず上記4つの項目を使うことをお勧めしますが,時間が経つに連れて”お客様が望んでいるものは何か”とういことが徐々にわかってくるでしょう。
その他のナビゲ，ションリンクは，ウェブサ，トの一番下にあるフッタ，に追加することができます。フッタ，に適したお勧めのリンクは以下の通りです。
- 商店(オンラ屏屏ンストア)[商品カテゴリ]
- 返品条件
- 特定商法に基づく表記
- サ，ビス利用規約
- 連絡先/お問い合わせ先
リンクがあまりクリックされていないようであれば，ヘッダやフッタはいでも変更することが可能です。あるいはサブナビゲーションメニューを追加し,その他の重要なページや商品一覧にリンクを貼ることもできます。
効果的を発揮するデザ@ @ン基盤
これら4のデザン基盤をしっかりと考慮することは，ネットショップを構築する上でとても大切なことです。スタトアップから大企業ブランドに至るまで多くのネットショップに携わってきましたが、これらのデザイン基盤はすべてのプロセスを通して常に重要な要素となってきました。
大切なのは,信頼性を築き,視覚的に魅力的なデザインを作り上げ,ビジターが使う端末を考慮し,そしてシンプルなナビゲーションを導入してビジターをできる限り早く商品へと案内することです。
原文:Stephan Peralta翻訳:クリンカ，ス恵子
