Takumi HASEGAWA (unshift Inc.)
@_unshift
Followers
6,054
Following
2,251
Media
315
Statuses
5,348
Creative developer | unshift Inc. founder. / Nauts ( @NautsDC ) member. / raf ( @raf___gallery ) | 主にWebサイトのフロントエンド実装をやっています。WebGLなどWebのグラフィック技術を使った表現が得意です。
日本
Joined November 2017
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Doom
• 464795 Tweets
Robert Downey Jr
• 349002 Tweets
Marvel
• 324077 Tweets
#UP_WANT_TEACHER_VACANCY
• 259399 Tweets
#ufc304
• 206677 Tweets
ワンフェス
• 142300 Tweets
9STAR FILLED BLANK WITH LOVE
• 119192 Tweets
Leon
• 117731 Tweets
Belal
• 110757 Tweets
LINGORM 3ZAAP TTK
• 98779 Tweets
Aspinall
• 64959 Tweets
Kang
• 57745 Tweets
Iron Man
• 45203 Tweets
#超RIZIN3
• 41276 Tweets
Paddy
• 36136 Tweets
アイビスSD
• 35922 Tweets
Tony Stark
• 28086 Tweets
クイーンS
• 24851 Tweets
RENA
• 19982 Tweets
モズメイメイ
• 15053 Tweets
伊能忠敬界隈
• 14218 Tweets
ロバートダウニーJr
• 14155 Tweets
Jon Jones
• 12851 Tweets
コガネノソラ
• 11563 Tweets
ドゥーム
• 10558 Tweets
Pinned Tweet
1
0
52
異色のコラボである「ドルチェ＆ガッバーナ × 呪術廻戦」の特設サイトの実装を担当しました！
ロード後の帳が下りる演出、背景の演出も呪術っぽさが出るようにこだわって実装しました。
#threejs
#webgl
#reactjs
#creativecoding
#ドルガバ呪術廻戦 #呪術廻戦
2
137
663
Webサイトのアニメーションについて、自分の考えを整理して言語化してみました。
Webサイトにおけるアニメーションの役割と、その必要性について書いています。記事にもある通り、学術的な内容は一切なくバリバリ主観で書いています。興味ある方はぜひご覧ください。
2
72
508
わかりにくいJavaScriptのthisの挙動を確認する教材を勉強会用に作っていたんですがちょっと改良してシェアします。JavaScripth初学者の方で、thisがよくわからん、という人はこのコードをいじってthisの挙動を確認してみてください。
(console.logを使用しているのPCで。)
2
30
309
CSSで三角関数が使えるとのことなので、ちょっと遊んでみました。端末スペックによっては激重です。モバイルは多分ムリ。まだChromeは対応していないので、FirefoxやSafariで動作確認してみてください。(1/4)
2
41
296
0
67
293
世界文化遺産である西芳寺のWebサイトの実装を担当させていただきました。
西芳寺は別名「苔寺」と呼ばれており、約120種の苔が境内を覆っている美しいお寺です。
0
32
261
いま、デザイナーさんとレスポンシブの仕様決めのコミュニケーションを取るためにレスポンシブのパターンを載せたサンプルサイトを作ってます。まだ全然できてない。
2
11
246
39歳になりました。
30代最後の年。もうおっさんだし、体力もないしすぐ疲れるけど、家族の時間も仕事も好きなので、良い感じにバランスを取って幸せに穏やかに暮らしたいです。
12
0
245
一緒にお仕事して、すごいなぁって思うデザイナーさんの共通点として、
・どんなタイプのデザインも素敵に作る
・デザインするのが早い
・こちらの細かい仕様確認も的確に答えてくれる
・こちらからの提案をしっかり聞いて、採用するかを議論してくれる
というのがあって、
1
13
235
あけましておめでとうございます。
いきなりご報告ですが、昨年11月に法人化しました。
今後は株式会社unshiftとしてよろしくお願いいたします。
法人化 & 新年のご挨拶のサイトを作りました。ロゴも新しくしたのでぜひご覧ください。1/2
#happynewyear2022
#webgl
#threejs
9
18
224
みんな大好きなラーメンAFURIの採用サイトの実装を担当させていただきました！
各店舗のタイポグラフィがカッコいいのでご注目ください！
1
7
218
どなたかもTwitterで言ってた気がするんですが、最近のECMAScriptやCSSの新機能を見ていると、
「この機能がないとこのデザインは実装できない」
というものは多くなくて
「知ってると効率的に実装できる」
1
30
211
夏が終わった感じがしますが、花火を作ってみました。
クリック or タップで花火が上がります。連打すると花火大会のフィナーレみたいになるので、疑似花火大会を体験してください。ドローンから撮影した風。
#creativecoding
#webgl
#threejs
#glsl
#CreativeCoding
花火大会
2
34
205
もともとのGeometryの頂点情報をレンダリング中に動的に変化させずに、シェーダー側だけの計算だけで角丸直方体の角丸のサイズをキープしながら直方体のサイズを変更することに成功しました (だからなんだと言われたらアレなんですが)。
1
11
196
GPGPU Particle Types
Google Fontsからフォントを読み込み、WebGL (three.js)でパーティクルにしてインタラクションをつけています。クリックで次のフォントへ。
久々にこういうのが作れる時間が取れて楽しかったです。
#creativecoding
#threejs
#webgl
#glsl
#googlefonts
2
25
190
Happy New Year 2023!!
今年もよくわからない年賀コンテンツになりました。スクロールで変化をお楽しみください。
今年もunshift Inc.をよろしくお願いいたします！
#webgl
#threejs
#creativecoding
#HappyNewYear
1
12
191
2021年7月でどうやら開業届を出して丸5年が経ったようです。なんとなくでここまで来て5周年という節目になってはしまいましたが、これからも皆様のお役に立てるよう精進いたしますのでよろしくお願いいたします。
#creativecoding
#glsl
#generativeart
#webgl
#threejs
3
7
174
諸事情でこのバージョンのサイトの公開中に実績の公開ができなかったんですが、絶滅危惧種をモチーフにした次世代スニーカーブランド「REDLIST」のWebサイトのキービジュアルの実装を担当しておりました。
0
12
174
娘がシナぷしゅが好きなので、Blenderで作ったアニメーションつきのぷしゅぷしゅをたくさん並べてファンアートを作ってみました。
クリックで変形 & 色が変わり、ドラッグやマウスホイールでカメラを動かせます。
#threejs
#webgl
#creativecoding
#fanart
#シナぷしゅ
2
10
174
12/10から始まるNEORT++の展示「CURATION FREE」の作品を制作しました。
@KUMALEON_
の企画で配布されていた3Dモデルを使用して、パーティクルをモーフィングさせてみました！ (1/3)
#webgl
#threejs
#neort
#creativecoding
#kumaleon
#kumakreative
#curation_free
4
31
166
gradation, Inc. コーポレートサイト
キービジュアル・サムネイルのマウスオーバー演出・ページ遷移演出などのWebGL演出部分の実装を担当させていただきました！
#webgl
#threejs
#creativecoding
1
15
160
これまさに知り合いのデザイナーさんたちと話したんですが、レスポンシブの仕様をどうするかによって決まってくるんですよね。
たとえばウィンドウサイズが変わっても全体の見た目が変わらない実装方法 (長さの単位をvwなどで組む場合)
私が参加してるプロジェクト(複数社)でも、もう8割方スマホデザインは390pxで作る雰囲気になってきた
最小サイズのほうが実装的に良さそうだしまだシェア的には...と思ってルールなければ375にしてたけど、もうそろそろなのか🤔？
良ければ教えてください〜🙏🏻
0
5
43
1
16
157
趣味でイラストとWebGL (three.js) を組み合わせた作品を作るアカウントを作っていたんですが、NFTのプロジェクト () にアーティストとして参加させていただいたりしてしっかりした活動もさせていただきました。
(単独でNFTアートを出してはいませんが、、)
イラストとクリエイティブコーティング (WebGL / three.js) によるアート作品を作っています。 すべてブラウザで体験できますので (リプにURLをぶらさげていきます)、ぜひ体験してみてください！
#illustration
#creativecoding
#threejs
#webgl
5
27
261
2
13
155
制作というか実装の裏側を少し(掲載許可はいただいております)。
三角形のタイルで構成されたイラストを、WebGL上でバラバラにする演出を入れるために、各タイルの色・向き・位置などをデータ化する必要があったんですが、それを効率良く行うためのツールも制作しています。
(1/3)
1
16
152
38になりました。30過ぎてからずっと、若い頃に思い描いていた30代からはほど遠く、自分にがっかりしてばかりですが、もうすぐ40なのでそろそろちゃんとしなければ。父親ですし。
あと、仕事面では下の代にもう少し何かを残せたらいいなと。
8
1
147
1
11
144
我が家にベイベが降臨しました！
この子のために、お仕事も子育ても死なないように死ぬほど頑張ります！
ちっちゃいおてて！
ンがわ゛い゛い゛ぃぃ！
8
0
144
Webサイトのプロジェクトでもなんでもそうだけど、プロジェクトの途中で誰かによる「無邪気でちょっと無茶な (言う人はだいたい無茶であることは無自覚) 改善提案」というのは、プロジェクトの成果物の質を向上させる上でめちゃくちゃ重要なんだけど、
2
7
143
私へ。
仕事ばっかりで余裕がないと、仕事で得るものはあるけど、仕事以外で得られるものが少なくなって、結果的に成長の速度が遅くなったりしてよろしくない。適度に余裕がないとダメですよ！
2
6
138
昔々、とあるディベロッパーさんに「技術力すごいですね」と言ったら、「そんなことなくて、調べまくってなんとかなってるだけだよ」みたいなことをおっしゃっていた。
当時はピンときてなかったが、それこそがパワーだと今なら少しわかる。
2
6
137
ノーリツ特設サイト「無限∞湯沸かしボタン FRONTIE」の実装を担当させていただきました。おふろのリモコンのボタンを連打するとカードがゲットできるコンテンツになっております。
キラカードの質感などこだわって実装したのでぜひご覧ください！
※動画は音声付きです。
0
12
137
チームで仕事をするとき、自分の領域以外のことをやってくれる方に対してリスペクトがないと、いい仕事なんてできないからな。
プロジェクトの最終工程であるディベロッパーを見下している人、こちらも馬鹿ではないので、いくら取り繕ってもそういうの感じ取れるからな。
1
6
132
元日にアップした新年のご挨拶サイトをベースに、 .co.jpドメインに暫定サイトをアップしました。最低限必要な情報とWorks (旧サイト)へのリンクです。
これでやっと新ロゴを新ドメインで見れるようになりました！
#webgl
#threejs
#creativecoding
#generativeart
1
16
126
レスポンシブのサンプルサイトもあってか先月はフォロワーさんが200人増えたので、改めて自己紹介を。
長谷川 巧 (はせがわ たくみ)
1985年1月25日生まれ (38歳)
unshift
0
4
128
SRとSSRのカードはキラカード仕様になっているのです。カードの一番上のレイヤーにキラキラするエフェクトが乗ってます。
わかりにくいんですが、右下のマークもビックリマンシールみたいにちゃんと角度によってキラキラします。
ノーリツ特設サイト「無限∞湯沸かしボタン FRONTIE」の実装を担当させていただきました。おふろのリモコンのボタンを連打するとカードがゲットできるコンテンツになっております。
キラカードの質感などこだわって実装したのでぜひご覧ください！
※動画は音声付きです。
0
12
137
3
17
126
I've just entered the derivative art contest of Generativemasks!
↓Try this from the url below and Click (Tap) and Hold!
#GMsArt2021Nov
#generativemasks
#creativecoding
#webgl
#threejs
6
22
118
世界中でIT機器のリユース事業を展開しているTT Global のリブランディングプロジェクトにおいて、コーポレートサイトのフロントエンド実装を担当いたしました。
1
8
123
iPhone 横幅メモ
5系, SE (第1世代)
320px
8系、X系, SE (第2世代)
375px
Plus, Max系、XR, 11
414px
↓new
mini
360px
12, 12 Pro
390px
12 Pro Max
428px
3
27
120
LANWAY Inc. コーポレートサイトの実装を担当いたしました。今回は久々にバックエンド含め実装全般を担当いたしました。
1
7
117
そういえば、、
トークセッションで「情報発信が上手い人は強い」みたいな話をした時に理由をちゃんと説明できてなかったので言っときます。
1
14
116
はてブ治安悪すぎて笑った。あとタイトルだけ見て記事読んでないコメントとかもやっぱり多い。落ち着け。
2
6
111
やはり一流の実装者は操作性を犠牲にしないし、体験を向上させる演出をめちゃくちゃ高いレベルで実装しているよあぁ。
同業から見て、 mount 岡部さん(
@kenjiokabe
) やbaqemonoのタローくん (
@ysmrt6
) はマジでレベルがおかしい。
1
3
100
この記事内でもやはり同期のズレについては言及されていて、スムーススクロールでごまかすのが一般的だよ、と言っている。
そしてこの記事はお金とってもいいくらいだと思う。
3
11
93
ジョージア「毎ドラ部 AIイラストメーカー」のWebGL部分 (KV・地図・背景)と一部フロントエンドの実装を担当させていただきました。AIが写真をイラストレーターさんの画風でイラスト化してくれます！
1
15
92
これは結構難しい問題ではあるよなぁ、、
まずデザイナーさんからのFBがそもそも本当にFBであれば、実装側の落ち度である場合は当然実装者はごめんなさいを唱え続けながら対応する必要があるし、双方のコミュニケーション不足であれば、しっかり会話して落とし所を探らないといけない。
1
6
91
My First Voronoi with GLSL
ところどころ色がおかしいところがありますが、採用しているアルゴリズムの限界。
#creativecodding
#generativeart
#webgl
#threejs
#glsl
1
10
89
なんかもうアニメーションゴリゴリどころかゴリンゴリンなWebサイトつくって炎上させてみたい。自分のコーポレートサイトでやるか。
4
1
90
最近、AwwwardsとかでWebサイトを見てると比較的処理が重たいエフェクト (WebGLの流体表現やCSSのFilterなど)が増えている気がして、ハードウェアが進化しているからなのかなと思う。
0
4
88
なぜかたまにデザイナーに間違えられることがあるんですが、実装専門です。
私が出してる実績のサイトは、全て素晴らしいデザイナーさんによるお仕事です。
デザイナーからデザインデータを共有していただくたびに、「プロのデザイナーっすごい」てって思います。リスペクト。
1
0
87
これは何度も言ってるけど、毎案件新しい発見があるので、土日に勉強しなくたって仕事してるだけで毎日勉強だよ！エライ！
0
4
84
フリーランスにとって、実績を公開するということがどれだけ重要かをわかってくれない人が多すぎて悲しいって思ってたけど、そりゃ当事者にならないとわかんないよね。
1
5
84
Noise sketch with RGB shift 4/4
#webgl
#threejs
#creativecoding
#codeart
#generativeart
#generativedesign
#glsl
#shader
1
12
80
It's completed!!
This is my new portfolio (full version) powered by self-build WebGL library.
#unshiftjp
#portfolio
#nuxtjs
#firebase
#webgl
#shader
#generativeart
#generativedesign
#creativecoding
3
5
81
1
3
82
Text Ribbons
Click and hold to transform. Mouse wheel & drag to control the camera.
#threejs
#webgl
#creativecoding
2
7
82
自分がWebフロントエンド実装を担当した際に、すごいと思ったデザイナーさん。
・スマホデザインで、ブラウザのヘッダ・フッタの高さも想定できている。
・マージンがルール化されていて指示書で説明してくれる。
・レスポンシブの挙動がイメージできている。
続く
1
0
80
やっと作業環境のアップデートが完了。
デスクの天板は以前使っていたものを流用してFlexispotのE7Hで昇降デスクに。
キーボードはキーの山が高いのは苦手なのでロープロファイルのKeychron K1 SE。左側にはMagic Trackpad。ディスプレイもウルトラワイドに。
立って仕事できるのめっちゃいい。
4
1
80
今年の年賀コンテンツは、
まず文字を↓のようにバラバラにして3Dキネティックタイポグラフィっぽいものが作りたい！というのが発端。
これをblenderで押し出して3Dモデルにして使用しました。
スレッドの最後にパラメータを手動でいじっている動画を載せているので興味ある方はご覧ください。(1/4)
1
2
80
先日書いた記事に対してたくさんの反応をいただき、いろんなことに対して言葉足らずであったことがわかったんですが、リライトする元気はないのでそのままにします。
次になにか記事を書くときはもう少しうまくかけそうな気がします。
2
0
80
ここ1年くらいで作ったものをモーメントにまとめました。お仕事と自主制作どっちも入れてます。この1年は面白いプロジェクトに関われたのでお仕事は充実してましたが、後半は自主制作が全然できてないのでよろしくないなぁ〜と思っております。ひさびさに好き勝手作りたい。
1
6
79
マシンが非力 (Intel Mac) なので、最近リッチな演出のあるWebサイトを見ると、結構重たいなと思うことが増えた。
ただ、非力とはいえ2020年のモデルなので、一般的にはこれくらいのスペックでWebサイトを閲覧してる人なんてたくさんいるはずなので、大丈夫か？という気持ちになってしまう。
2
4
79
以前はJSによるスムーススクロールといえば、
コンテンツの高さとかウィンドウサイズとかを取得して、ページのコンテンツに対して transform をかけてるのが主流だったように思うけど、Lenis登場から流れが変わったのかな？？
Lenisはwindow
1
5
78
新しい名刺ができました！思い切って正方形の名刺にしてみました。
表面 (名前が記載されている面)は黒っぽく見えますが、濃いめの紺です。紙の選択肢が限られているのでコーポレートカラー (濃藍) よりも色が濃く、ロゴもその色に合わせているので全体的に濃い目の色ですが、概ね満足です！
2
2
78
最近Webサイトの実装がムズイって思うんだけど、なんでかなと考えたら、CSSやSVGでの表現力が上がったからだなと。昔はそれらで再現できないからやむなく画像を使っていたところを、今はそれらでできてしまう。そしてブラウザによってバグがあったりする。これだ。
1
2
76
本日で法人1期目が終わりになります。
法人化してからずっとバタバタしてる感じなんですが、来季はもう少し落ち着いてプライベートと仕事のバランスをいい感じに保ちながら生きていきたいです。
今年はもう新規のお仕事をお受けしておりませんが、来年は空いておりますので、ぜひお声がけください。
1
1
74
CURATION FREE day3行ってきました。部屋の四方の壁全体に自分の作品がこんなにも大きく、、感動。でももうちょっと文字を濃くしておけばよかったかなぁ。
@r21nomi
@neort_io
こんな素晴らしい機会をありがとうございます！
#curation_free
2
3
73
実験だったけどちゃんと動作するものを公開しました。
※スマホだとパラメータ操作ができないのでPC推奨
alt / option + DでTweakpaneのパネルが出るので、どういう変形をしてるか知りたい場合は、autoPlayのチェックを外してパラメータをいじって遊んでみてください。
もともとのGeometryの頂点情報をレンダリング中に動的に変化させずに、シェーダー側だけの計算だけで角丸直方体の角丸のサイズをキープしながら直方体のサイズを変更することに成功しました (だからなんだと言われたらアレなんですが)。
1
11
196
1
7
73
実装が苦手だけどポートフォリオサイト作りたい、というデザイナーさんと一緒にサイトを作りたいけど、ノーコードツールなどで手軽にしかもカッコよく作れてしまうので、そこで価値を出しにくくなってはいるものの、オーダーメイドに高精度で応えて一緒に考えながら高いクオリティで作るという点では負
0
3
72
STARRYWORKSさん (
@starryworks
) とMEFILASさん (
@mefilas_inc
) が共同主催で運営しているイベント「CASE STUDY」の第3回に登壇することになりました。実際に携わったプロジェクトを取り上げ、普段私がプロジェクトの中でどういったことを考え、実行しているかをお話できればと思っております！
【イベント告知】
「CASE STUDY」第3回を5月12日に開催します！
クリエイターを志す学生、現役クリエイター、企業が知見を共有し、業界の発展を目指すイベントです。今回は、
@daijimachine
、
@_unshift
をゲストとしてお招きしSTARRYWORKSの
@kjkmr
と3名でエンジニアリングをテーマにお話します。
1
29
145
2
6
72
なんとか無事引越し完了。
前はリビングと仕事部屋がつながってたけど、今回はちゃんと隔離されてるので集中できそう。コードが見えないデスクも移設完了。
ネットの開通工事早く来てくれ〜
3
0
72
私の三大肌に合わなかったもの
・シェルスクリプト
・TailwindCSS
・Vim
次点
・めっちゃ話しかけてくる美容師
・めっちゃ話しかけてくるアパレル店員
・めっちゃ話しかけてくるタクシードライバー
1
4
71
久々のこの規模のイベント、楽しかったです！！主催の皆様、ありがとうございました！
久々にお話しできた皆様、初めましての皆様もありがとうございました！
会えなかった方々は次の機会に！
〓 12/1 (金) 師走忘年会@東京 のお知らせ 〓
今年の締めくくりに、会社の垣根を超えてクリエイター同士で乾杯しませんか？🍻 全国のデザインプロダクションによるトークイベント、職能別の交流ができるブース、軽食・飲み物ありのオープンイベントを開催します🎉
■ 詳細・参加URLは次のポストにて
1
32
236
4
0
70
Happy New Year 2020!!
This is WebAR content powered by
@modelviewer
.
Please try this on your smartphone.
model-viewerを使用してモバイルブラウザでARできるコンテンツを作ってみました！
#webar
#webgl
#threejs
#b3d
#happynewyear2020
1
13
70
昨日のCASE STUDY第3回にご参加いただいた皆さま、配信をご覧になった皆さま、拙い発表をお聞きいただきありがとうございました。
昨日の発表資料を、イベント会場であるHue Coffee Roasterで朝食をいただきつつアップしております。
���イベント告知】
「CASE STUDY」第3回を5月12日に開催します！
クリエイターを志す学生、現役クリエイター、企業が知見を共有し、業界の発展を目指すイベントです。今回は、
@daijimachine
、
@_unshift
をゲストとしてお招きしSTARRYWORKSの
@kjkmr
と3名でエンジニアリングをテーマにお話します。
1
29
145
1
5
68
のWorksページの解析してくれた方がいたので、ちょっとだけ解説。
ここのサムネ部分は多数の立方体で構成されており (かつポリゴンの分割数が多い)、遷移のアニメーション時は各立方体が(厳密に言うと違うけど)球面に沿ってランダムに動いています。1/3
2
0
13
2
7
67
今日はSTUDIO DETAILSさんとこのサイト用いてレスポンシブのそれぞれの実装方法のメリット・デメリットを確認する勉強会をさせていただきました。
やっぱりプロジェクトの最初に仕様を決めて、プロジェクトメンバーでそれを共有しておくのが理想ですよね。
3
5
66
弊社、コーポレートサイトのリリース予定日を大きくすぎていますがまだ着手すらしておりません。
2
1
66
WebGL演出の実装を担当したgradation, Inc.コーポレートサイトがFWAに続いてCSS Design AwardsのWebsite of the dayを受賞しました！
Website Of The Day is gradation, Inc. | Meet New Color
by gradation, Inc.
@gradation__inc
, Takumi Hasegawa, Rei Nakamura, Shogo Tabuchi & Erika Mori
#webdesign
#webdev
#cssdaWOTD
#CSSDesignAwards
1
6
23
1
1
65
あけましておめでとうございます！
今年も年賀コンテンツを作ってみました。
新年の挨拶がノリノリで流れていくだけのものですｗ
今年もノリノリで乗り切っていこうという思いを込めて。本年もよろしくお願いいたします。
#HappyNewYear2021
#HappyNewYear
#webgl
#threejs
1
1
65
AwwwardsのSite of the DayもDeveloper Awardも初なので大変嬉しいです。ありがたいありがたい。
0
2
65
けっこう雑な実装です。
ロゴ (小)がたくさん並んでいる状態のものは、512 x 512のグリッド上にロゴ (小)画像を並べていて、色がついていないところも実は透明な状態で並んでいます (あえてグレーとかで表示しても良かったかもなぁ)。
ロゴ(小)の色をつけている場所は、ロゴ (大)とテキスト (Thank
0
67
293
0
2
65