【お知らせ】ブログデザインをリニューアルしました。大改造の全貌を解説します。

こんにちは。てつみー (@te23_photohibi) です。

年明けから始めたブログのリニューアル作業がようやく完了しました。
カスタマイズの知識があまりないため、その都度方法を調べながら進めていったのですが、なかなか苦労の多い作業でした。

途中でCSSの記述をミスって画面が崩壊し、最初からやり直しになったことも…。

とにかく時間がかかりました。そして、気づけば1月が終わっていました（笑）
自分の備忘録、メモも兼ねて具体的なリニューアルポイントをまとめてみました。

リニューアルのポイント

今回の改訂にあたり、意識したのは「美しさと使いやすさ」。ブログを訪れた人に快適に記事を読んでもらえるよう、キレイで読みやすいデザインを追求しました。
参考にしたのは有名デザイナー水野学さん主催のプロジェクト「THE」のWebサイト。

全体が醸し出すデザインの世界観が素敵すぎます。そして、何よりデザインが美しいですね〜！！

途中で方向性を見失いそうになったらこのサイトを見て確認していました。

レスポンシブデザインに

これまでスマホ用のデザインは別のCSSで対応していたのですが、今回はレスポンシブ対応のはてなブログテーマ「UnderShirt」に変更。

ブランディングの観点から、PCから見てもスマホから見ても同じような印象になるように設計し直しました。

TOPにスライダーを設置

見栄えがよいスライダーのあるサイトは華やかに見えるので、絶対付けたいと思っていました。例えば下記の参考サイト。

流石にここまでおしゃれなカスタマイズはハードルが高いですが、使いやすいスライダーを設置しようと考えました。

当ブログは記事を4つのカテゴリで整理していますので、それぞれのカテゴリページに飛べる仕組みにしています。

ハンバーガーメニューを設置

いつでもどのページにでも飛べるよう、全部入りのハンバーガーメニューを画面左上に常駐させました。グロナビと迷いましたが、スマホにも対応できるハンバーガーメニューで統一しました。

フォントを最適化

読みやすさを最適化するために、記事本文の適切なサイズ、文字間、行間を徹底的に検証。Adobe Illustratorを使って最適な文字組を開発しました。

またGoogleのWebフォント「Noto fontシリーズ」を導入し、ほとんどのデバイスで同じ見え方になるようにしました。

色数を抑えてシンプルに

記事に集中できるよう、全体をモノトーンにしシンプルな印象に。キーカラーとして、PANTONから発表された2020年の流行色「Classic Blue」をポイントに使っています。

アイコンと吹き出しのデザインをフラットに

全体のデザインに合わせて吹き出しとアイコンのデザインをフラットに変更しました。アイコンの背景にもキーカラーであるPANTON Classic Blueを使用しています。

こんな感じのデザインです！

アイコンのイラストは京都のデザインスタジオgroovisions（グルービジョンズ）が開発したchappie（チャッピー）のiPhoneアプリで作成しました。

 

chappie

• grv co.,ltd
• エンターテインメント
• 無料
• 

ボタンのデザインをフラットに

アイコンや吹き出しと同様に、ボタンのデザインも全体のトーンに合わせてフラットデザインに変更。

こんな感じのボタンにしました

まとめ

ブログリニューアルのお知らせでした。

まだまだ納得いかないところもあるのですが、やっと公開できるレベルに到達できたので、ひとまずは気が済みました（笑）

変更したカスタマイズの内容をまとめてみました。参考になれば幸いです。

カスタマイズは凝り始めたら楽しいですが、キリが無いですね…（笑）

しばらくは肝心な記事の更新に勤しみます。

それでは、また。

こちらの記事もどうぞ