すでにデザイン変えて何本か記事書いているのでお気づきの方も多いとは思いますが、このたびブログのデザインを心機一転大幅リニューアルいたしました。
以前のデザインはWordPressテーマ勉強用テーマ「ManabiTheme」をベースに自分でいろいろカスタマイズしていたのですが。
ManabiTheme ? EntryLevelを公開してみます ? Waviaei
http://waviaei.com/2010/03/13/manabitheme-entrylevel-09release/
自己流でいろいろカスタマイズしていた部分が多くていろいろガタが来ていたのと、OGPなど新しい仕様にもいろいろ対応しきれていなかったので、思い切ってデザインリニューアルしたい！ と前々から思っており、TwitterやFacebookのアイコンもてがけていただいたあくやんに制作依頼して作っていただきました。いつもいつもあざす！
【追記】あくやんも制作エントリー書いてくれたのでこちらもよろしければ！
「カイ士伝」のブログリニューアルデザインをしました。 – にゅるり◎
http://d.hatena.ne.jp/akuyan/20130518/1368898043
せっかくなのでデザイン変えるにあたりいろいろこだわったり気を使ったりしたポイントを。サイトのデザインはこれまで白ベースに青という、どちらかというと青中心のデザインだったのですが、フリーランス宣言した時の名刺デザインを赤基調にしており、ブログもそれに合わせた赤色に一新いたしました。
赤色にした理由はいくつかあって、その1つは「名刺なので好きな色を使いましょう」と言われてうんうん悩み、「任天堂好きだけど何色って特に無いし、マイケル・ジャクソンもテーマカラーあるわけじゃないし･･････」といろいろ考えた結果、「そうだ子供の頃から大好きなウルトラマンの色を使おう！」という流れ。
そしてもう1つは自分の中での1つの宣言だったりもします。元々青い色を好んで使っていたのは子供の頃の体験、男の子が一度は遊んだであろう「ヒーローごっこ」に端を発しております。
ヒーローごっこというのはヒーロー対悪役で成立する遊びで、どちらになるかはじゃんけんで決まるわけですが、やっぱりせっかくならヒーローになりたい、それも主役級のレッドに人気が集まるのは当然の流れ。ただそんな中、幼少の頃の私は「レッドもいいけどじゃんけんに負けて悪役になる可能性考えたら二番手でいいや」という守りの姿勢により、常に青を選んでヒーロー側につく、という消極的なスタンスを取っておりました。
三つ子の魂百までとはよく言ったもので、子供の頃のその「二番手を選んで守りに入る」という精神はいまでもそういうところがあるよなあと自覚しつつ、フリーランス活動するに当たって「そんな二番手意識じゃなく、自分が好きなものを前向きに選んでいけるような意識でありたい」と考えた結果がこの赤色採用だったりします。なんという厨二な発想ではありますが、個人的に今まで赤色というのはずっと恐れ多い存在だったのですよね。カイ士伝の元ネタであるガンキャノンもそういえば赤色な訳で、これで名実ともにカイ士伝となったようなよくわからない気分もするところであります。
うっかり色のこだわりが長くなりましたがその他にも普段からブログ読んでくれている人の意見をいただきつつブログの構成も今までとは全く違う方向へ一新しました。個人的にはトップページにブログ記事がずらずら並ぶ昔ながらの形式が好きで、いちいち記事クリックしないと読めないのは面倒だと思っていたのですが、普段から読んでくれている人からすると「記事が長すぎるのでトップに並んでると重い」という意見をしばしばいただいており、よりコンパクトな形にトップを一新してみました。
そういえば自分で使っていても、最近はタブブラウザ機能が充実しているから今までほど「1回で複数記事を見たい」という思いは強くないなということにも気づき、こういうシンプルなのも悪くないかなと。1つの記事エリアがすくなくなったぶん、トップの表示記事数は5記事から15記事まで増やしてみました。ほんとはもうちょっとあってもいいのかもだけど。
また、記事がタイトルだけだと寂しいのでアイキャッチ画像をトップページに表示するように変更。アイキャッチ設定めんどくさくてつい忘れがちになりますが、これからはマメに設定したいと想います。
ちなみにアイキャッチの表示形式は古巣であるImpress Watchのデザインを参考にさせていただきました。イメージとしてはAV Watchがわかりやすいかな。古巣だから褒めるわけじゃないですが、ニュースサイトのなかでもImpress Watchはシンプルで非常に読みやすいと思います。
AV Watch
http://av.watch.impress.co.jp/
ただ、毎回画像があるわけではないので、画像が無いときでもデザイン崩さないよう「TEXT ONLY」の画像も作ってもらいました。これはエヴァンゲリオンファンとしてゼーレの「SOUND ONLY」をインスパイアした作りになっております。
記事ページはレイアウトは今まで通り記事エリアは640ピクセルの画像を表示できるサイズにしつつ、テーマカラーに合わせた配色をしてもらいました。このあたり何も指示出ししてないのに絶妙なカラーバランスにしてもらうあたりさすがのクオリティを感じます。
ちょっとしたこだわりとして、すべての記事は前の記事と次の記事へのリンクおよびタイトルを出すようにしました。人のブログってつぎつぎとぐいぐい読んでいくの結構好きなので。また、「前の記事」「次の記事」ってどっちがどっちやねんとわからなくなりがちなので、用語を「過去」「新しい」ともうちょっとわかりやすい作りにしています。
なお、「1ページごとなんてまどろっくしい！」という人は今までの記事がすべて一覧表示されるこちらのページも合わせてご利用下さい。
カイ士伝大全 ? カイ士伝
https://bloggingfrom.tv/wp/allpage
記事下のソーシャルボタンは見直しを図り、新たに話題のPocketボタンを追加。でもこれ冷静に考えたら「後で読む」ためのボタンなので記事下は使いにくいよね･･････。そのうち記事上に場所を変えたいと思います。
導入してみるとPocketって確かに使われているんだけど、これってアーカイブされるだけでそこからシェアで波及されるわけじゃないので、PV向上を図るツールというより「読んだよ！」っていう行動を可視化するためのツールですかね。そういう意味でははてなブックマークではなくはてなスター的な感じ。はてなスター、OpenID対応でいろんなソーシャルサービスでログインできたらもっと面白くなりそうなんだけどなあ。
コメント欄はFacebookコメントと通常コメントを併設。やっぱりまだまだソーシャルサービスの利用率は低くて、コメント欄だから安心してコメントできるという人もいるので、せっかくコメントしてくれる人のためにもこういう場所は残しておきたいと思います。スパム対策もWordPressのプラグイン「Akismet」のおかげでほぼ対策できてますし。
画像は周りに影をつけることでより画像としてわかりやすいように。特に背景が白いスクリーンショットを貼った場合、どこまでが画像かわかりにくくなっていたのですが、これでだいぶスクリーンショットが確認しやすくなったかなと思います。
まだちょこちょこっと修正する可能性はありますがほぼほぼ完成形にちかづいたということで記念にエントリー。スマホ版もWPtouchのカスタマイズが手抜きだったのですが、このオサレデザインを見て心機一転改めて作り直したいと思います。