チューリップ・ライフ

~ゆとりのある生活を目指すゆとり世代OLのブログ~

【ぱつこさん監修】グラフィックデザイナーによるブログデザインのビフォーアフターを公開します!

こんばんは、ちえりです。

お気づきの方もいらっしゃるかもしれませんが、実はブログデザインを一新していました。

 

www.ptkabe.net

 2ヶ月前にこんな記事を見つけ、ブログデザインについていろいろ教えてもらえることになりました。

その結果、おしゃれに大変身したのが嬉しいので記事にしてみようと思います。

 

スポンサーリンク

?

 

 

ブログデザインについて教えてくれたのは、グラフィックデザイナーで、アクティブライフハックを紹介したブログ「ぱつかるちゃー」を書かれている、ぱつこ(id:ptkabe)さんです。

わたしはぱつこさんが限定5名で募集した「ブログデザインのお手伝いサービス」の無料枠にすべりこませていただいたので、完全無料でやっていただきました。安いという次元ではないです。感謝です。

 

依頼から対応までの流れ

基本的に、わたしがお願いをしてからは1つずつ希望をヒアリング→具体策の提案→お試し→微修正→最終形へ完成という形でひとつずつ細やかに対応してくれました。

 

やりとりも丁寧で、こんな風に対応してもらいました!

 
f:id:E4DC8A:20160925155217j:image

 


f:id:E4DC8A:20160925155224j:image 

 

とりあえずこれやっときゃOKなところから、わたしのブログならではのポイントなど、丁寧に教えてもらえました。

 

それではひとつずつ紹介&解説していきます。

 

お願いしたこと

今回、5つまで質問したりアイコン等の作成を依頼したりしてもよいということだったので、わたしは下記をぱつこさんにお願いしました。

 

①今後のデザインの方向性の相談

迷走中なのでざっくばらんに指摘してくださいと頼みました。ぱつこさんからは大きく分けて「色」「フォント」「構成」を工夫してみてほしいと返答がありました。

 

色味について

ブログ自体は緑でまとまってて良いが、アイコンがピンクだったりするのは気になる。タイトルに「チューリップ」とはいっていたり、背景が緑なのでなんとなく「」っぽさを連想させる…とぱつこさんはわたしのブログを分析してくれました。

たしかに、あまり意識してなかったけどブログを書き始めたのも春だったし、すごくしっくりくる指摘でした。

 

わたしのブログはペールトーンの緑のみで構成されていました。(当時使っていた公式のブログテンプレのものです)

このグリーンは、ペールトーンというトーンの分類に入っているそう。一般的には「パステルカラー」と呼ばれる色合いです。(ちなみにトーンとは、彩度や明るさを揃えた色のくくりの一種だそうです)


なので、ぱつこさんからはペールトーンの中から何色か他に使う色を決めることを提案していただきました。トーンを揃えてあげると、ごちゃごちゃにならずに色を加えることができるんだそうです。ここでのポイントは緑(メイン)のほかに2色だけ、とのこと。

 

わたしが好きな色は青よりのラベンダーとピンクですが、Twitterにも使っているアイコンが黄色なのでそのイメージがあるかもしないなあと相談したら、ぱつこさんから下記の画像が送られてきました!!

 

f:id:E4DC8A:20160926221254j:plain

 

か、かわいいー!

CSSで色指定するときに使ってくださいとこの色見本のカラーコードを教えてもらいました。

めちゃめちゃありがたいですね。素人だと色を選ぶのもたいへんだもん。この色合い使えばまとまって見えるから悩むなくてよい。最高!

しかも「淡すぎると印象に残りづらいので、ちょっと濃いめに作ってあります」とグラフィックデザイナーならではの視点でのおすすめカラーでした。ありがたさしかない。

 

つづいてぱつこさんからのアドバイスは「ほかの部分と差別化して目をひきやすくするためサイドバーのメニュー名をグレーにしてみてください」でした。

生意気にも試しにピンクを使ってみたら、結構気に入ってしまったわたしはグレーよりピンクがいい!と反抗しました。(めんどくさいクライアントでごめんなさい、ぱつこさん!)

 

でもほら、結構かわいくないですか?

f:id:E4DC8A:20160926222415j:plain

 

しかし大人なぱつこさんは「ピンクもいいけれど、サイドバーが目立ってしまうので文字色だけにしてみてはいかがでしょう?」と丁寧に教えてくれました。

おとなしく文字色だけピンクに変えてみます。

 

f:id:E4DC8A:20160926222435j:plain

 

あ、落ち着いて見えるしちゃんとブログの記事タイトルが引き立ってますね!

さすがプロはしっかりとアドバイスしてくださるなと思う一件でした。

色味を変えただけでもブログの雰囲気がかなり変わりましたが、まだまだこれでは終わりません。

 

フォントについて

書体についてはコードを送っていただき、CSSに追記するだけでした。PCから見ると結構変わります。テイストのかけ離れたフォントを複数使うとごちゃごちゃ見えるけど、同じフォントだけよりメリハリが出て見やすくなるようです。

 

ブログのデザイン構成

つづいてはデザインの構成について。

 

写真情報は一目見た時に目につくところにあったほうが目をひくのでサムネイルなどの表示もして目立つところに掲載しようとのことで、反響のある人気記事は、最新記事のすぐ下に配置しました。

また、なにも書いていないプロフィール項目に文章を加えるよう勧められ、簡単ですが自己紹介を追加しました。

 

 ざっくばらんにご指摘くださいと言っただけでこんなに教えてもらえるなんて、本当に無料でいいのか不安になってきました。

でもどうやら本当に無料らしいので、つづいて教えてもらいます。

 

 

②ヘッダーについて

以前ヘッダー画像が重すぎて「チューリップ・ライフは画像が重すぎ」とつっこみをいただいて以来ヘッダーは消していました。しかし!そうするとわたしのブログはあまりにも殺風景。ぱっと見てわたしのブログだとわかるようなキャッチ―なヘッダーにしていなと思っていました。今回はこれが頼みたくて、この企画に応募したと言っても過言ではないです。

 

ぱつこさんからは「イメージに近いヘッダーやロゴの画像を5枚ほど送ってほしい」と言われ、画像検索して、フラットデザインか、おしゃれな感じの写真を送りました。

そこからもっと具体的に、わたしがイメージするヘッダーを手描きイラストで送り、ぱつこさんとイメージを共有しました。

 

その私のラフイラストをもとに、ぱつこさんが作ってくれた画像がこちら。

 

f:id:E4DC8A:20160926224209j:plain

鉢植えのデザインがとてもかわいくて、理想通りというか期待を越えててすごくわくわくしてぱつこさんに感想を送りつけまくりました。

ぱつこさんは前にパチンコチラシを作っていたそうなのですが、真逆の方向でもこんなに素敵に素材を作ってくださる素晴らしいお方でした・・・感謝です・・・!

 

しかしここでちょっと問題が。

ヘッダー画像がうまく表示されません!

 

f:id:E4DC8A:20160926224610j:plain

 

困ったと騒ぎ立てるわたしに「スマホの可変なんですけど、以前私もひっかかり人力検索はてなで聞いたんですよ。そのURL持ってきますね。http://q.hatena.ne.jp/touch/1461931673」と鮮やかなリターン。かっこいい。

(余談ですが、わたしもよく仕事で調べればわかる質問されるから、人に質問するときは自分である程度調べてからきこうと反省しました。ぱつこさんありがとう。)

 

無事に上記の対応で表示についてはクリア。

でも白背景がなんだか物足りず、気の抜けた感じが気になるわたし。

 

わたしのテンプレートの設定では、背景色を変えると記事部分にも影響してしまうため白背景は変えられないようでした。ぱつこさんから「背景色つけたヘッダーの方がいいかもしれない」と申し出ていただきましたが表示で可変にしたら背景まで縮んでしまうということで解決策が見つかりませんでした。

 

テンプレートのCSSでなんとかできることがないか探したものの、同じテンプレートで画像挿入してる人は白背景でおそらく対応が難しいと絶望的な空気に。ぱつこさんは白背景でなんとかなるように作り直してみる、と修正してくださいました。

 

より良くなっていくヘッダー画像、とても素敵なのですがスマホ表示のときに余白感が気になりました。わたしはあきらめきれず「いまさら違うテンプレートにしたら、アイコンの色合いに影響が出るから難しいですよね。」と聞いてみました。

ぱつこさんは「色合いに影響が出るのはまだ簡単に直せるかも」とのことで、わたしはこの期におよんでほかのテンプレートを探しはじめる暴挙に出ました。
(今思うとめちゃくちゃご迷惑をおかけしている・・・!すみませんでした)

 

ここから1回テンプレートを変えたのですが、結局うまくいかず少し萎えはじめていたわたしにぱつこさんから神の一声が。「わたし使ってるテンプレート、そういえば背景色きちんと付けられますよ!」

 

な、なんだってー!!

 

無事、この一声のおかげで十数日近く悩んだ問題は解決したのでした。

さあ、そろそろ気になるビフォーアフター、もう少し下でお見せします。

 まだまだつづくよ。

 

③アイコン

f:id:E4DC8A:20160926233754j:plain

アイコンはヘッダーとおそろいのチューリップがいいとリクエスト。ブログ名の由来になったのが赤いチューリップだったので色も赤でお願いしました。

文字の有り無しなど複数パターン作っていただき、そこから選ばせていただきました。

 

④画像の加工方法

わたし、自覚はありますが写真の加工がすごくださいんです。それをなんとかしたくて、ぱつこさんに教えを乞いました。

 

わたしがぱつこさんを意識して作ったアイキャッチ画像がこれ。

f:id:E4DC8A:20160926230836j:plain

まあ、悪くないですよね。今までのわたしからしたらかなりマシです。

 

ぱつこさんにかかるとこれはこうなります。

f:id:E4DC8A:20160926230839j:plain

・・・おしゃれすぎる。

文字にメリハリがあって、強調したい部分がわかりやすい。

 

ぱつこさんは、細かくヒアリングしてわたしが普段スマホでしか写真を加工しないことを見ぬき、Androidで使える「phonto」というアプリを紹介してくれました。

 

このアプリ、フォントが沢山ある上に文字の細かい設定まで出来るんです!。(受け売り)

「文字間をあけると少しおしゃれに見えますし、
はみ出した文字は後ろのフキダシと同じ色で囲ってあげるとバラバラした印象になりにくいです。フォントも上と下で違うものを使用しています。

文字の間って普段はあまり意識しませんが、意外と重要なんですよ。」というぱつこさん。めちゃめちゃわかりやすい・・・!


わたしが、「文字をどのへんに入れたら良いかはルールがありますか?わたしはいつも中央を少しずらす位置にいれるようにしてるのですが」とさらに質問すると写ってるものよるから、写真を送ればいくつか見本を作ってくれるとのこと。

 

そしていただいたのがこちらです。

 

f:id:E4DC8A:20160926231410j:plain

↑美容室で渡される雑誌で自分を客観視してみよう的な記事

ぱつこさんコメント:

こちらはラインカメラのアプリでまず文字をぼやかし、色を濃くしました。
(ぼかしの機能があるアプリであればどれでもできます)

なぜかと言うと、雑誌の表紙って文字情報が多いんですよ。
そちらをぼかすことによってタイトルを見せるように誘導しています。

そして、余白が少ないので文字情報を二分割して可読性を上げました。

これ、タイトル白の方が良かったかも知れません。(笑)

 

 

f:id:E4DC8A:20160926231431j:plain

↑なつかしの揚げパンを味わえる給食居酒屋にいってきた的な記事用

ぱつこさんコメント:

こちらも「なつかしの」という文字情報があるため、画像自体も少しビンテージっぽくしてしてしまうといいです。ただし、食べ物の写真なのでやりすぎには注意です。

レトロっぽさを出すために明朝体を使用しています。

 

f:id:E4DC8A:20160926231454j:plain

↑リーズナブルに楽しめる楽天カフェのすすめ的な記事

 

ぱつこさんコメント:

こちらの場合、全面的に建物の画像なのであえて薄くして背景として使用しています。そこにあえて後ろの緑と真逆の赤を乗せています。なんでこの色かというと、楽天カラーだからです。笑
こうやって、文字情報と色を合わせるとよりわかりやすくなる場合もあります。

 

以上で、ぱつこさんのアドバイスはおわりです。

とても丁寧にやっていただけて、有りがたかったです。

成果物としてのアイコンやヘッダーの出来映えはもちろんお気に入りなのですが、それを作るまでのヒアリングの仕方などがとてもわかりやすいなと感じました。
相談しやすかったです。そういうひとつひとつの対応ってとても大事だなと感じさせられました。

 

 気になるカウンセリング前後のブログのビフォーアフター

 一つずつの変化はそんなに大きくないはずですが、くらべてみると一目瞭然ですね。

すごくすっきりして洗練されたと思います。

 

 before

f:id:E4DC8A:20160919233314j:plain

 

after

f:id:E4DC8A:20160919233640p:plain

 

 

 なんということでしょう!(脳内再生してください)

めちゃくちゃおしゃれになりましたよね!?

 

ビフォーアフター、改めて自分で見てみるとすごく変わっていてびっくりしました。 タイトルが画像になるだけでも結構違いますね。

 

自分でもとってもお気に入りになったので、ブログ記事のプレビューを見るのが楽しみになりました。洗練されてて見るのがうれしいです。

このおかげでブログ更新がますます楽しくなりそうです。

 

 

今すぐできる!ぱつこさんおすすめテクニック

 わたしが教えてもらったことをまとめてみました。

きっとブログ初心者の方から中上級者までみんなに役立つと思います。

 

・色を単色から3色に増やしてみる
(ただしメインは変更なし。本文のアクセントに入れてみたり、サイドバーの各項目の見出しに使用するといいと思います)

 

・人気記事は下の方ではなく、最新記事の下におく

写真情報は一目見た時に目につくところにあったほうが目をひきますし、
それが最下部にあるとちょっともったいない。
せっかくサムネイル表示もしているので是非上に持ってきてください。

 

・プロフィールに文章を加える
パッと見た時にどんな人が書いているかわかると読む側もわかりやすくていいと思います。

 

・写真加工は自分なりのルールを覚える

見えにくかったら画像を思い切って薄くしてしまうor濃くしてしまう、文字を囲う、隙間を見つけてそこに文字をのせるなどルールを覚えてしまえばあっという間におしゃれな画像加工ができそうです。

 

 

わたしの学び

今回の企画でぱつこさんからいろいろとご指摘いただき、足し算だけじゃなく引き算のデザインもあるのだなと学べました!ぱつこさんもデザインは基本的に引き算だと考えているそう。「グラフィックデザイナーはアーティストではなくて情報整理屋」ということで、必要なものを詰め込むのではなくて、必要なものを残して整理するのが重要なんだとか。

たしかに、わたし自身、今までは完全に情報を乗せていくばかりの足し算ばかりでしたが、引き算のほうがむしろしっくりするなと思いました。体感できたのはすごくいい経験になりました!

 

ぱつこさん、いろいろとありがとうございました!

今後のご活躍、応援しています!

 

ぱつこさんの活躍はこちらからご確認いただけます↓

 

ポートフォリオ http://ptk-abe.tumblr.com/ 

ブログ http://www.ptkabe.net/

 

ちえり