写真を新聞の網点印刷のようなドットグラフィックへ変換します。 ドットの形状・サイズ・スクリーン角度・色を調整し、背景透過のPNGとして書き出せます。
1色のみで網点化します。スクリーン角度は下のスライダーで調整できます
※ 画像処理はすべてこの端末のブラウザ内で行われます。画像がサーバーへ送信されることはありません。
ハーフトーン（網点）とは？写真を網点に変換する仕組みと本ツールの特徴
ハーフトーン（網点）とは、インクの濃さを変えられない印刷において、点の大きさと間隔だけで濃淡を再現する技法です。暗い部分ほど点が大きく、明るい部分ほど点が小さくなり、離れて見ると連続した階調として知覚されます。新聞や雑誌の写真をルーペで覗くと細かな点の集まりに見えるのは、この仕組みによるものです。
本ツールは写真をブラウザ上で網点化するオンラインツールです。点の面積が濃度に比例するよう半径を平方根で算出しているため、単純な明暗変換よりも印刷物に近い階調が得られます。さらにスクリーン角度の指定とCMYK4色分解に対応しており、実際の商業印刷に近い網点構成も再現できます。
こんなシーンで便利です
新聞・レトロ印刷風の加工
単色モードで間隔を狭め、スクリーン角度を45度にすると、古い新聞や雑誌の切り抜きのようなモノクロ網点になります。
ポップアート・アメコミ風のビジュアル
ドットサイズを大きく取り、鮮やかな2色を組み合わせることで、点そのものを主役にした力強いグラフィックが作れます。
4色印刷を再現したカラー網点
CMYKモードでは画像を4版に分解し、それぞれ異なる角度で重ねます。版ずれを含む印刷らしい発色を再現できます。
背景透過のテクスチャ素材づくり
背景を透過したPNGとして書き出せるため、Webサイトの背景やデザインソフト上で重ねるレイヤー素材としてそのまま使えます。
使い方は簡単 5ステップ
- プレビュー領域をタップまたはクリックして画像を選びます（ドラッグ＆ドロップにも対応）。
- 「単色（1版）」か「CMYK（4版）」を選びます。CMYKでは角度が自動で設定されます。
- ドットサイズ・間隔・スクリーン角度・コントラスト・明るさを調整します。
- ドット形状（円・四角・菱形・万線）と色を決め、必要に応じて明暗反転や背景透過を切り替えます。
- 「ハーフトーン画像を保存（PNG）」を押してダウンロードします。
※画像を用意していない場合は「サンプル画像で試す」から、内蔵のテスト画像で操作感を確認できます。
ご利用時の注意点
- 処理はすべてブラウザ内で完結：画像データが外部サーバーへ送信されることはありません。
- 描画量の自動調整：網点の総数が多くなりすぎる設定では、応答性を保つため間隔を自動的に広げて表示します。調整が入った場合は画面上に表示されます。
- CMYKモードの制限：各版を乗算で重ねる仕組みのため、ドット色と背景透過の指定は無効になります。
- 出力サイズ：読み込んだ画像は長辺1400px程度にリサイズして処理されます。印刷用途で高解像度が必要な場合は、書き出し後にベクター変換をご検討ください。
ハーフトーンの推奨設定早見表｜スタイル別のスクリーン角度・間隔・ドットサイズ
作りたい雰囲気に合わせた設定の目安です。まずはこの値から始めて、プレビューを見ながら微調整してください。
| 表現したいスタイル | 推奨モード・形状 | スクリーン角度 | 間隔とドットサイズの目安 |
|---|---|---|---|
| 新聞・レトロ印刷風 | 単色／円 | 45° | 間隔 4〜6px・ドット 5〜8px |
| ポップアート・アメコミ風 | 単色／円 | 0°または45° | 間隔 14〜22px・ドット 16〜26px |
| 4色印刷風（本格網点） | CMYK／円 | 自動（15°/75°/0°/45°） | 間隔 5〜8px・ドット 6〜10px |
| Web背景・テクスチャ | 単色／円＋背景透過 | 45° | 間隔 8〜12px・ドット 4〜7px |
| 万線スクリーン（トーン風） | 単色／万線 | 45°または90° | 間隔 5〜9px・ドット 4〜8px |
| モザイク・ピクセル寄りの表現 | 単色／四角 | 0° | 間隔 10〜16px・ドット 10〜16px |
| SNSアイコン・ロゴ加工 | 単色／菱形 | 45° | 間隔 4〜6px・ドット 5〜8px |
【間隔（px）と線数（LPI）の関係】
印刷では網点の細かさをLPI（Lines Per Inch）という単位で表します。本ツールの「間隔」はピクセル単位のため、最終的な出力解像度によって線数が決まります。おおよそ線数 ＝ 出力解像度(dpi) ÷ 間隔(px)の関係にあり、350dpiで印刷する場合は間隔2pxで約175線、間隔4pxで約88線に相当します。新聞印刷は65〜100線、一般的な商業オフセット印刷は133〜175線が目安です。
【ドットサイズと間隔の比率がすべてを決めます】
ドットサイズが間隔より小さいと点が離れて軽い印象になり、間隔より大きいと暗部で点どうしが繋がって重厚な印象になります。ドットサイズ ≒ 間隔 × 1.2〜1.4にすると、最も暗い部分でちょうど点が接する古典的な網点らしい見え方になります。
ハーフトーン印刷の基礎知識｜AMスクリーンとFMスクリーン、線数とモアレの関係
網点の設定は感覚で決めるものではなく、印刷技術として体系化されたルールがあります。仕組みを押さえておくと、狙った質感へ最短で近づけます。
AMスクリーンとFMスクリーンの違い｜点の大きさで表すか、点の密度で表すか
従来から使われているAMスクリーン（振幅変調）は、点を等間隔の格子に並べたうえで、濃度に応じて点の大きさを変える方式です。本ツールが採用しているのもこの方式で、規則正しい網点特有の質感が得られます。
一方FMスクリーン（周波数変調）は、点の大きさを一定に保ったまま点の密度を変える方式です。格子構造を持たないためモアレが原理的に発生せず、高精細な再現に向きますが、粒状感が出やすく印刷条件の管理が難しいという特性があります。
デザイン素材として網点らしさを見せたい場合はAM方式、写真の忠実な再現を優先する場合はFM方式が選ばれます。
スクリーン角度を30度ずつずらす理由｜版どうしの干渉が生むモアレの回避
複数の版を重ねる多色印刷では、格子と格子が干渉してモアレと呼ばれる不規則な縞模様が発生します。これを避けるため、各版の角度を可能な限り離すのが原則です。
標準的な組み合わせはシアン15度・マゼンタ75度・ブラック45度で、互いに30度ずつ離れています。イエローだけは0度と他の版に近い配置ですが、明度が高く目立ちにくいためこの位置が許容されています。
逆に言えば、複数の版を同じ角度で重ねると必ず模様が現れます。本ツールのCMYKモードはこの標準角度を自動適用するため、角度の設定ミスによるモアレは発生しません。
線数・解像度・最終表示サイズの関係｜Web書き出しでモアレを出さないために
網点画像は、作成時のサイズと最終的な表示サイズが一致していることが前提の素材です。1400pxで生成した網点画像をWeb上で700pxに縮小表示すると、ブラウザのリサンプリングによって点の並びが間引かれ、意図しない縞模様や潰れが発生します。
対策としては、最終的に表示するサイズと同じ幅で書き出すか、あるいは高解像度ディスプレイを考慮して表示幅の2倍で書き出したうえでCSS側で半分に指定する方法が確実です。
また、Webサイトの背景テクスチャとして繰り返し使う場合は、書き出したPNGをそのまま敷き詰めるよりも、ベクター形式に変換してから使うほうが解像度に依存せず読み込みも軽くなります。
ハーフトーン加工でよくある失敗と対策
元画像のコントラストが不足していて、一面に同じ大きさの点が並ぶだけになる
明るさが一様でコントラストの低い写真をそのまま網点化すると、点の大小による陰影が生まれず、模様だけが並んだのっぺりとした画像に仕上がります。ハーフトーンは明暗の差を点の面積に置き換える技法であるため、元画像に差がなければ表現する情報そのものが存在しないことになります。
💡 対策・解決策を見る▼
ドットサイズと間隔の比率が合っておらず、砂嵐のようなノイズに見える
間隔に対してドットサイズが極端に小さいと点が孤立してデジタルノイズのように見え、逆に大きすぎると暗部が完全に塗り潰れて階調が消えます。どちらの場合も網点として意図した質感にはならず、単に画質を落としただけの画像になってしまいます。
💡 対策・解決策を見る▼
作成サイズと表示サイズが異なるため、Webに載せた途端にモアレが出る
1400pxで生成した網点画像をブログやSNSで縮小表示した結果、ブラウザのリサンプリングによって点の並びが間引かれ、元画像には存在しなかった縞模様が現れる失敗です。プレビュー段階では美しく見えるため、公開してから気づくケースが多くなります。
💡 対策・解決策を見る▼
ドット色と背景色の明度差が足りず、網点が背景に溶け込んで見えなくなる
同系色や同程度の明るさの2色を組み合わせると、点のパターンが背景に同化してハーフトーン特有のインパクトが完全に失われます。特に彩度だけが違う配色は、モノクロに変換すると差がほぼ消えるため、印刷やグレースケール表示で破綻します。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.ハーフトーン（網点）とは何ですか、どのような仕組みで濃淡を表現しますか
A. ハーフトーンとは、インクの濃さを変えられない印刷において、点の大きさと間隔だけで濃淡を再現する技法です。暗い部分ほど点を大きく、明るい部分ほど点を小さく配置し、離れて見ると連続した階調に見える人間の視覚特性を利用しています。新聞や雑誌の写真をルーペで拡大すると細かな点の集まりに見えるのはこのためです。本ツールは点の面積が濃度に比例するよう半径を平方根で算出しており、印刷物に近い階調表現になります。
Q.スクリーン角度とは何ですか、なぜ45度が基本とされているのですか
A. スクリーン角度とは、網点を並べる格子を何度傾けるかの設定です。0度や90度のまま並べると点の列が縦横のラインとして目立ち、画像より模様のほうが視認されてしまいます。45度は人間の目が最も規則性を感じにくい角度とされるため、単色の網点では45度が標準とされています。本ツールでは単色モードで0度から90度まで自由に変更でき、意図的に模様を強調する表現にも使えます。
Q.CMYKの4色に分解した本格的なカラーハーフトーンは作成できますか
A. はい、CMYKモードに切り替えると作成できます。画像をシアン・マゼンタ・イエロー・ブラックの4版に分解し、それぞれ15度・75度・0度・45度の角度で網点化したうえで乗算合成します。これは実際の商業印刷で使われる標準的な角度の組み合わせで、各版を30度前後ずつずらすことで版どうしの干渉によるモアレを避ける仕組みです。単色モードとは異なり、色の重なりによって中間色が生まれる印刷らしい発色になります。
Q.背景を透過した状態のPNG画像として書き出すことはできますか
A. はい、単色モードで「背景を透過」をオンにすると、背景を塗りつぶさずドットのみのPNGとして保存できます。Webサイトの背景テクスチャや、デザインソフト上で他のレイヤーへ重ねる素材として使う場合に便利です。プレビュー上では市松模様で透過部分を示します。なおCMYKモードは各版を乗算で重ねる仕組みのため、透過指定は無効となります。
Q.読み込める画像のサイズや解像度に制限はありますか
A. ファイルサイズの厳格な制限はありませんが、ブラウザ上での応答性を保つため、読み込んだ画像は長辺1400px程度に自動リサイズしたうえで処理されます。また網点の総数が多くなりすぎる設定では、間隔を自動的に広げて描画量を抑えます。その場合は画面上に調整後の間隔が表示されます。印刷用途で高解像度が必要な場合は、書き出したPNGをベクター変換ソフトでトレースする方法をご検討ください。
Q.生成したハーフトーン画像は商用のバナーや印刷物に無償で使えますか
A. はい、可能です。本ツールで生成したPNG画像は、個人利用・商用利用・二次加工の有無を問わず自由にご利用いただけます。ただし、元となる画像そのものの権利は変換後も引き継がれるため、他者が権利を持つ写真やイラストを素材にする場合は、その利用許諾の範囲内でお使いください。
Q.スマートフォンやタブレットのブラウザからでも網点加工できますか
A. はい、動作します。プレビュー領域をタップすると画像の選択画面が開き、ドット形状の切り替え、各スライダーの調整、PNGの保存まで同一の機能をご利用いただけます。画像を用意せずに操作感を確かめたい場合は、サンプル画像で試すボタンから内蔵のテスト画像を読み込めます。
Q.アップロードした画像が外部に送信されたり保存されたりしませんか
A. 一切ありません。画像の読み込みから網点化、PNGの書き出しまで、すべての処理がお使いのデバイスのブラウザ内で完結しています。画像データが外部サーバーへ送信されたり保存されたりする仕組みはないため、公開前のデザイン素材やプライベートな写真でも安心してご利用いただけます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。