こんばんは、上杉です。
早速ですがホームページをリニューアルしました！

そこでコーダーである僕が使って便利だったツールや、こだわったポイントについて書きたいと思います。

Adobe XD

AdobeXDはホームページデザインに最適化された機能がたくさんあるデザインツールです。

なんといっても軽いです。

後は、コーディングがしやすいです。
どのデザインツールも要素をクリックしたときにその要素のプロパティが出ますが、XDはCSSでデザインを再現する場合に必要なプロパティが表示されやすいのでいちいちレイヤースタイルを確認するといったことをしなくてよいです。

後は今回は使っていませんが、XD上でボタンのリンク先を指定することもできるので、遷移先がわかりにくいボタンなどの説明の手間も省けたりしそうです。

普段Photoshopでデザインをしている方もぜひ使用してほしいとは思いますが、
結局バナーや図形などの操作はXDは不得意なのでこれだけでホームページデザインをすべてできるわけでは無いと思います。

SVGをフォント化してくれるやつ

IcoMoonというWebサービスでSVG画像をアップロードすれば、フォントファイルとCSSを自動で生成してくれる超便利なツールを使いました。

https://icomoon.io/

例えばSVG画像の色を変更したい場合は違う色のSVG画像を作るか、SVG画像を埋め込んでpathの色をCSSで指定するなどする必要がありました。

違う色のSVG画像を作る場合は、色の分だけファイル数が増えたり色々とめんどくさいです。

SVG画像をインラインで埋め込む場合は、ソースが汚くなるのが嫌です。

フォントで埋め込むことで色の変更はcolorプロパティを変更するだけで大丈夫なのでかなり楽になりました。

Barba.js

Barba.jsはPjaxのライブラリです。
実装に関しては以下のサイトを参考にさせていただきました。

https://glitter-style.jp/labo/web-resource/master-the-pjax-5/

Pjax遷移をすることで、ページ遷移時に余計なリソースを読み込まないので高速化が期待できます。
後はページ遷移時にアニメーションを入れたりすることができるので、一般的なサイトとは違った印象を与えることが可能です。

Pjaxを使った場合、Javascriptの記述法が結構変わるので、大変ですが個人的にかなり好きなライブラリなので、どんどん使って色々な表現をしていきたいと思っています。

脱jQuery

今回のリニューアルでホームページの高速化をしたいという狙いもあったので 正直どれだけ早くなったかはわからないですが 脱jQueryしてみました。

今回くらいのサイトの規模だとそこまで大変ではないですが、ホームページにがっつりアニメーションを入れたりする場合はjQueryの方がライブラリや日本語ドキュメントも豊富にあるので工数的にはかなり削減できる感じはします。

WordPressテーマ

リニューアル前もWordPressを使っていたので、今回もWordPressをそのまま使ってテーマ変更すればいいと考えていましたが、
投稿などに前回使用していたテーマの機能などを使用した記述をしていたため、単純にテーマを変えるだけでは、投稿の移行はできませんでした。

記事数が少なかったので手動で修正しましたが、テーマの機能をたくさん使っていると最悪そのテーマ以外では動かないようなホームページになってしまう可能性もあるので気をつけたいです。

リニューアル後は、グーテンベルグを使用して将来的にまたサイトをリニューアルする場合にもそのままテーマの変更のみで柔軟に対応できるような設計をしました。

WordPressテスト環境

WordPressのローカル環境構築にはVCCWを使いました。
VCCWはVgrantのBoxです。

https://www.virment.com/vagrant-vccw-review/

ローカルで本番とドメインまで全く同じ環境を作成するのがとても簡単にできるので開発スピードが上がります。
本番からローカルにコピーして、デプロイはローカルから本番へコピーするだけです。

WordPressで作成したサイトのGit管理は難しいですね。
なにか良い方法があれば教えて下さい。

記事の横幅

ブログ形式のサイトだと1行の文字数が40～50文字くらいが読みやすいと言われています。
このサイトは PC 時に 横幅を 750pxに設定していて大体50文字くらいで文字を折り返すくらいの幅になっていると思います。

そしてもう一つ750pxにした理由があり、PCで横幅いっぱい（750px）に表示した画像をそのままiPhone6などの375px幅でレティナディスプレイの端末で表示した際にきれいに表示されるサイズだからです。

余計に大きい画像を読み込んでサイト読み込み時のリソースを消費することなく、
また、記事投稿時にも複数サイズの画像を用意する必要がないような工夫をしました。

最後に

せっかくサイトリニューアルしたのでもっと記事書いていきます！