ホームページが印刷できない・崩れる原因と対処法｜コンビニ印刷も

ホームページを印刷したら、右端が切れていた。
背景の色が出ない。そもそも印刷ボタンを押しても何も起きない。

こんにちは、三重県でホームページ制作をしているMYコンサルティングです。
この症状には、はっきりした理由があります。

Webページは、紙のサイズを想定して作られていないからです。

なぜホームページは印刷で崩れるのか

紙にはA4という決まったサイズがあります。
一方、Webページには決まった幅がありません。パソコンでは横に広く、スマホでは縦に長く、見る画面に合わせて形を変えるように作られています。

その「形を変えられる」ものを、決まったサイズの紙に押し込むわけです。
どこかにしわ寄せが出るのは、仕組みとして避けられません。

つまり、あなたの操作が間違っているわけではありません。
設定でかなり改善できるので、順に見ていきます。

まずブラウザの印刷設定を見る

印刷画面（Ctrlキー＋Pキー、Macはcommandキー＋Pキー）を開くと、右側や下部に設定が並んでいます。
触るのは2か所だけです。

①「用紙に合わせる」または倍率

右端が切れる場合は、ここです。
倍率の指定を「用紙に合わせる」に切り替えるか、数値を下げてください。90%や80%にすると収まることが多いです。

ただし、この項目は最初の画面には出ていないことがあります。折りたたまれた設定を開いてください。

ブラウザ	場所
Chrome	「詳細設定」を開く →「倍率」
Edge	「その他の設定」を開く →「拡大/縮小」
Safari（Mac）	印刷画面の「拡大縮小（%）」

それでも切れるなら、用紙の向きを横（横長）に変えてみてください。表が入ったページは横のほうが入ります。

②「背景のグラフィック」にチェック

背景の色や画像が出ないのは、故障ではありません。
ブラウザは既定で背景を印刷しない設定になっています。インクを大量に使うためです。

この項目は、ブラウザによって場所と名前が違います。

ブラウザ	場所と名前
Chrome	詳細設定 →「背景のグラフィック」
Edge	その他の設定 →「背景のグラフィックス」
Safari（Mac）	「背景をプリント」

ここにチェックを入れると、背景の色や画像も印刷されます。

PDFに保存してから印刷する

印刷画面で、送信先（プリンター）を「PDFに保存」に変えると、紙に出す代わりにファイルとして保存できます。

これには3つの利点があります。

できること	何がうれしいか
印刷前に仕上がりを確認できる	崩れていたら紙を無駄にせず設定を直せる
ファイルとして保存・共有できる	メールで送れる。あとで見返せる
コンビニで印刷できる	プリンターが手元になくてもよい

崩れ方を確認したいだけなら、いきなり紙に出さずPDFで見るほうが早いです。

スマホでPDFに保存するには

次の章のコンビニ印刷は、スマホの中にPDFがあることが前提です。
スマホでも、印刷の画面からPDFとして保存できます。

スマホ	手順
iPhone（Safari）	画面下の共有ボタン →「PDFを作成」→ 保存 （見当たらなければ「プリント」→ プレビューを指で広げる → 共有 →「ファイルに保存」）
Android（Chrome）	右上のメニュー →「共有」→「印刷」→ プリンター欄を「PDF形式で保存」に変える

ボタンの名前は機種やバージョンで多少変わりますが、「共有」ボタンから入るのは共通です。
保存したPDFを次の章のアプリに登録すれば、コンビニで印刷できます。

コンビニで印刷する

プリンターがない、インクが切れた、外出先で急に必要になった。
そういうときはコンビニのコピー機が使えます。

方法は大きく2つあります

チェーンとアプリによって、やり方が分かれます。

方法	流れ	アプリの例
事前に登録して番号で出す	自宅や移動中にファイルを登録 → 発行された番号をコピー機に入力	かんたんnetprint／netprint（セブン-イレブン） ネットワークプリント（ローソン・ファミリーマート・ミニストップなど）
事前に設定してQRコードで出す	アプリで先にプリント設定 → QRコードがアプリに保存される → 店頭でコピー機にかざす	セブン-イレブン マルチコピー

どちらも先に用意しておいて、店頭では番号を入れるかQRをかざすだけです。
セブン-イレブンのマルチコピーは、設定したQRコードがアプリ内に保存される（最大20件）ので、店に着いてからの操作がいちばん短くて済みます。

そもそも印刷できないとき

印刷ボタンを押しても、印刷画面すら出ない。
この場合は原因が2つに分かれます。

ページ側で印刷を制限している

Webページ側で、印刷したときの中身を空にする指定ができます。
会員向けの資料や有料コンテンツで使われることがあります。

この場合、印刷画面は開くのに中身が白紙になるという出方をします。
またページ内に置かれた独自の印刷ボタンが反応しないだけ、ということもあります。その場合はブラウザの印刷（Ctrlキー＋Pキー）を直接試してください。

ブラウザや拡張機能の影響

こちらのほうが多いです。
別のブラウザで同じページを開いて試してください。ChromeでだめならEdgeやSafariで、という具合です。

他のブラウザで印刷できるなら、元のブラウザの設定か、入れている拡張機能が邪魔をしています。
この切り分け方は、表示まわりのトラブル全般に使えます。ホームページが表示されないときでも同じ考え方を紹介しています。

作る側でできる印刷対策

ここからは、サイトを持っている方向けの話です。

実は、「印刷したときだけ適用されるデザイン指定」をサイトに入れておくことができます。
これを入れておくと、お客様が印刷したときの仕上がりが変わります。

入れておくと	紙でどうなるか
メニューやボタンを消す	紙に不要なものが載らない
文字サイズと余白を紙向けに	読みやすくなる
横幅を紙に合わせる	右端が切れない
リンクの行き先を文字で出す	紙でもURLが分かる

逆に、会社概要やブログ記事のようなページに印刷対策まで入れる必要はありません。
印刷される前提があるページだけで十分です。

よくある質問

ホームページを印刷すると、右端が切れてしまいます。

ブラウザの印刷設定で用紙に合わせて縮小してください。多くのブラウザには「用紙に合わせる」や倍率の指定があり、そこを調整すると収まります。それでも切れる場合は、用紙の向きを横にすると入ることがあります。

背景の色や画像が印刷されません。

ブラウザは既定で背景を印刷しない設定になっています。インクの節約のためです。Chromeは詳細設定の「背景のグラフィック」、Edgeはその他の設定の「背景のグラフィックス」、SafariのMac版は「背景をプリント」にチェックを入れると印刷されます。

印刷ボタンを押しても何も起きません。

ページ側で印刷を止めている場合と、ブラウザや拡張機能の影響で止まっている場合があります。まず別のブラウザで同じページを開いて試してください。それで印刷できるなら、元のブラウザの設定か拡張機能が原因です。

コンビニでホームページを印刷できますか？

コピー機にURLを入れて直接印刷することはできません。PDFにしてから持ち込むのが確実です。いずれも先に準備しておく形で、店頭では番号を入力するかQRコードをかざすだけです。セブン-イレブンのかんたんnetprintやnetprint、ローソン・ファミリーマートなどのネットワークプリントは発行された番号を入力します。セブン-イレブン マルチコピーのアプリは、事前にプリント設定をするとQRコードがアプリに保存され、店頭でかざすだけで印刷できます。外出先でも印刷できるので、プリンターが手元にないときに便利です。

PDFに保存すると崩れるのはなぜですか？

PDFに書き出す時点で、画面用のレイアウトを紙のサイズに流し込むためです。画面では横に並んでいたものが縦になったり、途中で切れたりします。印刷用の指定がされていないサイトでは避けにくい症状です。

自分のサイトを、お客様がきれいに印刷できるようにしたいのですが。

印刷用のスタイル指定（印刷したときだけ適用されるCSS）をサイトに入れておく方法があります。メニューやボタンなど紙には不要な部分を消し、文字サイズと余白を紙向けに整えます。メニュー表や案内図のように印刷される前提のページがあるなら、入れておく価値があります。

お客様から「印刷したら崩れる」と言われました。

ブラウザの設定で直る範囲かどうかをまず確認してください。用紙に合わせる設定と背景の印刷で解決するなら、その手順を案内すれば済みます。設定では直らない場合は、サイト側に印刷用の指定を入れる作業になります。

まとめ

ホームページが印刷で崩れるのは、Webページが紙のサイズを想定していないからです。使い方の問題ではありません。

まずは「用紙に合わせる」と「背景のグラフィック」の2か所。
これで大半は形になります。プリンターが手元になければ、PDFに保存してコンビニで出せます。

そして、サイトを持っている側の話としては、印刷される前提のページがあるかどうかを一度考えてみてください。
メニュー表や料金表を紙で持ち帰るお客様がいるなら、印刷対策を入れておく価値があります。