ノーコードサイトにPDF資料を置く方法——ダウンロード用リンクの作り方と、サイズ・公開範囲・更新の注意点

会社案内、料金表、サービス資料、メニュー表——ホームページを見た人に、PDFの資料を渡したい場面は多くあります。ノーコードで作ったサイトでも、PDFを置くこと自体は難しくありません。ただ、「ページの中に表示する」のではなく「リンクから開いてもらう」形になる点や、容量や更新まわりに気をつけることがあります。

この記事では、Studioを例に、PDFを置く手順と、ダウンロードボタンについての考え方、つまずきやすい点を整理します。

PDFは、ページの中に表示できず、リンクで開いてもらう

Studioの公式ヘルプによると、アップロードしたPDFは、ページに直接表示（埋め込み）することはできません。代わりに、テキストやボタンなどの「リンク先」として設定します。リンクを押すと、PDFが新しいタブで開きます。

また、Studioには「ダウンロード専用のボタン」の機能はありません。公式ヘルプでは、PDFをアップロードしてリンクを設定する方法が案内されています。訪問者は、開いたPDFを、そこから保存します。

PDFを置く手順（Studio）

公式ヘルプで案内されている流れは次のとおりです。

1. PDFファイルを、Studioのエディタにアップロードする（編集画面へのドラッグ＆ドロップか、左側の「アップロード」から追加する）
2. リンクにするボックスを用意する。ボタンなら、左側の「追加」の「パーツ」タブで、ボタンを選ぶ。テキストや画像のボックスでもよい
3. そのボックスを選び、右側のパネルの「設定」タブを開く
4. 「リンク」の欄をクリックし、アップロードしたPDFを、リンク先に指定する
5. リンクを設定すると、ボックスの右上に、PDFのファイル名が表示されることを確かめる
6. プレビューで押して、PDFが新しいタブで開くことを確かめる
7. サイトを更新（公開）する

ボタンの文言と見せ方の考え方

• 「資料をダウンロード」だけでなく、ファイルの種類と大きさを添える（例：「会社案内（PDF・約2MB）」）。開く前に、何が開くかが分かる
• スマホで押す人も多いので、ボタンは指で押しやすい大きさにする。押しやすさの目安はStudioのヘッダーナビを崩れにくくする設計にまとめています
• PDFは新しいタブで開くので、サイトに戻ってきやすいように、ページの中にも、次の行動（問い合わせなど）を用意しておく。ノーコードサイトに問い合わせフォームを設置するときに確認しておきたいこともあわせて
• リンクの設定の種類はStudioのリンク設定の基本——目的地に応じた開き方の使い分けへ

容量の上限を、先に知っておく

Studioの公式ヘルプでは、ファイルは、形式にかかわらず、1ファイルあたり最大1GBまでアップロードできます。それとは別に、プロジェクト全体のストレージの上限があり、プランによって違います。

置く前に決めておくこと

• 容量は軽くする。PDFが大きいと、開くまでに時間がかかる。画像が多い資料は、書き出すときに画像を圧縮する。画像を軽くする考え方はStudioで画像を軽くする基本——公開後の表示速度を落とさない3つの工夫にも通じる
• 公開してよい内容か確認する。サイトに置いたPDFは、リンクを知っている人なら、誰でも開ける資料として扱う。社外秘や個人情報は載せない
• 「ページごとに限定公開」はできない。Studioのパスワード保護は、サイト全体が対象。資料だけを限りたいときは、別の方法を検討する。ノーコードサイトにパスワードをかけて限定公開する基本へ
• 最新の資料かを確認する。料金や日付が入った資料は、古いまま置かれがち。更新の担当と時期を決めておく

PDFは、検索にも出る

Googleの公式ドキュメントでは、PDF（.pdf）は、Googleがインデックスに登録できるファイル形式に含まれています。つまり、サイトに置いたPDFが、検索結果に出ることがあります。古い資料が残ると、古い料金や内容を見られる可能性があります。差し替えるときは、公開したサイトで、リンクから新しい内容が開くことを確かめてください。

よくある質問

まとめ

PDF資料は、「Studioにアップロードする」→「ボタンやテキストのリンク先に、PDFを指定する」→「プレビューで新しいタブで開くか確かめて、更新する」の順で置けます。ページの中には表示できないこと、容量の上限があること、リンクを知っていれば誰でも開けること、検索に出ることを、覚えておくと安心です。

CMSで項目ごとに資料を配りたいときはStudioのCMS機能の基本——ブログ・お知らせを同じデザインで量産する仕組みも参考にしてください。