1.デザイン制作の流れ

Shopifyの案件は「STEP1 Shopifyを使ったECサイト制作の流れとデザイナーの対応範囲」でご紹介した流れで進めていく案件が多いものの、毎回この流れで進むという流れが決まっている訳ではありません。

ディレクターや制作会社、要件によって制作の流れが異なります。

しょうこ

ちなみに「STEP1 Shopifyを使ったECサイト制作の流れとデザイナーの対応範囲」でご紹介した流れは、以下の図のような流れです！

※テーマ選定をしてからディレクターがアプリの選定を行う場合もあります。

これからフルスクラッチとノーコード・ローコードの制作案件でデザイナーが対応する範囲の一般的な制作の流れについてご紹介させていただきますが、毎回このような流れで進めるという訳ではないことをご認識ください。

全体の制作の流れ（例）

案件の中でも良くある制作の流れは、以下の3つです。

この場合、一旦仮の画像でデザインカンプを仕上げて写真撮影完了後にデザインカンプで使用している画像の差し替えを行います。

中にはデザインカンプで使用している画像の差し替えを行わず、構築へと進む案件もあります。

デザインカンプの制作の後に写真撮影がある場合は、写真撮影後にデザインカンプで使用している画像の入れ替えを行う可能性もあると想定しておきましょう。

ちなみに撮影した写真が暗ければ明るくしたり、荒れていたら綺麗にしたりといった写真の加工を行うこともあります。

しょうこ

写真の加工はFigmaだと難しいケースもあるので、Photoshopを使って加工することが度々あります◎

※アプリは運用後に必要に応じて追加。

写真撮影を行なってそのまま構築に進むパターンです。
納品直前に写真の加工を依頼されるケースもあります。

アプリが決まっていてデザインカンプへの反映が必要な案件もあれば、アプリは納品後に決めて追加する案件もあります。

これといった決まった流れがあるという訳ではなく、要件によっても企業によっても制作の流れはさまざまです。

しょうこ

ちなみにどの案件でもクライアントのWEBサイトやSNSの確認、同業競合調査は制作に着手する前に必ず行います。

フルスクラッチの案件の場合は、主にデザイナーは以下の流れで制作を進めていきます。

フルスクラッチの案件ではデザイナーはデザインカンプを作成する段階から入ることが多く、テーマはすでに決まっている案件が大半です。

しょうこ

ちなみにフルスクラッチの案件はやってはいけないと言われるデザインが少なく自由度が高い分、デザイナーにとっては難易度が低めです。

ノーコード・ローコードの案件では主に以下の流れで制作を進めていきます。

ノーコードまたはローコードの案件では、使用するテーマのセクションとブロックの形をある程度把握しなければワイヤーフレームを作ることができない為、ワイヤーフレームの制作をする前にデモストアの編集画面の中でTOPページのカスタマイズを行います。

カスタマイズを行いかつコードをあまり書いてはいけないという制限がある分、フルスクラッチの案件と比較するとデザイナーにとっては難易度が高くなります。

各段階で何を行うのかについてはのちの講座で解説をさせていただきますが、全体の流れとしてはこのように進めていく案件が多いことをご認識ください。