※サイトはちょくちょく手を入れているので、以下の内容とデザインなどが違う可能性があります


投稿も全然増えないのに、このブログがリニューアルされました。趣味なのでしょうがない。

ベースは前からほぼ変えていない。大きく変えたところで言うと、(ウインドウ幅が700px以上では)コンテンツが左寄せになり、アイキャッチ画像を大きく表示し、ページ表示/遷移時のアニメーションを削ぎ落として、よりシームレスにサイトを回遊できるようにした。

Design/Interaction

思い切って本文要素を左寄せにしてみた。こういう日記的なデザインって大抵が中央寄せだし、たまには左寄せでもいいよね、ということで。デジタルの世界では大抵が左から右への横書きだし、HTML文書もCSSを適用しなければ、ブラウザの左上からテキストが始まるので、違和感は少ないと思う。しかし、そもそもスマートフォンだとデバイスの幅が狭すぎて中央寄せになるので、あまり意味のないこだわりな気はする。

アイキャッチをウインドウいっぱいに表示するレイアウトを前はあえて避けていたけど、大きく表示した方が写真は映える。本文は読みやすさを重視して最大700pxにしており、写真を載せてもそこまで大きく表示されないので、アイキャッチくらいは大きく表示したいなぁという欲が出てしまいました。

また、トップページの投稿一覧で、タイトルをクリックして詳細ページに遷移するとき、タイトルの位置がトップページのままになるようにした。
このサイトはSPA的にページをリロードせずに遷移するけど、逆に遷移の速度が速いせいで、ページ遷移時にタイトルの位置が急に変わって見えるのが微妙だなと思っていた。タイトルの位置を保存することで、トップページのタイトルを見ている視線の流れから、スムーズに詳細ページの文章が読めることを目指してみた。

前は画像をフェードインさせたりしていたけど、全体的にアニメーションはほぼ無くして、ページのロード中に左上のロゴが光るくらいに抑えている。

文字まわりも手を入れて、本文の級数を大きくして、文字間・行間を少し詰めた。最近のWeb、特に読み物系のコンテンツでは文字を比較的ゆったりと配置しているものが多い印象だけど、それらよりももう少しシャープな印象を与えたかった。
文字はCSSのfont-feature-settings: "palt";で詰めてるけど、改めて見ると約物が少し詰めすぎな感じがあった。なので今回は約物はYaku Han JPを使って処理することにした。適度に詰まってバランスが良くなったと思う。

Develop

フロントエンドは変わらずVue.js + WP REST API。前はvue-loaderでCSS Modulesを使っていたけど、<template>ブロックでstyle属性をよりシンプルに書きたかったのでScoped CSSに変えた。

JSの構文チェックにPrettierを使い始めた。ES Lintと連携することができるので、既存の設定を活かすことができる。Atomプラグインをインストールして設定すれば、ファイル保存時に自動でコードを.eslintrcに沿ってフォーマットしてくれて大変便利。ESLintのAtomプラグインでも保存時に自動修フォーマットする機能はあるけど、$ eslint --fixよりもいい感じにフォーマットしてくれる。
JSはいいんだけど、CSSに関してはPrettierとstylelintがうまく連携してくれないので、stylelintを実行→手動で直す、を相変わらずやっている。早く自動でやってくれる世の中になって欲しい。

ページ遷移をシームレスにして速くしても、そもそもダウンロードするファイルが大きくてロードが遅ければ意味がない。なので画像はCloudinaryを使ってWebPで配信するようにした。

また、Service Workerを使って、JS/CSS/Webフォントなどのアセットのキャッシュと、リンクにmouseenter/touchstartした時にリンク先の画像を先読みしてキャッシュするようにした。
Service Workerの導入はworkbox-swを使うと簡単でいい。キャッシュをどれくらい保持するかなどの、自力で実装すると面倒なものも簡単に設定できる。
Service Workerが動くブラウザだと、なかなかいい感じの速度でページ遷移・画像読み込みがされると思う。

WordPressテーマにCloudinaryやService Workerを導入する方法については、また機会を見つけて解説できればいいなと考えている。


自分のサイトだからこそ、デザインも実装も、実際の案件では試せないことができる。ポートフォリオのリニューアルの前に、まずはブログが新しくなってしまった。