PDFをWebページに埋め込む方法

PDFをWebページに埋め込む方法、Google Docs Viewerで表示が早い!

「Webサイトで、スライド資料を見せたい。」
「PDFをWebページの中に表示させたい。」

通常、PDFをWebページと関連付けようとすると、PDFへのリンクを設定し、別ウインドウを開いたり、ダウンロードして貰うことで、ユーザーに内容を見て頂くことになります。

しかし、別ウインドウで開いたり、ダウンロードして見ることになると、Webページからユーザーは離脱することになります。一旦Webページから離れてしまうことで、「お問い合わせ」や「資料請求」のWebページに訪れること無く、Webサイトから離脱する可能性も高まるでしょう。

そこで、今回は、PDFをWebページに埋め込む方法をご紹介します。

Google Docs Viewer:PDFをWebページに埋め込む便利な方法

Google Docs Viewer:PDFをWebページに埋め込む便利な方法

「Google Docs Viewer」を使用すると、ユーザーが画面から離れずに、現在見ているWebページの中でPDFを閲覧できるようになります。つまり、Webページの中にPDFを埋め込む方法になります。

以下が、PDFを埋め込んだ例です。

元のPDFの容量から考えると、表示速度(読み込み速度)も早いです。1点だけ、PDF内の画像の画質が低下してしまうことが難点です。それ以外は、非常に便利なサービスです。素早く、しかも、Webページ内でPDFを表示させることで、ユーザー離脱率を下げることにも貢献できるでしょう。

PDFをWebページに埋め込む Google Docs Viewerの使い方

PDFをWebページに埋め込む、Google Docs Viewerの使い方

Google Docs Viewerの使い方は、非常に簡単です。

PDFをサーバーにアップロードし、URLをコピーし、Google Docs Viewerに貼り付け、リンクを生成するボタンをクリックするだけです。後は、生成されたリンクをWebページのHTMLコードに貼り付けるだけで作業は完了です。

尚、PDF以外にも、様々な形式のファイルに対しても使用することができます。

【対応ファイル形式一覧】

□画像ファイル (.JPEG, .PNG, .GIF, .TIFF, .BMP)
□動画ファイル (WebM, .MPEG4, .3GPP, .MOV, .AVI, .MPEGPS, .WMV, .FLV, .ogg)
□テキスト ファイル (.TXT)
□Mマークアップ/コード (.CSS, .HTML, .PHP, .C, .CPP, .H, .HPP, .JS)
□Microsoft Word (.DOC and .DOCX)
□Microsoft Excel (.XLS and .XLSX)
□Microsoft PowerPoint (.PPT and .PPTX)
□Adobe Portable Document Format (.PDF)
□Apple Pages (.PAGES)
□Adobe Illustrator (.AI)
□Adobe Photoshop (.PSD)
□TIFF画像 (.TIFF)
□Autodesk AutoCad (.DXF)
□Scalable Vector Graphics (.SVG)
□PostScript (.EPS, .PS)
□TrueType (.TTF)
□XML Paper Specification (.XPS)
□Archive file types (.ZIP, .RAR, tar, gzip)
□Audio formats (MP3, MPEG, WAV, .ogg)
□.MTS files
□Raw Image formats

□こちらの過去記事もチェック↓↓
PDFをHTMLに埋め込む方法

顧客視点:ユーザーが便利なWebサイトを作る

PDFをダウンロードして貰うべき状況、あるいは、印刷することが前提とされる状況もあるでしょう。しかし、それ以外の場合、ユーザーは、Webページ内で、素早く内容を確認したいと考えるはずです。

最も大切な顧客視点・ユーザー視点で、Webサイトをもう一度見直しましょう。自分がお客様なら、自分がユーザーなら、Webサイトを見た時に、何を感じるか考えてみましょう。そして、実際に、お客様の声をヒアリングしながら、仮説・運用・分析・改善を継続的に繰り返すことで、確実に成果へ繋げることができます。

□こちらの過去記事もオススメ↓↓
【便利】成長したいビジネスパーソン必見!本の要約サービス8選まとめ