RACLIEのトップには、AIの情報を読むJournal、作品、ツールの3つの入口があります。今回はCycle Pilotで比較条件と成果物を管理し、3案の良い部分を組み合わせてローカル版を作りました。
記事200本、作品とツールは各6件を想定する
最初の案には、コンテンツが増えた後の探し方が十分に入っていませんでした。そこで、記事は約200本、作品とツールはそれぞれ現在の1件に5件を追加する想定で仕様を見直しました。この数は設計条件で、現在の掲載実績ではありません。
トップでは記事を最大3本、作品とツールは注目の各1件に絞ります。Journalには検索とカテゴリ、新着・人気の切り替えを置き、全件は一覧から探せる構成にしました。
3案を同じ条件で採点する
画像案は同じ画像生成ツールで作成しました。以下は将来の構成例です。画像中の200本・各6件は想定数で、操作できる画面のスクリーンショットではありません。
区画の分かりやすさ20点、読みやすさ15点、作品10点、ツール10点、サイトらしさ10点、実装のしやすさ10点、増加後の探しやすさ25点の配点です。各項目を5段階で自己評価し、配点を掛けて100点に換算しました。
| 対象 | 点数 | 採りたい部分 |
|---|---|---|
| 変更前 | 63 | 既存の3区画と実物画像 |
| 案1 | 83 | 検索・カテゴリと新着・人気の入口 |
| 案2 | 77 | 作品画像の大きさ |
| 案3 | 86 | 短い導入、一覧と個別リンクの区別 |
点数は同じAIの自己評価で、読者の評価や操作成功率ではありません。増加後の探しやすさの配点を40点へ変えると、案1が87点、案3が84点になりました。作品を40点へ変えると案2と案3が84点で並びます。配点によって順位が変わるため、総合点だけで採否を決めませんでした。
案3を土台に、記事の探し方と作品画像を組み合わせる
案3の短い導入と一覧への入口に、案1の検索・カテゴリ、案2の作品画像の見せ方を加える方針を選びました。Hanabiの掲載には、生成画像を切り抜かず実物のスクリーンショットを使っています。
記事・作品・ツールの件数と一覧は、同じ掲載データから生成します。記事一覧は検索・カテゴリ・20本ごとのページ送りに対応します。人気の計測はまだ導入していないため、集計中と表示しています。架空の順位や閲覧数は載せていません。
組み合わせたトップは、元の案3の86点を引き継ぐものではありません。統合後は同じ7項目の配点で89点と自己評価しました。記事の探し方を補った一方、作品画像の読みやすさやサイト独自の表現には改善の余地があります。実読者の評価は未取得です。
Cycle PilotとSkillをどう使い分けたか
Cycle Pilotでは、現状の分析から設計同期までの8工程を実施し、工程ごとの成果物と状態を保存・再取得しました。途中で増えた要件は旧案と分けて記録しています。評価では採点式と配点変更時の得点を照合し、進め方の見直しでは今回の要件不足を汎用ルールへ広げないと判断しました。最後に、実装と確認に必要な仕様を引継ぎ資料にまとめました。
Product DesignのideateとImagegenを画像案の作成に使いました。Frontend App Builder、Anthropicのfrontend-design、VercelのWeb Interface Guidelinesは設計の参照にしています。実装ではimage-to-code、表示確認ではfrontend-testing-debugging、日本語の点検ではyomiyasuを使いました。Figma Make、Penpot MCP、Google Stitchも公式情報を調べましたが、今回の画像生成には使っていません。
Cycle Pilotが管理する設計・比較資料を基に、Codex側でHTMLを実装しました。設計の保存、ローカルでの表示確認、サイトの公開は別々の工程として記録します。
参考にした公開資料
Anthropicのfrontend-design、VercelのWeb Interface Guidelinesを参照しました。外部ツールはFigma Make、Penpot MCP、Google Stitchの公式資料を検討しています。
確認状況とこれから
今回用意したのは、統合トップ、記事・作品・ツールの一覧、検索と切り替え、制作記録です。人気のアクセス計測と実読者の評価はこれからです。ローカル版ではPC・スマホの検索、切り替え、リンクと戻る操作を確認しました。別の一時サーバーでは200記事・作品とツール各6件の検証データを使い、ページ送りと件数を照合しています。この検証データは実際の掲載数に含めていません。サイトの本番公開は別途進めます。