# .txt (dottxt)｜サービス / SaaSのWebデザイン参考

> 見出しはドット文字、UIは昔のパソコンの窓。LLMの構造化出力を扱う.txt（dottxt）のサイトは、ピクセル文字の見出しとレトロなウィンドウにコマンド例を収め、地味な開発者向け技術を触りたくなる道具に見せる。

- URL: https://dottxt.ai/
- 解説ページ: https://katapick.com/sites/dottxt
- カテゴリ: サービス / SaaS / 地域: 海外（US）/ 業種: AI・LLM開発者ツール
- テイスト: 等幅フォント、大胆なタイポ、レトロ、ライト、3D/WebGL
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 36 時間）

## 編集部のひとこと（Leo）
右上のザラザラしたディザの画像、今にも動き出しそうでワクワクする！しかもFVのパートだけやたら縦に長いから、スクロールした瞬間に何か始まるっぽい。予告編の1カット目みたいな溜め、好き！

## デザインの見どころ
- FVの小窓に、コマンドと返ってくるJSONをそのまま載せる。何ができるかを、説明より先にコードで見せる
- ナビの各項目に P・D・B の色付きキーを添える。キーボードショートカットの見た目で、開発者の手癖に寄せる
- ピクセル文字と等幅の中で、キャッチだけ滑らかなサンセリフ。硬いレトロ感に、いまのプロダクトの顔を足す

## 配色
- #efefef Terminal Gray（外側の背景）
- #ffffff Window White（パネル / ウィンドウ）
- #000000 Pixel Black（テキスト / 枠線 / ボタン）
- #ddb8ca Rose Key（キーアイコン / セクション背景）
- #7f9acf Periwinkle Key（キーアイコン）
- #79311b Rust Brown（セクション背景）

## フォント
- ピクセル文字の大見出し: neueBit Bold（代替: Pixelify Sans）
- ナビ・ラベル・コード: PP Neue Montreal Mono（代替: JetBrains Mono）
- 本文・サブキャッチ: PP Neue Montreal（代替: Inter Tight）

## よくある質問
### .txt（dottxt）のサイトで使われているフォントは？
ピクセル文字の見出しに neueBit Bold、ナビやコードに PP Neue Montreal Mono、本文に PP Neue Montreal が使われています。無料で近づけるなら Pixelify Sans、JetBrains Mono、Inter Tight の組み合わせがおすすめです。

### dottxtのようなレトロなウィンドウUIはどう作る？
黒の1px枠とぼかしのない box-shadow で影を付け、上部に二重線のタイトルバーと × ボタンを置きます。中身は等幅フォントでコマンドと出力を組むと、ターミナルらしさが出ます。

### dottxtのデザインはどんなサイトの参考になる？
API・SDK・CLI などの開発者向けツール、AIインフラ、オープンソースプロジェクトのプロダクトサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/dottxt からダウンロードできます。
出典: Katapick（https://katapick.com）