作業フローを簡素化：miniwebtoolを検索。
追加
ホームページ > ウェブマスターツール > CSS Flexbox プレイグラウンド
 

CSS Flexbox プレイグラウンド

リアルタイムのビジュアルプレビュー、アイテムごとのコントロール、実用的なレイアウトプリセット（ホーリーグレイル、カードグリッド、ナビゲーションバー、モーダル）、およびワンクリック CSS エクスポートを備えたインタラクティブな CSS Flexbox プレイグラウンドです。リアルタイムで実験しながら、flex-direction、justify-content、align-items、gap などを学びましょう。

CSS Flexbox プレイグラウンド
⚡ クイックスタートレイアウト （クリックして読み込み）
▦ ライブプレビュー
→ 主軸 (main axis) ↓ 交差軸 (cross axis) 0 個のアイテム ヒント: アイテムをクリックして編集
⚙ コンテナ (.flex-container)
flex-direction ?
flex-wrap ?
justify-content ?
align-items ?
align-content ?
gap 8px
8px
✦ 選択したアイテム (.flex-item)
プレビュー内のアイテムをクリックしてプロパティを編集します。
📖 クイック・チートシート — 一般的なパターン
▼
やりたいことこれを使う
1つのアイテムを完全に中央揃えにするjustify-content: center; align-items: center
均等な幅のカラムを作る各アイテムに flex: 1
1つのアイテムを右側に寄せるそのアイテムに margin-left: auto
小さな画面でカードを折り返すflex-wrap: wrap + flex: 1 1 240px
モバイルで順序を逆にするメディアクエリ内で flex-direction: row-reverse
ビューポート下部にフッターを固定するbody: display: flex; flex-direction: column; min-height: 100vh
アイテム間に均等なスペースを作るjustify-content: space-between
アイテムを縮小させないアイテムに flex-shrink: 0
生成された CSS

    


    

      

        
生成された HTML

        
      

      

    

  






 
Embed CSS Flexbox プレイグラウンド Widget
 
  
  
  
 
    
 
 
  
 
 
  





 
 
CSS Flexbox プレイグラウンド 
 


CSS Flexbox プレイグラウンドは、現代的な CSS Flexible Box Layout モジュールのためのインタラクティブな学習環境およびコードジェネレーターです。コンテナのプロパティ（flex-direction、justify-content、align-items、gap）やアイテムごとのプロパティ（flex-grow、flex-shrink、flex-basis、align-self、order）を調整し、レイアウトがリアルタイムで更新されるのを確認できます。気に入ったものができたら、すぐに貼り付けられる CSS と HTML をプロジェクトに直接コピーしてください。



CSS Flexboxとは何ですか？


CSS Flexbox（Flexible Box Layout）は、単一の軸（行または列）に沿ってスペースを分配し、コンテナ内のアイテムを整列させるために設計された1次元レイアウトモデルです。ナビゲーションバー、カードの行、中央揃えのコンテンツ、および要素をコンテナに合わせて自然に伸縮させる必要があるUIにおいて、floatやinline-blockハックなどの古い手法に代わるものです。2次元である CSS Grid とは異なり、Flexbox は一度に1つの方向の配置のみを制御するシンプルな配置に優れています。



このプレイグラウンドの使い方


    
  
  1. プリセットを選択する（任意）： Holy Grail、Card Grid、Navbar、Hero、Modal、または Sticky Footer を選択して、実際の開始点を読み込みます。各プリセットは、学習や修正が可能な完成されたレイアウトです。
    2. 
  
  2. コンテナのプロパティを調整する： 右パネルのセグメントコントロールを使用して、flex-direction、flex-wrap、justify-content、align-items、align-content、および gap を設定します。ビジュアルステージがすぐに更新されます。
    3. 
  
  3. 個々のアイテムを編集する： プレビュー内のアイテムをクリックして選択します。そのアイテムの order、flex-grow、flex-shrink、flex-basis、および align-self を他のアイテムとは独立して上書きします。上書きされたアイテムには小さなバッジが表示されます。
    4. 
  
  4. アイテムを追加または削除する： 「アイテムを追加」と「選択したアイテムを削除」を使用してアイテム数を変更し、レイアウトがどのように反応するかを確認します。
    5. 
  
  5. コードをコピーする： 下部の「生成されたコード」セクションには、常に現在のレイアウトが反映されます。ワンクリックで CSS、HTML、またはその両方をコピーできます。
    6. 




コンテナプロパティ リファレンス


フレックスコンテナは display: flex を持つ親要素です。これらのプロパティは、すべての子要素がどのように動作するかを制御します。






  
    
プロパティ値効果

  
  
    

      flex-direction
      row · row-reverse · column · column-reverse
      主軸の方向を設定します。row はアイテムを左から右に配置し（デフォルト）、column は垂直に積み上げます。
    

    

      flex-wrap
      nowrap · wrap · wrap-reverse
      スペースがなくなったときに、アイテムを1行に収めるか複数行に折り返すかを制御します。
    

    

      justify-content
      flex-start · center · flex-end · space-between · space-around · space-evenly
      主軸に沿ってアイテムを整列させます。空きスペースを側面やアイテム間に分配します。
    

    

      align-items
      stretch · flex-start · center · flex-end · baseline
      交差軸（主軸に垂直な軸）に沿ってアイテムを整列させます。
    

    

      align-content
      stretch · flex-start · center · flex-end · space-between · space-around
      折り返された行を交差軸に沿って整列させます。アイテムが複数行に折り返された場合にのみ効果があります。
    

    

      gap
      長さ（例：8px, 1rem）
      フレックスアイテム間の溝（ギャップ）を設定します。古い margin ベースの間隔パターンの代わりとなります。
    

  






アイテムプロパティ リファレンス


これらのプロパティは個々のフレックスアイテム（フレックスコンテナの子要素）に適用され、そのアイテムのコンテナのデフォルト設定を上書きします。






  
    
プロパティ値効果

  
  
    

      order
      整数（デフォルト 0）
      HTMLを変更せずにアイテムを視覚的に並べ替えます。数値が小さいほど先にレンダリングされ、負の値はアイテムを開始位置に移動させます。
    

    

      flex-grow
      数値（デフォルト 0）
      コンテナの空きスペースを兄弟要素と比較してどれだけ吸収するかを定義します。すべてのアイテムに 1 を設定すると、スペースが均等に分割されます。
    

    

      flex-shrink
      数値（デフォルト 1）
      十分なスペースがないときにアイテムがどれだけ縮小できるかを定義します。0 は決して縮小しないことを意味し、アイテムは宣言されたサイズを維持します。
    

    

      flex-basis
      auto · 長さ · パーセンテージ
      空きスペースが分配される前のアイテムの初期サイズを設定します。実質的にアイテムの「理想的な」主軸サイズを設定します。
    

    

      align-self
      auto · align-itemsと同じ値
      単一のアイテムに対してコンテナの align-items を上書きします。
    

  






justify-content と align-items の違いは何ですか？


justify-content は 主軸 に沿った整列を制御し、align-items は 交差軸 に沿った整列を制御します。主軸は flex-direction が設定する方向（row の場合は水平、column の場合は垂直）です。flex-direction を row から column に変更すると、2つの軸が入れ替わるため、justify-content が垂直方向、align-items が水平方向になります。この入れ替えは、Flexbox を学ぶ際に最も混乱しやすいポイントの1つです。プレビューの下にあるプレイグラウンドの軸インジケーターは、これを視覚的に理解するのに役立ちます。



Flexbox で要素を中央に配置するにはどうすればよいですか？


単一の要素を水平方向と垂直方向の両方で中央に配置するには：



3つのステップ：

display: flex;

justify-content: center;  /* 水平方向 */

align-items: center;  /* 垂直方向 */



これは、margin: auto、transform: translate(-50%, -50%)、または position: absolute を伴う古い中央揃えハックに代わる現代的な方法です。プレイグラウンドで Modal Center プリセットを選択して試してみてください。



実用的なレイアウトプリセットの解説



Holy Grail Layout（聖杯レイアウト）


ヘッダーとフッターがあり、左サイドバー、メインコンテンツ、右サイドバーという伝統的な3カラムのページレイアウトです。歴史的に float で構築するのは非常に困難でしたが、Flexbox を使えば簡単です。中央のカラムに flex: 1 を使用することで、サイドカラムが宣言された幅を維持したまま、残りのすべての水平スペースを吸収します。



Card Grid（カードグリッド）


ビューポートが狭くなるにつれて新しい行に流れる、折り返しのあるカードの行です。flex-wrap: wrap を使用し、各カードに flex: 1 1 240px を設定します。これは、カードが伸縮するものの 240px より狭くならないことを意味します。



Navbar（ナビゲーションバー）


左側にロゴ、右側にリンクがある水平方向のナビゲーションバーです。コツは、ロゴとリンクグループを2つの子要素として justify-content: space-between を設定し、さらにリンク自体にも内部的なフレックスコンテナを使用することです。



Hero Section（ヒーローセクション）


コンテンツを水平・垂直の両方で中央に配置した垂直スタックで、ランディングページのヒーローエリアに最適です。高さのあるコンテナに flex-direction: column、justify-content: center、および align-items: center を使用します。



Modal Center（モーダル中央）


オーバーレイ内で完全に中央に配置されたモーダルダイアログです。上記の3ステップの中央揃えレシピを、フルスクリーンのオーバーレイコンテナに適用したものです。



Sticky Footer（スティッキーフッター）


コンテンツが少ないときはビューポートの最下部にあり、コンテンツが長いときは押し下げられるフッターです。body に display: flex; flex-direction: column; min-height: 100vh を、メインコンテンツに flex: 1 を設定することで実現します。



flex-grow、flex-shrink、flex-basis の違いは何ですか？


これら3つのプロパティ（ショートハンド flex で組み合わされます）は、アイテムがスペースをどのように処理するかを記述します。



ショートハンドの flex: 1 は flex: 1 1 0% に展開されます。これは、均等な成長、均等な縮小、ゼロベースを意味し、コンテンツに関係なくすべてのアイテムがコンテナを均等に分け合うことになります。flex: auto は flex: 1 1 auto に展開され、コンテンツのサイズをベースとして尊重します。



Flexbox と Grid はいつ使い分けるべきですか？


アイテムが単一の方向（ボタンの行、ナビバー、カードの単一のカラム）に流れる 1次元 レイアウトには Flexbox を使用してください。Flexbox はコンテンツを認識し、アイテムに自身のサイズを決めさせたい場合に適しています。


行と列の両方を同時に制御する必要がある 2次元 レイアウト（フルページレイアウト、画像ギャラリー、ダッシュボード）には CSS Grid を使用してください。Grid はレイアウトを認識し、名前付きのトラックにアイテムを配置できます。


この2つは補完的なものであり、競合するものではありません。多くの実際のデザインでは、Grid ページレイアウトの中に Flexbox のナビバーやカードの行を組み合わせるなど、両方を組み合わせています。



Flexbox マスターのためのヒント




ブラウザのサポートと互換性


CSS Flexbox は、Chrome、Firefox、Safari、Edge、およびすべての主要なモバイルブラウザを含む、あらゆるモダンブラウザでサポートされています。フレックスコンテナの gap プロパティは2021年に主要ブラウザで普遍的なサポートに達しました。古いレガシーブラウザ（IE10/11）ではベンダープレフィックスが必要であり、いくつかの既知のバグがあります。それらのユーザー向けには flexbugs を参照してください。



よくある質問



フレックスアイテムがコンテナからはみ出すのはなぜですか？


フレックスアイテムには、コンテンツに基づく暗黙の min-width: auto があります。長い単語、コードブロック、または整形済みテキストにより、アイテムがコンテナよりも広くなることがあります。これを修正するには、アイテムに min-width: 0（カラムレイアウトの場合は min-height: 0）を設定します。



space-between、space-around、space-evenly の違いは何ですか？


space-between は両端にスペースを置かず、アイテム間に等間隔のスペースを置きます。space-around は両端に半分のギャップ、アイテム間にフルギャップを置きます。space-evenly は両端とアイテム間に完全に等間隔のスペースを置きます。プレイグラウンドで切り替えて違いを確認してください。



Flex プロパティをアニメーション化できますか？


はい。flex-grow、flex-shrink、flex-basis、order、および gap は遷移（transition）させることができます。flex-direction、justify-content、および align-items は離散的な列挙プロパティであるため、アニメーションはサポートされていません。



プレイグラウンドはオフラインで動作しますか？


すべての Flexbox 計算は、ネイティブ CSS を使用してブラウザ内で実行されます。ページが読み込まれた後は、API コールやサーバー側の計算がないため、インターネット接続なしでプレイグラウンドを使用できます。



生成されたコードは本番環境で使用できますか？


はい。エクスポートされた CSS は、すべての最新ブラウザでサポートされている標準プロパティを使用しています。HTML はセマンティックなクラス名（flex-container、flex-item）を使用しており、プロジェクトの規則に合わせて変更することも可能です。



追加リソース



 
                          
このコンテンツ、ページ、またはツールを引用する場合は、次のようにしてください：
"CSS Flexbox プレイグラウンド"（https://MiniWebtool.com/ja/css-flexbox-プレイグラウンド/） MiniWebtool からの引用、https://MiniWebtool.com/ 

miniwebtool チームによる。更新日: 2026年4月25日

 
 
 
                          
    
 
その他の関連ツール:
 
 
カラースキームジェネレーター
CSS整形ツール新しい
CSSコンプレッサー
CSS Grid生成ツール新しい
グラデーションジェネレーター
htmlコンプレッサー
SCSSからCSSへのコンパイラー新しい
SVGからReact/JSXへの変換器新しい
 
  
 
 
 
 
  
 
 
  
 
 
 
  
    
 
 
ウェブマスターツール:


 
 
  
 
 
 
   
 
   
おすすめ:

            
標準偏差電卓 - 高精度パーセンテージ減少電卓InstagramユーザーID検索パーセント増加電卓ランダムカラージェネレーター弧長電卓筆算割り算電卓war電卓シグマ記法電卓 総和パーセント誤差電卓画像分割ツール円錐展開図テンプレートジェネレーターMACアドレス検索平方完成電卓合計電卓動画を結合HEX電卓フィートとインチからセンチメートルへのコンバーターランダム誕生日ジェネレーター中央値電卓英単語ランダム生成ツールランダム名前ジェネレーター番号を並べ替える対数電卓ai句読点追加FPSコンバーターCAGR電卓売上総利益率電卓動画を逆再生ボウリングスコア計算機バイナリ電卓YouTubeチャンネル統計逆テキスト手数料電卓分散電卓 高精度MP3ルーパー楕円円周電卓ランダムトーナメント表作成ツール関数電卓不可視文字除去ツール相対標準偏差電卓t検定電卓太陽・月・上昇星座電卓 🌞🌙✨動画を回転圧力電卓エンジェルナンバー電卓マン・ホイットニーのU検定計算機血糖値コンバータークロスワードパズルメーカーランダム超能力ジェネレーターランダム絵文字ジェネレーター平方根電卓HEXコンバーターセンチメートルからフィートとインチへのコンバーター変化率電卓ランダム日付ジェネレーター階段電卓ASCIIコード表ヘロンの公式計算機ランダム時刻ジェネレーターモジュロ電卓加速度電卓SRT 時間シフト 電卓log-base-2電卓ビンゴカードジェネレーター私のIPアドレスは何ですかレンズの式計算機小数時間から普通の時間へのコンバーター土星回帰電卓文字数による改行ビデオ速度を調整ボルト締付トルク計算機相関係数計算機桁数電卓上下反転テキストジェネレーター変動係数電卓指数電卓-高精度XMLバリデーター平均寿命電卓配当利回り電卓画像回転ツール比率電卓迷路ジェネレーターランダム名ピッカー正多角形電卓fena電卓VTTからtxtへのコンバーターデシベル (dB) 電卓並列抵抗電卓ピタゴラスの定理電卓斜辺電卓労働時間計算ツール動画から画像抽出ツール💧 露点電卓オーディオ スプリッター外れ値電卓割り切れるテスト電卓スペースを削除するTikTok収益計算ツール平均電卓-高精度水星逆行カレンダーBUN対クレアチニン比電卓🔊 トーンジェネレーター10進数からBCDへのコンバーター🖱️ クリックカウンターワードサーチパズルジェネレーター積分電卓複数分数電卓SRTからTXTへの変換ツールじゃんけんジェネレーターオンライン句読点削除ツール👙 ブラサイズ電卓周波数波長変換ツールアナグラム生成器グレイコード・バイナリ変換電卓行番号を追加テキストリピートパスワード強度テスター分数電卓太陽位置計算機点つなぎジェネレーター年の日電卓 - 今日は今年の何日目タンジェント電卓マスターナンバー電卓表面積電卓幾何平均電卓ANC電卓空の行を削除する筆算足し算・引き算計算機3d距離電卓CRC32チェックサム電卓平方和の計算ビデオをループ再生標準誤差電卓水泳ペース計算機オンラインメモ帳夏至の日二乗平均平方根電卓Twitch収益計算ツールヒストグラムメーカー化学反応式バランサー数字抽出ツール概算電卓絶対値電卓OPS電卓三角関数グラフ作成ツールFIP電卓ヘッドライト照射距離電卓パーソナリティ・ナンバー電卓配管流量電卓eの最初のn桁hba1c電卓ランダム国ジェネレーター熱伝達計算機熱膨張計算機CMYKからHEXへの変換ツールジニ係数電卓ランダムトランプカードジェネレーター角速度計算機論理ゲートシミュレーターHTMLからテキストコンバータスリザーリンクパズルジェネレーター梁の電卓長方形の電卓CPM 電卓FacebookユーザーID検索GIFメーカー小文字生成器 ⁽ᶜᵒᵖʸ ⁿ ᵖᵃˢᵗᵉ⁾比率電卓筆算かけ算計算機中間日計算機1マイルウォークテストロックポート電卓ベーカーズパーセント電卓ランダム俳句ジェネレーター四分位範囲電卓素数のリスト16進数からCMYKへの変換ツールパーセント成長率電卓営業利益率電卓階乗電卓SHA256 ハッシュジェネレーターランダムピッカー二重積分電卓文化別年齢電卓番号をランダム化する自己資本比率計算通常の時間から小数の時間へのコンバーターCohen's d 電卓IPアドレスから16進数への変換YouTubeショート収益化計算ツールランダム座標ジェネレーターランダム算数問題ジェネレーター多項式展開電卓血液型計算機2進数から10進数へのコンバーターランダムクレジットカードジェネレーター多項式の筆算計算機自然対数電卓身長パーセンタイル電卓音節カウンター土地ローン計算機建設ローン計算機金利のみ住宅ローン計算機バルーンローン計算機住宅ローンポイント計算機PMI電卓隔週住宅ローン返済額計算機ARM住宅ローン電卓VAローン計算機給与手取り計算機AI SQLクエリジェネレーターAI正規表現ジェネレーターAIデータ可視化ツールCSV貼り付けAIテキストトーン分析ツールAI履歴書アナライザーAI単位変換ツール自然言語AI謝罪文ジェネレーターAI 丁寧なお断り文ジェネレーターAI旅行日程ジェネレーターAI読書リストジェネレーターAIワークアウトプランジェネレーターAI献立ジェネレーターAIギフトアイデアジェネレーターAIレシピジェネレーター食材から奨学金ROI電卓大学費用計算機言語学習 流暢になるまでの学習時間電卓単語クイズ作成ツールコーネルノート作成ツール学習曲線電卓フラッシュカード間隔反復スケジューラーペイント色混合計算機タイル目地計算機食洗機の積み込み最適化ツール洗剤の使用量計算ヘアカラー混合計算機印刷コスト計算機ガス vs 電気 コスト比較電卓ギフトカードチップ電卓引っ越し用ダンボール数計算機ストレージユニットサイズ計算機カプセルワードローブ計算機ベルト長さ計算機油圧シリンダー推力計算機滑車システム計算機ギア比計算機機械比熱計算機ベルヌーイの式計算機レイノルズ数計算機潮汐時刻計算機星空観測条件計算機結び方リファレンスツール寝袋温度評価ガイドテントフットプリントサイズ電卓バックパッキング食料重量電卓ネイスミス式ハイキングペース電卓刺繍糸長さ電卓レジンキャスト量計算電卓ビーズパターン電卓陶芸粘土収縮率電卓折り紙用紙サイズ電卓キルトバインディング電卓クロスステッチ刺繍糸計算編み物パターン計算機編み針サイズ変換器かぎ針サイズ変換器馬の干し草計算ツールペット航空輸送クレートサイズ検索爬虫類飼育UVBライト距離計算機鳥かごサイズ計算機水槽ヒーターワット数電卓猫のトイレ数計算機エンジン圧縮比計算機タイヤ溝摩耗計算機トレーラー牽引荷重計算機車両重量配分計算機旅行費用割り勘計算停止距離計算機労災補償計算機遺産配分電卓商標区分検索ツール特許出願料電卓売上税ネクサスチェッカー刑期短縮計算機時効計算機Airbnb料金最適化ツールルームメイト家賃分割計算機セクション8 家賃電卓BRRRR法計算機キャッシュオンキャッシュリターン計算機賃貸利回り計算機1031エクスチェンジ計算機資産成長ビジュアライザーランチ代計算機ジム vs 自宅トレーニング費用電卓コーヒー代計算機リモートワーク節約計算機副業ROI電卓サブスクリプション費用トラッカーSaaS料金計算ツールフリーランスプロジェクト料金計算機スモークウッド・ペアリングガイド発酵時間計算機マリネ時間計算機食事制限レシピフィルタースパイス代用品ファインダーカフェイン半減期トラッカー標準ドリンク計算ツールワインペアリング提案ツールクライミンググレード変換器自転車ギア比計算機釣り結び強度計算機ヨガポーズホールドタイマー水泳SWOLF電卓レースタイム予測計算機ボクシングパンチ力計算機ラグビー得点電卓クリケット・ランレート電卓サッカーxg期待ゴール電卓テニススコアトラッカーWellsスコア電卓 (DVT/PE)グラスゴー・コーマ・スケール計算機アプガースコア計算機FFMI 電卓クーパー12分間走計算ツール除脂肪体重から筋力計算炭水化物インスリン比計算機インスリン感受性係数計算機ヘブライ暦変換器ヒジュラ暦変換器旧暦変換ツールどれくらい前計算機あと何日カウントダウン電卓日付パターンジェネレーター日付に営業日を追加営業日計算機単語頻度アナライザー文の長さばらつき分析ツールヘミングウェイ風リーダビリティエディタ発音IPA変換ツールヴィジュネル暗号ツールアトバッシュ暗号ツールROT13エンコーダー・デコーダーEXIFデータビューア・削除ツールピッグラテン翻訳機バックロニム ジェネレーター頭字語ジェネレーターパングラムチェッカーリポグラム チェッカー画像からSVGトレーサー画像からASCIIアートへの変換器JSONスキーマジェネレーターTypeScriptプレイグラウンドLessからCSSへのコンパイラーSCSSからCSSへのコンパイラーSVGからReact/JSXへの変換器クエリ文字列ビルダーURLパーサーUUID検証・デコーダーHTTPステータスコードリファレンスcURLコマンドビルダーシェルピンスキーの三角形ジェネレーター3D曲面プロッター極方程式プロッタージュリア集合生成器マンデルブロ集合エクスプローラーL-Systemフラクタルジェネレータードロネー三角形分割ジェネレーターボロノイ図ジェネレータースピログラフジェネレーターテッセレーションジェネレーターシックスシグマ工程能力計算機パレート図ジェネレーターNPSネットプロモータースコア計算機コホート維持率電卓解約率計算機顧客獲得コストCAC計算機顧客生涯価値CLV電卓コンバージョン率電卓A/Bテスト サンプルサイズ電卓A/Bテスト有意性電卓導線の磁場電卓電場計算機クーロンの法則電卓スネルの法則計算機慣性モーメント計算機求心力計算機振り子周期電卓ばね定数電卓ドップラー効果電卓ソルティノレシオ電卓トレイナー・レシオ電卓株式ベータ計算機インフレ連動米国債TIPS電卓住宅ローン リキャスト 電卓フォワードレート電卓債券デュレーション電卓 マコーレーと修正債券コンベクシティ電卓インデックス連動年金電卓変額年金電卓リバースモーゲージ電卓年金支払い計算機そろばんシミュレーターロシア農民式乗算ヴェーダ数学トリック電卓古代エジプト式乗算電卓ローマ数字計算ソルバー暗算トレーナー九九クイズ繰り上がりと繰り下がりビジュアライザー数の合成と分解生成ツール硬貨文章題ソルバー距離・速さ・時間の三角形電卓仕事算ソルバー混合問題ソルバー年齢文章題ソルバー列車出会い問題ソルバー水分補給計算機ペース カロリー電卓薬剤投与量計算機アルコールカロリー電卓ボディリコンポジション電卓ランダム討論トピックジェネレーターランダムな猫犬の名前ジェネレーターyoutubeサムネイルダウンローダーyoutube収益見積もりツールランダムRPGキャラクタージェネレーター