コーディング23件
-
TSLとは？WebGPU時代の新しいシェーダーの書き方
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 最近、僕はXでThree.jsのシェーダー作品をちょこちょこ投稿しているんですが、その多くを「TSL」というもので書いています …
-
【まとめ】Three.js入門完全ガイド｜記事一覧・学ぶ順番つき
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 僕は普段、Three.jsを使ってブラウザで動く3D表現を作っていて、その作品をXでも発信しています。最初は「3Dってなんか難 …
-
ブログをリニューアル。Astro + WordPress headlessに移行した理由と技術スタック紹介
はじめに このたびブログ「ShunNote」をリニューアルしました。 見た目のデザインを一新しただけでなく、裏側のシステム構成も大きく変えています。以前はWordPressをそのまま使っていましたが、今回は Astro …
-
Lottieでグラデーションを使ってアニメーションを作る裏技2つ
みなさんこんにちは。しゅん（@shun_webdesign）です。 皆さんはLottieをご存知でしょうか？なめらかなアニメーションをサイトに実装でき、手軽にリッチな表現を取り入れることができます。 LottieはAft …
-
Next.jsとReact Three Fiberのポートフォリオを公開するまでの裏側
みなさんこんにちは。しゅん（@shun_webdesign）です。 先日、作成したポートフォリオサイトをSNSで公開しました。(※現在は非公開) 今回は僕が公開したポートフォリオについて紹介していきたいと思います。 ※コ …
-
Lottieの作成からコーディングまで実装方法をまるっと解説
こんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 軽量のWebアニメーションが作れる「Lottie」をご存知でしょうか？ 近年、Adobe XDでも使用できるようになりリッチなアニメーションを …
-
【Swiper】簡単！ドラッグ操作できるカード型スライダーを作る方法
みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 Web制作ではスライダーという画像などのコンテンツをスライド形式で流す表現方法があります。 トップページのメインビジュアルをフェードさ …
-
【Adobe XD】コーディングが捗る！ZeplinとXDを連携する活用方法
みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 XDを使ってデザインを作る方も多いと思いますが、XDのデータからコーディングする際はどのようにしていますか？ Macを使ってる人は⌥キ …
-
【最新版】Firebaseを使って無料でセキュアなサイトを5分で公開する方法
みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 フリーランスや転職活動の際に必要になるポートフォリオサイト。どのようにして公開しますか？ レンタルサーバーを借りてサイトを公開したり、 …
-
ヌルヌル動く！Adobe AnimateCCを使ってアニメーションをHTML5 Canvasに変換する
みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 近年Webサイトで使われることがアニメーション。動きをつけることでサイトを閲覧するユーザーの目を引きつけやすく、静止画の画像に比べての …