LOGzeudon

名古屋で働いているWebデザイナーのブログです

タダケンさんのブログリニューアルのお手伝いをしました

タダケンさんのブログリニューアルのお手伝いをしました

ブログ「タダケンのEnjoy Tech」(はてなブログ)のリニューアルで、デザイン・実装を担当させていただきました。

制作の流れ

ざっくりこんな感じでした。

  1. お問い合わせ
  2. メールにて概要擦り合わせ(後にChatworkへ移行)
  3. 簡単なヒアリング(Dropbox Paper)
  4. デザイン提案、都度調整
  5. コーディング(テスト用ブログに反映)、都度調整
  6. 本番ブログに反映

内容

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

デザイン

最初に「デザインの参考となるブログ」をいくつか挙げていただき、実際の記事の内容・方向性なども鑑みつつヒアリングシートを作成しました。

その回答やチャットでのやりとりを踏まえ、たたき台となるデザイン案を提出。

f:id:rokuzeudon:20180326030544j:plain

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

  • アイキャッチを活かす ... リニューアル前からアイキャッチ画像を丁寧に作成されていました、ステキ!
  • 記事の読みやすさ ... レスポンシブ対応、レイアウト、配色/タイポグラフィーなど
  • 印象の差別化 ... あくまで個人Techブログなのでやりすぎないレベルで

コーディング

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

  • page-archive(記事一覧、カテゴリー、検索結果)
  • page-entry(記事詳細)
  • page-about(このブログについて)
  • page-index(NotFound)

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

  • (ベース)
  • mq-sm(min-width 640px)
  • mq-md(min-width 992px)
  • mq-lg(min-width 1200px)

それらの調整と、各種ブラウザでのチェックを経ています。
(もし表示で何か不具合があったら教えてください…)

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

こちらの記事のJavaScriptを活用させていただきました。

www.imuza.com

できた様子

f:id:rokuzeudon:20180326031106j:plain
PCトップ

f:id:rokuzeudon:20180326031118j:plain
PC記事詳細

f:id:rokuzeudon:20180326031121j:plain
モバイル

tadaken3.hatenablog.jp

終わりに

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