WordCamp Niigata、Tokyo、Osakaに参加してきました。

2020年、あけましておめでとうございます。
フロントエンドエンジニアの渡辺です。
2019年10月22日にWordCamp Niigata 2019、11月2日にWordCamp Tokyo(セッションデイ)、12月7日にWordCamp Osaka(セッションデイ)に参加してきました。

WordCampとは？

WordCampとはWordPressコミュニティのイベントです。

WordCampについて詳しく知りたいときは、WordCamp Osakaの記事に「2019年保存版 はじめてのWordCamp完全ガイド」があります。こちらの記事を見て頂くとWordCampがどういったイベントか知ることができます！

私のはじめてのWordCamp参加はWordCamp Niigataでした！

誰でも楽しめる和気あいあいとした雰囲気の良いWordCampで、会場のスクリーンが大きく、どの席に座ってもスライドが見やすくてとても良かったと感じています。そして、受付でわぷーのトートバックとTシャツをいただけてとても嬉しかったです！(WordCamp TokyoやOSAKAでもNiigataのTシャツを着ている方をみかけました。かわいい！)

終始、いい雰囲気の中でセッションをきいたり、交流したりすることができたので、はじめてのWordCampがWordCamp Niigataで良かったと思っています!

以下、WordCamp Niigataの各セッションの感想や学んだことです。

初心者がつまずかないための、いちばんやさしい WordPress の用語解説/石川栄和さん

・ホームページが表示される仕組みからWPについて、それからブロックエディターの説明まで45分！
・どうして古いプラグインや利用者の少ないプラグインを避けるべきなのか→前者はセキュリティに問題がある、後者は更新停止の際にこまる可能性があるため。
・高機能なテーマはテーマを変えたときにその機能が使えなくなるので要注意。(テーマを将来変える事も考えてテーマを作る)
・ブロックエディターの説明で出てきた、Q&Aが簡単に作れるブロックが良さそう。
・プライバシーポリシーなどテキストが多くて繰り返しの要素が多いページはブロックエディターで作りたい。
・プラグインの更新などでページが真っ白になったときは、サイトヘルス。管理画面には入れるようになっている。メールも飛んでくる。

アフィリエイトでマネタイズ！いま知っておくべきトレンドとポイント/笠井 北斗さん、鈴木 珠世さん

・普段アフィリエイトについて触れる機会がないので、稼げる金額や記事(コンテンツ)の作り方など興味深かった。
・日本でのアフィリエイトの歴史はおよそ20年。
・他の広告媒体が縮小していくなか、アフィリエイトの市場は拡大し続けている。(15％程度の比率で今後も成長していきそう！)
・テーマではCocoonとLightningが人気。Cocoonは無料で機能が豊富で読みやすく、サポートがしっかりしている。Lightningは詳しくなくても調べながら使える。
・テーマは利用者数が多いものを選ぶ。(検索して情報が多く出てくるもの)
・フロー型(Cocoonなど。ブログ)、ストック型(Lightningなど。ミニサイト、すでに一通りの記事ができているもの)
・プラグインを選ぶポイント：最終更新日が1年以内のもの、有効インストールが多いもの、検証済みの最新バージョンが最新のWPのもの。
・情報を発信する際は法律をきちんと守って、正しい情報を伝える。(不適切な表現はしない)
・自分の体験したことや、一次情報(正確な情報)を伝えるようにする。

安心して WordPress を使おう！クイズでわかるセキュリティ/ 齋木 弘樹さん

・Slidoを使ってクイズの答えをリアルタイム投票できるのがよかった！投票の内訳がリアルタイムに見れて面白いし、一体感が生まれる。
・もっと細かくセキュリティを設定したいときはプロにお願いする。
・個人情報漏洩事件をサイバーセキュリティ.comでみることができる。
・WordPressに対する攻撃はプラグインとテーマに対する攻撃が多い。
・パスワードは自分で覚えないで、ツールや手帳に記録する。
・パスワードの管理方法として「手帳に書く」ことが正しいと初めて知った！(条件:パソコンと一緒にしておかない、管理は厳重に行う、手帳をなくしたらパスワードを再設定)
・WordPress本体のアップデートは設定を変えていなければ、マイナーアップデートは自動でしてくれる(セキュリティアップデートも)
・事前の準備・運用やWordPress運用での対策のあとにプラグインでの対策を考える。
・使っていないプラグインは削除、目的に合ったプラグインを選択、必要な機能を正しく設定。
・もっと細かくセキュリティを設定したいときはプロにお願いする。(重要)

限られた予算で最大限の成果を出すために実践している「設計」と「お金」の話/後藤 賢司さん

・制作で一番費用がかかるのは人件費。作業に当たる部分の費用が大きい。→素材やテンプレートの活用で工数を減らす。
・世界に一つだけ、独自のシステムが必要というのは稀。凝ったシステムは使われないこともある。
・予算が少ないときは、ウェブサイトを段階的に成長させる。
・見積もりは細かく丁寧に具体的に伝える。(細かく伝えることで説得力が増す)。追加内容は都度見積もりする。
・ウェブサイトは次のコミュニケーションのきっかけのためのコミュニケーションツール。
・検索エンジン、人の両方に理解される設計で作る。
・シンプルな構造で、永続性のある(テーマを変えてもコンテンツが維持される)設計をする。
・オレオレカスタマイズはリニューアル時に大きく費用がかかってしまう。
・WordPressの作法に則って制作されたサイトは、何度リニューアルしてもコンテンツを維持できる→コストを抑えられる。
・制作するときには、CodexやTheme Handbook、デフォルトテーマのコードを参照して制作する。(正しい実装方法で実装をする)
・SEOの基本は利用者の求めている答えをウェブサイトが返しているか、比較したときに選んでもらえるか。
・よくある質問を作成する際は、カスタム投稿タイプで1つの質問につき1ページにする。(質問がページタイトルになって重要度が変わる)
・よくある質問で問題が解決。→満足度や信頼度が上がり、検索エンジンから評価される。
・ウェブ動画は印象や認識、信頼性を高めるために使う。
・ウェブサイトへ直接動画を埋め込むのではなく、YouTubeにアップしてサイトへ埋め込む。(サーバーへの負担減、YouTube動画は検索にも有利)

Word Camp TOKYO 2019/11/2 (ベルサール新宿グランドコンファレンスセンター)

WordCamp TOKYOは、WordPressを使ったこれからのサイト制作に関わるセッションが幅広く用意されていたと思います。会場では全国から集まったWordPressに関わる人の数に圧倒されました。

セッション中はUDトークによるリアルタイム字幕で、登壇者の方が話したことがリアルタイムに文字としてスクリーンに表示されていたのが驚きでした！

以下、WordCamp Tokyoの各セッションの感想と学んだことです。

ゼロから学ぼう！ブロックエディター(Gutenberg)/村上直子さん

・WordPressはバージョン5.0からエディターがブロックエディターにに変わった。
・ブロックエディターで「複雑なレイアウト」「リッチなコンテンツ配置」ができるようになった。
・ブロックエディタ、ブロックを選べば自分の思った通りの表現ができそう。エディタ内に出てくるメニューも見やすくていい。
・Gutenbergの情報を得るには？→WordPress.orgサポートフォーラム、WordPress Meetup、WordCamp、WordPress.tv。
・ブロックエディター、使ってみたらきっと楽しい！

本当にだれにでもできる、WordPress をよりよいものにする方法。/占部 紘さん

・Gutenbergでの日本語入力バク修正の話。
・UIでのバグは信頼度に大きく関わる。
・(WordPressに貢献するのに)特別なスキルは不要。
・OSSは一つのものをみんなでより良くしていく方法。
・バグをレポートという形で公式に報告するだけで非常に生産的なやりとりになる。
・誰も報告しないからバグが直らない。問題が可視化される・報告されることが重要。
・英語/日本語に限らずどんなことでも大切なことは「まず、伝えること」。

カスタムフィールド製造業からの脱却 〜ブロックエディター（Gutenberg）をカスタムする方法〜 /しずみさん

・今はGutenbergのフェーズ2。これからはコンテンツの外側をカスタムできるようにしていく。(ワードプレスで作られたサイト全体をカスタマイズできるように)
・ACFの問題点：標準ではサイト内検索にひっかからない。検索に時間と負荷がかかる。
・ブロックエディターに標準で準備されいてるものだけでも便利だが、出力については調整をする必要がある。
・設定項目が足りないときは「Block Filters」で対応。
・Block Editor Handbookを読もう。英語でもGoogle翻訳が翻訳してくれる！
・立ち止まるくらいなら手を動かそう。

デザイナーと情報発信のいい関係/角田綾佳さん

・スライドに情報がきれいにまとめられていて、イラストの使い方が上手い！
・シェアされたほうがいいことがある。(間違いから勉強できる、シェアされればシェアされるほどファンになってくれる人も増える、正しく伝える練習になる。)
・自分が勉強したことを次のひとに渡すことも情報発信。
・教えてくれる人、自分、読む人の三方良しがいい！
・みんながいることろでちゃんと聞くのも情報発信。
・誠実に活動することが大切。

WordPress と SSG(Static Site Generator) が織りなす、WordPress ウェブフロントの新世界/江藤 武司さん

・ウェブフロントではJAMstackという言葉が注目を集めている。
・SSGを使うメリットとして、より良いパフォーマンスとスケーリング、高いセキュリティ、良い開発経験を得ることができる。
・SSGは比較的に楽に技術習得がしやすい。(例:Vue.jsなど)
・フロント開発者技術者がそのまま自分たちの技術を使ってWordPressのフロントを作ることができる。
・WordPress+ SSGでWordPressの世界がさらに広がる。
・WordPressをServerlessにする。(WordPressをHedlessCMSとして、ウェブフロントはSSG)
・Hedless CMSはまだまだ種類が少なく、ユーザビリティにも課題がありそう→Serverless WordPressもまだまだ戦うことができる！
・WordPressは世界で最も使われているCMSというメリット。
・WordPressとJAMstackを組み合わせることで、双方のメリットを合わせたサイトをつくることできる！

WordCamp Osaka2019 2019/12/7 (大阪工業大学梅田キャンパス)

日本国内では今年最後のWordCampのWordCamp Osaka。WordCamp OsakaはWordCamp NiigataやWordCamp Tokyoともまた違う雰囲気のWordCampでした。

会場が大学ということで、スクリーンがとても見やすかったです！セッションによっては、立ち見がでるほどの盛況ぶりでした。オープニングムービーのWordCamp HanedaからWordCamp Niigata、そしてWordCamp Tokyo、WordCamp Osakaと続いていく内容に感動しました！

以下、WordCamp Osakaの各セッションの感想と学んだことです。

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

・ウェブサイトのパフォーマンスの改善は調査と計測から。
・調査と計測に使えるツールはサイトヘルス、Lighthouse、Chrome Audits、PageSpeed Insights、Site Kit、Test My Site、WebPageTestなど。中でも具体的に改善内容を出してくれるLighthouseを使って改善。
・コーディング無しでできる改善策→使用サーバーを見直す、不要プラグインをアンインストールする、最適な画像形式の選択(色変化の少ない画像にはSVGなど。)、画像の遅延読み込み、キャッシュの見直し、最終的には静的化(例：Shifter)など。
・og:imageなどはSVGをサポートしていていないので別途jpgなどを用意する。
・コードによる改善策→ページによってCSSやJavascriptの読み込みを制御する、レンダリング妨げるリソースの除外、JAMstack(WPのRest APIを使う)など。
・サイトのコンテンツが増えるとサイトのパフォーマンスが低下する。
・速度を遅くするのも早くするのも人間。
・例のサイトを改善するのにトータルで約80〜90時間かかった。
・パフォーマンスを保つには設計から運用まで地道に行う。

FONTPLUSはWebサイト全面リニューアルでWordPressを採用！ 日本語Webフォント10年間の歴史に迫る/関口浩之さん（フォントおじさん）

・Webの世界では約20年間フォントが放置されていた。
・8年くらい前までまでは書体が自習に使えず、画像で見出しを実装していた。
・10年くらい前からウェブ上で色々なフォントがテキストとして表現できるようになった。
・Webフォントのターニングポイント3点：配信速度の改善(2013年)、Windows XPのサポート終了(2014年)、IE8のサポート終了(2016年)
・2018年にFONTPLUSはWordPressを使って生まれ変わった。
・2017年の秋に「リブランディングをしたい」、「もう一度フォントを身近にしたい」などの思いから生まれ変わることを決めた。
・担当が変わったときに手順書だけでなくソースを見ても分かるということからWordPressに。
・FONTPLUSのサイトトップはフォントを色々操作できる！(実際に触ってみると面白い！！)
・書体の役割は「見やすさ」「読みやすさ」「分かりやすさ」。
・書体は感情を持っている。
・背景に合わせた書体を置くと書体の存在感が消える。
・日本でもコーポレートフォントが増えてきた。
・「ブランディング」は今年のキーワード。来年もそうなりそう。

Gutenberg 以降のテーマ作成に向けて、今学ぶべきこと/三木徹さん

・ブロックエディターを触っていくうえで、個人的に一番ためなったセッション。
・Gutenbergはサイト全体をブロックでやっていくフェーズに既に入っている。
・これからのWordPressのために学ぶべきこと:「PHPスキルのレベルアップ」「CSS設計の考え方」「ブロックエディターそのもの」
・PHPは無名関数の使い方、配列はarrayではなく[]で書くなどに気をつける。
・WordPressの使用や歴史や、他の人が使うことを考慮して実装する。
・WordPressのコアが出力するクラスはOOCSSやBEMっぽいものが使われいてる。
・ブロックエディターでOKでも、フロントでみたときに表示が崩れる場合がある。（その逆も）
・フロントエンドとエディタでCSSを分ける。
・CSSフレームワークを使うと複雑になる。(ブロックエディターとバッティングする可能性が出てくる)
・デザイン上になくても実装が必要なスタイルが多数ある。
・ブロックエディターのどこに設定項目を置くかを考えなくてはいけない。
・PHPのスキルアップは今すぐ始められる。CSS設計は狭い範囲でスタート、ブロック周りから見直し。ブロックエディターのブロックスタイルは今すぐできる！
・まずはブロックエディターを使い倒すことから。（どういうふうに動くか確認してみる）

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

・ブロックエディタの登場によってWordPressの設計が変わった。
・事例はバカルディジャパンのウェブサイト。
・他の投稿されたコンテンツを手動で持ってくるときにはAdvanced Posts Blocksがおすすめ。
・カスタムフィールドではなく、カスタムブロックを使えばすべてコンテンツに入る。
・カスタムフィールドはイベントの開催日などに使うようにする。
・デフォルトのテーマにしても運用できるテーマにする。(「外観」と「コンテンツ」の分離)
・カスタムフィールドを使った制作は、作りきりが前提・対応負担の増加・テンプレートが複雑に。
・テーマを制作する人はTheme Handbookを読もう。
・運用で更新頻度の高い再利用ブロックは、抜き出して一覧を用意。
・ワイヤーの段階でブロックを確定する必要がある。
・ブロックエディターがどんなものがを理解する必要がある。(どんなHTMLが出力されるか、スタイルがついているか)
・ブロック間の余白は統一したい。(パターンごとに作るとハマる)
・運用も考慮したブロック設計。カスタムフィールドは最小限にする。

Getting Started JAMstack Based WordPress/Okamoto Hidetakaさん

・JAMstackのメリット4点:早い(静的なHTMLで配信するためサーバーtoブラウザが高速)、強い(サーバーの負荷が小さくなる)、固い(リスクを局所化)、楽(問題発生時の切り分けがしやすい、スコープの明確化)
・手順：WordPressをAPIサーバー化→JとMの技術の選定(フロントエンドでなにを使うか、static site generater、VueかReactなど使いやすいものを)→JAM(JAにMのデータを流し込む)⇨運用ワークフローの整備
・APIサーバーとして使うWordPress側にもコンテンツが重複するためAPI側のWordPressはリダイレクト、noindexのなど設定が必要。
・JAMstackでWPを運用する際は、フルマネージドなサーバーを検討する。(WordPressやプラグインの更新を行ってくれるサーバー)
・運用時、WordPressでの更新はビルドとアップロードをしないと反映されない。→WordPressからビルドを実行する必要がある。(便利なプラグイン「JAMstack Deployments」がある!)
・WPのプレビューはWPのテーマで表示されるため、公開前のチェックのプレビューにはビルドが必要。（プレビュービルドまたはローカルビルドをする）
・JAMstackなサイトにするデメリットは今までのWPサイト制作と異なるノウハウが必要になること。
・JAMstackにする/しないは、案件が向いている/いないを考えて判断する。

---

以上、WordCamp Niigata、WordCamp Tokyo、WordCamp Osakaで学んだことや感想でした。
各セッションの動画はWordPress.tv、スライドは各スライド公開サービスなどで公開されています。
WordCampに参加できなかった方も動画やスライドでWordCampのセッションを見ることをおすすめします！

3つのWordCampに参加して、改めてWordPressのシェア率の高さとWeb制作現場でのWordPressに対する関心の高さが感じられました。私はWordCampで学んできたことを活かして、これから本格的にブロックエディターに触れてみようと思います！

そして、2020年もWordPressについて多方面から学び、そして新たな技術や知識、人と出会うためにWordCampに参加したいと思います。

最後にWordCampの運営・スタッフの方、参加された方、みなさん本当にお疲れさまでした！

2020年がWordPressに関わるみなさんにとって良い年になりますように！

---

📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。

🤝 一緒に働きませんか？

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。

• フロントエンドエンジニア
• アシスタントフロントエンドエンジニア

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。

（2024年11月時点）