ども、コンニチワ。デザインセンスと絵心の無さには定評のある いぢま。（@ezm_t ）です。
さて、そんなオイラを見兼ねて、オイラの落書きの師匠でもあるブログ『タムカイズム | 人生の楽しみ方をデザインするブログ』のタムカイさん（@tamkai）が弊ブログのプチリニューアル案を送ってくださったので、まんま採用させて頂きました。
いやあ、ホントにありがとうございます！
既にご覧頂いてるこのデザインがリニューアル後な訳で、今更ご紹介するまでもないかとも思いましたが、この全くもって違和感のない自然なリニューアル具合を見て頂く為にビフォーアフターな感じでご紹介させて頂きます。
サイトのリニューアルを画策中な貴方のお役に立てればコレ幸いにございます。
まずはPC版
このスマホ全盛の時代にあっても、やはりPCの大きな画面で見る事は多いものです。
弊ブログを訪れてくださる方々も、昼間の閲覧環境は圧倒的にPCが多いです。
って事で、まずはPC版のビフォーアフターからご覧頂こうと思います。
ビフォー
▲ リニューアル前のトップページ
前回、このデザインにリニューアルした際には信頼感や安心感を与えるシックで大人なイメージというコンセプトでオイラなりに考えて、自分の好きな青系統で色調を統一したこのデザインにしました。
言葉の端々にいい加減さが滲み出るオイラのブログにあって、見た目だけでもキチンとしたいという願いを込めたデザインで、オイラも気に入ってましたしたが、全体的に暗いイメージになってしまった感は否めませんね。
▲ リニューアル前の記事ページ
個別の記事を表示すれば、大きめの画像などで多少明るくはなりますが、やはりヘッダ部分の重さがのしかかっている印象です。
で、とあるイベントでタムカイさんとご一緒した際に「もっと明るい方が本人のイメージにも合うし、サイトタイトルにカラーズって入ってるんだからもっと色を使った方が良いんじゃない？」ってなアドバイスを受けて、やらねばと思った次第です。
でも、イザとなるとセンスのないオイラには冒頭の色鉛筆の写真のようにヘッダをカラフルなストライプにするとかダサいデザインしか浮かばずに困っておりました。
ホント自分のセンスの無さには呆れますw
アフター
すると、後日タムカイさんからメッセージが飛んできて、そこには何とリニューアルされた弊ブログのキャプチャ画像が添付されておりました。
仕事の合間にチョット思いついたものをチョチョっとフォトショで作ってくれたようです。
流石プロです。
オイラが「う〜ん、う〜ん」と絞り出そうとしても出てこないものが、チョチョっと出てきちゃうし、チョチョっとデザインカンプに起こして送ってくれちゃうんですから。
▲ リニューアル後のトップページ
で、その送って頂いたファイルを元に画像を作成して、CSSを手直したバージョンが今ご覧頂いているデザインになります。
ヘッダ部分の上部にランダムにカットされたような６色のバーを配置し、カラフルだけど主張し過ぎない華やかさがプラスされています。
それに合わせてヘッダ部分の背景色は白に変更されています。明るいですね♪
また、ロゴマークにも色が加わって、ロゴマークだけを見ても明るい印象になりました。
▲ リニューアル後の記事ページ
記事ページを見てもヘッダ部分がのし掛かってくるような印象はもうありません。
また、ベース部分の背景色もトーンを抑えた水色から薄いグレーに変更した事で文章のブロックが引き立って、読み易くなりましたね。
ヘッダ部分と全体の背景色を変えただけで随分と印象が良くなっちゃいました。
素敵です。本当プロって凄いわあ。
勿論スマホ版もリニューアル
PC版だけ変えても片手落ちなので、勿論スマホ版も同じデザインを適用しました。
スマホ版の方が表示される領域が制限される分違いが如実に現れますね。
▲ トップページのビフォーアフター
左のサイトと右のサイトなら、断然右のサイトの方が「また読みに来ようかな」と思わせてくれますよね。
▲ 個別記事ページのビフォーアフター
個別の記事ページにはパン屑リストを表示してありますが、今回配色を変えた事でより分かり易くなった感じがします。
以前はヘッダの重さに押されてチョット遠慮している感じでしたが、リニューアル後はちゃんと現在位置を教えてくれてるって感じでしょうかw
謝辞
今回、イベントでの懇親会中の何気ない会話から実際にデザインを考えて頂き、丁寧にアドバイスをしてくださったタムカイさん、本当に、本当に、本当に、ありがとうございます。
いやあ、多分オイラが一人で考えてたら「もっと色を使った方が良いよ。」だけに気を取られ、カラーバランスも何も考えずに色んなところをレインボーカラーにしまくって、とんでもなく目に悪そうなサイトになっていた事でしょう。
きっと、プロの直感でそんな結果までも予想して、オイラが滅茶苦茶なリニューアルをする前にデザイン案を送る事で数少ない弊ブログ読者の視力低下を食い止めてくださったのですね。
読者の視力にまでお気遣い頂き、本当にありがとうございます。
でもね、真面目な話、今回のリニューアルは凄くプラスに働く予感がビンビンなんすよ。
よくブログは中身が勝負だ、中身が面白ければデザインなんて凝らなくても読者が付いてくれるってな事を聞きます。
や、ごもっともだと思います。
でも、オイラは逆もまた真ではないかと思うんですよ。
デザインが良ければ、内容が多少薄くても読者は付いてくれるとw
や、内容が酷いのは論外だと思いますが、見た目が美しいと多少巫山戯た文章でもちゃんとしているような印象を与えられたり、何か良いこと言ってるみたいに勘違いしてくれたり、...そんなこたあ無いですね。スミマセン。
でも、どうせ読むなら読みやすい綺麗なサイトの方がいいと思うし、凄く良い事が書いてあっても見た目の酷いサイトや操作性の悪いサイトでは読み難くて「もういいや」ってなる事しばしばなんですよね。
同じ内容を書いているサイトが複数あったら、やっぱり見易い方をブクマしますもん。
そうゆう意味でも今回のリニューアルは良かったなあと思うのですよ。
って事で、今回のリニューアルを機に読者が増えることを期待しつつ、タムカイさんには今度一杯奢るということで私の感謝の言葉に代えさせて頂きます。
あざまーっす！o(≧∇≦)o
ついでにスマホ版カテゴリメニューの紹介
今回のリニューアルで付けた訳ではなく、ずっと前からあったんですが、もしかしたら気付いていない方がいるかもしれないと思ったのでスマホ版のカテゴリメニューを紹介しておきます。
▲ 黒い四角は、実はカテゴリメニューなんです
スマホ版に表示される黒い四角に三本線のアイコンは、実はカテゴリメニューの開閉ボタンになっているんです。
上の画像のように黒い四角をタップするとカテゴリメニューが開きます。
で、気になるカテゴリをタップして頂ければ、そのカテゴリに分類されている記事が一覧表示されるという訳です。
カテゴリを選択して頂ければメニューは閉じますが、もう一度黒い四角をタップしてもメニューは閉じることができます。
ご存知なかった方は是非ご活用ください。
過去記事の中に新たな発見があるかもしれませんよ。や、マジでマジでw
さてさて、今回の記事は貴方のお役に立てましたでしょうか...。
関連リンク
[スポンサードリンク]
