eDrawingsをWebに埋め込む！HTMLでCADデータを共有する方法

2025.10.01

1. はじめに

設計や製造の現場では、CADデータの受け渡しや閲覧方法が大きな課題になることがあります。専用ソフトをインストールしなければ開けなかったり、クライアントや協力会社との間でファイル形式や環境が異なり、スムーズに情報共有できないケースも少なくありません。

こうした問題を解決する手段として注目されているのが「eDrawings」です。SolidWorksをはじめとするCADデータを軽量化して表示できるだけでなく、Webビューアとして利用できるため、専用ソフトを持たない相手とも手軽にデータを共有できます。

さらに、eDrawingsの HTMLビューア機能を使えば、HTMLファイルやiframeに埋め込む形で3Dモデルを公開可能です。これにより、クライアントへのプレゼンテーションや教育用コンテンツなど、用途は大きく広がっています。

本記事では、eDrawingsの基本機能からHTMLでの埋め込み手順、活用シーンまでをわかりやすく解説します。あわせて、大容量データを扱う際の工夫やセキュリティ設定のポイントにも触れ、実務で役立つ「安心・効率的なデータ共有」の方法を整理していきます。

2. eDrawingsとは？

eDrawingsは、もともとSolidWorksで作成されたCADファイルを軽快に表示するために開発されたビューアで、多くの設計者に広く利用されてきました。現在では、DWGやDXFといった2D図面にも対応しており、さらにeDrawings Professionalを利用すれば、3D CADビューアとしてさまざまな形式をサポートできるようになっています。

このソフトの大きな特徴は、CADの専門知識が少ない人でも直感的に3Dモデルを操作できる点にあります。画面上で回転やズームが可能なため、通常の画像やPDFと比べて圧倒的に理解しやすく、プレゼンテーション資料としても高い効果を発揮します。特に非技術者やクライアントにとっては、静止画よりもリアルで動きのある製品イメージを把握しやすいというメリットがあります。

さらにデスクトップ版を利用すれば、オフライン環境でもデザインレビューやコメントの挿入が行えます。一方で、eDrawings Professionalの「Web HTML出力」機能を用いれば、生成されたHTMLファイルをWebに配置してURLを共有するだけで、誰とでも手軽に3Dモデルを見てもらうことが可能です。この仕組みによって、設計現場における情報共有やクライアントとのコミュニケーションが格段にスムーズになり、共同作業を効率的に進めることができます。

2.1. 基本概要と対応ファイル形式

eDrawingsは、SolidWorksの開発元が提供している純正のビューアであり、3Dモデル共有を中心に利用されてきました。しかし実際には、2DのDWGやDXFファイルにも対応しており、レイヤー構造や寸法情報などをある程度正確に表示することができます。

対応ファイル形式は非常に幅広く、SolidWorks固有の.sldprt（部品ファイル）や.sldasm（アセンブリファイル）だけでなく、軽量化専用の.eprtや.easm、さらにはAutoCAD系のファイル形式にも対応しています。これにより、異なるCADソフトを利用している企業同士でも、eDrawingsを活用することでデータの閲覧環境を共通化できるのです。

また、eDrawings Professionalを導入すると、単なる閲覧にとどまらず、寸法の測定や解析といった追加機能を利用できるようになります。これにより、設計レビューや検討作業をさらに効率化できます。ただし、相手側が正しく内容を参照できるためには、元データの変換精度やバージョン管理を適切に行っておくことが前提となります。

2.2. デスクトップ版とWeb版の違い

デスクトップ版のeDrawingsは、PCにインストールして利用するソフトウェアであり、インターネット接続がなくても動作します。大きな3Dモデルでも比較的安定して表示でき、レビューやマークアップも可能な点が強みです。ただし、相手にも同じソフトをインストールしてもらう必要があり、使用環境によっては導入のハードルが高くなる場合があります。

一方、eDrawings Professionalの「Web HTML出力」を利用すれば、ネットワーク環境さえあれば専用ソフトを使わずにブラウザ上で閲覧可能です。主要ブラウザ（EdgeやChromeなど）で動作し、生成されたHTMLファイルはiframeを用いてWebページに直接埋め込むこともできます。そのため、クライアントや社外パートナーへの共有が格段に容易になります。

ただし、非常に大きな3DデータをWeb HTML出力で公開すると、読み込みに時間がかかる場合があります。そのため、クラウドサーバーに配置して運用したり、事前にデータを軽量化しておくといった工夫が欠かせません。用途や相手先の環境に応じて、デスクトップ版とWeb HTML出力を併用するのが現実的な選択肢となるでしょう。

3. eDrawingsをWebで使うメリット

eDrawingsをWebビューアとして利用すると、専用ソフトをインストールしなくても3DモデルやCADデータを手軽に共有・閲覧できます。特にクライアントや外部パートナーと協力して進めるプロジェクトでは、相手に新しいソフトの導入や操作習得を求めずに済むため、短時間で効率的にデザインレビューを実施できる点が大きな魅力です。

また、非エンジニアのステークホルダーに対しても説明が格段にわかりやすくなります。たとえば、設計中の部品をその場で回転させて見せたり、複数の要素を切り替えて比較したりといった操作が可能です。リアルタイムでイメージを共有しながら意見交換できるため、コミュニケーションがスピードアップし、結果としてプロジェクト全体の効率向上につながります。

さらに、Web HTMLによる公開ではアクセス制御をホスティング先のWebサーバーやクラウドサービス側で設定できます。ID／パスワード認証や限定リンク配布、VPN環境での公開などを組み合わせることで、CADデータの機密性を保ちながら安全に共有が可能です。加えて、eDrawings形式（EDRW／EASM／EPRT）に保存する際には、測定の可否やパスワード設定を付与できるため、公開範囲や用途に応じて適切に活用できます。

3.1. インストール不要でブラウザから閲覧可能

eDrawings Professionalの「Web HTML出力」を利用すれば、閲覧者はソフトのインストールや複雑な設定を行うことなく、ブラウザ上で直接3Dモデルを操作できます。HTML5技術をベースとしており、公式に推奨されているブラウザはEdgeとChromeです。Firefoxなどでも表示できる場合がありますが、環境によっては正しく動作しない可能性があるため、事前の確認が安心です。

これにより、外部スタッフやクライアントが社外ネットワークからアクセスする場合でも、PCやタブレットを問わずスムーズに閲覧でき、プレゼンテーションや業務調整のスピードを大幅に高めることができます。実際に活用する際には、ブラウザ互換性のテストを行い、古い環境でのHTML5非対応などを避ける準備が重要です。

3.2. HTMLリンクによる簡単共有

CADデータをWebで共有する場合、手順が複雑すぎると運用が定着しにくいのが現実です。その点、eDrawingsのHTML出力はシンプルで、生成したファイルを静的Webサイトとして公開できる環境（社内のWebサーバー、AWS S3、Azure Blob、GitHub Pagesなど）に配置するだけで利用できます。公開したURLを送れば、ブラウザからすぐに3Dモデルを操作できるのです。
※ただしGoogleドライブなど一部のクラウドストレージはHTML実行をサポートしていないため注意が必要です。

この仕組みを使えば、製品の概要説明やデザインレビューを距離や時間に縛られずに実施できます。一方で、全員が編集や削除可能な状態で共有してしまうとセキュリティリスクが高まります。そのため、アクセス権限の調整やパスワード保護といった基本的なセキュリティ対策を徹底することが欠かせません。

3.3. マルチデバイス対応とセキュリティ

eDrawingsのWeb公開は、異なる端末から同じCADデータにアクセスできる点が大きな利点です。設計担当者はPCで詳細を確認し、営業担当者はタブレットやスマートフォンでクライアント先に出向いてモデルを提示するなど、シーンに応じて柔軟に活用できます。

また、セキュリティ確保も重要なポイントです。セキュアなWebサーバー上にHTMLを配置し、必要に応じて閲覧権限を制御すれば、外部からの不正アクセスを防ぎつつ安全にデータ共有が可能になります。さらに、複数の関係者が同じデータを同時に確認できるため、設計ミスや重複作業を減らし、短期間で合意形成を進めやすいという効果も期待できます。

4. HTMLでeDrawingsを埋め込む方法

ここからは、実際にHTMLページ内にeDrawingsファイルを表示する手順をわかりやすく解説します。eDrawingsをWebに埋め込む方法は大きく分けて2種類あります。ひとつは、eDrawingsソフトウェアの「Web HTML出力」機能を利用し、生成されたファイルをiframeに埋め込む方法。もうひとつは、JavaScript APIを活用して高度なカスタマイズを行う方法です。

本記事では、まず誰でも簡単に実践できるiframe方式を中心に説明し、その後でレスポンシブ対応やアクセス制御といった運用上の工夫について紹介します。これらを押さえれば、クライアント向けのプレゼン資料や学習用教材としても十分活用できるページを構築できるでしょう。

なお、実際に公開する際は、生成したHTMLファイルと関連データ一式をWebサーバー上に配置する必要があります。セキュリティを確保したい場合は、社内限定のネットワークに置いたり、ログイン制御を組み合わせたりすることで安全性を高められます。

4.1. 埋め込みに必要な準備

まずは、SolidWorksからeDrawings形式でエクスポートするか、既存のCADファイルをeDrawings Viewerで開き、そこから「eDrawings Web HTMLファイル」として保存します。保存すると、拡張子が.htmlのファイルと、付随するデータフォルダが自動的に生成される場合があります。

これらのファイルはフォルダ構成を変更せず、そのままクラウドストレージや自社のWebサーバーにアップロードします。ファイル階層が崩れると正しく表示できないため、元のまま配置することが重要です。

また、変換時には「計測を許可するか（Enable measure）」「回転や拡大縮小を制限するか」といったオプション設定が可能です。Enable measureをオンにすれば、Web HTML上で寸法を測定できます。反対に、クライアントに不要な操作をさせたくない場合は制限をかけるなど、目的に応じた設定を選ぶと安心です。

4.2. HTMLコード例とレスポンシブ対応

eDrawingsをHTMLに埋め込む最もシンプルな方法はiframeを利用することです。ただし、公開先のWebサーバーが X-Frame-Options や Content-Security-Policy（frame-ancestors）の設定で埋め込みを許可している必要があります。この条件が満たされていれば、次のようなコードをHTMLに記述するだけで3Dモデルを表示可能です。

また、幅や高さを%指定にすればレスポンシブデザインに対応でき、スマートフォン画面でも見やすくなります。CSSのメディアクエリやBootstrapなどのフレームワークを併用すれば、より柔軟にデザインを調整できます。

なお、従来のActiveXベースではeDrawings APIによる細かな制御が可能でしたが、Web HTML出力では公式のJavaScript APIは提供されていません。そのため操作は基本的に標準UIに依存します。もしユーザー操作の拡張や自動制御などが必要な場合は、3DEXPERIENCEプラットフォームなど他のWebビューア技術の利用を検討するのが現実的です。

4.3. 実際の表示イメージ

正しい手順でファイルをアップロードし、iframeに埋め込めば、HTMLページを開いたときに3Dモデルが表示されます。表示後はマウスドラッグやタップ操作で回転、ズームイン・ズームアウトといった操作が可能です。

ただし、読み込み速度はネットワーク環境やCADデータの容量、Webサーバーの性能によって左右されます。大容量データを扱う場合は、読み込み完了までに時間がかかることもあるため、公開前に十分な動作テストを行いましょう。

もし表示が乱れる、真っ白な画面になるといった不具合が出た場合は、HTMLファイルとデータフォルダのパス指定や配置階層を確認します。それでも解決しない場合は、ブラウザの設定やバージョン違いによる互換性を疑い、必要に応じてブラウザコンソールでエラーメッセージを確認するのがおすすめです。

5. 活用シーン

eDrawingsをHTML化してWebサーバーに公開することで、現場では多様な活用方法が考えられます。ここでは代表的な3つのシーンを紹介します。クライアントとの情報共有、製品ページやマニュアルでの利用、教育現場での導入など、幅広い場面で効果を発揮します。

相手のPC環境やOSに左右されずに表示できるため、3Dモデルならではの表現力を活かして訴求できるのが大きな利点です。従来は口頭説明や静止画では伝わりにくかった複雑な仕組みや構造も、より直感的に理解してもらうことが可能になります。

さらに、複数の関係者が同時にアクセスし、コメントやフィードバックをリアルタイムにやり取りできるため、コラボレーションツールとしても有用です。短期間で合意形成を進めたいプロジェクトでも大きな力を発揮するでしょう。

5.1. クライアント向けプレゼン資料の公開

取引先や顧客に製品や部品の構造を示す場面で、3DモデルをそのままHTMLページに埋め込み、実際に操作しながら見せる方法は非常に効果的です。クライアントプレゼンテーションにおいて、回転や拡大・縮小を行いながら説明することで、関係者は部品同士のつながりや動作のイメージを直感的に理解できます。

特に内部構造や組み立て手順をリアルに表現できる点は、口頭説明や静止画よりも説得力が高く、理解度や納得度の向上につながります。さらに、Webサーバーに公開しておけば、打ち合わせ後でもURLを共有するだけで同じ3Dモデルを確認できるため、検討作業がスムーズに進みます。

大規模なCADデータであっても、軽量化を行えば応答性を確保できます。必要に応じてeDrawings Professionalを活用し、適切なサイズに調整しておくことが望ましいでしょう。

5.2. 製品ページやマニュアルへの3Dモデル掲載

オンラインショップや技術マニュアルにeDrawingsをHTMLで埋め込む活用例も増えています。ユーザーが実際にモデルを動かして確認できる立体画像は、写真では伝わりにくい細部まで把握できるため、製品の品質や使用感を効果的に伝えられます。

特に、機械部品や建築資材、カスタマイズ可能な製品のように複雑な仕様を持つアイテムでは、購入前に細かく確認できることが安心材料となり、購入後のイメージ違いを防ぐ効果もあります。

また、技術マニュアルに3Dモデルを掲載すれば、作業手順や組み立て構造を直感的に理解でき、問い合わせや作業ミスを減らすことにつながります。従来のPDFマニュアルに静止図を載せる方法よりも、はるかに高い理解効果が期待できるでしょう。

5.3. 教育現場での利用

教育や研修の場でも、eDrawingsのHTML埋め込みは有効に活用できます。生徒や受講者が自分の端末から3Dモデルを回転させたり、アセンブリ構造を確認したりできるため、講師がスライドや黒板で説明するよりも理解が深まりやすくなります。

さらに、マルチデバイス対応により、家庭学習用の教材としてオンラインに公開することも可能です。専門学校や研修施設では、実機と併用してモデルを操作させることで、学習効果を一層高めることができます。

近年は設計支援ツールのクラウド化が進んでおり、教育現場での活用需要も拡大しています。学生や生徒にとってはもちろん、業務研修を受ける社会人にとっても、実践的なトレーニング素材として役立つでしょう。

6. 注意点とトラブル対策

eDrawingsをHTMLとして埋め込むと、多くのブラウザで問題なく動作しますが、いくつか注意すべき点や想定されるトラブルがあります。せっかく公開した3Dモデルが相手の環境で表示できないと、業務に支障が出てしまいます。そのため、大容量データの扱い方やブラウザ互換性の確認など、事前に準備を整えておくことが非常に重要です。

また、セキュリティ対策を怠るのも危険です。アクセス制御を行わずに公開すると、社外秘情報や特許関連の3Dモデルが不特定多数に閲覧され、情報漏洩のリスクが高まります。必ず管理ルールを徹底し、パスワード設定や限定リンクによる公開、VPN内での利用など、安全に配信するための仕組みを組み合わせることが求められます。

ここでは、特に発生頻度の高い問題とその解決方法を整理しました。事前に把握しておけば、導入後の混乱を最小限に抑えることができるでしょう。

6.1. ブラウザ対応状況と大容量データの扱い

基本的にはChrome・Firefox・Edgeといった主要なブラウザで表示可能ですが、古いInternet Explorerなどでは正常に動作しないケースがあります。社内外でどの環境を使うのかを想定し、確実に閲覧できるブラウザを周知しておくことが大切です。

また、大容量データをそのまま公開すると、読み込み時間が長くなりタイムアウトする恐れがあります。動作が重くなればユーザー体験が損なわれ、プロジェクト全体にマイナスの印象を与えかねません。そのため、ファイルを分割する、画像解像度を下げる、あるいはeDrawings Professionalを使ってデータを軽量化するといった工夫が必要です。

読み込み速度の最適化が重要な理由は、クライアント側のネットワーク環境を事前に把握できないからです。通信速度が遅い環境でもスムーズに操作できるよう、圧縮や軽量化を行うことで利便性を大きく高められます。

6.2. 表示問題のチェックポイント

HTMLファイルを公開しても、iframeの中が真っ白になり何も表示されないことがあります。代表的な原因としては、「パス指定の誤り」「HTMLファイルとデータフォルダの階層構造の不一致」「ブラウザのセキュリティ設定によるブロック」などが考えられます。

まずは、HTMLファイルと関連データが同じ階層に正しく配置されているかを確認しましょう。相対パスと絶対パスが混在している場合もエラーの原因になるため、URL指定は統一するのが安全です。

それでも解決しない場合は、ブラウザのコンソール画面を開き、エラーメッセージが出ていないか確認します。場合によっては、必要なJavaScriptファイルが読み込まれていない、またはJavaScript APIが有効化されていないといった別の要因が隠れていることもあります。こうした場合は適切にデバッグを行い、問題を切り分けて対応することが求められます。

7. まとめ

eDrawingsを活用すれば、CADデータのWeb共有がこれまで以上にスムーズになります。特にHTMLページへ3Dモデルを埋め込むことで、クライアントへのプレゼンテーションやチーム内でのレビューを、専用ソフトを導入せずに進められる点は大きなメリットです。さらに、マルチデバイス対応による利便性や、クラウドストレージを活用した手軽な配信など、活用シーンは広がり続けています。

一方で、ブラウザの互換性確認や大容量データによる表示の遅延、そしてセキュリティ対策といった注意点も無視できません。用途に応じてeDrawings Professionalを導入したり、アクセス制御やパスワード保護を組み合わせたりすることで、安心して運用できる環境を整えることができます。

最終的に、eDrawingsとHTML5技術を組み合わせることで、設計情報の共有はより効率的かつ安全になります。非技術者にもわかりやすく伝えられるツールとして、また世界中の関係者とつながるコラボレーション基盤として、この仕組みをぜひ積極的に活用してみてください。