以下は、Ella van Durpe が書いた WordPress.org 公式ブログの記事、「State of the Word: the story of the slides」を @mimitips、@nao、@nukaga、@atachibana で訳したものです。
誤字脱字誤訳などありましたらフォーラムまでお知らせください。
WordCamp US 2019 で行われた マット・マレンウェッグ (Matt Mullenweg) 氏による State of the Word (訳注: マット・マレンウェッグが毎年行う基調講演) の中で、プレゼンテーションに使用したスライドが、Slides プラグインを使用した Gutenberg で作られていることが明かされました。WordPress を使ってスライドを作成するのは誰にでも当たり前の選択肢とは言えないので、この記事では、その過程を紹介し、Gutenberg を使ってスライドのレイアウトを作成するためのコツを提供したいと思います。
この記事は エラ (Ella) と タミー (Tammie) の共同執筆によるもので、2人は今年の State of the Word スライドの作成に (Mel、Mark、Enrique、Q 、そしてサポーターとともに) 協力しました。
はじまりの経緯
エラ・ヴァン・ドゥールプ (Ella Van Durpe) が JSConf と ReactEurope で登壇者として選出され、プレゼンのスライドを作りたいと考えました。
過去には Reveal.js を使ってスライドを作ったことがあり、HTML/CSS/JavaScript を使って何でも作れる自由さを楽しく感じていました。エラにとってこれらの言語は使いやすく、手慣れていましたし、ネイティブな形式で Web に公開することができるからです。
新たにプレゼンを作るにあたって Reveal.js をまた使おうと思ったものの、HTML を手書きで書きたくはありませんでした。「コードを実際にまったく書くことなく、Web 上にネイティブな形で公開できるコンテンツブロックを視覚的に作る」というのは、まさに Gutenberg が作られた目的でした。
エラは、スライド内にスタイルをハードコードし、追加設定はできないというプロトタイプのプラグインをすばやく作りました。各プレゼンの最後に、Gutenberg ベースのスライドについての簡単なデモを含めると、観客は驚きました。
WordCamp US 2019 が近づいてきたとき、エラはプラグインを State of the Word で使うように勧めました。これまでの登壇で、彼女の観客の反応がとても良かったので、WordPress コミュニティ全体にもこれを共有するのはいい機会だと思ったのです。
Gutenberg スライドの仕組み
技術情報
プラグインはカスタム投稿タイプ “presentation” と新しいブロック “slide” を登録します。slide ブロックは拡張 “Group” ブロックの一種です。投稿のルートにしか配置できませんが、内部にはどのブロックでも置くことができます。結果、投稿のルートにはスライドがあり、スライドにはコンテンツがあります。この構造は HTML セクション要素内にコンテンツを必要とする Reveal.js マークアップと完璧に合致します。
それぞれのスライドには固有のデザインがあるため、テーマのスタイルは無効化され、各スライドからスタイルを設定しています。プラグインで提供されるカスタムプレゼンテーションテンプレートが、フロントエンドにカスタム投稿をレンダリングします。
ここでエラは、スライドをスタイリングするオプションを追加しました。例えば、ドキュメント全体、または個々のスライドレベルで背景やフォントを設定するオプションや、スライドの遷移方法や速度を変更可能な Reveal.js オプションを追加しました。最後にスタイルを上書きするカスタム CSS フィールドを追加しました。
また State of the Word 用にスピーカーノートとスピーカービューも追加しました。
デザインの過程
スライドデザインのインスピレーションは、Blue Note のアルバム・ジャケットから生まれました (2011年の State of the Word スライドのインスピレーションでもありました)。これらのアルバム・ジャケットは、WordPress コアの最近の “About” ページと、新しい Twenty Twenty テーマのスターターコンテンツに影響を与えました。このスタイルは、力強く幾何学的な形状と、明瞭なラインのシンプルなフォームで構成されています。写真と大胆なタイポグラフィは、この意匠の本質です。
プレゼンテーションに最適な組み合わせを選択する前に、さまざまなカラーパレットとフォントの組み合わせが検討されました。
スライドには強力な写真の要素が必要でした。過去の WordCamp は優れた写真のソースなので、適切な写真を見つけるために何年ものフォトギャラリーを掘り下げました。色、フォント、写真を使用し、一連のプレゼンスライドを構築するための基礎を築きました。
Gutenberg スライドを作る上でのコツ
コツその1: カラムと仲良くなろう
正確なレイアウトのスライドが必要な場合は、カラムを活用しましょう。以下の例では、3列レイアウトを使ってスライド内のコンテンツを中央に配置しました。
コツその2: スペーサーブロックの便利さを知る
カラムを最大限に活用するには、スペーサーブロックと組み合わせましょう。以下のスライドでは、スペーサーブロックを使って背景画像の上にコンテンツを配置しました。
コツその3: 大画面でテストする
スライドをプレビューしながら進めていくことが大切です。使用するプロジェクターのサイズとアスペクト比に合わせて設計し、時々プレゼンテーションモード上で視覚的に確認してください。
コツその4: 動画を確認
新機能を紹介するにはよくできたデモ動画が欠かせません。ヨエン・アスムッセンが効果的なデモ動画についての記事を書いています。
学んだこと
アートディレクションを適用した構成をもっと簡単に作れるようにできればいいのに！
メル・チョイス-ドゥワン (Mel Choyce-Dwan)
Gutenberg の進化にともなった大きな改善点のひとつとして、「アートディレクション」が簡単になったということが挙げられます。しかし、今年の間に加えられた改善をもってしても、Gutenberg でいくつかのレイアウトを作成することは予想以上にトリッキーでした。より複雑な構成については、SVG に依存しました。将来、最終的にはこういったハックの必要性は解消され、わくわくする可能性の新しい世界がすべての人に開かれるでしょう。
ブラウザーを通して、例えば (多くの人が使うツールである) Keynote や Powerpoint を使用する場合よりも、このプレゼンテーションにおける最大の学びを得ることができました。多くの場合、フルスクリーンで表示すると、エディターで作成したものとは表示が異なることが分かりました。ブラウザーウィンドウ全体を使う代わりに、固定サイズを使用するようにプラグインをアップデートすることで、これを和らげることができました。
まとめ
もし State of the Word をチェックしたい方がいましたら、ぜひ録画を見て記事を読んでください。
Slides プラグインはプラグインリポジトリから利用できるだけでなく、コードを GitHub から入手できますし、翻訳の手助けをすることもできます。