サイトをリニューアルしました。
着手してから１年近くかかったかもしれません。隙間時間にコツコツ作っておりました。これまで通りWordPressを利用し全て一から制作しています。コンテンツも一通り見直しました。
デザインは適度に遊びは加えていますが、全体としてシンプルなレイアウト、色のトーンも落とし、太いラインやごく標準的なフォントでやや無骨にデザインしています。メニューの配置も便利さを優先しました。ダークモードにも対応しています。
また今回、IEを完全に無視しています（一応アラートだけは表示するようにしました）。実際のご依頼でもIEをサポートするのは難しくなっているので思い切って切り離しました。おかげでかなり多くのことができるようになりました。
CSS
以下全てIEから解放されて可能になった機能です。
- 今回の変更で「カスタムプロパティ（CSS変数）」の利用が一番大きい点でした。今までもSCSSで記述しているので出力前の変数は使えましたが、ダークモードなど出力後の変化にはCSS変数が便利（というより必須）です。
- IEを外すことで「Bootstrap5」が使えます。特にGridの余白がCSS変数で調整できる点が本当に便利です。
- ヘッダ固定に「position: sticky」を初めて使いました。ページや端末によって変化する上部の余白（＝ヘッダの高さ）を指定しなくて済みます。
- ヘッダを固定にした際にアンカーリンクをずらしてくれるプロパティ「scroll-padding-top」が使えるようになりました。今まではJSやCSSで結構苦労していました。
- 「object-fit」も使えます。画像の縦横比を維持したまま、枠内に表示する方法です。これまでは背景画像とすることで実現していましたが、ようやくimgタグのまま表示できるようになりました。これによって画像の遅延読み込み「loading=”lazy”」も使えるようになります。ただ横幅可変のまま縦横比固定にする方法がないのは残念です（この点は背景画像にしていた方が楽です）。今回仕方なく絶対配置で表示しています。
JavaScript
- 世の中の流れとしてはjQueryから卒業すべきなのかもしれませんが、通常のサイトではコードも短く書けるので依然として便利です。今回もしっかり利用しました。
- ページ上の動きとしてはスライド（スワイプ）機能として「Swiper」を使用しています。動作も安定していてしばらく重宝しそうです。ここでもCSS変数が使えます。
- お問い合わせページのカレンダー機能「Fullcalendar」も新しいバージョンで作り直しました。こちらもCSS変数が便利でした。
SVG
今回イラストなどはPNG形式ですが、装飾としての画像は全てSVG形式としました。HTMLに直接記述し、ファイルの読み込みを減らすことができます。SVGはCSSで色を変えられるところが便利です。
Webフォント
SVGで画像を軽量化していることもあり、今回実験的に日英それぞれ３つのウェイト（計６つ）を使用しています。普段の業務ではありえない数ですが、さほど重くはないので見た目の統一を重視しました。アクセス時にフォントの差し替え（FOUT: Flash of Unstyled Text）が起こりますが、特に対処はしていません。しばらく様子を見て実用の範囲か判断したいと思います。
また今回、日本語フォントに英語フォントを上書きするような設定としました。日本語の半角英数字が英語フォントに置き換わります。通常は一種類のフォントで日本語を設定した方が良いと思っているのですが、今回採用した日英のフォントは組み合わせが綺麗だったため、合わせ込む形としました。
これまでのサイトも気に入っていましたが、修正が重なり内部の構造もあまり綺麗ではありませんでした。今回のリニューアルでようやくすっきりしました。
表面は変わりましたが、業務内容に変更はありません。これからもどうかよろしくお願いいたします！
