回転Rotation

この記事では、ローテーション用の新しい Windows UI について説明します。また、この新しい対話機構を Windows アプリで使用する際に考慮する必要があるユーザーエクスペリエンスガイドラインについて説明します。This article describes the new Windows UI for rotation and provides user experience guidelines that should be considered when using this new interaction mechanism in your Windows app.

重要な API: Windows.UI.InputWindows.UI.Xaml.InputImportant APIs: Windows.UI.Input, Windows.UI.Xaml.Input

推奨と非推奨Dos and don'ts

  • ユーザーが直接 UI 要素を回転できるように回転を使います。Use rotation to help users directly rotate UI elements.

その他の使い方のガイダンスAdditional usage guidance

回転の概要Overview of rotation

ローテーションは、ユーザーがオブジェクトを円形 (時計回りまたは反時計回り) に変換できるようにするために、Windows アプリによって使用されるタッチ最適化された手法です。Rotation is the touch-optimized technique used by Windows apps to enable users to turn an object in a circular direction (clockwise or counter-clockwise).

入力デバイスに応じて回転操作は次のように実行されます。Depending on the input device, the rotation interaction is performed using:

  • マウスまたはアクティブなペン/スタイラスを使って、選んだオブジェクトの回転グリッパーを移動する。A mouse or active pen/stylus to move the rotation gripper of a selected object.
  • タッチまたはパッシブなペン/スタイラスを使って、回転ジェスチャによって任意の方向にオブジェクトを回転させる。Touch or passive pen/stylus to turn the object in the desired direction using the rotate gesture.

回転を使う状況When to use rotation

ユーザーが直接 UI 要素を回転できるように回転を使います。Use rotation to help users directly rotate UI elements. 次の図は、サポートされる回転操作の指の配置をいくつか示しています。The following diagrams show some of the supported finger positions for the rotation interaction.

回転がサポートされる異なる指の配置を示す図

メモ   直感的に言えば、ほとんどの場合、回転ポイントは2つのタッチポイントの1つです。ただし、ユーザーが連絡先ポイントに関連しない回転ポイント (たとえば、描画アプリケーションやレイアウトアプリケーションなど) を指定することはできません。Note   Intuitively, and in most cases, the rotation point is one of the two touch points unless the user can specify a rotation point unrelated to the contact points (for example, in a drawing or layout application). 以下の図では、回転の中心点がこのような制約を受けない場合に、どのようにユーザー エクスペリエンスが低下するかについて説明します。The following images demonstrate how the user experience can be degraded if the rotation point is not constrained in this way.

1 番目の図は、最初のタッチ ポイント (親指) と 2 番目のタッチ ポイント (人差し指) を示します。人差し指は木に、親指は丸太にタッチしています。This first picture shows the initial (thumb) and secondary (index finger) touch points: the index finger is touching a tree and the thumb is touching a log.

回転ジェスチャのための最初の 2 つのタッチ ポイントを示す図image showing the two initial touch points for the rotation gesture. 2 番目の図では、最初のタッチ ポイント (親指) の周りで回転が行われています。In this second picture, rotation is performed around the initial (thumb) touch point. 回転の後で、人差し指は相変わらず木の幹にタッチし、親指は相変わらず丸太 (回転の中心点) にタッチしています。After the rotation, the index finger is still touching the tree trunk and the thumb is still touching the log (the rotation point).

回転の中心点が最初に 2 つタッチした点の 1 つに制約された状態で回転する絵を示す図image showing a rotated picture with the rotation point constrained to one of the two initial touch points. 3 番目の図では、回転の中心がアプリによって絵の中心点に定義されています (またはユーザーによって設定されています)。In this third picture, the center of rotation has been defined by the application (or set by the user) to be the center point of the picture. 回転の後で、絵が指の 1 つの周りで回転しなかったために、直接操作の画像が失われます (ユーザーがこの設定を選んだ場合を除きます)。After the rotation, because the picture did not rotate around one of the fingers, the illusion of direct manipulation is broken (unless the user has chosen this setting).

回転の中心点が最初に 2 つタッチした点のどちらでもなく、絵の中心に制約された状態で回転する絵を示す図image showing a rotated picture with the rotation point constrained to the center of the picture rather than either of the two initial touch points. 最後の図では、回転の中心がアプリによって絵の左端の中央の点に定義されています (またはユーザーによって設定されています)。In this last picture, the center of rotation has been defined by the application (or set by the user) to be a point in the middle of the left edge of the picture. この場合も、ユーザーがこの設定を選んだ場合を除いて、直接操作の画像が失われます。Again, unless the user has chosen this setting, the illusion of direct manipulation is broken in this case.

回転の中心点が最初に 2 つタッチした点のどちらでもなく、絵の左端の中央に制約された状態で回転する絵を示す図

 

Windows 10 では、3種類のローテーション (free、制約、および組み合わせ) がサポートされています。Windows 10 supports three types of rotation: free, constrained, and combined.

TypeType 説明Description
自由回転Free rotation

自由回転では、ユーザーはコンテンツを 360°の任意の位置に自由に回転できます。ユーザーがオブジェクトを離すと、オブジェクトは選んだ位置にとどまります。Free rotation enables a user to rotate content freely anywhere in a 360 degree arc. When the user releases the object, the object remains in the chosen position. 自由回転は、Microsoft PowerPoint、Word、Visio、ペイントと Adobe Photoshop、Illustrator、Flash などの描画アプリやレイアウト アプリで便利です。Free rotation is useful for drawing and layout applications such as Microsoft PowerPoint, Word, Visio, and Paint; and Adobe Photoshop, Illustrator, and Flash.

制約付き回転Constrained rotation

制約付き回転は、操作中は自由回転をサポートしますが、離したときに 90°単位のスナップ位置が強制されます (0、90、180、270)。Constrained rotation supports free rotation during the manipulation but enforces snap points at 90 degree increments (0, 90, 180, and 270) upon release. ユーザーがオブジェクトを離すと、オブジェクトは自動的に最も近いスナップ位置まで回転します。When the user releases the object, the object automatically rotates to the nearest snap point.

制約付き回転は回転の最も一般的な方法で、コンテンツのスクロールと同じように機能します。Constrained rotation is the most common method of rotation, and it functions in a similar way to scrolling content. スナップ位置があることで、ユーザーは操作が正確でなくても目標の位置に到達できます。Snap points let a user be imprecise and still achieve their goal. 制約付きの回転は Web ブラウザーやフォト アルバムのようなアプリで便利です。Constrained rotation is useful for applications such as web browsers and photo albums.

複合回転Combined rotation

複合回転は自由回転をサポートしますが、(パンにおけるレールのように) 90°単位のスナップ位置のゾーンでは制約付き回転によって強制されます。Combined rotation supports free rotation with zones (similar to rails in Guidelines for panning) at each of the 90 degree snap points enforced by constrained rotation. ユーザーが各 90° のゾーンの外でオブジェクトを離した場合にはオブジェクトはその位置にとどまりますが、それ以外の場合にはオブジェクトは自動的にスナップ位置まで回転します。If the user releases the object outside of one of 90 degree zones, the object remains in that position; otherwise, the object automatically rotates to a snap point.

メモ   ユーザーインターフェイスレールは、ターゲットの周囲の領域が特定の値または場所への移動を制限して、その選択に影響を与える機能です。 Note  A user interface rail is a feature in which an area around a target constrains movement towards some specific value or location to influence its selection.
 

サンプルSamples

サンプルのアーカイブArchive samples