ECサイトのデザインの進め方

 2018.03.08  株式会社システムインテグレータ

ECサイトに重要なデザイン

こんにちは。システムインテグレータの佐藤です。

今回はECサイトのデザインについてお話したいと思います。

我々システムインテグレータは自社のECサイト構築パッケージであるSI Web Shoppingを用いてお客様のECサイトシステムの構築を行っているのですが、我々が主に担当するのはシステム構築の部分になります。

新しいECサイトのデザインをどのようなデザインにするのかを決めたり制作するのは我々のパートナーのデザイン会社であったり、お客様が選定されたデザイン会社になることがほとんどなので、プロジェクトとしては我々のシステム構築と並行してデザインの検討、制作が進んでいく形になります。

デザインの勘所についてはデザインを行っている企業のコンテンツを見て頂くとして、今回はECパッケージベンダーの目線で、ECサイト構築プロジェクトにおいてデザインの検討、制作がどのように進んでいくかについてお話していきたいと思います。

 

調査、分析、プランニング(ECサイトデザイン要件定義)

通常我々がお受けするECサイト構築のプロジェクトではシステムにどのような機能を準備するべきかという機能要件や、パフォーマンスやセキュリティといった非機能要件を決める要件定義工程を2~3ヶ月程度の期間で実施致します。

スケジュールや進め方によって要件定義にかかる期間はこれより短かったり、長かったりするのですが、おおよそ週に1,2回程度の打ち合わせをお客様と繰り返しながらシステムの要件を決めていきます。

このシステム側の要件定義と並行して、新しいサイトではどのようなデザインにすべきかの検討が進みますどこまで実施するかはケースバイケースですが、まずは以下のような調査を実施します。

 

・ヒューリスティック調査(デザイン会社による主観的な調査)

・競合調査(競合他社とのデザイン面に関する比較)

・インタビュー(実際にご利用されるお客様にインタビュー)

・定量調査(現行サイトのアクセス分析など)

 

中には「今のサイトと比べて今っぽくなっていればそれでいいよ」というざっくりとしていて調査が不要なケースもなくはないのですが、我々にご依頼頂くECサイト構築のご依頼はビジネスの拡大を目的とされている場合がほとんどですので、根拠に基づいたデザインにする目的で調査を実施されます。

一方で、ECに限らずウェブサイトのトレンドの移り変わりは早いので、初期段階ではあまり調査にコストをかけず、ローンチ後のアクセス分析を通じてデータドリブンな改善していく方針を選択されるケースもあります。

またこれもやるかやらないかはお客様次第になりますが、「このサイトはどんなお客様がどんな時に、どんな風に使って、どのようなことを期待するのか」といったような、このサイトのターゲットを定義した上で、お客様がどのような行動を取るのかを可視化していきます。

例えばどんなことを実施するかというと、代表的には以下の内容を決めていきます。

 

・ユーザー定義

・セグメンテーション、ペルソナ定義

・カスタマージャーニーマップ作成

 

どんなお客様がターゲットなのかを設定しないと、どのようなデザインが適しているかも決めづらいですし、思い描くお客様像がバラバラだと、どのデザインがふさわしいかも決めることが困難です。デザインを決定する上で重要なだけでなく、このプロジェクトに関わる誰もが共通のお客様像を思い描けるようにしておくことで、プロジェクト全体のコミュニケーションが円滑になるという側面もあります。

 

ECサイトデザイン設計(ワイヤーフレーム)

現行サイトや競合がお客様の調査を行った、お客様がどのような行動するかの仮説も立った、と、ここまで進むと、いよいよ目に見えるデザインに入れるかと思われるかもしれませんが、実はまだ早いです。画面数や画面にどのような要素が必要かを洗い出さないと、デザインに入ることは出来ません。

我々がお受けするプロジェクトではSI Web Shoppingというパッケージがありますので、どんな画面があって、どんな要素が画面に出ているのかは確認することが出来ます。しかしながら、ほとんどのお客様が機能のカスタマイズを実施するので、カスタマイズ内容を踏まえた上で画面数や要素を考える必要があるのです。

システムの要件定義では、どのような機能が必要かを決めていくのですが、この段階ではまだ画面はあまり出てきません。次のシステムの基本設計段階に移ったところで画面が出てきて、追加や変更になる機能が画面上ではどのような表現になるのかの検討が始まります。

「○○する機能を作る」と要件定義で決まったとしても、画面上でどのような動きが必要になるかを画面で確認することで想定の抜け漏れや、あるいは不要なものが出てくることもしばしばです。そのため、この段階ではまだあれが増えたこれが減ったということが起きるので、ここが固まり始めたところでデザインとしてようやく「ワイヤーフレーム」の設計に入ることが出来ます。

もちろんスケジュールによっては、先にワイヤーフレームが走り出すケースもあるかと思いますが、修正を出来るだけ抑えるという観点では、システムの基本設計が済んだ画面から着手していくという進め方が望ましいでしょう。

システムの要件定義、基本設計を踏まえて、ようやく目に見える「デザイン」であるワイヤーフレームと向き合うこととなるのです。

 

ECサイトデザイン制作

デザイン会社が作成したワイヤーフレームが承認されると、次はそのワイヤーフレームに基づいたデザインの制作に入ります。

デザインを作成する前に、デザインの見た目面でのコンセプトを決定します。例えばコーポレートカラーやブランドカラーをベースにどのような配色にするのか、フォントをどうするのか、全体的な見た目の雰囲気に関わるコンセプトを決めていきます。コンセプトが固まったら、そのコンセプトに基づいてページデザインの作成が進んでいくのですが、まだこの時点でのデザインは画像なので、実際に動くものではありません。

見積もりの段階で必ず確認頂きたいポイントとしては、「デザイン会社がデザイン制作をどこまで実施するか」です。具体的には納品物に作成したデザインの画像に基づいた、htmlおよびcss、javascriptが含まれているかどうかを必ず確認してください。

我々もシステムのお見積をする際に、「デザインはhtml、cssでご納品頂く」という前提条件を記載させて頂きますが、画像だけお渡し頂いてもそれを元にhtmlにコーディングを行わなければシステムに組み込むことが出来ません。ECシステムのプログラミングとデザインをhtmlに起こすコーディングは分野としては異なるのですが、システム会社もデザイン会社もどちらも作業する想定でなかったとなると思わぬ費用増につながってしまいますので、欠かさず確認すべきでしょう。

 

デザインのシステムへの組み込み

デザインが作成され、それに基づいたhtml、cssが納品されるといよいよ動くシステムへの組み込みとなります。デザインの組み込み作業は、システム側のプログラムの製造フェーズで行うことが多いので、システム会社側の理想のスケジュールとしては、製造に入る前の「詳細設計」が完了するタイミングと同じタイミングでコーディングされたデザインが納品されるのが望ましいです。

とはいえ、毎回理想通りに進むとは限らず、実際には完了し、承認されたデザインから順番に納品されていく、という進め方になるケースもあります。これが大幅に遅れることがあるとシステム側の開発スケジュールも遅れることになる場合もあります。同時に色々な検討を進めるのは大きな負担ではありますが、「システムを決めてからデザインはどこにお願いするかゆっくり考えればいい」という形だと、思わぬスケジュール延期につながってしまいますので、なるべく早く検討を進めるのが望ましいです。

 

まとめ

いかがでしたでしょうか。今回ご紹介したのはほんの一例になりますので、実際には色々な進め方が存在しますが、近年我々がご一緒することの多いデザイン会社の進め方を例にご紹介させて頂きました。

特に調査やプランニングについては、どこまでお願いするかによって大きく見積もりの金額も違ってきます。提案内容が各社バラバラだと比較も難しいので、どこまでを今回のデザイン作成で実施するかをある程度イメージしながら、デザイン会社にご依頼するのが良いでしょう。

新規CTA

RECENT POST「コラム」の最新記事


この記事が気に入ったらいいねしよう!
ECサイト構築パッケージ選定 7つのポイント
ブログ購読のお申込み

RANKING人気資料ランキング

RECENT POST 最新記事

RANKING人気記事ランキング

TOPIC トピック一覧