ビジュアル作成で気を付ける5つの事

はじめまして、デザイナーの宮下です。
普段は主に「ニコニコ漫画」「次にくるマンガ大賞」等のUIデザイン・グラフィックデザインを担当しています。
今回はバナーやサイトのメインビジュアル等を作成する際に私が気をつけている事を、弊社が2021年末に送付したグリーティングカードのビジュアル作成の過程に沿ってお話させていただきます。

グリーティングカードって何?

グリーティング(greeting)とは英語で「あいさつ」という意味になります。グリーティングカード(greeting card)とは、暑中見舞い、年賀状などの挨拶状のことです。

それでは早速お話していきますね!

ヒアリング

気を付けること①「認識を合わせる」

作成する上で必要な情報と合わせて、ニュアンスや温度感を会話の中で拾い上げ、理解を深めるよう心がけています。
文面だけでは認識に差異が出ることが多いため、ヒアリングはZoomやoViceを利用し口頭で会話する時間を設けることをリモートワークになってから意識的に多く行っています。
制作物の目的や温度感を早い段階から擦り合わせるのは不本意な修正を繰り返さないために大切です。
限られた制作時間の中でブラッシュアップの時間と気力を確保し、アウトプットの質を上げることができます。

今回のヒアリングでは下記の要件でした。
・「クリスマス」や「お正月」といった特定の文化を強調しないカードにしたい
・弊社の本年度トピックスを文章で入れたい
・デザイン部内で合意が取れていること
こちらを踏まえて次の作業に移ります。

デザインの方向性を決める

気を付けること②「考える前に作り始めない」

いきなり作り始めると迷いが多く生じ、時間と気力を消耗してしまうので、ある程度頭の中で情報整理とビジュアルがぼんやり想像できるまでデザインツールに触らないようにしています。(触ると何か作り出そうとしてしまうので)
要望や目的を達成できそうなビジュアルのヒントやモチーフ、ワードを世の中に溢れる素敵なデザインの中から探し、同時にデザインコンセプトも考えます。

この時間はネットサーフィンして遊んでるように見えますが、とても大事な時間です。


私がデザイン探しに使うwebサービスは色々ありますが下記を使うことが多いです。

  1. ピンタレスト: Pinterest
    • デザイナーの皆さんならご存知だと思います。世界中の素敵な画像がたくさん集まっていて、デザインの参考を探すにはとても便利です。
  2. shutterstock
    • 素材の検索だけではなく、フォントやレイアウトの参考になる画像も多くあるので、デザインの参考にも利用しています。

今回は上記に加えて弊社2021年のトピックスの中からビジュアルのヒントを探しました。
2021年は「コーポレートサイトリニューアル」本ブログ「TechBlogリニューアル」と弊社の顔であるサイトデザインが一新された年であり、どちらのサイトも弊社デザイナーが「方向性」や「目的」をしっかり決めて作成したデザインであるため、今回のビジュアルにはもってこいのモチーフだと思いました。
「コーポレートサイト」「TechBlog」のデザインを踏襲しデザインを作成することに決めました。

ブログリニューアルについての記事もありますので是非読んでみてくださいね。

developers.bookwalker.jp

デザイン作成

気を付けること③「デザインに迷って悩むより作ってから決める」

頭の中で想像は出来ていても、実際にレイアウトすると良くなかったり、別のアイディアが出てきたりと、すぐに作り切れる訳ではありません。
私はデザインに迷い始めると長くなる自覚があるので、ダメそうなアイディアは一旦保留にし、新しいアイディアは別案として作り切って最後に取捨選択することにしています。
試行錯誤しながら作るので、楽しい作業ですが時間を意識するようにしています。

最終的に共通のデザインコンセプトで2案ラフデザインを作ってみました。
今見ると要素を入れ込んだだけ感がありますが、まずはイメージを目に見える状態にすることが大事です!
どちらのデザインが良いかデザイン部内にフィードバックをもらうことにしました。

デザインコンセプト:BOOK☆WALKERの1年を振り返る冬

グリーティングカードラフ_A案

グリーティングカードラフ_A案

グリーティングカードラフ_B案

グリーティングカードラフ_B案

 

フィードバック

気を付けること④「フィードバックを複数回もらう」

私の場合はなるべく完成形がイメージできる状態まで作ってからフィードバックをもらうようにしています。
そのほうが具体的なフィードバックをもらえるので、自分と他者の認知の差が明らかになりブラッシュアップの精度が上がると考えているからです。
フィードバック
  ↓ ↑
ブラッシュアップ
と複数回繰り返し精度を上げていきます。

今回はデザイン部内で多数決をとりA案で進めることになりました!
「文字量」「配色」「冬感の追加」等フィードバックをもらったのでブラッシュアップと合わせて反映していきます。

 

ブラッシュアップ

気を付けること⑤「プラスαで伝わるデザインを意識する」

フィードバックを反映した上で、「絵」として楽しめる&伝わるビジュアルになるよう意識し、再度作り直す感覚で要素全体をブラッシュアップします。
ずっと作業しているとデザインの違和感に気がつきにくくなるので、別の仕事を挟む等して、頭と目を切り変えなが進めるようにしています。

今回はフィードバックの反映と、トピックスを連想できるイラストを追加してビジュアルと文字情報の関わりが強くなるようにブラッシュアップしていきました。

デザイン完成

グリーティングカード_完成デザイン

グリーティングカード_完成デザイン

グリーティングカードは無事完成。お世話になった関係各社へ送信することができました。楽しんでビジュアルを眺めてもらえると嬉しいです。

以上5つが私がビジュアル作成の際に気を付けている事でした。他にも細かい部分で気をつけている事はありますし、皆さんそれぞれ大事にしている部分はあると思います。いろんな方のデザインをする上で気をつけている事を聞いてみたいです。

最後に

完成に至るまでデザイン部の全員に協力していただき、ブラッシュアップすることができました。
また今回私がデザイン作成に集中できるよう、進行管理はデザイン部のマネージャーが入ってくれ、動きやすい体制を整えていただきました。
メンバー全員が協力的で、パフォーマンスを発揮しやすい環境になるよう臨機応変に対応できるのがBOOK☆WALKERデザイン部です。
興味がある方はぜひ一緒に働きませんか?
詳しくは採用サイトからご応募お待ちしております!