6月よりデザインのスキルアップのため、「おやびん」こと、いちげ氏（@booichiro）が主催するデザイン初心者向けオンラインコミュニティである「はじめのいっぽ」に参加している。
ここで知ったデザイナー向けの書籍である『レイアウト・デザインの教科書』（SBクリエイティブ、2019年）を購入した。
いちげ氏が主宰するもう一つのオンラインコミュニティである「いちげ♨温泉」（こちらはすでにデザインの仕事を受注しているプロフェッショナル・デザイナーが主な対象）内で公開されるラジオに、月1回ゲスト参加されている北海道在住のデザイナーであるベーコンさん（@dogdog464646）が著者のひとりだ。
ベーコンさんがゲスト参加されたラジオを聴いて本書に興味を持ち、購入した。
本書の第4章では「レイアウトの作り方」と題して、実際にクライアントからデザインを依頼されたケースを想定し、どのようにデザインを進めるか説明されている。
デザイナーが仕事を進めるプロセスが丁寧に解説されていて、非常に参考になる内容であった。
一方、前にTwitterヘッダー画像を初めて作った記事を書いた。
今年の6月1日から、愛媛在住のデザイナー「いちげ氏（@booichiro）」がオーナーを務めるデザイン初心者向けオンラインサロン「はじめのいっぽ」に参加している。 ※なお、6月15日付で「いちげ氏サロン」から「クリエイター向けオンライ[…]
このときは何となく「コンセプト作り」から作業を進めていたが、本書で説明されている工程には従っていない。そこで、ヘッダー画像の作成工程を見直してみることにした。
STEP１．ターゲットを決める
デザインは、ターゲットを決めないとどこに向かえばいいかわからなくなります。ターゲットをしっかり決めることで、このデザインのゴールが決まるのです。
位置No.165
今回作成しようとしているのは、自分のTwitterアカウントのヘッダー画像である。したがって、デザインのターゲットとなるのは、私のツイートを見かけて、アカウントのトップページを訪問してくれたTwitterユーザーだ。
ちなみに、私が普段よくツイートする内容としては以下のようなものである。
- 複業・副業
- デザイン
- 子育て
したがって、これらの話題に興味があるTwitterユーザーをターゲットとしたい。
つまり、今回作成すヘッダー画像のデザインの目的は「複業や子育てに興味があり、デザインの依頼をしたいと考えているパパ・ママに興味を持ってもらうこと」とする。
STEP２．コンセプトを決める
コンセプトとは、「誰に、何を、どのように伝えるのか」というデザイン表現の指針です。
位置No.166
ここでは、本書の提案に沿って5W1Hに当てはめてコンセプトの詳細を決めていく。
- Who？（誰に）：私のツイートを見て興味を持ったTwitterユーザー
- When？（いつから）：「はじめのいっぽ」の講評会終了後（＝7月のはじめ）
- Where？（どこで）：私のTwitterアカウントのトップページ
- What？（何を）：私がどんな人物か、何をしているかを伝える
- Why？（なぜ）：フォローしてもらい、仕事の依頼をもらうため
- How？（どんな印象）：「親しみやすさ」と「和風」を一目で伝えたい
STEP３．要素を洗い出す
要素を洗い出すことで無数にあるレイアウトパターンの中からコンセプトに沿ったものがなにかを絞ることができます。
位置No.168
Twitterヘッダー画像の構成要素として用意しているものを以下に書き出した。
- 「かきえもん」という屋号（＝Twitterアカウントの名前）
- 「かきえもん」のロゴ（「か」と「き」を図案化したもの）
- 「かきえもん」のイラスト
- 「和」の要素：のれん、和柄、和風建築
- デザイン案件メニュー：アイキャッチ画像、Twitterヘッダー、アイコン
- 案内文：ご依頼はDMにて承ります
以前、作成したヘッダー画像は①と④のみで構成された、抽象度の高いものだった。
今回はコンセプトを満足するための要素を改めて見直し、足りないものを追加した。実際に仕事を受ける場合にはクライアントから提供してもらったり、自作することになる。今回はクライアント＝自分であり、練習も兼ねて全て自作することにした。
ロゴマークとイラストはこれまで自作した経験がなく、用意するのに時間がかかった。そのため、本来は家族のイラストも作成したかったが、6月中にヘッダーを完成させるという目標に対して時間切れとなり、断念した。
家族のイラストについては、7月以降も引き続き作成していきたいと考えている。公開したからと言ってそこで完成ではなく、必要に応じて更新していけばいいだろう。
STEP４．レイアウトのパターンを出す
さまざまなレイアウトからインスピレーションを得て、自分のレイアウトに活かしてみましょう。優れた実例は発想を生み出す源泉となります。
位置No.169
STEP３で洗い出した要素を並び替えて、いくつかのレイアウトパターンを作成してみた。
【レイアウト例１】
【レイアウト例２】
【レイアウト例３】
レイアウト例２と３では、デザインの依頼も請け負いたいと考えているため、Twitterアカウント自体を店と考えた。
店先に「かきえもん」を立たせ、のれんと日除けにロゴとテキストを配置した。
レイアウト例２では屋根の上に屋号を配した看板を置いているが、この位置はスマートフォンでヘッダー画像を表示したときに見切れてしまう可能性がある（特にiPhone Xシリーズ）。
したがって、今回はレイアウト例３で進めることにした。
STEP５．書体のパターン出し
ポイントは書体の形や特徴を覚え、「この書体を使うとこんな雰囲気を表現できる」ということを知り、実践できるようにすることです。
位置No.171
STEP４で作成したレイアウト例の書体は「小塚ゴシックPr6N」だが、今回は「和」の要素が強いヘッダー画像のため「HGS行書体」で進めることにする。
STEP６．配色のパターン出し
配色を決めるときのポイントは、やはりコンセプトに沿ったものを作ることです。ロゴのカラーに指定があったりする場合も多いですが、それがない場合は、ターゲットの年齢層や、制作物のジャンルによって決めていきます。
位置No.172
STEP５で作成したヘッダー画像について、いくつか配色パターンを作ってみた。
【配色例１】
【配色例２】
【配色例３】
「和」がコンセプトのため、いずれも和風と感じられる伝統的な色を用いた配色にしている。
好みの問題もあると思うが、今回は「親しみやすさ」と「誠実さ」が感じられる、配色例３で進めることにする。
STEP７．装飾のパターン出し
タイトルを工夫したり、文字を図形にすることによって伝えたいことが伝わりやすくなったり、デザイン的に良いものになる場合があります。
位置No.173
ここはかなり経験とセンスが問われる気がするが…ここでは、あまり凝ったことはしていない（できていないと言った方が正確だが）。
「はじめのいっぽ」内でおやびんにアドバイスを得た通り、提灯に影を足し、店内に少しグラデーションをつけて立体感が感じられるようにした。
もう少し効果的に装飾を付けられるようになりたいのだが、そのためには沢山の優れたデザインを見て、自分のデザインの引き出しの中身を増やしていくことが必要だと痛切に感じている。
STEP８．最後の微調整
本書では、自分が作成したデザインを客観的に見るテクニックが３つ挙げられている
- 印刷する
- 実際に使う・シミュレーションする
- グレーにする
今回作成したのは印刷物ではなくヘッダー画像なので、実際にユーザーが目にするのはPCのブラウザやスマホのアプリなどだろう。そこで、ヘッダー画像をPCおよびスマホ（iPhone X）に表示した見た目をシミュレーションしてみた。
【PCシミュレーション画像】
【スマホシミュレーション画像】
それぞれ、ヘッダー画像の上下の領域は隠れてしまっているが、デザインの主要な部分は隠れていないことがわかる。
今回、『レイアウト・デザインの教科書』の内容に従ってヘッダー画像を作り直してみたが、これにより当初作成したヘッダーと比較して、自分が作りたいと思っていた方向性のヘッダーに近づいたと感じる。
率直に言って、初心者がデザインするには工程が多いと感じた。しかしながら、ひとつずつ工程を踏むことで手戻りがなく、最初にターゲットに基づいてコンセプトを決めておいたことにより、いくつかの候補を選択する際の指標も得られた。
この指標にそって作業を進めることで、多少迷いながらも比較的短時間でゴールにたどり着けたという印象だ。
お客様からのヒアリングも、コンセプトの作り方も、状況にあったレイアウトの型を使う方法も、実践を繰り返せば少しずつ上手くなっていきます。実際に作られた効果がどのようなものであったかのフィードバックをもらい、振り返りまた勉強する。このサイクルを繰り返していけばデザインは必ず上達します。
今回作成したヘッダー画像を実際に自分のTwitterアカウントに採用し、どれだけ効果（＝フォロワー数の増減、デザイン案件の依頼）があるかを確認してみたい。
その情報に基づいて自分のヘッダー画像をこれからもブラッシュアップしていく。最終的には、このヘッダーがきっかけで、デザイン案件を受けられるようになれば、ヘッダー画像の目的は達成できたと言えるだろう。
それがいつになるかは今のところ想像もつかないが、それまでいっぽいっぽ進んでいきたい。