アーカイブ
-
Next.jsとReact Three Fiberのポートフォリオを公開するまでの裏側
みなさんこんにちは。しゅん(@shun_webdesign)です。 先日、作成したポートフォリオサイトをSNSで公開しました。 今回は僕が公開したポートフォリオについて紹介していきたいと思います。 ※コードなどの内容の説 …
-
プロトタイプで作るインタラクションアイディアXDUFes2022【XDデータ有】
みなさんこんにちは。しゅん(@shun_webdesign)です。 12/3(土)に開催された「XDUFes2022」に私が登壇しました。 今回は当日のセッション内容について紹介させていただきます。 当日視聴できなかった …
-
Lottieの作成からコーディングまで実装方法をまるっと解説
こんにちは。Webデザイナーのしゅん(@shun_webdesign)です。 軽量のWebアニメーションが作れる「Lottie」をご存知でしょうか? 近年、Adobe XDでも使用できるようになりリッチなアニメーションを …
-
【Adobe XD】操作感が心地良いカード型スライダーを作る方法
みなさんこんにちは。Webデザイナーのしゅん(@shun_webdesign)です。 XDではプロトタイプを使って滑らかに動くアニメーションをつけることができます。 今回はXDを使って、スワイプで動くリッチな動きのカード …
-
【Swiper】簡単!ドラッグ操作できるカード型スライダーを作る方法
みなさんこんにちは。Webデザイナーのしゅん(@shun_webdesign)です。 Web制作ではスライダーという画像などのコンテンツをスライド形式で流す表現方法があります。 トップページのメインビジュアルをフェードさ …
-
【保存版】今日から使えるNotion活用方法まとめ
みなさんこんにちは。しゅん(@shun_webdesign)です。 今回はNotionの使い方をまとめたNotion記事まとめです。これからNotionを使いたい方やいろんなカスタマイズ方法を知りたい人は是非読んでみてく …
-
【Adobe XD】画像をキレイに魅せる!ブレンドモードの活用法
みなさんこんにちは。しゅん(@shun_webdesign)です。 Adobe XDではブレンドモードを使って、レイヤーの合成を手軽に行うことができます。 エフェクトを組み合わせることによって多種多様な効果を与えれるので …
-
【Adobe XD】サクッと解決!テキストを縦書き入力をする方法2つ
みなさんこんにちは。Webデザイナー3年生のしゅん(@shun_webdesign)です。 今回はAdobe XDでテキストの縦書きを使う方法について紹介します。 Adobe XDではテキストの縦書き機能が搭載されていま …
-
【Adobe XD】モバイル版アプリでスマホからプロトタイプを確認する方法
みなさんこんにちは。しゅん(@shun_webdesign)です。 Adobe XDというとパソコンを使ってデザインを作成し、プロトタイプを確認することができます。 実はお手持ちのスマホからプロトタイプを確認できるのをご …
-
【Adobe XD】マネしたい!シェイプの使い方を具体的に解説
みなさんこんにちは。Webデザイナーのしゅん(@shun_webdesign)です。 今回はXDでシェイプの使い方・操作方法について紹介します。 ツールが少ないので複雑なものが作れないと思われがちなXDですが、多角形から …