44dat DESIGN GALLERY

特許・知財事務所

明許国際特許事務所

架空ブランドを立てて制作したデザインデモです(2026-08-11 公開)。

実際のサイトを見る 別タブで開きます

明許国際特許事務所(特許・知財事務所)のホームページデザイン

明許国際特許事務所(MEIKYO IP)は、発明の言語化を専門とする東京・霞が関の特許事務所です。特許・実用新案・意匠・商標・審判・外国出願。明細書の記述精度で、あなたの発明を権利にします。

全ページビュー

明許国際特許事務所 — full page

このサイトの作られ方

実際の発注内容

ビルドの起点になった設計方針です。人が書いたものではなく、AI が毎朝生成した7案のうち選ばれた1案をそのまま載せています。

コンセプト 明許国際特許事務所 — 発明の言語化を掲げる知財事務所のマニフェスト型サイト

スタイル
白地マニフェスト・エンジニアリング美学
レイアウト
分割スクリーン(左: 宣言文1カラム/右: 生成canvasパネル)
タイポグラフィ
mono強調(タイプライター宣言文+tabular)
モーション
hero の業務語彙サイクル(名詞句連鎖のキネティック組版)+生成canvasフィールド常時描画
配色
紙白×インク黒+コバルト1点
狙い
LPをほぼ思想文だけで構成する胆力。装飾を1枚の生成canvasに集約し、27KBの軽さまで思想と一貫
設計の勘所
業務語彙(意匠・商標・審決…)の名詞句列挙をそのまま hero のキネティック要素にする型
ビルダーに渡した指示文の全文を見る

上の提案をもとに AI が起こした詳細ブリーフです。これがそのままコードを書く AI への入力になりました。原文のまま載せています。

# 明許国際特許事務所 デザインブリーフ v1


**Design Read:** マニフェスト型 LP for 技術者出身の知財責任者、白地エンジニアリング美学の言語で、native CSS + キネティックタイポ + 生成 canvas に寄せる。
**Dials:** DESIGN_VARIANCE 7 / MOTION_INTENSITY 6 / VISUAL_DENSITY 3。動きは hero の語彙サイクルと生成 canvas の 2 箇所に集中投下し、それ以外のセクションは静かに保つ。

---

## ブランド軸

- **名前:** 明許国際特許事務所(欧文表記: MEIKYO IP)
- **業種:** 特許・実用新案・意匠・商標・審判・外国出願を扱う知財事務所
- **ペルソナ:** ディープテック系スタートアップの創業者/CTO、メーカーの研究開発・知財担当、大学発ベンチャーの経営陣。30〜50 代、技術者出身。曖昧な営業トークと「安心・信頼」の常套句を最も嫌い、論理と文章の精度で相手を判断する層。
- **価格帯:** 中〜高。着手金+成功報酬の明朗定額パッケージ。安売りはしないが、見積りの内訳はすべて開示する。
- **ブランド人格(4語):** 明晰・厳密・工学的・言語への偏愛
- **Why-This-Brand:** 発明は、言葉になるまで権利にならない。優れた技術が守られない最大の理由は、技術の不足ではなく記述の不足である。明許は「発明の言語化」を事務所の中心業務と定義し、ヒアリング・構造化・明細書執筆を一つの言語工学として磨いてきた。だからサイト自体も、写真や装飾ではなく文章そのもので信頼を証明する。マニフェスト型 LP はこの思想の実演である。

## 差別化軸

同業の凡庸な見せ方(3つ):

1. **握手・ビル群・天秤のストックフォト + 青グラデヒーロー。** どの事務所か判別できない没個性の典型。
2. **「実績◯◯件」「満足度 No.1」バッジと料金表の羅列。** 数字を並べるほど、何が得意かが見えなくなる。
3. **法律用語をそのまま貼った説明文。** 読み手(技術者)への翻訳を放棄しており、「言語化が仕事」のはずの職能と矛盾している。

この案の踏み外し方:

- **写真ゼロ。** LP をほぼ思想文だけで構成する。視覚素材の役割は 1 枚の生成 canvas に全て集約する(参考サイトの 27KB 的な軽さ、思想と実装の一貫を踏襲)。
- **業務語彙(特許・意匠・商標・審決・進歩性・クレーム…)の名詞句列挙を、そのまま hero のキネティック組版にする。** 業務案内をコンテンツではなくタイポグラフィの素材として扱う(選択案の steal)。
- **装飾の禁欲を「安さ」ではなく「厳密さ」として見せる。** 白地・黒インク・コバルト 1 点のみ。足し算を封じた分、組版精度と余白で勝負する。

## トーン&マナー

- **一人称:** 「私たちは」。**二人称:** 「あなたの発明」。
- **敬体/常体:** 本文は敬体。ただし宣言文(hero とマニフェスト節の見出し)は常体で断言する。「発明は、言葉になるまで発明ではない。」のように、体言止めと短い断定を混ぜる。
- **抽象度:** 思想文(高抽象)と業務名詞(低抽象)の往復。「権利」「言語」「構造」を語った直後に「請求項」「拒絶理由通知」「PCT 出願」と具体語で着地させる。宙に浮いた抽象だけの段落を作らない。
- **リズム:** 短文の連打。一文 40 字以内を基本とし、読点で伸ばさない。名詞句の列挙をリズム要素として使う。
- **避ける言葉:** 「寄り添う」「ワンストップ」「トータルサポート」「安心と信頼」「豊富な実績」「お気軽にご相談ください」。および filler verbs(「実現します」「提供します」の連発)。AI 臭い気取った比喩も禁止。迷ったら平叙文に落とす。

## デザイン原則

- **配色方向:** 紙白 × インク黒 + コバルト 1 点。背景はオフホワイト(純白 #ffffff は使わない。紙を思わせる暖度ゼロ寄りの白)、文字はオフブラック(純黒禁止)。コバルトブルーはページ全体で 3 箇所以内(hero の強調 1 語・CTA・リンク下線)に配給制で使う。アクセントはこの 1 色のみ、全セクションで同一値にロック。
- **タイポ体系:** mono 強調。宣言文と業務語彙・数字は monospace(タイプライター的な等幅、数字は tabular)、本文は和文ゴシック。1 ページ 2 書体まで。見出しの強調は同一書体の weight 差で行い、別書体を混ぜない。イタリック不使用(和文主体のため)。
- **グリッド/レイアウト原則:** 分割スクリーン。左カラムに宣言文 1 カラム(max-w 65ch)、右カラムに生成 canvas パネルを固定配置する hero。以降のセクションは 1 カラム中心で、左右非対称の余白(片側 20vw 級の空き)を恐れない。768px 未満は厳密に縦積み 1 カラムへ折る。eyebrow(小さな大文字ラベル)は全ページで最大 2 個。セクション番号・スクロール誘導文言・装飾ドットは使わない。
- **モーション言語:** 2 系統のみ。(1) hero の業務語彙サイクル: 名詞句が「植字が差し替わる」ように交代するキネティック組版。フェードではなく文字単位の置換、周期 2.4 秒前後、cubic-bezier(0.16, 1, 0.3, 1)。(2) 生成 canvas: 図面の引出線やクレームの入れ子構造を思わせる線描が常時ゆっくり描画される 2D canvas(低負荷・transform/opacity 外の再描画は canvas 内で完結)。その他のセクションは whileInView の控えめな reveal のみ。prefers-reduced-motion では語彙サイクルは固定 1 語、canvas は静止フレームに落とす。
- **写真/動画の役割:** 使わない。写真ゼロが思想の証明であり、視覚の快楽は canvas と組版がすべて担う。fill-images 工程の差し替えプレースホルダは置かない(非写真デモとして扱う)。

## ページ構成

1. **Hero(分割スクリーン)** 主張: 発明は言葉になるまで発明ではない。
   - 左: 宣言文(2 行以内)+ サブテキスト(20 字前後)+ CTA 1 つ / 右: 生成 canvas パネル
   - 業務語彙サイクル(意匠・商標・審決・進歩性・クレーム…)を宣言文中の 1 語に組み込む
2. **マニフェスト** 主張: 守られない発明の大半は、書かれなかった発明である。
   - 思想文 3〜4 段落、1 カラム 65ch、leading-loose。装飾なし、文章だけで持たせる
3. **業務領域** 主張: 言語化の技術は、知財のすべての局面で同じに働く。
   - 特許・実用新案・意匠・商標・審判・鑑定・外国出願の 7 項目
   - divide-y の単調リストにせず、2 カラムのグルーピング + mono の語彙組版として見せる
4. **方法論** 主張: 明細書は書類ではなく、発明の設計図である。
   - プロセスを動詞で直接示す: 「聞く」「分解する」「書く」「守る」の 4 幕(Step 1/2/3 式のラベル禁止)
   - 各幕に 1 行の説明。canvas の線描モチーフを小さく再利用して連続性を出す
5. **数字** 主張: 精度は数字に表れる。
   - 登録率・応答実績・対応国数など 3〜4 指標を tabular mono で大きく組む
   - 数値はサンプルであることをコード内コメントで明記(架空ブランドのため。丸すぎる数字は避け有機的な値に)
6. **所員** 主張: 書くのは機械ではなく、名前を持つ弁理士である。
   - 弁理士 2〜3 名。氏名・専門領域・経歴 3 行のテキスト構成(写真なし)。名前は実在感のある創作名
7. **CTA** 主張: 最初の 60 分で、発明の輪郭を言葉にする。
   - CTA ラベルは全ページで 1 種に統一(例: 「初回相談を予約」)。hero と同一ラベル・同一インテント
8. **フッター** 所在地・連絡先・資格表示(弁理士法上の表示)・© のみ。装飾なし

レイアウトファミリーは 8 セクションで分割スクリーン / 1 カラム思想文 / 2 カラムグルーピング / 4 幕プロセス / 数字タイル / テキストプロフィール / CTA と重複させない。

## コピー方針

Hero コピー草案(いずれも 2 行以内・強調 1 語にコバルト):

1. 「発明は、言葉になるまで発明ではない。」
2. 「権利は、文章でできている。」
3. 「書けない発明は、守れない。」
4. 「私たちは発明を翻訳する。技術の言語から、権利の言語へ。」

サブテキスト案: 「明許国際特許事務所は、発明の言語化を専門とします。」

各セクションの言葉のトーン:

- **マニフェスト:** 常体の断言を敬体の説明で受ける二段構え。感情語を使わず、論理の運びだけで熱を出す
- **業務領域:** 名詞句のみ。説明を足すなら各 1 行、体言止め
- **方法論:** 動詞始まりの短文。「聞く。図面の前に、思想を聞く。」のような反復構文
- **数字:** 数値 + 単位 + 補足 1 行のみ。形容詞を付けない
- **所員:** 経歴は事実の列挙のみ。「情熱」「想い」系の語を使わない
- **CTA:** 命令形を避け、提案形。「まず、発明を言葉にすることから。」

## クラフトの肝

1. **語彙サイクルの植字感:** 交代はフェードではなく文字単位の差し替え。等幅組みで語長が変わっても行box が動かないよう最長語で幅を予約し、レイアウトシフトをゼロにする。周期 2.4s、置換そのものは 0.4s で完了させ「静止時間の長さ」で品を保つ。
2. **コバルトの配給制:** 使用箇所を hero の 1 語・CTA・リンク下線の 3 つに限定し、それ以外は完全な白黒。1 点だけ色があることの緊張感が「厳密さ」の視覚言語になる。
3. **tabular の桁揃え:** 数字セクションと canvas 内の座標表示はすべて tabular-nums。小数点・単位の位置をグリッドに揃え、数字が並んだ瞬間に工学系の読者へ「分かっている」と伝わる状態にする。
4. **間(ま)の設計:** セクション間 py-32〜48。マニフェスト直後に約 1 画面分の余白を置き、思想文の残響を作る。思想文の行間は leading-loose、1 段落 4 行以内で改段。
5. **ホバーのインク:** リンクは左から右へ下線が「引かれる」0.3s のアニメ(コバルト)。CTA は :active で scale-[0.98] の物理感。canvas はカーソル近傍だけ線描がわずかに濃くなる程度に抑え、追従演出はしない。

## ロゴ

- **何を象るか:** 「明」の字義(日 + 月 = ふたつの光源)を第一候補のモチーフとする。技術の視点と法の視点、ふたつの光で発明を照らして輪郭を言葉にする、というブランドの仕事そのものに接続する。第二候補は請求項の入れ子構造(クレームツリー)や特許図面の引出線を抽象化した線構造。いずれも幾何・線ベースで、均質なストロークの作図的な佇まい。有機的な曲線や面の塗りには寄せない(生成 canvas の線描言語と同族にする)。
- **言葉の扱い:** 和文「明許」を主、欧文「MEIKYO IP」を従とする。略称は「明許」の 2 文字で成立させ、タグライン「発明を、言語に。」は併記候補として保持する(採否とサイズ関係は Step 1 の型紙に従う)。
- **避けたい既視感:** 天秤・盾・ガベル・月桂樹・地球儀という法律事務所の定番モチーフ全部。加えて M の 1 文字モノグラム、青グラデの球体、電球(発明の記号として凡庸)。「知財 = 堅い青」の連想をコバルトの配給制で逆手に取る側なので、ロゴ自体を青一色の面で塗る案も避ける。

※シンボルの有無・線幅・字間・サイズ比などの「作り」は Step 1 で ref-structure.json の logo 型紙に合わせて決定する。ここではモチーフと意味づけのみを確定とする。

制作記録

このデモは AI が設計・実装しました。使ったモデルと実際の制作記録をそのまま公開しています。

生成モデル
fable(effort: ultracode)
実行環境
Claude Code 2.1.227
制作時間
39分45秒
人による修正
0回(一発生成)
やり取り
82 メッセージ
出力トークン
130,390
読み込みトークン
13,354,810

写真は生成 AI で作成した架空のイメージです。ブランド・実績・数値はすべて架空のもので、実在の企業とは関係ありません。

この業種・このテイストで、御社のサイトを制作します。

掲載デモと同じ品質のオリジナルサイトを、設計から公開まで一貫して承ります。「このデモの雰囲気で」の一言から始められます。