WordCamp Osaka 2019 参加レポート

先日大阪工業大学で行われた、WordCamp Osaka 2019 に参加した時のレポートです。WordPressに関するイベントとは言え、WEBに関する様々なお話を聞くことができるフリーランスにとってはまたとない貴重なイベント、関西圏開催が年に１回なのが惜しい。。

WordPressでも大丈夫！実例で見るウェブパフォーマンス改善

登壇者：Kiteさん

「WEBパフォーマンス改善」
これは私のWEB制作にとって最大のテーマのひとつ。まず見た目を綺麗にと作ったものの、完成後計測すると「遅っ・・」の経験ありで、余裕のあるときにネットで調べたあらゆる対策を施していたのですが、通常のHTMLサイトではある程度効果が実感できても、WordPressで構築した途端に速度が遅くなるの繰り返し・・解決方法、是非知りたいところです。

今回はスピカフラフさんのWordPressサイトで実際に検証した結果を元にお話してくださいました。

計測の方法は？

サイトの計測方法はいくつかありますが、今回はLighthouseを参考に改善されていました。

コーディングなしでできる改善対策って？

サーバーの検討

まずはここ、サーバーの検討。どれだけパフォーマンス改善を頑張っても、サーバーの選択が間違っていればマズイとのこと。

私もあるサイトで前任者のサーバーの選択がまずく困った経験があり・・ただ個人で所有しているサーバーではないので、サーバー変更のご提案のみでどうすることもできなかったことが悔やまれます。。

不要プラグインの削除

とっても便利なプラグインですが、入れすぎると当然パフォーマンスにも影響が出ます。WordPress管理画面、左側「ツール」＞「サイトヘルス」でも出てくるとのこと。

って、私もだいぶ減らしたつもりでいたのですが、しまった・・削除したと思っていたのに停止だけで終わっていたりPHPのバージョンも古い！
今すぐ改善できますねこれは。

画像の扱い

単純なイラスト = .svg
画像 = .jpg
今の段階ではこれが一番良いとのこと。
Googleが開発しているWebPも良さそうですが、ただsafariなどはまだ非対応とのこと、少し様子見でしょうか。

うわ〜〜たまにSVGを使っていたものの、ほとんどイラストも画像もPNGを使ってたので、これも大いに改善できそうです。
画像は.jpgで良かったんだ・・

が・・WordPressでSVGはアップロードできない・・
↓
そんな時はプラグインを使おう！
「SVG Support」
「Safe SVG」←こっちの方が無難とのこと。

—–
SVGの書き出しについて

イラレでは「別名保存」ではなく「スクリーン用に書き出し」で。
これをしない場合は、SVGの最適化が必要。
いくつか紹介されていましたが、私はMacのアプリ「ImageOptim」を使ってみます。
https://imageoptim.com/mac
—–

オフスクリーン画像の遅延読み込み

計測時によく書かれていて、意味は分かるんだけど、で、どうすればいいのかわからない状況だった「オフスクリーン画像の遅延読み込み」。
＜img src=”image.jpg” loading=”lazy”＞
↑この記述を追加すればO.K.とのこと
WordPressでは自動でloading=”lazy”を追加してくれるプラグイン「Native Lazyload」があるそうです。

これも即実行ですね。

あとはキャッシュやCMS機能を利用しつつサイトを静的化できるツールなどもご紹介頂きました。

コードによる改善

例えばホームやアーカイブページなど、全てのCSSやjQueryの読み込みの必要がないときや、「レンダリングを妨げるリソースの除外」対策としてのfunction.phpの記述形式など教えて頂きました。

上記の両方とも、私をいつも悩ませる大きな課題だったので、これで解決できるそう！早速試してみます。

Kiteさんのスライド

FONTPLUSはWebサイト全面リニューアルでWordPressを採用！日本語Webフォント10年間の歴史に迫る

登壇者：関口浩之さん（フォントおじさん）

続いてはフォントおじさんこと、関口浩之さんのセッションを受講しました。立ち見が出るほどの満席！人気ですね^^

ところで、WEB制作でのフォントの扱いってここ最近ホントに変わって助かっています。

以前は画像ではなく、なるべくテキストでなどといいつつ、テキスト表記にするとブラウザでの表示はガタガタとエッジのかかった文字。デザイン性があるとは全く思えない環境だったので、見た目を考慮するとどうしてもSEO的に弱くなる悪循環に悩まされた時期がありました（懐かしい・・）。

が、Webフォントが普及して、ボタンデザインなども画像ではなくテキストで表現するようになって、画像だとAltの記述が必要なところ、テキストとCSSで表現するととてもコードがシンプルになるのも嬉しいし、本当に助かる進歩です。あと多言語サイトなんかを手がける場合も作業の手間を省くことができますよね。

本当にWEB制作者にとって助かる時代になりました。

ただ、私はどうしても、見た目やその場のイメージを重視して選んでしまう癖があるのですが、でもそもそものフォントの役割「見やすいこと（視認性）」「読みやすいこと（可読性）」「分かりやすいこと（判読性）」をお聞きして、なんだか初心に帰らねばと考えさせられました。

空港や駅の案内表示やポスターなどの比較がとても分かりやすかったです。

本当にフォント次第で見る側の印象がガラリと変わってしまう実例などもご紹介くださり、とても面白く為になる貴重な時間でした。

フォントおじさんのスライド

Gutenberg以降のテーマ作成に向けて、今学ぶべきこと

登壇者：三木徹さん
午後からは気になりつつも手を出せていないGutenbergのセッション。もう1年経つんですね、公開されてから。でもみなさんどんな感じなんでしょう？Gutenberg、導入されていますか？

って、こちらのセッション、ちょっと私には難しい部分もあり、理解できたのはCSSの部分だけに等しいのです。。

念の為、理解できた範囲をまとめると、
PHPは7.3にすべし、かつ7.3の記述にすべし！

フロントエンドとブロックエディタのCSSを分けたほうがいい。（え？ブロックエディタ側のCSS？？も？？？）
あと、ブロックエディタを使ってのテンプレート作成には、デザインカンプにはないものも設定が必要だとのこと。

とにかく設計段階からきちんとしておかないと大変なのだそう。

どうもこれまでテンプレートをクラッシックエディタで構築していた時からGutenbergの登場で一気に難易度が増した印象。

まずとりあえずブロックエディタそのものを使ってみるところから始めると、難易度が下がるかもしれません。

運用も最大限考慮！コーポレートサイトでブロックエディタフル活用の事例紹介

登壇者：長谷川広武さん

続いてもGutenbergのセッション。こちらはGutenbergを用いてバカルディジャパンのコーポレートサイトを立ち上げられた時のお話でした。
ちなみにこちらの投稿コンテンツ部分について、ブロックエディタを使われているそうです。
バカルディジャパン

Gutenberg（ブロックエディタ）が出て今までと一番変わったことといえば、設計が変わったことだそう。
今まで以上にきちんと設計を考えてから作ることが大切とのこと。

まず設計の段階でどんなブロックを使うのかまでしっかり抜き出すことをオススメされていました。
再利用ブロックなども利用して、ただあまり再利用ブロックが多いと使いにくくなるとのことで、注意した方が良いとのこと。
もちろん必要なCSSも設計し、また使用したブロックからどんなCSSが吐き出されているかのチェックをすることをオススメされていました。

あと、ブロック間の余白なんかも統一しておいた方が良いとのこと。

とにかく運用を考慮したブロックの設計が大切なんだそう。

あと、今まで大活躍だったカスタムフィールドですが、Gutenberg以降はなるべく使わないことをオススメされていました。

気をつけたいですね。

ブロックエディタで誰でもカンタンに運用しやすいサイトを作ろう！

登壇者：土居安佳里さん

最後は土居安佳里さんのセッション。みほじさんのセッションとどちらにしようか最後まで迷っていたのですが、今日この場で少しでもGutenbergに対する不安を和らげようと、土居さんのセッションを受講することにしました。

お話をお聞きして、実際にブロックエディタを使ったデモンストレーションなどもあり、とても分かりやすく一度しっかりブロックエディタを触ってみたい気持ちさせられるセッションでした。
本当に簡単にブロックを組んでいく形でサイトを構築できるので、ブロックエディタも捨てたもんじゃないですね。

また、うまくプラグインを組み合わせれば表示ブロック数を制限できたり、あと使う色だけを編集画面に表示させることができたりなど、考えていた以上に管理画面のカスタマイズができることを知れて新鮮でした。

なんにせよ、避けてばかりでなく一度腰を据えて触ってみないといけませんね、Gutenberg。
土居さんのスライド