デジハリの中間課題を全力でやってみた～デザイン編～

こんばんは！Webデザイン勉強中のJUNです。
前回の記事でデジハリの中間課題の取り組みについて、ワイヤフレームを作成するまでを投稿しました。

今回はその続き、デザインの制作について書きたいと思います！

デザインのコンセプト

前回の記事の通り、ワイヤーフレーム制作前にターゲットや競合について分析し、自分が制作する「スグ食べ」ではどのようなアピールポイントにするか考えました。
また、キャッチコピーは「あなたへ　今スグ　やさいのやさしさを」というものにしています。それを基軸に、デザインについてはアピールポイントをどうすれば伝わるかというのを考えていきました。考えたデザインのコンセプトは下記になります。

■無農薬や有機栽培を使用→身体に優しい・ナチュラル→土や自然を感じさせる茶色をベースに。
■全体は薄くして、商品紹介の箇所だけ色を付けて目立たせる。
■無農薬で余計なものは入っていない→色は多く使わずシンプルに。
　文字やあしらいについては黒に近いグレーを使用。
■お試しセット購入ボタンは目立つ色/スグ食べのロゴでも使用の赤に。
　ただしページ全体のイメージを壊さない落ち着いたトーンの赤にする。
■お客様がどのコンテンツを見ていても購入したいと思ったタイミングを逃さない→いつでも押せるように常に画面の右下に出るように。
■メインビジュアルから最初の商品紹介まで一気に読んで辿り着いてほしい→繋がるようなデザインを入れる。
■お客様を途中で飽きさせない→同じ内容が繰り返していると勘違いさせない→商品紹介以外はすべてデザインやあしらいを変える。
■あしらいには黒に近いグレー→寂しい印象を持たせない/女性向けの可愛さ→繊細さを出したい→細い線を使ったあしらい
■スマホ版ではフリックができるので、一部コンテンツにスライダーを使用。

ワイヤーフレームの延長といった感じで、色についてなど悩んだ部分もありますが、順を追って考えていけば辿り着いた…という感じです。

また、この時に逆に絶対に避けるデザインというのも決めてました。

■グラデーションの使用
■文字に濃くて狭い範囲のシャドウの使用

実はこの中間課題に取り組む前に挑戦したオリジナルバナー作成で、まさにこの２点を使用しています。あとで見てみると「なんかダサい…めちゃくちゃ素人っぽいし、今っぽくない…」と自分で感じたからです。ちょうどその頃に見た記事やツイートで「初心者がやりがちなデザイン」のあるある要素に入っているものでした…笑
初心者だとどうしてもデザインの引き出しが少ないので、「何かしなきゃ」ということでこの２つを使ってしまいがちらしいです。また、以前は画面の解像度が良くないのでこういった装飾を入れて画面を綺麗に見せていたけど、最近は解像度が上がり画面自体が綺麗だからフラットなデザインでも印象良く見せられることができるようになったと…
もちろん、この２つを上手く使われているデジハリ生もたくさんいると思うのですが、私の場合は「確実にダサくなる」（直近で失敗してる）ということもあり、今回は絶対に使わない！！という思いがありました。

画像の探し方

デザインのコンセプトを考えると同時に画像も探していました。表現したいものに合う画像が見つかればそれだけで説得力が出ます。ただし、画像がなければ見せ方を考えたり、イラストで代用したりしなければいけないので、重要な部分の画像はある程度探しておかないとな…と思っていました。
が、画像探しってめちゃくちゃ時間かかるし大変ですね…！

私が主に見たのは下記サイトです。

O-DAN
写真AC
ぱくたそ
Adobe Stock

O-DANは複数の写真素材サイトの画像を一気に検索できるサイトです。日本語検索もできます！UnsplashやPixabayとかも含まれていて海外の画像ならこれで検索すれば早いんじゃないかなぁ。細かい野菜の画像はこのサイトで探しました。

そして「スグ食べ」の課題に取り組んだ方はわかると思うんですけど、日本人の農家さんの画像探すのって苦労しますよね…！！
やっぱり日本のサイトじゃないと難しいので写真ACの画像を使用しました…
そのまま「お客様の声」も…と思って主婦の方っぽい画像を探しました。が、写真ACの利用規約に「お客様の声」のように製品やサービスの推奨者として表示する目的で使用することは認められません。とあったので、課題とはいえ公開する可能性があるものなので、これは守らないとな…と思いぱくたそから画像を使用しています。
イラストを使用することも考えたのですが、「お客様の声」はイラストより写真の方が説得力があるというのを参考にした本で書かれていたので、写真を使いたかったというのもあります。
実際のサイト制作は、絶対に農家さんもお客様も本物を使うのでこんなことで悩まないと思うのですが、予想外に時間を取られました…

人物写真に苦労していた中、もう一つの悩みどころは「メインビジュアル」でした。ページを開いて一番最初に目に入る画像。ここは絶対に妥協したくないし、このサイトのメッセージが伝わるもの、そして画像の解像度も綺麗なもの、という条件を満たすものがなかなか見つからなかったです。
私の場合は「農家さんから購入者へ」という要素が強く出る画像を探していました。2分割で農家の方が野菜を持っている画像と、主婦がキッチンで野菜を持っている画像の組み合わせなど考えていたのですが、なかなか見つからず…
ちゃんと時間は計ってないのですが、他と並行しながら数日探したと思います。そして「もう無料で探すの無理…お金で解決しよう…！」と、結局Adobe Stockのお世話になることになりました笑　Adobe Stock初月無料でキャンセルしなければ翌月から月額制の有料になります。なのでその初月無料を使って画像を探しました。社会人なので、ある意味お金で時間を買ったと思っています。（余談ですが毎月解約忘れて今３カ月目です…実際に使っているのでいいんですが…）

中間課題と同時に進めていた「デザイン集中講座」でも、良い画像をいかに探せるかがデザイナーの力の一つと教えられていました。解像度の低さは一気にサイトのクオリティが下がるとも。Adobe Stockは解像度の高さは確約されているようなもので、一気に探しやすくなりました。
そして、その中で見つけた画像が今のメインビジュアルです。見た瞬間「これしかない…！！」って思いました！
少し老いた農家の方の手から、子供の手に渡る野菜…私が表現したかった農家さんから購入者（の先の子供）に新鮮な野菜（＝健康・安全）を渡してるのがキャッチコピーぴったりでした！この「これだ！」って感覚は忘れたくないし、むしろこれからは合うものがなかったら合成して作ろうって思うくらい私にとっては良い経験でした。

デザイン時に参考にしたもの

デザインは自分の引き出しの中には全くないことが今までの課題を通してわかっていたので、「考える」というよりどれを参考にするか「探して選ぶ」という感覚でした。
ワイヤーフレーム前の分析時に調べた競合サイトや、今まで読んだデザイン本などを参考にしていました。それに「スグ食べ」で検索すると、過去のデジハリ生がポートフォリオに出しているものを見ることができます。他の方の「スグ食べ」のデザインは、あまり最初の方で見ると私の場合は影響されすぎるかも…と思っていました。そのため、デザインのコンセプトまで自分で決めたこの段階で他の方のサイトを見ました。

参考にしたデザイン本は「あたらしい、あしらい。」「Webデザイン良質見本帳」「デザインのドリル」あたりです。というかあしらいに関しては、「あたらしい、あしらい」をめちゃくちゃ参考にしました。今回の私の作りたいイメージに、本のイメージ自体が重なっていたからです。
持っている本の中から、今回私が作りたいイメージに近いものが載ってるページを付箋つけて見比べて…って感じでしたね。

自分でも不思議なんですが、競合サイトと他の方の「スグ食べ」以外のWebサイトをこの時全く参考にしなかったです。Pinterestで野菜が載っているサイトめちゃくちゃ集めたのに、なぜか見直さなかったです。今だったら絶対に参考サイトを野菜に限らず目指したいイメージのものたくさん探して、XDに貼り付けまくってそれ見ながらデザイン考えます！！ここは本当に反省点です。
Webサイトではなく本をメインに参考にしてしまったのはデザインにも表れていたようで、トレーナーさんに「紙媒体経験者？」って聞かれました…
参考にしたのがWebに特化しているわけではないデザイン本を参考にしたのと、この頃「デザインのドリル」もすべて完了していたので、紙媒体っぽいデザインになったんだと思います。
そして「紙のデザインっぽい」と言われて、「ちゃんと勉強したことはデザインに出るんだな」とも思いました。目指しているのは「Webデザイナー」なので、これからはもっと「Webデザイン」を参考にして勉強していかなければいけない、とも思いました。なのですごく当たり前のことですが、Webデザイナー目指すならサイトトレースはめちゃくちゃ重要だと思います！まだ私自身ほぼ出来ていないけど！！私は中間課題でやっと本当に気が付きました！！！

デザインを考えるにあたって「コーディングができるかどうか」について、私の場合はほとんど考えなかったです。トレーナーさんに「できるかどうか実際の仕事では考えるけど、課題だしまずは思うようにデザインしてみたら」と言われたので、思うままにデザインしました！
…と言いたいところですが、さすがにJavaScriptに関しては不安でした笑「自分ができるかどうか」は置いといて、「再現する方法が存在しているかどうか」だけ確認しました。検索してブックマークだけして、中身はこの時点で読まない…という感じです。コンセプトに沿ったデザインにしたいという考えから、コーディングのことを考えすぎて、デザインを制限したくはないと思っていました。

出来上がったデザイン

わかりにくいですが、背景はうすいベージュの壁紙素材を使用しています。単色塗りつぶしよりも紙っぽい素材の方がナチュラルさが出ると思って素材を使用しました。

今…というかコーティングしている時点ですでに感じていたのですが、とにかく余白が狭い！！オリジナルコンテンツを入れたりしていたので、「長くなりすぎ？？」と思って無意識に余白を狭めていたようです。これもWebデザインっぽくなくなり、紙媒体っぽい理由の一つですね…今直すならとにかくまず余白をあけたい！
また、「あしらいは全コンテンツ変える！！」という自分で決めたデザインのコンセプトに従って進めていたのですが、最後の方は「もう本見ても何も思いつかない…」と若干力尽きてる感があります。前半の方がこだわってる…このあたりも今後直していかなきゃいけない反省点です。

そして、いきなりですがここからは自分でお気に入りのデザインTOP３の紹介です！（自己満足）

３位　PC版の「スグ食べが選ばれる３つの理由」

メインビジュアルから最初の商品紹介まで一気に読んでもらいたい！と思い、離脱されないデザインはどうすればいいか…と考えたのが数字を大きく+斜めに配置することで視線の動きを誘導することでした。
実際にはそんなに上手くいかないとは思うのですが、自分なりに考えて論理的な思考をもとにデザインができた部分だな、と思っています。

２位　農家さんの声

今回のLP制作の自社サービスの強みとして「農家さんとの心理的距離が近い」というものをあげていたので、この「農家さんの声」は特に注目してもらいたい部分でした。目に留まりやすいようにしようと思い、あしらいを他のコンテンツより凝ったものにしています。
メインメッセージ、画像、農場名、名前、詳細なメッセージとこのコンテンツは情報量が多いので、それぞれを羅列するだけでなく、いかにパッと感覚的に頭に入れてもらえるか、というのを意識してデザインしました。

１位　栽培方法による違い

このコンテンツの部分が好きな理由は…ただ単に「可愛くできた」です！笑
上二つはデザインに割としっかり理由があるのですが、ここのコンテンツは「同じような言葉が多くてちょっと読むのが辛いな…」と私自身思っていました。「見た目を可愛くして、ちょっとでも興味もってもらおう」と思ってとにかく「可愛い」デザインを目指しました。
双葉マークは見本と被ってでも使いたいと思って、Illustratorで描きました。他のコンテンツの図もIllustrator使って自分で描いたのですが、勉強始める前までこんなことできなかったので成長したなぁ、と我ながら実感したりもしてました笑

最後に…

反省点もたくさんあるし、プロから見たらまだまだ未熟でダメなところたくさんだろうけど、自分自身で好きなところTOP３をあげられる位「好き！」と思えたデザインができたのは良かったです。でも、このデザインを見返すのが恥ずかしくなるくらいもっと成長していたいなって思います。

そして次回は「コーディング編」です。デザインまではまだ良かったんです…問題はコーディングです。次回は反省点だらけの記事になると思います…

ここまでお読みくださりありがとうございました！
また次回、中間課題の取り組みのさらに続きも見ていただけると嬉しいです！