【WordPress第2回】デザインのラフを作ってロゴも作ってみる

 

さてはて今日は「初めてのwordpressオリジナルテーマ作り(はあと)」の第2回目ということになります。

 

そんなわけで早速取りかかりました。
本当にゼロからのスタートなので何からやったらいいのかすらわからず…。

前回のブログでも書かせていただいたこちらの記事のまんま進めていくことにしました。

はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました(サンプルダウンロード)/ Web Design RECIPES

 

読んでみると初っ端からHTMLとCSSで作られたページが用意されている…。
ということでまず僕がやらなければならないことは、

 

ブログのデザインを考える

ってことみたいです。

 

HTMLファイルを、部分部分にわけてPHPで読み込むっていう流れがwordpressの基本みたいなのでまずはHTMLファイルを作ること。そしてそのためにはデザインがなければ!

ということなのですが、一番最初から壁にぶつかるわけです。
なんせデザインなんてデの字も知らない素人なわけですから、自分なりに模索していくしかない。

 

自分なりに考えたこの段階の流れとして、

 

1、ページ構成を考える
2、考えた構成を元に紙にぴゃぴゃっと軽くデザインの元を書く
3、ボタンやロゴ等それぞれのパーツをフォトショで作ってみる
4、フォトショで作ったパーツを配置、PSDファイルを作る
5、PSDを元にHTMLコーディング

 

こんな感じなんじゃないかと推測した。

1は今まで頭の中でたくさん考えてきたことなので大した時間もかけずリスト化することができました。
それをこんな感じに本当適当に紙に書いてみた。

 

Evernote Camera Roll 20140605 000410

 

本当にこんな感じでしかできないわけです僕は…。
まあでも頭の中ではある程度まとまったので大丈夫。

じゃあここからこれを実際に画像として作っていかなければならないわけです。
ここから先の行程が本当にわからなかったので、とりあえず一番大事だろうなって思うロゴから手をつけてみることにしました。

一応僕の中で、僕が僕を表現するときに使いたい屋号的なものがありまして、それがこのブログのドメイン名にもなっている「真夜中秘密工作員」ってやつです。

真夜中に秘密裏で集まってこそこそとクリエイティブな工作に明け暮れるクリエイター集団っていうそんな集まりを作りたいなって思って名乗ってるわけです。たった一人でね!ゆくゆくはメンバーが増えて行くからきっと大丈夫!

 

そんなわけでどことなく怪しい集団感が出るようなロゴにしたいなってのがまずあって、あとはこのブログでどんどん話していくであろう音楽にも少しかするような、そんなロゴを考えました。

それでとりあえずできたこれがロゴ案第一弾!!

 

logo_off

 

デザイナーの方から見たらどう思われるか知りませんが個人的に意外とやるじゃん僕!ってなっちゃうくらいには気に入りました。
実際ブログに設置するときはマウスオーバーすると徐々に字が立体的になるみたいなプラスαもつけて、真夜中秘密工作員感をもりもり出している。つもり。
一応後ろの黒いのはレコード的な連想をさせる感じにしてます。

 

logo_on

 

ここで気付く人は気付くかもしれないこのフォントについて!!
「真夜中秘密工作員」って字に使われているフォントですね。

これはアニメ「進撃の巨人」の2個目のオープニングで使われている「自由の翼」フォントです。
正確には、オープニングで使われているフォントをクリエイターの方が真似て作ったフォントなわけですが、完成度が素晴らしいです。

↓ダウンロードはこちらからできます。

http://tanukifont.com/jiyu-no-tsubasa/

ありがたいことに商用利用も可ということで使わせていただきました。
というか実際、ロゴとか作るときはこれを是非使わせてもらおうってずっと前から考えてました。
とっても魅力的な字体です。

 

今日はここまで!
もっともっと色んなパターンのデザインを考えてどんどんここに載っけていこうかなって思ってますので良かったら、ださい!とかかっこいいね!とか、意見くれると嬉しいです!

僕は今のところなんか良いとかそういう感覚でしか作ってないけれど、デザインっていうのは実際緻密な論理によって作られるものらしく、調べれば調べるほど色々なセオリーが出てきて奥の深さがすさまじいなと、そんなことを感じた今日でした。

ではでは!!

 

■WordPressまとめ
【第1回】ブログを収益化してフリーダムな人生のスタートを切る為に
【第2回】デザインのラフを作ってロゴも作ってみる
【第3回】ヘッダーに入れるコンテンツを考える
【第4回】【WordPress第4回】デザインができた!
【第5回】HTML + CSSでPHPファイルの元を作る

 

良かったらシェア&ブクマしてってください!

Related Entries