こんにちは！
新米デザイナーのんちゃんです。
私は以前書いた記事でもお伝えしたように、インターンとして学生の頃からさまざまな企業でお仕事をさせていただきましたが、ほとんどが営業職。
しかし、初めてイラストレーターに触れた2013年の春のあの感動がどうしても忘れられず、このたび思い切ってLIGへグラフィックデザイナーとして転職しました。
そして、アイキャッチ画像やバナーなどLIGブログにまつわるクリエイティブの制作をさせてもらい、制作したアイキャッチ画像はもう100個を超えました。
右も左もわからない中、なんとか日々奮闘していますので、今回はわたしのような新米のデザイナーさんや未経験からデザイナーを志している方へ向けて、わたしがどのように1つのアイキャッチを作っているのかを赤裸々に公開し、一緒に頑張っていけたらなと思います。もしベテランデザイナーの方もご覧になっていただけるのであれば、温かい目で見守っていただけると嬉しいです。
1. 何を伝えるべきかを考える
今回は下記の記事のアイキャッチを例にお話します。 ディレクターも知っておきたいtmuxでよく使うコマンド
Jack
まずは記事を読み、何を一枚の絵で伝えるべきかを考えていきます。LIGでは技術系の記事が多く、内容を理解するのが難しいことも多々あり、素人のわたしには1度読んだだけでは理解できない記事が多く存在します。そういうときに一番大事なのは、この記事は何が他と違うのかを考えることです。
今回例にあげた記事は、他の技術系の記事と比較して、以下が特徴的だと感じました。
- ディレクター向けの技術系記事であること
- tmuxについての記事であること
- コマンドを複数紹介していること
今回は3つでしたが、一度特徴を全て洗い出し、その中から本当に大切なもの2つに絞るようにしています。これは、要素を盛り込みすぎて、結局何を伝えたかったのかわからなくなることを防ぐためにです。絞る基準は、その要素が記事の伝えたい内容と合致するのか否かになります。
ですので、その基準でひとつずつ見ていくと、
- ディレクター向けの技術系記事であること
→×：「ディレクター向け」を表現することは、記事の内容を表すことと合致しない - tmuxの記事であること
→◯：最初から最後までtmuxについて書かれているため - コマンドを複数紹介していること
→◯：最初から最後までtmuxのコマンドについて書かれているため
となり、ふたつに絞ることができました。
この例は少し簡単ですが、要素がさらに増えてくるとこの作業は非常に大切です。要素をそれぞれ独立させ、その要素がある場合・ない場合を考えたりしながら、記事の目的と合致するか検証していきます。
2. ラフ案を書く
次にラフを書いていきます。
今回肝になってくるのは、「コマンドを “複数” 紹介している」ことをどう表現するかだと思いました。わたしにはまだまだ引き出しが足りないので、Pinterestなどを活用し、ベテランデザイナーの方々がどのような表現方法を使っているのか研究していきます。
そしてわたしが考えたのはこちらの2案。
（あれ、なんかラフって思いの外、恥ずかしいですね……でもラフですよ！ ラフですからね！）
いつもラフは2〜3案程度考えてから絞っていきます。いろいろな角度で見ることはどんな仕事でも大事なことだと思いますので、自分のデザインの引き出しを増やすだけではなく、自分の頭を鍛えることにもなりますので、考えられるだけ考えるのがおすすめです。
今回のラフ案①は背景にコマンドであるキーボードを敷きつめることで、複数紹介している感じを表現しました。ラフ案②ではななめに配置し、上下と右を切れさせることで、複数であることを表しました。
そして次にこの2つの案から絞る作業に入るのですが、ここでは1でご紹介した「何を伝えるべきか」に立ち返り、ラフ案①では大事な「コマンド」が背景と化してしまっているのに対し、ラフ案2ではテキスト部分とコマンドのイラスト部分を独立させているため、ラフ案2を元に進めていくことにしました。
3. 提出とFBのキャッチボール
初稿の提出
ざっと作り終えたら3分じっくりにらめっこしてから初稿を提出します。
こちらが実際に提出した初稿です。
提出する際は、ラフになかった部分の説明や引っかかってるけどもう自分では解決できないことを添えて提出します。
ですのでわたしは以下を添えて提出しました。
- 背景を緑にしたのは、tmuxのロゴとして使用されているものが緑だったため
- 無駄に装飾すべきでないが、文字組がシンプルすぎるのではないか
上司からフィードバックをいただき、次にわたしが考えなければならないことは以下の2点でした。
- 文字組みを工夫する
- キーボードを忠実に再現する
文字組みは、わたしの引き出しがないせいで、いつも同じになってしまい、そうするとLIGブログ上に同じ文字組のアイキャッチが並んでしまうことになります。これでは読者の方のわくわくも半減してしまうかもしれません……。
そしてキーボードに関しては、よーく見ていただけるとわかるのですが、文字にシャドウをかけています。シャドウをかけた理由は、会社で使っているiMacのキーボードは上に文字が印刷されているような感じだったため、上に乗っていることを表現したかったからです。
しかし、文字は実際に上に乗っているわけではなく、シャドウが落ちることは有り得ません。小手先の方法で実物をよく観察することなく表現することは、非常に愚かなやり方だと学びました。虫の目が足りていませんでした……。
2稿の提出
文字組みに関してはひたすらPinterestを閲覧し、さまざまな表現方法に触れていきました。キーボードに関しては実物をよく観察した結果、縁はしっかり強めに印刷されていることが分かったので、縁を若干強めにしました。
文字組みに関しては、新しい表現方法を見つけたにもかかわらず、全体を見るとなんともまとまりのない感じに仕上がってしまいました。
理由は以下です。
- キーボードと文字が同じように斜めになっているが、キーボードには影があり文字には影がないため
- キーボードにも余白があり、文字にも同じように余白があるので全体としてメリハリがないため
完全に鳥の目が足りていませんでした……。
3稿（最終稿）の提出
上司にヒントをいただきながら、文字組みを再考しました。2稿の段階では、とにかく文字組みのパターンさえ増やせればいいと思っていたのですが、そうではなく、文字の中でも大切なものの順番をつけたり、意味を考える必要がありました。
そこで “tmux” 、 “useful” 、 “commands” の中で大切な順番を ” tmux ＞ commands ＞ useful ” とし、さらに “useful” に関しては意味に適したフォントを選び直しました。
記事のタイトルにある「よく使う」を「役に立つ」とわたしは意訳したので、記事で紹介するコマンドは「人（この場合だとディレクター）の近くで支えてくれる（＝役に立つ）」ものであるため、親近感があるような手書き風のフォントを使用しました。 “tmux” は一番大事なので一番大きく。ただ、ベタ塗りにしてしまうとかなり強くなりすぎてしまうので、縁のみにしました。
実はキーボードも再考しました。
なぜかというと、MacBookAirのキーボードを見てみると、すこーしだけ凹んでいたからです。そこで凹んでいるバージョンも作ってみて、どっちが良さそうか見てみることにしました。こちらに関しては、実物に忠実であればどちらでも構わなかったと思うので、個人的に好みのMacBookAirのバージョンで提出することにしたのです。
4. 振り返り
アイキャッチが完成したら振り返りをまとめておきます。
わたしはEvernoteにアイキャッチのノートを作っているので、そこに制作した日付をタイトルとして貯めていきます。
書き留めておくことは以下にしています。
- 記事のタイトル、概要、URL
- 伝えるべきこと（コンセプト）
- デザインに関して得た学び
- フォトショップやイラストレーターに関する新しい機能やショートカットなどの学び
- 所要時間や修正回数
- 手書きラフ
- 初稿〜最終稿までの画像
所要時間や修正回数など定量的に自分の成長を実感できる要素も入れておくと、自分のモチベアップにもなるのでおすすめです！ アイキャッチ画像は最終稿だけではなく、初稿から入れておくことで、自分の無力さにきちんと直面できますし、逆にここまで完成度を上げることもできたことがわかるので、こちらもすっごくおすすめです！！
まとめ
手書きのラフから赤裸々に公開してしまい、今にも顔から火が吹き出しそうです。
わたしのようにアイキャッチやバナーを作ることをメインとしているデザイナーさんは、新人であろうとそんなに多くないかと思うので、お役に立てたかどうかすごく心配です。Web制作にも通ずるものがひとつでもあれば幸いです。
デザインにおいても、鳥の目と虫の目と魚の目を使い分けることが大切だなと、4ヶ月やってみて思いました。どうして「このデザインにするのか」という流れを忘れない魚の目、全体のバランスを見る鳥の目、細部にこだわる魚の目。
デザインは本当に奥が深いなあ……と飛び込み営業みたいな性格をしているわたしが感じる今日この頃です。
新米デザイナーのみなさん、一緒に頑張りましょう！！ そしてベテランデザイナーのみなさん、アドバイスや激励のお言葉いただけるとすごくすごくすごーーーーーく嬉しいです。（こちらまでお待ちしています）
いつもたくさん時間がかかってしまっていますが、呆れることなく見てくださっている先輩デザイナーのみなさん、本当にありがとうございます。
それではまた。
キャリアアップ
「Studio上野でWebクリエイターを目指す！」
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
