fbpx

建築・電気・CAD図面のネット掲載――HTML5/SVGが最適、JPG/PNGとPDFは限定的

【問】図面をウェブ掲載するときの画像フォーマットが何がよい?
【答】HTML5/SVGがいちばんお薦め。JPG/PNGは雰囲気が伝わればよいなら。PDFはスマホユーザに嫌われます。

ウェブページに図面を載せたいことがあります。そのときジレンマとなるのは、全体を見せるには縮小が必要で、詳細まで見せるには拡大が必要なことです。例えば住宅を建てようと考えている見込み客向けのサイトの場合、モデルプランの平面図で建物全体の間取りを見ていただき、興味のある部分を拡大して細部(棚や扉の寸法や、壁内の桟や断熱材の寸法など)まで確認していただきたいでしょう。

閲覧者がプロという場合は、さらに複雑な図面をもっとシビアに確認できる必要があります。建築図面はもちろん、機械図面、電気電子の配線図、CADで作成した図面など、業種はさまざまです。

ひと昔前までは、拡大縮小が必要な図面はPDFをサイトに置いて、ダウンロードしてPCで見てもらう対応ですんでいました。いまでもPCユーザ向け、ダウンロードして閲覧という少数派向けなら、この方法でよいかもしれません。

しかしいまでは、スマホでネットを見る人の方が圧倒的に多いので、スマホ優先の対応に変える時期が来ています。スマホでPDFを見られない人、PDFの操作(拡大縮小やページ送りなど)ができない人は多くいます(この記事参照)。さらに英国政府では、PDFをネット閲覧用に使うのを禁止していることも知っておいた方がいいでしょう(この記事参照)

図面のネット閲覧での画像フォーマット比較

フォーマット 評価 コメント
HTML(HTML5/SVG) スマホ/タブレット/PCの標準ブラウザで見られます。縮小しても線や文字がつぶれにくく、拡大しても線が太りません
PNG/JPG 全体の雰囲気を伝えるイメージ画像・アイコン代わりに適しています。縮小すると線や文字がつぶれ、拡大すると線が太ります
PDF スマホで見られない・操作できない人が増えています。ダウンロードしてPDFビューアで見る人、IT上級者向けです
図面表示に最適なHTML5/SVGをブラウザがサポート

サイトに載せる図面をスマホユーザ向けにするにはどうしたらよいでしょうか? すでにPDF図面をたくさんお持ちの企業・役所に向いた方法があります。PDF図面をスマホの標準ブラウザで見られる形式に変換してサイトに載せればよいのです。

HTML規格とウェブブラウザは進歩しており、HTML規格の一部であるHTML5やSVGによって、ブラウザの画面に図面を正確に表示できるようになりました。最大の特長は、線をベクター形式で扱うので拡大縮小に強く、正確な位置に配置できます。縮小しても文字や線が集まる細部がつぶれにくく、拡大しても線は指定の太さのままです。

PDFからHTML5/SVGに変換するツールも容易に入手できるようになりました。なかでもBuildVu(ビルドビュー)は、図面を正確に変換する性能を誇るPDF→HTML5/SVG変換ツールです。複雑な図面、日本語のタテ書き・ヨコ書きの入った図面も、本来の“見た目”どおりに変換できます。

下図(左)は、建築図面のPDFをBuildVuで変換し、iPhoneの標準ブラウザで表示したものです。建物の間取りを把握するために縮小して表示していますが、必要な部分がしっかり見えています。下図(右)は、寸法を確認するために拡大して表示したもので、図面の詳細を細かく確認できます。

 

建築、電気・電子、機械など図面を多く扱う企業・役所のみなさま、スマホにもやさしい図面表示のために、ぜひBuildVuをご検討ください。お手持ちの図面PDFを、実際に変換してお試しいただけます(手順は末尾をご覧ください)。

BuildVuについて

BuildVuは、雑誌や図面などをHTML5/SVGで“見た目”どおりに表示するツールとして20年以上の実績があります。PDFからHTML5/SVGへの変換ツール、HTML5/SVGビューアは、ぜひBuildVuにお任せください。
PDFからHTML5/SVGへの変換入門は、こちらをご覧ください

ぜひ今すぐにBuildVuで、あなたのPDFファイルをHTML5に変換してみてください。変換と専用ビューアでの閲覧をこちらからお試しいただけます(メールアドレスの登録不要、無料です)

BuildVuオンラインコンバーター※1
オンラインでPDFからHTMLに変換

※1 開発元のIDRsolutions社と株式会社インターワークの提供するサービスです。

    Facebook
    Twitter
    Email
    公式ブログロゴ

    製品に関する記事や開発者のブログ

    タグ付きPDF入門:試して分かった!AI活用とアクセシビリティ

    タグ付きPDFの仕様が策定されてから20年以上が経過しましたが、この構造化技術はあまり注目されることなく時が過ぎてきました。しかし、AI時代の到来により状況は一変しています。ChatGPTなどのAIによる文書理解において、タグ付きPDFはタグなしのPDFと比較して、驚くほど正確な解析を実現できることが明らかになってきました。アクセシビリティから文書解析、HTMLへの変換まで—長年活用されていなかったタグ付きPDFが、AI時代の文書活用に新たな可能性をもたらす具体的なメリットを、実例とともに細かく解説していきます。

    PDF用語集

    この記事ではPDF関連の一般的な用語を網羅し、それぞれの定義を解説します。

    PDFメタデータとは?開発者が知っておくべき基礎知識

    PDFファイルを扱う際、「メタデータ」という言葉を耳にすることが多いでしょう。メタデータとは、ドキュメントに関する情報を指し、ファイルの作成者や作成日、使用されたソフトウェアなど、ドキュメントを説明する情報が含まれています。この記事では、開発者向けにPDFメタデータの基本からその利用方法までをわかりやすく解説します。

    PDFファイルを扱うシステム開発・ウェブ開発に役立つ

    開発者向けPDF入門ガイド

    開発者向けPDF入門ガイド

    PDFの基礎から応用まで開発者のための入門ガイド2024年版

    PDF の仕様や活用方法など、開発者に必要な情報がコンパクトにまとめました。初めてPDFを扱う開発者にも分かりやすく、基礎から応用までカバーしているため、PDF のポテンシャルを最大限に引き出し、アプリケーション開発やドキュメント管理の効率化を図るための手引きとなるでしょう。技術的な側面に興味がある開発者だけでなく、ビジネスでPDFを有効活用したい方にもおすすめの一冊です。

    MENU
    PAGE TOP