こんにちは。Hanasakiです。
「dpdpの使い方のコツを最短で知りたい！」という人向けに、その方法を紹介します。
ここでは、私と一緒にバナーを作っていきます。
最初にこれをすることで、レイヤの重ね方、エフェクト、レスポンシブ対応など、
一度に多くの考え方・基本操作を学ぶことができます。
では、さっそくいってみましょう！
バナーを作る
１．バナーの外枠（＝親）となる簡易板を用意します
２．背景用に画像を入れて外形を整えます
❶ 画像ツールを選択し、親の簡易板の中でドラッグして適当に領域を確保します。
❷ 位置を上下左右で中央に合わせます。
❸ 4角のどこかを掴んで親の簡易板のサイズに近付け、赤い矢印マークが出たら放します。
（親に対して、この動作で4辺を同時に100％にできるのは子が親の「中央」に在る時だけです）
❹ 幅、高さ共に親の簡易板に対して「100％」になっているのを確認した後、画像をアップロードする。
❺ 外形は “ Fill ” を選択しておく。
３．背景画像の上にイラストを設置します
❶ 背景画像の上にイラスト画像（背景を透過してあるもの）を設置します。
その際のポイントは
高さは “auto” で、幅は必ず親に対する “ ％ ”、またはブラウザ幅に対する “ vw ” にする。
（個人的には、親に対する “ ％ ” をオススメします）
画像のリサイズは “ Fit ” に設定しておく。
位置取り（下図の※印の箇所）は必ず相対値にしておく。（下図の場合、天地左右ともに中央に位置取りしているが、上下左右からの距離で指定する場合には、必ず “ ％ ” で指定すること。
➡ 今回は、最後にセットごとレスポンシブにするため、すべてを親に対する相対値にしていますが、普段の作業では px等の絶対値でOK。むしろ絶対値の方が使用頻度が高いと思います。
４．テキストを挿入してスタイルを整えます
上記３のイラスト画像の上にテキストを設置します。
※ 後でバナーセットごとレスポンシブにするので、今回はテストケースとして、
テキストサイズは “px” ではなく、ブラウザ幅に対する “vw” で指定してみてください。
覚えておきましょう！
「セットごとレスポンシブにしたい場合は、サイズ・位置指定は相対値で」
Webサイト訪問者のブラウザサイズに関係なく一定の大きさでバナーを表示させる場合は、
親の簡易板も子の画像やテキストも、サイズや位置指定はすべて “px” 等の絶対値でOKです 。
ただ、今回の試作のように、アスペクト比を保ったまま、まとめてレスポンシブにする場合は、
レイヤのサイズや配置は、すべて親、またはブラウザ幅に対する相対値で設定します。
では続けて、レイヤに出現時アニメーションのエフェクトをかけてみましょう。
※ 出現時アニメーションとは、そのレイヤがページに表示された瞬間に開始されるアニメーションです。
出現時アニメーションを設定する
１．透過背景のイラストを無限ループで回転させます
❶ 上で設置したイラストを選択した後、スタイルパネルを「出現時」に変えてみましょう。
❷ 出現時の状態を設定します。
（１）
出現時、そのレイヤはどこにあってどういう状態だったのか、というのを逆算で設定します。
つまり、出現した後に、何秒かけてその位置・大きさ・角度などがどう変化して「通常時」の状態になるのか、その「元の状態」を設定する、と言ったらわかりやすいでしょうか。
今回のこのイラストは、現れた瞬間から時計回りに1回転しながら出てくる、という設定にします。
では、出現してから通常時になるまで「時計回り」に1回転するなら、出現時は360度「反時計回り」の状態であった、ということです。
という訳で、
スタイルパネルを「出現時」に変更したら、エフェクトタブの「変形ツール」から「回転」を選択します。
（２）
出現後、時計回りに1回転させたいので、
1回転する前の「元の状態」として反時計回りに1回転分＝「マイナス360度」に設定します。
（３）
続けて、アニメーション＝「何秒かけて、どう変化するのか」を設定します。
今回は、ゆっくり1回転させたいので、「動作時間」を10秒くらいに設定してみましょう。
回転速度を一定にするため、「加速・減速」の設定は「等速」にしておきます。
❸ 無限ループをかけます。
上の状態でプレビューを見ると、表示された瞬間から10秒かけて1回転するのを確認できます。
今回は、永遠に回転させておきたいので、「タイミング」の項目をデフォルトの「初回のみ」から、
「出現時～通常時を繰り返してループ」に設定変更します。
これで、永遠に時計回りを繰り返すアニメーションの完成です。
実際のプレビューを見ると、▼このように透過背景のイラストが回り続けるエフェクトが完成しています。
このGIFは実際の動作を簡略化したものです。dpdpでの実際の動きは、より滑らかです。
参考
dpdp公式サイトのファーストビューにある端末デモも、この出現時アニメーションを組み合わせて作られたものです。沢山のレイヤに細かく出現時の設定をしているので、レベル的には中級から上級の部類ですが、ひとつひとつの出現時設定は今回の設定と大差ありません。
実際の動きを見たい方は、dpdp公式サイトをご覧ください。
次は、ホバー時の設定です。
ホバー時のアニメーションは、出現時とは逆で、未来の状態を設定します。
覚えておきましょう！
出現時設定とホバー時設定の違いについて
ビギナーの方は少し混乱されるかもしれませんが、
よく耳にする「どこから来て、どこへ行くのか」というフレーズで覚えると簡単です。
どこから来たのか＝過去の状態を設定する ・・・ 出現時の設定
どこへ行くのか＝未来の状態を設定する ・・・ ホバー時の設定
と覚えると、設定時に間違えることがなくなります。
では、いきます！
ホバーアニメーションを設定する
１．テキストにホバーエフェクトを設定します
❶ テキストを選択した後、スタイルパネルを「ホバー時」に変更します。
❷ エフェクトタブの「変形ツール」から「スケール」を選択します。
❸ ホバー時の拡大率を「1.3倍」に設定します。
２．背景画像にホバーエフェクトを設定します
背景画像もテキストと同様に、
「ホバー時」に設定した上で、エフェクトタブの「変形ツール」から「スケール」を選択します。
背景画像は、下図１のように、スケールをテキストより小さい「1.1倍」に設定し、さらにスケール時に動きの違いがわかるよう、拡大縮小の中心である「原点」を左下に設定します。
さらに、アニメーションタブに移動して（下図２）、動作時間を「1秒」に設定してみましょう。
（特に大きな意味はありませんが、テキストのホバー動作との違いを見るのが目的です）
３．親レイヤにダミーリンクを設定します（重要です）
アニメーション設定が終わったら、親の簡易板レイヤにダミーリンクを設定します。
これをしないと、親の簡易板に入っているすべての子レイヤを一斉にホバー状態になりません。
覚えておきましょう！
「子を一斉にホバー状態にするには、親レイヤにリンク設定が必要です」
dpdpのルールでは、複数のレイヤにホバーアニメーションを設定しても、それぞれが単体でホバー状態になるだけでバラバラに動作します。一番わかりやすいのが今回のようなバナーでの設定です。
複数の子レイヤで設定したホバーアニメーションを同時に始動させるためには、
必ず親レイヤにリンク設定をしておきましょう。（その場合、子レイヤにはリンクは設定不可）
という訳で、早速、親レイヤにリンクを設定します。
❶ 親の簡易板レイヤを選択し、右のプロパティパネルをリンクパネルに変えます。
❷ 「リンク」のプルダウンメニューから「ページ」を選択します。
❷ 選択先候補のページ選ばず、一番上の「未設定」を選択します。
※ 実際のバナーなら、どこかのページへリンクするのが普通ですが、
今回はホバー動作を確認するのが目的なので「未設定」を選択します。
未設定を選択することで、リンク先を設定した時と同じホバー動作を行えるようになります。
❸ 補足
上の❷でダミーリンクを設定すると、下図のように
「リンク先が設定されていません」という内容の黄色いアラートアイコンが出ますが、
今回はアニメーションを動作させるのを目的としたテストなので気にしないでください。
上で設定したホバー時の動作を、実際にWeb上で見たい方は、こちらのプレビューからご覧ください。
長い道のりでしたが、いよいよ最後の仕上げです！
と同時に、おめでとうございます。
ここまでの作業で、あなたはすでにdpdpのかなりの部分をマスターしています。
ちなみに、今日ここであなたはこれだけのことを習得しています。
レイヤの重ね順と位置取り
“ ％ ” や “ vw ” といった相対値でのサイズ指定と位置取り
出現時およびホバー時のアニメーション設定
アスペクト比（縦横比）を固定したままでのレスポンシブ対応（この最後のパートです）
いきなり、初球を飛ばして中級クラスの使い方をマスターしています。
では、最後の仕上げで、
作ったバナーのアスペクト比を固定してレスポンシブ対応にします。
レスポンシブ対応にする
❶ レイヤツリーで簡易板を選択し、アスペクト比（縦横比）をロックします。
すると、親レイヤのサイズはこのようになります。
❷ 親レイヤの横サイズを “ ステージに対して50％ ” に変更する。
これでバナーのアスペクト比をロックしたままレスポンシブ対応になりました。
実際のレスポンシブの動作をWeb上で見たい方は、こちらのプレビューからご覧ください。
（ブラウザを左右に広げたり縮めたりすると、アスペクト比がロックされているのが確認できます）
以上で、すべて終了です。おつかれさまでした！
今回、沢山のことを学ばれました。
ここから先は、みなさん自身の応用力です。
素敵なWebサイトを作ってください。
覚えておきましょう！
「縦横比を固定したままレスポンシブにする場合、子レイヤの指定は相対値で」
ひとつのレイヤセットを縦横比を固定したままレスポンシブ対応させたい場合、中に入っている子レイヤのサイズと位置取りは必ず “ ％ ” や “ vw ” 等の相対値で指定しておけば、ブラウザサイズが変わってもレイアウトが崩れません。