サイトリニューアル

ほったらかしにしていた本サイトですが、思うところがあってリニューアルしました。CMS は WordPress から middleman へ移行し、デザイン・HTML は勉強も兼ねて昨今のトレンドを意識して実装しています。

きっかけ

1. 名刺がなくなったので発注しなきゃ
2. デザインデータ紛失
3. 仕方ない。自分で作ろう。ロゴも新しく作っちゃえ。
4. 名刺できた。ブログで使っているロゴも新しいのに変えよう。
5. なんかブログのテイストに合わない。ブログもデザインし直そう。
6. WordPress のテーマ作るの面倒。。別に WordPress じゃなくてもいいんじゃね?

こんな流れでサイト全体をリニューアルすることにしました。

デザイン

Bootstrap をベースにし、レスポンシブを活かせるようなレイアウトにしました。

• フラットデザインを意識し、極力シャドウ・グラデーションを無くす
• 情報のまとまりはカード側デザインを導入

という感じです。Portfolio のページでは Pinterest 風味な動作も入れてみました。

ええ、完全に自己満足です。

SASS

私は本業はサーバサイドエンジニアなのですが、フロントエンドの技術もキャッチアップしておきたかったので、SASS を使ってみました。middleman には標準でコンパイルしてくれる仕組みが備わっています。

SASS、超便利です。定義をネストでかけるので直感的で、カオスになりにくいです。

CMS を WordPress から middleman に変更

Bootstrap でデザインする際に middleman を使っていました。middleman はプラグインで拡張することで、ブログ用のサイトも構築できることを知り、WordPress をやめました。

middleman については別エントリで詳細を書くつもりです。

markdown

ブログエントリは markdown で書けるので HTML を意識する必要はありません。もちろん markdown 内に HTML を書けば HTML として解釈されるので Bootstrap のパーツも利用できます。

これでブログを書くモチベーションが維持できるかな。

最後に

旧デザインのキャプチャを載せておきます。