【お知らせ】ブログデザインをリニューアルしました。大改造の全貌を解説します。photohibiスマートフォン用の表示で見るphotohibiカメラと写真と日々のブログ。【お知らせ】ブログデザインをリニューアルしました。大改造の全貌を解説します。2020-02-01【お知らせ】ブログデザインをリニューアルしました。大改造の全貌を解説します。Otherこんにちは。年明けから始めたブログのリニューアル作業がようやく完了しました。カスタマイズの知識があまりないため、その都度方法を調べながら進めていったのですが、なかなか苦労の多い作業でした。途中でCSSの記述をミスって画面が崩壊し、最初からやり直しになったことも...。気づけば1月が終わっていました(笑)自分の備忘録、メモも兼ねて具体的なリニューアルポイントをまとめてみました。色数を抑えてシンプルにアイコンと吹き出しのデザインをフラットにボタンのデザインをフラットにまとめこちらの記事もどうぞリニューアルのポイント今回の改訂にあたり、意識したのは「美しさと使いやすさ」。ブログを訪れた人に快適に記事を読んでもらえるよう、キレイで読みやすいデザインを追求しました。参考にしたのは有名デザイナー水野学さん主催のプロジェクト「THE」のWebサイト。the-web.co.jp全体が醸し出すデザインの世界観が素敵すぎます。何よりデザインが美しいですね〜!!途中で方向性を見失いそうになったらこのサイトを見て確認していました。レスポンシブデザインにこれまでスマホ用のデザインは別のCSSで対応していたのですが、今回はレスポンシブ対応のはてなブログテーマ「UnderShirt」に変更。Shirt」ブランディングの観点から、PCから見てもスマホから見ても同じような印象になるように設計し直しました。見栄えがよいスライダーのあるサイトは華やかに見えるので、絶対付けたいと思っていました。centurion-magazine.com流石にここまでおしゃれなカスタマイズはハードルが高いですが、使いやすいスライダーを設置しようと考えました。当ブログは記事を4つのカテゴリで整理していますので、それぞれのカテゴリページに飛べる仕組みにしています。ハンバーガーメニューを設置いつでもどのページにでも飛べるよう、全部入りのハンバーガーメニューを画面左上に常駐させました。グロナビと迷いましたが、スマホにも対応できるハンバーガーメニューで統一しました。読みやすさを最適化するために、記事本文の適切なサイズ、文字間、行間を徹底的に検証。Illustratorを使って最適な文字組を開発しました。fontシリーズ」を導入し、ほとんどのデバイスで同じ見え方になるようにしました。色数を抑えてシンプルに記事に集中できるよう、全体をモノトーンにしシンプルな印象に。Blue」をポイントに使っています。Blueを採用アイコンと吹き出しのデザインをフラットに全体のデザインに合わせて吹き出しとアイコンのデザインをフラットに変更しました。Blueを使用しています。こんな感じのデザインです!アイコンのイラストは京都のデザインスタジオgroovisions(グルービジョンズ)が開発したchappie(チャッピー)のiPhoneアプリで作成しました。co.,ltdエンターテインメント無料ボタンのデザインをフラットにアイコンや吹き出しと同様に、ボタンのデザインも全体のトーンに合わせてフラットデザインに変更。こんな感じのボタンにしましたまとめブログリニューアルのお知らせでした。納得いかないところもあるのですが、やっと公開できるレベルに到達できたので、ひとまずは気が済みました(笑)変更したカスタマイズの内容をまとめてみました。参考になれば幸いです。カスタマイズは凝り始めたら楽しいですが、キリが無いですね...(笑)しばらくは肝心な記事の更新に勤しみます。»Profileはじめまして、te23(てつみー)といいます。本業はグラフィックデザイナーです。趣味の写真・カメラの話題を中心に、旅やライフスタイル、音楽などをテーマにした記事を更新していきます。reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。