Style · 設計図

設計図Webデザインの参考例とAIプロンプト

建築設計図やCAD図面、方眼紙の技術ドキュメントを引用したAIプロンプト集。寸法線・断面記号・テクニカルレタリングで「精密に作られた」感を演出する。

Designs002 Styleブループリント Keyword設計図

ブループリントについて

建築設計図・機械図面・CAD出力をWebに持ち込んだ技術系ビジュアル言語。方眼背景、白抜きの線画、寸法線、断面記号、引出線付きの注釈、技術的なモノスペース書体が特徴です。エンジニアリング系プロダクト、建築・設計事務所、製造業、技術ドキュメントとの相性が抜群。技術者は高品質ですという言葉を信用しません。信用するのは構造そのものが見えることです。ただし寸法線が実際に意味のある値を指していること。飾りとして数字を散らすと、すぐ見抜かれます。

ブループリントの視覚パラメータ

  • #0A4D8C
  • #E8F1FA
  • #7FB2E5 方眼
  • #FFB000 強調
書体
等幅。注記は小さく、寸法線に沿わせる
角丸0。方眼は linear-gradient で描く
動き
なし。図面は静止しているもの

よく使われる場面

  • 建築・設計事務所のポートフォリオ
  • エンジニアリング系SaaSのLP
  • 製造業・工業デザインの会社サイト
  • 技術ドキュメント・仕様書の表紙
  • DIY・メイカー系プロダクト

成功のポイント

  • 背景は方眼グリッド(CSS background で線描)
  • ベース色はシアンブルー、線は白〜薄い水色
  • 寸法線(両端矢印 + 数値ラベル)を装飾に活用
  • コールアウトの引き出し線で各要素を解説
  • モノスペースフォントを徹底

このスタイルのデザイン

他のスタイル