アバウトページの準備

Topics

すべての WordPress のリリースには必ずアバウトページがあります。これは、新しいバージョンへのアップデートが完了した後にユーザーに表示され、新機能の内容や誰が新機能の作成に貢献したかが含まれます。

多くの人がこのページを見ることになるので、これはすばらしいマーケティングの機会です。WordPress コミュニティのデザイナーの誰かによってカスタマイズされた、各メジャーバージョンのアバウトページを見ることも楽しいでしょう (そうでなければ、既存のデザインに頼ることになります)。

この傾向は WordPress 4.7から始まりました。Figma で以前のデザインを見ることができます: https://www.figma.com/file/LrjiQZDts99EakxvZ6YcuMIr/About-Page

このようなページを作りたい場合は、以下の手順に従ってください:

手順

  • 期限を確認してください: リリースがベータ1を��えた時点でアバウトページの作業を開始し、RC1までに完了する必要があります。
  • 以下のように、アバウトページのキックオフ用チケットを作成してください: https://core.trac.wordpress.org/ticket/46901
  • どのような手順であるかを明確にします:
    • リリースリードとマーケティングまたはコピーライターの間で調整し、最初のページコピーの草案を作成する
      • 複数の人が書いたり編集を提案できるように、google ドキュメントでドラフトを作成する
      • ヘッドライン機能についてリリースリードに確認する
      • 詳細が不明な場合、その機能のリードにも確認する
      • /news/ にあるベータ版の投稿を参照して機能を追加し、コピーのヒントを見つける
      • make/core の開発者ノートを参照して、開発者のためになるセクションを入力する
      • Gutenberg の機能を確認し、「このリリースの新しいエディター機能」と呼びかけるセクションを作る
    • 画像の作成 – イラスト、アイコン、スクリーンショットなど
    • コピーを完成させる (リリースリードの最後のレビュー後に)
    • デザインを完成させる
    • ページを作成する
    • さまざまなブラウザでページをテストし、画質をチェックする
  • リリース投稿 (リリースをリードする人向け)
    • wordpress.org/news に新しい投稿の下書きを作成する
    • アバウトページからコンテンツをコピーする
    • ブログのレイアウトに合わせて画像を追加したり、サイズ、配置、位置を変更したりする
    • クレジットのショートコードとリリース名を含めるために、リリースリードに引き継ぐ
    • リリースチームからミュージシャンの名前を取得する。
    • 投稿のスラッグは wp.org/news/yyyy/mm/musician である必要があります。
    • 「アルバムの表紙」のような雰囲気の投稿を心がけます。

Top ↑

コピー

  • 対象者: 積極的に貢献していない WordPress ユーザー。技術的ではないことを想定します。
  • 目的: すぐに興味をひかれるものを強調し、人々に実験や学習を促すこと。彼らに WordPress を売り込む必要はありません。
  • プロパティ: WordPress ソフトウェア
  • アセット: コピーの流れはデザインの流れに従うと想定します。
  • トーン: 陽気な感じでも良いですが、ニュートラルでポジティブであることを目指します。すでに WordPress を使っている人たちですので、営業的な口調ではありません。

Top ↑

デザイン

アバウトページには決まったフレームワークがあり、リリースのたびに最初から再設計されるものではありません。

レイアウトは、1-4カラムのコンテナの積み重ねと考えるべきです。カラム内のコンテンツは、テキスト、ビデオ、画像、埋め込みなど何でもかまいません。これらのコンテナは、背景色なし、「わずかな」背景色、または「アクセント」背景色を持つことができます (これらは、ヘッダー機能からの色を使用して、各アバウトページで変更されます)。カラムもこれらの背景色のいずれかを持つことができます。コンテナを積み重ねて、ページを作成します。

なぜブロックエディターでアバウトページが作成されないのか疑問に思いませんか ? 最大の障害は翻訳です。ページ上のすべての文字列は翻訳関数で囲まれ、必要に応じて翻訳メモが追加されます。Gutenberg ではまだそのようなことができません。

いくつか注意すべき点があります:

  • ヘッダーが一番自由度が高いです。デザイン要素の背景やテキスト効果を含めることができます。アクセシブルであることを確認してください。
  • コンテンツに画像、イラスト、動画を使用できます。
  • 1、2、3、または4カラムがあり、色付きの背景を持つことができます。
  • 技術的なドキュメントは about patterns demo plugin を参照してください。
  • @ryelle に相談してください。彼女はアバウトページのコーディングとコミットを担当しています。

ボックスがどのように見えるかの例:

Top ↑

画像

よりよく理解するには、上の画像を参照してください。考慮すべき点がいくつかあります:

  • 画像は端から端まで表示することも、4辺すべてに32ピクセルのパディングを付けることもできます。
  • モバイルでは、画像や動画のサイズが少し変わります。
  • 画像は、隣にあるコンテンツを示すだけの装飾的なものである必要があります。画像が意味を伝える場合は、代替テキストが必要です。
  • スクリーンショットを翻訳する方法��現在ないので、画像は UI テキストを含む英語のテキストを制限するか避けるべきです。
  • アイコンを使用して小さなカラム/コンテンツを強調します。

Top ↑

ビデオ

アクセシビリティのため、 ビデオに音声が含まれる場合は、同等のテキストを提供する必要があります。ビデオでフローやアクションの実行が示されている場合は、そのプロセスをテキストで説明する必要があります。重要なことは、テキストによる説明を読む人は、視聴者が観るものと同じレベルの情報を得る必要があることを覚えておくことです。

重要なことは、動画の説明が動画に関連付けられていることが明らかであることで、これには図と図のキャプションを使用します。

技術的な要件

  • 動画は480ピクセル幅でなければなりません (一般的に、ほとんどのユーザーは436ピクセル幅でこのビデオを見るでしょう、大きな携帯電話のサイズでは最大488ピクセルで表示される場合があります)。
  • 全幅ビデオのスペースは幅1000ピクセルで、ワイドな2カラムレイアウトの場合は536ピクセルです。
  • Kap を使って録画します (これは投稿の推奨とは異なりますが、@joen は Screeny の代わりにこれを推奨しています)。
  • FFMPEG を使用して .mov ファイルを .mp4 に変換します。Kap には MP4 や WebM としてエクスポートする機能があるようです。うまく機能する場合は、変換するよりもそれを使用することをおすすめします。
  • ハウツー: 優れた UI を持つデモビデオ

Top ↑

開発

「アバウトページ」は通常 /wp-admin/about.php を指しますが、このチケットの更新は通常 /wp-admin/contribute.php、/wp-admin/credits.php、/wp-admin/freedoms.php、/wp-admin/privacy.php のセクション全体にも適用されます。他のページのコンテンツはほとんど変更されません。

コンテンツのドラフトとレイアウトがマーケティングとデザインのチームによって承認されると、ページのコードを書き始めることができます。

Top ↑

ドキュメントからコンテンツをコピーする

デザインに合わせて、セクションやカラムにコンテンツをレイアウトします。コンテンツは必ず翻訳関数で囲んでください。リンクがある場合は、printf とプレースホルダーを使用し、場合によってはリンク先のリンクも翻訳します。

Top ↑

カラーカスタムプロパティを更新する

色が変わった場合は、/css/about.css で更新します。いくつかの色のプロパティは使用されない場合がありますが、そのままにしておくことができます。一部は他のページで使用されます (たとえば、contribute は has-subtle-background-color を使用します)。about-patterns プラグインを使用すると、CSS の変更をテストできます。

Top ↑

Figma からアセットをエクスポートする

以下は SVG としてエクスポートし、ローカルに保存したものです。svgomgui のようなものを使って、/wp-admin/images/ に保存する前に SVG を最適化します。

  • ��ージヘッダー: テキストなしでエクスポート、about-header-*.svg
  • 自由、プライバシー、貢献に関するイラスト: freedom-1.svg、freedom-2.svg、privacy.svg、contribute-1.svg など。
  • リリースバッジ: about-release-badge.svg

アバウトページのコンテンツのアイコンはインラインで使用される SVG ですので、それらをエクスポートし、aria-hidden="true" focusable="false" が svg タグにあることを確認してください。

機能のスクリーンショットはラスターイメージですので、2倍でエクスポートして WebP に変換します。これらは外部リンクからページに追加されるため、まだ流動的な場合は make.w.org を使用してください。完成したら、s.w.org CDN にアップロードします (dotorg コミッターが必要です)。

Top ↑

コンテンツ内の URL を更新する

ローカル画像は通常、キャッシュを更新するためのクエリー文字列を使用するので、リリース前にバージョンを更新してください。たとえば、freedoms.php のこの行を参照してください。CDN イメージの場合はリリースごとに URL が変更されるため、これは必要ありません。

また、about.php のフィールドガイド URL も、その投稿が公開されたとき (通常は RC のころ) に更新する必要があります。リリースノートの URL が生成され、そのページが公開されれば機能するはずですが、バージョン番号はここで更新される必要があります。

ページ内のコンテンツにプレースホルダーを使ったリンクが含まれているは、それらを更新してください。

Top ↑

開発スケジュール

このページのタイムラインは複数のチームに依存しており、議論すべきことがたくさんあるため、タイムラインは柔軟である必要があります。

  • ベータ3 (またはリリース前の最後のベータ): ページの最初の最終案、基本的なレイアウトとデザインをコミットします
  • RC1: ページの最終的な下書きをコミットし、完成したアセットを更新します。
  • RC 中: 機能のスクリーンショットをアップロードしてコミットし、URL を更新し、完成したなアセットを更新します。

RC1以降に文字列の変更は行うべきではありませんが、技術的に不正確な場合などは例外が発生します。

Top ↑

Props

リリース内の prop (またはクレジット) はリリースチームによって収集され、ショートコードを介してアバウトページ (およびリリースを告知する投稿) に埋め込まれます。Gutenberg のクレジットは GitHub 経由で収集され、Meta Trac チケット (例: 5.7) 経由でクレジット API に追加されます。コード以外の貢献はすべてリリースチームのフォーカスリードによって集められ、同じくクレジット API に追加されます。最後に、注目すべき貢献者のリストがリリースチームによってまとめられ、クレジット API の更新として提出されます (例: 5.7)。

GitHub のユーザー名と WordPress.org のユーザー名を一致させるには、https://profiles.wordpress.org/github:username を使��ます。URL の末尾に GitHub のユーザー名をつけると、それぞれの WordPress.org のプロフィールに変換されます。これは、GitHub アカウントと WordPress.org プロフィールを関連付けているユーザーであれば誰でも機能します。https://profiles.wordpress.org/$slack_id を使用して Slack ユーザー名を WordPress.org ユーザー名に変換する同様の方法もあります。Slack ID は Slack ユーザーの詳細 (クリックしてアバター > プロフィールをすべて表示 > もっと見る[…] > ID をコピー) から取得します。

原文 / 日本語訳

最終更新日: