Webサイト制作

WebサイトにPDF資料のダウンロード機能を実装する3つのやり方

2022.08.12

Webサイトで販売促進や売上向上を図る企業にとって、 営業活動の一部を自動化できるダウンロード機能は、重要な要素の一つではないでしょうか。

ダウンロード機能を実装すれば、自社の発信を自動でアピールできるため、人材コストの削減も可能です。

そこで今回は、Webサイトにダウンロード機能を実装するやり方を3つ紹介します。

必要な箇所だけ変更すればすぐに使えるサンプルコードも記述していますので、プログラミングの専門的な知識がなくても大丈夫です。

PC作業が苦手なかたに最適な、おすすめの方法もお伝えします。ぜひ最後までご確認ください。

PDFなどの資料をダウンロードしてもらう3つのやり方

Webサイトから資料をダウンロードしてもらう方法は主に次の3つです。

1. CMSの機能を使用

2. HTML5を使用

3. JavaScriptを使用

CMSを使う方法がもっとも簡単で、JavaScriptは難易度が高めです。JavaScriptはプログラミングの知識がないと導入が難しいかもしれません。

専属のエンジニアがいない、アサインできないケースではCMSの活用をおすすめします。

ダウンロード機能が標準搭載されたCMSに乗り換える

CMSとは「Contents Management System（コンテンツ・マネジメント・システム）」の略で、管理画面などを使って、 簡単にWebサイトの運営ができるシステムです。

関連記事：CMSとは？導入によるメリットやデメリット、選び方を解説

HTMLやCSSのコーディングやプログラミングの知識がなくても、Webサイトの作成や更新作業が容易にできます。

ところが扱いの簡単なCMSでも、ダウンロード機能を実装するためにはプラグインの導入やHTMLやJavaScriptなど、ソースコードの記述が必要なケースもあります。

CMSの中にはLeadGridのようにダウンロード機能が標準搭載されているタイプもあるため、そちらを選べばPC初心者やプログラミングの知識がなくても簡単に扱えるでしょう。

LeadGridはリード獲得に特化したCMSのため、ダウンロード機能の他にもフォーム管理機能やウェビナー機能の利用も可能です。機能詳細はサービス資料をご覧ください。

HTML5を使用した簡単な方法｜初心者向き

CMSを導入しない場合、ダウンロード機能の実装はHTMLを使いましょう。

後述するJavaScriptに比べると、 プログラミングの専門知識があまり求められないため、取り入れやすい方法です。

HTML5ではa要素にdownload属性が追加されたため、以前より簡単に実装できるようになりました。

記述の方法は次のとおりです。

<a href="ダウンロードしてもらいたいファイルのurl" download="ダウンロードのときに表示するファイル名">表示するテキスト</a>

こちらの方法を使えば、 ほぼすべての形式の画像や資料のファイルをダウンロードしてもらえます。

JavaScriptを使用した方法｜中級者向き

JavaScriptを使用したソースコードの例を解説します。

Macの場合はターミナル、Windowsの場合はコマンドプロンプトに次のコマンドを打ち込み、コーディングの準備をします。

mkdir javascript-download-file
cd javascript-download-file
touch index.html main.js

次に好みのエディターを開き、HTMLを下記のように記述します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptでダウンロードする方法</title>
  </head>
  <body>
    <h1>JavaScriptでダウンロードする方法</h1>
    <p>ダウンロードボタンをクリックしてください</p>
    <button type="button" id="download">ダウンロード</button>
    <script src="main.js"></script>
  </body>
</html>

この中にある＜title＞や＜h1＞＜p＞タグ内には表示したい文字を入力します。

    <title>JavaScriptでダウンロードする方法</title>
  </head>
  <body>
    <h1>JavaScriptでダウンロードする方法</h1>
    <p>ダウンロードボタンをクリックしてください</p>

下記の「ダウンロード」はクリックするボタン内に表示する文字です。必要に応じて変更するとよいでしょう。

    <button type="button" id="download">ダウンロード</button>

続いてJavaScriptのコーディングです。下記のように入力します。

main()


function main () {
  const download = document.querySelector('#download')


  download.addEventListener('click', (event) => {
    event.preventDefault()


    const text = 'テスト'
    const blob = new Blob([データ], {type: ファイルタイプ'})
    const url = URL.createObjectURL(blob) // <1>


    const anchor = document.createElement('a')
    anchor.setAttribute('href', url)
    anchor.setAttribute('download', 'ファイル名.txt') // <2>


    const mouseEvent = new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
      view: window,
    })


    anchor.dispatchEvent(mouseEvent) // <3>
  })
}

ダウンロードしてもらうデータファイルによって、下記の「テスト」「データ」「ファイルタイプ」を入力しましょう。

const text = 'テスト'
const blob = new Blob([データ], {type: ファイルタイプ'})

たとえば、ダウンロードするのがテキストの場合は

  const text = 'テスト'
    const blob = new Blob([text], {type: 'text/plain'})
   const url = URL.createObjectURL(blob) // <1>

このようにすると「テスト」のテキストがダウンロードできます。

下記の「ファイル名」は、ダウンロードされたときのファイル名称ですので、任意のファイル名に変更しましょう。

anchor.setAttribute('download', 'ファイル名.txt') // <2>

動作確認をして問題がなければ作業完了です。

＜JavaScript完成例＞

main()


function main () {
  const download = document.querySelector('#download')


  download.addEventListener('click', (event) => {
    event.preventDefault()


    const text = 'テスト'
    const blob = new Blob([text], {type: 'text/plain'})
    const url = URL.createObjectURL(blob) // <1>


    const anchor = document.createElement('a')
    anchor.setAttribute('href', url)
    anchor.setAttribute('download', 'ファイル名.txt') // <2>


    const mouseEvent = new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
      view: window,
    })


    anchor.dispatchEvent(mouseEvent) // <3>
  })
}

ダウンロード機能の実装で注意すべき2つのファイル

紹介したどの方法でも、ほぼすべてのファイル形式がダウンロードできるようになります。

そのため、とても便利なダウンロード機能ですが、 設定してはいけないファイルもあるため、注意が必要です。

ここではダメなファイルのパターンを2つ紹介します。

1. exeをはじめとする実行ファイル

直接ダウンロードする設定にした場合、セキュリティの関係で問題が発生する傾向にあります。

具体的にはユーザーがリンクをクリックすると警告が表示されたり、ダウンロードができなかったりすることがよくあります。

ユーザーは表示された警告を見ると「このサイト、怪しいのかもしれない」と警戒し、ページから離脱してしまうおそれが高いです。

実行ファイルを設定するときは、ファイルをzip形式などに変換し、セキュリティ問題をクリアしましょう。

2. 外部サイトのファイル

通常、外部サイトのファイルを設定することはできません。

環境やブラウザによって技術的には可能な場合もありますが、 セキュリティの観点から判断すると危険です。

外部サイトのファイルには、ウィルスやバグが仕込まれている可能性もあります。

したがって安全が担保されないファイルをダウンロードしてもらう行為は、企業にとってリスクが高いです。

またファイルの内容についての権利問題から、訴訟トラブルに発展するケースもあります。

技術的な問題だけでなく、リスクを避けるためにも、外部サイトのファイルは利用しないように注意しましょう。

Webサイトにダウンロード機能を実装する2つの理由

Webサイトにダウンロード機能を実装するメリットは、主に2つあります。

密度の濃い情報を提供できるためサイトの信用性が高まる
データの計測や見込み客のリストが獲得できる

それぞれ解説します。

1. 密度の濃い情報を提供できるためサイトの信用性が高まる

Webサイトのコンテンツは、不特定多数のユーザーに向けてつくるため、詳しい情報やニッチな情報は避ける傾向があります。

しかし目的をもってサイトを訪れたユーザーにとっては「もっと詳しく知りたい」「このデータを画像やExcelで欲しい」と踏み込んだニーズを持つこともあります。

ダウンロード機能を実装すれば、そういったユーザーに対して濃い情報がつまったコンテンツを届けられるため、 満足度が上がりサイトに対しての信用性も高まります。

2. データの計測や見込み客のリストが獲得できる

ダウンロードのときに個人情報などを入力してもらうことで、データの計測や見込み客のリストを手に入れることが可能です。

プログラミングでの実装は初心者にとって難しいため今回は割愛しますが、 CMSなら簡単に設定できるシステムもあります。

データやリストを獲得すれば、見込み客のニーズや傾向などを把握したうえで、こちらから見込み客に対して プロダクトをアプローチができるため、売上向上につながるでしょう。

なお、Webサイトを活用したリード獲得の流れはリード獲得ロードマップ【全体像を3ステップで紹介】で詳細に解説しておりますので、ダウンロード機能実装を含めた施策の実行を検討されている方はぜひご覧ください。

WordPressで資料をダウンロードしてもらうやり方

WordPressもCMSの一種ですが、標準機能としてはダウンロード機能がついていません。

しかしプラグインをインストールすることで、ダウンロード機能を実装できます。

ここでは人気のあるプラグインを3つ紹介します。

1. WordPress Download Manager

2. Advanced File Manager

3. Shared Files for WordPress

Shared Files for WordPressのプレミアム機能を除き、すべて無料で導入できます。

プラグインを導入すれば、比較的簡単にダウンロード機能を実装できるでしょう。

ところがプラグインは環境によってテーマや他のプラグインとの相性があります。そのため、場合によっては特定のページがクラッシュする、想定通りの動作をしないなどの悪影響を及ぼす恐れもあります。

一定の期間、テスト運用をしてから本採用を検討しましょう。

関連記事：WordPressでWebサイト制作をするメリット・デメリット

ダウンロード機能が使えるCMSはLeadGridがおすすめ

Webサイトにダウンロード機能を実装する方法について解説しましたが、専門のエンジニアがいない、もしくはアサインできない場合は、 CMSの導入が無難です。

その中でもダウンロード機能が搭載されているCMSはカスタマイズをする必要がないため、PC初心者でも安心して使用できます。

そしてダウンロード機能が使えるCMSなら、LeadGridがおすすめ。

GIGが開発、提供するLeadGridは資料のダウンロード機能が標準搭載されています。

さらに顧客管理機能に優れており、問い合わせや資料請求のフォームを制作・効果検証できる機能が充実しています。

LeadGridの詳しい資料はこちらからご確認いただけます。

メディアの目的はPVではない！？オウンドメディア収益化で本当に重要なのは〇〇の数

資料をダウンロードする

リード獲得に強いCMS・Webサイト運用ツール LeadGrid

LeadGridを使えば、Webマーケティングに強いサービスサイト、オウンドメディア、コーポレートサイト制作をスピーディに制作可能です。

ページを見たまま編集できる「ページ編集機能」や「フォーム管理機能」など、Webの知識がなくても担当者ベースで施策が実行できます。

くわえてご希望の方には、WebマーケティングやSEOコンテンツの設計、運用、分析までトータルでご支援しています。

Webサービスやオウンドメディアの立ち上げ、コーポレートサイトリニューアルなど、御社のプロジェクトをお気軽にご相談下さい。

得意領域

Webマーケティングに強いWebサイト制作
サービスサイト、オウンドメディアサイトの立ち上げ
Webマーケティングの戦略設計、運用支援

お問い合わせ

無料デモをリクエスト

記事を書いた人

LeadGrid BLOG編集部

LeadGrid BLOG（リードグリッドブログ）は、リード獲得に役立つ情報を発信するWebマーケティングメディアです。

記事一覧

お役立ち資料

サイト制作、マーケティング戦略設計、コンテンツ制作、Webコンサルティング
関連のお役立ち資料をご紹介します。

資料一覧

サービス紹介資料

【業界別】スポーツ業界のサイト制作事例集

【業界別】エンタメ業界のサイト制作事例集

Web制作・CMS開発・Webマーケティングに関してお気軽にご相談ください。

多くのWeb制作、オウンドメディア制作、Webコンサルティング、コンテンツマーケティングの実績から制作から運用・改善までトータルでサポートします。

制作実績

資料ダウンロード

お問い合わせ

無料デモを
リクエスト