WordPress のプラグイン「Coverpeek」を wordpress.org で公開するまでの連載の番外編、その3です。
今回は自分のサイトにプラグインの紹介ページを作った話です。
Coverpeek を wordpress.org で公開するまでの連載は↓こちらから始まります。
wordpress.org の詳細ページは readme の決まった形式でしか書けないので、見せ方を工夫できる紹介ページを自分のサイトに用意しました。
一番こだわったのは「主な機能」です。
「ここが使いたい理由になる」と思った機能だけを選んで見せることにしました。
紹介ページはこちらです。
wordpress.org の詳細ページでは、見せ方を工夫できない
wordpress.org のプラグインの詳細ページは、プラグインに入れる readme.txt の中身がそのまま表示されます。
翻訳が承認されたので、日本語版のページでは日本語で読めるようになりました。
内容としては必要なことを全部書いているのですが、見た目は見出しと箇条書きがひたすら続く形になります。
readme で使えるのは見出し・箇条書き・リンクくらいで、レイアウトまでは変えられません。
想定している読者はWordPress を使っている人です。
日々ブログを書いている人だったり、Web 制作会社の人だったり。
そういう人が「このプラグイン、自分に必要かな？」と判断するには、文字の羅列だけだと少し重いと感じました。
自分のサイトならセクションごとに視覚的にまとめられます。
プラグイン使用者がわかりやすいように、紹介ページを別に作ることにしました。
紹介ページの全体の流れ
ページは上から次の順に並べています。
- ライブプレビューを模した画面と、ひと言の説明
- 自動でサムネイルが付くまでの3ステップ
- 主な機能
- 画面イメージ（スクリーンショット）
- 動作要件・導入方法
- よくある質問
冒頭には設定画面のライブプレビューを模した画面を置きました。
タイトルを入れると画像になり、そのままサムネイルに設定される、という流れが最初に目に入るようにしています。
その下に自動でサムネイルが付くまでを3ステップで並べました。
wordpress.org では公開してから検索に反映されるまで6〜14日ほどかかるそうで、そのあいだに来てくれた人が迷わないようにしたかったので、導入方法には「公開直後は管理画面の検索に出てこないことがある」ことと、その場合の入れ方も書いています。
「主な機能」を見せる工夫
「主な機能」部分は特に見やすさにこだわりました。
最初の readme の画像と比べるとずいぶん印象が違うと思います。
機能は「使いたい理由」になるものだけ
readme には細かい挙動まで含めて機能をすべて書いています。
紹介ページではそれを全部並べることはしませんでした。
選んだ基準は重要な機能かどうか、そして 「ここが使いたい理由になる」と思えるかどうか です。
そうして残ったのが次の6つでした。
- ライブプレビュー
- 背景は5種類＋自由にアップロード
- 日本語対応・細かなテキスト設定
- 投稿・固定ページ・カスタム投稿タイプ
- 「自動」バッジで見分けられる
- OGP タグの出力（任意）
細かい仕様（どのタイミングで画像が作り直されるか、など）は、よくある質問や readme に任せています。
見出しは、使う人から見た言い方に
カードの見出しは機能の名前ではなく、使う人から見てどう便利かがわかる言い方にしました。
たとえば、メディアライブラリで自動生成した画像に印を付ける機能は「『自動』バッジで見分けられる」。
背景の機能は「背景は5種類＋自由にアップロード」です。
読み手が「自分のサイトで使ったらどうなるか」を想像しやすい言葉を選ぶようにしました。
安心材料は、カードとは分けてまとめる
カードの下にはチェックマーク付きで3つの項目を並べています。
- 画像の生成は、保存したときの1回だけ。ページの表示速度には影響しません。
- 手動で設定した画像は、上書きも削除もしません。
- PHP の GD 拡張が使えない環境では、管理画面に通知を出して生成だけをスキップします（サイトは壊れません）。
これは、自分の中ではメインの機能に付いてくるオプションのような位置づけです。
機能として並べるほどではないけれど、導入する前に気になりそうなこと。
なので、カードとは分けて、短くまとめて見せることにしました。
公開前に URL を決めておいた
紹介ページの URL はプラグインを公開する前に決めました。
プラグインのメインファイルのヘッダーにある Plugin URI に書く URL だからです。
公開してから変えるとリダイレクトが必要になります。
構成は2階層にしています。
/products/：プロダクトの一覧/products/coverpeek/：Coverpeek の紹介ページ
サイトのメニューには一覧のほうへのリンクを1つだけ足しました。
今後プラグインが増えても一覧に追加していくだけで済みます。
…と言いつつ、実はこのあとプラグインの名前を変えることになり、旧 URL からの301リダイレクトを設定することになりました。
名前は最初に決めておくべき、というのは第1回で書いたとおりです…。
今後は動画も入れたい
今のページは画像と文章だけで見せています。
本当はここに動画を入れたいと思っています。
管理画面で実際に動かしている様子や、設定を変えるとプレビューがその場で変わる様子は、静止画だとどうしても伝わりにくいです。
動画が用意できたら紹介ページに追加するつもりです。
まとめ
readme は機能を漏れなく書いておく場所。
自分のサイトの紹介ページは「使いたい理由」を伝える場所。
役割を分けて考えると、何を載せて何を省くかを決めやすくなりました。
プラグインを公開している方はreadme とは別に、見せ方を自由に工夫できる紹介ページを作ってみるのもよいかと。
Coverpeek はこちらから入れられます。
- 紹介ページ: Coverpeek｜rcwas
- wordpress.org: Coverpeek – Auto Thumbnails with Live Preview
