写真を新聞の網点印刷のようなドットグラフィックへ変換します。 ドットの形状・サイズ・スクリーン角度・色を調整し、高解像度PNGやSVG(ベクター)として書き出せます。画像がなくてもハーフトーンパターン素材を生成できます。
このツールはブラウザの中だけで動いています。入力した内容が、外部に送信されることはありません。入力内容は外部に送信されません。
詳しく1色のみで網点化します。スクリーン角度は下のスライダーで調整できます
線数 = 出力解像度 ÷ 間隔。新聞は65〜100線、商業オフセット印刷は133〜175線が目安です
PNGの出力サイズ
倍率を上げると間隔とドットも同じ比率で拡大されるため、見た目を保ったまま印刷向けの高解像度で書き出せます
※ 画像処理はすべてこの端末のブラウザ内で行われます。画像がサーバーへ送信されることはありません。
ハーフトーン(網点)とは?写真を網点に変換する仕組みと本ツールの特徴
ハーフトーン(網点)とは、インクの濃さを変えられない印刷において、点の大きさと間隔だけで濃淡を再現する技法です。暗い部分ほど点が大きく、明るい部分ほど点が小さくなり、離れて見ると連続した階調として知覚されます。新聞や雑誌の写真をルーペで覗くと細かな点の集まりに見えるのは、この仕組みによるものです。
本ツールは写真をブラウザ上で網点化するオンラインツール(halftone maker)です。点の面積が濃度に比例するよう半径を平方根で算出しているため、単純な明暗変換よりも印刷物に近い階調が得られます。さらにスクリーン角度の指定とCMYK4色分解に対応しており、実際の商業印刷に近い網点構成も再現できます。
印刷用途に向けて、現在の設定での線数(LPI)の目安表示、最大3倍の高解像度PNG書き出し、拡大しても滲まないSVG(ベクター)書き出しにも対応しました。Illustratorなどのベクターソフトでそのまま編集できます。
また、写真を用意しなくてもハーフトーンパターン素材だけを生成できます。グラデーション・放射状・均一の4種類から選び、背景透過のドットパターンやスクリーントーン風の素材をその場で作成できます。
こんなシーンで便利です
新聞・レトロ印刷風の写真加工
単色モードで間隔を狭め、スクリーン角度を45度にすると、古い新聞や雑誌の切り抜きのようなモノクロ網点になります。プリセット「新聞・レトロ印刷」から一発で適用できます。
ポップアート・アメコミ風のビジュアル
ドットサイズを大きく取り、鮮やかな2色を組み合わせることで、点そのものを主役にした力強いグラフィックが作れます。
印刷入稿用の網点データ作成
出力解像度を選ぶと線数(LPI)の目安が表示されます。指定線数に合わせて間隔を決め、高解像度PNGまたはSVGで書き出せば、そのまま入稿データとして使えます。
4色印刷を再現したカラー網点
CMYKモードでは画像を4版に分解し、それぞれ異なる角度で重ねます。版ずれを含む印刷らしい発色を再現できます。
漫画のスクリーントーン風のドット素材
「パターンを作る」+均一濃度+万線または円で、一定密度のトーン素材を生成できます。背景透過にすれば作画ソフトへそのまま重ねられます。
背景透過のWebテクスチャ素材づくり
背景を透過したPNG・SVGとして書き出せるため、Webサイトの背景やデザインソフト上で重ねるレイヤー素材としてそのまま使えます。
使い方は簡単 6ステップ
- 「画像から作る」でプレビュー領域をタップして画像を選ぶか、「パターンを作る」で画像なしの素材生成に切り替えます。
- 仕上がりの方向性が決まっている場合は、スタイルプリセット(新聞・アメコミ・4色印刷・漫画トーン・Web背景・カラードット)から選びます。
- 版の構成を「単色(1版)」「原画の色」「CMYK(4版)」から選びます。CMYKでは角度が自動で設定されます。
- ドットサイズ・間隔・スクリーン角度・コントラスト・明るさを調整します。印刷用途では出力解像度を選び、線数(LPI)の目安を確認してください。
- ドット形状(円・四角・菱形・万線)と色を決め、必要に応じて明暗反転や背景透過を切り替えます。
- 出力倍率を選んで「PNGで保存」、または解像度に依存しない「SVG(ベクター)で保存」を押してダウンロードします。
※画像を用意していない場合は「サンプル画像で試す」から、内蔵のテスト画像で操作感を確認できます。
ご利用時の注意点
- 処理はすべてブラウザ内で完結:画像データが外部サーバーへ送信されることはありません。
- 描画量の自動調整:網点の総数が多くなりすぎる設定では、応答性を保つため間隔を自動的に広げて表示します。調整が入った場合は画面上に表示されます。
- CMYKモードの制限:各版を乗算で重ねる仕組みのため、ドット色と背景透過の指定は自動的に無効になります。
- 線数(LPI)の表示:選択した出力解像度で等倍印刷した場合の目安です。実際の印刷仕様は入稿先の指定をご確認ください。
- PNG出力:プレビューは長辺1400px程度ですが、書き出しは最大3倍まで拡大できます。倍率を上げると間隔とドットも同じ比率で拡大されるため、見た目は変わりません。
- SVG出力:網点1つが1つの図形要素になるため、間隔が狭いとファイルが大きくなります。上限を超える場合は画面上に注意が表示されます。
ハーフトーンの推奨設定早見表|スタイル別のスクリーン角度・間隔・ドットサイズ
作りたい雰囲気に合わせた設定の目安です。まずはこの値から始めて、プレビューを見ながら微調整してください。同名のスタイルプリセットからワンタップで適用できます。
| 表現したいスタイル | 推奨モード・形状 | スクリーン角度 | 間隔とドットサイズの目安 |
|---|---|---|---|
| 新聞・レトロ印刷風 | 単色/円 | 45° | 間隔 4〜6px・ドット 5〜8px |
| ポップアート・アメコミ風 | 単色/円 | 0°または45° | 間隔 14〜22px・ドット 16〜26px |
| 4色印刷風(本格網点) | CMYK/円 | 自動(15°/75°/0°/45°) | 間隔 5〜8px・ドット 6〜10px |
| カラードット(原画の色) | 原画の色/円 | 45° | 間隔 8〜12px・ドット 10〜14px |
| 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モードはこの標準角度を自動適用するため、角度の設定ミスによるモアレは発生しません。
印刷入稿を前提にした線数と解像度の決め方|用紙と印刷方式で最適値が変わる
線数は細かいほど高精細になりますが、用紙のインク吸収性が追いつかないと暗部が潰れます。新聞用紙のように吸収性の高い紙では65〜100線、コート紙を使う商業オフセット印刷では133〜175線が目安です。
画像解像度は線数の約2倍(dpi = LPI × 2)が必要とされ、175線なら350dpiが基準になります。本ツールの「印刷時の線数の目安」でこの関係を確認しながら間隔を決めてください。
なお、あらかじめ網点化された画像をさらに印刷機の網点処理にかけると二重の網点によるモアレが起きます。網点加工を意匠として使う場合は、印刷所へ「網点処理済みのデータである」旨を必ず伝えてください。
ベクター(SVG)で書き出す利点|拡大に強く、色の一括変更もできる
PNGは画素の集まりのため、拡大すると網点のふちがぼやけます。一方SVGは網点1つ1つが図形として記述されるため、大判ポスターや看板サイズまで拡大しても輪郭が鋭いままです。
さらにIllustratorやInkscapeで開けば、同じ色のドットをまとめて選択して色を差し替える、特定の領域だけ削除する、他のパスと合成するといった編集が後からできます。
ただし網点の数だけ図形要素が生成されるため、間隔を極端に狭くするとファイルが非常に重くなります。ベクターで書き出す前提であれば、間隔は8px以上を目安に設定するのが実用的です。
線数・解像度・最終表示サイズの関係|Web書き出しでモアレを出さないために
網点画像は、作成時のサイズと最終的な表示サイズが一致していることが前提の素材です。1400pxで生成した網点画像をWeb上で700pxに縮小表示すると、ブラウザのリサンプリングによって点の並びが間引かれ、意図しない縞模様や潰れが発生します。
対策としては、最終的に表示するサイズと同じ幅で書き出すか、あるいは高解像度ディスプレイを考慮して表示幅の2倍で書き出したうえでCSS側で半分に指定する方法が確実です。本ツールの出力倍率2倍がこの用途に対応します。
また、Webサイトの背景テクスチャとして繰り返し使う場合は、PNGよりもSVGで書き出したほうが解像度に依存せず読み込みも軽くなります。
ハーフトーン加工でよくある失敗と対策
元画像のコントラストが不足していて、一面に同じ大きさの点が並ぶだけになる
明るさが一様でコントラストの低い写真をそのまま網点化すると、点の大小による陰影が生まれず、模様だけが並んだのっぺりとした画像に仕上がります。ハーフトーンは明暗の差を点の面積に置き換える技法であるため、元画像に差がなければ表現する情報そのものが存在しないことになります。
💡 対策・解決策を見る▼
ドットサイズと間隔の比率が合っておらず、砂嵐のようなノイズに見える
間隔に対してドットサイズが極端に小さいと点が孤立してデジタルノイズのように見え、逆に大きすぎると暗部が完全に塗り潰れて階調が消えます。どちらの場合も網点として意図した質感にはならず、単に画質を落としただけの画像になってしまいます。
💡 対策・解決策を見る▼
印刷所の指定線数を確認せずに入稿し、暗部が潰れたり点が目立ちすぎたりする
網点の間隔をデザイン上の見た目だけで決めて入稿した結果、用紙のインク吸収性に対して線数が細かすぎて暗部が黒く潰れる、あるいは粗すぎて点が意図せず目立ってしまう失敗です。特に新聞用紙など吸収性の高い紙で起こりやすくなります。
💡 対策・解決策を見る▼
作成サイズと表示サイズが異なるため、Webに載せた途端にモアレが出る
1400pxで生成した網点画像をブログやSNSで縮小表示した結果、ブラウザのリサンプリングによって点の並びが間引かれ、元画像には存在しなかった縞模様が現れる失敗です。プレビュー段階では美しく見えるため、公開してから気づくケースが多くなります。
💡 対策・解決策を見る▼
SVGで書き出そうとして間隔を狭くしすぎ、ファイルが極端に重くなる
ベクターで入稿したいという理由から間隔3〜4pxのまま書き出した結果、網点1つが1つの図形要素になるためファイルサイズが数十MBに達し、Illustratorでの編集すら困難になる失敗です。
💡 対策・解決策を見る▼
ドット色と背景色の明度差が足りず、網点が背景に溶け込んで見えなくなる
同系色や同程度の明るさの2色を組み合わせると、点のパターンが背景に同化してハーフトーン特有のインパクトが完全に失われます。特に彩度だけが違う配色は、モノクロに変換すると差がほぼ消えるため、印刷やグレースケール表示で破綻します。
💡 対策・解決策を見る▼
よくある質問(FAQ)
Q.ハーフトーン(網点)とは何ですか、どのような仕組みで濃淡を表現しますか
A. ハーフトーンとは、インクの濃さを変えられない印刷において、点の大きさと間隔だけで濃淡を再現する技法です。暗い部分ほど点を大きく、明るい部分ほど点を小さく配置し、離れて見ると連続した階調に見える人間の視覚特性を利用しています。新聞や雑誌の写真をルーペで拡大すると細かな点の集まりに見えるのはこのためです。本ツールは点の面積が濃度に比例するよう半径を平方根で算出しており、印刷物に近い階調表現になります。
Q.写真をアップロードして網点化するにはどうすればいいですか
A. プレビュー領域をタップまたはクリックして画像を選ぶだけです(ドラッグ&ドロップにも対応)。読み込むとすぐに網点化されたプレビューが表示されるので、あとはドットサイズ・間隔・スクリーン角度などのスライダーを動かして好みの質感に調整してください。手元に画像がない場合は「サンプル画像で試す」から内蔵のテスト画像で操作感を確認できます。仕上がりに迷う場合は、新聞風・アメコミ風などのスタイルプリセットをワンタップで適用するのが近道です。
Q.印刷用のハーフトーンを作りたいのですが、線数(LPI)はどう決めればいいですか
A. 線数は「出力解像度(dpi)÷ 網点の間隔(px)」で決まります。本ツールでは出力解像度を72・150・300・350dpiから選ぶと、現在の間隔設定での線数の目安がその場で表示されます。新聞印刷は65〜100線、一般的な商業オフセット印刷は133〜175線が目安です。例えば350dpiで印刷する場合、間隔2pxなら約175線、間隔4pxなら約88線に相当します。印刷所へ入稿する際は、先方が指定する線数に合わせて間隔を決めてください。
Q.印刷に使える高解像度で書き出すことはできますか
A. できます。書き出し時にPNGの出力倍率を1倍・2倍・3倍から選べます。倍率を上げると網点の間隔とドットサイズも同じ比率で拡大されるため、プレビューと同じ見た目のまま解像度だけを高められます。さらに解像度に依存しないSVG(ベクター)形式でも書き出せるため、拡大しても網点が滲まない入稿データが必要な場合はSVGをご利用ください。
Q.ベクター形式(SVG)で書き出せますか、Illustratorで編集できますか
A. 書き出せます。「SVG(ベクター)で保存」を押すと、網点1つ1つが図形要素として記述されたSVGファイルが生成されます。Adobe IllustratorやInkscape、FigmaなどのベクターソフトでそのままIllustratorで開いて、色の一括変更や拡大縮小、パスの加工が可能です。解像度に依存しないため、大判ポスターや看板など高精細な印刷物にも使えます。なお網点の数が多いとファイルが重くなるため、間隔を広めに設定することをおすすめします(上限を超える場合は画面上に注意が表示されます)。
Q.スクリーン角度とは何ですか、なぜ45度が基本とされているのですか
A. スクリーン角度とは、網点を並べる格子を何度傾けるかの設定です。0度や90度のまま並べると点の列が縦横のラインとして目立ち、画像より模様のほうが視認されてしまいます。45度は人間の目が最も規則性を感じにくい角度とされるため、単色の網点では45度が標準とされています。本ツールでは単色・原画の色モードで0度から90度まで自由に変更でき、意図的に模様を強調する表現にも使えます。
Q.CMYKの4色に分解した本格的なカラーハーフトーンは作成できますか
A. はい、CMYKモードに切り替えると作成できます。画像をシアン・マゼンタ・イエロー・ブラックの4版に分解し、それぞれ15度・75度・0度・45度の角度で網点化したうえで乗算合成します。これは実際の商業印刷で使われる標準的な角度の組み合わせで、各版を30度前後ずつずらすことで版どうしの干渉によるモアレを避ける仕組みです。単色モードとは異なり、色の重なりによって中間色が生まれる印刷らしい発色になります。
Q.元の写真の色を残したままカラーの網点にできますか
A. できます。「原画の色」モードを選ぶと、各ドットが元画像のその位置の色で塗られます。CMYK分解のように4版へ分けず1版のまま処理するため、写真の色味を保ったポップなカラードット表現を手軽に作れます。ドットの大きさは明暗(濃度)に応じて変化するため、色と階調の両方が同時に再現されます。CMYKモードが印刷再現向けであるのに対し、こちらはWebバナーやSNS画像などの装飾向けです。
Q.写真を用意しなくてもハーフトーンのパターン素材だけを作れますか
A. 作れます。「パターンを作る」に切り替えると、横グラデーション・縦グラデーション・放射状・均一(一定濃度)の4種類から選んで、画像なしでハーフトーンパターンを生成できます。サイズも正方形1200×1200・横長1600×900・縦長1080×1350から選択可能です。背景透過をオンにすればWebサイトの背景テクスチャやデザインの重ねレイヤーとして使える素材になり、均一パターンは漫画のスクリーントーンのような一定密度のドット素材として活用できます。
Q.漫画のスクリーントーンのような万線(線状)のパターンも作れますか
A. 作れます。ドット形状から「万線」を選ぶと、点ではなく線の太さで濃淡を表現する万線スクリーンになります。暗い部分ほど線が太くなり、明るい部分ほど細くなるため、漫画のトーン貼りに近い質感が得られます。スクリーン角度で線の向きを自由に変えられるほか、スタイルプリセットの「漫画トーン風(万線)」からワンタップで適用することもできます。
Q.背景を透過した状態のPNG画像として書き出すことはできますか
A. はい、単色モードまたは原画の色モードで「背景を透過」をオンにすると、背景を塗りつぶさずドットのみのPNGとして保存できます。Webサイトの背景テクスチャや、デザインソフト上で他のレイヤーへ重ねる素材として使う場合に便利です。プレビュー上では市松模様で透過部分を示します。なおCMYKモードは各版を乗算で重ねる仕組みのため、透過指定は自動的に無効となります。
Q.読み込める画像のサイズや解像度に制限はありますか
A. ファイルサイズの厳格な制限はありませんが、ブラウザ上での応答性を保つため、プレビューは長辺1400px程度に自動リサイズして表示されます。書き出し時は最大3倍まで拡大でき、より高い解像度が必要な場合はSVG形式をご利用ください。また網点の総数が多くなりすぎる設定では、間隔を自動的に広げて描画量を抑えます。その場合は画面上に調整後の間隔が表示されます。
Q.生成したハーフトーン画像は商用のバナーや印刷物に無償で使えますか
A. はい、可能です。本ツールで生成したPNG・SVG画像は、個人利用・商用利用・二次加工の有無を問わず自由にご利用いただけます。ただし、元となる画像そのものの権利は変換後も引き継がれるため、他者が権利を持つ写真やイラストを素材にする場合は、その利用許諾の範囲内でお使いください。なお「パターンを作る」で生成した素材は元画像を必要としないため、権利関係を気にせず自由にお使いいただけます。
Q.スマートフォンやタブレットのブラウザからでも網点加工できますか
A. はい、動作します。プレビュー領域をタップすると画像の選択画面が開き、ドット形状の切り替え、各スライダーの調整、PNG・SVGの保存まで同一の機能をご利用いただけます。ただし高倍率での書き出しは端末のメモリを消費するため、処理が重い場合は出力倍率を下げるか、間隔を広げてお試しください。
Q.アップロードした画像が外部に送信されたり保存されたりしませんか
A. 一切ありません。画像の読み込みから網点化、PNG・SVGの書き出しまで、すべての処理がお使いのデバイスのブラウザ内で完結しています。画像データが外部サーバーへ送信されたり保存されたりする仕組みはないため、公開前のデザイン素材やプライベートな写真でも安心してご利用いただけます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。