無地もグラデも、端末の実寸で。無料ツール「スマホ壁紙メーカー」を公開しました。

スマホの壁紙を落ち着いた無地やグラデーションにしたいのに、配布されている画像はサイズが合わずに引き伸ばされてしまう。デザイン事務所AMIXは、単色・グラデーション・フィルムグレイン（ノイズ）を組み合わせて壁紙を作り、端末の実解像度のPNGで書き出せる無料Webツール「スマホ壁紙メーカー」を公開しました。iPhone・Android・タブレット・PCの解像度プリセットに加え、幅と高さの自由入力にも対応しています。アプリのインストールやアカウント登録は不要で、ブラウザを開けばすぐに使い始められます。

どんなツールか

「スマホ壁紙メーカー」は、サイズと色とノイズの3つを決めるだけで壁紙用のPNG画像を作れるツールです。写真を加工するのではなく、指定した解像度のキャンバスに塗りを描き起こす方式なので、拡大による荒れが起きません。画面上部にはプレビューが常に表示され、スライダーや色を変えると即座に描き直されます。

壁紙を自分で作ろうとすると、これまでは画像編集ソフトを開き、端末の解像度を調べてカンバスを作り、グラデーションを引いて書き出す、という手数が必要でした。無地の背景一枚のためにその工程を踏むのは割に合いません。本ツールは、端末を選ぶ・塗りと色を決める・保存する、という3ステップに畳んでいます。

画像の生成も保存もすべてお使いのブラウザ内（HTML5 Canvas）で完結します。作った画像が当方のサーバーへ送信・保存されることはなく、データが端末内にとどまる仕組みです。パソコンでもスマートフォンでも、ページを開けばそのまま動きます。

端末の実解像度で書き出す意味

「サイズ」のプルダウンには、11種類の解像度プリセットと「カスタム」が用意されています。内容は次のとおりです。

• スマホ 特大（1290×2796）／スマホ 標準（1179×2556）／スマホ（1170×2532）
• Android FHD+（1080×2400）／Android QHD+（1440×3120）／小型・SE（750×1334）
• タブレット（1640×2360）／タブレット大（2048×2732）
• PC FHD（1920×1080）／PC WQHD（2560×1440）／PC 4K（3840×2160）

初期状態では「スマホ 標準（1179×2556）」が選ばれています。「カスタム」に切り替えると幅と高さの入力欄が現れ、1〜8000pxの範囲で自由に指定できます。

ここで大事なのは、書き出されるPNGがプレビューの見た目ではなく、選んだ解像度そのままの実寸だという点です。プレビューは画面に収まるよう縮小表示されていますが、内部では常に指定サイズのキャンバスに描かれており、保存時にはその原寸が出力されます。ファイル名もwallpaper_1179x2556.pngのように解像度が入るので、複数の端末ぶんを作ったときも取り違えません。

端末より小さい画像を壁紙に設定すると、システム側で引き伸ばされて輪郭がぼやけたり、グラデーションに縞（バンディング）が出やすくなります。逆に必要以上に大きい画像は、保存容量と設定時の待ち時間を無駄に消費します。実解像度で作るのは、その両方を避けるための一番単純な方法です。手持ちの端末の解像度が分からないときは、近いプリセットを選ぶか、少し大きめに作って端末側で調整する方法もあります。

3つの塗りと、配色プリセット

「塗り」は「単色」「線形グラデ」「放射グラデ」の3つから選びます。

「単色」は色をひとつ選ぶだけの無地です。アイコンや文字がもっとも読みやすく、仕事用の端末や集中したいときの定番になります。「線形グラデ」は2色を直線的につなぐ塗りで、「角度」スライダー（0〜360°、初期値135°）で向きを変えられます。上から下へ暗くしていく、斜めに流すといった調整がここでできます。「放射グラデ」は画面中央から外へ向かって色が変わる塗りで、中央に光が集まったような見え方になります。

色の指定はカラーピッカーで行い、選んだ色は#0F2027のようにHEX値として横に表示されます。塗りをグラデーションに切り替えると「色」の欄が「色1」に変わり、「色2」の行が追加されるという作りで、必要な操作だけが画面に出る設計です。

配色に迷ったときは、色の欄の上に並ぶ10個の配色プリセットが役に立ちます。深い青緑から明るいピンク、淡い水色、オレンジと黄色、モノトーンのグレーまで、性格の異なる2色の組み合わせがワンタップで入ります。プリセットを起点に片方の色だけを動かすと、狙いの雰囲気に近づけやすくなります。「ランダム配色」ボタンを押せば2色がまったくの偶然で決まるので、思いつかないときの起点にもできます。

主な機能・特徴

壁紙づくりに必要な要素だけが、一画面にまとまっています。

• iPhone・Android・タブレット・PCの解像度プリセット11種類と、1〜8000pxのカスタム入力に対応。手持ちの端末に合わせた実寸で作れます。
• 塗りは単色・線形グラデーション・放射グラデーションの3種類。線形は0〜360°の角度指定に対応し、5°刻みで向きを調整できます。
• 2色のカラーピッカーとHEX値表示。おすすめの2色をワンタップで適用できる配色プリセットが10種類用意されています。
• 「フィルムグレイン（ノイズ）」をスイッチひとつで追加。強さは2〜40%の範囲で調整でき、「再生成」を押せば粒の並びを引き直せます。
• プレビューは操作と同時に描き直されます。色・角度・ノイズの強さを動かしながら、仕上がりを見て決められます。
• 「ランダム配色」で2色をまとめて偶然に任せられます。気に入った組み合わせが出たら、そこから色を詰めていく進め方ができます。
• 「PNG保存」を押すと保存用の画面が開き、画像の長押し保存、対応端末では「共有・写真に保存」、パソコン向けの「ダウンロード」から選べます。

使い方

操作は次の順序で進みます。

1. 「サイズ」から端末の解像度を選びます。当てはまるものがなければ「カスタム」で幅と高さを入力します。
2. 「塗り」で単色・線形グラデ・放射グラデを選び、配色プリセットまたはカラーピッカーで色を決めます。線形グラデでは「角度」で向きを調整します。
3. 質感を足したいときは「フィルムグレイン（ノイズ）」をオンにし、「強さ」で粒の量を決めます。粒の出方が気に入らなければ「再生成」を押します。
4. プレビューを確認して「PNG保存」を押します。

保存を押すと「壁紙を保存」の画面が開きます。スマートフォンでは表示された画像を長押しして「写真に追加」「画像を保存」を選ぶのが手軽です。うまくいかない場合や、ファイル共有に対応した端末では「共有・写真に保存」ボタンから共有メニューを開けます。写真への保存が選べるかは、端末やブラウザによって異なります。パソコンでは「ダウンロード」を押せばそのまま保存されます。保存した画像は、端末の設定から壁紙として指定してください。

グレイン（ノイズ）が効く理由

「フィルムグレイン（ノイズ）」は、画面全体にごく細かい粒を重ねる処理です。強さは2%から40%まで、2%刻みで調整できます。オフのままでも壁紙としては成立しますが、少量だけ足すと仕上がりが目に見えて変わります。

理由は、なめらかなグラデーションほど「バンディング」と呼ばれる縞が出やすいためです。暗い色から暗い色へゆるやかに変化させると、階調の刻みが帯状の段差として見えてしまうことがあります。細かいノイズを重ねると、その段差が粒に紛れて目立たなくなります。写真や映像の分野でグレインが意図的に足されるのと同じ理屈です。

本ツールのノイズは「オーバーレイ」の合成で重ねられているため、明るい部分と暗い部分の両方に自然になじみ、全体が白っぽく濁りません。「再生成」ボタンを押すと粒の並びが作り直されるので、同じ強さでも見え方の異なるパターンを試せます。なお、プレビューは縮小表示のため粒が粗く見えることがあります。実際のPNGでは印象が変わるので、気になるときは一度保存して端末で確かめるのが確実です。

アイコンが読める壁紙にするコツ

壁紙には時計やアイコンなどが重なることが多く、その配置や文字色は端末と設定によって変わります。実際の画面で、背景とのコントラストや模様の重なりが読みやすさを妨げないか確認してください。

線形グラデを使うなら、時計が載る上部とアイコンが並ぶ中央から下で明るさに差を作りすぎないほうが無難です。角度135°のような斜めのグラデーションは見た目に動きが出ますが、画面の一角だけが極端に明るくなると、その付近のアイコン名が読みにくくなります。放射グラデは中央に光が集まる塗りなので、アイコンが並ぶ範囲の明るさをプレビューで確かめておくとよいでしょう。

白い文字が重なる画面なら、彩度と明度をやや低めにそろえた2色から試す方法があります。暗い文字を使う画面では別の調整が必要なので、設定後の見え方も確かめてください。

活用シーン

• 手持ちのスマホにぴったりの解像度で、無地やグラデーションの壁紙を用意したいとき
• ロック画面の時計やアイコンが読みやすい、落ち着いた背景に変えたいとき
• パソコンのデスクトップを、FHD・WQHD・4Kの実寸で整えたいとき
• プレゼン資料やSNS画像の背景として、単色やグラデの下地が必要なとき
• Webデザインやアプリのモックアップに、無地の背景画像を差し込みたいとき
• フィルムのようなザラつきのある背景を、写真素材を探さずに用意したいとき

壁紙以外の使い道も少なくありません。カスタムサイズで幅と高さを自由に指定できるので、バナーの下地やサムネイルの背景として書き出す使い方もできます。配色プリセットとランダム配色を組み合わせれば、色の候補を短時間で見比べられます。

ご利用にあたって

本ツールおよび本ページは現状有姿（as-is）で提供されるため、ご利用は利用者ご自身の責任においておこなってください。本ツールの利用、または利用できなかったことにより生じたいかなる損害についても、AMIXは責任を負いかねます。画像の生成はHTML5 Canvasを利用しているため、ブラウザの種類・バージョンや端末環境によっては、表示・動作・書き出し結果が異なる場合があります。とくに画面上のプレビューは縮小表示であり、ノイズの粒立ちやグラデーションの見え方は実際のPNGと異なることがあります。また、設定内容は保存されないため、ページを再読み込みすると初期状態に戻ります。解像度プリセットの数値は代表的な画面サイズの目安であり、すべての機種に一致するものではありません。本ツールの仕様・内容は、予告なく変更または提供を終了する場合があります。

端末を選んで、色を決めて、保存するだけ。自分の画面にぴったり収まる壁紙が手に入ります。完全無料・登録不要で、ぜひお試しください。