デジLIG中間課題のすすめかた③　デザインカンプ・後編～あるデジLIG生の場合～

こんにちは！　ゆうき(@yu_kilog)です。

未経験からWebデザイナーを目指して勉強中のアラサーです。

今回は、実際にデザインカンプづくりを進めるなかで考えていたことを、セクションごとにまとめていきたいと思います。

前回の記事はこちら↓

XDでデザインカンプ作成

ワークではPhotoshopでデザインカンプをつくっていましたが、XDを使ってみたい！　という気持ちもありWFに引き続きXDを使用してデザインカンプを作成しました。

色やフォントなどはアセットに登録しておけば効率的にデザインカンプをつくることができます。

アセットとは？　という方は前回同様Adobe公式チャンネルのXD解説動画を見てから作業を開始することをおすすめします。

また、今回はSP版→PC版という流れでデザインカンプを作成しました。

ここからは、各セクションのデザインの意図について説明していきます！

ヘッダー

ヘッダーは固定にして、いつでもお試しセット注文のボタンを押すことができる配置にしています。ヘッダーを固定するにあたり、不透明度を50%にして下部コンテンツの邪魔にならないように配慮しました。

トップ（ファーストビュー＋コンセプト）

今回のデザインではトップ部分（ファーストビュー含め）では、

朝に農家さんが収穫→家に届いて調理→食卓に並ぶ

の流れでファーストビューのコピーである「こだわり農家の朝採りオーガニック野菜をご自宅で。」をシーンとして想像できるように配置しています。

さらに、ゆったりした空気感で丁寧な暮らしをイメージできるように余白を大きくとることを意識しました。

スグ食べが選ばれる３つの理由

タイトルはIllustoratorで作成しました。『３』のサイズを大きく、アクセントカラーを使用してリズムを出しています。また、上部に筆記体のアーチ型のあしらいを足し、タイトルらしくしています。

写真と文章だけだとグループがわかりづらくなってしまうため、数字をあいだに配置してひとつながりのグループであることを視覚的に理解できるようにしました。

お客様の声

これはPC版のデザインですが、SP版でも上記の内容を横スクロールして表示させるデザインにしています。（最初に表示されるのは左の１枚のみ）

タイトルは先ほどの『スグ食べが選ばれる３つの理由』とあしらいをそろえてサイトに一体感が出るようにしました。

また、『instagram風』を意識して写真はお客様が自身で撮ったような写真を正方形で配置し、タグも記載しています。

お試しセットの詳細

ここはサイトの目的（お試しセットを注文してもらう）に大きく関わり重要度が高いため、目立つようにクラフト紙のテクスチャを背景にしています。サイト全体がのっぺりした印象にならないように、部分的にテクスチャを使用するのはいい方法な気がします！

クラフト紙の雰囲気に合わせて、注文時のもうひと押し！　になる情報（２４時間以内に配達と旬の野菜が届くこと）をスタンプ風に配置しました。

スタンプ風のあしらいの作り方はこちら↓を参考にさせていただきました。

タイトルの１回限り！　にあしらいを追加して強調、ボタンはアクセントカラーを用いて立体的にすることによりボタンであることをわかりやすくしています。

Q＆A

通常の『よくある質問』はトラブルシューティング的な意味合いが強いですが、このサイトでは興味のあるひとが補足的な情報に飛べるような部分なので、タイトルをとっつきやすく『もっと知りたい、スグ食べのこと』としました。

多くの人が見慣れているであろうLINE風のやり取りにすることで、文字が多めでも読むストレスがちょっと減るのでは……！（期待）とこのデザインにしてみました。

イラストはソコスト　商用化・フリーのイラスト素材集から利用させてもらいました。イラストの色を自由に指定できるので、サイトの雰囲気が崩れにくくおすすめです！

スグ食べの品質保証

品質保証の部分は画像の上に文字を重ねて『全額返金』であることを強調しています。また、背景に白い紙のテクスチャを使用し、上部をアーチ型にすることで単調にならないようにしています。

生産者の声

このセクションもお客様の声部分と同様に横スクロールで表示させるデザインです。（上記はPC版デザイン）

生産者さんの野菜に対する思いが伝わるように、にっこり笑顔！　な写真を探しました。写真は角を丸くとって親しみやすさを表現しました。

また、ここのタイトルはPCだと横長なのでいいんですが、モバイルだと横幅が狭く文字が小さくなってしまうので下記のようにSP版も別に作成しています。

オーガニック農家の割合

この『オーガニック農家』の割合と次の『栽培方法による違い』は生産者に関する補足情報であると感じたのでタイトルを少し変更して小さめにしています。ぱっと見て概要が伝わるようにフォントサイズとマーカーで強調しました。

最近インフォグラフィックに興味があり、ここでぜひやってみたい……と思いやってみました。200人の農家のおじさんに出演してもらい、オーガニック農家の0.5%という少なさを視覚的に表現しています。

栽培方法による違い

ここは、ただの丸にすると単調になり目につきにくいかもと思い、輪切りの野菜（多分ズッキーニ？）を背景にしました。元の色は黄色なのですが、Photoshopで色味を調整しています。自然な色味にするのが難しかったです…！

また、ここでこの情報を載せる意味としては、栽培方法はいろいろあるけれどスグ食べはこの栽培方法の農家さんだけ！　というのを示すためだと考えたので、その情報を追加しています。

フッター

フッターはデザインカンプ作成時は詰めが甘く、コーディング時に大幅修正しました。ですので、最終的なデザインを載せています。

今回はフッター背景が暗めの色なので、トレーナーさんからアドバイスいただき、ロゴの文字を反転させて白にしています。

PC版デザインの作成

SP版が完成してからPC版のデザインを作成しました。タイトルなどは個別に作っているものもありますが、基本的にはSP版のものを横並びにして配置しています。

デザインカンプの全体図はこのようになっています。

おわりに

デザインカンプは作成４日、FB・修正１日（予定は作成３日、FB/修正２日）とこれまた最後に帳尻を合わせる感じでスケジュールを死守しました……。

中間課題は卒業制作と違って発表の場がスクールではないので、この場で自分のデザインを言語化できて個人的にはこの記事を書いてよかったです！

次回は最終編、コーディング編です！　コーディングでつまづいたところ、やっておけばよかったことなどをまとめていきたいと思います。