こんにちは、がずーでございます。
今日は、「初めて商品を真面目に作ってみた」と題して、「Booth」での商品取り扱い開始についてまとめてみたいと思います。
ということで早速、この度「Booth」で商品を販売することとしました!
何か手を付けてみたい人や、0から何かを作ってみたい人向けに、体験談を交えてまとめてみますので、読んでくだされば幸いです。
なぜ作ったのか
経験者の人は理解していただけるとは思いますが、配信前の下準備って意外と時間泥棒です。
テロップを毎回手で作るのは面倒だし、デザインを揃えるのも地味に難しい。
そこで「URLを1本OBSに貼るだけで整うデザイン」を何か作れないかと思い、作ってみたのが今回の商品です。
デカい壁「知識・技術がない」
まず前提として、私はイラストを描けるわけでもなければ、デザインに詳しいわけでもありません。そんな人が出来ることといえば…
- 物書きとしてシナリオや専門書を執筆する
- カスタムCSSコードを作成する
このくらいしか思い浮かびませんでした。
で、私自身に面白い経験があったかというとそういう訳ではないため、物書きというのも一旦検討から外しました…。
これで残ったのが、「カスタムCSSを作る」でした。
私自身、配信の経験があるので、配信画面のレイアウトの準備や必要なツールの確認などはある程度慣れています。その中で、DiscordのカスタムCSSの設定についてはちょっとだけ知識があったのでそのあたりで何か生かせないかな…と考えました。
CSSは結構いろいろと使われたりする
CSSというのは、ざっくりいうと「Webサイトのデザインやレイアウトを定義するための言語」です。配信者としての目線でいうと、コメント欄や時計表示、字幕などのレイアウトやデザインに密接に関係する要素といっても過言ではありません。
今となっては様々なツールが台頭してきたので直接CSSを打ち込んで使う人も減っているのかなとは思っていますが、それでもこだわりのある人や元々知識のある人はまだまだ使用頻度が高いのかなと思います。
そういう意味で、私の持ち合わせの知識でもまだ創作の余地がありそうなこのCSSデザインに手を付けてみることにしました。
せっかくHPがあるのだから
普通、カスタムCSSというのはそのCSSコードまたはHPリンクを渡すような形が主流化と思います。決まった形に整形済みのコードを渡すといった形。
配信者によっては画面レイアウトはかなりこだわるところ。もちろん、上記のようなテンプレートで済ます人も多いですが、やはり精巧な画面レイアウトは目を見張るものがあります。
そこで、今回は「テンプレート」というよりも、ある程度カスタム性がある形で提供できないかと考えて、以下のような仕組みとしました。
- テキストはもちろん、表示位置、文字サイズ、色などを自由に設定できる
- GUIを用意して、簡単に調整が出来る
- 様々な用途を想定した小物を作ってみる
ということで作成した商品がこちら。

簡単に言うと、ワンポイントの字幕素材といったところでしょうか。あまり派手にはせず、どのデザインでもある程度親和性のあるものになったかなと思います。
そして、特筆すべきは「GUIでの設定画面」を確立できたことです。

もちろん、CSSの知識がある程度ある方であればコードの該当の数値をいじればいいじゃんと思う方もいると思いますが、あくまでも直観的に設定しやすい・使いやすいものを目指したため、このような形での実装となりました。
これが一つできれば、いろいろなデザインへの応用も可能ですし、その先の展開にも幅を持てそうです。
おわりに
最終的に落ち着くところが「配信スターターセット」になるのか、「ニッチな要望に応えるパーツ販売」になるのか、「クリエイター様から発注を受けて作成・販売する」今のところ想定はしていません。ただあくまで主眼は「クリエイターの皆さまの軽減負担」というところからブレずに様々活動を続けていければなと思います。
クリエイター界隈から見るともしかすると需要の乏しいところからのスタートに見えるかもしれませんが、私自身としては0→1を本気で取り組んで達成した初めてのものになります。
ここからまた自分なりに試行錯誤していきたいです。
ということで、今回はここまで。引き続きどうぞよろしくお願いします💪