てがろぐオリジナルのスキンを作るver.2

てがろぐあれこれバイブコーディング

Cursor導入

前回の記事のあと、結局Cursorを導入して、1ヶ月間だけ課金しました。

なんで前回はCursorを使わなかったかというと、Linux環境だと起動もコマンド打たなきゃならないっぽいということで、めんどくさいなーと思ったからでした。
で、結局のところ、自分の環境下では普通に他のLinuxソフトと同じようにコマンド打たなくてもアイコンから起動できました。インストール方法はChatGPTに聞いた。この辺はあんまり情報がなかったんで良かった。

そんでもって、ざっくりとした指示でてがろぐスキンを作らせて、直させて、を少し繰り返したら、すぐに無料枠を使い果たす。
これはダメですね、ってことで課金しつつ、ガッチリ作らせるプロンプトはChatGPTに聞いて、それをCursorにコピペして作らせてました。

できたものはこれ

そういう作業を何度かやるうちに、だんだんコツが掴めてきて、現在のスキンはこんな感じです。

シンプル〜になりました。

実際のプロンプト例

Cursorでプロンプトを書くとき、自分で適当にやりたいことを書くと、あとから修正が多くなるんですよね。枠を消費するのがもったいないので、ガチガチのプロンプトにしたほうが良い気がします。

以下がChatGPTが作ったプロンプトです。自分がこういうスキンを作りたいなーってのをざっくり決めてChatGPTに「こういうデザインでCursorでのプロンプトを考えて」と言うと吐き出してくれます。

あくまで例ですが、これくらい書くと、どうするかをこちらに聞きながら作業してくれます。しかしながら聞かれても分からん部分もあるので、おすすめを伝えてくるように指示してます。
こういうテーマで作りたいってのを一行だけ書いても、ChatGPTがいい感じに整えてくれるようです。聞きながらやれって言ってるので、サイドに何置く？とかの質問に答えていくと、設計書をCursorで作って、仕様が決まった時点で作業してくれます。

Role

あなたはHTML・CSS・JavaScript・てがろぐの仕様を熟知したUI/UXデザイナー兼フロントエンドエンジニアです。
目的は、てがろぐ用の完全オリジナルスキンを一から設計・制作することです。
デザインだけではなく、保守性・可読性・拡張性・配布しやすさまで考慮してください。
---
最重要ルール

勝手に実装を進めないでください。
仕様が曖昧な箇所、複数の実装方法がある箇所、デザインに関わる判断が必要な箇所は、必ず私へ質問してください。
独自判断で仕様を決定して実装することは禁止します。
ただし、
「一般的にはこちらがおすすめです。」
という提案は積極的に行ってください。
私は提案を確認し、採用するかどうか判断します。
つまり、
- 勝手な実装は禁止
- 積極的な提案は歓迎
という方針です。
---

制作方針

このスキンは配布前提です。
そのため、
- 読みやすいコード
- 保守しやすい設計
- コメントが十分に書かれていること
- 初心者でも編集しやすい構成
- 将来の機能追加が容易な設計
を重視してください。
コードの短さよりも可読性を優先してください。
---
デザインコンセプト

2026年らしいシンプルモダン。
余白を大切にしたミニマルデザイン。
日本語を読むことに集中できるタイポグラフィ。
文字を主役とし、装飾は控えめで上品に。
情報量が増えても疲れないデザインを目指してください。
---
カラーテーマ

アクセントカラーはブルーグレー。
落ち着いた配色とし、派手な色使いは避けてください。
---
CSS設計

CSSカスタムプロパティ（":root"）を積極的に利用してください。
繰り返し使用する値はすべて変数として管理してください。
例
- 色
- フォント
- 余白
- 角丸
- シャドウ
- アニメーション速度
- ブレークポイント
- コンテナ幅
など。
値のベタ書きは極力避けてください。
---
レイアウト

モバイルファースト。
レスポンシブ対応。
PCでは
・左カラム固定
右側へ本文を表示。
スマートフォンでは
・カラムを上部へ移動
縦並びレイアウトにしてください。
---
カラム内容

左カラム（モバイルでは上部）
以下を表示してください。
- サイトタイトル
- About
- Gallery
- Category
Aboutは固定プロフィールではなく、管理画面から編集できるフリースペースを表示してください。
Categoryはナビゲーションメニューとして扱い、シンプルで分かりやすいデザインにしてください。
---
タイポグラフィ

本文を最優先で設計してください。
以下を丁寧に調整してください。
- 行間
- 字間
- 段落余白
- 見出しとの距離
- リストの余白
本文フォントは
- セリフ体
- サンセリフ体
を切り替えられるようにしてください。
---
テーマ切替

以下を実装してください。
- ライトテーマ
- ダークテーマ
CSSカスタムプロパティで管理してください。
---
JavaScript

必要最低限のみ使用してください。
実装する機能
- トップへ戻るボタン
- ライト／ダークテーマ切替
- セリフ体／サンセリフ体切替
JavaScriptに依存しすぎない設計にしてください。
---
アイコン

シックで統一感のあるアイコンフォントを採用してください。
文字主体のデザインを邪魔しないことを最優先としてください。
---
てがろぐ仕様

できる限りHTMLを書き換えず、
てがろぐ標準機能・テンプレートタグ・記法
を利用して実装してください。
将来のてがろぐ更新に強いスキンを目指してください。
---
投稿デザイン

投稿本文は
1行目をタイトル
として扱うデザインにしてください。
文字を読むことを最優先としたレイアウトにしてください。

---
ギャラリー

ギャラリー表示に対応してください。
一覧表示時も余白を大切にし、サイト全体の世界観を壊さないデザインにしてください。
---
テキスト装飾

以下をデザインしてください。
- 太字
- 強調
- 引用
- リスト
- コードブロック
- インラインコード
- テーブル
- リンク
- 見出し
- 注釈
- 区切り線
派手ではなく、読みやすさを重視してください。
---
HTML・CSS

HTML・CSSともに読みやすさを重視してください。
コメントを適切に追加してください。
CSSはセクションごとに整理してください。
例
- Root
- Reset
- Layout
- Header
- Sidebar
- Navigation
- Entry
- Gallery
- Footer
- Button
- Typography
- Forms
- Dark Theme
- Utilities
---
フッター

フッターには以下を表示してください。
- ホームへのリンク
- RSSフィードへのリンク
シンプルで上品なデザインにしてください。
---
アクセシビリティ

以下へ配慮してください。
- キーボード操作
- フォーカス表示
- コントラスト
- スクリーンリーダー
- prefers-reduced-motion
---
パフォーマンス

不要なライブラリは導入しないでください。
軽量で高速なスキンを目指してください。
画像を前提とした重いアニメーションは禁止します。
---
配布前提

利用者が簡単に編集できる設計にしてください。
設定値は可能な限り":root"へまとめてください。
CSSだけで色やフォントなどを変更しやすい構成にしてください。
---
ファビコン

ファビコンはHTMLへ埋め込みません。
てがろぐ管理画面から設定します。
その代わり、
アルファベットA〜Z（26種類）のファビコン画像
を制作してください。
スキンと統一感のあるデザインにしてください。
---
OGP画像

スキンに合ったOGP画像を制作してください。
文字は入れません。
ブルーグレーを基調とした抽象的・ミニマルなデザインにしてください。
設定は管理画面から行います。
---
開発手順

一度に全て実装しないでください。
以下の順番で進めてください。
1. 要件整理
2. 不明点の質問
3. 改善提案
4. 全体設計
5. ディレクトリ構成
6. デザインガイドライン作成
7. HTML設計
8. CSS設計
9. JavaScript設計
10. 実装
11. 動作確認
12. リファクタリング
13. コメント整理
14. 配布前チェック
各工程が完了するたびに私へ確認を取り、承認後に次の工程へ進んでください。

（配布用にしようと思ったんですが、結局納得がいっていないので、配布しないことになってます）

これで実際にできたものがこれです。できたら自分のてがろぐにアップして、直してほしいところを直して、という作業を繰り返して、できたものがこれです。

タイトルありで作ったので、自分のてがろぐとは合わないんですが。あとから思いついて色々足して、その後納得が行くものができないので放置。一応、昇順で並べたり小説向けの機能なんかも実装しているはずなんですが、動作確認していない。その名残でしおり機能がある。

スキンの雰囲気に合わせてファビコンとかも全部作ってくれるので、こだわりない人は一緒に作ってもらうといいと思います。

面倒な人向け

ガッチガチに指示すれば、確かにそのとおり作業してくれますが、ただし、思い通りにいかないときのストレスがすごい。
結局のところ、どうやればできるのか自分で理解している（ただしコードは書けないor書くのが面倒）くらいの知識感がないと難しい部分があるなと思っています。そのへんも、もっと進化が進めば変わるんでしょうが。

で、現状で自分が一番楽しいなと感じるのは、とくにこだわりが無ければおすすめで全部サクッとやってもらう。ってのです。

こんなプロンプトで指示してみました。単純に自分が個人サイトが好きなので、個人サイトといえば創作者用だろうということで。これは特にChatGPTを挟まず。

てがろぐのスキンを作ります。対象は個人で同人サイトをつくる人です。AI自身が思う良い同人・創作者用のスキンを考えて、デザインから実装まですべて行ってください。

ただし、プロンプトをCursorに書くときは、メモ帳とかで書いたのを貼り付けたほうがいい気がします。
これは自分の環境で、CursorもVScodeも日本語入力できない（貼り付けならOK）だからそうしているってのもあるんですが、ちゃんと考えて指示出したほうがよい。（当たり前）特にCursorはエンター押して間違ってプロンプトを送ってしまうのがもったいないので、これでええな、ってのを貼り付けたほうが気楽です。

で、明らかに表示が変な部分とか、自分の好みに合わない部分とかを修正してできたものがこれ。

さらっとしか直してなくてもこれくらいのものができます。はじめはもっとデザインがガチガチAIだったんだけど、個人サイトっぽくと言ったらこうなった。
そしてAIが作った静的サイトでのプレビューの中身も同人活動している「よるねこ」さんという架空の人物のてがろぐになっていて面白かった。だれ？？？

ざっくりした指示でもこれくらいはやってくれるので、こだわりが少ない場合はバフッとした指示で、どうしても譲れない部分のみ書くってやり方でもいいように思います。

バイブコーディング