No. 14
触れる開発ツール Relay Developer
ミント色の製品画面と等幅のイベントログ。シミュレーションを実行して、APIの応答を理解できる開発者向けサイト。
制作版：独立レビュー・別業種での再現検証は未実施です。
体験できること
入力に対応するコードと実行ログを切り替えるローカルシミュレーション。通信や偽の実測レイテンシは使わない。
表現の参考元
配色・情報構成・操作の考え方を研究し、オリジナルの架空ブランドへ展開しています。
仕様
| 書体 | 等幅書体 |
|---|---|
| 配色 | パステルカラー |
| 情報量 | 標準 |
| レイアウト | 整然とした格子 |
| 装飾 | 無骨で構造的 |
| 動き | 動きが体験の一部 |
| 雰囲気 | 信頼・堅実 / 先鋭的・緊張感 |
| 業種 | SaaS・IT / 企業サイト |
| 架空企業 | 架空・RELAY / SDK |
| 利用条件 | 商用利用可・改変可・クレジット不要 |
このブランドのロゴ
実際のロゴ生成指示を見る
# RELAY — ヘッダーロゴ ## 制作 2026-09-15 / built-in imagegen。既存サイトのロゴ画像は入力せず、架空ブランド向けに新規生成。 - 画像: `assets/logo.webp`（生成結果をWebPに圧縮、アルファ保持） - 用途: トップページのヘッダー、または固定サイドのブランド表示 - 方向: developer infrastructure, interlocking signal relay symbol and precise compact technical wordmark - 表示: 最大 74 × 25px の枠内で縦横比を保持。スマートフォンでは幅と高さを縮小。 - ブランド名はalt属性に保持。リンクとナビゲーションは既存のまま。 - 同じ画像をデモHTMLに埋め込み、単一ファイルでも表示可能。 - 背景に応じたCSSフィルター: `none`。 ## 実際の生成プロンプト ```text Use case: logo-brand. Create one finished original website header logo for the fictional brand "RELAY". Art direction: developer infrastructure, interlocking signal relay symbol and precise compact technical wordmark. Palette: dark forest green. Exact text only: "RELAY". Compose an integrated distinctive emblem and custom drawn lettering as ONE compact horizontal lockup, about 3:1 ratio, occupying almost the entire canvas with only 4 percent padding. Must remain legible at 160px wide. Truly transparent alpha background; no background rectangle, mockup, paper, scene, shadow, 3D, watermark, extra labels or logo variations. Clean high resolution flat artwork. Do not imitate any existing brand logo. For Japanese text preserve every character exactly. ``` ## 運用 参考サイトのロゴ・商標を流用していない。生成物の商標調査・法的な類似性審査は未実施。 ### サイズ調整 ヘッダーの占有面積を抑えるため、ロゴを 74 × 25px、モバイルを 68 × 23px に縮小。本文の見出しより控えめな大きさにする。
DESIGN.md
# 触れる開発ツール / Relay Developer
## 1. デザインの核
ミント色の製品画面と等幅のイベントログ。シミュレーションを実行して、APIの応答を理解できる開発者向けサイト。
主役は画像や装飾の量ではなく、操作が内容の理解につながること。以下の規則を守り、別業種でも同じ視覚言語でトップページを設計する。
## 2. 情報構成
製品の宣言 → 即座に操作するplayground → 配送パイプライン → 使い始めの案内
デモは架空ブランド「RELAY / SDK」。ブランド名、コピー、実績は必ず移植先の内容に置き換える。説明のない装飾セクションは追加しない。
## 3. 色と書体
背景 #bcebcf、主文字 #123d2e、強調 #18593e、罫線 #70ae88。tokens.css を使う。明暗反転セクションにもこの関係を引き継ぐ。
本文は DM Sans + Noto Sans JP、メタ情報は IBM Plex Mono。表示用書体は下記のCSS仕様に従う。欧文と日本語を同じサイズに揃えず、それぞれの文字密度に合わせる。
## 4. レイアウトと固有の造形
次のスタイル仕様がこのパターンの輪郭を決める。クラス名は変えてよいが、比率・配置・タイポグラフィの役割は維持する。
```css
.relay-hero{padding:60px 5vw 45px;display:flex;justify-content:space-between;gap:40px;align-items:end}.relay-hero h1{font:500 clamp(44px,6.5vw,95px)/1.06 var(--font-mono);letter-spacing:-.08em}.relay-hero h1 span{color:#397951}.relay-hero p:not(.eyebrow){margin-top:30px}.version-stamp{border:1px solid #123d2e;padding:20px;text-align:center;min-width:155px;transform:rotate(5deg);font:11px var(--font-mono)}.version-stamp strong{display:block;font-size:58px;font-weight:400;line-height:1.4}.playground{margin:0 5vw 50px;background:#123d2e;color:#bcebcf;border:1px solid #123d2e}.terminal-head{display:flex;justify-content:space-between;border-bottom:1px solid #467559;padding:15px 25px;font:12px var(--font-mono)}.terminal-grid{display:grid;grid-template-columns:1fr 1fr;min-height:330px}.terminal-input{border-right:1px solid #467559;padding:30px}.terminal-input label{font:12px var(--font-mono);display:block;margin-bottom:15px}.terminal-input select{background:#bcebcf;color:#123d2e;border:0;padding:10px;width:100%}.terminal-input pre{font:15px/1.8 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;margin:25px 0}.terminal-input button{background:#bcebcf;color:#123d2e;border:0}.terminal-input p{font-size:12px;margin-top:15px}.terminal-output{padding:30px;font-family:var(--font-mono)}.terminal-output ol{list-style:none;padding:0;font-size:14px;line-height:2;margin-top:35px}.terminal-output li{padding:6px 0;border-bottom:1px solid #315d45}.terminal-cursor{display:block;margin-top:15px}.pipeline{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--color-line)}.pipeline article{padding:30px 30px 30px 0}.pipeline article+article{border-left:1px solid var(--color-line);padding-left:30px}.pipeline span{font:12px var(--font-mono)}.pipeline h3{font-size:26px;margin:25px 0 20px}.quickstart{padding:55px 5vw;border-top:1px solid var(--color-line);display:flex;align-items:center;justify-content:space-between;gap:30px}.quickstart h2{font-size:34px;margin-bottom:25px}@media(max-width:700px){header>.mono,.version-stamp{display:none}.relay-hero{padding-top:40px}.relay-hero h1{font-size:clamp(32px,7.8vw,55px)}.terminal-grid{grid-template-columns:1fr}.terminal-input{border-right:0;border-bottom:1px solid #467559;padding:22px}.terminal-head{padding:14px;font-size:10px}.terminal-output{min-height:220px;padding:22px}.pipeline{grid-template-columns:1fr}.pipeline article+article{border-left:0;border-top:1px solid var(--color-line);padding-left:0}.quickstart{display:block}.quickstart .cta{margin-top:30px}}
```
このCSSはスタイルの設計値。移植先の意味に沿ってセレクターを対応させ、架空の内容そのものを再利用しない。
## 5. インタラクション
入力に対応するコードと実行ログを切り替えるローカルシミュレーション。通信や偽の実測レイテンシは使わない。
- 操作前から内容を読める初期状態を用意する。JSが動かなくてもナビゲーションと本文を保持する。
- hoverのみでしか使えない機能は作らない。button、range、details等のネイティブ要素を使い、タッチとキーボードを同等に扱う。
- 選択状態は aria-pressed、結果更新は必要な箇所だけ aria-live で伝える。
- 動作低減設定では自動アニメーションを止め、状態変更は即時または静止画で返す。
- デモ用のCTAは実在する予約・購入として扱わない。移植時に実サービスへ接続する。
## 6. モバイル
700px以下では複雑な分割を一列にする。横回遊の見本だけは意図的な横スクロールを残す。ページ全体には横はみ出しを作らない。見出しはclampで縮小し、本文は16pxを維持する。操作対象は原則44px以上を確保する。
## 7. 禁止事項
- 背景をベージュや茶色に置き換え、全セクションを同じ温度に寄せない。
- 汎用の角丸カード3列へ構成を置き換えない。
- 意味のない紫青グラデーション、絵文字アイコン、架空の顧客ロゴを追加しない。
- すべてをフェードインさせて初期表示を隠さない。
- 参考サイトの画像・ロゴ・コピー・有料プロンプトは流用しない。
## 8. 再現の確認
背景・表示書体・主要な配置比率・固有の操作が保持されていること。別業種への移植では、操作対象をその業種で意味のある内容へ翻訳する。独立セッションによる再現検証は未実施で、検証済みの記録を偽って記載しない。
## ヘッダーロゴ（2026-09-15追加）
ブランド表示には新規生成した `assets/logo.webp` を使う。画像生成指示と表示条件は `LOGO.md` に記録。デモは画像を埋め込み、altにブランド名を残している。従来の本文用フォントによるロゴ表記は、この画像仕様に置き換える。別ブランドへ応用する場合はブランド専用に生成し直す。