ぱつこさんにブログのデザインを叩き直された話。
こんばんは。ピピ助です。
このブログを開設してから１年とちょっと。
（昔は無料ブログでやってたので、まともに始めてからは半年と少し）
特にここ数ヶ月でテンプレートをはじめとした様々な部分に手を加えた当ブログですが、実は裏に影のブレーンがいたのです。
ばばーん！！
はい、この方。
ぱつこさんです。
たまたまはてなブログを見ていたところ、「【限定5名】デザインに悩むブロガー必見！グラフィックデザイナーがお手伝いします。」という記事を発見。
ちょうどその頃、どうせブログを書くなら見やすく面白いものがいいなァと悩んでいたピピ助は、神の思し召しに違いないと飛びついたのでした。
目次
ファーストコンタクト
早速ツイッターのDMでぱつこさんにコンタクトを取りました。
ツイッターやっててはじめて役に立ったと思いました。いや、ほんと。
ツイッターどう役に立てたらいいのか未だにわからん。薄毛に悩む大学生をちょっと慰めたくらいしか使ってないような。
色々とお願いしたのですが、
「まずは根本的にテンプレートから変えましょう」
とのことで、ぱつこさんとの長いやり取りが始まりました。
正直、今回はぱつこさん発の企画とはいえ、無料でお願いするのが申し訳ないほど色々アドバイスをもらいました。
直してもらったもの＆作ってもらったもの&教えてもらったもの
ぱつこさんの手で変化した部分をまとめておきたいと思います。
正直、完全に別物です。お願いする前はこんなに変わると思ってなかったので、beforeのデータを全然残してませんでした。
比較できないのが残念です。
ヘッダー画像
まずは一番目立つヘッダー！
製作していただくにあたって、まずどんな方向性、雰囲気を求めているのか、既存のサイトを使ってアイデアを出していきました。
縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG
こういうサイトがあること自体初耳で、とても新鮮。
ここからいいなーと思うデザインをピックアップしつつ、ぱつこさんのオススメを教えてもらい、そこにピピ助自身のイメージを加えて作ってもらったのがこのヘッダーです。
もうこれ、めちゃくちゃ可愛くないですか？
このゆるいフォントの感じといい、悩みのなさそうな羊の表情といい、ピピ助の求めているものをパーフェクトに持ってきてくれました。
パーフェクトだなんて表現は仰々しいかもしれないですが、ぱつこさんは本当に時間を掛けて丁寧にやり取りをしてくださいましたからね。
だからこそのクオリティ。ピピ助もこの羊のごとく喜んでます。
このフォントは「たぬき油性マジック」というものらしいです。
フリーフォント『たぬき油性マジック』を公開しました。 – たぬきフォント
フォントの種類もいくつか用意してくださったり、色も異なるバージョンを用意してくださって、そこからどれが一番いいか相談しながら選びました。
実際にヘッダー画像を設定してからも、再度バランス調整してくださったりと至れり尽くせり。
「スマホのヘッダーはあまり大きくない方が良いのでこれで丁度いいと思うんですよ」
修正前の時点で大満足だったんですけど、いざ修正してもらうとやっぱり修正後の方が格段にいいんですよこれ。
本職は凄い。
テンプレートの変更
次に、テンプレートの変更です。
もともとはじめは「Stringer」を使っており、どこからどう見ても普通のブログの形をしていました。
「専門性の高いブログは、カテゴリ名と記事がトップに出ている方が良いです！」
というアドバイスでテンプレートを変更することになりました。
一緒にあれでもないこれでもないとテンプレートを探すのにおつき合いくださり、最終的に現在のテンプレートにたどり着きました。
「Mesocolumn」というテンプレートで、完全日本語対応はしていません。
設定で特に困ったのがレスポンシブ。
デモだとレスポンシブに対応しているのに、自分で設定するとレスポンシブになっておらず、PC以外の閲覧が使い物にならない状態でした。
日本語対応していないテンプレートなので、自ずと日本語の解説も少なく……。
ぱつこさんもCSSは少々苦手とのことで、初めはこのテンプレートを諦めたのですが、
「絶対にこれがいいです！」
という励ましを受けて奮起。
海外のフォーラムを見つけてそこでようやく解決したので、ご紹介しておきます。
手順は簡単。
テーマでMesocolumnを選択して、カスタマイズへ。
Generalの中になるMiscellaneousを選択し、一番したにあるResponsive LayoutをEnableに変更する。
これで完了です。
これだけのために3日くらい悩みました。
このヘッダーとテンプレートに変わってから、他の育毛ブログで紹介してもらったり、お問い合わせが増えたりと、びっくりするほどの変化を受けています。
デザインの力をひしひしと感じます。
本職って凄い。
カテゴリ名の変更
もともとは適当な名前をつけていました。あと分け方もかなり雑多。
「SEO的に言葉の選定も必要になってくると思うんです」
というご指摘を受け、これを検索によく使われるワードに変更しました。
さらにパンくずリストも導入して、カテゴリー名でも検索に引っかかるように改善。
と言っても、SEO的に言えばビッグワードなので、これ単体で検索にかかることはまずないとは思いますが。
でも確かに、わかりやすいのは大切ですよね。
人に指摘されると、変に奇をてらったことはしないほうが良いというのはよくわかります。
役に立つ無料フォント
基本的にこのブログの画像は無料ソフトのFotorと、Illustratorで作っています。
画像加工の際には文字を入れることが多いわけですが、もともとプリインストールされているフォントだけでは何かイマイチしっくりこない。
そんな時に使えるオススメのフォントをたくさん教えてもらいました。
ほのかアンティーク
ぼくたちのゴシック２ボールド
鉄瓶フォント
源真ゴシック
やさしさアンチック
源柔ゴシック
miniーわくわく
こども丸ゴシック
KFひま字キッズ
たぬき油性マジック
ピグモ00
マキナス
はんなり明朝
こういうイイ感じのフォントが無料で使えるとは！
ありがたい限りですね。
その他諸々
もうね、細かいこと言い出したらキリがないくらい細かく、いろいろなアドバイスをいただきました。
もともとの約束は「お一人５つまで相談や創作物を受け付ける」という話だったはずなんですけど、あまりにも元々のブログの出来が悪かったので片っ端から直された感じ。
ありがたいやら申し訳ないやら、ぱつこさんには頭が上がりません。（笑）
指摘を受けただけで改善していない部分がまだ残ってるので、これからも地道に改善していきたいと思ってます。
Who is Patsuko?
ぱつこさんは北海道在住の20代幼稚園児フォトグラファー見習いのデザイナーさん。
ブログ「ぱつかるちゃー」を運営されてます。
ピピ助が募集を見つけたのもそのブログ。
まだブログ開設してから日が浅いのに、既に月6万PVだとか。
このブログの、んーっと、何倍だ？
でも、読者が増えるのもよくわかります。
整理されてわかりやすいデザインに、豊富な話題。美しい写真の数々とくれば人の目を惹きつけて離しません。
こういう写真を見ると、北海道行ってみたいなあ、と強く思います。
＞＞【【地下鉄が超おトク】北海道最大の都市・札幌をカメラを持って散歩しよう – ぱつかるちゃー
ピピ助、カメラが欲しいです。
欲しいと思ったまま何年もカメラ欲を放置していましたが、ぱつこさんのブログを読んでいるとカメラ欲を抑えられなくなります。
＞＞カメラ初心者が写真を撮影する前に頭に入れておいたほうがいい事。 – ぱつかるちゃー
＞＞超簡単！iPhoneで写真撮影してイマイチだった時の対処法。 – ぱつかるちゃー
＞＞EOS kiss x5を購入した後OLYMPUS PEN E-P1まで購入してしまった話 – ぱつかるちゃー
カメラはなくとも、とりあえずiPhone片手にどこかへ行きたくなります。
残念ながらピピ助は自転車族なので、そこのあたりはわかりあえなそうですが……。
つい最近ですが、WEBのロゴデザインのデザイン料金が決まったそうです！！
形式で決まったやり取りではなく、良い意味でラフに気さくにやり取りしてくださるので、こういうのが初めてという人も安心してお願いできます。
デザイン以外にも多方面で活躍されているので、ブログを覗くときっと何か楽しいものが見つかると思います！！
コメントを残す