「のちたび。」のブログデザインをカスタマイズさせていただきました！
こんにちは、ちびまや（＠Mayayan6）です
この度、世界中を旅しながらライターのお仕事をされている、のっちさんのブログ「のちたび。」のデザインをカスタマイズさせていただきました！
以前から、のっちさんとは仲良くさせていただいており、PCカスタマイズのご相談をいただいたので、私も大好きな「のちたび。」に関われるなら！とお引き受けしました。
今回は、そんな「のちたび。」PCリニューアルでこだわった点についてまとめてます！
「のちたび。」の可愛い世界観を表現したい！
参考「のちたび。」：http://noccheese.hatenablog.com/
「のちたび。」は、世界中の可愛いを見つけて発信しているサイトです。
記事の中には、うっとりするような素晴らしい写真やわくわくする楽しい記事がいっぱい！
そこで、今回のリニューアルではそんな世界観をサイト全体で表現できたらいいなと思いました。
やったことその１：テーマカラーの設定
まずはテーマカラーを考えました。「可愛い＆わくわく」がコンセプトなのでパステルカラー調で、ところどころカラフルに遊び心があるといいなと思いました。
テーマカラーは、以前から「のちたび。」には素敵なヘッダー画像があったので、それをより魅力的にしたい！と思い、ヘッダー画像に合わせて全体のカラーを設定することで、サイトの統一感を出しました。
次に、ワクワク感を出すために細部をところどころカラフルに。カラフルな箇所をたくさん入れると全体が統一されずバラバラした印象になるので、ポイントで色を使用。
「のちたび。」の場合は、目立たせたい各記事のタイトルにカラフル要素を入れました。デザインも、ちょっと不規則な感じで遊び心をだしてワクワク感が出るように。
今回はこちらを自分の勉強も兼ねて、CSSでチャレンジしてみました！
やったことその２：手書きデザインを取り入れ遊び心を
次にこだわったところは、「手書き要素」を入れること。
サイドバーのタイトルに取り入れてみました。
手書き感のあるデザインを入れることで、手作りであたたかい印象が出たり、ワクワクした印象になります。
やったことその３：フォントの再設定
フォントもサイト全体のイメージを作る重要な要素です。
例えばちびまやブログも、画像は少なく基本的にテキストだけでデザインしていますが、このフォントをデフォルトじゃなく、自分のサイトに合わせたデザインのものを選ぶだけでグっとオリジナル感が出ます。
「のちたび。」の場合も、全体が丸っこいフォントを選び、かわいい印象になるようにしました。
これはすぐできるので、みなさんも是非やってみてください＾＾
「Google Fontを使ってあなたのブログを簡単にオシャレにしよう！
サイト上のUI設計にもこだわった
イメージデザインの他、「使いやすい、読みやすい」を考えるのもデザインの一部です。
そのため以下の要素を追加しました。
・グローバルナビゲーション
・SNSとの連携
・関連記事
グローバルナビゲーションの追加
はてなブログのデフォルトテーマにはなかったので、新しく追加しました。
グローバルナビゲーションとは、全てのページに共通して設置されたサイトの案内リンクです。
これがあることで、このサイトがどういう記事を書いているのか、また各メインカテゴリへの移動がスムーズになります。
ちびまやブログと同じグローバルナビゲーションの追加方法をこちらの記事で紹介しています。ぜひ参考にしてみてください＾＾
はてなブログをカスタマイズしてみました！④ -グローバルナビゲーション編-
SNSとの連携
せっかくブログを書いているんだから、読者も増やしたいし記事もシェアされたいですよね。
そこで、記事を書いている人のパーソナリティが分かるようなSNSでの投稿を表示したり、分かりやすいボタンを置いて、シェアされやすいブログを作ることが大切。
今回の「のちたび。」リニューアルでも、のっちさんが更新されている素敵な写真がいっぱいのInstagramや、twitterをサイドバーに起き、どのページからでもチェックできるようにしました。
関連記事の設置
１つのページを読んで終わり。ではなく、他のページも読んでもらいたい！そのために各記事の下に関連記事を表示しました。
関連記事を入れることで、ユーザーの興味を引きそうな記事に誘導することができます。
関連記事の追加方法についてはこちらの記事を参考にしました。
▶︎Milliard関連ページをはてなブログで設定する方法 | シスウ株式会社
そんな素敵で可愛い旅ブログ「のちたび。」はこちらから！
「のちたび。ー世界中のかわいいに会いたくて、旅にでたー」
とっても素敵な写真ばかりでワクワクする記事が満載です！ぜひみなさんも遊びに行ってみてください♡
- キーワード
-
関連記事
