coiai Logo

#8 バイブコーディングでのデザインガイドラインとdocsの使い方


今週の技術ニュース:Claude Opus 4.6 リリース

Anthropic から新しいモデル Opus 4.6 がリリースされた。普段から Claude Code を利用しているが、今回のアップデートでは記憶できるトークン数がかなり増加している。これまで Claude Code に相談しながらコーディングしていると、過去の情報を忘れてしまうことがあったが、それが改善されたようだ。

まだ2日間ほどしか使えておらず、性能向上を体感するには至っていないが、感触がつかめたら改めて1本のエピソードとして取り上げたいと思う。


メイントピック

1. リポジトリに docs ディレクトリを作ろう

リポジトリのルートに documentsdocs ディレクトリを作成し、プロジェクトの仕様や README に書ききれない情報をまとめておくという運用を始めた。友人に勧められて要件定義書は書いていたが、それに加えて以下のような情報も記録している。

  • インフラ構成(Firebase / GCP / AWS の設定やサービス構成)
  • README に収まりきらないプロジェクト固有の知識

Wiki に書く方法もあるが、.md 形式でリポジトリ内にまとめておけば、どんな環境でも読めるという利点がある。

バイブコーディング時代の「開発日誌」としての活用

バイブコーディングの時代では、AIの性能が上がるにつれて「自分が実装したことのないものをAIが実装してしまう」ケースが増えている。Git のコミットメッセージだけでは不十分だが、毎回 AI に質問して確認するとトークンを消費してノイズになる。

そこで、docs/diary/ のようなディレクトリを作り、一連の作業が終わったタイミング(ブランチの作業完了時、機能単位、コミットごとなど)で Claude Code や Cursor に開発日誌を書かせるのが有効だと考えている。

チーム開発では不要なファイルが増えてしまう懸念があるが、AIと人間の1対1のバイブコーディングであればかなり効果的だという実感がある。


2. デザインガイドラインはマークダウンで書くべき

もともとフロントエンドエンジニアとして UI デザインを得意としており、Figma で丁寧にデザインガイドラインを作っていた。カラー、フォントサイズ、スペーシング、アニメーション、ボーダーラディウスまで細かく定義していた。

しかし、これからの時代はマークダウン形式で書いた方がよい。理由はシンプルで、AIが読めるからだ。

現状、AI が生成するデザインはどうしても画一的になりがちで、「黒背景に青のメインカラー、Material UI ベース」のような無難なデザインに収束してしまう。デザインガイドラインを .md で渡してあげることで、AIが作っても個性のある見た目になる。

さらに、OpenClaw のような自律型ツールを使う場合は、以下のような知識をまとめて AI に読み込ませておくとよい。

  • Human Interface Guidelines(Apple)
  • オブジェクト指向UI(OOUI) の知識

これらをスキルとして登録しておけば、AI が「人間にとって使いやすいとは何か」を根本的に理解した上でアプリを作れるようになる。


3. 今こそセキュリティの基礎知識が必要

バイブコーディングでアプリを作っていくと、バックエンドやセキュリティまわりが不透明になりがちで、そこに怖さを感じている。顧客情報を扱うようなアプリケーションをバイブコーディングで作る場合、セキュリティの基礎知識は人間が補う必要がある

自分自身、もともとデザインやフロントエンドが専門だったが、AI の登場でバックエンドやインフラ(AWS / GCP)を積極的に触る機会が増えた。その中でセキュリティ知識の不足を実感し、書籍や動画教材で勉強を始めている。

会社であればセキュリティ担当やインフラ担当に任せられるが、代表として基礎知識は持っておく必要があると考えている。


ウィークリー:今週やったこと

今週は先週に引き続き XR 開発の案件を進めていた。ただ、取引先との打ち合わせで丸1日潰れる日があり、開発に充てられた時間はほとんどなかった。創業間もないベンチャーとしての難しさを感じる週だった。

最近、日記に円グラフで1日の時間配分を可視化する取り組みを始めている。5分程度で書けるので、自営業やフリーランスの方にはおすすめ。自分が何をやったか、何ができなかったかが一目でわかる。


株式会社coiaiでは、Web開発・XR開発・基幹システム・オンプレミスAIの導入支援を行っています。他社で断られた案件や見積もりが高すぎると感じた案件も、お気軽にご相談ください(お見積もり無料)。

投稿日: 2026年2月16日
カテゴリ:
タグ: