サイトのデザイン変更をしました

まだ調整は残っていますが、このサイトのデザインを変更しました。

前の物も気に入っていたので変更の必要は無かったのですが、以下の理由から変更することにしました。

  • HTMLのコーディングの見直し(XHTML→ちょっとHTML5)
  • 多様な閲覧環境への対応(固定レイアウト→リキッド)
  • 制作ワークフローの見直し(DWCS5→Coda2+Scout)
  • ファイルの整理・管理方法の見直し
  • デザインの見直し(よりシンプルに見やすく)

前回からの調整だったので、Photoshopなどの画像ツールは使用せず全てブラウザとエディタだけで作業をしました。

今回、アイコン類にFont Awesomeを導入したことで使用する画像の枚数がサイト全ページを通じて0枚になりました。(ブログで投稿している画像除く)

アイコンのWebフォントは初めて使用しましたが、名前の通り画像では無くフォントなので伸縮が自在で色の変更もcssだけで対応可能なので非常に便利だと感じました。

また、CSSを書く際にSASSを導入したことでかなりの工数削減に繋がりました。

引き続き、微調整をしながら(ちょっと)レスポンシブ対応をしようと思っています。
あまり見た目は変わりませんが、スマートフォン、タブレットで見たとき少しだけ見やすくなるはずです。

キーワード

  • html5
  • css3
  • webfont(Font Awesome)
  • レスポンシブ・ウェブデザイン
  • ブラウザ・イン・デザイン

ワークフロー

  • Coda2
  • Sass(Scout)

結局使わなかったもの

  • grunt.js
  • image Optim
  • jpeg mini
  • CSS3PIE
  • pjax