ミュンヘンを拠点とするゲームスタジオがWordPressとGutenbergを使用してウェブサイトを強化する方法

公開: 2018-08-21

ミュンヘンを拠点とする受賞歴のあるゲームスタジオであるMimimiは、野生のグーテンベルクの興味深い事例研究を提供する新しいWordPressWebサイトを立ち上げました。フロントエンドからは分からないかもしれませんが、舞台裏では、新しいブロックベースのエディターがカスタムブロックでレイアウトを強化し、MimimiチームがWebサイトのさまざまなセクションを簡単に更新できるようにしています。

地元の広告代理店であるLuehrsenHeinrichは、カスタムテーマと、Mimimiチームの編集要件をサポートするように調整された7つのブロックを使用してサイトを構築しました。

「一般的なタスクは、保守が非常に簡単で迅速で、後でブログ/ニュースセクションを取得する可能性のあるエレガントなWebサイトを作成することでした」とLuehrsenHeinrichのCEOであるHendrikLuehrsenは述べています。「私たちは、クライアントに私たちを信頼してくれる驚くほどクリエイティブで技術に精通した人々がいることを知っていました。そのため、グーテンベルクに入る自信がありました。」

このサイトでは、編集者がさまざまな背景パターンと波状の区切り文字を作成できるようにする背景ブロックを使用しています。 Luehrsenは、列と同様に「InnerBlocks」で動作するため、他のブロックをホストできると述べました。

このサイトには、Mimimiが内部通信に使用するDiscordからのユーザーのセットを表示するために、いくつかの設定を動的にフェッチするカスタムDiscordブロックもあります。ブロックには、更新されたチーム名簿が表示されます。ソーシャルメディアとゲームブロックにより、編集者は既に設定されたレイアウトでテキストと画像を簡単に更新できます。

「列、段落、画像を組み合わせることで、同じレイアウトを約80％にできると確信していますが、画像を配置しようとするときに、クライアントがMSWordのようにいじくり回したくありませんでした」とLuehrsen氏は述べています。。「したがって、単純なレイアウトブロックを作成することは論理的なことでした。」

MimimiのWebサイトでは、カスタムMailchimpサインアップブロックと、より柔軟性と応答性の高いブレークポイントを提供するカスタムスペーサーブロックも使用しています。

「全体として、私たち（および私たちのクライアント）は結果に非常に満足しています」とLuehrsenは言いました。「このブロックベースのエディターで、WordPressの未来を先取りすることができます。しかし、私たちが本当にもうスムーズにするものがなくなるまで、まだ非常に長い道のりがあります。まだ多くの作業を必要とする特定のことがあります。」

開発の観点から、Luehrsen氏は、彼のチームはまだエディターのバックエンドスタイルに苦労しており、そのためにフロントエンドとバックエンドのスタイルが大きく異なると述べました。彼らはまた、グーテンベルクエディタにグローバルスタイルを適用するための保守可能で安定した方法をまだ見つけていません。これらの未解決の問題以外に、代理店は新しい編集者のために構築することを楽しんでおり、別のクライアントのセットのためにすぐに別のグーテンベルクページの製品を発売しています。

Mimimi GamesのGutenbergエクスペリエンス：編集者はブロックの概念を理解していますが、それでもユーザビリティの問題に直面しています

MimimiGamesのCEOであるJohannesRothは、彼のチームは過去にWordPressを使用したことがあり、Gutenbergをコンテンツ編集の主要な改善点と見なしていると述べました。

「正直なところ、私は絶対にそれが大好きです！」ロスは言った。「ページの設定を理解し、カスタマイズする方がはるかに簡単です。グーテンベルクのエディターでユーザーエクスペリエンスが少し向上した場合、それがページを維持するための新しい最先端技術であることは間違いありません。しかし、まだ正式にリリースされていないことを知っているので、非常に堅牢で、私の観点からは理解しやすいものになっています。」

Roth氏は、彼のチームは、ブロックの設定、コンテンツを再編成する機能、作業するコンテンツの小さなチャンク、およびブロックごとにカスタマイズされたオプションを高く評価していると述べました。

「奇妙なツールバーを使用すると気が散ることが少なくなり、コンテンツに焦点が当てられます」とRoth氏は述べています。「それはまた、コンテンツからフォーマットと装飾の部分を分割すること、そしてSEOに対応するための適切なページを設定することについて、私たちがどのように考えるべきかにより似ています。」

Rothは、Mimimiチームが前の編集者から見逃している2つのことを特定しました。

タブを押して箇条書きをインデントし、タブをシフトして反転します
ctrl + aを使用して、ブロック内のすべてのテキストをすばやく選択します（ページ全体が選択される場合がありますが、これは役に立ちません）。

「これまでのユーザビリティの最大の問題は、ブロックと列の組み合わせでした。これにより、マウスオーバーゾーンがスタックされるため、「…」アイコンを押すのが非常に難しくなることがあります」とRoth氏は述べています。

現代のウェブでストーリーテラーを可能にする：LuehrsenHeinrichがエージェンシーとしてグーテンベルク開発に飛躍した理由

Luehrsen氏は、新しいページビルダーを作成するための独自のアイデアを捨てた後、彼の代理店が昨年WordCampEuropeでグーテンベルク列車に乗ることを決定したと述べました。

「パリでのWCEUの1、2か月前、私たちはブロックベースのアプローチに恐ろしく似ている独自のページビルダーシステムのコンセプトとアルファ版に座っていました」とLuehrsen氏は述べています。「マットによるそのQ＆Aにより、私たちのプロジェクトはすでに時代遅れであることがすぐにわかりました。幸運なことに、私たちは5つの悲しみの段階を非常に迅速に通過しました（構造化データに関するこの投稿は「交渉」だったに違いありません）。優先順位を変更し、2017年10月末または11月末にグーテンベルクとの協力を開始しました。」

Luehrsen Heinrichは、さまざまな方法でグーテンベルクに関与しているわずか4人の小さな機関です。 Luehrsenはこのプロジェクトに積極的に貢献しており、クリスマス休暇中に最初のPRを提出しています。チームには、ブロックの作成の内外を熟知している開発者、ブロックのUXとスタイルを設計するデザイナー、およびグーテンベルクの編集要件についてクライアントと協力するプロジェクトマネージャーもいます。

Luehrsen氏は、ReactとES6の経験がないにもかかわらず、グーテンベルクの貢献者であることがブロック作成の学習に大いに役立ったと述べました。

「グーテンベルクと協力し、プロジェクトに貢献し、素晴らしいグーテンベルクチームから即座にフィードバックを得ることができたので、プロセスのブートストラップに大いに役立ちました」とLuehrsen氏は述べています。「現在のブロック作成プロセスは、SCSSではなくLESSを内部で使用していることを除いて、Gary、Adam、Matias、および他のすべての作業に大きく基づいています。ただし、フォルダ構造からビルドプロセス、ファイルの構造化に至るまで、デバッグと問題の発見が非常に簡単になるように、Gutenbergレポスタイルにできるだけ忠実に従うようにしています。」

Mimimi Gamesの新しいグーテンベルクを利用したWebサイトの構築に成功した後、Luehrsenのチームは、新しいエディターを使用してより多くのクライアントサイトを構築するために参加しています。彼は、それをクライアントにとってより良い価値でより良いユーザーエクスペリエンスを提供する方法と見ています。

「私たちのクライアントは、現代のWebでのストーリーテリングは、単にテキストを書くだけではないという私たちの信念を共有しています」とLuehrsen氏は述べています。「「リッチテキスト」エディターとしてのTinyMCEは素晴らしい仕事をしましたが、それでも、さまざまな種類のメディアを一貫したストーリーに組み合わせると、メタボックスやショートコードが混乱し、ティーザーの場合は編集画面を離れなければならないこともありました。グーテンベルクは、これらすべてを素晴らしく目立たない方法で組み合わせています。そして、いつものように、より迅速に良い結果を得ることができれば、節約された時間は、クライアントが本質的に購入しているものです。」