Pinned
住友金属鉱山の素材テクノロジー「SOLAMENT®」を活用した、在来野菜の栽培継承を支えるプロジェクト「絶滅危惧野菜を救え by SOLAMENT®」におきまして、特設Webサイトのフロントエンド実装を担当いたしました。
endangeredveggies.smm.co.jp
00:00
Takumi HASEGAWA (unshift Inc.)
7,084 posts
Takumi HASEGAWA (unshift Inc.)
@_unshift
Developer | unshift Inc. / Nauts (@NautsDC) | 主にWebサイトのフロントエンド実装をやっています。WebGLなどWebのグラフィック技術を使った表現が得意です。武蔵野美術大学 デザイン情報学科 特別講師。
- 以前お知らせしていて、レスポンシブ実装のサンプル集サイトを公開しました。 responsive-samples.unshift.co.jp
00:00 - 貝印 特設サイト「やさしい切りかた辞典」の実装を担当いたしました。「野菜(8/31)の日」のリリースです！ 各食材のページで食品ロスを減らせる切り方を動画で観られるようになっております！ kai-group.com/products/speci… #野菜の日 #やさしい切りかた辞典 #webgl #threejs #nextjs
00:00 - 異色のコラボである「ドルチェ＆ガッバーナ × 呪術廻戦」の特設サイトの実装を担当しました！ ロード後の帳が下りる演出、背景の演出も呪術っぽさが出るようにこだわって実装しました。 jujutsukaisen.dolcegabbana.com #threejs #webgl #reactjs #creativecoding #ドルガバ呪術廻戦 #呪術廻戦
00:00 - というわけで、前作ったものをちょっとだけブラッシュアップしてインタラクションも追加してみました。 クリック & ホールドで変形します。 unshift.co.jp/labs/plateau-v… 当日は持ち時間が5分ですが、超ざっくりどんな感じで作ってるか説明します！ #webgpu #webgl #creativecoding #threejs
00:00PLATEAU (国土交通省が主導する日本全国の都市の3Dモデルのオープデータ化プロジェクト) が提供している3Dモデルを使ってクリエイティブコーディング作品 (※スレッド参照) を作ったら、イベントの運営の方からお声がけいただき、LT会に登壇することになりました！ 2025/11/05(水) - Webサイトのアニメーションについて、自分の考えを整理して言語化してみました。 note.com/unshift/n/ne47… Webサイトにおけるアニメーションの役割と、その必要性について書いています。記事にもある通り、学術的な内容は一切なくバリバリ主観で書いています。興味ある方はぜひご覧ください。
- デモを作るのに気合を入れすぎてしまってかなり複雑になってしまい、すべてを細かく解説することはできないんですが、実現するための道具と考え方をしっかり解説したいと思います。 デモはこちら↓ アニメーション、インタラクションともにCSSのみで動いています。JSは使っていません。
00:00今週金曜 (1/31) に開催される #朝までマークアップ 2（CSS編）のタイムテーブルが公開されました。 私はBグループの1番目、22:00から出演します。 CSSのみでアニメーションをともなうリッチなインタラクションを実装する方法を解説します！ - ヒアルロン酸専門のスキンケアブランドHA-LABOのブランドサイトの実装を担当いたしました。 水っぽい表現がいくつか盛り込まれており、WebGLやCanvas2Dを使って再現しております。 ha-labo.co.jp #reactjs #webgl #threejs #canvas2d
00:00 - Webサイトをデザインするデザイナーさんに聞きたいです！※アンケートをスレッドにぶら下げます。 Figmaのレイアウトガイドなどを使用してカラムやグリッドの定義をする際、レスポンシブデザインの挙動として添付の画像のどちらを想定することが多いかを教えていただきたいです。
- 国内のWeb制作に関わる人が全員見ると言われているギャラリーサイト S5-Style (@s5style) がサービスサイトとして生まれ変わりました。大変光栄なことにそのS5-Styleのリニューアルプロジェクトにおいて、フロントエンドの実装を担当させていただきました。 s5-style.com
00:00 - わかりにくいJavaScriptのthisの挙動を確認する教材を勉強会用に作っていたんですがちょっと改良してシェアします。JavaScripth初学者の方で、thisがよくわからん、という人はこのコードをいじってthisの挙動を確認してみてください。 (console.logを使用しているのPCで。)
- CSSで三角関数が使えるとのことなので、ちょっと遊んでみました。端末スペックによっては激重です。モバイルは多分ムリ。まだChromeは対応していないので、FirefoxやSafariで動作確認してみてください。(1/4) codepen.io/_unshift/full/…
00:00 - Appleの新UIデザインシステムを見て、Liquid Glassも良かったんですが、あらためて「やっぱり普通の角丸四角形じゃなくて、Squircleを使っている方が美しいな」と思ったので、Squircleの研究をしてみました。 ↓そして成果がこれ。 squircle.unshift.co.jp
00:00 - Thank You Twitter Scroll to the bottom of this page. unshift.co.jp/labs/thankyout… #webgl #threejs #creativecoding
00:00
