our team

ノーコードでECを始めたい人へ(後編)

 

ECサイト制作の3つのステップ


ノーコードでECを始めたい人へ(前編)では、ECサイト制作の3つのステップのうち、(1)企画までを考えました。今回は、(2)デザインと(3)コーディングについてみてみたいと思います。

 

 

ノーコードでECを始めたい人へ(前編)>>

デザイン


デザインは大きく3つのステップに分かれます。プロのデザイナーはより細かく考えていると思いますが、ここではECサイト作成の初心者がまずは考えるべき3つのポイント、をお伝えします。

 

(a)イメージ写真を用意しよう

頭の中のコンセプトを洗い出したら、次に考えるのはイメージ写真です。お客さんに一番伝えたいイメージ、つまりブランドのキャッチコピーやコンセプトにフィットする写真素材を探す、あるいは撮影する必要があります。

 

写真素材を探す場合には、Shutterstockなどが有名ですし、Pexelsなどは無料の写真素材が大量に揃っていますので、おすすめです。

 

自社商品を販売する場合には「自社商品が写っているイメージ写真」を用意する必要があります。

商品単品写真と素材との合成というテクニックももちろんあるのですが、人間の目には不自然に写ってしまいますので、あまりオススメできません。先に書き出したイメージやブランドコンセプトに沿う写真を撮影できると、ECサイト全体の統一感がグッと上がりますのでぜひ試してみてください。

 

AirPhotoでも相談を受け付けております>>

 

(b)色とフォントを決めよう

次に、ブランドのコンセプトに沿った色とフォントを決めましょう。今回の記事では、ここを詳細に書くと長くなりすぎるので、参考図書として一冊ご紹介するにとどめます。ECサイトだけでなく、プレゼンテーション資料や企画書のデザインにも使える一冊なので、ぜひ読んでみてください。

 

 

(c)ECサイトの構成と配置を決めよう

最後に、ECサイトの構成と配置を決めていきます。

いわゆる「ワイヤーフレーム」を作るというステップです。

 

ワイヤーフレームとは、Webページのレイアウトを簡単に表したものをいいます。一般的に、複数人で完成イメージを共有する目的で作られますので、一人でECサイトを自作する場合には、必ずしもきちんとしたワイヤーフレームは必要でないかもしれません。

しかし、制作の作業に入る前に、イメージを“見える化”しておくと、制作のスピードが圧倒的にあがりますので、手書きでも一度構成と配置を決めておくということをオススメします。

 

さて、以上でEC制作の下準備は完了です。もし、それぞれのステップが100%完了していない場合にも心配しないでください。一度制作を開始してもすぐにやり直せるのがECサイトの自作です。「70-80%ぐらいできてるな」と感じたら、ぜひ制作のステップに進んでいきましょう!

 

次回は、ECサイトをShopifyで制作するステップについて、ご紹介していきます!

 

AirPhotoでも相談を受け付けております>>