バーチャル先輩とは？
2年前Webデザインの勉強をするために大阪のクリエイターズ・ファクトリー というスクールに通っていたのですが、今回新たに卒業生向けデザインコース（＝バーチャル先輩）が始まるという話を知りました。
「3名のデザイナーの先輩方が3ヶ月間、実務研修として直接指導してくださるサービス」ということで、普段なかなかデザインのフィードバックをもらう機会がないのもあって、これは最高の機会だ！逃してはいけない！と思い、秒で申し込みました。ちなみにオンラインで完結する＆フィードバックも平日21時～というのも働く身にとってはすごくありがたいです。多少の残業なら間に合うので。
今年の1月からスタートしているのですが、課題とアウトプット、いただいたフィードバック、完成物などをブログに残して行こうと思います（掲載許可もいただいております）！
今回のお題：名刺デザイン
実は名刺を一から作るのは初めてです！
会社でも案件はあるのですが、Webサイトの作成が多いので印刷物を作るとなると少し緊張します。
私は架空の家具職人（ヨドワークス）の名刺デザインを作成しました。
お題はこんな感じです。
- 夫婦で営む家具職人の個人名刺
- 無垢の木材を使用した温かみのあるデザインが特徴の家具を販売しいてるので 夫婦の人柄やあたたかみのある名刺を希望
- ロゴは提供のものを使用
今回の課題は自分でお題を選ぶことができたのですが、他にココナラのコンペや自分の名刺を作成されている方もいらっしゃいました。
架空でなければクライアントにもう少しヒアリングしたいところですが、架空の案件なので追加で以下の設定ということにしました。
①どういう場面で誰に渡すか？
⇒家具販売店の店長や営業担当者の方。30代くらいの男性。
②受け取った側にどんな行動を取ってもらいたいか
⇒発注をかけてほしい。電話やメールで連絡いただく、Webサイトの商品を見に行って選んでもらうなど。
③印刷会社
⇒そこまで予算がないので、紙にそこまでお金はかけたくない。印刷はプリントパックを希望。
初校デザイン
そして初校のデザインがこちら。
ざっくり提案書とPhotoshopでモックアップも作りました。
まずは受け取ったとき、そして後日少し時間がたってもヨドワークスの特徴である「無垢材のあたたかみ」が印象が残るように表紙に木目を入れました。
上記の設定であった家具屋の方に名刺を渡し、ヨドワークスのこだわりを感じてもらえるようなデザインを意識しました。
ポイントは、裏面を見ても情報が左の指で隠れないところ！
モックアップのように、たとえば電話をしたいときに名刺を見ながら電話番号を確認できます。QRコードは右の指で隠れますが、全体のバランスとそもそも読み取りが必要で目視が必要ではないので隠れてもよいと考え、右寄せにしました。
フィードバック
先輩方にフィードバックいただいた点を箇条書きにしました。
良かった点
- 木目が非常に印象に残る。
- デザイン、構成にまとまりがある。
- 手で持っても左手の指で情報が隠れないところがよい。
- 実際に手に取ったようなモックアップがわかりやすい。
- 設定がしっかりしていて説得力がある。
アドバイス
- 表と裏の世界観が違うのでもう少し表面に合わせる。
もしくは表面の木目を少し薄くするとロゴの視認性も上がって良さそう。
もしくは裏面に木目を入れて印象を変えるか。 - 住所情報などはここからもう少し情報を左に寄せるとバランス取れそう⇔代表の名前の箇所に左揃えする（ここは賛否両論でした）
結論、実際に調整してみてどちらがいいか決める。 - 下の住所情報などの小さいアイコンは印刷すると潰れるので実際に印刷してみて確認する。
- QRコードは大きすぎるとチープな印象になるので、もう少し小さくする
- 背景も白帯なくてもいいかも？
- 右上のロゴなくして余白を作るとすっきりする。
- HPにhttps://を付けるとURLだとはっきりわかり、メアドとも区別できる。
なぜここはこうなのか理由も教えていただけてとてもわかりやすかったです！こんな先輩方が会社に一人でもいてくださったらいいのに；；
指摘いただいた点は、今後も印刷物を作るときに意識しようと思います！
ブログに書いておくと会社でもぱっと見れるので、このページは何回も閲覧することになりそうです。
あと、他の方の発表を見て、クライアントに見せる場合は実寸サイズの紙で見てもらう方がわかりやすいな！と感じました。
提出前に印刷物で見る大切さも。次は塗りたしなしで印刷して角丸も含めた状態で提出しようと思いました。
2校デザイン
修正したところ
- 表面の木目の色を薄めにしてロゴの視認性を上げました。
- 裏面は表面と世界観を合わせて表より薄い色の木目にしました。
- QRコードを小さくしてゆとりを持たせました。
- HPのURLに「https:// 」を追加しました。
- 住所などのアイコンの線が潰れない太さにしました（印刷して確認済）また、テキストも最小6pt→7ptにしました。
- 「Yodo Kenjiro」にして上の名前とのバランスを取りました。
- PDFは確認用として実寸サイズで切り抜きました。
迷ったところは、裏面の左の代表と同じ端にぴったり合わせたもの（左寄せ）と左の指の分を空けたもの（指よけ）どちらにするかです。
データで見ると左揃えの方がよいような気もするのですが、指のスペースはやっぱり残したくて、2種類見ていただきながら相談させてもらいました。
フィードバック
とてもよくなったと言っていただけて嬉しかったです！
あとは上下左右の余白が少しずれていたので同じ幅・高さに調整を、とのことでした。
また、住所情報を左寄席にするか指よけの形にするかですが、指よけでも情報を少し真ん中よりに寄せたことで違和感がなくなったと仰っていただけました。このまま指よけのブラッシュアップをしていこうと思います。
完成形
余白を調整して、最終的に完成したのがこちらになります！
モックアップ
どうでしょうか。初校と比べると、かなり世界観にも統一感が出て、我ながらよくなったかと思います！
感想
1回目のバーチャル先輩を終えて、名刺の難しさを感じました。
名刺はサイズが小さいだけに、情報の取捨選択やメリハリを付ける必要があり、どこをどうすべきかかなり悩みました。
でもデザインするのはやっぱり楽しかったです！アドバイスいただいた内容を修正したらどんどん良くなっていくのもわくわくしました。
かかった工数ですが、参考のデザイン集め、デザイン、モックアップ作成、修正のトータルでたぶん6～7時間くらいかと思います。おおう、結構かかってますね…。実際だともっと早く提出する必要がありそうです。
また、今回ロゴがあったことがありがたかったかなと思います。ロゴ作成が必要だったらもっと難航してそうです…。
あとは先輩もおっしゃっていましたが、印刷物は確認するとき実際に印刷して実寸サイズで見た方がいいなと思いました。
文字の大きさや線の太さは気をつけていたのですが、今回のアイコン（PCやメール）が潰れてしまっていたのは盲点でした。これからは提出前にもしっかりチェックしようと思います！
制作物を先輩に見ていただくこと、人前発表するのはかなり緊張しましたが、フィードバックをいただける機会があるのはめっちゃありがたいです。去年勇気を出して申し込んでよかったです！
他の生徒の方の発表を見るのもすごく良い勉強になります。
次回も楽しんで頑張ろうと思います。それでは！
コメント