おはこんばんにちは。
fumika(@nnf_57)です。
今回は私も参加させていただいている未来のブロガー発掘プロジェクトのブログのヘッダーを制作させていただきました！
私もいろいろと勉強になった部分が多くありました。
一連の流れからデザイン制作過程を公開していきます(*´꒳`*)
【 未来のブロガー発掘プロジェクトのホームページはこちら 】
プロジェクトの内容をしっかり把握する
プロジェクトのメインとなるブログのヘッダーということなので、まずはプロジェクトの内容をしっかりと把握することから。
・どんなことをしていくのか
・発信内容はなにか
・ターゲットは誰なのか
・企業向けなのか
ヘッダー画像はブログのトップに表示されるものなのでプロジェクトイメージを想像できた方がいいと思います。
ターゲットを大人か子供にするかでもカラーバランスやレイアウト、文字の大きさ等のデザインは変わるので、まずはどんな内容を理解することが大切。
この未来のブロガー発掘プロジェクトは企画発足は共同代表のまるさん(@SNS_mk)と福ちゃんさん(@fukuchan0926)なのですが、ブログなどメディアの立ち上げはここからというところで私もプロジェクトに参加させていただきました。
なのでデザイン的には1からの相談になり、これが基準となるのでブレてはいけないと思い、わりと詳しくお話を伺いました。
ヒアリングはチャットワークでのやり取りと、Discordというアプリのラジオ機能を使って音声通話をしました。
デザインイメージのすり合わせ
デザインイメージのすり合わせは私の大好きなPinterestで。
Discordのラジオ機能である程度ニュアンスを聞いておき、Pinterest内でボードを作成、そこからイメージに近いものを選んでいただきました。
ターゲットは中高生がメイン、ブログの記事自体はその親にも読んでいただきたいとのことだったのですが、プロジェクト内容からデザイン的には中高生よりの方がいいということに。
明るめのカラーバランスのものから写真を使ったものなどを選びました。
ここでは枚数を多くしすぎないことがポイントです。
あまり多すぎると迷ってしまうので、方向性を決めるのであれば系統の違うものを5パターンほどがいいと思います。
そこかイメージを絞り、さらに細かいニュアンスを詰めていく方が双方のイメージすり合わせがしやすいのかなと。
今回は真ん中のコミックっぽいイメージ、右のカラーバランスで楽しげな雰囲気を前面に出したヘッダーで方向性は固まりました。
あとは文言や素材をいただいて制作スタートです。
Illustratorで制作
今回実は手描きのラフ画なしで直接Illustratorで制作スタートしました。
コミックっぽいバナーやアイキャッチ画像をPinterestで検索し、それらを見ながらレイアウトやフォントを調整。
楽しげな雰囲気を出すために、いただいた素材写真の調整やTwitterで呟いているミラブロのヤギ(@mirablo_pj)のイラストをいただいたりしました。
【 ヤギはゆるかわイラストがとても可愛いべちまるさん(@bechimaru)が制作したよ 】
ラフ：A案
スッキリまとめつつ、キャラクターを印象付けるようにデザインしています。
コミックレイアウトを参考に左右に分けて人物写真とドット背景を配置しています。
細かい調整はしていないのですが、この時点ではわりとごちゃごちゃしてしまっている印象。
もう少し装飾を減らして、タイトル位置を調整していかなきゃなという感じです。
ラフ：B案
メインターゲットが学生なので、学生風景の写真を入れることで親近感を持ってもらいやすくするデザインです。
写真を目立たせたかったのでカラーは少し色味を抑えています。
色味を抑えすぎて全体的に少し寂しくなってしまっているかな。
プロジェクトの内容を反映させるならもっと楽しげな雰囲気を出したいので、枠線に色味を持たせるなどカラー要素を足した方がいいかも。
ラフ：C案
メッセージを中央に置いてインパクトを持たせたデザイン。
カラーもできる限り多めに使いつつ、パステルよりに調整することで派手になりすぎないように。
これはA案ベースにもうちょっとタイトルを大きく見せたいと思って作成した案。
写真はそのまま置くか人物だけ切り抜きするかで迷ったのですが、他案はそのまま使用しているのでC案では切り抜きver.にしてみることに。
ラフ案提出
皆さんのご意見を一度お伺いしようと思い、作った３案を提出。
ということでラフにも関わらず完成していると言っていただいたり、それぞれの感想を聞いたり。
中には中高生のお子さんがいらっしゃる方もいるので現役学生の意見も聞くことができました。
今まで中高生の道を通ってきたとはいえ、今と昔じゃ感覚も流行りも全然違うだろうから現役の声を聞けるのはとてもありがたい。
皆さんの意見をまとめてC案をベースに整えていくことになりました。
レイアウトの微調整やフォントの調整はここからしていきました。
フォントは太めのものを使っているので文字が潰れないようにしたり、枠の太さを調整したりしていきます。
文言追加の依頼
まるさんからチャットワークでご連絡をいただき、追加で文言を入れてほしいとのこと。
納品日まで日があるのでレイアウトを調整していくことに。
サイズはもともと決まっていたものがあったのですが、そのサイズ内に入れると文字が多くなるのでバランスが崩れてしまうなと思い、２案ご提案することに。
修正：A案
文字が多くなりすぎてぎゅうぎゅうの印象。
タイトルのインパクトも薄れてしまうのであまりよくないかなと思い、まるさんにご相談。
修正：B案
サイズを少し大きくして上にタイトルを置いた案を作成しました。
タイトル的な感じで。
少し高さが変わったこともあり、ブログにアクセスした際の見え方が変わるので一旦配置していただいてバランスを見たりして調整していきました。
こちらの方が両方の文言がしっかり見えてスッキリした印象を保てるのでこちらの案で決定！
完成
こちらが完成のヘッダーデザインです(*´꒳`*)
ブログ背景が白なのでカラフルなヘッダーが映えるようになっています。
賑やかで楽しそうなイメージを持たせつつ、メッセージをしっかりと伝えられるデザインにしています。
ヤギのキャラクターも入れることができたので未来のブロガー発掘プロジェクトらしいデザインに仕上がりました(*´꒳`*)
まとめ
未来のブロガー発掘プロジェクトはデザイン面で大きく関わりを持たせていただいているので、他にもアイキャッチや名刺などたくさん制作させていただいています。
今回はそれらのベースとなるブログヘッダーのデザインということで、デザインの軸になるものということもあり、たくさんのイメージやプロジェクト内容をヒアリングさせていただきました。
特にコミック風のデザインは私自身があまりチャレンジしたことなかったのでレイアウトやフォントもたくさん勉強になりました。
レイアウトにわりと苦戦してて、きっちりそろえるのではなく、動きを持たせた方がよりプロジェクトイメージに合ったものになると思ったのですが、いかんせんまとまらなくて難しい。
ラフ案３つ考えるのにトータルで丸2日ほどかかっています。
もう少しレイアウトの勉強が必要だな…と思いました。
今回のヘッダー制作ポイントをまとめると、
・イメージのすり合わせをする際の参考画像は多すぎないようにすること！
比較対象が多すぎると選びづらいので、系統が違うものを５枚程度で提案
↓
そこからさらにニュアンスを調整
というやり方の方がすり合わせしやすい
・コミック風のレイアウトは余白と文字のバランスをしっかり考える
詰め込みすぎるとごちゃごちゃな印象になってしまうので、ある程度空白を持たせると良い
私自身もチャレンジしたり試行錯誤したりと、なかなか思うようにいかない部分が多くあった制作過程ですが、なんとか形にすることができました。
これをベースにプロジェクトのデザインが仕上がっていくと思うと、本当に重要な部分を担当させていただいたんだなと思います。
私も参加している未来のブロガー発掘プロジェクトはこちらから！
ターゲットは中高生ですが、ブロガーをはじめ、いろんな方のインタビュー記事などもあるので面白い記事がたくさんあります！
ぜひ一度のぞいて見てくださいね(*´꒳`*)
fumika.
