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社の提供するサービスです。

    Facebook
    Twitter
    Email
    公式ブログロゴ

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

    PDFが引き起こす、ウェブサイトにおける5つの深刻な課題

    PDFの悩みを一気に解決!BuildVu(ビルドビュー)が実現する、次世代のドキュメント戦略とは?
    レイアウトを保ったまま、検索性やモバイル対応を実現。社内の膨大な情報資産を、誰もがアクセスしやすいHTMLに自動変換。BuildVuで、ビジネスに眠れる情報の力を呼び覚ましましょう!

    PDFってこうなってる? 実践でPDFの内部構造を学ぼう Part 7:色を操るグラフィックスステート

    今回は、画面に色を付けてみましょう。その過程で、グラフィックスステート(グラフィックス状態)について説明します。PDFファイルには、グラフィックスステートというデータ構造が関連付けられています。このデータ構造には、グラフィックスの描画方法を記述する情報が格納されます。現在の色や使用可能な色などの値がグラフィックスステートに保存されます。また、現在のクリップ、変換行列、線に対して行える面白い操作、ユーザー空間(PDFの座標系)からデバイス空間(モニター)へのグラフィックスの描画方法を変更するその他の命令など、様々な要素が含まれます。

    PDFってこうなってる? 実践でPDFの内部構造を学ぼう Part 6:パスで図形を描こう

    「Part 4: 白紙のPDFページを自作する」で示したように、PDFはストリームオブジェクト内にある一連のコマンドを使って描画されます。これらのコマンドを通じて、PDFビューアーはページ上に表示される全コンテンツを描画する方法を理解できます。この記事では、グラフィックコマンドを探究し、ページ上に数本の線を描画するPDFをテキストエディタで作成します。

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

    開発者向けPDF入門ガイド

    開発者向けPDF入門ガイド

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

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

    MENU
    PAGE TOP
    ロボット
    PDFソフトウェアの開発に役立つ情報をメールでお届けします