ブログテーマ「Codomisu Flat(こどみすふらっと)」をリリース後いち早く導入してから3ヶ月が経過しました。
最近ではCodomisu Flatを導入しているブログも増え、いまひとつ個性が無いと悩んでいたので、久しぶりにブログデザインをがっつりと弄ってみました。
Codomisu FlatはPC専用のテーマですが、今回はスマートフォン用のデザインも大きく変更をしています。
今回の大規模な変更は私1人ではなく、3名のとあるブロガーさんに協力をしていただきました。
本日はブログデザインの変更発表と合わせて、ご協力いただいた人達のご紹介をさせていただきます。
OMGさんに見出しデザインを依頼
1人目はグラフィックデザイナーのOMG(id:omg-ox)さん。
OMGさんのブログ「OMGmag」も私と同じCodomisu Flatを採用されていますが、見出しなどの色のチョイスが素晴らしく、ゴテゴテしたカスタマイズをしていないのにも関わらず個性が出ています。
http://www.omg-ox.org/entry/customizewww.omg-ox.org
そんなOMGさんに依頼したのが見出しのデザインです。
紫をメインに使ってほしいと伝え、出来上がったh2〜h5見出しがこちら。
指定した紫と元々ブログで主に使用していた藍色、それらに合う差し色としての黄色を組み合わせた各見出しを作成していただきました。
大好きな紫はもちろんですが、差し色に使われている黄色が素敵ですね。
作っていただいた見出しをそのまま入れるだけですと、これまで藍色を基調としてデザインしていた箇所とのバランスが崩れてしまうので見出し以外にも変更を加えました。
ヘッダーロゴマークの色、サイドバーの項目名、記事内ですと注目記事の枠や下線マーカーの色を変更しています。
それらの色についてもOMGさんには相談に乗っていただきました。ありがとうございます。
どこが変わったか気になる人は、このブログを隅々までチェックしてみてください。
ぱつこさんにバナーを依頼
2人目は以前にもブログのヘッダー画像を作成していただいたぱつこ(id:ptkabe)さんです。
ブログのヘッダー画像を作成してもらいました。控えめに言って最高です！
前回作っていただいたヘッダーが本当に素敵で、今回再び依頼をすることに。
その内容はバナー用の画像です。
先日作成した「レビュー商品一覧ページ」の入り口に使うためのバナー画像が欲しいなぁと考えていた時に、ぱつこさんのブログ「ぱつかるちゃー」のサイドバー上部のバナー画像に一目惚れ。
ぱつこさんはブログのヘッダー画像以外にもバナー画像や名刺のデザインなどの作成サービスも行われています。
今回はバナー制作の3案パック(8,500円)を選択しました。
その他の料金表はぱつこさんのブログをご覧ください。
作成していただいたバナーがこちら。
この人に依頼して良かったと強く感じるほどに、どれも素敵な作品です。
こんな素敵な作品を3つも考えていただいて8,500円ってめちゃくちゃ安くないですか…？
どの案を採用するか非常に悩みましたが、周りの人にも相談して最終的に1つに決めました。
PC表示時はサイドバー上部、スマートフォン表示時にはヘッダー下に配置しています。
新規の訪問者がこのバナーをきっかけに、レビュー商品一覧ページに興味を持ってもらえたら嬉しいですね。
つばささんとスマートフォンレイアウトを相談
3人目はブログカスタマイズ記事で有名なつばさ(id:tsubasa123)さんです。
色んな記事を参考にしていますが、特にカエレバ・ヨメレバCSSジェネレーターは先日立ち上げたVAPE専門ブログ「VAPERS」でも使わせていただいています。
そんなつばささんとはTwitterでも親しくしていただいており、その中で「スマートフォン表示時のデザイン弄りたいんですよね〜」なんて話してた数日後…
なんと「デザイン案作ってみました！」とのメッセージが。
それお願いしたいですwあ、うぃるさんのスマホサイト、トップページだけですけど結構ガチで作ってますのでまた連絡させてもらいますw
— つばさ@はてなブログ (@_tsubasa123_) 2017年6月24日
神かな？
送っていただいた案がこちら。
神かな？(2回目)
めちゃくちゃ格好良いですし、何が凄いってこの後コードもそのまま送っていただいたのです。
その後も「ここはこうした方が良いのでは…」「ならここは○○で…」とやり取りを重ね、本日とうとう公開できるところまで辿り着くことが出来ました。
スマートフォン表示時のデザインはつばささん案をベースに、OMGさんの見出しに合わせて紫をメインに使用しています。
つばささんに作成していただいたデザインの中でも、タップして表示されるメニューが特に格好良くてお気に入りです。
このような三本線のメニューを「ハンバーガーメニュー」と呼びます。
実装方法はつばささんのブログに詳しく書かれていますので、良いなと思った人はぜひ読んでみてください。
OMGさん、ぱつこさん、つばささんへ
今回の変更はどれも私1人では思いつかない・作れないものばかりでした。
それらをこうしてブログに組み込めたのも3人のおかげです。本当にありがとうございます！
最後に
今回は久しぶりに大きなデザイン変更になりました。
特にスマートフォン表示に関しては以前に大改修をしたのが2016年5月ですので、1年以上も前のことになります。
あまり頻繁に変えていると読者も困惑してしまいますが、デザイン変更はブログのモチベーション向上にも役立つので今後も時々手を入れていきたいですね。
見た目はもちろん、速度面も意識したいところ。
PageSpeed Insightsでもスマートフォン:73点・PC:77点と、はてなブログとしてはまずまずの結果となっています。
しかし改善の余地はまだまだありますので、今後も読者が読みやすく、そして自分自身が運営していて楽しく感じるブログ作りをしていきます。
それではまた。