Lesson

EC サイトでよく使われる UI パーツをつくる - 全3回

画像ズームとカウンター(EC サイトのよくある UI パーツをつくるシリーズ)

このレッスンでは、商品画像のズーム機能と購入数を指定するカウンターのつくりを解説します。

Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。

画像を表示するコンポーネントを作成

シューズの画像と拡大ボタンを選択し、プロパティーインスペクタのコンポーネントの横のプラスマークをクリックしてコンポーネントにします。次に、拡大した画像を表示するためのステートを追加します。名前は「zoom」とします。

「zoom」ステートを選択した状態で、コンポーネントの中の画像をダブルクリックして選択し、変形から「水平方向と垂直方向のスクロール」をオンにします。このとき画像が少しトリミングされるので、元の大きさに戻します。

続けて、画像を拡大します。Macではoption、WindowsではAltを押しながら拡大すると中心を起点に拡大できます。拡大した画像には「垂直方向と水平方向のスクロール」が設定されているため、プレビューすると自由にドラッグできます。

最後に、拡大ボタンを縮小ボタンに変更します。

ズームのインタラクションを設定

ボタンをクリックして画像を拡大・縮小できるようにインタラクションを設定します。まず、「初期設定のステート」を選択します。拡大ボタンを選択し、青いプラスマークをクリックしてインタラクションを追加します。トリガーは「タップ」、種類は「トランジション」、移動先は「zoom」のステート、アニメーションは「なし」にします。

次に、「zoom」のステートに切り替えます。縮小ボタンを選択し、プラスマークをクリックしてインタラクションを追加します。移動先は「初期設定のステート」にします。その他の設定は拡大ボタンと同じです。

プレビューすると、ボタンで拡大と縮小を切り替えられることが確認できます。

カウンターのコンポーネントを作成

ここからは、商品の数を指定するカウンターを作成します。この作業はデザインモードで行います。

まず、数量と商品総額のパーツを選択し、コンポーネントに変換します。数量を2に増やした状態をつくるために新規ステートを作成し、名前を「数量2」とします。「数量2」ステートを選択して、数量の数字を2に変更します。商品総額も、2倍の金額になるように数字を変更します。

数値が増減するインタラクションを設定

プロトタイプモードに移動します。まず、数量を増やすインタラクションを設定します。

「初期設定のステート」に切り替え、数量の横の「+」ボタンを選択し、プラスマークをクリックしてインタラクションを追加します。移動先を「数量2」のステートにします。その他のインタラクションの設定は拡大ボタンと同じにします。

次は、数量を減らすインタラクションを設定します。「数量2」のステートに切り替え、数量の横の「-」ボタンを選択し、プラスマークをクリックしてインタラクションを追加します。移動先を「初期ステート」にします。その他のインタラクションの設定は拡大ボタンと同じにします。

プレビューウインドウを開くと、ボタンをクリックして、商品数と総額を変えられることが確認できます。