HTMLを書かずに作品ページを飾る「P-Player」｜見ながら作って、1ボタンでコピー
紹介した作品: ProtoPediaレイアウトエディタ"P-Player" ~記事を書くのが楽しくなる！~
ProtoPedia の作品「ProtoPediaレイアウトエディタ"P-Player"」を2人のMCが初心者目線で紹介。ProtoPedia の作品紹介ページを、見本を見ながら部品を並べて作り、「HTMLをコピー」1ボタンで貼り付けられる無料のレイアウト編集ツールです。記事テーマや20種類以上の見出し、表・Q&A・Before/After・吹き出しなどの部品、ブラウザだけで動く仕組み、そして「レイアウトを褒められた」ことから公開された作者の思いまで。
チャプター
0:00オープニング0:20作品ページを、見ながら組み立てる1:02作ったのに、紹介ページが地味2:10左は設定、右は仕上がりの見本4:07ブラウザの中だけで完結5:01褒められたのがきっかけで、公開5:57今日できる最小の一歩6:34エンディング
文字起こし(58行)
- BANNO
- ゆっくりばんのです。
- HIGEDARUMA
- ゆっくりひげだるまです。
- BANNO
- 今日もProtoPediaから、とびきり面白い作品を紹介していきますよ。
- HIGEDARUMA
- 今日紹介するのは、ProtoPediaレイアウトエディタ"P-Player" ~記事を書くのが楽しくなる！~。
- BANNO
- P-Player。レイアウトエディタって、何を編集する道具なんですか？
- HIGEDARUMA
- ProtoPediaの作品ページを、見栄えよく整えるための道具なんです。
- HIGEDARUMA
- 色のついた見出しや表、吹き出しまで、見本を見ながら並べて作れるんですよ。
- BANNO
- 作品を作った人の、紹介ページづくりを助けてくれるんですね。
- BANNO
- でも、紹介ページを書くのって、そんなに大変なんでしょうか？
- BANNO
- 私なら、作品ができた時点で満足して、説明は文字だけになっちゃいそうです。
- HIGEDARUMA
- それ、作り手あるあるなんです。せっかく作ったのに、紹介ページが地味だと、良さが伝わりにくいんですよね。
- BANNO
- 見た目を凝りたいときは、どうするんですか？
- HIGEDARUMA
- ProtoPediaの記事は、Markdownという書き方が基本です。#記号を付けると見出しになる、といった簡単なルールなんです。
- HIGEDARUMA
- ただ、細かい色や配置まで凝ろうとすると、HTMLという、ウェブページの設計図を手で書くことになるんです。
- BANNO
- 設計図を手で！私には、ちょっと無理そうです。
- HIGEDARUMA
- 作者も、Markdownだと「細かい調整が難しかったり、思った通りの表示ができないことがある」と書いています。
- BANNO
- じゃあ、P-Playerを使うと、そこがどう変わるんですか？
- HIGEDARUMA
- HTMLを1行も書かずに、仕上がりを見ながら作れるんです。ワープロで文書を作る感覚に近いですね。
- BANNO
- 実際に、1ページ作る流れを教えてください。
- HIGEDARUMA
- ブラウザでP-Playerのページを開くと、左に設定、右に仕上がりの見本が並んでいます。
- HIGEDARUMA
- まず左で、記事テーマを選びます。「製作背景」「テック」「和・墨と朱」「パステルポップ」など、雰囲気の型がたくさんあるんです。
- BANNO
- 服の着せ替えみたいに、全体の雰囲気をまとめて変えられるんですね。
- HIGEDARUMA
- そうなんです。次に部品を足していきます。見出しのデザインだけで、20種類以上あるんですよ。
- BANNO
- 20種類以上！どんな見出しがあるんですか？
- HIGEDARUMA
- 黒板風、リボン、付箋、それに電子工作の回路みたいな見出しまであります。ProtoPediaらしいですよね。
- BANNO
- 見出し以外には、どんな部品があるんでしょうか？
- HIGEDARUMA
- 表に、質問と答えを並べるQ&A、作る前と後を比べるBefore/After、それにキャラクターがしゃべる吹き出しもあります。
- HIGEDARUMA
- 写真は1か所に4枚まで並べられますし、X(旧Twitter)に投稿した動画も、横に3つまで並べられるんです。
- BANNO
- 作品紹介に欲しい部品が、ひと通りそろっていますね。
- BANNO
- 文字は、どこに打つんですか？
- HIGEDARUMA
- 右の見本の上に、そのまま打ち込みます。文字を選べば、太字やマーカーも付けられるんです。
- BANNO
- できあがったら、どうやってProtoPediaに載せるんですか？
- HIGEDARUMA
- HTMLをコピー、というボタンを1回押すだけです。あとはProtoPediaの編集画面に貼り付ければ完成なんです。
- BANNO
- つまり、見ながら作って、コピーして、貼るだけ。設計図は書かなくていいんですね。
- HIGEDARUMA
- まさにそれです。設計図は、ボタンの裏でP-Playerが書いてくれるんですよ。
- BANNO
- 裏側は、どんな仕組みで動いているんですか？
- HIGEDARUMA
- 全部、ブラウザの中だけで動いているんです。ネットの向こうで動く専用のコンピューター、つまりサーバーを使っていないんですよ。
- BANNO
- それって、使う側にはどんないいことがあるんでしょうか？
- HIGEDARUMA
- インストール不要で、ページを開くだけで使えます。書いた内容も、自分のパソコンの中に自動で保存されるんですよ。
- BANNO
- 途中で閉じちゃっても、続きから書けるのはうれしいですね。私みたいなうっかり者には助かります。
- HIGEDARUMA
- もう書いてある記事のMarkdownを読み込んで、作り直すこともできます。表なら、表計算のCSVファイルから作れるんです。
- BANNO
- 前に書いた記事も、着せ替えできるんですね。お値段はどうなんですか？
- HIGEDARUMA
- 完全無料です。作者のクレジット表記もいらない、と書かれています。
- BANNO
- 作者さんは、どうしてこの道具を作ったんでしょうか？
- HIGEDARUMA
- 作ったのは、Yugi Tech Labさんです。もともとは、自分用に使っていた道具だったそうなんです。
- HIGEDARUMA
- ある日、コンテストに投稿した作品記事のレイアウトを褒められたのがきっかけで、機能を強くして公開したんです。
- BANNO
- 褒められた道具を、独り占めせずに、みんなに開いたんですね。
- HIGEDARUMA
- 作者は、お世話になっているProtoPediaの盛り上げに、少しでも貢献したい、とも書いています。
- BANNO
- 恩返しの作品なんですね。なんだか、あたたかい気持ちになります。
- HIGEDARUMA
- しかも、この作品のページの説明自体も、P-Playerで作られているんです。
- BANNO
- ええっ、本人が使ってお手本になっているんですか！説得力がありますね。
- HIGEDARUMA
- ヒーローズ・リーグ 2026にも出していて、公開してからも、どんどん更新が続いているんですよ。
- BANNO
- P-Playerのページは、概要欄に置いておきますね。
- BANNO
- では、今日の一歩。P-Playerを開いて、記事テーマを1つ選んでみてください。
- HIGEDARUMA
- そして、自分の作品の見出しを1つだけ作ってみる。それだけで、見た目が変わる楽しさが分かりますよ。
- BANNO
- 作品がまだない人は、好きな作品の紹介ページを、どう飾るか想像してみるのも楽しいですね。
- BANNO
- さて、今日紹介したのは、作品ページづくりを楽しくする、P-Playerでした。
- HIGEDARUMA
- 次回の作品でも、ゆっくりしていってね。
クレジット
あなたの作品も、動画で紹介します
ProtoPedia の作品ページの URL を送るだけで、夜のうちに紹介動画に仕上げます。対象は CC BY 4.0 の作品です。
動画をリクエストする