Style · 設計図
設計図Webデザインの参考例とAIプロンプト
建築設計図やCAD図面、方眼紙の技術ドキュメントを引用したAIプロンプト集。寸法線・断面記号・テクニカルレタリングで「精密に作られた」感を演出する。
ブループリントについて
建築設計図・機械図面・CAD出力をWebに持ち込んだ技術系ビジュアル言語。方眼背景、白抜きの線画、寸法線、断面記号、引出線付きの注釈、技術的なモノスペース書体が特徴です。エンジニアリング系プロダクト、建築・設計事務所、製造業、技術ドキュメントとの相性が抜群。技術者は高品質ですという言葉を信用しません。信用するのは構造そのものが見えることです。ただし寸法線が実際に意味のある値を指していること。飾りとして数字を散らすと、すぐ見抜かれます。
ブループリントの視覚パラメータ
- #0A4D8C 地
- #E8F1FA 線
- #7FB2E5 方眼
- #FFB000 強調
- 書体
- 等幅。注記は小さく、寸法線に沿わせる
- 形
- 角丸0。方眼は linear-gradient で描く
- 動き
- なし。図面は静止しているもの
よく使われる場面
- 建築・設計事務所のポートフォリオ
- エンジニアリング系SaaSのLP
- 製造業・工業デザインの会社サイト
- 技術ドキュメント・仕様書の表紙
- DIY・メイカー系プロダクト
成功のポイント
- 背景は方眼グリッド(CSS background で線描)
- ベース色はシアンブルー、線は白〜薄い水色
- 寸法線(両端矢印 + 数値ラベル)を装飾に活用
- コールアウトの引き出し線で各要素を解説
- モノスペースフォントを徹底