「とりあえず作る」は危険？ECサイト制作の裏側

こんにちは。

fufu designです。

私は、SquareオンラインビジネスでECサイト制作するサービスを出品していますが、ECサイト制作って、実は「画面に見えない作業」が一番多いんです。

・誰に向けて何を売るのか

・どんな導線で見てもらうのか

など考えることが多くあります。

今回は、ECサイトが形になるまでの裏側をお見せします。

そもそもSquareオンラインビジネスって？という方へ

Squareオンラインビジネスは「ネットショップ作成＋支払い管理」をまとめてやってくれる便利なサービスです。

もう少しだけ具体的に言うと…

・専門知識がなくても

・テンプレートを選ぶだけで

・商品販売・予約・オンライン決済のサイトができます

＼こんな人におすすめです／

✔ 実店舗がある人

✔ これからオンライン販売を始めたい人

✔ 難しい設定は苦手な人

---

ECサイトの制作の裏側をお見せします

こちらの予約型ECサイトをサンプルに制作過程をお見せします。

制作全体の流れは、だいたいこんな感じです。

・前提条件の整理

・リサーチ

・サイトマップ、ワイヤーフレーム制作

・デザインカンプ制作

・画像などの素材、テキストの用意

・Squareオンラインビジネスで各種設定

・ECサイト構築

・テスト

・公開

【前提条件の整理】

まずは、前提条件の整理です。

前提条件は忘れないように、いつでも見返せるような所にメモしておきます。

【今回のECサイトの前提条件】
沖縄県で個人でヘアサロンをされている方からサロンメニューをオンラインで予約・販売するECサイトを制作してほしいとのご依頼。
・特徴：完全予約制・1席のみのプライベートサロン
・ターゲット：30代～40代の落ち着いた大人の女性
・トーン＆スタイル：モノトーンを基調にした、無駄を省いた上質なデザイン、美容室のブランドイメージ（スタイリッシュ・都会的・シンプル）を壊さないデザイン希望

【リサーチ】

次に同業や似た業界のホームページをリサーチします。

以下のような表にまとめます。

リサーチポイントは、

・トップページの画像のファーストビュー画像

・誰をターゲットにしているか

・フォントや配色

・どんなセクションがあるか

・ヘッダーのメニュー

・ボタンの位置　など

これらを言語化して表にまとめます。

この段階で、「この要素、項目、配色は使えそう」などデザインのイメージ膨らませてリサーチすることが大事です。

【サイトマップ、ワイヤーフレーム制作】

次にFigmaでサイトマップ、ワイヤーフレームを制作します。

サイトマップとは、サイト全体の「設計図」みたいなもの。どのページがあって、どうつながるかを事前に整理した一覧です。

ワイヤーフレームとは、ページの「下書きレイアウト」。色も装飾もなし。文字や写真をどこに置くかを、デザイン前に決める設計図です。

ここで意識するのは、

・必要な情報が入っているか

・関連する情報がつながっているか

・「予約する」ボタンはここでいいか　など

【デザインカンプ制作】

次にFigmaでデザインカンプを制作します。

デザインカンプとは、完成形をイメージするための見本デザイン。色・文字・写真の雰囲気まで含めた「ほぼ完成図」です。これがあると「思ってたのと違う…」が起きにくいです。

この時に大事なFV（＝ファーストビュー｜トップページの最初の画像）画像を複数案作成したり、サイト内で使うカラーパレットも作成すると次のデザイン構築が楽です。

【画像などの素材、テキストの用意】

デザインカンプ制作の際に、画像などの素材やテキストも一緒に用意します。

素材は無料素材やイメージ通りの素材がなければ、AIで生成してもらいます。

CTAボタン近くの印象的なコピーなどの、サイト内で使用するテキストもAIのサポートで作成します。

必要があれば画像の見栄えを良くするために、明るさや彩度などの補正を加えます。

【Squareオンラインビジネスで各種設定】

実際にSquareオンラインビジネスのアカウントにログインし各種設定をしていきます。

主にするのは以下のようなことです。

・オンラインショップの作成、店舗情報の設定

・商品カテゴリーの設定

・税金の設定

・配送方法の設定　

・商品、サービス登録

・予約設定　など

お店の状況に合わせて一つ一つ設定していきます。

【ECサイト構築】

そしていよいよサイト構築です。

ここまで準備してきた情報、材料を使い、デザインカンプなどの設計図を元に、実際に画像やテキストなどの素材を配置していきます。

主に行うこと

・サイトデザインの設定（サイト全体のフォントやカラーの設定）

・ボタン設置

・Instagram連携

・各種ページ追加

・ヘッダー、フッダー編集

・スマフォ表示の確認

・SEO、パーマリンクの設定　など

サイトの世界観を崩さないように、微調整と確認を繰り返しながら制作していきます。

【テスト】

そして公開前に各種機能が問題なく動くか確認します。

✔ カートに入るか？

✔ 予約・決済ができるか？

✔ お問い合わせフォームのメールが届くか？

✔ 予約・決済ができるか？　　など

その他のチェック項目の一部はこちらです⇊

✔ 商品画像がしっかり表示されているか？

✔ 商品説明文が簡潔で分かりやすいか？

✔ 「特定商取引法に基づく表記」ページがあるか？

✔ 「プライバシーポリシー」ページがあるか？

✔ スマフォ表示に違和感がないか？　　　など

【公開】

これらのチェック項目をクリアできたら、晴れて納品・公開となります。

---

最後に

ECサイト制作の裏側をお伝えしてきましたが、いかがでしたか？

「思っていたより、ずっと考えることが多いんだな」と感じたかもしれません。

でも実は、最初の準備さえできていれば、制作そのものは怖くありません。

何を売り、誰に届け、どう動いてもらうか。

ここがはっきりしていると、サイトは自然と形になっていきます。

だから私は、デザインや設定に入る前の「制作前の準備」（つまりお客さまへのヒアリング）をいちばん大切にしています。

事前相談も受けていますので、

気になることがあれば、どうぞ気軽にお問い合わせください！

▶ fufu designのECサイト制作サービス

https://coconala.com/services/3978360

https://coconala.com/services/3886248

▶ fufu designの購入前ビデオチャットサービス

https://coconala.com/services/4017606