デザインから実装まで、タダケンのEnjoy Tech（はてなブログ）のリニューアルをお手伝いしました。

制作の流れ

• お問い合わせ

• メールにて概要擦り合わせ（後にChatworkへ移行）

• 簡単なヒアリング（Dropbox Paper）

• デザイン提案、都度調整

• コーディング（テスト用ブログに反映）、都度調整

• 本番ブログに反映

リニューアル概要

私としては、タダケンさんにとって記事を書くモチベーションが上がるブログ を目指しました。楽しく継続できることが大事ですよね。

デザイン

最初に「デザインの参考となるブログ」をいくつか挙げていただき、実際の記事の内容・方向性なども鑑みつつヒアリングシートを作成しました。
その回答やチャットでのやりとりを踏まえ、たたき台となるデザイン案を提出。

これを起点に、やり取りを重ねてブラッシュアップしていきました。
ちなみに重視したのはこんなところ。

• アイキャッチを活かす ... リニューアル前からアイキャッチ画像を丁寧に作成されていました、ステキ！

• 読みやすさ ... レスポンシブ対応、レイアウト、配色/タイポグラフィーなど

• 印象差別化 ... ただし個人ブログなのでやりすぎないレベルで

コーディング

「UnderShirt」をベースにしつつ、ゴリゴリとオリジナルなテーマをつくりました。
共通パーツをまず組み直して、次の主要なレイアウトにあわせて細部を最適化していきました。

• page-archive（記事一覧、カテゴリー、検索結果）

• page-entry（記事詳細）

• page-about（このブログについて）

• page-index（NotFound）

そしてメディアクエリでのレスポンシブ対応は、次の３パターンにしました。

• （ベース）

• mq-sm(min-width 640px)

• mq-md(min-width 992px)

• mq-lg(min-width 1200px)

これら調整と、各種ブラウザでのチェックを経ています。

アイキャッチ画像をいい感じに表示

こちらの記事「はてなブログ「一覧形式」の画像をオリジナルのものに変える - IMUZA.com」のJavaScriptを活用させていただきました。

最終的なデザイン

終わりに

タダケン@tadaken3さん、ありがとうございました！おかげさまで私も楽しみながらデザイン・コーディングができました。今後の記事も楽しみにしています！

タダケンのEnjoy Tech