虹 puchi

ツールの目安

PC・スマホ：PC／Smartphone 両対応です。

Browser：ブラウザでそのまま使えます。

Server：Serverにアップロードして使います。

Processing：画像の見た目を調整・加工します。

Composite：合成等2つ以上の要素を使います。

Edit：拡大縮小・切り抜きなどの編集です。

HTML：HTMLの調整が必要な場合があります。

CSS：CSSの調整が必要な場合があります。

JavaScript：JavaScriptで作成しています。

PHP：PHPで作成しています。

GIF アニメ

PC・スマホ

Browser

Composite

JavaScript

アニメーションGIF作成ツール

複数枚の画像を繋いでパラパラアニメ(GIF)が作成できます。
1枚1枚のファイル名を見ながら並べ替えができます。

MP4 動画

PC・スマホ

Browser

Processing

Composite

JavaScript

静止画+音声動画作成ツール (透過画像アニメーション統合版) mp4-movie3

直接wav/mp3が投稿できないSNS用に静止画を使って投稿できる動画に変換します。
簡易エフェクト付き。
サンプルムービー
 POCKET DTM上のサンプルムービー
 使い方(ブログ記事)

🎞️ パラパラアニメの作り方(ブログ記事)

PC・スマホ

Browser

Composite

JavaScript

① [ パラパラアニメ作成 ]

2D画像カメラワーク/連続コマ割ツール

1枚の画像を拡大／縮小／縦横移動させてコマ画像で出力します。
簡易的な背景作成に最適です。

PC・スマホ

Browser

Composite

JavaScript

② [ パラパラアニメ作成 ]

パラパラアニメ作成ツール

複数枚の画像を繋いでパラパラ動画(mp4)が作成できます。

PC・スマホ

Browser

Composite

JavaScript

③ [ パラパラアニメ作成 ]

動画(mp4)結合ツール

複数の動画(mp4)を結合します。

PC・スマホ

Browser

Composite

JavaScript

④ [ パラパラアニメ作成 ]

音声(音楽)合成ツール

動画(mp4)に音声(wav/mp3)を付けるツールです。

PC・スマホ

Browser

Processing

JavaScript

線画の線を細くするツール

手書きの太い線を細くします。
使い方は「ファイルを選択」して「画像を保存」するだけです。
ブログの関連記事

PC・スマホ

Browser

Processing

JavaScript

ちょっとリッチな二値化

写真やイラストを白 rgb(255, 255, 255)と黒 rgb(0, 0, 0)にします。
画像を読み込んでスライダーで調整してください。

PC・スマホ

Browser

Processing

JavaScript

シティポップ・アート

写真を「アメリカ西海岸のプールサイドや、青空とヤシの木、夕暮れの風景などリゾート感あふれるトロピカルでクリアなイラスト」のように変換します。

PC・スマホ

Browser

Edit

JavaScript

綺麗に画像サイズ（縦横の長さ、ピクセル、px）を小さくします。

このツールは画像サイズを小さくしてもエッジがギザギザになりません。
ブログやホームページに合わせて画像サイズを綺麗に小さくできます。

PC・スマホ

Browser

Edit

JavaScript

画像を綺麗に拡大して保存

イラストと写真を別々に補正して画像を綺麗に拡大して保存します。
▶ イラスト：エッジをシャープにします。
▶ 写真：エッジを滑らかにします。

PC・スマホ

Browser

Edit

JavaScript

ブログやホームページ用にJPEGで画像のファイルサイズ（容量、データサイズ、KB/MB）を小さくします。

ファイルサイズが大きいと表示に時間が掛かります。
逆に小さくし過ぎると画像が荒くなります。
このツールはバランスを取りながらファイルサイズを小さくできます。

PC・スマホ

Browser

Processing

JavaScript

画像の輪郭やバナーの文字をシャープにします。

使いやすいアンシャープマスク（シャープ）です。
ノイズを目立たせずに画像の輪郭をクリアにします。

PC・スマホ

Browser

Edit

HTML

JavaScript

円周文字作成

手軽に円周文字が作成できます。
回転・静止が選べます。
本家(虹色｜色楽ネット)から移設しました。

PC・スマホ

Browser

Processing

JavaScript

昔のフイルム写真風の色にする色調整です。

コダック、フジ、コニカ、ポラロイドとセピアで古びた写真風に変換します。

PC・スマホ

Browser

Processing

Composite

JavaScript

ステンドグラス風モザイク+合成

画像全体のモザイク処理と前景の合成ができます。
モザイク処理のサンプルページ

PC・スマホ

Browser

Processing

Composite

CSS

JavaScript

写真やイラストをスライドフイルム風に透過します。

スライドフイルムの特徴に合わせて透過を調整するツールです。
完成したスライドマウントのサンプルとテンプレート

PC・スマホ

Browser

Edit

Composite

CSS

JavaScript

画像を9分割にして不正コピーをし難くします。

1枚の画像をツールで物理的に分割してCSSで元の1枚の画像のように見せます。
CSSで結合した画像とHTML／CSSコード

PC・スマホ

Browser

Composite

JavaScript

ブログ・インスタ向き。視線を集める漫画風集中線ジェネレータ

ブログ・インスタ等でネタの小道具としてお使いください。
集中線を使ったサンプル画像

PC・スマホ

Server

CSS

PHP

画像のフォルダに入れて置くだけでサムネイルの一覧表示ができます。

・サムネイル表示のサンプルページ
・使い方の説明ページ
・PHPファイル(zip)のダウンロード

PC・スマホ

Browser

Processing

JavaScript

境界ぼかし＆フェードアウト

画像の四隅の1～4辺を選んでぼかせます。
範囲・背景透明・白・黒・斜め・円・ハートなどを調節できます。

PC・スマホ

HTML

CSS

個人サイト用のテンプレート

・トップページのサンプル
・コンテンツページのサンプル
・トップページのダウンロード
・コンテンツページのダウンロード
テンプレートの改変・二次配布自由です

PC・スマホ

Browser

Processing

JavaScript

ブラウザ版お絵かきツール

🎨 図形・イラスト・水彩画／文字入力／レイヤー
お手軽お絵かきツール

□ 画像を開く

端末の写真を選ぶと、その画像の実寸そのままドキュメントサイズになります

□ 保存

キャンバスの見た目の表示サイズに関係なく、常に実際のドキュメント解像度（開いた画像ならその原寸）でPNG出力

□ 指で描画

タッチに対応（touchstart/touchmove）

□ 二本指ピンチ

指2本でつまむと拡大縮小、そのまま動かすと表示位置を移動できます
表示だけの操作で絵のデータ自体は変わりません

□ 表示リセット

拡大縮小した表示をリセットします

□ レイヤー

「レイヤー ▾」ボタンで開閉。追加・削除・表示/非表示・上下の順序入れ替えに対応（最後の1枚は削除不可）

□ レイヤー消去

選択中のレイヤーだけを透明にクリアします

□ 水彩向けパレット＋カラーピッカー

淡い青・緑・茶・ピンク系中心(標準／プリセット)。
選択色をタップして自由な色も選べます

□ パレット交換

下のパレットをダウンロード→お絵かきツール「JSON読込」でパレットを交換できます

パレットはテキストです。メモ帳で開いてカスタマイズやオリジナルも作成できます。

□ ブラシ太さ調整

1〜40pxのスライダー

□ 濃さ（不透明度）スライダー

1〜100%で、ペン・直線・四角・丸・塗りつぶしすべてに反映されます

□ 水分調整

水彩画風の調整

□ にじみ調整

水彩画風の調整

□ 水彩筆

薄い顔料を何度も重ねるタイプ

□ 鉛筆

少し線が揺らぐ下描き向け

□ 淡彩

さらに淡く、ふわっとした塗り

□ 直線／四角／丸

ドラッグでプレビューしながら描画、指を離すと確定

□ 塗りつぶし

タップした場所と近い色の領域をまとめて着色

□ グラデーション

「塗りつぶし」を選ぶと、下に「グラデーション」チェックボックスと「終点色」が出てきます

チェックを入れると、指を置いた場所（開始色＝選択中のメイン色）からドラッグして離した場所（終点色）まで、その方向に沿ったグラデーションで塗られます
ドラッグ中は点線でグラデーションの向きが見えます
チェックを外せば従来通りの単色塗りつぶしのまま使えます

不透明度スライダーも両方の色に共通で反映されます

□ テキスト入力

タップした場所に入力欄が出るので文字を打ち、確定（Enterまたは外をタップ）するとその場所に選択中の色でテキストが描き込まれます。
文字の大きさは「太さ」スライダーで調整できます

□ スポイト

キャンバス上をタップ（またはドラッグ）すると、その場所の色と濃さをそのまま拾って選択色に設定します

□ 淡彩セット

水彩向けの太さ・濃さ・色などを一括設定

□ 水彩紙

紙の細かな質感をレイヤーとして追加

□ 元に戻す（undo）／やり直し（redo）

最大15手分

パラパラアニメ＋ 画像素材作成ツール

画像のフォルダに入れて置くだけでサムネイルの一覧表示ができます。

個人サイト用のテンプレート

パラパラアニメ＋
画像素材作成ツール