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

【WordPress】ブログのデザイン方法!WPテーマが9割だけど?

ブログデザインに関する迷走の記録


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

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

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

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

もちろん私だって、たとえば同じ「色」でも、色味や色合いの違う多種多様なバリエーションがあることは知っていましたが……。

つまり、デザイナーなら全員が覚悟していることですが、私はデザイナーではないので覚悟が足りませんでした。


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

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

  • 光沢
  • 輝度
  • 発色
  • 色域
  • 角度

思ったんですが、デザイナーに完璧主義者はいないのでは?

完璧主義者がデザイナーになったとしても、発色ムラに発狂してすぐにドロップアウトしそうです。

そして、完璧主義者でもデザイナーでもない人間でも、だれだって多少は完璧を……あらゆる環境で綺麗に表示されるデザインを追求しますよね。


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

完璧主義者安田尊@完璧主義者を謳うブログ。
私からのアドバイスはひとつ、完璧を追求してはいけない

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


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

ブログのイメージカラーが決まる前に作成したので、とりあえず万能な白と黒のカラーリング。

ちなみに作り直す時間は、ブログ開設から1週間後・1ヶ月後・3年後のどの時点でもありませんでした。

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


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

私のような(プロのデザイナーでもファッションモデルでもない)素人には、無理です。

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

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


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

「ANSWER SONG」のRと、「アンサーソング」の長音符のところなんて、楽天のロゴの一文字バージョン(Rにアンダーライン)にそっくり。

でも、特に意識したつもりはなく、


和洋折衷安田尊@和洋折衷を謳うブログ。
単純に、アルファベットとカタカナの両表記がしたかっただけです。

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

というわけで、「ANSWER SONG アンサーソング。」のロゴは、カタカナが全部アルファベットと繋がっています。


Question安田尊@Questionを謳うブログ。
だからなに?
Answer安田尊@Answerを謳うブログ。
特になにも。

ただこういう、アルファベットに下線を引くようなデザインはよくあるし(たとえばAmazonもそう)、オリジナリティが出したかったっぽいです。

でももうすでにアルファベットとカタカナを上下でくっつけているロゴもあるかもしれませんが、それはもう知りません。

とりあえず、私はどちらかといえばナイキよりアディダス派で、どちらかといえば楽天よりAmazon派で、


THE THOR安田尊@THE THORを謳うブログ。
私が参考にしたのは、WPテーマ【THE THOR】のデモサイトです。

WPテーマもデモサイトも、プロのWebデザイナーがデザインしていますよね。

そこのデザインを購入している顧客なら、参考にしても文句をいわれるわけがないのでオススメです。

ファッションでいえば、マネキンで飾られているコーディネートをそのまま購入して、ちょっとアレンジするイメージ。

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


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

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

よく自分で自分にこんな高評価を与えられるな~(しかも、微妙に同業他社とかをディスっているし)と思うけど、私は本当に圧倒されて買ったからガチです。

THE THOR『DEMO 06』、


ブルアッキーナ安田尊@ブルアッキーナを謳うブログ。
見つけた瞬間、即注文
シビれた 

って感じでした。

私は当初、有料のWPテーマを使う気はありませんでした。

でもブログを長く継続していたら結局有料のテーマが欲しくなるんだろうし、それなら最初から有料のテーマを買っておいたほうが移行とかだるくないし、じゃあいま欲しいのある? って思って、とりあえずいろんなテーマを物見遊山していたら、THE THOR『DEMO 06』に出会いました。


ズキューン!安田尊@ズキューン!を謳うブログ。
一目惚れでした。

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

私は世界陸上を思いだしました。

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

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


ズキューン!安田尊@ズキューン!を謳うブログ。
私はそのイメージに、購買意欲を煽られました。

だから当ブログのロゴも、私がイメージするナイキ寄りのイメージになってしまったのかもしれません(意識はしていないと前述しましたが、自分に無意識の働きかけがないと証明できる人間はいません)。

そして、当ブログに『DEMO 06』を適用してカスタマイズを始めても、ピンク基調は弄りませんでした。

ただ、「ピンク」の範囲内ではいろいろ弄っていたため、沼りました。

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


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

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

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

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


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

と私は思っていましたが、これは半分正解で半分間違いでした。

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

でも最終的に、蛍光色っぽくてぼやけていないピンクを出そうとして成功したものの、やっぱりいやらしくてチープで微妙だったというか


ディスプレイ安田尊@ディスプレイを謳うブログ。
PCで良い色を出したと思ったら、スマホの画面では残念パターンが多すぎました。

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

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

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


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

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

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

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


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

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

私は自己暗示をかけ、むくむく起き上がってくる素人根性を叩きのめしました。

でも、本人(つまり私)が気にしているなら、それって結構重要なのでは……だって、私は私だし、ここは私のブログなんだから……疲労も失敗も含めて、そういう諸々が楽しいわけでしょう。

というわけで、


ピンクと青安田尊@ピンクと青を謳うブログ。
オリジナリティが諦めきれない私は、ピンクはそのままで青を加えることにしました(アウフヘーベン!)。

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


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

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

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

だから私は、髪色をピンクとか青とかに染めている、


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

に憧れています。

私がどれだけDJ社長の真似をして、「俺ならできる」「俺ならできる」って連呼しても、髪を青く染めると失うものが多すぎるので……(ちなみに、青い髪も失います。DJ社長だって、青い髪は維持できていないし、薄紫とか灰色とかに色落ちしています。その点、高木社長は赤髪とかピンクの髪を長期間維持していてすごい。さすがはプロの美容師……!)。


Question安田尊@Questionを謳うブログ。
でもブログなら?
Answer安田尊@Answerを謳うブログ。
自分の好きな配色にしても、だれにも文句をいわれる筋合いはないし、色落ちもしない!!

たぶん、アフィリエイトブログやショップサイトを作るなら、ピンクと青は大失敗なんでしょうけど。

私はアフィリエイターではないし、ブロガー……?(この時点では定義がよくわかっていませんでした)

それでも、ピンクと青の2色だけだったらヤバいかもしれないけど、当ブログで実際に見える色は、


黒と白安田尊@黒と白を謳うブログ。
ブラックとホワイト
ピンクと青安田尊@ピンクと青を謳うブログ。
ピンクと青が数種類
ブログ安田尊@ブログを謳うブログ。
画像とイラストの色

とかで、それなりにカラフルだから大丈夫。

ブログは、自己表現・自己実現・自己満足の場だ!

自分の好きな色に塗りたくろう!


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

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


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

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

以上です。

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


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

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

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

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


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

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

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

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

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

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

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

それに、趣味のブログでも、読者のことを考えればまずいかもしれませんが、


駄々安田尊@駄々を謳うブログ。
まあ、そこまで媚びへつらう必要ないよね。
神安田尊@神を謳うブログ。
自分のブログでぐらい、神になりましょう

以上、Think Design!

自分の好きにデザインして、ブログを継続するための思考法でした!

>answersong.com

answersong.com