KDP原稿づくりが、HTML/CSS独学の最強チュートリアルだった件
１，独学チャレンジ20日/100日、途中経過は「出版」！
HTMLとCSSの独学チャレンジを始めて、今日でおよそ20日。
100日プランのまだ5分の1にも満たないこの段階で、
私はある意味“ゴールのひとつ”とも言える経験をしてしまいました。
それは――Kindleでの出版です。
正確に言えば、「出版を通して、独学が実践レベルに飛躍した」感覚に近いかもしれません。
もともと、私はHTML/CSSをちゃんと学び直したくて、独学＋AI＋古本という三本柱での勉強をスタートしました。
でもその中で、「出版してみたい」という気持ちがふと湧き、気づけば本づくりが“最大の学習ツール”になっていたのです。
この20日間で、私はAIの助けを借りながらKDP原稿を組み立て、EPUB形式で整え、
ついにKindleストアで一冊の本を世に送り出しました。
正直に言えば、現時点で無料ダウンロードしてくれたのは、自分を除けばたった一人です。
でも、不思議とがっかりはしていません。
どんな方がどんな思いでダウンロードして下さったのかもわからないです。
でも、自分以外の誰かにこの本が届いたという事実が、
**「ゼロからイチを生んだ」**ことの確かな手応えとして残っています。
売れっ子から見れば、きっと“弱小”と笑われるような数字かもしれない。
だけど私にとっては、世界のどこかの誰かに、自分が作ったものを届けられたというだけで十分に意味がありました。
それが、20日間の学びのなかで得た、いちばん大きな達成だったのかもしれません。
２，血がにじむような試行錯誤の記録
出版までの道のりは、決してスマートなものではありませんでした。
むしろ、“血がにじむような試行錯誤”の連続だったと言っても大げさじゃありません。
最初は、Joplinでマークダウン原稿を書いて、それをVivliostyleでEPUB化しようとしました。
でも、アップロードしてはエラー、修正してはまたエラー……。
何が悪いのかもわからず、ただただ心がすり減っていく日々。
「じゃあ、でんでんコンバーターなら？」と思って切り替えてみても、状況は変わらず。
地道に試しても、一歩も進まない感覚に心が折れかけました。
その追い打ちのように起きたのが――PCクラッシュ事件です。
原稿作業中、フォルダ整理をしていた際に、うっかり重要な設定ファイルを削除してしまい、システムが起動しなくなるという大事故が発生。
もう本当に終わったと思いました。
でもここで、私の父（元システムエンジニア）が登場。
なんと、Arch LinuxでPCを復旧してくれたんです。
普段あまり頼らないタイプの私ですが、この時ばかりは本当に泣きそうなほど感謝しました。
復旧後は、気持ちを切り替えて、一から執筆環境を構築し直し。
エディタにはVSCodeを、EPUB編集にはSigilを使うことにしました。
道のりは決してなめらかじゃなかったけど、
ひとつひとつのハードルを越えるたびに、
少しずつ、“作ること”への理解と覚悟が深まっていった気がします。
３，AIとの二人三脚：独学じゃできなかったこと
もしAIがいなかったら、きっと私はいまだに古本をめくりながら、
「これはどこに書けばいいの？」「このエラー何？」と迷い続けていたと思います。
正直、AI（ChatGPT）の存在がなければ、たったの20日でここまでたどり着けなかったでしょう。
最初はまったく太刀打ちできなかった。
Vivliostyleやでんでんコンバーターで出るエラーの意味もわからず、
「このタグが閉じてないかも？」「CSSが上書きされてるのでは？」
なんて指摘されても、そもそも何がどこにあるのかが分からない。
そんな私に、AIは本当に根気強く、何度でも教えてくれました。
「この部分を修正してみて」と言われても、当初は“どのファイルをどう開けばいいか”すらおぼつかなかった。
でも、**「EPUB1」→「EPUB2」→……→「EPUB30」**と失敗と修正を繰り返す中で、
次第に「この構文、あやしいな」と目星をつけられるようになっていった。
AIはすぐに答えをくれるけど、何度も壁にぶつかるうちに、
「どう聞けば欲しい情報が返ってくるか」も自然と鍛えられました。
それはまさに、“AIとの対話”を通じた実践型学習だったように思います。
気がつけば、自分でコードを書けるわけじゃないけれど、
**「どこの、どのコードを、どう修正すれば動くのか」**を考え、判断できるようになっていた。
これって、インプット中心の独学では絶対に身につかなかったスキル。
**“実際に困る”という経験と、それを一緒に乗り越えてくれる存在（＝AI）**がいてくれたからこそ、
知識が生きたスキルに変わったんだと思っています。
４，気づけば、「コードが読めるようになっていた」
KDPの原稿をつくる過程で、
私は気づけば**「コードを読んで理解する」という感覚**を手に入れていました。
もちろん、最初は何もわかってなかった。
タグやプロパティをコピペして、AIに言われるがままに修正して。
とにかく「言われた通りにやる」ことしかできなかった。
でも、EPUBファイルを何十回も作り直していくうちに、
「あれ、このclass名、何してるんだっけ？」
「この部分、こないだもエラー出してた気がする」
そんなふうに、パーツの意味が見えてくる瞬間が訪れた。
コンテンツの本文はどこに書くのか？
目次の構造は？
タイトルページだけデザインがズレるのはなぜ？
画像はどこに入れて、どうリンクさせる？
content.opfでのスパイン（読み順）の定義とは？
そういった構造的な疑問が、点から線へ、線から面へとつながっていく感覚がありました。
「ああ、EPUBって本当に“HTML/CSSの集合体”なんだな」
「Zipファイルに見えて、その中身はちゃんと設計されてるんだな」って。
本で読んでもピンとこなかった“構造”が、
自分の手を動かした経験によって、初めて腹落ちした感じ。
完璧に理解しているわけじゃないけど、
少なくとも「どこをどういじれば、何が起こるか」はだんだん読めるようになってきた。
それは、間違いなく“書いて学ぶ”ではなく、
“直して学ぶ”“壊して覚える”という学習体験だった。
そしてその経験が、今までの「知識」を、ようやく「技術」に変えてくれたんだと思う。
５，最後は「詰めのCSS」で泥仕上げ。でも、やり切った
KDP原稿づくりの終盤、いちばん神経を使ったのがデザインの整え方でした。
特にこだわったのは、タイトルページの体裁と、
本文内に出てくる見出しの“見せ方”の統一感です。
読者が最初に目にするのはタイトルページ。
ここで雑な印象を与えてしまったら、
そのあとにどれだけ中身が良くても読み続けてもらえない気がして、
見出しの位置・行間・余白に至るまで、細かくCSSで調整しました。
でも、それが本当に大変だった。
高さが合わない。中央揃えになってしまう。
本文中の一部の見出しだけ、なぜか余白がズレる――そんな地味な不具合が何度も発生。
同じスタイルを当てているはずなのに。
ただ、上端から統一してスタートさせたいだけなのに。
この「見出しのブレ」を解消するのに、色使い、フォントサイズ、マージン調整、line-heightやtext-alignの細かい調整を何度も繰り返すことに。
そして結局、最後は !important で上書きして、強引に形を整えるしかありませんでした。
泥仕上げ――だけど、やり切った。
DALLEで生成したイラストも、できるだけページごとのトーンを揃えたくて、
同じ画風になるよう何度もプロンプトを調整。
画像はDPIやメタ情報を調整して軽量化し、読み込みのストレスを減らすようにも工夫しました。
「読みやすさ」「視覚的な統一感」「迷わせないレイアウト」
それは、コードの正しさ以上にこだわった部分です。
きれいなコードはまだ書けない。
でも、「読者の体験」を考えて設計するという意識だけは、今の自分にも持てたと思っています。
６，これが私の“最初の一冊”です📘
最後に、今回のチャレンジで形になった電子書籍をご紹介します。
✅ キャンペーン実施期間（日本時間）
📅 2025年4月4日（金）16:00 〜 4月9日（水）15:59
※期間中は、Kindleストアで0円で読めます！
（Kindle Unlimited未加入の方でもOK）
この本は、正直に言えば中身よりも**「どうやって作ったか」**に価値があるかもしれません。
HTMLやCSSを勉強しながら、AIに助けられつつ、
なんとか一冊の電子書籍として“かたち”にできた記録そのものです。
もし、「自分でも電子書籍を作ってみたい」
「HTML/CSSの実践の場がほしい」
そんなふうに思っている方がいたら、
この本の構造や体裁、読みやすさをどう工夫したかに注目してもらえたら嬉しいです。
実際、Webページを一から作るよりも、
“Webコンテンツ（電子書籍）を作る”方がハードルは低いと感じました。
ブラウザでの複雑なデザイン対応や動的な処理がないぶん、
「構造とスタイル」に集中できるのがEPUBの良さでもあります。
EPUB形式で電子書籍を作ることは、思っていたよりずっと学びが深くて、面白くて、泥臭くて、リアルでした。
そしてなにより、「本を読む」ではなく**「本を設計する」ことで、コードの意味が腑に落ちた**。
もしあなたも、電子書籍づくりやHTML/CSSの実践を考えているなら――
EPUB制作は最高の教材になると、本気でおすすめしたいです。
７，次に目指したいこと
今回の制作を通して、ひとまず「形にする」ことはできた。
でも、それはあくまでスタート地点に立っただけなんだと思う。
これからの課題は、コードの美しさやスマートさを追求していくこと。
いまは動くからOKにしていた書き方も、
もっとシンプルに、もっと意味のあるマークアップに整えていきたい。
見た目のデザインも、もっと洗練させたい。
色のバランス、余白の取り方、読みやすい行間やフォントの選び方……
ちょっとした工夫で、読者の体験は大きく変わる。
そして何より大事にしたいのは、
**「読者の快適さ」にこだわるという姿勢＝“接遇としての電子書籍”**という考え方。
ただ読ませるのではなく、
**“迷わせず、疲れさせず、心地よく届ける”**という工夫を、
これからの作品にもっと詰め込んでいきたい。
出版というかたちで終わらせるのではなく、
読者にとって“使いやすい本”、“また開きたくなる本”を目指して。
そのために、これからも学び、手を動かし、作り続けていきたいと思っています。
Discussion