2015年9月4日
WordPress・ブログ更新

Blog renewal 5

当ブログを定期的に読んでくださっている方は既にお気づきかもしれませんが、ブログのデザインを大幅リニューアルしました!

これまでネットで探し当ててきたBlue Graceというテーマを元にして(モバイル版はWPTouch→Shotokuテーマ使用)継ぎ足し継ぎ足し改造してきた秘伝のタレのような状態になっていましたが、今回プロのデザイナーさんにお願いして全面リニューアルを敢行しました。


今回は当ブログがどのようなデザインの変遷を辿ってきたかの紹介、及び今回のリニューアルで意識したポイント、変更点について紹介していきます!

「おまスキャ」デザインの変遷

せっかくなので、サイトの過去の状態を見ることができる「Wayback Machine」を使ってデザインがどう変わってきたのかを見てみることにします。
(モバイル版はWayback Machineに保存されていないようなのでPC版のみ)

▼2011年

ushigyu.netドメインを取って間もない、2011年6月頃のデザイン。そもそもあまり知識がなかったため、元テーマからそれほど変わっていません。3カラム。

Blog renewal 1

この頃はまだ顔も名前も出してなかったんですねー。懐かしい。

▼2012年

2012年。ヘッダーを他の方に作っていただく機会があり、印象がだいぶ変わりました。
写真と名前もいつの間にやら公開してます。

Blog renewal 2

▼2013年

2013年。ヘッダーが変わっていないのでさほど変化がないように見えますが、右カラム上部が1カラムになっています。

Blog renewal 3

▼2014年

2014年。トップページの見出しをサムネイル+タイトルに変更したほか、全体的に3カラム→2カラムのテーマとなりました。

Blog renewal 4

ブログデザイン依頼時に伝えたポイント

そして、今回。

ブログのデザインを、友人であり友人(@goryugo)の奥さんでもあるデザイナーの@haruna1221さんにお願いしました。

もちろん「知り合いなんだから安くしてよー」なんてことはなく(当たり前ですが)、きちんと対価を払ってプロの仕事をお願いし、それに対しプロの仕事で応えてくれました。

子供が生まれたばかりで忙しい中でもきっちり仕事をしてくれた@haruna1221さん、ありがとう!

なお、デザイン依頼は以下から受け付けているようなので、「うちのサイトもお願いしたい!」という方は以下からどうぞ。



私がデザインにあたって伝えたポイントは、以下の3点のみ。

・今と同じ青色っぽいデザインにしたい
・タイトルは「おまスキャ」に変更
・PC版について、カラムの構成と幅は変えたくない

あとは随時やりとりをしながらお互いに方向性をすり合わせつつ、進めていただきました。

依頼する側のこちらとしては、要望をなるべくわかりやすく伝えることを心がけながら。(どんな仕事でも同じですが)
@haruna1221さんも同様に専門用語やわかりにくい言葉を使うことなく連絡してきてくれたので、スムーズに進めることができました。


なお、デザイン及び画像素材の作成はやっていただきましたが、実装は自分でやりました。結構大変だった。。。俺もがんばった。

今回のリニューアルでの変更点

▼PC版

トップページ。私の好きな青色ベースのまま、より鮮やかで明るいイメージになりました。

Blog renewal 5

ブログのアイコンが変更となり、長かったブログ名はスッキリと「おまスキャ」で統一することに。
(元のブログ名「おまえは今までスキャンした本の冊数をおぼえているのか?」を右側にさり気なく入れていただいたのは嬉しいポイント)

トップページでは最新記事のほか、特に始めて来た人に読んでほしい記事をPick Upとして表示するようにしました。


サイドバー、及び記事下にはデザインを統一したフォローボタンを設置。

Blog renewal 6

Blog renewal 7

味気なかったフッターも、ヘッダーとデザインが統一されました。

Blog renewal 8

▼モバイル版

以前までのモバイル版デザイン。こちらは元々レスポンシブのShotokuテーマをベースに自分でなんとかかんとか作ったものなので、色以外はPC版との統一感がありませんでした。

Blog renewal 9

今回のリニューアルにより、PC版と同じイメージに!

Blog renewal 10

右上のMENUボタンを押すと、ナビゲーションがにゅるっと降りてきます。頑張って実装したよ。

Blog renewal 11

フッターにはPC版と同様、デザインが統一されたフォローボタン。ページトップに戻るボタンも追加されました。

Blog renewal 12

トップページには検索ボックスに、Pick Up記事。

Blog renewal 13

モバイル版では通信速度が遅い場合もあることから、ページ遷移をせずに記事を読み込めるボタンをつくりました。jQuery便利だよjQuery。

Blog renewal 14

あとがき

ブログを運営していながらあまりWordPressやCSS等の知識がないため実装には苦労しましたが、ググりまくれば大抵なんとかなるものですね。私の知りたい技術的なことをブログに書き残してくれた先人たちには感謝しかありません。

というわけで、新しくなった「おまスキャ」を今後ともよろしくお願いいたします!

⇒もっと 「WordPress・ブログ更新」に関する記事をチェックする!

フォローして更新情報をチェック