デザインリニューアルと独自ドメイン移行予定のお知らせ

駆け出しエンジニアの端くれとして、このブログデザインをイチから作りなおしてみたよ。実はちょうどなんらかの原因でレスポンシブになってなかったり、継ぎ足しCSSが悪い意味で良い感じに醸造されすぎて、管理できなくなってきていたので。

デザインコンセプト

デザインテーマとしてCuadernoとプロジェクト名にして、イメージはノート調（cuadernoとはスペイン語でnotebook)。

FLOCSS採用

設計思想はFLOCSSを採用

• 必然的にMindBEMdingになるため
• 要素の管理をしやすくするため
• キチンとした設計思想の上での作業での経験値を増やすため

HTML構成

Tumblrのテーマファイルは独自タグが入った1つのHTMLファイルになるため
Tumblr Boilerplateをカスタム

• イチから無駄に構成を構築する手間を省く
• クラスはできるだけFLOCSS仕様に再定義

CSS構成

susy2をベースに作っていくsass(with Compass)で作る

• モバイルファーストでレスポンシブ
  - スマフォ想定：599px以下
  - タブレット想定：600px～959px
  - PC想定：960px
• susy2の知見と経験を増やす
• why you don't use Bootstrap?
  - レイアウトだけできれば良いのでBootstrapだと重い
  - Bootstrapがスタンダードになりすぎた
  - Bootstrap使って作られたサイト臭がもはやカッコ悪い（個人的感想）。
  - 使ったことあるのでつまらない

デザインのトーン&マナー

• 読み易さを最大限に重視
  • Vertical Rhythmの導入
• 主に日本語を扱うことを考える（読み手は日本語を解す）
  • カッコつけだけの英語は避ける
  • その上で検索性を考慮
• 数学的美を取り入れる
  • 主に白銀比ベース（和文ベースなので）

作ってみて

全体

Sassを本格的に導入して、白銀比ベースの比率を主軸に進めてみた。実は小さい文字や最近流行の細いフォントがあまり好きじゃなく、できるだけ大きく太くをイメージしてる。もともと使ってたzen2が良く出きすぎてて比べてみると、果たして読みやすくなったのか少し疑問が残るけど、完全オリジナルとしてはなかなか悪くない出来に仕上がったかな。

ロゴ

今回はタイトルロゴも更新。以前にも1度貴金属比を意識して作りなおしたこともあったけど、今回はさらに意識してみた。それとともにタイトルを二行にした。

欲を言えばマークも貴金属比を意識して作りなおしたいところだけど、まぁ割と上手くまとまってるので、保留。そのうちそのうち。

知見

Susyは本当良い。何が良いって、デザインをスタイルシート側に持たせられること。HTMLからデザイン定義を切り離せること。分かりやすく言えばclass="col-5"などHTML側で定義するっていうことはデザインのレイアウト部分をHTML側が持つことになってしまう。これはHTMLとCSSの切り分け本意から少しはずれてしまうので、それが解消されるのが、なんだか気分がすっきりする。

独自ドメインに移行する予定です

今独自ドメインに移行準備をしている。どうやら今のURLからはリダイレクトかかるらしいのでそんなに心配してない。でもRSSは登録しなおしになるかもしれないので、もしそうなったらしなおしてくれると助かります。少し落ちついたらやってみます。