by|Yuhei Sasaki

Designer|Adobe Community Evangelist | Adobe…

by|Yuhei Sasaki

Designer|Adobe Community Evangelist | Adobe XD Trail Contributor|LottieFiles Evangelist|共著:豊富な作例で学ぶ Adobe XD Webデザイン入門

最近の記事

XDUF2023セッション資料配布

本日は、ご参加・ご視聴ありがとうございました! 配布データセッションスライド ※個人のnoteのため、会社情報を削除しています Lottie作成用Figma 各種リンクLottieFiles LottieFilesの使い方は過去の記事をご確認ください LottieFiles Plugin(LottieFiles For Figma) LottieFiles Supported features ※登壇内容の復習以外の使用方法はお控えください

    • 毎年恒例の千葉ライド

      毎年恒例の千葉ライドに行きました。 ルートは、JR久里浜駅スタートで久里浜港から自転車をフェリーに乗せて千葉の金谷港に渡ります。そこから館山で一泊して勝浦まで行きました。 金曜日の朝に集合だったので、通勤ラッシュを避けるため、久里浜駅には始発に近い電車で向かいました。 久里浜港から金谷港までは40分くらいでした。 金谷港付近で、海鮮を食べました。 お店のおばちゃんが「ウルメイワシが入ったから絶対食べた方が良い!」とゴリ押ししてくるので頼んだらメチャクチャな量が出てきまし

      • 葛西動物&盆栽巡り

        Stravaを見ていたら葛西にポニーランドという場所を見つけたので行ってみました。 親子連れしかいないなか、おじさん1人で見てまわりました。 自然動物園という無料の動物園もありました。 ここも親子連れしかいませんでしたが、おじさん1人で見てまわりました。 帰りにBONSAI美術館を見つけました。 外国の方が数人BONSAIを楽しんでいました。 葛西はカレーが有名なのですが、お目当ての店を通り過ぎてしまい、結局近所のカフェでラザニアを食べて帰りました。 ポニーランド

        • 初心者のためのLottie&LottieFiles

          このnoteでは「これからLottieをはじめてみよう」と思っている方や「名前は知っているけどLottieってなに?」という方に向けて、Lottieの基礎的な使用方法を紹介します。 LottieとはLottieというキーワードでGoogle検索したとき、LottieとLottieFilesの2つのワードがヒットします。ここではまず、2つの違いを紹介します。 Lottie LottieとはAirbnb(エアビーアンドビー)が開発したJSONベースのアニメーションファイル形

        XDUF2023セッション資料配布

        マガジン

        マガジンをすべて見る すべて見る
        • XD
          by|Yuhei Sasaki
        • 自転車日記
          by|Yuhei Sasaki

        記事

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

          気になるNEWS 05/13→05/19

          1. iDIDが話題をさらったサイトを発表2. FigmaからLottieが作成可能に3. ギンザ・グラフィック・ギャラリー企画展 横尾忠則 銀座番外地 Tadanori Yokoo My Black Holes4. ジェンダーレストイレのその後

          気になるNEWS 05/13→05/19

          サンプルデータ配布

          久しぶりにデータを配布します。 デモ用に作成したものですが、よく使うであろうアニメーションをそこそこ盛り込んだデータになっています。 配布の予定がなかったので、レイヤーなど見にくいところや処理を間違っている部分があるかもしれません…あくまで参考としてご利用ください。 (私自身、もう中身を覚えていません笑) 参考としての利用以外で、データ内の写真・動画を使用することは禁止します。 ※KVにはXDで作成したアニメーションを録画したものを配置しています

          サンプルデータ配布

          AdobeXD マスクを使ったボタン(DLデータあり)

          最近よくみるテキストが回転するようなボタンはマスクを使って作成します。 マスクを利用するとアニメーション表現の幅が広がります。 作り方テキストにマスクを適用します。 テキストを複製して片方をマスクの外へ移動します。 ホバーステートを作成してテキストの位置を変更します。

          AdobeXD マスクを使ったボタン(DLデータあり)

          AdobeXD ホバーでラインがつくテキストのコツ(DLデータあり)

          ホバーステートでラインが表示されるテキストリンクを作成することはよくあると思います。 そのとき、インスタンスのテキストを変更するたびにラインの長さを変更していませんか? パディングを利用して、テキストに合わせて伸縮するラインを作成すれば効率的に作業ができます。 作り方テキストとラインがちょうど隠れるサイズの長方形を作成し「塗り」と「線」両方のチェックを外します。(透明になります) 長方形とラインをグループ化します。 作成したグループとテキストをコンポーネント化して、パデ

          AdobeXD ホバーでラインがつくテキストのコツ(DLデータあり)

          AdobeXD ホバーで拡大する画像(DLデータあり)

          ホバーステートでの画像の拡大はマスクを使わずに直接行うこともできますが、拡大率を数値で管理できません。 コーディングのことを考えたり、自分のデータを統一するためにも数値で管理できる方法をお勧めします。コーダーさんに「ホバー時は〇〇%拡大です」と伝えてあげるとより親切です。 作り方画像と同じ大きさの長方形でマスクします コンポーネント化してホバーステートを追加します ホバーステートで画像のサイズを数値で調整します

          AdobeXD ホバーで拡大する画像(DLデータあり)

          AdobeXD コンポーネントでハンバーガーメニュー(DLデータあり)

          オーバーフローを使わずコンポーネントで作成すると、ハンバーガーメニューにアニメーションをつけることができます。 作り方ハンバーガーメニューとメニューの中身を作成します コンポーネント化してメニューの中身は非表示にします 新規ステートを追加してメニューを表示し、ハンバーガーメニューを変形します プロトタイプモードで自動アニメーションを使ってステートが切り替わるように設定します

          AdobeXD コンポーネントでハンバーガーメニュー(DLデータあり)

          Adobe XDだけでできる「ホバーで色がつく画像」(DLデータあり)

          作り方画像を複製して片方のブレンドモードを「輝度」に変更します ※「輝度」化したレイヤーの下に白い画像を敷くと、下の色に影響されないようになります コンポーネント化して初期設定のステートとホバーステートで、それぞれの画像の不透明度を変更して表現します

          Adobe XDだけでできる「ホバーで色がつく画像」(DLデータあり)

          AdobeXD アニメーション付きチェックボックス(DLデータあり)

          作り方チェックボックスをコンポーネント化してトグルステートを作成 ボックスとチェックの線を図のように設定

          AdobeXD アニメーション付きチェックボックス(DLデータあり)

          Adobe XDデータをAeroでAR化

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

          Adobe XDデータをAeroでAR化

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

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

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