簡易設計イラストツール

ホワイトボードの走り書きを、そのままデジタルに

打ち合わせの最中、ホワイトボードにサッと描いた梁のスケッチ。矢印で荷重の方向を示して、三角マークで支点を表して——あの「伝わるスケッチ」をブラウザ上で再現できたら、と思ったことはないだろうか。

簡易設計イラストツールは、構造物の荷重説明用ラフスケッチをブラウザ上で素早く描けるドローイングツール。固定支持・ピン支持・ローラー支持などの構造記号プリセット、集中荷重・分布荷重・モーメントの荷重ツール、寸法線・テキストラベルを搭載している。グリッドスナップと端点スナップで正確な作図ができ、SVGダウンロードやクリップボードコピーで報告書にそのまま貼り付けられる。

なぜ簡易設計イラストツールを作ったのか

CADは重すぎる、手描きは汚すぎる

構造の検討段階で必要なのは、精密なCAD図面ではなく「伝わるスケッチ」だ。ところが、PowerPointには構造記号がないし、Excalidrawは汎用すぎて荷重矢印を描くのに一手間かかる。CADソフトを立ち上げるほどでもない場面——社内検討会議の資料、施工指示書の添付図、新人への説明資料——そういう「ちょっとした構造スケッチ」を描く場所がなかった。

手描きスキャンは解像度が低く、PDFに埋め込むと潰れる。PowerPointで矢印を並べて作った「なんちゃって荷重図」は、修正のたびに矢印がずれて発狂する。

このツールは、その狭間を埋めるために作った。構造記号のプリセット（固定支持・ピン支持・ローラー支持）を配置して、荷重矢印をドラッグで引いて、寸法線を2クリックで追加する。それだけで、打ち合わせレベルのスケッチが完成する。

こだわった設計判断

SVG DOMベースの描画エンジンを選んだのは、要素ごとの選択・移動・グループ化といったインタラクションとの相性がいいから。Canvas APIのほうがパフォーマンスは出るが、数百要素程度のラフスケッチならSVGで十分だし、そのままSVGファイルとして出力できるメリットが大きい。

グリッドスナップと端点スナップの共存にもこだわった。構造スケッチでは「梁の端点と支持記号を正確に合わせる」ことが重要で、端点スナップがないと毎回座標を目視で合わせる羽目になる。

構造スケッチとは何か

構造スケッチ とは

構造スケッチとは、建築や機械の構造体の荷重状態・支持条件・部材配置を簡略化して描いた図のこと。正式な設計図面（CAD図面）とは異なり、寸法精度よりも「何がどこにかかっているか」「どこが固定されているか」という情報伝達を優先する。

たとえば、レストランで友人に「この建物の柱はこういう感じで荷重を受けてるんだよ」と説明するとき、ナプキンの裏にサッと描く——あの図が構造スケッチだ。

構造スケッチの要素

構造スケッチには以下の記号が使われる：

• 支持記号: 固定支持（壁に埋め込み）、ピン支持（回転自由・移動拘束）、ローラー支持（回転・水平移動自由）
• 荷重記号: 集中荷重（1点に集中する力）、分布荷重（梁全体に広がる力）、モーメント（回転力）
• 寸法線: 2点間の距離を示す補助線

これらの記号はJIS Z 8312やISO 128で規格化されているが、実務では慣習的な書き方が広く使われている。

構造スケッチ vs CAD図面 vs 手描き — 用途比較

項目	構造スケッチ	CAD図面	手描き（ホワイトボード）
目的	検討・共有	施工・製造	その場の議論
精度	概略	寸法精度1/100mm級	大雑把
作成時間	5〜15分	数時間〜数日	1〜3分
修正性	高い（デジタル）	高い（デジタル）	低い（消して描き直し）
共有性	SVG/PNG出力	DWG/DXF	写真撮影のみ
標準記号	プリセット搭載	ライブラリ豊富	手描きで代用
適用段階	概略検討〜社内レビュー	詳細設計〜施工	打ち合わせ中

設計イラストと製図の違い

製図は「施工者が見て作れる」レベルの精度が求められる。一方、構造スケッチは「検討者が見て理解できる」レベルでいい。この違いが重要で、スケッチは速度と明快さが命だ。

構造スケッチが実務で重要な理由

視覚共有が手戻りを防ぐ

構造の検討段階で文字だけのやり取りをしていると、「集中荷重の位置」「支持条件」の解釈が人によってズレる。1枚のスケッチを共有するだけで、認識のズレが一発で解消される。

建築基準法施行令第82条では構造計算の方法が規定されているが、計算に入る前の条件整理——どこが固定でどこがピンか、荷重はどの方向にいくらか——を明確にするのがスケッチの役割だ。

スケッチなしの設計レビューは危険

「梁の中央に集中荷重100kNがかかる」と文章で書いても、読み手は「梁のどこ？」「どの方向？」と迷う。スケッチがあれば一目で分かる。設計レビューで構造スケッチが添付されていない場合、指摘事項の半分は「図を出して」になる。

構造スケッチツールが活躍する場面

社内検討会議のホワイトボード代替

会議室のホワイトボードに描いたスケッチは写真で保存するしかないが、このツールなら最初からデジタル。SVG出力で議事録にそのまま貼れる。

施工指示書の添付図

現場への指示書に「こういう補強をしてほしい」というスケッチを添付する場面。手描きスキャンより圧倒的にきれいで、修正も容易。

新人教育・構造力学の学習

「片持ち梁に集中荷重がかかるとどうなるか」をテンプレートから即座に描いて説明できる。大学の構造力学の授業でも使えるレベル。

クライアントへの概略説明

専門用語を使わずに、矢印と線で「ここに力がかかる」「ここで支えている」を視覚的に伝えられる。

基本の使い方

操作は3ステップで完結する。

Step 1: テンプレートを選ぶ

片持ち梁・単純支持梁・ラーメン構造などのプリセットから、最も近いパターンを選んでスタート。白紙から描くこともできる。

Step 2: 要素を追加・編集する

ツールバーから線・矩形・矢印・支持記号を選び、キャンバス上でドラッグして配置。グリッドスナップで正確な位置合わせ、Shiftキーで45度単位の角度ロックが使える。

Step 3: SVGで出力する

「SVGダウンロード」でファイル保存、または「クリップボードにコピー」で報告書・計算書にそのまま貼り付け。

具体的な使用例

ケース1: 片持ち梁の荷重説明図

入力:

• テンプレート「片持ち梁」を選択
• 先端に集中荷重矢印を追加
• 寸法線でスパンを表示

結果:

• 固定支持＋梁＋先端荷重＋寸法線の構造スケッチ

→ 解釈: 計算書の「荷重条件」セクションにそのまま添付できる形式。荷重の方向と作用点が一目で分かる。

ケース2: 単純支持梁の中央荷重

入力:

• テンプレート「単純支持梁」を選択
• テキストラベルで荷重値「P = 50kN」を追加

結果:

• ピン支持＋ローラー支持＋梁＋中央荷重＋テキストラベル

→ 解釈: 構造力学の教科書に出てくる典型的な例題がそのまま描ける。学生の課題提出にも使える品質。

ケース3: ラーメン構造の骨組図

入力:

• テンプレート「ラーメン」を選択
• 分布荷重ツールで梁の上に等分布荷重を追加

結果:

• 2本の柱＋梁＋固定支持×2＋分布荷重

→ 解釈: 建築の検討段階で「こういう骨組にしたい」を共有するのに最適。寸法線を追加すればスパンと階高も示せる。

ケース4: ブラケット強度検討の概略図

入力:

• テンプレート「ブラケット」を選択
• ボルト穴位置を調整
• 荷重方向を変更

結果:

• L型部材＋ボルト穴位置＋荷重矢印

→ 解釈: ボルト強度診断ツールと組み合わせて、概略図と計算結果を一緒に報告書に載せられる。

ケース5: トラス構造の部材力説明図

入力:

• 白紙キャンバスに三角形トラスを作図（上弦材・下弦材・斜材）
• 各節点にピン接合記号を配置
• 上弦材の節点に集中荷重矢印を3本追加
• 寸法線でスパンと高さを表示

結果:

• 三角トラスの荷重説明スケッチ（節点荷重・支持条件・寸法入り）

→ 解釈: トラス構造の節点法や切断法を教えるときの「問題図」として使える。節点ごとの力の釣り合いを議論する際、支持条件と荷重方向が正確に描かれていることが前提になる。手描きでは節点の位置がずれがちだが、端点スナップでピタリと合う。

ケース6: 既存建物の補強検討スケッチ

入力:

• テンプレート「ラーメン」をベースに、片側柱にブレース（斜材）を追加
• テキストラベルで「既存柱 H-300×300」「追加ブレース L-75×75」と部材種別を記入
• 色分け：既存部材を白、追加部材を赤で描画

結果:

• 既存骨組＋補強部材の重ね図（色分け・部材ラベル付き）

→ 解釈: 耐震補強や設備荷重追加に伴う補強検討で、「どこに何を追加するか」を一枚で示せる。施主や施工業者への説明資料として、CADを起動するまでもない初期段階で威力を発揮する。既存と追加を色分けすることで、変更範囲が一目瞭然になるのがポイント。

仕組み・アルゴリズム

SVG DOMベースの描画エンジン

描画エンジンには2つの選択肢があった：

1. Canvas API: ピクセルベースの高速描画。大量要素（数千〜数万）で有利
2. SVG DOM: ベクター要素ごとにDOM要素として管理。個別の選択・変形・イベント処理が容易

構造スケッチは要素数が数十〜数百程度に収まるため、SVG DOMを選択した。各要素がDOM要素として独立しているため、ヒットテスト（クリックした位置にどの要素があるか）が自然に実装できるうえ、SVGファイルとしてそのままエクスポートできる利点もある。

グリッドスナップアルゴリズム

グリッドスナップの計算は単純な丸め処理だ：

snappedX = Math.round(rawX / gridSize) * gridSize
snappedY = Math.round(rawY / gridSize) * gridSize

端点スナップはグリッドスナップより優先度が高い。既存要素の端点・中点からの距離が閾値（8px/zoom）以内であれば、グリッドスナップを無視してその端点に吸着する。

Undo/Redoの実装戦略

Undo/Redoには2つの手法がある：

1. コマンドパターン: 各操作をコマンドオブジェクトとして記録し、逆操作を定義
2. 状態スナップショット: 操作のたびに全状態を保存

このツールでは状態スナップショット方式を採用した。要素数が少ないため、各スナップショットのメモリコストは微小。コマンドパターンは逆操作の定義が複雑になるため、この規模のアプリではオーバーエンジニアリング。

計算例：角度ロック

Shiftキーで角度ロックがかかると、マウスの移動方向が0度/45度/90度のいずれかにスナップする：

angle = Math.atan2(dy, dx)
snappedAngle = Math.round(angle / (PI/4)) * (PI/4)
x2 = x1 + length * Math.cos(snappedAngle)
y2 = y1 + length * Math.sin(snappedAngle)

既存ツールとの違い

CADソフトとの違い

AutoCADやJw_cadは「施工図を描く」ためのツール。起動に時間がかかり、操作を覚えるまでの学習コストが高い。ラフスケッチには重装備すぎる。

Excalidrawとの違い

Excalidrawは優秀な汎用ドローイングツールだが、構造記号（固定支持・ピン支持・ローラー支持）のプリセットがない。荷重矢印や分布荷重の表現も自前で描く必要がある。

PowerPointとの違い

矢印と線で構造スケッチ風のものを作ることはできるが、修正のたびに矢印がずれる。グリッドスナップも粗く、端点同士を正確に合わせるのが難しい。

構造記号の豆知識

支持記号の歴史

構造記号の標準化は19世紀後半のヨーロッパに遡る。産業革命で鉄骨構造が普及するとともに、構造計算の標準記法が必要になった。固定支持を「地盤のハッチング」で、ピン支持を「三角形」で、ローラー支持を「三角形＋円」で表す慣例は、ISO 128として現在も引き継がれている。

JIS規格における構造記号

日本ではJIS Z 8312「製図—表示の一般原則」やJIS A 0150「建築製図通則」で構造記号が規定されている。ただし、実務では規格よりも「伝わりやすさ」を優先するケースも多い。

使いこなしのコツ

テンプレートから始めるのが最速

白紙から描くよりも、最も近いテンプレートを選んでから要素を追加・削除するほうが速い。5種のプリセットのどれかに近い構造は多い。

Shiftキーで正確な45度配置

斜め部材やブレース（筋交い）を描くとき、Shiftキーを押しながらドラッグすると45度単位でロックされる。水平・垂直の部材を描くときも同様に使える。

グループ色分けで部材種別を区別

柱を青、梁を赤、荷重を緑——といった色分けをするとき、複数要素を選択してグループ化し、グループに色を割り当てると一括で変更できる。

よくある質問

Q: 描いたスケッチを保存できる？

現在のバージョンではブラウザ内に保存する機能はない。SVGファイルとしてダウンロードするか、クリップボードにコピーして別のアプリに貼り付ける形で保存してほしい。将来的にlocalStorageやファイル保存に対応予定。

Q: 寸法線の数値は実寸と対応している？

寸法線の数値はキャンバス上のピクセル距離を自動計測したもので、実際の寸法（mm, m等）とは直接対応していない。数値ラベルは手動で編集可能なので、「L = 3000mm」のように実寸法を上書きして使ってほしい。

Q: データはサーバーに送信される？

一切送信されない。全ての描画データはブラウザ内でのみ処理される。サーバー通信は発生しないので、機密性の高い設計情報でも安心して使える。

Q: 印刷向けの出力はできる？

SVGファイルはベクター形式なので、拡大しても劣化しない。A4やA3に合わせた印刷レイアウト機能は今後対応予定だが、現状でもSVGをIllustratorやInkscapeに取り込めば任意のサイズで印刷できる。

Q: モバイルでも使える？

基本的にはPC（マウス操作）での利用を想定しているが、タッチデバイスでもタップで要素配置は可能。ドラッグ操作やズーム・パンはPC環境のほうが快適。

まとめ

簡易設計イラストツールは、構造の検討段階で必要な「伝わるスケッチ」をブラウザ上で素早く描くためのツールだ。

CADほど重くなく、PowerPointほど不自由でもない。構造記号プリセットと荷重ツールがあるから、構造スケッチに特化した使い心地を実現している。

描いたスケッチは梁の安全審判員（曲げ応力・たわみ計算）やボルト強度・破断モード診断の報告書に添付する概略図として使ってみて。鋼材断面のコンシェルジュで選定した断面をスケッチに描き込むのもおすすめだ。

---

不具合や要望があれば、X (@MahiroMemo)から気軽に教えて。