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

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

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

前回に引き続き、デジLIG中間課題をすすめていくなかでの気付きや注意点をまとめていきたいと思います。今回はデザインカンプ・前編です！

前回の記事はこちら↓

どのようなデザインであれば、ターゲット層にこのサイトの目的であるお試しセットの注文を訴求できるのか……この軸を意識してデザインを進めていきました。

かっこいいサイトにしようとしてしまうけど、サイトの目的は忘れずに！

フォントを選ぶ

今回は各セクションのタイトルについてはIllustratorなどで作成した画像を使用することにしていたので、HTMLに入力した文字列に適用されるHTMLフォントとタイトル画像に使用するフォント（画像フォント）をそれぞれ決めていきました。

このLPは丁寧な暮らしに憧れる女性をメインターゲットとして考えており、ゆったりとして上品な空気感を目指しています。ですので明朝体を使いたいな、とは考えていました。

ただ、まだわたしはフォントの知識が浅く……

とにかく参考サイトではどんなフォントが使用されているのか調べて、今回のサイトでは『游明朝体』をメインに使用することにしました。

游明朝体は単行本や文庫などで小説を組むことを目的に開発されたフォントです。游明朝体を使用することで、新鮮な朝採り野菜が届く、それを使って料理を作り、家族みんなが喜び健康になる……そんな丁寧な暮らしのストーリーを想像しやすくなるのではと考えました。

游明朝体が使用されている参考サイト

※Windowsでは游明朝、Macではヒラギノ明朝、その他のデバイスではHG明朝Eもしくはメイリオもしくはデバイスフォントを表示するようにコーディングしました。

こちらも、游明朝体と合わせたときに違和感のないように明朝体で探しました。

いろいろ検討したのですが、フォントのコンセプトがこのサイトにぴったりだな！　と感じたので『はれのそら明朝』を使用することにしました。

晴れた空と、ちょっと湿り気があるけど澄み切った水色の空気。少しの墨だまりと、オールド系明朝体のエッセンスを含んだ「はれのそら明朝」
https://fontopo.com/?p=377

（実はこのフォント、デザインカンプ見本でも使われているのですが、かぶっちゃったもんはしょうがないですよね……！）

ダウンロードはこちら

野菜の色を目立たせるため、素朴なアースカラーを基調とした配色にしました。

配色は他サイトももちろんですが、下記の２冊の書籍もかなり参考にしていました。なんとなくイメージがあっても「きれいな色」を自分で見つけるのは難しいですよね。

この２冊には本当にお世話になっています。おすすめ！

もともと課題として写真は用意されていないので、自分でイメージに合った写真を探す必要があります。

デザインのなかでいちばん時間がかかったのが、この写真選びかもしれません……

いろいろなサイトを見てみましたが、わたしが最終的に利用したのは以下の２つのサイトです。

フリー写真素材サイト

野菜の写真など、基本的にはUnsplashで素材を探しました。生産者の写真については日本人でないと違和感があるので写真ACを使用。

ただし、上記にもありますが写真ACは1日の検索回数にも制限があるのでけっこうフラストレーションがたまりました……

写真ACを利用するのであれば、素材探しははやめに（日数を確保して）おこなうのをおすすめします。

それぞれサイトに特徴があるので使い分けが大事。今後は場合によって有料素材を検討するのもありかも？

今回のデザインでは、シーンやストーリーを想像してもらうことが『お試しセットの購入』というサイトの目的を達成するうえで重要だと考えています。

ですので、『新鮮な無農薬野菜野菜そのもの』よりも『新鮮な無農薬野菜を収穫するシーン』が想像できる素材を探しました。具体的に言うと、手やひとが写っている動きの感じられる素材です。

例えば……こんな感じです。

『野菜』というキーワードだけで探してしまうと素材の数が膨大になり大変なので、自分のデザインの軸にあったキーワードを足すと絞り込みが楽になっていきました。

長くなってしまったので前編はここまで。これまでの課題ではほとんど素材が与えられていたので、素材探しの難しさを痛感しました……。

後編では実際のデザインカンプを示しながら何を考えて同デザインしたかを書いていきます！　また読んでいただけると嬉しいです～！

デザインカンプ後編は明日の夜に公開予定です！