アーカイブ
-
ブログをリニューアル。Astro + WordPress headlessに移行した理由と技術スタック紹介
はじめに このたびブログ「ShunNote」をリニューアルしました。 見た目のデザインを一新しただけでなく、裏側のシステム構成も大きく変えています。以前はWordPressをそのまま使っていましたが、今回は Astro …
-
【完全ガイド】Webデザインのアイデアを収集する方法
みなさんこんにちは。しゅん(@shun_webdesign)です。 今回はWebデザインの参考になる収集方法を紹介します。 参考になるサイトから方法まで紹介します。 Table of Contents Toggle 常に …
-
Lottieでグラデーションを使ってアニメーションを作る裏技2つ
みなさんこんにちは。しゅん(@shun_webdesign)です。 皆さんはLottieをご存知でしょうか?なめらかなアニメーションをサイトに実装でき、手軽にリッチな表現を取り入れることができます。 LottieはAft …
-
【インタビュー】フロントエンドエンジニアのリアルな実情を聞いてみた
みなさんこんにちは。しゅん(@shun_webdesign)です。 今回はフロントエンドエンジニアのyukiさんにこれまでのキャリアやお仕事などのお話をお伺いしました。 Web3大アワードと言われるFWAを受賞しているエ …
-
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を使いたい方やいろんなカスタマイズ方法を知りたい人は是非読んでみてく …