ウェブサービス ／ 有料記事・投稿プラットフォーム
write-hub
値札の内訳を開いて、
続きを買う場所。
架空の運営会社を題材にした、有料記事の投稿プラットフォームです。新聞の編集台を思わせる墨と原稿用紙の升目で組み、売れ筋の番付、購入のたびに開ける手数料の内訳、有料ラインを動かすエディタを軸に、読者の購入から書き手の売上と出金、紹介リンクの報酬までを一つのデモにまとめました。
作品を開く架空の運営会社を題材にした自主制作です。決済・通知は模擬で、実際の課金や送金は行いません。
買う前にも、書く前にも、
お金の行き先が見える。
買うかどうかを読む前に決められるよう、無料で読める範囲と残りの文字数、価格を購入のレールにまとめました。値札を押すと、決済事務手数料、プラットフォーム利用料、紹介報酬を引いたあとの書き手の受取までが開きます。有料部分の本文は、購入するまで画面へ送りません。
同じ内訳を、書く側の画面にも出しました。エディタで価格のスライダーを動かすと、手数料が削られていく様子がその場で変わります。立場は読者・書き手・紹介者・運営から選べます。
新聞紙の灰に、
墨だけで組む。
地は新聞紙のような灰、文字は墨の一色で、記事の面だけを白にしました。見出しと本文は明朝体で、有料の値札は黒地に白抜きの反転で目立たせています。ヘッダーは原稿用紙の升目で、ロゴもナビも1字ずつ升に入れ、いまいる場所を校正の丸囲みで示します。
トップは累計1位の大きなカードと、右に今週の枠と2位以下の番付です。今週の枠は、この体験の中の直近7日の購入だけを数えます。順位の棒は購入数の割合の長さで伸びます。有料の境目は、記事の面を切り取る破線の「切り取り線」にしました。
スクロールで棒が伸び、
有料ラインを動かして手取りを見る。
番付の棒、見出しのにじみ、切り取り線を進むはさみは、CSSのスクロール連動アニメーションだけで動かし、JavaScriptは使っていません。非対応のブラウザでは、最終の形の静的な表示になります。値札の内訳はPopoverとAnchor Positioningで値札のすぐ下に開き、画面の端でも枠の内側に収まるよう開く向きを替えます。
エディタは3つの窓で、左に記事、中央に本文、右に値付けです。本文の「ここから先は有料エリア」の帯を持ち手でドラッグするか「上へ」「下へ」で動かすと、無料と有料の文字数が数え直されます。右の滝のグラフは、価格のスライダーに合わせて手取りまで更新されます。購入はモーダルを開かず、購入レールが「確認・支払い・完了」の順に変わります。決済・通知は模擬で、実際の課金や送金は行いません。
小さな画面では、
升目を詰めて縦に積む。
スマートフォンでは、升目のヘッダーを2段に詰め、ナビは横に送れる1列にします。見出しの下に番付を縦に積み、購入のレールは画面の下へ移ります。
制作情報
- 種別
- 自主制作・架空サービス
- 制作範囲
- 企画・設計・デザイン・実装
- 使用技術
- TypeScript / Vite
Node.js / SQLite - 対応画面
- PC・タブレット・スマートフォン
