--- title: "デザインを詰める ― ひと晩65回の公開で、色を1つまで減らした" slug: how-to-finish-a-design date: 2026-10-23 day: 369 meta_description: "導入比較ガイドのデザインを、案出しから仕上げまでひと晩で詰めた記録。方向の違う案で土台を決め、全体を白黒で組み、1セクションずつ画面で見て直して公開した。色は最後に意味を1つ決めて戻した。" tags: [Webデザイン, デザインの進め方, LP, 差し色, タイポグラフィ, レイアウト, CTA, Astro, Claude Design, ffmpeg, Playwright] series: "ひとり研究所の裏側" cover: "/media/LOG369_cover.jpg" --- 学習用GPUを買うか借りるかを決めるための1ページ（導入比較ガイド、pixelstomotors.com/gpu-buy-or-rent）を、ひと晩で作りました。なぜ作ったか、誰に向けてどう並べたかは LOG368 に書きました。この記事は、そのページのデザインをどう進め、細部をどう詰めて仕上げたかの記録です。 最初に公開した版から最後の版まで、サイトへの公開は65回でした。翌朝、スマホで見直して、もう5回直しています。1回ずつの直しは小さく、「この行を2行に」「この数字をもっと強く」「この線はいらない」といったものです。ただ、65回分を並べると、デザインを詰めるときに何を見て、どの順に決めていったかが見えてきます。 **一番効いたのは、色を全部いったん外し、形と文字だけで組み終えてから、意味を1つ決めて色を戻したことでした。** 色が付いたまま形を直していると、色の強さに目を取られて、並べ方や文字の大きさの問題が見えにくくなります。 | 段階 | やったこと | 決め手 | |---|---|---| | 方向を決める | 最初の画面の案を、方向の違うものだけ並べた | 「見積書と利用明細を並べる」案。数字の差が一目で伝わる | | 土台を詰める | 最初の画面1枚だけを、写真の重ね方や濃さまで詰めた | 実機の写真を網点に加工し、切り抜いた写真を重ねる | | 全体に広げる | 土台に合わせて全体を組み、単調な所を組み替えた | セクションごとに並べ方を変える。色はいったん全部外す | | 1セクションずつ詰める | 画面写真に一言 → 直して公開 → 公開した画面で確かめる、を繰り返した | 読む人のノイズを消す。同じ形を並べない。数字を強く | | 色を戻す | 色の意味を1つに決め、その意味の場所にだけ入れた | 橙＝実際に払った分と、押してほしいボタン | | 最後の CTA | 背景違いの案で決まらず、考え方から出し直した | 「次は、あなたのロボットで。」と、橙のボタン1つ | | スマホの幅で詰める | 翌朝、iPhone で見て、PC の並べ方のまま残っていた所を直した | 縦1列で見る形に合わせる。見出しは言葉の切れ目で折る | 進め方はエイイチが決め、Claude が案を出して直し、公開して画面を確かめる、という分担でした。エイイチは公開されたページを見て、気になった所の画面写真に一言を添えて送ります。Claude はその場で直し、PCとスマホの幅で画面を撮って確かめてから公開します。 ここから下は作業ログです。段階ごとに、直したねらい、それで何が変わったか、どんな効果が見込めるかを添えました。効果は、アクセスの数字で確かめたものではありません。直した画面を見て、読む人の動きがこう変わるはずだ、という見込みです。 ## 作業ログ ― 案出しから仕上げまで ### 方向を決める：案は「並べ方」ではなく「方向」で分ける 最初の画面の案は、Claude のデザイン用のキャンバス（Claude Design）に並べて比べました。最初に出した案は、写真と見出しの置き方を少しずつ変えただけで、前に出した案とほとんど同じものでした。エイイチからは「前に見た案と変わらない」と指摘されました。 案を並べる意味は、方向の違うものを見比べて選ぶことにあります。置き方の違いだけでは、選ぶ材料になりません。出し直した案は、何を主役にするかで分けました。手元とGPUをつなぐ図、大きな数字、動きの時間軸、AIが見ている画像、の4つです。 【画像】LOG369_01_fv_four_ideas.png 最初の画面の4案。主役にするものを、図・数字・時間軸・AIの見ている画像で分けた 写真については、次の指示がありました。 - 生成AIで作った画像ではなく、実際の画像を使う - いくつか画像があるので、画像を変えて提案する - 写真はデザインで手を入れる。元の画像そのままで出さない - 書体も別のパターンを用意する（今のサイトと同じ書体の案も入れる） この中から選んだのが、見積書と利用明細を同じ大きさで並べる案です。左に買わなかったPCの見積書（打ち消し線の ¥750,000）、右に借りたGPUの利用明細（¥4,677）、間に「およそ1/160」を置きます。説明を読まなくても、2枚の書類の数字の差で話が伝わります。 - ねらい：最初の画面だけで、このページが何の話かを伝える - 変わったこと：置き方だけが違う案から、主役の違う4案になり、選ぶ材料ができた。選んだ案では、見積書と利用明細の金額の差が、説明を読む前に目に入る - 見込める効果：「買うより借りた方がずっと安かった」が最初の画面で伝われば、それが続きを読む理由になる ### 土台を詰める：最初の画面1枚だけを、先に仕上げる 全体を組む前に、最初の画面だけをキャンバスの上で詰めました。ここで決めたことが、ページ全体の基準になるからです。 | 詰めた所 | 直す前 | 直した後 | |---|---|---| | 書類の飾り | 見積書と利用明細の上に色の線 | 線をなくす | | 書類の大きさ | 2枚の大きさが違う | 同じ大きさ | | 背景の写真 | 写真をそのまま薄く敷く | 実機の写真を網点に加工し、アームだけを切り抜いた写真を同じ大きさで重ねる | | 写真の重ね方 | 写真が網点を隠す | 乗算で重ね、網点が少し透ける濃さ（不透明度82%）にする | | 背景の色 | ベージュ寄り | ベージュをやめる | | 色のトーン | 青と橙がくすむ | 2色の明るさと鮮やかさをそろえる | 網点（細かい点の集まり）の画像は、写真から Python で作りました。切り抜きは、写真の背景を自動で消す道具（rembg）を使っています。 - ねらい：最初の画面を、ページ全体の基準にする（写真の扱い・色の明るさ・書類の形） - 変わったこと：2枚の書類が同じ大きさになり、比べる2つとして読めるようになった。写真は網点と重なって、ページの白黒の調子になじんだ - 見込める効果：あとのセクションで迷ったときに、最初の画面に合わせればよくなる。全体を組むときの迷いと直しが減る ### 全体に広げる：単調、色が多い、で組み替えた この最初の画面を土台に全体を組むと、セクションがどれも「左に文、右に図」の同じ並べ方になりました。画面を上から下まで撮った画像が送られてきて、一言だけ添えてありました。 > 全体にレイアウトが単調 【画像】LOG369_02_colored_build.png 色を付けたまま全体を組んだ版。青と橙の2色で、セクションの並べ方が似ていた ここで次のように組み替えました。 - セクションごとに並べ方を変えた。左右に分ける、上下に積む、中央に寄せる、全幅の表、黒い帯 - 差し色を薄めた水色の背景をやめて、灰色にした - 英字と数字の書体を Manrope にした - 見出し・本文・注記の文字の大きさの段差をはっきりさせた - 計算機の入力欄の名前が折り返していたので、短い言葉に言い換えた - 角丸を全部なくした - 色をいったん全部外した 色を外すときは、色の指定を1か所にまとめ、それぞれに「色あり」の値を書き残しました。あとで戻すときに、どこに何色が入っていたかが分かるようにするためです。 - ねらい：スクロールしても同じ景色が続かないようにする。色の問題と形の問題を、分けて見られるようにする - 変わったこと：セクションごとに並べ方が違うので、どこで話が変わったかが形で分かる。色を外したことで、文字の大きさや並べ方の粗が見えるようになった - 見込める効果：長いページでも、途中で読むのをやめにくくなる ### 1セクションずつ詰める：画面写真に一言、直して公開、画面で確かめる ここからは、エイイチが最初の画面以外を1セクションずつ見て、直していきました。 > FV以外1セクションづつ修正していきます 1回の流れは次のとおりです。 1. エイイチが公開中のページを見て、気になった所の画面写真に一言を添えて送る 2. Claude が直し、PCの幅（1440px）とスマホの幅（390px）で画面を撮って確かめる 3. 公開する（約1分で反映される） 4. エイイチが公開された画面を見て、次の指摘を送る 手元の試しの画面ではなく、公開したページで判断しています。サイトのヘッダーや前後のセクションと並んだ状態で見ないと、幅や色の釣り合いが分からないからです。直しは小さいので、1回が数分で回ります。最初の公開（18時17分）から最後の公開（23時18分）まで、5時間で65回でした。 - ねらい：直した結果を、読む人と同じ画面で確かめる - 変わったこと：1回の直しが小さいので、外れてもすぐ戻せた。手元の画面だけで良しとして公開することがなくなった - 見込める効果：ヘッダーや前後のセクションと並べて初めて分かるずれを、公開してすぐ拾える 直した内容を、見ていたものごとに分けると次のとおりです。 ### 細部1：読む人にとってのノイズを消す 一番多かったのは「これはいらない」という指摘でした。 - 最初の画面の下の「読む時間・公開日・価格を確認した日」と写真の説明 - 図の下の、色の意味や計算の前提を書いた長い注記 - 3つの数字のグラフに入れていた文字 - メモリの図の下の目盛りの数字（0・16・32…） - 2つ目のボタン。最初の画面と最後の CTA に2つずつあった > こんな情報ユーザーはノイズにしか感じない 注記の中には、数字の根拠として必要なもの（価格を確認した日・為替）もあります。それはページ下の「出典と記録」の中にだけ残しました。消すか残すかではなく、読む流れの中に置くか、確かめたい人のための場所に置くかを分けています。 - ねらい：判断に使う情報だけを、読む流れに残す - 変わったこと：最初の画面と図の周りが、見出し・数字・図だけになった。数字の根拠は「出典と記録」を開けば確かめられる - 見込める効果：数字と結論が先に目に入る。根拠を確かめたい人も、迷わずたどり着ける ### 細部2：幅と揃えをそろえる - 中身の幅：最初の画面・3つの数字・03・「予想と逆だったこと」・最後の CTA を1080pxにそろえた。最初は1200pxで、広すぎた - 中央寄せ：見出しと注記を中央に寄せた。注記は、PCでちょうど2行に収まるように幅を調整した。言葉の途中で折り返さないようにした - 折り返しの位置：3つの数字の見出しを「、」の後で改行し、3つとも同じ位置で2行にした。左右が折り返しているのに、真ん中だけ1行だった - 間隔：3つの数字の小さなグラフで、左のグラフだけ棒の間が10px空いていた。右のグラフと同じ4pxにした - ねらい：セクションが変わっても、目が読み始める位置を同じにする - 変わったこと：幅と、中央・左の揃えが、セクションの間でそろった。3つの数字は、同じ形の3つとして読める - 見込める効果：並びのずれに目が止まらず、中身を読むことに集中できる ### 細部3：数字を強く、単位を小さく このページは数字で話すページなので、数字が弱いと話が弱くなります。 > 全体的に数字が弱い！統一 - 数字はすべて Manrope の太字にそろえた。計算機の結果や図の目盛りが、等幅の細い書体のまま残っていた - 「約」「月」「円/時」「GB超」は数字より一回り小さくした。大きく見えるのは数字だけ - 「3つの数字」の「3」と「つ」の間に空きが出ていた。ブラウザが英数字と日本語の間に自動で入れる空きで、止めた - 最初の画面の見出しの「AI」「GPU」が、日本語より細く見えた。英字の書体は一番太い字でも日本語の極太より細いので、英字だけ字の輪郭を少し太らせた - メモリの図の型番（RTX 5080・A40 など）を太字にした - ねらい：数字で話すページなので、数字を最初に読ませる - 変わったこと：数字が一番強く、単位は従になった。数字の書体がページ全体で1つになった - 見込める効果：拾い読みでも、22.5GB・180時間・¥4,677 が頭に残る ### 細部4：グラフは、文章で説明できるところまで削る 3つの数字には、それぞれ小さなグラフを付けました。最初は軸の文字や数値、灰色の棒が入っていました。 > グラフはテキスト内で説明できるくらい抽象化 グラフの下には見出しと本文があり、数字はそこで説明しています。グラフは「差がある」「交わる」「3割」という形だけを見せればよいので、文字を全部外しました。次に灰色をやめ、黒の面と斜線だけで描くことにしました。 【画像】LOG369_03_chart_variants.png 3つの数字のグラフの4案。横棒と線、マス目、円と面、縦棒 斜線は、最初は灰色の地に灰色の線で、ぼやけて見えました。太さと間隔を変えた案を何度か並べ、黒と白が同じ太さの斜線1種類に決めました。そのあと、ページ中の斜線（メモリの図の足りないGPU、費用の図の置いていた時間、凡例）を全部この1種類にそろえています。 【画像】LOG369_04_stripe_options.png 黒の面はそのままに、斜線の比率と向きを変えた8案。1の「斜め・黒1：白1」に決めた - ねらい：グラフに、1つのことだけを言わせる - 変わったこと：文字のないグラフになり、差・交わり・3割という形の違いだけが見える。斜線が1種類になり、ページのどこでも「足りない／置いていた」の意味で読める - 見込める効果：グラフを読み解く手間がなくなり、見出しを読む前に結論の形がつかめる ### 細部5：同じ形を、続けて並べない > さっきのセクションと全く同じレイアウト！単調でNGです。同じレイアウトを並べない。 01（GPUのメモリ）と 02（実際の費用）が、どちらも「左に見出しと文、右に横棒のグラフ」でした。02 を「見出しと大きな金額の横並び」と「全幅のグラフ」の上下2段に組み替えました。それでも、グラフが 01 と同じ横棒だったので、02 のグラフは縦棒にしました。7回分の棒が横に並び、下に何をした回かを置く形です。 04（9項目の比較）は、表のままだと単調だったので、別の形を4案出しました。 【画像】LOG369_05_compare_options.png 04 の比較の4案。左右の対決、強い項目ごとの2列、中央から伸びる棒、9枚のタイル 選んだのはA案（項目名を真ん中に置き、強い側のマスを黒で塗る形）です。元の表の読みやすさを残したまま、どちらが強いかが黒の面で一目で分かります。 - ねらい：セクションの境目を、形の違いで見せる - 変わったこと：01 は横棒、02 は縦棒、04 は左右の対決になり、続けて同じ形が来なくなった。04 は、どちらが強いかが黒の面の多さで分かる - 見込める効果：飽きずに下まで読める。04 は表を読み込まなくても、黒の多い側が強いと分かる ### 細部6：押せるものは、押せる形にする - 目次：文字だけで、押せると分からなかった。灰色の面に分け、右下に下向きの矢印を付けた。マウスを乗せると黒地に白文字になる - 文中のリンク：色を外したとき、リンクも本文と同じ黒になっていた。下線を付けた - ボタン：角丸を全部なくしていたが、ボタンだけはサイトのほかのボタンと同じ角丸（4px）に戻した。矢印も、文字の「→」からサイト共通の矢印アイコンに替えた - ボタンの二重枠：押したあとに出る印（フォーカスの枠）が、ボタンの枠と重なって二重に見えた。枠で囲むのをやめ、黒地に白文字に反転する形にした 角丸を全部なくしたのは、グラフや書類の角が丸いと柔らかく見えすぎたからです。ボタンだけ戻したのは、サイトのどのページでも同じ形のものが押せる、とそろえるためです。 - ねらい：押せるものと押せないものを、見た目で分ける - 変わったこと：目次・リンク・ボタンが、それぞれ押せる形になった。ボタンはサイトのほかのページと同じ形になった - 見込める効果：目次から読みたいセクションへ飛べる。押せる所の見落としが減る ### 細部7：線より面、細かすぎる模様は目に痛い 06 の7枚のカードには、最初は番号（01〜07）を大きく置いていました。内容を表すアイコンに替えましたが、細い線のアイコンは貧弱に見えました。黒く塗った形に描き直し、中の線や印は白く抜いています。 最後の CTA で、黒の細い斜線を一面に敷いた版は「目が痛い」と言われました。白地に細い黒線が細かく並ぶと、画面がちらついて見えます。斜線は面の一部だけにして、線の間を広げました。 - ねらい：小さくても形が読めるようにする。目に負担をかけない - 変わったこと：アイコンが黒い面になり、カードの文字に負けなくなった。斜線は面の一部だけになった - 見込める効果：スマホの小さな画面でもアイコンの形が読める。最後まで見ても目が疲れにくい ### 色の決め方：全部外してから、意味を1つ決めて戻す 白黒で形が決まったところで、色をどこに入れるかを決めました。 > 差し色をどこに入れるか検討 Claude が出した案は、橙の意味を「実際に借りて払った分（A40・実費）」に決めて、その意味の場所にだけ入れるものでした。最初の画面で、利用明細の「実費」の札と ¥4,677 を橙にしています。同じ意味をページの最後まで通せば、読む人は「橙＝実際に払った額」と読めます。 > 1〜3を入れて公開でやってみて。入ってから判断します 入れる前に机の上で議論するより、入れて公開した画面で判断する、という進め方です。入れた場所は、メモリの図の A40 の行、02 の大きな ¥4,677、03 の計算機の「借りる」の線と結論の文字です。 【図解】LOG369_accent_map.html 途中、色の入れ方を2回直しています。 - いったん見積書の側に橙を入れたが、「逆かな」と言われて利用明細の側に移した。見積書は「買わなかった」ものなので、目立たせる理由がない - 見積書の注記の色が濁って見えた。茶色寄りの橙の文字に、ベージュがかった地を合わせていた。文字を澄んだ橙に、地を黄みのないごく薄い橙にして直した（その後、見積書は白黒に戻した） 最初の画面の写真は、アームがつかんだブロックの赤だけを残して、ほかを白黒にしました。02 の実機の動画も、同じようにブロックの赤だけを残した版を作って差し替えています。写真の中の赤は、ページの橙とは別に、「このブロックを運んだ」という話の主役として残しました。 【画像】LOG369_11_video_red_only.png 動画の元（左上）と、赤だけを残した版のコマ3枚 - ねらい：色に意味を1つだけ持たせる - 変わったこと：橙が「実際に払った分」と「押してほしいボタン」の2つの場所にだけ入り、ページの中で目が止まる場所が決まった - 見込める効果：橙を追えば実費の話をたどれる。最後の橙のボタンが、押す場所としてすぐ分かる ### 最後の CTA：背景の違う案をいくら並べても決まらなかった 最後の「次の一歩」は、一番時間がかかりました。 最初は青地にしました。これは、色を外したときに残しておいた差し色の値が青だったので、確かめずにそれを使ったものです。 > なんで青？ばっかり？ 【画像】LOG369_06_cta_ten_ideas.png 最初の10案のうち5案。どれも青地で、背景の写真や数字の置き方だけを変えていた 青以外の6色も並べましたが、「いまいち」でした。 【画像】LOG369_07_cta_colors.png 同じ形で色だけを変えた6案。橙・赤・黄・ライム・緑・紫 背景の色や写真を替えるのをやめて、ページの流れから「最後に何を押させるか」を考え直した案を6つ出しました。最初の画面の見積書に続く3枚目の書類、計算機の結果をそのまま持ってきて相談する形、06 の続きの8枚目のカード、実機の写真を全面に敷いて一言を大きく、などです。 【画像】LOG369_08_cta_six_ideas.png 考え方を変えた案のうち3つ。06 の8枚目、実機の写真に「次は、あなたのロボットで。」、買うと借りるの2択 > EのコピーはOK。あとはCTAっぽさを出そう コピーが決まったので、形と色の組み合わせを詰めました。斜線の地に白いカードを置く形で、斜線の太さと色を変えた10案を並べ、黒の細い斜線にボタンだけ橙、という組み合わせに決まりました。 【画像】LOG369_09_cta_stripe_colors.png 斜線の地＋白いカードの形で、斜線の太さと色を変えた10案 ここから先は、細かい直しが続きました。 - 斜線が一面だと目が痛い → ベタ（黒の面）を7割にして、斜線は一部だけにする案を4つ並べた - 黒の面に、実機のアームの写真を薄く入れる - 写真をもう少し暗く。斜線の範囲をもう少し広く - 「全記録を読む」のボタンは外す（2つあると迷う） 【画像】LOG369_10_cta_stripe_mix.png 黒の面を7割にし、斜線を一部だけに入れた4案 途中、写真のアームを見せようとして、Claude が頼まれていないカードの形（幅と並べ方）まで変えました。 > あれ？なんで中のパネルのデザイン変更した？そんなこと言ったっけ？ カードは元の形に戻しています。1セクションずつ詰める進め方では、直す範囲は言われた所だけにしないと、前に決まった所が崩れます。 【画像】LOG369_13_cta_final.png 仕上がった CTA。黒地に薄いアームの写真、右端の斜線、白いカードと橙のボタン1つ - ねらい：読み終えた人に、次にすることを1つだけ示す - 変わったこと：背景の工夫ではなく、「次は、あなたのロボットで。」の一言と、ボタン1つになった。どちらを押すか迷う2つ目のボタンはない - 見込める効果：相談のボタンが押されやすくなる見込み。実際に押されたかは、公開後の問い合わせで確かめる ### 仕上がった最初の画面 【画像】LOG369_12_fv_final.png 仕上がった最初の画面。白黒の網点のアームに、ブロックの赤だけ。利用明細の ¥4,677 と「実費」の札が橙 ### 翌朝：スマホで見直す 翌朝、エイイチが iPhone で公開中のページを見て、前の晩と同じように、画面写真に一言を添えて送ってきました。直しは約15分、公開は5回です。 直した所の多くは、PC で組んだ並べ方が、スマホでそのまま残っていた所でした。PC で横に並んでいたものが縦1列に積まれると、左にそろえた物、見出しの折り返し、横に長い図の見え方が変わります。 #### 3つの数字：中央にそろえる > 3つの数字で、先に結論セクションはグラフはセンター合わせ。各ミドルタイトルは折り返しなし（センター合わせ）説明文はそのまま。 > グラフの数字もセンター合わせ 数字・グラフ・見出しを中央にそろえました。見出しは「、」の後の改行をやめて1行にし、画面の幅に合わせて字を少し小さくしています。説明文は左にそろえたままです。PC で3列に並べるために付けていた右の余白（28px）が、1列になっても残っていたので、スマホでは外しました。これが残っていると、中央に寄せた物が少し左にずれます。 【画像】LOG369_15_sp_three_numbers.png 左が直す前、右が直した後。数字・グラフ・見出しが、画面の中央の1本の線に乗った - ねらい：PC では3つが横に並ぶので、左にそろえると3つの頭がそろう。スマホでは1つずつ縦に見るので、1つずつが画面の真ん中でまとまる方が読みやすい - 変わったこと：数字、グラフ、見出しが中央の1本の線に乗った。見出しが1行になり、1つ分の高さも縮んだ - 見込める効果：視線が上から下へまっすぐ流れ、3つの結論を続けて読める #### 01：グラフと価格の間を詰める > 01セクションはグラフと価格の間が空きすぎ（グラフを大きくするなど調整） スマホでは、棒グラフの右に価格の列を残していたため、棒が短く、棒と価格の間が大きく空いていました。価格を GPU の名前と同じ行の右に上げ、棒はその下の行で横幅いっぱいに使うようにしました。 【画像】LOG369_16_sp_memory.png 左が直す前、右が直した後。棒が長くなり、価格は名前の行の右に並んだ - ねらい：GPU のメモリの量（棒の長さ）と、必要な量（破線）の関係を、はっきり見せる - 変わったこと：棒が長くなり、16GB と 48GB の差や、破線をこえるかどうかが見やすくなった。名前と価格が同じ行に並ぶので、「この GPU はいくら」が一続きで読める - 見込める効果：足りる GPU と足りない GPU の区別が、数字を読む前につく #### 02：横に送れると分かるようにする > 02のグラフ横にスクロールするか、わからない。 7回分の縦棒は、スマホの幅には入りきらないので横に送る形にしていました。ところが、最初の画面に4本目までがほぼ全部収まっていて、グラフがそこで終わっているように見えていました。 Claude は手元で、縦棒を横棒に組み替えて7回分を縦に並べる案を作りました。公開する前に、エイイチから画面写真と次の一言が届きました。 > こんな感じで少し横のグラフがちょい見せしてた方がいい。 縦棒のままにすれば、細部5で決めた「同じ形を続けて並べない」（01 は横棒）も崩れません。横棒の案は使わず、縦棒のまま次の棒が少し見える形にしました。最初は次の棒を9割ほど見せましたが、それでも終わりに見えました。 > 右のグラフもう少しだけ食い込んでいた方が横にスクロールするってわかりやすくなる 列の幅を画面の幅から決め、3本と半分が画面に入るようにしました。4本目は、どの機種でも右端で半分ほど切れます。凡例と合計は動かさず、棒の並びだけが横に送れます。 【画像】LOG369_17_sp_cost.png 左が直す前、右が直した後。4本目の棒が右端で半分切れて、続きがあると分かる - ねらい：続きがあることを、説明の文ではなく、切れている形で伝える - 変わったこと：4本目が半分で切れ、横に送れる図だと見て分かるようになった - 見込める効果：一番高い回（¥1,422）を含む5本目以降が、見落とされにくくなる #### 見出し：言葉の途中で折り返さない、英数字を日本語の太さに > 05タイトル 折り返し修正 > 01タイトル折り返し修正。日本語と英字の太さ合わせる（日本語に合わせる） iPhone では、05 の見出しが「あなたの場合はど／ちらか」と言葉の途中で折り返していました。ページには、日本語の言葉の切れ目を自動で判断して折り返す指定（word-break: auto-phrase）を入れていました。Chrome はこれに対応していますが、iPhone の Safari は対応していません。そのため iPhone でだけ、言葉の途中で切れていました。Claude は画面の確かめを Chrome と同じ仕組みのブラウザ（Chromium）で行っていたので、この違いには気づけませんでした。 見出しを言葉のまとまりに分け、まとまりの途中では折り返さないようにしました。たとえば「あなたの場合はどちらか：／4つの質問」です。01〜06のどの見出しも同じように直しています。英数字（GPU・7・4,700 など）は、最初の画面の見出しと同じように輪郭を少し太らせ、日本語の太さに合わせました。 - ねらい：見出しを、1行ずつ意味の通るまとまりで読ませる - 変わったこと：見出しが言葉の途中で切れなくなった。英数字だけが細く浮いて見えることもなくなった - 見込める効果：見出しの1行目だけで意味が取れ、拾い読みでも話の流れが追える #### 06：アイコンの横に文字を並べる > 06セクションはアイコンの横にテキスト並べる。 カード1枚の中で、アイコンを上、文字を下に積んでいたのを、アイコンを左、見出しと説明を右に並べる形にしました。 - ねらい：縦に積むと1枚が高くなり、7枚で画面の何枚分にもなる - 変わったこと：1枚の高さが縮み、7つが画面の中に多く収まるようになった - 見込める効果：7つの決めごとを、続けて見比べやすくなる #### CTA：斜めの向きを PC とそろえる > CTAの背景の斜め具合がPCと違う。修正 スマホでは、斜線の帯が PC と逆向きに傾いていました。PC と同じ向き（上が右寄り、下が左寄り）に直しました。角度まで PC と同じにすると、縦長のスマホの画面では下の斜線の面が大きくなりすぎるので、角度は少しゆるくしています。 - ねらい：同じページは、どの画面で見ても同じ形に見えるようにする - 変わったこと：PC とスマホで、CTA の形が同じに見えるようになった - 見込める効果：PC で見た人がスマホで開き直しても、同じページだとすぐ分かる #### 最初の画面：短くする > FVが長いのでテキストセクションを画像にもっと食い込ませるように上に上げる（ロボットの台座の下くらいまで） スマホでは、写真の下に文字が続く形で、最初の画面が縦に長くなっていました。文字を、ロボットの台座のすぐ下まで上げて写真に重ねました。重なる所は、写真の下側を背景の色にぼかして、文字が読めるようにしています。 【画像】LOG369_14_sp_fv.png 左が直す前、右が直した後。文字が台座のすぐ下まで上がり、「自分の条件で計算する」のボタンまでが最初の画面に入った - ねらい：開いてすぐの画面に、見出し・説明・ボタンまでを入れる - 変わったこと：直す前は、ボタンが画面の下の端で、ブラウザのバーの裏に隠れていた。直した後は、スクロールしなくてもボタンが見える - 見込める効果：開いてすぐ、何のページで、次に何を押せばよいかが分かる #### スマホで見て分かったこと - PC で左にそろえた物は、縦1列になると、中央にそろえた方がまとまる所がある。1つずつを順に見る場所がそうだった - PC の並べ方のために付けた余白や列は、1列になっても残る。スマホの幅で見るまで気づかない - 横に送る図は、次の列が半分ほど切れていないと、送れると分からない - Chromium で確かめても、iPhone の Safari では折り返しが違うことがある。最後の確かめは iPhone で行う ### 進め方を並べると この晩の進め方を、決めた順に並べると次のとおりです。 | 順 | 決めたこと | 見ていたもの | |---|---|---| | 1 | 何を主役にするか（方向） | 方向の違う案を並べて選ぶ | | 2 | 最初の画面1枚 | 写真・書類・文字の釣り合い | | 3 | 全体の並べ方 | 同じ形が続いていないか | | 4 | 形と文字（色なし） | ノイズ・幅と揃え・数字の強さ・押せる形 | | 5 | 色の意味と場所 | 意味を1つに決め、その場所にだけ入れる | | 6 | 最後の CTA | 背景ではなく、何を押させるか | | 7 | ボタン・矢印・角丸 | サイトのほかのページとそろっているか | | 8 | スマホの幅 | 縦1列になったときの揃え・見出しの折り返し・横に送る図 | ## 記録 ― この晩の公開の記録（git のコミット 65件） ```text fde7f80 2026-10-23 18:17 導入比較ガイド /gpu-buy-or-rent を追加（GPU PCを買うか Runpod で借りるか）。トップと /series6 に入口を置いた 5a97456 2026-10-23 18:53 導入比較ガイド：ChatGPT の検証の指摘を反映（放置の割合の計算・速さの比・判定フロー・言い過ぎの修正）。タイトルを誰向けか分かる形に 75d1fb7 2026-10-23 20:08 導入比較ガイド：最初の画面を見積書と利用明細の形に作り直し、セクションごとに帯・番号・レイアウトを変えた。色と書体をそろえ直した 89dedba 2026-10-23 20:24 導入比較ガイド：セクションごとに組み方を変え、英数字を Manrope に、角丸をなくし、色をいったん白黒にした（差し色は .gbr の色の札で戻せる） 2f2a33e 2026-10-23 20:24 導入比較ガイド：最初の画面の下の読む時間・日付・写真の説明を消した 52485a3 2026-10-23 20:26 導入比較ガイド：最初の画面のボタンを「自分の条件で計算する」の1つにした 744e0dc 2026-10-23 20:29 導入比較ガイド：最初の画面の下のセクションの幅を1080pxにした 7c0e6dc 2026-10-23 20:30 導入比較ガイド：比べる範囲の注記を中央揃えにした 4063a2f 2026-10-23 20:32 導入比較ガイド：3つの数字それぞれに小さなグラフを入れた（メモリの量・損益分岐・置いていた分） 99b1c0c 2026-10-23 20:33 導入比較ガイド：比べる範囲の注記の行の長さをそろえた f1a7908 2026-10-23 20:34 導入比較ガイド：比べる範囲の注記をPCで2行にした 64b0fa5 2026-10-23 20:35 導入比較ガイド：比べる範囲の注記の幅の上限を外し、PCで確実に2行にした d80ce79 2026-10-23 20:37 導入比較ガイド：3つの数字のグラフから文字を外して形だけにした・文中のリンクに下線を付けた 5125667 2026-10-23 20:37 導入比較ガイド：π0.5 の読み仮名を外した 896b0d8 2026-10-23 20:39 導入比較ガイド：「忙しい月（120時間）」を「GPUを一番多く使う月でも約120時間」に言い換えた 552f7d4 2026-10-23 20:40 導入比較ガイド：3つの数字の見出しを、どれも同じ位置で2行に折り返した 1df95ee 2026-10-23 20:41 導入比較ガイド：「3つの数字で、先に結論」の見出しを中央に寄せた a1acf8d 2026-10-23 20:42 導入比較ガイド：目次を押せる形にした（灰色の面・下向きの矢印・乗せると黒） 2f15d4f 2026-10-23 20:43 導入比較ガイド：最初の画面の中身の幅を1080pxにして中央へ寄せた dfc41e2 2026-10-23 20:45 導入比較ガイド：3つの数字のグラフから灰色をなくし、黒と斜線だけで描いた 955d01c 2026-10-23 20:48 導入比較ガイド：「3つの数字」の3を大きくし、つとの間の空きをなくした 743ce98 2026-10-23 20:49 導入比較ガイド：3つの数字の「月」「約」を単位と同じ大きさにした 385e481 2026-10-23 20:54 導入比較ガイド：22.5GBのグラフの2本の棒の間を、右のグラフと同じ4pxにした cab29f5 2026-10-23 20:55 導入比較ガイド：3つの数字のグラフのストライプを、黒と白が同じ太さの斜線にした e0d4ae3 2026-10-23 20:56 導入比較ガイド：01の左の本文を短くして、右の図と同じ高さに収めた・図の説明から色の名前を外した d83f012 2026-10-23 21:00 導入比較ガイド：ページ中のストライプを1種類（黒と白が同じ太さの斜線）にそろえた・図の説明の文字を小さくした・01の本文をさらに短くした d90b158 2026-10-23 21:03 導入比較ガイド：02を見出しと金額の横並び＋全幅のグラフに組み替えた（01と同じ左右の形を避けた）・01の図の目盛りの数字を消した 5d75cea 2026-10-23 21:03 導入比較ガイド：01の本文に、メモリが要る理由とπ0.5が何かの説明を足した c197ea0 2026-10-23 21:07 導入比較ガイド：01の本文を中くらいの長さにした・図の価格を太く大きく、足りる／足りないを小さな補足にした・図の中の余白を広げた 89dd1d1 2026-10-23 21:07 導入比較ガイド：01の本文から「使ったのは、」を外した 45ce133 2026-10-23 21:14 導入比較ガイド：02の見出しを「約4,700円。」のあとで改行した 58280cb 2026-10-23 21:15 導入比較ガイド：02の費用の図の下の説明を消した 289006e 2026-10-23 21:16 導入比較ガイド：02の費用の図の金額を太く大きくした（合計はさらに大きく） 9935c0f 2026-10-23 21:20 導入比較ガイド：02の費用の図を縦棒にした（01の横棒と見分ける）・01の図の「約」「円/時」を小さくした・セクション番号の輪郭の小さな三角を消した 7d96bf2 2026-10-23 21:23 導入比較ガイド：「この金額で学習したAI」を見出しの大きさにした 6bff7ba 2026-10-23 21:24 導入比較ガイド：03（計算機）の中身の幅を1080pxにした 610b326 2026-10-23 21:28 導入比較ガイド：計算機を黒地にした・買うの点線を細くした・選択欄の矢印を太くし右の余白を足した・数字をすべてManropeの太字にそろえた 7db3c47 2026-10-23 21:34 導入比較ガイド：04の比較を、項目を真ん中に置いて強い側を黒で塗る形（案A）にした・実際に起きたことの4枚は下に横並び 9603254 2026-10-23 21:35 導入比較ガイド：「予想と逆だったこと」の本文を2段落に分けた d8b5f06 2026-10-23 21:36 導入比較ガイド：判定フローの結果の枠から左の線を消した d95ccbd 2026-10-23 21:38 導入比較ガイド：判定フローの結果の枠の灰色を薄くした 7d13024 2026-10-23 21:40 導入比較ガイド：「予想と逆だったこと」の背景に、データセンターのイメージ写真（生成画像）を敷いた ca97a7e 2026-10-23 21:47 導入比較ガイド：06の7枚の番号を、内容を表す線のアイコンに替えた 46d7f16 2026-10-23 21:50 導入比較ガイド：入口のバナーをデータセンターの写真入りにした・最後のCTAを青地にした・「予想と逆だったこと」の中身の幅を1080pxにした 136da0d 2026-10-23 21:52 導入比較ガイド：試算の相談の枠を白地にし、ボタンの二重枠をなくした db70e94 2026-10-23 21:53 導入比較ガイド：06のアイコンを黒く塗った形にし、説明文の行の高さを詰めた e8e18d1 2026-10-23 22:12 導入比較ガイド：最後のCTAを、黒の細いストライプ地に白いカード＋橙のボタンにした（コピー「次は、あなたのロボットで。」） ec03a75 2026-10-23 22:20 導入比較ガイド：最後のCTAのボタンを「相談する」1つにした 4ef0a59 2026-10-23 22:24 導入比較ガイド：最後のCTAを黒地にし、左に実機のアームの写真を薄く、右端だけ斜めにストライプを入れた・カードを右に寄せた 43accbb 2026-10-23 22:29 導入比較ガイド：最後のCTAのカードを元の横並びに戻し、背景の写真を暗くした 81fe569 2026-10-23 22:35 導入比較ガイド：最後のCTAのストライプの範囲を広げた 91a44db 2026-10-23 22:37 導入比較ガイド：最初の画面の写真で、アームがつかんだブロックの赤だけを残した d2d5006 2026-10-23 22:39 導入比較ガイド：ボタンだけサイト共通の角丸（4px）にした b4e0256 2026-10-23 22:40 導入比較ガイド：ボタンの矢印をサイト共通の矢印アイコン（arrow_forward）にした b3bc204 2026-10-23 22:41 導入比較ガイド：見積書に、最後のCTAのボタンと同じ橙を入れた bece55a 2026-10-23 22:42 導入比較ガイド：「およそ1/160」を丸にした 1509bc6 2026-10-23 22:44 導入比較ガイド：見積書の注記の色を、茶色寄りから澄んだ橙に直した 025d846 2026-10-23 22:46 導入比較ガイド：色を見積書から利用明細に移した（見積書は白黒に戻した） e4be496 2026-10-23 22:50 導入比較ガイド：差し色（橙）を「実際に借りて払った分」に入れた（01のA40・02の¥4,677・03の借りる線と結論） 60a5f99 2026-10-23 22:55 導入比較ガイド：02の動画を、ブロックの赤だけ残した版に差し替えた 0a9ba45 2026-10-23 22:58 導入比較ガイド：01の図の型番を太字にした・スマホで80GBと価格が重なるのを直した 2a56019 2026-10-23 22:59 導入比較ガイド：計算機の選択欄の矢印を少し細く、右の余白を少し狭くした 1374a75 2026-10-23 23:04 導入比較ガイドの入口：トップの白い枠を外した・¥4,700と「読む」ボタンに差し色（橙）を入れた（トップと/series6） 64ced32 2026-10-23 23:10 導入比較ガイド：検索向けの設定を整えた（短いタイトル・数字入りの説明文・構造化データにパンくずと計算機・共有画像を今のデザインで作り直し） 7da14ea 2026-10-23 23:18 導入比較ガイド：最初の画面の見出しの英字（AI・GPU）を、日本語と同じ太さに見えるようにした ``` 翌朝、スマホで見直したときの公開の記録（git のコミット 5件）。 ```text a80b15b 2026-10-24 06:58 導入比較ガイド：スマートフォンの表示を直した f80494e 2026-10-24 07:01 導入比較ガイド：見出しの折り返しを言葉の切れ目に。英数字の太さを日本語に合わせた 0594920 2026-10-24 07:03 導入比較ガイド：スマートフォンのFVを短く（文字を画像に重ねる）、3つの数字の数字も中央に 61b5ccd 2026-10-24 07:06 導入比較ガイド：スマートフォンの02のグラフは、次の列を少し見せて横に送れるとわかるようにした b3dde58 2026-10-24 07:10 導入比較ガイド：02のグラフの4本目が画面の右端で半分ほど切れるようにした ``` ## 写真と動画から、ブロックの赤だけを残した手順 ### 写真：赤い部分だけ色を残す Python（Pillow・NumPy） 最初の画面の網点の画像と、切り抜いたアームの写真の両方にかけた。赤みと彩度の両方が高い画素だけ元の色を残し、それ以外は白黒にする。ケーブルにも赤い点が1つ出たので、画像の右側（ブロックのある範囲）だけに限った。 ```python from PIL import Image import numpy as np, os def sel(src,dst,fmt,**kw): i=Image.open(src).convert('RGBA'); a=np.array(i).astype(np.float32) r,g,b=a[...,0],a[...,1],a[...,2] gray=0.299*r+0.587*g+0.114*b mx=np.maximum(np.maximum(r,g),b); mn=np.minimum(np.minimum(r,g),b) sat=(mx-mn)/(mx+1e-6) red=np.clip((r-np.maximum(g,b))/60,0,1)*np.clip((sat-0.25)/0.25,0,1) H,W=red.shape ys,xs=np.where(red>0.5) # keep only the dense cluster: right side keep=np.zeros_like(red); x0=int(W*0.6) keep[:,x0:]=1 red*=keep out=a.copy() for k,c in enumerate([r,g,b]): out[...,k]=gray*(1-red)+c*red Image.fromarray(out.clip(0,255).astype(np.uint8),'RGBA').save(dst,fmt,**kw) sel('public/site/gbr/arm.webp','public/site/gbr/arm-red.webp','WEBP',quality=80) sel('public/site/gbr/halftone.png','public/site/gbr/halftone-red.png','PNG',optimize=True) ``` ### 動画：ffmpeg の colorhold で赤だけ残す ```bash # 試しに3コマだけ書き出して、色の残り方を確かめた for t in 5 100 190; do ffmpeg -v error -y -ss $t -i ../real/LOG361_v3_success_181602.mp4 -frames:v 1 -vf "colorhold=color=0xC8302C:similarity=0.22:blend=0.08" f_$t.png ffmpeg -v error -y -ss $t -i ../real/LOG361_v3_success_181602.mp4 -frames:v 1 o_$t.png done # 全編（3分20秒・854×480・24fps）を書き出し、表紙の画像も同じ処理の版から切り出した ffmpeg -v error -y -i ../real/LOG361_v3_success_181602.mp4 -vf "colorhold=color=0xC8302C:similarity=0.22:blend=0.08" -c:v libx264 -crf 24 -preset slow -pix_fmt yuv420p -movflags +faststart -c:a copy LOG361_v3_success_181602_red.mp4 ffmpeg -v error -y -ss 5 -i LOG361_v3_success_181602_red.mp4 -frames:v 1 -q:v 3 LOG361_01_success_181602_red.jpg ls -la LOG361_v3_success_181602_red.mp4 LOG361_01_success_181602_red.jpg ``` ```text -rw-r--r-- 1 root root 44968 Oct 23 22:52 LOG361_01_success_181602_red.jpg -rw-r--r-- 1 root root 14212038 Oct 23 22:52 LOG361_v3_success_181602_red.mp4 ``` ### 動画をサイトの動画置き場（Cloudflare R2）へ入れる できた動画と表紙は、KIOXIA の `r2r2r-data/lab/Log12/` に置いてから、Mac 連携の shell で R2 に入れた。鍵は KIOXIA のファイルからスクリプトが読み、画面には出していない。 ```python import urllib.request, urllib.parse, json, mimetypes from pathlib import Path ACC='21d7aed1b193796b89287df10913f2dc' API=f'https://api.cloudflare.com/client/v4/accounts/{ACC}/r2/buckets/p2m-media/objects' tok=(Path.home()/'mnt/KIOXIA/p2m_cloudflare_token.txt').read_text().strip().split()[0] base=Path.home()/'mnt/KIOXIA/r2r2r-data/lab/Log12' for n in ['LOG361_v3_success_181602_red.mp4','LOG361_01_success_181602_red.jpg']: r=urllib.request.Request(API+'/'+urllib.parse.quote(n),data=(base/n).read_bytes(),method='PUT') r.add_header('Authorization','Bearer '+tok); r.add_header('Content-Type',mimetypes.guess_type(n)[0]) with urllib.request.urlopen(r,timeout=300) as res: d=json.loads(res.read() or b'{}') print(n,d.get('success'),d.get('errors')) ``` ```text LOG361_v3_success_181602_red.mp4 True [] LOG361_01_success_181602_red.jpg True [] ``` ## ページのソースコード ### src/pages/gpu-buy-or-rent.astro（導入比較ガイドのページ全体） ```astro --- // 導入比較ガイド：学習用GPU PCを買うか、Runpod で借りるか（LP。LOG の記事ではない） // 元はClaudeのアーティファクトで作った試作。数字の出典はページ下の「出典と記録」 import Base from '../layouts/Base.astro'; import { SITE, AUTHOR, PUBLISHER } from '../lib/seo'; const title = 'ロボットAIの学習用GPU、買うか借りるか ― 実費と計算機で決める導入ガイド'; // 検索結果に出すタイトルは短くする（全角32字前後で切れるため）。ページの見出し（h1）は上の title のまま const seoTitle = 'ロボットAIの学習用GPU、買うか借りるか｜実費と損益分岐の計算機'; const description = 'ロボットAI（π0.5）の学習用GPUを、PCで買うかクラウド（Runpod）で借りるか。実際にA40を借りて学習させた費用（記録のある7回で4,677円）、RTX 5090 PCとの損益分岐を出す計算機、4つの質問の判定フローで決められる導入ガイド。'; const path = '/gpu-buy-or-rent'; const url = SITE + path; const jsonLd = [ { '@context': 'https://schema.org', '@type': 'Article', headline: title, description, url, mainEntityOfPage: url, image: [SITE + '/og/gpu-buy-or-rent.jpg'], inLanguage: 'ja', datePublished: '2026-10-23', dateModified: '2026-10-23', author: AUTHOR, publisher: PUBLISHER, articleSection: '導入比較ガイド', keywords: 'GPU 買うか借りるか, 学習用GPU, クラウドGPU, Runpod, A40, RTX 5090, RTX 5080, π0.5, openpi, LoRA, GPUメモリ, 損益分岐, フィジカルAI, ロボットAI', about: [ { '@type': 'Thing', name: 'クラウドGPU' }, { '@type': 'Thing', name: 'ロボット学習' }, { '@type': 'SoftwareApplication', name: 'π0.5（openpi）', applicationCategory: 'Robot foundation model' }, ], isPartOf: { '@type': 'CollectionPage', name: 'フィジカルAI研究室', url: SITE + '/series6' }, hasPart: { '@type': 'WebApplication', name: '買う方が安くなる使用時間の計算機', url: url + '#calc', applicationCategory: 'BusinessApplication', operatingSystem: 'Web', offers: { '@type': 'Offer', price: 0, priceCurrency: 'JPY' } }, }, { '@context': 'https://schema.org', '@type': 'BreadcrumbList', itemListElement: [ { '@type': 'ListItem', position: 1, name: 'Pixels to Motors', item: SITE + '/' }, { '@type': 'ListItem', position: 2, name: 'フィジカルAI研究室', item: SITE + '/series6' }, { '@type': 'ListItem', position: 3, name: 'ロボットAIの学習用GPU、買うか借りるか', item: url }, ], }, ]; ---

これからロボットAIの学習環境を用意する、
企業の担当者・研究者・エンジニア向け

ロボットAIの
学習用GPU、
買うか借りるか

買う前に借りて、実際に学習させました。見積書と、利用明細を並べます。実費と計算機で、自分の場合どちらが合うかを決められる導入ガイドです。

自分の条件で計算する
見積書買わなかった

自作の学習用 Linux PC（2026年7月に検討した構成）

GPU
RTX 5080 16GB

学習に要るGPUメモリの目安（22.5GB超）に届かない

CPU
Ryzen 9 9950X
メモリ・電源
64〜128GB・1000W級
合計（概算）¥750,000
およそ1/160
利用明細実費

Runpod A40 48GB ／ 2026年10月 ／ 記録のある7回

  • 推論を初めて動かす¥54
  • GPUメモリを測る¥81
  • 試しに200ステップ学習¥95
  • 2,000ステップ学習¥1,153
  • 実機で推論＋追加学習¥1,422
  • 4,000ステップ学習し直し¥861
  • 4,000ステップ学習¥1,011
合計¥4,677

3つの数字で、先に結論

22.5GB超

GPUは、速さより先に
メモリの量で決まる

Physical Intelligence の π0.5 の追加学習は、公開コードの説明書の目安でGPU1枚に22.5GB超が要る。16GBのRTX 5080では届かない。

月180時間

これより使うなら、
買う方が安い

RTX 5090のPC（約124万円）を4年使う場合の目安。私たちがGPUを一番多く使う月でも約120時間なので、借りる方が安い。買うGPUと借りるGPUの速さの違いは測っていない。

約3割

借りた費用のうち、
置いていただけの分

借りる側の損は、使っていない時間の課金と、毎回の立ち上げ。学習のあと Pod を止めずに待っていた時間に払っていた。

比べているのは、機材とサービスの料金だけです。人の作業時間は入れていません。借りる側は Runpod の場合で、国内・円建てのクラウド（さくらインターネットの高火力など）や、中古のGPU・今あるPCへの増設は比べていません。

最初に決めるのは、GPUのメモリが足りるか

AIの学習では、モデルと計算途中のデータをGPUのメモリに載せます。足りなければ、学習は始まりません。

Physical Intelligence 社のロボット用AIモデル π0.5 は、カメラの画像と指示の文から、アームを動かします。その LoRA学習（一部だけ学習し直す方法）には、GPU1枚に22.5GB超が要ります。

計画したRTX 5080は16GBで届きません。24GB以上は、買うと約100万円から。借りれば、48GBのA40が1時間約93円です。

破線は、選んだ用途に要るGPUメモリ。斜線は足りないGPU、灰色は買うGPU（価格.comの単体最安）、黒は借りるGPU、橙は実際に借りたGPU（Runpod の1時間あたり・Secure Cloud）。

記録のある7回で約4,700円。
3割は使っていない時間の分だった

¥4,677

Runpod の A40（48GB）を借りた、記録のある7回のGPU代

作業していた時間 約3,300円置いていた時間 約1,400円

作業していた時間何もせずに置いていた時間
合計（記録のある回）うち置いていた分 約1,400円¥4,677
この費用で学習させた π0.5 が、机の上のアーム（mechArm 270）で初めてブロックを箱に入れた回。横から撮った約3分20秒の動画です。この回の記録を読む
この金額で学習したAI

借りていた時間は記録のある回で約48時間、そのうち学習は、ログに残った時間の合計で約23.6時間でした（1ステップ6.5〜7.1秒）。置いていた約1,400円は、学習が終わってから実機の準備ができるまで、Podを止めずに待っていた分です。時間で払う以上、使わない時間にも料金はかかります。

買う方が安くなるのは、月に何時間使うときか

PCの価格を使う年数で割った1か月分と、借りた場合の1か月分を比べます。初期値は、このプロジェクトの実際の使い方です。機材とサービスの料金だけの比較で、人の作業時間は入れていません。

借りるGPUで換算。私たちが一番多く使う月で約120時間。720時間＝毎日24時間
借りていた時間のうち、何もしていなかった割合。実績は約3割
借りるGPUの何倍か。私たちは測っていない（1倍＝同じ時間で終わる前提）

借りる 1か月
買う 1か月（PC代＋電気）
買う方が安くなる使用時間
計算式と前提 
借りる（円/月）＝ 1時間の料金（円）× 使う時間 ÷（1 − 置く時間の割合）
買う（円/月）　＝（PC価格 − 売却額）÷（年数×12）＋ 消費電力kW ×（使う時間 ÷ 速さ）× 電気単価
買う方が安くなる時間 ＝ PC代の月額 ÷［1時間の料金 ÷（1 − 置く時間の割合）− 消費電力kW × 電気単価 ÷ 速さ］

・使う時間は、借りるGPUで同じ学習にかかる時間
・消費電力はPC全体の目安で、実測ではない（RTX 5090はGPUだけで575W）
・1時間の料金は、Runpod のドル建ての公開価格（秒単位で課金）に、Pod のディスク200GB（動いている間だけ課金）の分を足し、為替で円にした値。止めている間の保存料は入れていない
・RTX 5090 搭載BTOはドスパラの GALLERIA XPR7A-R59（2026年10月23日の価格）
・売却で戻る割合と電気単価は仮の値。自社の値に変えて使う
自社の台数・使い方で試算したい場合は、条件を送ってもらえれば計算します。 試算を相談する

買うと借りるを9項目で比べる

自宅に買う
項目
Runpod で借りる
75万〜124万円
はじめる費用
強い：約1,600円（10ドル）の入金から
買ったGPUで固定
使えるメモリ
強い：回ごとに16〜180GBから選べる
強い：電気代だけ（1時間約23円）
長く回すときの費用
A40で1時間約98円。止め忘れも課金
強い：電源を入れるだけ
すぐ使えるか
立ち上げ約1時間10分。空き待ちもある
強い：同じ机の上
ロボットとの距離
私たちの環境（秋田→米国）で往復0.6〜1.6秒
強い：社外に出さずに済む
データの扱い
社外に出してよいかの確認が要る。転送に時間がかかる
同じ部品を同じ値段でそろえにくい
他人が同じ環境を作れるか
強い：空きと地域の条件が合えば、同じGPUを借りられる
自分で持つ
置き場所・熱・故障
強い：持たない
強い：円
支払いの通貨
ドル建て。円の額は為替で変わる
5項目
強い項目の数
4項目

借りる側の弱い項目は、どれも実際に起きたことです。

約3割

使っていない時間の課金

学習が終わってから実機の準備ができるまで、Podを置いたままにした。

4時間20分

空き待ち

早朝にA40を予約したが、起動は11時前後。空いていたのは16GBのGPUだけだった。

1時間10分

毎回の立ち上げ

起動6分、ライブラリの導入約20分、学習済みモデルの送信約40分。

0.6〜1.6秒

往復の遅れ

秋田のMacから米国のデータセンターまで。1回目は準備で約55秒かかる。

予想と逆だったこと
借りた環境は、他人が再現できないと思っていた。

研究室を作り始めたときは、借りた環境は他人が再現できないと考えて、PCを自作するつもりでした。実際には、GPUの型番と手順を書いておけば、読んだ人は空きと地域の条件が合う限り、同じA40を1時間約93円で借りられます。

自作のPCは、同じ部品を同じ値段でそろえるのが難しくなっています。RTX 5090を積んだBTOの最安は、5月に約60万円だったものが、10月は約124万円です（同じ構成どうしの比較ではありません）。どちらの場合も、同じ結果にたどり着くには、コードの版・使ったライブラリ・学習の設定・データの記録が要ります。

あなたの場合はどちらか：4つの質問

答えを選ぶと、次の質問が出ます。最後に「借りる」「買う」「併用」「まず借りて測る」のどれが合うかを出します。使用時間の分かれ目は、上の計算機の条件に合わせて変わります。

借りるなら、最初に決めておく7つ

どれも、このプロジェクトで一度失敗したことです。

  1. 実機を動かす時間を決めてから Pod を作る置いていた時間の約1,400円は、これで払わずに済んだ。
  2. 作るときにSSHのポート（TCP 22）を開けておく後から開けると Pod が作り直され、準備が消えた。
  3. 止めるか削除するかを、保存料と作り直す手間で決める停止中もディスクの料金はかかる。作り直すと、私たちの場合は約1時間10分かかった。
  4. 削除の前に、モデルとログを手元へ届いたファイルが読み込めるかまで確かめる。サイズだけ見て、途中で切れたまま読み込んで失敗した。
  5. 学習は tmux の中で動かす手元のターミナルが固まっても、学習は止まらなかった。
  6. 学習した Pod で、そのまま推論するモデルの往復の転送（約1時間）がなくなる。
  7. GPUの型番・時間・費用を毎回書く書かなかった回は、合計に入れられなかった。

GPU代 ¥4,677 で、ここまで動いた。

次は、
あなたのロボットで。

台数・使い方・データの条件を送ってもらえれば、このページと同じ計算で、買う場合と借りる場合を並べてお返しします。学習環境の立ち上げの相談も受け付けています。

自社の条件で試算・立ち上げを相談する
出典と記録
``` ### src/components/GuideBanner.astro（トップと /series6 の入口のバナー） ```astro --- // 導入比較ガイド（/gpu-buy-or-rent）への入口。トップと /series6 に置く --- 導入比較ガイド ロボットAIの学習用GPU、買うか借りるか これから学習環境を用意する企業・研究者・エンジニア向け。実際に借りて学習させた費用、損益分岐の計算機、判定フローで決められます 読むarrow_forward ```