ブログのヘッダーデザインの過程

デザイン

皆さんこんにちは。現在フリーで働いていて、”個人メイカー”を目指しているコーダイです。
詳しいプロフィールはこちらからどうぞ。

このブログは、WordPressのテーマである「Cocoon」を利用させてもらっているんですが、ずっとヘッダーのデザインがデフォルトの状態でした。

とりあえず見た目よりも記事を書かないとなぁと思って手付かずでいたんですが、いい加減ヘッダーがデフォルトなのも寂しいので考えてみることにしました。

せっかくなので、デザインのプロセスを記事にまとめてみたいと思います。

まずは落書きから

毎回、ノートにペンで落書きのようにラフ案を描くところから始めます。
いきなり良いアイデアが浮かぶことはあまりないのですが、なんでもない案が後から良いアイデアを思いつくきっかけになったりもするので、気にせずたくさんの案を描いていきます。

ぶつぶつ独り言を言いながら

アイデア出しをするときは、なるべくリラックスできる環境が望ましいです。僕はだいたい一人の部屋で好きな音楽をかけて、ロゴについて今考えているキーワードや連想される言葉などを一人でぶつぶつ喋りながらスケッチを進めていきます。

キーワードを口に出すと、その音が耳に入ることで脳の中で反芻されて、次のアイデアを思いつきやすくなります。

ちょっと気になったアイデアは深掘りする

アイデア出しをたくさんしていると、たまに自分の中で「おっ」と思うアイデアが出てくることがあります。

そういうアイデアが出てきたら、深掘りしてみます。形を整えるために何度も同じ案を描いたり、バリエーションを描いたりします。

「Road to Maker=メイカーへの道」ということで、道→道案内→看板、という風に連想していき、思いついたアイデアを色々描きました。

決めたアイデアを形にしてみる

「コレかな」というアイデアが出てきたら、それをPhotoshopやIllustratorで仕上げていきます。

今回は、上のラフスケッチで丸印をつけた、看板をモチーフにしたデザインを作ってみようと思います。ロゴというよりはヘッダー全体のデザインという感じですね。

背景画像を作る

今回は、背景にスケッチを暗くした画像を入れます。今まで描いたスケッチをたくさん並べて、それっぽい背景にしたいですね。まずは今まで描いたスケッチのデータをかき集める作業から。

最適なサイズがよく分からないので、とりあえず適当な大きさに設定して、見え方がイマイチだったら修正することにします。今回は、所持しているモニターの最大幅1920px、ヘッダーの高さとして少し余裕のある300pxで作り始めました。

Photoshopを開いて画像をペタペタと貼っていき、コラージュしていきます。

なんとなくそれっぽくなった気がします。
次に、ロゴを際だたせるために全体をモノトーンにした後、ブログのカラーに合うように全体に暗めの赤を半透明にして入れます。

これで背景が形になりました。
大きさのバランスを見るために、WordPressテーマで適用して、PCとスマホの画面で確認します。

モバイルではインパクトを強くするために、ヘッダー面積の割合を多めにしてみました。

タイトル部分を作成する

ヘッダー部分の背景が完成したので、続いてタイトル部分を作っていきます。スケッチでは、看板にパースをつけて、そこに文字を入れる想定でいましたので、そのイメージで作っていきます。

行ったり来たりする

作ってみて、案を変更するのはよくある

ロゴに限りませんが、アイデアを形にしていく途中で「これじゃないな」「こっちのほうがいいかも」という風になることはままあります。
今回もそうで、作った背景にロゴが入るカンバンのイメージを作りかけたところで、コレジャナイ感がでてきました。

どうも背景と合っていないのが原因な気がします。カンバンをモチーフにするのであれば、道路とか青空が写った写真を背景にしたほうがよさそうですね。↓こんな感じで。

カンバンモチーフから文字ロゴへ

今回は作った背景がわりと気に入ったので、そっちを活かすべく文字ロゴを配置することにしました。
フォントを色々あさってみたところ、キューブ状になっているこちらのフォントが合っていたので、これをそのまま使うことにしました。

使用したフォントは「hanko」というもので、フロップデザインフォントさんで販売されている「フォントコレクション」に収録されています。(120書体以上も収録されていてお値段なんと2980円!)

フォントのダウンロード販売
フォントのダウンロード販売ショップ。ロイヤリティーフリー商用可能フォントのダウンロード販売ストア。WebやDTPに使える和文・デザイン書体が豊富に揃う、ダウンロード販売サイト。

完成

背景に合うようにロゴの色やドロップシャドウなどを調整し、フリガナを入れて完成です。

ヘッダーの面積に合わせて、モバイルでは2行表示にしてみました。

実はヘッダーロゴをスマートフォンとPC版で切り替える機能を自力で実装しようとしたのですが、WordPressのカスタマイズに関して全くの素人だったため、Cocoonテーマの公式フォーラムに力を貸していただきました。

けっこうな時間、検索とトライ&エラーを重ねたのですが、自力で実装できるには至らず・・・
回答してくださったかうたっく様、本当に感謝です。

かうたっく様のブログはcocoonのカスタマイズについてかなり詳しく解説されているので、同じテーマを使っている方はぜひ覗いてみてください。

ビバ★りずむ
WordPress初心者がブログ運営する上で必要なバックアップ方法。エラーの対処。CSS・HTMLの基礎がわかるステップを丁寧に説明。

以上、仕事でロゴをデザインするようなイメージでブログのヘッダーもデザインしてみました。ロゴについてはいい感じのフォントがあったので手作りはしませんでした。また、アイデアスケッチの段階で想定していたものとは違う形になりましたが、なかなか気に入っています。

実際のデザイン作業でも、アイデア段階とアイデアを形にする段階を行き来することはよくあり、その往復は無駄ではなく、良いデザインを産むために必要な過程だと思っています。

それではまた次回の投稿でお会いしましょう。

コメント


Parse error: syntax error, unexpected '<', expecting end of file in /home/roadtomaker3/road-to-maker.com/public_html/wp-content/themes/cocoon-child-master/tmp-user/footer-insert.php on line 4