シェイプツール

この機能を使用できるユーザー

すべてのプランでサポートされます

デザインファイルの編集可アクセス権があるユーザーは、シェイプツールを使用できます

シェイプは、デザインでレイヤーの大部分を構成します。以下のシェイプツールを構成要素として使用します。

• 長方形
• 直線
• 矢印
• 楕円
• 多角形
• 星

ツールバーの[シェイプツール]メニューからこれらのツールにアクセスできます。[長方形]の横にある矢印をクリックすると、メニューが開きます。

シェイプでの作業中は、以下のショートカットを使えます。

• Shiftキーを押したままドラッグすると、完全な正方形、円形、多角形を作成できます。
• Option / Altキーを押したままドラッグすると、シェイプを作成し、シェイプの中心からサイズ変更できます。
• ShiftキーとOption / Altキーを同時に押して、両方のアクションを実行できます。

長方形

長方形ツールでは、長方形と正方形の両方を作成できます。

1. ツールバーから長方形ツールを選択するか、Rを押します。
2. キャンバス上の特定の位置をクリックしてドラッグし、長方形を作成します。下辺の下に長方形の寸法が表示されます。
3. シェイプの各角にはハンドルがあり、このハンドルを使ってシェイプのサイズを変更できます。
   

   

角の半径の調整

長方形には、標準ハンドルの他に、各角の内側に4つの円形のハンドルがあります。このハンドルを使用して、角を調整して長方形の角を丸くすることができます。詳細はこちら→

線

直線ツールでは、線を任意の方向に作成できます。線は、デザイン内でコンテンツを分割する場合や、CSSのボーダーをシミュレーションする場合に便利です。

1. シェイプツールから[線]ツールを選択するか、Lキーを押します。
2. キャンバス上の特定の位置をクリックして任意の方向にドラッグし、線を作成します。
3. 右サイドバーの[線]セクションで外観を変更できます。これには、色、位置、線幅、スタイル、終点の先端や端が含まれます。詳細はこちら→
   

   

破線の作成

破線の長さと間隔の両方を指定できます。

1. 線を作成または選択します。
2. 右側のサイドバーの[線]セクションで、を選択して、[線の詳細設定]メニューを開きます。
3. [破線]フィールドに希望する長さを入力し、[間隔]フィールドも入力します。

矢印

矢印ツールでは、一方向矢印と両方向矢印を描画できます。矢印の終点の先端や端をカスタマイズできます。

1. シェイプツールメニューから[矢印]ツールを選択するか、ショートカット⇧ Shift Lを使用します。
2. キャンバス上の特定の位置をクリックして任意の方向にドラッグし、矢印を作成します。

線ツールと同様に、[線]プロパティを調整できます。詳細はこちら→

楕円と円

楕円ツールを使用して、楕円と円の両方を描画できます。楕円と円はそのまま使用することも、編集して曲線のあるカスタムシェイプを作成することもできます。

1. シェイプツールメニューから[楕円]ツールを選択するか、Oを押します。
2. キャンバス上の特定の位置を選択して任意の方向にドラッグし、楕円を作成します。シェイプの寸法は、レイヤーの下に青色で表示されます。
3. 楕円を囲む青色のバウンディングボックスが表示され、各角にハンドルが表示されます。このハンドルを使用して、シェイプのサイズを変更できます。
   

   

多角形

[多角形]ツールを使用して、任意の数の直線からなる閉じたシェイプを描画できます。

多角形ツールのデフォルトのシェイプは三角形ですが、オブジェクトに頂点を追加して、独自の多角形を作成できます。

1. シェイプメニューから[多角形]ツールを選択します。
2. キャンバス上の特定の位置を選択してドラッグし、多角形を作成します。シェイプの寸法は、オブジェクトの下に青色で表示されます。
3. このシェイプを囲む青色のバウンディングボックスの各角にハンドルが表示されます。このハンドルを使用して、シェイプのサイズを適切に変更できます。
4. 多角形レイヤーをダブルクリックすると、オブジェクト編集モードに切り替わります。このモードでは、多角形に頂点を追加し、各頂点を個別に操作できます。
   

   

5. 多角形の角を丸くすることもできます。半径が表示されるまで角のハンドルの上にカーソルを合わせます。ハンドルをクリックしてオブジェクト中央に向けてドラッグして、角を丸くします。

多角形とバウンディングボックス

多角形(この例では三角形)を描画すると、シェイプを囲む青色のバウンディングボックスが、シェイプの下端より下に表示されます。

これにより、多角形に頂点が追加されても、バウンディングボックスが一貫性のあるシェイプまたはサイズを維持できます。バウンディングボックスをシェイプの実際の境界線にスナップするには、シェイプを統合します。

シェイプを右クリックして[統合]を選択するか、次のキーボードショートカットを使用します。

• Mac: Command E
• Windows: Ctrl + E

星

星ツールでは、星形の多角形を作成できます。星レイヤーを作成する場合、デフォルトでは10個の辺と5つの頂点がある星が作成されます。

1. シェイプツールメニューから[星]ツールを選択します。
2. キャンバス上の特定の位置を選択して任意の方向にドラッグし、星を作成します。
   

   

3. 星を操作するために使用できる3つのハンドルがあります。
   
   • 数: 星の頂点の数が指定されます。最小値は3で、最大値は60です。
   • 比率: 星の中央から内側の点までの距離です。これは、星全体の直径に対するパーセンテージとして表示されます。
   • 半径: 星の頂点を丸くすることができます。