ブログリニューアル
ブログのデザインをアップデートしました。
前回が2018年2月なので約1年ぶりとなります。
Contents
デザイン
グレー基調
PC版はこんな感じになりました。
グレー基調になった理由はお察しください。いつか緑になるかもしれないしならないかもしれません。
記事を主役にする
とにかく今回一番こだわったのはこれ。
これまでのアップデートでは「アプリっぽいUI」だったり「おすすめ商品やNOWタブを記事と同列のコンテンツにする」といったことに力を入れていましたが、
レビュー記事のアクセスが増えてきたり、ブログにコメントしてくださる方が来たりといったことがこの半年で起きて、
個性を出すために拘っていた「ブログなのにブログっぽく見えない」というデザインが、むしろデメリットになっているんじゃないか、という気持ちが強くなってきました。
シンプルに文章を読んでもらうことを考えるなら、ついてくるメニューなどはむしろ邪魔。個性を消してフラットにしないとコンテンツの価値を落としてしまっているのではないかと、半年くらい前から考えていました。
なので、今回のアップデートでは要素を徹底的に削ぎ落として、最低限必要なものだけを残しました。
こういうものは流行と気分によるループなので、たぶんまた要素を増やしていきたいというタームも訪れると思うのですが……。
note意識
デザインの参考にしたのはnote。参考というか真似に近い。
今、文章メインでやってるサイトとしては間違いなく一番イケてるので、ブログらしさを求めるならこれだろうなと。
ただ、じゃあnoteがすべてにおいて優れているかというとそうではないと思ったので、
例えばトップページの記事と記事の区切りは水平線ではなく枠で囲むべきだとか、そういう部分は変えています。
海外の最先端を追って見た目のカッコよさを求めすぎると普通のユーザーにとって使いにくくなるというジレンマ。
まあ、それを言い出すと、このブログも正直スマホ版で最新記事どこいった？とかなってる気もしますが……。本当はこのへんトラッキングしてどのナビゲーションがよく使われてるのか調べるべきなのかもしれません。
２カラム構成
記事本文の領域を広めに取るために、久々にPC版を２カラム構成に。
とはいえ、別に減った要素があるわけではありません。カテゴリー・タグ・検索をヘッダーに移動させたので、
「おすすめ商品」も今は消していますが、そこまで場所を取るわけでもないので、時期を見て復活させようと思っています。
いかにブログらしくできるかということをメインに考えました。
スマートフォン版
こちらもシンプルに。
そういえば「はてなブックマーク」ボタンを追加しました。個人的には使わないのですが、使ってる人は多いっぽいので、あっても損はないかなと。
技術ポイント
ここは詳しくない方は読み飛ばして大丈夫です。
CSSフレームワーク「Bulma」を採用
これまでのブログは自分でデザインもゼロから作っていましたが、デザインフレームワーク「Bulma」（https://bulma.io/）を全面的に利用しました。
デザインをガラッと変えようと思うとゼロイチで作るのはちょっとエネルギーが要り、しかも自分はデザイナーではないのでラクがしたかった。
サンプルサイトのテンプレートとドキュメントを見れば大体のことはわかる。
こういう広く支持されているフレームワークのデザインを使うことで生まれる「プロのサイト感」というのは、素人のオリジナルデザインではどうにも出せないなあと思います。
正直CSSちゃんとわかってる自分がわざわざ Bulmaのクラス覚えるのは遠回りだなあと思う部分も多々あったんですが、それも含めて良い経験でした。
CSSフレームワークを使う上で大事なのは「自分がフレームワークに合わせるという覚悟を決めること」だなと理解しました。
オリジナル要素は最小限にとどめて提供されているコンポーネントを使えるだけ使いまわさないと、余計なCSSを書いて二度手間になってしかもデザインも浮く。誰も幸せにならない。
「ここはこうしたいからCSS書き足そう」じゃなくて「ここはこうしたいけどデザイン的に正しいのはBulmaだから従え」っていう。
たとえば記事のコメント欄なんてbulmaのMedia Objectまんまですが、それが一番オシャレ。
……まあそうは言いつつis-marginlessだのis-shadowlessだのでハックしまくってるからプレーンなBulmaとも言い難いんですが。何だかんだ結構オリジナルCSS書いてるし。
WP REST API + Vue.jsを併用
一時期頑張ってみたものの大して速度が上がらず中止した「Nuxt.jsでWPサイト再構築プロジェクト」、あれ自体は何の成果にもならなかったのですが、
ただWP REST APIに関してはかなり詳しくなったので、今回はVue.js+REST APIをブラウザ側で利用しています。
具体的にはサイドバーの「人気記事」「最近の記事」「最近のコメント」、記事ページ下部の「カテゴリーの最新記事」「コメント一覧」は全てREST API経由で取ってきています。
一番のメリットは開発しやすさですね。WordPressの勝手に付与するClassとかタグ構造に縛られなくて済むし、CSSフレームワークとの相性も良さげ。
一方、速度は正直思ったほど上がりませんでした。ちょっとここは予想が外れてしまった。
あとブラウザ側での処理を増やしたので、スペックの低いスマホとかだと重くなってそうなのがちょっと不安です。
IE非対応
捨てました。IEからのアクセスもゼロではないので迷ったのですが……そこに対応することに頭を使いたくなかった。早くWindows10買ってくださいって感じです。
それにしても、1年後、Windows 7のサポートが切れた後の世界ってどうなるんでしょうね。Edgeも実質消えて、ChromeとSafariとFirefoxだけ見れば良いという楽園が訪れるわけですけど、そもそも今はそのへん自動でやってくれる技術が発達しすぎてるのであんまり変わらない気がします。
barba.js ver2.0
pjaxによってサイドバーやヘッダーなどの共通要素はそのままにする、という技術はリニューアル前と変わっていません。ただいつの間にかV2が出ていたので、何が変わったのかわからないままに投入。応答性は上がったような気がします。
その他
リニューアルに合わせてプライバシーポリシー作りました。一応、Analytics入ってることを知らせないと規約違反らしいので（兵庫県警の件で知った）。
https://oswdiary.net/privacy-policy/
これもどうでもいい話ですけど、
個人的に、「どうせ誰も読まないってわかってるのに、いざという時の保険のためだけに書かれている規約」を載せているサービスがあんまり好きではないので、（そうではないサービスがこの世に存在するのかはともかく、）
簡単にまとめました。これだけ読んでもらえればだいたい何が書かれているか伝わるかと思います。
まあ、当然ながらこの内容がそのまま書いてあるとは限らないので、サイト運営者に対する信用の話でしかないんですが、
利用規約を、正式な文章と平易な文章でまとめたバージョンの2種類を用意するというのは、もう少し広まってもいいんじゃないかって勝手に思ってます。
感想
それまでJUGEMに置いていたブログを、WordPressに完全移行したのが、2016年8月。……まだWordPressにしてから2年半くらいしか経ってないんですね。マジか。
リニューアルのご報告
「Our Story’s Diary」 ついに！お引越ししました！ ９年目にして新たなスタート。です。 ……８... 続きを読む
その頃から試していたタブ切り替えなどの基本的な枠組み、カラーリングなどを、今回のリニューアルでは全部捨てました。
カテゴリーも増やして記事更新を頑張っていこうという気もあったのですが、、、ちょっとそういうことに気分が乗らない状況でもあるので、そちらはどうなるかわかりません。「ライフスタイル」みたいな記事カテゴリー作ろうと思ってたのですが。そのあたりは少しずつやっていきます。
あと、ここまでやっておいてあれなのですが、たぶん遠くないうちにまたリニューアルします。というか、前も書きましたが、WordPressを使っている限りは速度改善は見込めないことがわかったので、ちょっと真剣にWordPressを捨てることを検討していくべきだなと。。。
やるならWP REST APIとか小手先の方法ではなく、REST APIの中身を丸ごとFirebaseかContenfulかに移行してNuxt.jsですかね……。要するに記事・コメント・カテゴリー・タグ・画像さえどうにかすればいいので。一番の問題は画像か……。何をするにも記事数が多すぎて困ってしまいますが、この過去の膨大な記事を捨てたらこのブログの意義もあんまりないので、頑張って引き継いでいます。
まあそんな感じで、ブログの立ち位置をはっきりさせるとともに、
先のことを見据えたリニューアルという感じでした。
あんまりWordPressやプラグインに頼った機能は使わないようにしています。
とりあえず今後ともよろしくお願いします。バグなど見つけたらご連絡ください。
