WebPS図形描画ツール入門ガイド：キャンバスでグラフィックを作成・編集

はじめに

ブラウザ上で簡単なグラフィックを作成したり、画像に注釈を追加したり、フリーハンドで描画したりする必要がある場合、WebPSは完全なキャンバス描画ツールセットを提供します。初心者からたまに使う方まで、このガイドでは鉛筆、ブラシ、図形、テキストの各ツールを詳しく説明します。新しいキャンバスの開始方法、各ツールの効果的な使い方、それらを組み合わせて完成度の高いグラフィックを作成する方法を学べます。すべてブラウザから離れることなく行えます。

はじめに：描画ツールを開く

1. WebPSエディターにアクセスします。 2. 新規作成をクリックするか、既存の画像を開きます。 3. 左側のツールバーにすべての描画ツールが表示されます。デフォルトでは選択ツールがアクティブです。鉛筆、ブラシ、図形のアイコンをクリックして描画を開始します。

1. 鉛筆ツール

鉛筆ツールは、ハードエッジでピクセル単位の正確な線を作成します。スケッチ、ピクセルアート、精密な輪郭に最適です。

使い方：

• 鉛筆アイコンをクリックするか（またはPキーを押す）。
• 上部のオプションバーで色とサイズを設定します。
• キャンバス上をクリック＆ドラッグして描画します。
• Shiftキーを押しながらドラッグすると、水平または垂直の直線を描画できます。

プロのヒント： 細かい線には小さいサイズ（1〜3 px）を使用します。大胆なストロークにはサイズを大きくします。

2. ブラシツール

ブラシツールは、調整可能な不透明度とフローを持つ、ソフトでアンチエイリアスされたストロークを生成します。ペイント、シェーディング、ハイライト追加に最適です。

使い方：

• ブラシアイコンをクリックするか（またはBキーを押す）。
• オプションバーでサイズ、不透明度、フローを調整します。
• カラーピッカーから色を選択します。
• ドラッグしてペイントします。不透明度を低くすると透明なレイヤーが作成されます。

プロのヒント： 低い不透明度（20〜30％）を使用して徐々に色を重ねると、水彩効果が得られます。

3. 図形ツール

WebPSは、長方形、楕円、直線、多角形の図形ツールを提供します。各図形はベクトルアウトラインまたは塗りつぶし領域として描画できます。

使い方：

• 図形ツールアイコン（例：長方形）をクリックします。
• オプションバーで塗りつぶし（ベタ塗り）またはストローク（アウトラインのみ）を選択します。
• 色とストローク幅を選択します。
• キャンバス上をクリック＆ドラッグして図形を作成します。
• Shiftキーを押しながらドラッグすると、縦横比を維持できます（正方形、円）。

プロのヒント： 描画後、移動ツール（V）で図形を移動またはサイズ変更できます。ラスタライズまたはレイヤーを結合するまでは図形は編集可能です。

4. テキストツール

テキストツールを使用して、キャプション、ラベル、タイトルを追加します。フォント、サイズ、配置、色はすべて調整可能です。

使い方：

• テキストアイコンをクリックするか（またはTキーを押す）。
• キャンバス上の任意の場所をクリックしてテキストボックスを作成します。
• テキストを入力します。
• オプションバーでフォントファミリー、サイズ、色、配置、スタイル（太字、斜体、下線）を変更します。
• テキストボックスのコーナーをドラッグしてサイズを変更します。

プロのヒント： 読みやすくするために、コントラストの高い色を使用します。タイトルには24〜36 pxのサイズにします。

5. 消しゴムツール

消しゴムで描画の不要な部分を削除します。

• 消しゴムアイコンをクリックするか（またはEキーを押す）。
• サイズと硬さを調整します。
• 消去したい領域をドラッグします。

プロのヒント： ソフト消しゴムは優しくフェードアウト、ハード消しゴムは正確な削除に使用します。

6. レイヤー管理

描画ツールは現在選択されているレイヤーに作用します。レイヤーパネル（右側）を使用して、新しいレイヤーの追加、名前変更、並べ替え、不透明度の調整を行います。編集を非破壊的に保つために、必ず別のレイヤーに描画してください。

ベストプラクティス：

• 背景はレイヤー0に保持します。
• 輪郭はレイヤー1、色塗りはレイヤー2に描画します。
• テキストは独自のレイヤーに追加して簡単に再配置できるようにします。

ステップバイステップ：ゼロから簡単なグラフィックを作成

太陽と雲を描き、キャプションを追加してみましょう。

1. WebPSエディターを開き、新規作成をクリックして空白のキャンバス（例：800×600 px）を取得します。 2. レイヤー0の名前を「空」に変更し、バケツツールで薄い青色に塗りつぶします。 3. 新しいレイヤーを追加し、「太陽」という名前を付けます。 4. 楕円図形ツールを選択し、塗りつぶしモードで黄色にします。Shiftを押しながら円を描きます。 5. 別のレイヤー「雲」を追加します。 6. 鉛筆ツール（白、サイズ10）を使用して、雲の形に3つの重なる円を描きます。 7. レイヤー「テキスト」を追加します。 8. テキストツールを選択し、フォントArial、サイズ30、白色に設定します。クリックして「Hello WebPS!」と入力します。 9. 移動ツールでテキストを適切な位置に移動します。 10. ファイル > エクスポートからPNGまたはJPGで保存します。

上級者向けヒント

• ショートカット： P（鉛筆）、B（ブラシ）、T（テキスト）、E（消しゴム）、V（移動）、U（図形）、Ctrl+Z（元に戻す）。
• カラーピッカー： カラースウォッチをクリックするとフルパレットが開くか、スポイト（I）を使用して画像から色をサンプリングできます。
• ズームとパン： ズームツール（Z）またはマウススクロールホイールを使用します。スペースバーを押しながらドラッグするとパンできます。
• 反転と回転： 編集メニューから、キャンバスを水平/垂直に反転したり、90度単位で回転できます。

なぜ描画にWebPSを使うのか？

• インストール不要 — 完全にブラウザ上で動作します。
• クロスプラットフォーム — Windows、Mac、Linux、Chromebookに対応。
• 無料 — 描画ツールにペイウォールはありません。
• 統合 — 切り抜き、サイズ変更、フィルター、フォーマット変換など、他の編集機能と統合されています。
• プライバシー — 画像はデバイス上に残り、サーバーへのアップロードは不要です（クライアント側処理）。

結論

WebPSは、オンラインでのグラフィック作成に完全な描画スイートを提供します。鉛筆、ブラシ、図形、テキスト、レイヤーを使えば、簡単な注釈から洗練されたイラストまで作成できます。各ツールを試し、レイヤーを使って作業を整理しましょう。今すぐWebPSエディターで次の描画を始めましょう。