DESIGN

【ヘッダーデザイン】制作過程を大公開!ぽんぱさんのブログヘッダーを作ったお話【コンセプトシート掲載】

こんにちは、じぇー(@jfromhkd)です。

さて、今回はデザイン作ります企画に参加いただいたぽんぱさん(@toppagippa)
運営しているブログ「とっぱぎっぱ(https://toppa-gippa.net/)」のヘッダーデザイン制作についてのお話です。

それでは、スタート!

ヒアリング&情報をコンセプトシートにまとめて
頭の中を整理する!

ヘッダーデザインのイメージを擦り合わせるためにぽんぱさんへは
下記の質問を行いました。

・ブログテーマ
・好きな色
・好きなフォント
・好きなデザイン(具体例があれば教えてください)

この質問に対するぽんぱさんからの回答を元にこのようなコンセプトシートを作りました。

コンセプトシートを作るときに考えたこと

1.ブログのロゴイメージ

ぽんぱさんのブログは「ぱっとする何かを見つけながら生きる」がテーマです。
「ぱっとする」という言葉のイメージから何かが閃いた時に使用されることが多い
電球を「ぱ」の半濁点にすることを考えました。
また、ぽんぱさんのブログの内容は家族や子どものこと在宅ワークや共働きについてなど多ジャンルです。

ジャンルが豊富にあるブログをロゴで表現するために、タイトルフォントをカラフルにすることにしました。

コンセプトシートの段階では黒のままです。

2.あしらい

コンセプトシートの作成当初はくす玉が割れた瞬間の紙吹雪でをあしらいとし、
嬉しい気持ちを表現しようと考えていました。
出来上がったコンセプトシートをぽんぱさんへ提出!

OKが出たので実際にラフ案を作っていきます。

ラフ提案

今回は、ラフ案として2パターンのデザイン をぽんぱさんへ提出しました。

パターン①

コンセプトシートに記載した通りに、タイトルをオレンジ、ピンク、薄紫の3色を使用しカラフルにしました。
宣言した通りに「ぱ」の半濁点を電球のピクトグラムにチェンジしています。
こちらは、紙吹雪ではなく幾何学模様を作成しポップなイメージでデザインをしました。
当初のコンセプトシートにはない幾何学模様をデザインに入れたのには、紙吹雪とは違った「嬉しい」という気持ちを表現してみようと思ったからです。

パターン②

タイトルを左側に紙吹雪を右側にあしらい、全体的に淡い色のトーンで仕上げました。
(タイトルもパターン①より、淡い色にしています。)
シンプルなデザインですが背景を2トーンにすることで遊びを出してみました。

実際に選ばれたのは①Aになりました。

ヘッダーのサイズが合わなかった問題

Aの選ばれたデザインを微調整し、ぽんぱさんへ納品を行いました。
ところが、ブログのヘッダーサイズと合わないという問題が発生しました。
ということで、ブログのヘッダーサイズを修正していきます。
縦幅が狭くなったので、それに合わせて幾何学模様やロゴの配置も調整します。

出来た上がったデザインは、こちらです!

ぽんぱさんの感想

素敵なヘッダーにしあげて頂いたので、ブログに愛着がわきました(о´)
ヘッダーに恥じないブログになるように頑張りたいと思います。

という感想をいただきました!

さいごに

「サイズが合わない」という問題が発生しましたが、無事に納品することができました。
この経験から必ずサイズを聞く!という術を身につけました。(※初歩的ですが・・・)
今回、ぽんぱさんのヘッダーを作るに辺り初めてピクトグラムを自分で作りました!

電球のピクトグラム。

実は図形ツールとオブジェクトの合体のみでとっても簡単に作ることができます!
この辺のお話はまた今度します!