~ANSWER SONG アンサーソング。 | 答えを謳うブログ。~

【WordPress】ブログのデザイン方法は?WPテーマ9割こだわり1割!

ブログのデザインは、WordPressテーマ9割オリジナリティ1割を完成度7割でやって満足するべき


~ブログ開設から1週間後~

安田尊 安田尊@答えを謳うブログ。
ようやくだいたいのカスタマイズが終わって、当ブログ『アンサーソング。』のコンセプトやイメージカラーも決まりました。

サイトアイコン 安田尊@サイトアイコンを謳うブログ。
『アンサーソング。』のイメージカラーは、ピンクに決定! わーい!
サイトロゴ 安田尊@サイトロゴを謳うブログ。
サイトロゴは、黒背景に白抜き文字だけど……あまりにも桃色だったり青ざめていたりするよりは、引き締まっていていいよね!

さてしかし、ここからが私の苦悩の始まりでした。

私も「色」には、色味や色合いなど、多種多様なバリエーションがあることは承知していました。

でも私はデザイナーではないので、デザイナーなら全員が承知していることを知りませんでした。


~ブログ開設から1ヶ月後~

カラー 安田尊@カラーを謳うブログ。
同じ「ピンク」「ピンク」「ピンク」でも、色々な「カラー」があるんだし、
サイズ 安田尊@サイズを謳うブログ。
同じ「ロゴ」「ロゴ」「ロゴ」でも、さまざまな「サイズ」があるんだし、
ディスプレイ 安田尊@ディスプレイを謳うブログ。
「パソコン」「スマホ」「タブレット」も、「ディスプレイ」は十人十色。

  1. 光沢
  2. 輝度
  3. 発色
  4. 色域
  5. 角度

私は悟りました、①②③④⑤「色」ひとつ取っても、あらゆる環境で完璧に表現されるデザインはない。

デザイナーに完璧主義者はいません。

それなのに、完璧主義者がデザイナーになれば、すぐに発色ムラに発狂してドロップアウトするでしょう。


~ブログ開設から5年後~

安田尊 安田尊@答えを謳うブログ。
ブログをデザインするなら、完璧主義者はやめるべき

本記事をリライト(加筆修正)している時点で私にはブログ5年のキャリアがありますが、デザインはもうずっと7割ぐらいの完成度で放置しています。

以上が結論で、以下はブログ1年目の私が迷走していた記録です。

では以下目次です。

ブログのロゴは?シンプルイズベスト


~ロゴはWPテーマ(デモサイト)の真似~

THE THOR 安田尊@【THE THOR】を謳うブログ。
当ブログ『アンサーソング。』のサイトロゴは、使用しているWordPressテーマ、【THE THOR】のデモサイト(06)を真似して急ごしらえで作成しました

ブログのイメージカラーが決まる前に作成したので、とりあえず万能な黒と白のカラーリング(STORES.jp『ロゴメーカー』を使用しましたが、2024年時点でサービス終了済み)。

その後イメージカラーが決まりますが、作り直す時間もないので、黒白のまま使い続けています。

だいたい、作り直す時間があったとして、


ピンク 安田尊@ピンクを謳うブログ。
たとえばロゴをピンクとか青に彩色するって、すごいセンスが問われる。
黒と白 安田尊@黒と白を謳うブログ。
カラフルな服より、黒と白の服のほうが着こなしやすいのと同じです。

私のような(プロのデザイナーでもスタイリストでもない)素人には無理でしょう。

だから、ロゴはこれでいい、うん……と思いながら3年が過ぎ、3年後に表示サイズだけ少し弄りました。

個人的には、この黒白のカラーリングは、


ナイキ 安田尊@ナイキを謳うブログ。
ナイキのロゴっぽいイメージ。
楽天? 安田尊@楽天?を謳うブログ。
部分的に、楽天の新しいロゴ。

私のなかでは、ナイキといえば黒背景に白いロゴマークです。

そして、ANSWER SONGの「R」と、アンサーソングの「ー」が楽天の新しいロゴっぽい。

ただ、ナイキは意識しましたが、楽天っぽくなったのは偶然で、


サイトロゴ 安田尊@サイトロゴを謳うブログ。
単純に、アルファベットとカタカナの両表記がしたかった。

それで横に並べるか縦に並べるか試行錯誤し、横だと長すぎるから縦に並べ、気づいたら上下で文字をぎりぎりくっつける作業に没頭していました。

というわけで、当ブログのロゴは、カタカナが全部アルファベットと繋がっています。

だからなに、と訊かれれば、特に意味はありませんが。


Amazon 安田尊@Amazonを謳うブログ。
ただ、ナイキや楽天以外にもアルファベットに下線を引くようなデザインはよくあるし、オリジナリティが出したかった。

単純に下線を引くのではなく、カタカナで引いてくっつけたかった……という謎の欲求が発生しただけです。

ただその謎の欲求を抜きにすれば、当ブログのロゴは明らかにTHE THORのデモサイトに影響を受けています。

私はTHE THORを購入しているので、当然デザインをパクってもなんの問題もなく、


THE THOR 安田尊@【THE THOR】を謳うブログ。
ま、デザインなんてWPテーマを真似するのが一番手っ取り早いってことです。

ブログのデザインは?WPテーマが9割


~ロゴ以外もWPテーマ(デモサイト)の真似~

ブログ 安田尊@ブログを謳うブログ。
実際、当ブログのデザインは、WPテーマ【THE THOR】を適用した時点で9割が完成しました。
THE THOR 安田尊@【THE THOR】を謳うブログ。
THANK YOU VERY MUCH!

THE THOR】のデモサイトには、「DEMO 01」~「DEMO 09」までのスタイルがあり、『他を圧倒する「ザ・トール」のデモサイト一覧』を自称しています。

よくそんなに自画自賛できるな~(しかも同業他社をディスっているし……)とは思いますが、私は本当に圧倒されて買ってしまったのでガチです。

THE THOR『DEMO 06』、


ナイキ 安田尊@ブルアッキーナを謳うブログ。
私は世界陸上を思い出しました。

  • 黒背景に白抜きのサイトロゴ
  • 挑戦的な女性のアイキャッチ
  • 黒とピンクが基調のデザイン

何年の世界陸上なのか、何メートル走なのか、予選なのか決勝なのかも忘れましたが……。

とにかく世界陸上で、女子選手たちがナイキの黒いシューズ(ピンクのロゴマーク入り)を履いているのが際立っていて、めちゃくちゃオシャレでかっこよかったことだけは覚えています。

私はそのイメージに、購買意欲を煽られました。


安田尊 安田尊@答えを謳うブログ。
じつは私は当初、有料のWPテーマを使用する気はなかったのですが。

でもブログを長く継続していれば、結局は有料テーマが欲しくなるんだろうし、それなら最初から有料のテーマを買っておいたほうがテーマの移行もだるくない。

だから一応、と検索していろいろ見て回っていたときに、運命的な出会いを果たしました。

それから5年以上使用している現在も、まったく後悔はありません。


Google 安田尊@Googleを謳うブログ。
無料テーマで考えている方も、一応有料のテーマは見ておいたほうがいい。

それでやっぱり、無料のテーマでいいや、と思えば無料で始めればいいし。

私のように運命的な出会いがあれば、あとから後悔しなくて済むし。

私の場合は、もう完璧に一目惚れだったので、基本的なデザインやピンク基調は『DEMO 06』そのまんまに落ち着きました。


色気 安田尊@色気を謳うブログ。
ただ、ちょっとだけ色合いを変えてみようとか色気を出したせいで、沼りました。

ブログのカラーは?完璧な色などない


~カラーコードは真似しなかった~

#BF416F 安田尊@#BF416Fを謳うブログ。
#BF416F(暗記済み)。

↑この色がWPテーマ【THE THOR】の『DEMO 06』において、基本スタイルに設定されているカラーコードです。

人(ディスプレイ)によって、ピンクにも紫にも見えます(私にはもう、濃いピンクと明るい紫の違いがわかりませんが)。

同じディスプレイでも、黄色がかったブルーライトカットレンズの眼鏡をかけている人や、Windowsの夜間モードやiPhoneのTrueToneを使用している人でも見え方は違います。


ピンク 安田尊@ピンクを謳うブログ。
ピンクは奥が深い……

と、私は思いましたが、素人が深淵を覗き込むのは間違いでした。

もうちょっと明るめのピンクがいいんじゃないかとか、くっきり濃いめのピンクがいいんじゃないかとか、逆に色褪せたピンクがいいんじゃないかとか……。

あれこれ試行錯誤をして、出したいピンクが出せたと思っても、


ブログ 安田尊@ブログを謳うブログ。
パソコンで良い色を出せたと思ったら、スマホの画面では残念パターンが頻発。

私には、私の持つすべてのディスプレイで納得できる色が、出せませんでした。

それで結局、デフォルト(#BF416F)が一番だよねと思いました。

まず私が一目惚れした色だし、目が慣れてきたあとにちょっと地味……? と思っても、それは美人だって3日経てば飽きられるらしいので仕方がありません。


疲労困憊 安田尊@疲労困憊を謳うブログ。
私は色々疲れ果てて、「素人が弄るな」論にたどり着きました。

これ(#BF416F)がベストなピンクなんだ……。

デモサイトで使われている色ってことは、エリートピンクなんだ……!

プロのデザイナーさんが色々、黒背景に合うピンクってだけじゃなく、画像や文字との兼ね合いを考慮した上で選んだピンクなんだからそのまま使え!


ド素人 安田尊@ド素人を謳うブログ。
えぇ~んでもでも、初期設定の色をそのまま使うなんて、オリジナリティがなくてやだ~>_<。

安田尊 安田尊@答えを謳うブログ。
みたいに考えて余計なアレンジ加える素人、失敗率100パーセント(成功してもその変化、本人しか気にしてない

私はそう自分に言い聞かせ、むくむく起き上がってくる素人根性を叩きのめそうとしました。

が、しかし本人しか気にしていないとしても、本人が気になるなら本人は気にするべきなのでは?

つまりここは私のブログなんだから、私の気の済むまで、私以外だれも気づかない変化を私だけは気にするべきなのでは?


~ブログ開設から数年後~

#BF416F 安田尊@#BF416Fを謳うブログ。
というわけで、結局#BF416Fからカラーコードは変更され、当ブログのピンクは何種類かのバリエーションがある。
サイトアイコン 安田尊@サイトアイコンを謳うブログ。
サイトアイコンのピンクはいじりすぎて、もはや自分でも再現不可能な色味になった(バックアップが消えたら終わりだ……)。

ブログのイメージは?好きな人やモノ


~なぜピンクと青なのか?~

安田尊 安田尊@答えを謳うブログ。
最後に、ピンクに加える色をに決めた理由は、私が染めたい髪色だからです

じつはピンクも私が染めたい髪色ですが、私にはピンクみがある茶髪が限界でした(室内では茶髪、太陽光とかに反射するとピンクみたいな)。

現実的に考えて、髪色をピンクとか青に染めて許される人間は限られているし、私にはできません。

だから私は、髪色をピンクとか青とかに染めている人には憧れがちです。


高木琢也 安田尊@高木琢也社長を謳うブログ。
高木琢也社長(カリスマ美容師。美容サロン『オーシャントーキョー』社長)
DJ社長 安田尊@DJ社長を謳うブログ。
DJ社長(DJ集団『レペゼン地球』リーダー。株式会社『Life Group』社長)

↑特にこのふたりには、中身も含めて憧れているし、尊敬しています(じつは高木社長は赤髪ですが、私が初めて見たときはどう見てもピンクだったのでピンクという認識)。

まあそもそも、染められる部分については外見は中身を表すし、外見に惚れるということは中身に惚れるということでもありますが。

憧れとは、「なりたくてもなれない自分」ですよね。


DJ社長 DJ社長のイメージ
俺ならできる! 俺ならできる!

たとえばDJ社長は、こう連呼して成り上がった自己啓発モンスターですが、私が「俺ならできる!」を連呼しようと思ってもどうしても失うものが頭をよぎって無理です。

DJ社長はいいます、「人脈無いけど 知識も無いけど 所持金無いけど IQ無いけど 今の俺には何にも無いけど 失うもの 無いって事さ」(40thシングル【-0-Tokyo】)。

でも私は結構マジメに生きているので、髪をピンクとか青にすると、それまで築き上げてきた信用や信頼を失います。


高木琢也 高木琢也社長のイメージ
警察にめっちゃ止められるけどな

と、高木社長も自身の髪色について語っていたとおりです(NHK『プロフェッショナル 仕事の流儀』)。

しかも自分のヘアサロンを持つプロの美容師ならともかく、素人はピンク髪とか青髪とかを綺麗に維持できません。

つまり私がピンク髪とか青髪とかに染めれば、真面目なイメージや信頼を失い、髪色まで落ちてすべてを失います。


ピンクと青 安田尊@ピンクと青を謳うブログ。
でもブログなら、どんなにえげつない色でもだれにも文句をいわれる筋合いはないし、色落ちもしない。

これがアフィリエイトブログやショップサイトを作るなら、(購買意欲にマイナスっぽい)ピンクと青は大失敗なんでしょうが。

私は広告収入が目当てでブログをやるわけではないし、収益が見込めないとかどうでもいい。

それに趣味メインのブログでも、ピンクと青の2色しか見えないならヤバいかもしれませんが、


~当ブログで実際に見える色~

サイトロゴ ↑サイトロゴは逆に黒白だけど
白い背景や黒い文字

サイトアイコン 安田尊@サイトアイコンを謳うブログ。
ピンクと青が数種類

色々 安田尊@色々を謳うブログ。
画像やイラストの色

なので、それなりにカラフルだから大丈夫でしょう。

ブログは、自己表現・自己実現・自己満足の場です。

自分の好きな色に塗りたくるべきです。


神 安田尊@神を謳うブログ。
せっかく自分が「」になれる場所を手に入れたのに、無難なカラーリングを選ぶ人生はつまらない

まとめ:スマートにデザインする方法


安田尊 安田尊@まとめを謳うブログ。
それではおさらいも兼ねて、ここまでの要点を3点でまとめます。

  1. WordPressブログのデザインは、WPテーマが9割!有料テーマも視野に入れる
  2. それでも、残り1割のカスタマイズで沼るので、完璧主義はやめたほうが良い
  3. まあでも、結局は自由!手間と時間をかけた分だけ、ブログに愛着が湧くから

以上です。

③「ブログに愛着が湧く」について補足をすると、結局のところ、


~ブログ開設から5年後~

ブログ 安田尊@ブログを謳うブログ。
私は2019年から2024年現在まで5年以上、ブログを継続できています

本記事は、2019年に執筆した記事を、2024年に大幅リライト(加筆修正)しました。

これ以上の証明はありませんよね。

バカみたいに迷走してもいいし、プロみたいに綺麗な仕事である必要もありません。


愛着 安田尊@愛着を謳うブログ。
自分で作った料理は美味しく感じるし、自分で仕上げたブログには愛着が湧きます。

自分でつくった料理のほうがおいしく感じるわけ【NHI症候群】

私たちは「自ら考えだしたアイデア」に夢中になる

 私の料理の腕はたいしたことはない。妻もそれは知っている。それでも、ときにはなんとか食べられる料理ができあがることもある。
 何週間か前、私は舌平目を二枚買った。ありふれたソースではつまらないと思った私は、「新しいソース」のレシピを考え出した。白ワインと、ピューレにしたピスタチオと、はちみつと、おろしたオレンジの皮を混ぜあわせ、そこに少量のバルサミコ酢を加えるというかなり思い切った組み合わせである。
 妻は焼いた舌平目を皿の端に寄せ、申し訳なさそうな笑みを浮かべながら、ナイフを使って魚からソースをこそげ落とした。
 だが私には、そのソースは悪くないように思えた。私は彼女に、それがどれほど大胆な創作料理かを詳細に説明し、きちんと味わってみるべきだと勧めたのだが、彼女の表情は変わらなかった。
 二週間後、我が家の食卓にまた舌平目がのぼった。料理をしたのは妻だ。
 彼女は二種類のソースを用意していた。ひとつは彼女の定番のブールマニエソースで、もうひとつは〝フランスの有名シェフの創作〟ソースだった。だがふたつ目のソースはひどい味だった。
 食事が終わると妻は、あれはフランスの有名シェフの創作ではなく、二週間前に私が考え出したソースだと打ち明けた。彼女は面白半分に、私が「NIH症候群」に陥っているかどうかを試し、私の有罪を証明してみせたのだ。

 私たちは、自分の知らないところでつくられたもの、つまり「ここで発明されていない(Not Invented Here)」ものについては、なんでもネガティブに評価してしまう
 私たちが「自ら考えだしたアイデア」に夢中になるのは、この「NIH症候群」が原因だ。魚のソースだけでなく、あらゆる分野における解決策や、ビジネスのアイデアや発明に対しても「NIH症候群」は発生する。

ソース:『Think Smart 間違った思い込みを避けて、賢く生き抜くための思考法』 – 著:ロルフ・ドベリ 、訳:安原実津、サンマーク出版2020年

たしかに、他人に食べさせる料理や、お客様あってのビジネスで【NIH症候群】に浸るのはまずいでしょう。

でも趣味のブログなら?

趣味のブログでも、多少は読者のことを考えなければまずいかもしれませんが、


安田尊 安田尊@答えを謳うブログ。
でも読者の前に、自分を楽しませなきゃ続きませんからね。

私はここまで、【THE THOR】にデザインの9割を頼りながら、残り1割で迷走に迷走を重ねました。

でもその苦労と失敗と汗と努力が、ブログを継続するための力となったのです。

以上、Think Design、ブログのデザインは程々の完璧主義(盛大な矛盾)で楽しみましょう!

answersong.com" width="1280" height="904" >

answersong.com