by|Yuhei Sasaki

Adobe Community Evangelist |Adobe XD Trail contributor|Adobe MAX、XDUG、Creative Cloud 道場、XDTrail、CSS Niteなどで登壇 共著:豊富な作例で学ぶ Adobe XD Webデザイン入門

by|Yuhei Sasaki

Adobe Community Evangelist |Adobe XD Trail contributor|Adobe MAX、XDUG、Creative Cloud 道場、XDTrail、CSS Niteなどで登壇 共著:豊富な作例で学ぶ Adobe XD Webデザイン入門

最近の記事

Adobe XDデータをAeroでAR化

私は毎年XDUFの企画「XD challenge」に挑戦しています。今年のテーマは「旅」です。 昨年、犬が家族に加わったため一緒に出かけているのですが、愛犬を可愛く写真におさめたい欲も出てきました。 そこで、犬の撮影スポットがわかるAPPというテイでAdobe XDで作ったパーツをAR化してみました。 ※全行程、勘でやってます 作業工程は以下の通りです。 Adobe XDでプロトタイプを作る今回、Adobe Aeroの挙動がわからなかったので「これはできるだろ」程度のもの

スキ
4
    • tableの実験

      スキ
      1
      • パディングとスタックの設定(DLデータあり)

        パディングとスタックを使ったデザインをすると、下の動画の右側のように、背景が正しく追従しないことがありませんか? 左のように正しく設定するコツは以下の2つです。 1. パディングを適用したフォルダーの直下のレイヤーは2つまで 単一レイヤーでもグループでも構いません。 例えば以下のような形です。(divにパディングを適用しています) こうすることで、コンテンツと背景がわかりやすくなります。 2. コーディングを意識したレイヤー構成 パディングやスタックを使用する場合、特

        スキ
        4
        • 部分的に要素を固定 sitcky表現をXDに取り入れる|サンプルデータ配布

          よくある相談に、XDでposition: sticky;のようなプロトタイプを作りたいと言うものがあります。 残念ながら2022.08.29現在、XDでそのようなプロトタイプを作ることはできません。 個人的には下の動画のように「スクロールグループで良いのでは?」という感じですが、きちんとページの上部で固定させたい方もいるようです。 ということで、無理矢理作ると以下のようになります。 手間の割にうまく動かないので、あまりお勧めできませんが一応データを置いておきます。 この

          スキ
          2

        マガジン

        マガジンをすべて見る すべて見る
        • XD
          by|Yuhei Sasaki

        記事

        記事をすべて見る すべて見る

          みんなで Adobe XD Trail 2022 #3 達人への道 おまけデータ

          みんなで Adobe XD Trail 2022 #3 達人への道 質問コーナーにて使用したデモデータを配布します。 ※データや使用している素材の再配布は禁止しています ※ChromeからのDLでブラウザ側に破棄されてしまうことがあります。その場合は、お手数ですが、Safariなどの別ブラウザをご利用ください。2022.07.03時点

          ウェブカタログ風アニメーションのXDデータ配布

          以下のウェブカタログ風アニメーションのデータを配布可能な形に変更しました。 好きな画像を入れて、オリジナルカタログを作ってみてください。 DLデータは、一番最後にあります。 使用方法は、データ上部にある赤枠内に画像をドラッグ&ドロップするだけです。 ぜひオリジナル画像を挿入してプレビューで再生してみてください。 ※素材の配布を目的とした行為は禁止します。このデータを使った作品をSNSに公開する場合、メンションやリンクをいただけると嬉しいです。

          スキ
          16

          Adobe XDでスクロールに応じて要素をフェードインさせる方法

          概要2022年3月時点で、AdobeXDでスクロールをトリガーにしたプロトタイプは作れません。しかし、私は強引に再現する方法を思いついたので紹介します。 それは、Lottieを使って別のステートに移動する方法、または別のアートボードに移動する方法の2つです。 下の動画は、Adobe XDでスクロールに応じて要素をフェードインさせたプロトタイプを録画したものです。 仕組みここでは、どのようにしてスクロールをトリガーにしたプロトタイプを再現するのかという仕組みと2つの方法のメ

          スキ
          27

          誰でも簡単にキラキラデザイナーになる方法

          誰でも簡単にキラキラデザイナーになる方法を公開します。 ディレクターやエンジニアにもなれます。 まずは、こちらのデータをダウンロードしてください。 職種を選択ダウンロードしたデータを開き①職種を選択レイヤーをダブルクリックします。 新しくデザイナーと表示されたウィンドウが開くので、レイヤーから好きな職種を表示して保存します。保存後は閉じて構いません。 選択した職種がkirakira_haihu.psdに反映されます。 写真を差し替え次に、②写真を挿入レイヤーをダブルク

          スキ
          20

          かわいいペーストボードを作りました

          オリジナルキャラを使って「XDにメモとして配置するペーストボード」を作りました。 データを配布するので、みなさんのデータにコピペして使ってください。 私は使わないですけど笑

          スキ
          9

          置くだけ!ローディングコンポーネントを配布

          置くだけで、ローディング画面を作成できるXDのコンポーネントを配布します。 背景の色を変更したり、デバイスに合わせてサイズを変更できます。 自分のアートボードにコピペして使ってください。 ※「ドキュメント間でリンクされたアセットは〜」という注意が出ますが無視して問題ないです。 ※貼り付け先のアートボードに別のアニメーションを設定している場合、うまく動作しないことがあります。 ※テストしてないので動かなかったら教えてください笑 Lottieを使っているのですが…仕組みが気に

          スキ
          3

          背景用の壁写真配布(ほぼ無料)

          これは、本当に、ただただ私の主観であり、実力不足なのですが……。 プレゼン資料を作るとき、真っ白なキャンバスの上に文字だけが置いてある となんとなく寂しく感じる時がありませんか? 私の場合、以下のような条件で資料を作ることが多く困っていました。 カーニングが使えないアプリで作るため、テキストだけの資料は何となくしまらない 配布前提の資料のため、いい感じのフォントが使えない そこで、考えたのが「背景に壁の写真を置く」という方法。 しかし、ここにも「再配布禁止」という壁

          スキ
          7
          有料
          100

          XDでLottieを使って効率的にすべてのページに遷移アニメーションを入れる実験

          Lottieをサポートしたことで、すべてのページ遷移で発火する暗転などの表現が可能になったかもしれません。 今まで再現しなかった理由 最初に書いておくと、決してできなかったわけではないです。 できたのですが、物凄い手間のかかる作業でした。 例えば、今回のようにすべてのページ遷移のときに暗転するアニメーションを作るとします。 そのとき、自動アニメーションで作成するには「現在地」「暗転」「遷移先」の3枚のアートボードが必要になります。 ここまでであればまったく問題ないのです

          スキ
          4

          ホバーアニメーション入門(データ配布)

          ホバーした時のアニメーションを、いくつか用意しました。 アニメーション作りの参考にどうぞ!

          スキ
          9

          Hamburger Menuで学ぶステートのアニメーション

          アニメーション作りの参考にXDデータを配布します。 ステートはアートボード2枚分のアニメーションしか作れませんが、マスクなどちょっとした工夫で表現の可能性が広がります。 まずはハンバーガーメニューで、少し複雑なアニメーション作りに挑戦してみませんか?

          スキ
          5

          初めてのLottie!XDにLottieを導入する3つの方法とオリジナルアニメーションの作成

          2021年10月XD45のアップデートで、XDにLottieの再生が導入されました。 ここでは、私が初めてLottieに触ってから数日テストしてきたことを備忘録として残します。全て未経験領域のため、嘘を書いている可能性が非常に高いです。お許しください!笑 LottieとはAdobeのユーザーガイドによると以下のように記されています。 「ふむふむ、なるほど。よし、使おう!」とLottieで検索するとおそらくLottie JSONで動いているであろう以下のサイトが出てきます。

          スキ
          55

          Adobe MAX 2021で使用したプロトタイプ配布

          「S915 - Adobe XDでここまでできるマイクロインタラクションの表現」のセッションで使用したプロトタイプを配布します。 ※フォントはBarlowを使用しています。 High-Quality Micro-interaction Expressions Using Adobe XD - S915 参照:https://www.adobe.com/max/2021/sessions/highquality-microinteraction-expressions-us

          スキ
          35