西原 翼 フォロー

建築関係出身のインタラクションデザイナー。デザインとエンジニアリングのつながりを探求したい。現実と虚構の狭間も好き。趣味はCG、工作、料理など。

ウェブサイトに透過動画を埋め込む方法

ウェブサイトに透過動画を埋め込む方法

backgruond-imageを使ったCSSのアニメーションテクニック

backgruond-imageを使ったCSSのアニメーションテクニック

デザインとHTMLのズレを検出! Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ

デザインとHTMLのズレを検出! Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ

グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ

グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ

マイクロインタラクションからクリエイティブ表現まで!Tween24.jsを使った演出表現

マイクロインタラクションからクリエイティブ表現まで!Tween24.jsを使った演出表現

HTMLにちょい足しでできる! Vue.jsでサクッと動きをつける方法

HTMLにちょい足しでできる! Vue.jsでサクッと動きをつける方法

gapの余白指定が便利! gridとflexでできる新しいCSSレイアウト手法

gapの余白指定が便利! gridとflexでできる新しいCSSレイアウト手法

Canvasだけじゃない!requestAnimationFrameを使ったアニメーション表現

Canvasだけじゃない!requestAnimationFrameを使ったアニメーション表現

API通信一切なし!Nuxt Composition APIで作る完全静的サイト

API通信一切なし!Nuxt Composition APIで作る完全静的サイト

知らないで使うとトラブルになるかも…プログラム・画像のライセンス(概要編)

知らないで使うとトラブルになるかも…プログラム・画像のライセンス(概要編)

お問い合わせフォームのウェブアクセシビリティ対応の方法

お問い合わせフォームのウェブアクセシビリティ対応の方法

CSSを活用してHTMLのセマンティックエラーを指摘する方法

CSSを活用してHTMLのセマンティックエラーを指摘する方法

君は真に理解しているか?z-indexとスタッキングコンテキストの関係

君は真に理解しているか?z-indexとスタッキングコンテキストの関係

CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方

CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方

1歩踏み込んでみる! CSSグラデーションのマニアックな世界

1歩踏み込んでみる! CSSグラデーションのマニアックな世界

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出(2019年版)

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出(2019年版)

JSでのスクロール連動エフェクトにはIntersection Observerが便利

JSでのスクロール連動エフェクトにはIntersection Observerが便利