デザインから実装まで、タダケンのEnjoy Tech（はてなブログ）のリニューアルをお手伝いしました。%3Cblockquote%20class%3D%22twitter-tweet%22%3E%3Cp%20lang%3D%22ja%22%20dir%3D%22ltr%22%3E%E3%81%9A%E3%81%A3%E3%81%A8%E3%82%84%E3%82%8A%E3%81%9F%E3%81%8B%E3%81%A3%E3%81%9F%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%92%E3%83%AA%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%A2%E3%83%AB%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%E4%BB%8A%E5%9B%9E%E3%81%AE%E3%83%AA%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%A2%E3%83%AB%E3%81%AF%20.%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Frokuzeudon%3Fref_src%3Dtwsrc%255Etfw%22%3E%40rokuzeudon%3C%2Fa%3E%20%E3%81%95%E3%82%93%E3%81%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%BB%E5%AE%9F%E8%A3%85%E3%82%92%E3%81%97%E3%81%A6%E3%81%84%E3%81%9F%E3%81%A0%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81%E3%81%8C%E7%9B%AE%E7%AB%8B%E3%81%A4%E3%82%AB%E3%83%BC%E3%83%89%E5%9E%8B%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AB%E5%85%A8%E9%9D%A2%E3%83%AA%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%A2%E3%83%AB%E3%80%82%E3%81%8A%E3%81%97%E3%82%83%E3%82%8C%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%80%81%E3%81%99%E3%81%94%E3%81%8F%E8%AA%AD%E3%81%BF%E3%82%84%E3%81%99%E3%81%8F%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%EF%BC%81%E5%A4%A7%E6%BA%80%E8%B6%B3%E3%81%A7%E3%81%99%E3%80%82%20%3Ca%20href%3D%22https%3A%2F%2Ft.co%2FzViyPvGZX1%22%3Epic.twitter.com%2FzViyPvGZX1%3C%2Fa%3E%3C%2Fp%3E%26mdash%3B%20%E3%82%BF%E3%83%80%E3%82%B1%E3%83%B3%20(%40tadaken3)%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Ftadaken3%2Fstatus%2F977817571297603584%3Fref_src%3Dtwsrc%255Etfw%22%3EMarch%2025%2C%202018%3C%2Fa%3E%3C%2Fblockquote%3E%20%3Cscript%20async%20src%3D%22https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E制作の流れお問い合わせメールにて概要擦り合わせ（後に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