当ブログのサイトデザインをまたもやリニューアルしました。前回のデザインは落ち着かせすぎたので、趣味ブログにふさわしいポッピーでカラフル、そしてシンプルなデザインを目指しました。テーマを「Arkhe」に変更して余分なところを剥ぎ、使い勝手も改善しています。
当館「てつぱら！」ブログでは、先日サイトデザインのリニューアルを行いました。今日は、リニューアルに至ったまでの経緯と、リニューアルした内容を書いていきます。
落ち着かせすぎた
去年8月に「Katawara」へ移行しています。前回のデザイン更新の際は、落ち着きのあるデザインを追求しました。
しかし、半年たった今そのデザインを再考してみたのですが、「趣味ブログでこんなに落ち着かせる必要ってあるのかなー」と思ったのです。落ち着かせすぎたのかな、と。
とくにうらにゃんが記事を書くようになってから、うらにゃんが書く記事の内容と明朝体のサイトデザインが折り合わず、フォントを変えてみるなどで対処していましたが、それでもしっくり来ませんでした。
当ブログが標榜する【みんなに「！」を】のコンセプトを実現するためには、もっと読者の皆さんに”楽しく”読んでいただくことが大事だと思います。そのために、もっと楽しさを打ち出せるようなデザインが必要でした。
もうちょっとポッピーで、ワクワクするデザインテイストにすべく、デザインの改良を検討していました。
テーマを「Arkhe」に変更
Katawaraも完成度が高くて使いやすいテーマだとは思っているですが、カスタマイズ性が思ったよりも低く、Lightningよりは趣味用途に向いているのは確かでしたが、それでもビジネスライクな作りで、Katawaraのままポッピーなサイトにするのは、ちょっと難しいように思えました。
なので、テーマを「Arkhe」に変更しました。「Arkhe」は素がシンプルで、CSSでいじりやすい、つまり自由度が高いテーマです。ベータリリースの頃から姉妹サイトで使用していて、Arkhe専用のCSSエディタの登場でその時よりも使い勝手がグッと良くなっていることが決め手となりました。
思い切って、余分な部分をできる限りカット。PC版のグローバルメニュー、TwitterやInstagramのウィジェットなども省きました。
トップページは根本から見直して「記事を読者様にワクワクしながら探してもらう」ために、これまでのオレンジ一辺倒をやめて、少しカラフルにしてみました。それもベタ塗りではなく、今流行り（？）のストライプとかパステル調な雰囲気を出すことで、女性ウケも狙っています。人気記事ランキング・スライダーもなくしました。
そして、姉妹サイトで既に採用している部分もフィードバックしています。アーカイブ（記事一覧）ページは「てつぱら！アーカイブ」で使用しているものと同デザインとして、同じ製作者のサイトだとわかるように統一性を持たせました。
もちろん、Katawaraのとき同様、モバイルでの表示にも配慮しています。今回はデバイスによって表示させる内容を変更せず、PCで見てもスマホで見ても極力同じ内容・同じデザインでキープできるように作られています。グローバルメニューの廃止もこれが理由です。
ロゴデザインの見直し
今回のリニューアルに合わせて、ロゴデザインも変えました。正直な話以前のロゴが気に入らなかったので、「てつぱらオレンジ（＃FF8C00）」を活かしつつ、ポッピーな柔らかい印象を出せるロゴを作ろうと考えたのです。
シンボルマークは、「！」を2個にし、この「！」間を円弧で繋ぐデザインに。読者様にこれまで以上の「！」な発見体験で笑顔になってもらえる、そういう自信の現れです。また、今のブログが2人体制である意味合いも込めています。
これまでのロゴマークはロゴカラーと背景色のパターンに乏しく、様々なシーンで対応するのに苦労しましたが、新マークは今の時点で9種のカラーパターンも用意して、シーンに応じて使い分けができるようになっています。
AI（Adobe Illustrator）データで作っているので、今後もカラーパターンを増やせるようになっています。
AMPなどを廃止しました
今回のリニューアルで追加した要素、廃止した要素は以下のとおりです。
- PWAが無効になっていたので、動作するよう修正
- 一部画像のWebP化（表示速度向上のため）
- ウェブフォントの変更（DSそよ風／じゅん）
- ブログカード
- 「ニシムラカメラ」様リンクの追加
AMPについては、ArkheテーマとAMPの相性が悪い（AMPページで本文画像が出ないなどの不具合があった）ことに加えて、AMPページを通じた流入が非常に少ないことを踏まえ、今回のリニューアルに合わせて廃止することになりました。
また、表示速度改善のため、一部画像をWebPフォーマットにしています。大半のブラウザでWebPフォーマットで表示されますので、画像をダウンロードして使用される際などは各自で対処してください（変換ツールや変換アプリが多々あります）
WebP非対応ブラウザでは通常のJPG/PNGで表示されます。
満足できる仕上がりになれた
個人的にはもうちょっとポッピーにしても良いのかな、とは思いましたが、いろいろ詰め込みすぎてもサイト表示速度に悪影響を及ぼしかねないので、今ので落ち着きました。
デザインを一新できたので、もっと楽しくて役に立つような記事を書いていきたいと思います！
最後まで読んでいただき、
ありがとうございました！
こちらもチェックしてみてください！
