デザインを詰める ― ひと晩65回の公開で、色を1つまで減らした

学習用GPUを買うか借りるかを決めるための1ページ（導入比較ガイド、pixelstomotors.com/gpu-buy-or-rent）を、ひと晩で作りました。なぜ作ったか、誰に向けてどう並べたかは LOG368 に書きました。この記事は、そのページのデザインをどう進め、細部をどう詰めて仕上げたかの記録です。

最初に公開した版から最後の版まで、サイトへの公開は65回でした。翌朝、スマホで見直して、もう5回直しています。1回ずつの直しは小さく、「この行を2行に」「この数字をもっと強く」「この線はいらない」といったものです。ただ、65回分を並べると、デザインを詰めるときに何を見て、どの順に決めていったかが見えてきます。

一番効いたのは、色を全部いったん外し、形と文字だけで組み終えてから、意味を1つ決めて色を戻したことでした。 色が付いたまま形を直していると、色の強さに目を取られて、並べ方や文字の大きさの問題が見えにくくなります。

進め方はエイイチが決め、Claude が案を出して直し、公開して画面を確かめる、という分担でした。エイイチは公開されたページを見て、気になった所の画面写真に一言を添えて送ります。Claude はその場で直し、PCとスマホの幅で画面を撮って確かめてから公開します。

ここから下は作業ログです。段階ごとに、直したねらい、それで何が変わったか、どんな効果が見込めるかを添えました。効果は、アクセスの数字で確かめたものではありません。直した画面を見て、読む人の動きがこう変わるはずだ、という見込みです。

作業ログ ― 案出しから仕上げまで

方向を決める：案は「並べ方」ではなく「方向」で分ける

最初の画面の案は、Claude のデザイン用のキャンバス（Claude Design）に並べて比べました。最初に出した案は、写真と見出しの置き方を少しずつ変えただけで、前に出した案とほとんど同じものでした。エイイチからは「前に見た案と変わらない」と指摘されました。

案を並べる意味は、方向の違うものを見比べて選ぶことにあります。置き方の違いだけでは、選ぶ材料になりません。出し直した案は、何を主役にするかで分けました。手元とGPUをつなぐ図、大きな数字、動きの時間軸、AIが見ている画像、の4つです。

写真については、次の指示がありました。

• 生成AIで作った画像ではなく、実際の画像を使う
• いくつか画像があるので、画像を変えて提案する
• 写真はデザインで手を入れる。元の画像そのままで出さない
• 書体も別のパターンを用意する（今のサイトと同じ書体の案も入れる）

この中から選んだのが、見積書と利用明細を同じ大きさで並べる案です。左に買わなかったPCの見積書（打ち消し線の ¥750,000）、右に借りたGPUの利用明細（¥4,677）、間に「およそ1/160」を置きます。説明を読まなくても、2枚の書類の数字の差で話が伝わります。

• ねらい：最初の画面だけで、このページが何の話かを伝える
• 変わったこと：置き方だけが違う案から、主役の違う4案になり、選ぶ材料ができた。選んだ案では、見積書と利用明細の金額の差が、説明を読む前に目に入る
• 見込める効果：「買うより借りた方がずっと安かった」が最初の画面で伝われば、それが続きを読む理由になる

土台を詰める：最初の画面1枚だけを、先に仕上げる

全体を組む前に、最初の画面だけをキャンバスの上で詰めました。ここで決めたことが、ページ全体の基準になるからです。

網点（細かい点の集まり）の画像は、写真から Python で作りました。切り抜きは、写真の背景を自動で消す道具（rembg）を使っています。

• ねらい：最初の画面を、ページ全体の基準にする（写真の扱い・色の明るさ・書類の形）
• 変わったこと：2枚の書類が同じ大きさになり、比べる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割」という形だけを見せればよいので、文字を全部外しました。次に灰色をやめ、黒の面と斜線だけで描くことにしました。

斜線は、最初は灰色の地に灰色の線で、ぼやけて見えました。太さと間隔を変えた案を何度か並べ、黒と白が同じ太さの斜線1種類に決めました。そのあと、ページ中の斜線（メモリの図の足りないGPU、費用の図の置いていた時間、凡例）を全部この1種類にそろえています。

• ねらい：グラフに、1つのことだけを言わせる
• 変わったこと：文字のないグラフになり、差・交わり・3割という形の違いだけが見える。斜線が1種類になり、ページのどこでも「足りない／置いていた」の意味で読める
• 見込める効果：グラフを読み解く手間がなくなり、見出しを読む前に結論の形がつかめる

細部5：同じ形を、続けて並べない

さっきのセクションと全く同じレイアウト！単調でNGです。同じレイアウトを並べない。

01（GPUのメモリ）と 02（実際の費用）が、どちらも「左に見出しと文、右に横棒のグラフ」でした。02 を「見出しと大きな金額の横並び」と「全幅のグラフ」の上下2段に組み替えました。それでも、グラフが 01 と同じ横棒だったので、02 のグラフは縦棒にしました。7回分の棒が横に並び、下に何をした回かを置く形です。

04（9項目の比較）は、表のままだと単調だったので、別の形を4案出しました。

選んだのは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 の計算機の「借りる」の線と結論の文字です。

途中、色の入れ方を2回直しています。

• いったん見積書の側に橙を入れたが、「逆かな」と言われて利用明細の側に移した。見積書は「買わなかった」ものなので、目立たせる理由がない
• 見積書の注記の色が濁って見えた。茶色寄りの橙の文字に、ベージュがかった地を合わせていた。文字を澄んだ橙に、地を黄みのないごく薄い橙にして直した（その後、見積書は白黒に戻した）

最初の画面の写真は、アームがつかんだブロックの赤だけを残して、ほかを白黒にしました。02 の実機の動画も、同じようにブロックの赤だけを残した版を作って差し替えています。写真の中の赤は、ページの橙とは別に、「このブロックを運んだ」という話の主役として残しました。

• ねらい：色に意味を1つだけ持たせる
• 変わったこと：橙が「実際に払った分」と「押してほしいボタン」の2つの場所にだけ入り、ページの中で目が止まる場所が決まった
• 見込める効果：橙を追えば実費の話をたどれる。最後の橙のボタンが、押す場所としてすぐ分かる

最後の CTA：背景の違う案をいくら並べても決まらなかった

最後の「次の一歩」は、一番時間がかかりました。

最初は青地にしました。これは、色を外したときに残しておいた差し色の値が青だったので、確かめずにそれを使ったものです。

なんで青？ばっかり？

青以外の6色も並べましたが、「いまいち」でした。

背景の色や写真を替えるのをやめて、ページの流れから「最後に何を押させるか」を考え直した案を6つ出しました。最初の画面の見積書に続く3枚目の書類、計算機の結果をそのまま持ってきて相談する形、06 の続きの8枚目のカード、実機の写真を全面に敷いて一言を大きく、などです。

EのコピーはOK。あとはCTAっぽさを出そう

コピーが決まったので、形と色の組み合わせを詰めました。斜線の地に白いカードを置く形で、斜線の太さと色を変えた10案を並べ、黒の細い斜線にボタンだけ橙、という組み合わせに決まりました。

ここから先は、細かい直しが続きました。

• 斜線が一面だと目が痛い → ベタ（黒の面）を7割にして、斜線は一部だけにする案を4つ並べた
• 黒の面に、実機のアームの写真を薄く入れる
• 写真をもう少し暗く。斜線の範囲をもう少し広く
• 「全記録を読む」のボタンは外す（2つあると迷う）

途中、写真のアームを見せようとして、Claude が頼まれていないカードの形（幅と並べ方）まで変えました。

あれ？なんで中のパネルのデザイン変更した？そんなこと言ったっけ？

カードは元の形に戻しています。1セクションずつ詰める進め方では、直す範囲は言われた所だけにしないと、前に決まった所が崩れます。

• ねらい：読み終えた人に、次にすることを1つだけ示す
• 変わったこと：背景の工夫ではなく、「次は、あなたのロボットで。」の一言と、ボタン1つになった。どちらを押すか迷う2つ目のボタンはない
• 見込める効果：相談のボタンが押されやすくなる見込み。実際に押されたかは、公開後の問い合わせで確かめる

仕上がった最初の画面

翌朝：スマホで見直す

翌朝、エイイチが iPhone で公開中のページを見て、前の晩と同じように、画面写真に一言を添えて送ってきました。直しは約15分、公開は5回です。

直した所の多くは、PC で組んだ並べ方が、スマホでそのまま残っていた所でした。PC で横に並んでいたものが縦1列に積まれると、左にそろえた物、見出しの折り返し、横に長い図の見え方が変わります。

3つの数字：中央にそろえる

3つの数字で、先に結論セクションはグラフはセンター合わせ。各ミドルタイトルは折り返しなし（センター合わせ）説明文はそのまま。

グラフの数字もセンター合わせ

数字・グラフ・見出しを中央にそろえました。見出しは「、」の後の改行をやめて1行にし、画面の幅に合わせて字を少し小さくしています。説明文は左にそろえたままです。PC で3列に並べるために付けていた右の余白（28px）が、1列になっても残っていたので、スマホでは外しました。これが残っていると、中央に寄せた物が少し左にずれます。

• ねらい：PC では3つが横に並ぶので、左にそろえると3つの頭がそろう。スマホでは1つずつ縦に見るので、1つずつが画面の真ん中でまとまる方が読みやすい
• 変わったこと：数字、グラフ、見出しが中央の1本の線に乗った。見出しが1行になり、1つ分の高さも縮んだ
• 見込める効果：視線が上から下へまっすぐ流れ、3つの結論を続けて読める

01：グラフと価格の間を詰める

01セクションはグラフと価格の間が空きすぎ（グラフを大きくするなど調整）

スマホでは、棒グラフの右に価格の列を残していたため、棒が短く、棒と価格の間が大きく空いていました。価格を GPU の名前と同じ行の右に上げ、棒はその下の行で横幅いっぱいに使うようにしました。

• ねらい：GPU のメモリの量（棒の長さ）と、必要な量（破線）の関係を、はっきり見せる
• 変わったこと：棒が長くなり、16GB と 48GB の差や、破線をこえるかどうかが見やすくなった。名前と価格が同じ行に並ぶので、「この GPU はいくら」が一続きで読める
• 見込める効果：足りる GPU と足りない GPU の区別が、数字を読む前につく

02：横に送れると分かるようにする

02のグラフ横にスクロールするか、わからない。

7回分の縦棒は、スマホの幅には入りきらないので横に送る形にしていました。ところが、最初の画面に4本目までがほぼ全部収まっていて、グラフがそこで終わっているように見えていました。

Claude は手元で、縦棒を横棒に組み替えて7回分を縦に並べる案を作りました。公開する前に、エイイチから画面写真と次の一言が届きました。

こんな感じで少し横のグラフがちょい見せしてた方がいい。

縦棒のままにすれば、細部5で決めた「同じ形を続けて並べない」（01 は横棒）も崩れません。横棒の案は使わず、縦棒のまま次の棒が少し見える形にしました。最初は次の棒を9割ほど見せましたが、それでも終わりに見えました。

右のグラフもう少しだけ食い込んでいた方が横にスクロールするってわかりやすくなる

列の幅を画面の幅から決め、3本と半分が画面に入るようにしました。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が長いのでテキストセクションを画像にもっと食い込ませるように上に上げる（ロボットの台座の下くらいまで）

スマホでは、写真の下に文字が続く形で、最初の画面が縦に長くなっていました。文字を、ロボットの台座のすぐ下まで上げて写真に重ねました。重なる所は、写真の下側を背景の色にぼかして、文字が読めるようにしています。

• ねらい：開いてすぐの画面に、見出し・説明・ボタンまでを入れる
• 変わったこと：直す前は、ボタンが画面の下の端で、ブラウザのバーの裏に隠れていた。直した後は、スクロールしなくてもボタンが見える
• 見込める効果：開いてすぐ、何のページで、次に何を押せばよいかが分かる

スマホで見て分かったこと

• PC で左にそろえた物は、縦1列になると、中央にそろえた方がまとまる所がある。1つずつを順に見る場所がそうだった
• PC の並べ方のために付けた余白や列は、1列になっても残る。スマホの幅で見るまで気づかない
• 横に送る図は、次の列が半分ほど切れていないと、送れると分からない
• Chromium で確かめても、iPhone の Safari では折り返しが違うことがある。最後の確かめは iPhone で行う

進め方を並べると

この晩の進め方を、決めた順に並べると次のとおりです。

記録 ― この晩の公開の記録（git のコミット 65件）

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 導入比較ガイド：比べる範囲の注記を中央揃えにした

翌朝、スマホで見直したときの公開の記録（git のコミット 5件）。

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つ出たので、画像の右側（ブロックのある範囲）だけに限った。

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 で赤だけ残す

# 試しに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

-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 のファイルからスクリプトが読み、画面には出していない。

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'))

LOG361_v3_success_181602_red.mp4 True []
LOG361_01_success_181602_red.jpg True []

ページのソースコード

src/pages/gpu-buy-or-rent.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、買うか借りるか｜実費と損益分岐の計算機';

src/components/GuideBanner.astro（トップと /series6 の入口のバナー）

---
// 導入比較ガイド（/gpu-buy-or-rent）への入口。トップと /series6 に置く
---
<a class="guide-bn" href="/gpu-buy-or-rent">
  <span class="gb-figs" aria-hidden="true">
    <span class="gb-buy">¥750,000</span>
    <span class="gb-rent">¥4,700</span>
  </span>
  <span class="gb-text">
    <span class="gb-label">導入比較ガイド</span>
    <span class="gb-title">ロボットAIの学習用GPU、買うか借りるか</span>
    <span class="gb-sub">これから学習環境を用意する企業・研究者・エンジニア向け。実際に借りて学習させた費用、損益分岐の計算機、判定フローで決められます</span>
  </span>
  <span class="gb-go">読む<i class="ms">arrow_forward</i></span>
</a>
<style>
  .guide-bn { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px;
    padding: 36px 36px; border: 0; border-radius: 0; background: #0b0c0e; color: #fff; text-decoration: none; }
  .guide-bn::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url(/site/gbr/reverse.webp) right center / cover no-repeat; transition: transform .6s ease; }
  .guide-bn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,12,14,.94) 0%, rgba(11,12,14,.78) 50%, rgba(11,12,14,.3) 100%); }
  .guide-bn:hover::before { transform: scale(1.03); }
  .guide-bn:focus-visible { outline: 2px solid #121418; outline-offset: 3px; }
  .gb-figs { display: grid; gap: 4px; font-family: 'Manrope', 'Noto Sans JP', sans-serif; font-variant-numeric: tabular-nums; line-height: 1.1; }
  .gb-buy { font-size: 20px; font-weight: 800; color: #8d939d; text-decoration: line-through; text-decoration-thickness: 2px; }
  .gb-rent { font-size: 34px; font-weight: 800; color: #f2600c; letter-spacing: -.01em; }
  .gb-text { display: grid; gap: 4px; min-width: 0; word-break: auto-phrase; text-wrap: pretty; }
  .gb-label { font: 700 12px/18px var(--sans); color: #b9bec7; letter-spacing: .08em; }
  .gb-title { font: 900 22px/1.45 var(--sans); color: #fff; }
  .gb-sub { font: 400 14px/1.7 var(--sans); color: #c8ccd4; max-width: 46em; }
  .gb-go { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 20px; border-radius: 4px;
    background: #f2600c; color: #fff; font: 700 14px/1 var(--sans); white-space: nowrap; transition: background .15s, color .15s; }
  .guide-bn:hover .gb-go { background: #fff; color: #121418; }
  .gb-go .ms { font-size: 18px; transition: transform .2s; }
  .guide-bn:hover .gb-go .ms { transform: translateX(3px); }
  @media (max-width: 699px) {
    .guide-bn { grid-template-columns: 1fr; gap: 14px; padding: 24px 20px; }
    .guide-bn::after { background: rgba(11,12,14,.82); }
    .gb-figs { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 14px; }
    .gb-rent { font-size: 28px; }
    .gb-title { font-size: 19px; }
    .gb-go { justify-self: start; }
  }
</style>