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
https://www.idrsolutions.com/ja/online-pdf-to-html5-converte

※1 開発元のIDRsolutions社の提供するサービスです。

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on email
    Email
    BuildVuブログ

    HTML変換でPDFを活用するための実践講座

    PAGE TOP
    MENU