中間課題(3)デザインカンプ作成-デジハリ修了(13)
デザインカンプの作成
トレーナーさんからワイヤーフレームと意図シートを承認をいただいたら、デザインカンプの作成です。これまでのワーク同様にPhotoshopでの作業となります。
すでにワイヤーフレームを作っているので、これをファイルごとコピーしてデザインカンプのベースとして使います。ワイヤーフレームのデータはバックアップ代わりに残しておきます。
デザインの方向性は、ワイヤーフレームと意図シートの段階で当たりを付けていました。
スグ食べのロゴは支給されたもの
フォントは游ゴシック
配色はアースカラーでまとめる
コンバージョンボタンだけは、あえて異物感を持たせるために青
写真は野菜や農作業（機械ではなく人の手で行っている）を使う
ユーザーコメントは、他とアクセントを付けるために写真ではなく人物アイコンのイラスト、ただしタッチを揃えたいので同じ作者のものを使う
数量を表すのに円グラフを使う
スマホ版も作る
faviconも作る
だいたい、こんなカンジでイメージしていました。これをデザインに落とし込んでいきます。最初にPC版を作ってから、これをコピペしながらスマホ版を作りました。
※なお、これ以降は私が作業したときのメモ書きなのでデザインや制作意図によって、それぞれ異なります。
ロゴの作成
スグ食べのロゴはAI形式で支給されました。アートボードにポツンと置かれています。
AI形式ではWebページに使えないので、Webページで使える形式に書き出します。
私はロゴをヘッダーとフッターに使います。このデザインではともに背景色が設定されていて、ロゴは背景を透過して使います。なので、PNGにして背景を透過して書き出しました。
本来はリサイズすべきでしょうがレスポンシブデザインも考慮して、支給されたままのサイズで72ppiに設定して書き出しています。
今にして思うとSVGにしても良かったかもです。
IllustratorからWeb用に書き出し
これまでのワークでは、IllustratorからWeb用の素材を書き出す方法を習っていなかったかもしれません。
私は昔からの慣習というか手癖みたいなカンジで、[Web用に保存]をしていました。でも、気が付いたらメニュー名が[Web用に保存(従来)]ってなっていますね……。
ざっと調べたカンジ、今回のケースは[Web用に保存(従来)]で問題ないと思います。
IllustratorでWeb用に画像を書き出す際の使い分けについては、こちらのブログを参照してください。
フォントは游ゴシック
ページ内のフォントは游ゴシックで統一しました。ワークでも游ゴシックだったので、そのままCSSの設定を引き継ぎました。
本来であれば、いろいろ検討するべき（特に画像内で使うもの、レタリングも含めて）だったのですが、検討する余裕がなかったのでこうなりました。
こういう細かい配慮ができないところが、どうもねえ……猛省。
あと画像に重ねるテキストは座布団を敷いたり、強調する文字は蛍光マーカーを引いたようなあしらいにするなど、ちょっとした手を加えました。
これらのあしらいをWebに実装する際には<span>要素にclassを設定して修飾します。今にして思うと、デザインカンプの時点でclass名を設定しておけば良かったかなと反省です。
配色はアースカラーでまとめる
オーガニックとかナチュラルとかを自分なりにサンプルを見たり調べた結果、アースカラーなカンジで配色をまとめると自分のイメージに合うかなと思いました。
『逆引き配色アイデアBOOK』をはじめ、いくつかの配色に関する書籍を読みながら色をまとめました。
こういうデザインとか配色に関して、まったくのシロートな私にとって、色をイメージする言葉で配色のアイデアを探ることができるのは、とても参考になりました。
コンバージョンボタンは青
これは私の超個人的な感覚なのですが、リンクできるテキストやボタンは「青」にしたいです。昔からコレに慣れているというか、見やすいというか。
メニューのテキストは緑のアースカラーで統一しましたが、コンバージョンボタンは青にしました。
異物感があるデザインになってしまいましたが、目立ってほしいのと、リンクであることを分かってもらうためこのようにしました。
なお、ボタン（ボタン状に動作する要素）はHTML+CSSで実装しても良いのですが、今回はボタン状にした画像で実装することにしました。
写真は野菜や農作業
オーガニックとかナチュラルなカンジにするために、農作業の風景や土と野菜をイメージする写真を使いました。背景に使う画像も、なるべくこれに近しいものに。
この際、実際の農作業の是非はともかく、機械を使っているものや農薬散布の様子のものは使いません。イメージって大切だと思うので。
あと、「スグ食べ」は日本のサービスで、日本国内の地元農家という触れ込みなので、異国情緒あふれる風景は避けました。
なお、ワイヤーフレームで寸法などをきっちり決めておけば、画像のサイズ合わせの手間が省けます。こういうところで、きっちり作っておくと助かるなあと実感しました。
Adobe Stockで画像探し
農作業風景の写真は自分で用意できなかったので、すべてフリー素材を使いました。
フリー素材を提供するサービスはいろいろありますが、私はAdobe Stockを使いました。
※私はAdobe Stockを使いましたが、ご自身が使いやすいサービスを使ってください。
検索する際に「無料素材」を選んでおけば、フリーの素材だけを探すことができます。
Adobe CCのアカウントを持っているので新たなサービスを契約する手間が省けるとの、Adobeが提供するものなので万が一のリスクも最小限だと思います。
もちろん、Adobe Stockを契約して有料の素材を使っても良いと思います。
なお、Adobe Stockで素材を検索する場合、けっこうワールドワイドな素材が出てくるので注意が必要です。日本の農作業風景がイメージしにくいものも、かなりあるので選別に注意が必要です。
ユーザーコメントは人物アイコン
ユーザーからのコメントは、他の箇所とアクセントを付けるために写真ではなく人物アイコンのイラストを使いました。ターゲットユーザーである「子どもがいるママ」を想定できそうなイラストを探しました。
私は「人物アイコン」という言葉を知らなかったのですが……。
写真のように特定の誰か（たとえフリー素材であっても）がイメージされるものではなく、うっすらと属性が分かるけれど特定の誰かというイメージが付きにくいイラストです。
この概念をうまく説明できないのですが……「いらすとや」さんが有名だと思います。イラストACなどのストックイラストでも、かなり需要があります。
こういう、うっすらした属性がイメージできるイラストって、ありそうで無いものです。しかも、ある程度のバリエーションを揃えつつも、イラストのタッチやサイズ感を統一しないといけないので、作るのも大変そうです。
そういう意味でも、Adobe Stockで無料のものを探せるので、たいへん便利でした。
（イラストACなどのストックイラストサービスだと、さらに選択肢が増えると思います。）
なお、イラストのタッチを揃えたいので同じ作者のものを使いました。
ちなみにSTUDIO A-COLORでも、こういったストックイラストを作っているのですが、今回のターゲットユーザーに合致しそうなイラストはなかったので断念。
円グラフを使う
これは他の方の課題を見ていて気付いたのですが、数量や割合を表すのには表組みやグラフを使うのが効果的です。
本課題では、割合を表す箇所があったので円グラフを使いました。IllustratorでWeb用サイズに作成してjpegに書き出しています。
こういうグラフ1つとっても、センスのあるデザインを作れる方がたくさんいらっしゃるので、本当に羨ましいです。
スマホ版も作る
私はPC版を完成させてから、スマホ版に着手しました。これまでのワークと同じ流れです。実際の現場では、どのような流れになるのか分からないのですが初学者の私は、とにかく講義の通りに手を動かしました。
でも、こういう流れで作ったとしても、やっぱりPC版で漏れがあったり、スマホ版との矛盾があったりして、PCとスマホを行きつ戻りつすることになりました。
こういうとき、Photoshopだと戻り作業がツラいんだよなあ……でも、ここは課題なので仕方がないです。
faviconも作る
デザインカンプでは要求されないのですが、ロゴを作ったついでにfaviconも作りました。
中間課題用のfaviconはPNGで作成し、faviconジェネレーターを使いました。
このときもSVGで作れば良かったな、と後で思いました。
デザインカンプ完成
こうしてデザインカンプが出来上がりました。
私の記憶では、デザインカンプもChatworkでトレーナーさんに提出。面談はしませんでした。
前回も描きましたが、必ずスケジュールの進捗も報告しましょう。「予定通りの提出」「遅れている」「前倒し」「順調に進んでいる」「不明点だらけ」……とにかく報告です。
提出後、特に修正もなく承認されました。いよいよ、次はコーディングです。
なお、これは私の場合の事例です。もしかするとトレーナーさんと面談したり、チェックバックのやり取りが発生したりするかもしれません。
この記事が気に入ったらサポートをしてみませんか？