画像スキュー

画像スキューとは

画像スキューは、画像を水平または垂直軸に沿ってせん断し、長方形を平行四辺形に変換する幾何変換です。画像全体を固定点の周りに回転させる回転とは異なり、スキューは各行のピクセルを漸増するオフセットでずらし、傾いた、傾斜した、または歪んだ外観を生み出します。水平スキュー（skew X）は画像の上部を下部に対して横に押し、垂直スキュー（skew Y）は左端を右端に対して上下にずらします。

本ツールは Canvas 2D 変換行列を使用して両方のスキューを適用します。水平角度と垂直角度を -45° から 45° の範囲で独立して設定できます。ツールは結果の平行四辺形の境界ボックスを計算し、それを収めるのに十分な大きさのキャンバスを作成し、せん断を適用して画像をレンダリングします。操作全体が JavaScript でローカルに実行されるため、アップロードは不要で結果は即座に得られます。

スキュー変換の仕組み

内部では Canvas 2D の transform メソッドを使用し、2×3 のアフィン行列を受け取ります。水平スキュー角度 α、垂直スキュー角度 β の場合、行列は [1, tan(β), tan(α), 1, 0, 0] となります。これは元画像の各点 (x, y) が出力の (x + y·tan(α), y + x·tan(β)) にマップされることを意味します。0° ではせん断はなく画像は変更されません。45° ではせん断が最大になり、画像は鋭い平行四辺形になります。

スキューは画像の形状を変えるため、クリッピングを避けるには出力キャンバスを元の画像より大きくする必要があります。ツールは画像の 4 つの変換後の角を計算し、その境界ボックスを見つけて、キャンバスのサイズを決定します。次に平行移動を適用し、すべての角がキャンバス内に収まるようにします。透明度をサポートしない JPG 出力の場合、スキューされた画像の外側の空き領域は白で塗りつぶされます。

スキューと回転の違い

スキューと回転はどちらも幾何変換ですが、動作は大きく異なります。回転は画像全体を中心点の周りに固定角度で回転させ、すべての角度と距離を保ちます——正方形は正方形のままで、向きが変わるだけです。一方スキューは軸に沿って画像をせん断し、角度を変え、形状を歪めます——正方形は平行四辺形になります。回転は画像の比率を保ちますが、スキューはそれらを引き伸ばします。

プロパティ	回転	スキュー
形状の変化	なし——角度は保持	あり——角度が変化
出力サイズ	入力と同じ（または大きい境界ボックス）	より大きい境界ボックス
視覚効果	画像がその場で回転	画像が傾く／斜めになる
典型的な用途	向きの修正、创意的な傾き	透视補正、スタイライズされたテキスト、3D 錯視

傾いた写真をまっすぐにしたり画像を上下反転させたい場合は回転を使用してください。透視をシミュレートしたり、傾いたバナーを作成したり、角度をつけて撮影した写真を補正したい場合はスキューを使用してください。

スキュー効果を使う場面

スキューはデザイン、写真、イラストレーションで使われる多目的な技術です。奥行きをシミュレートしたり、透視を補正したり、ダイナミックで傾いたルックを作成したりする場合に特に便利です。よくある場面は以下の通りです：

• 透視補正。角度をつけて撮影された文書や建物のファサードの傾きを、逆スキューを適用して補正します。
• 3D 錯視。平面画像をスキューして遠くへ後退しているように見せ、3D シーンの床、壁、画面をシミュレートします。
• スタイライズされたテキストとバナー。フォントを変えずに見出しやコールトゥアクションボタンに傾いたエネルギッシュなルックを与えます。
• シャドウ効果。オブジェクトの複製をスキューして暗くすることでキャストシャドウを作成します。
• 创意的な歪み。アルバムカバー、ポスター、SNS グラフィック用にシュールで傾いた構図を生成します。

画像を傾いた、ダイナミックな、または透視を意識した感じにしたい場合は、スキューが適切なツールです。

画像にスキューを適用する方法

画像のスキューは数秒で完了し、すべてブラウザ内で行われます——アップロード不要、登録不要、透かしなし。以下の手順で進めてください：

1. 画像をアップロード。アップロードエリアをクリックするか、JPG、PNG、WebP、GIF、BMP ファイルをドラッグ＆ドロップします。画像は即座にデコードされプレビュー表示されます。
2. スキュー角度を設定。水平スキューと垂直スキューのスライダーを -45° から 45° の範囲で使います。正の値で一方に、負の値で反対側に傾きます。
3. 出力形式を選択。PNG で透明度付きの無劣化品質、JPG でより小さな写真、WebP でサイズと品質のバランスを選べます。
4. 「スキューを適用」をクリック。ツールが画像を処理し、元とスキュー後のサイズを並べて表示します。
5. 結果をダウンロード。「スキュー画像をダウンロード」をクリックして結果を保存します。元のファイルは変更されません。

すべてのステップは JavaScript でブラウザ内で実行されるため、画像がサーバーにアップロードされることはありません。これにより、スキュー ツールは完全にプライベートで高速、機密画像の処理にも適しています。