web関係

【work】クウルスさんのブログヘッダーの制作過程

おはこんばんにちは。
fumika(@nnf_57)です。

今回クウルスさん(@Qoo_Rus)のブログヘッダーをデザインさせていただきました!
ご依頼いただき本当にありがとうございます(*´꒳`*)

こちらの制作過程や納品までの流れをまとめました〜!

\ お仕事依頼は下記からお気軽にご相談ください /

お仕事依頼ページポートフォリオ

ご依頼から制作、納品までの流れ

今回ご依頼いただいたクウルスさん(@Qoo_Rus)とは、伸びシロハウス京都でお会いしたことがあるのですが、ブログの方向性をリニューアルするにあたりヘッダーを新しくしたいとのことでご依頼をいただきました。
基本的には私のお仕事依頼ページの内容にしたがって進めていったのですが、途中でヒアリングを重ねたりと私自身も多々勉強になる部分がありました。

全体的な流れはこちら。

伸びシロハウスでご依頼

制作物の内容(イメージやどこまで制作したら良いのか等)、お見積送付

正式にご依頼いただくことが決定

請求書や契約書関係の書類のやり取り

入金確認後、制作スタート
(同時進行でブログイメージやタイトル、画像の準備等をしていただく)

ヒアリング(Skype)

ラフ案提出

修正(色味調整)

決定、納品

実はブログの方向性で悩んでおられたので、そのあたりについてデザインのヒアリングを兼ねて方向性のお話もさせていただきました。
この辺りは私も今回学びが多かったので、少し詳しくまとめています。

最初のヒアリングメモ

この時点ではブログタイトルやブログイメージが固まっていなかったそうなので、サイズや今後書いていきたい記事のカテゴリーなどを中心にお聞きしました。
合わせてクウルスさんからはイメージ画像をいただき、レイアウトや全体デザインの参考にさせていただきました。

写真を背景に置きたいとのことでしたので、画像の準備が整うまでこちらでデザインイメージ等を考案。
ただ、イラスト背景でも良いかなーとも考えているそうだったので、ラフ案のうち1つはイラスト背景でご提案させていただくことにしました。
他にも今回は「ゲーム」「エレクトーン」「エンジニア」の3つの要素を含んだデザインとのことだったので、それらについて調べたりしていました。

全体の色味は当初にTwitterのアイコンに合わせてほしいとのご要望だったので、落ち着いた色味にまとめています。
カラフルな感じは一切入れず、アイコンとも馴染むようにしていました。

fumika
fumika
ゲームはわかる。大好きだから。エレクトーンとエンジニアについてはあんまり深く知らないのでどモノのデザイン、仕事内容などについて勉強しました。
penta
penta
特にエンジニアについてはなんとなくはわかっても結局どういったことをするのかあんまり知らなかったもんね

制作の途中経過

これはクウルスさんからブログイメージをいただく前、イラスト背景で考えていた時のラフ案です。
ちょっとゲーム要素が強すぎな印象もあるのですが、特に下のラフデザインは実際に私がクウルスさんと交流があることからご本人の人柄やイメージも反映しているデザインになっています。
背景のイラストはイメージ画像としていただいたものを参考に、全体のデザインは私の大好きなPinterestを見ました。

こんな感じですね。このボードの中にはこの後行ったヒアリング(Skype)後に追加したものもあるのですが、主にゲーム関係のデザインを参考に作りました
フォントを斜めに置いたり、ラインを入れたりのあたりがそうです。
あまりごちゃっと感がありすぎるとタイトルの印象が薄れてしまうので、背景イラストの透明度を下げたりして調整していました。

fumika
fumika
ちなみにこのデザイン段階では手描きのラフはなく、直接イラストレーターで描いていました!

クウルスさんからご相談、2回目のヒアリング(Skype)

「ブログのイメージがなかなか定まらない」というご相談を受け、デザインヒアリングも兼ねて2回目のお打ち合わせを行いました。

・雑記ブログとして書いていく
・えれぴこというブログタイトルなのでポップな方がいい?
・背景は3つのイメージを全部やっている感じにしたい、イラストの方がいい?
・タイトルはインパクトのある感じに

といった内容でご相談を受けました。
私のポートフォリオも見てくださっていたので、以前デザインしたミラブロのようなイメージが近いかもとのことでした。

【work】未来のブロガー発掘プロジェクトのブログヘッダー制作の制作過程おはこんばんにちは。fumika(@nnf_57)です。 今回は私も参加させていただいている未来のブロガー発掘プロジェクトのブログ...

この時点で制作していたラフデザインをお見せし、さらにイメージを詰めていきます。
フォントのイメージやカラーのイメージ等をお聞きしつつ、ヒアリング内容を反映したラフ案を再度提出していくことでブログイメージも固めていく方向になりました。

【ここでの私の反省点】
もっともっとこちらから提案してもいいかもしれない!と思いました。
ブログイメージが固まっていないとデザインの希望も出にくいのは当たり前のことで、要望を反映させることだけが私の目指すデザイナーの形じゃないのかもと感じたんです。
できる限りクライアント様に寄り添ったデザイナーでありたいと思っているので、悩みがあるならこちらからどんどん案を出していかないと!

ここで「デザインイメージが固まっている人のヒアリングが得意なだけじゃだめだ!」と強く思いました。
全ての人がデザインイメージが固まっているわけではないのだから、ここをもっと提案できるデザイナーにならないと。
デザインの引き出しを増やして「fumikaに相談したら素敵なデザインに仕上がった」という形に持っていくことを意識しようと思いました。

ラフ案の提出

ヒアリング(Skype)の内容を踏まえて、再考案。
これは手描きでイメージを起こしてからイラストレーターに移しました。
色味を増やしてカラフルにしつつも、あまりビビットすぎないようにしています
ラフを見つつブログイメージも固めていこうということになっていたので、レイアウト、カラーイメージがわかる程度の完成度にしています。

上(A案)はミラブロの区切りをイメージしつつ、背景に3つのカテゴリーのイラストを置くデザイン。
下(B案)は「えれぴこ」のタイトルから、ぴこぴこ感をイメージしたデザインです。

3つのカテゴリーをうまくまとめるという点に結構苦戦しました…
あーでもないこーでもないとラフを何枚も描いていたのですが、どれもしっくりこず。
雑記感を残しつつ、何かの要素を印象付けるというデザインってどんなのがあるだろうとめっちゃ調べました…。

今後は雑記ブログとして運営していきたいとのことだったので、より雑記感が感じられるB案をベースに、もう少し明るめカラーver.も見たいとのことで再調整します。

修正案提出

ラフのB案をベースにカラーを再調整したものです。
修正A案は元々のカラーの透明度を上げたもの、修正B案は新たにカラーパレットを作って配色しました。
ちょっと明るめビビットよりですが、背景カラーを抑えてポイント的に使用しているのでチカチカしないように調整しています。

ちなみに参考書籍はこちら。

これ本当にオススメです!
配色パレットやそのカラーのイメージストーリー的なものも載っているので、デザインするときには本当に重宝しています(*´꒳`*)

完成

こちらが完成のヘッダーデザインです(*´꒳`*)

タイトルからイメージしたぴこぴこ感が感じられるようなデザインです。
ヘッダーとしてのインパクトもあり、カテゴリーのイラストも入れているのでカテゴリーのイメージも持たせつつ雑記感も感じられるデザインになりました。

fumika
fumika
上手い感じでぴこぴこ感を出せたのが個人的にはよかった!

まとめ

今回私自身も学びの多い案件で、特にヒアリング部分で思うことがたくさんありました。
これからのデザイナー活動にもしっかり反映させていこうと思いました。

特に今回はクライアント様と交流があったのも大きな影響で、私自身が持つイメージもデザインに盛り込めたのではないかと思います。
苦戦した雑記感を残しつつ、3つの要素をイメージさせるという点についてもたくさんの参考例を調べたり書籍を読んだりしたのでデザインも改めて奥が深いなと感じました。

今回のヘッダー制作のポイントをまとめると、

・こちらから提案をもっとしていくことが大切だと気付いた
・配色アレンジBOOKはとても素晴らしい
・雑記感を残しつつのデザインに苦戦したので、もっと引き出しを増やすことが重要

試行錯誤を重ねたり、ヒアリングの重要性を改めて感じたりと気付きの点が多かったです。
クライアント様と一緒に制作していくことでより素敵なデザインを提案できるので、今回新たなブログのスタートを切る重要なヘッダーデザインをさせていただいて本当に感謝です。

今回のクウルスさんのブログはこちらです!
ゲーム、エレクトーン、エンジニアの3本柱で記事を書いておられるのですが、一つ一つの記事内容が濃いので読み応え抜群です。
ぜひ一度見てみてください(*´꒳`*)

他にもバナーやアイキャッチなどのweb関係のデザイン、名刺やフライヤーなどの印刷関係のデザインまでお受けしておりますのでお気軽にご相談ください!

\ お仕事依頼は下記からお気軽にご相談ください /

お仕事依頼ページポートフォリオ

fumika
fumika
ヘッダーデザインってすごく重要だから、依頼してくださるのありがたい…
penta
penta
これからもクライアント様に寄り添ったデザイナーでいようね!

fumika.