大阪のWeb制作会社です。
ホームページ制作の無料相談はこちら

技術メモ
WordCamp Osaka2019 「参加レポート」と「学び」まとめました

例年通りWordCamp Osaka2019に参加してきました!今年は後半予定があり、3つのセッションしか聞けませんでしたが、学ぶことが多かったので自分の備忘録も兼ねてブログにまとめました。昨年のWordCamp Osaka2018の記事は下記になります。

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

Kiteさんのセッション。こちらのセッションは過去にブログで書いたにした「Webパフォーマンス改善セミナー」でお話されていたことを中心だったため、自分の中に落とし込めていることが多く、良い復習になりました。その時の記事は下記になります。

詳しい施策については、前のブログで書き切った感はありますが、細かい部分で忘れてるなーってことが、

  • PSIはエクスペリエンスレポートも加味しているので、他のサイトと計測が変わる可能性
  • SVGは「別名で保存」ではなく、「スクリーン用に書き出し」でする
  • サムネイルにSVGを適用した場合、OGPは対応していないので、jpgなどに書き換える必要がある
  • WordPressを静的化するのも1つの手段(有料)

以前にKiteさんのセミナーを聞かせていただき、本サイトの速度改善に取り組みました。そして、改善着手前に比べるとパフォーマンス数値はだいぶ改善されました。(まだまだ、できなていない施策はあるのですが・・・)

WordPressプラグイン「Native Lazyload」はGoogleが作ったプラグインでオフスクリーン画像の遅延読み込みを実装でき、とても簡単でおすすめです。セッションでおっしゃってたことは、まずは自分ができるものから着手するということ、そして紹介していただいたツールを使い、どんどん指示通りに改善していくことがまずは取り組めることです。(来年にかけて画像を.webpにしていきたい・・・)

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

次は、フォントおじさんで有名な関口浩之さんのセッションです。

96年、yahoo立ち上げ、データベースにWebサイトのメタ情報などを手打ちでしていた。

アクセシブルであるべきWebが、Webフォントの登場でUI/UXが改善された。

海外では、HelveticaよりFrutigerという書体が、判別性が高いため使われるケースが多い。数字の「3」や「C」などは明らかに視認性が違う。日本のサインシステムでFrutigerが使われるケースが増えている。

FONTPLUSのWebサイトをリニューアル・リブランディングするにあたり、ペルソナ、プロトタイピング、ユーザーインタビューを実直に遂行した。

Webフォントはカーニングもできる!現行のモダンブラウザーではほとんど対応している。

日本語のWebフォントの場合は、英文Webフォントの違い、莫大なデータ量(欧文は1書体、100文字で間にあうが、日本語は1書体で6,000~23,000文字)になるため現実的ではない(高速配信できる機能も考え中)。

Webフォントは最後に表示されるので、実は遅いわけではないことも多い

Webフォント導入メリットとしては、ブランディング向上、アクセシビリティ、多言語対応、SEO対策、制作効率向上の5点が挙げられる。

セッションでは省かれてましたが、スライドの中に、「どんなサイトで、どんなWebフォントが使われているか」色々な事例が掲載されています。これを眺めているだけでも楽しいです。そして、このセッションで1番感動したのが、FONTPLUSさんサイトコンテンツである「フォントのランキング」です。

「たくさんの書体があるけど、何を選んだらいいの?」っていうあまりフォントを知らない人にめちゃくちゃ優しいコンテンツです。僕自身も今までフォント選定する上で、いろんな人の記事を参考にフォント選定させてもらうことが多いのですが、それってどこまでいってもその人の私見に過ぎないのですが、FONTPLUSさんのランキングはフォント選定における重要な指針・統計になりうるデータです。1ヶ月毎に最新データが反映されているらしく、もっと早く知りたかったコンテンツでした。このデータ自体、公開されることに反対してた会社もあったようですが・・・

また、FONTPLUSさんの現在のサイトを一度見ていただければわかるのですが、アクセスするたびにトップデザインが代わり、使われるWebフォントが違っていてすごく楽しいWebサイトになってます。ユーザーもWebフォントを使ってビジュアルを作ることができて、共有?などもできるよう。

WordCamp Osaka2019 「参加レポート」と「学び」まとめました

Google 検索最新情報 2020

GoogleのエバンジェリストのTakeaki Kanayaさんのセッションで、よくある質問に回答する形でお話されていました。

GoogleのWordPressプラグイン「Site Kit」。WordPress管理画面で、「Search Console」「Analytics」「PageSpeed Insights」「AdSense」4つの指標を確認することができる。特別なフローがあるわけではないので、導入が簡単!

もうnofollowは不要ですか?→「nofollowの取り扱いは変わりましたが、リンクについてのガイドラインは変わっていません。」

お金を払って記事書いてもらったリンクはnofollowにする(しないとバッティングを受ける要素になる)。nofollow sponsoredの併記もできる。

  • rel=”sponsored”:広告や有料プレースメントのリンク
  • rel=”ugc”:コメントやフォーラム投稿などのユーザー作成コンテンツのリンク
  • rel=”nofollow”:リンクにその他の適切な値がなく、そのリンクとサイトを関連づけたくない場合、またはリンク先のページをサイトからスクロールさせないようにする場合

nofollowの指定をあくまで指標にすることに変更。ランキング活用に範囲などは決まってはいない。

Search Consoleの「リンク」から外部リンクを見てみると、大量の低品質リンクを発見しました。どのように対処すればいいですか?→「Googleにスパムサイトであることを通知する」。

今後、Googleは混合コンテンツ(httpsのページにhttpのコンテンツがある場合)は、そのページを表示しなくなる?→「ページ自体ではなく、httpでリンクされたコンテンツが読み込まれなくなる」。ページ全体が読み込まれなくなるわけではなく、httpをhttpsとして読み込むため、一部コンテンツ(オーディオや動画等)が表示できないケースが出てくる。

10年以上前の記事は検索結果に表示されない?→「10年以上前の記事でも検索可能」。

コアアップデートに回復ポイントを教えて下さい→「Google のコア アップデートについてウェブマスターの皆様が知っておくべきことに掲載している」。

E-A-T と呼ぶ基準に基づいてコンテンツが優れているかを判断するために特別な訓練を受けています。この基準は「Expertise(専門性)」「Authoritativeness(権威性)」「Trustworthiness(信頼性)」を意味します。品質評価ガイドラインを確認することで、E-A-T の観点からコンテンツを評価して、検討すべき改善点を見つけられるかもしれません。

5G到来で高速化は不要?→「ページの高速化はスマホユーザーのユーザビリティのためにも改善し続ける必要がある」。

振り返っての感想とまとめ

フリーランスとして活動している身としては、WordCampは毎回、WordPressに関する知識、またWordPressを軸としてWeb周りの知識を包括して知ることができるめちゃくちゃ良い機会になってます。今回は聞けるセッション数が少なかったのですが、セッション動画が公開されてて後からでも勉強できる機会があるので嬉しい限りです。知り得た知識を自分で今後どう活かしていくか?を常に自問自答しながら日々、精進していきたいと考えております。
最後にはなりましたが、こういう機会・場所を提供していただいたスタッフの皆さま、ありがとうございました!