Calamarify
@_calamarify
Followers
1,663
Following
3,454
Media
1,128
Statuses
21,244
Website / Front-end / WebGL Developer. たまに副業も受け付けています。
東京⇄広島
Joined April 2014
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Doom
• 491042 Tweets
Marvel
• 330936 Tweets
#UFC304
• 216846 Tweets
शिक्षक भर्ती
• 180801 Tweets
LINGORM 3ZAAP TTK
• 168935 Tweets
9STAR FILLED BLANK WITH LOVE
• 160842 Tweets
ワンフェス
• 151942 Tweets
Belal
• 121227 Tweets
Leon
• 119523 Tweets
Delhi
• 117923 Tweets
Kang
• 60140 Tweets
#超RIZIN3
• 54651 Tweets
Paddy
• 36777 Tweets
アイビスSD
• 36638 Tweets
#TheLoyalPinGalaPremiere
• 33398 Tweets
ANILPIN WORLD PREMIERE
• 30390 Tweets
YIN YIN
• 30359 Tweets
Tony Stark
• 30227 Tweets
दिल्ली सरकार
• 27431 Tweets
クイーンS
• 25407 Tweets
#シャニマスLIVEFUN_day2
• 17984 Tweets
モズメイメイ
• 17521 Tweets
伊能忠敬界隈
• 15735 Tweets
Alexa Moreno
• 14251 Tweets
コガネノソラ
• 14013 Tweets
#sumo
• 12991 Tweets
ボンドガール
• 10277 Tweets
みなさん知っていると思いますが、円を画面いっぱいにブワーってやる系のアニメーションをしたいならまずブラウザの対角線を求めて、それを円の直径に当てないと四隅なんかはみ出るよ。
適当に数字出すと絶対失敗するのでちゃんと計算しようねという話。
1
66
1K
CSSのプロパティは以下の順に書く様に心がけています。
レイアウト系を先に宣言した方が若干レンダリングが早くなるという話を聞いたので。
---
display 系
position 系
width 系
height 系
top 系
right 系
bottom 系
left 系
padding 系
margin 系
background 系
color 系
font 系
z-index
その他
5
153
708
コンポーネントの命名に迷ったらこれを読めって毎年言っている気がする。
VueでもReactでもAstroでもなんでも通じると思う。
1
69
570
ここの切り替えはjsでsvgのpathのd属性をシミュレートしてcssのclip-pathで指定してマスクしています。
初めてやってみたけど動くもんだなと思いました。
1
14
330
担当しました。
Astro+TailwindCSS+Alpine+microCMSで組んでます。
ビジュアル部分はシンプルながらもパフォーマンスを考えthree.jsを使って実装しています。
＜サイトを公開しました＞
●NTTデータ経営研究所 採用サイト
戦略コンサルティングとシンクタンクの二つの機能を有し、上流のコンサルティングを手掛けるNTTデータ経営研究所の採用サイトを制作しました。
#NTTDIOMC
1
9
136
2
22
292
久々にフロントエンドの実装をやりました。
うねうね動くメニューはSVGのアンカーポイント一点一点をアニメーションで制御しています。
実は2つのパスのモーフィングではないのです。
＜サイトを公開しました＞
●Crezit Holdings コーポレートサイト
「信用を最適化して、人の可能性を解き放つ。」をミッションに掲げるフィンテックスタートアップ、Crezit Holdings株式会社のコーポレートサイトを制作しました。
1
20
190
1
9
212
若いうちは楽をしないで努力しなさいってたまに聞くけど、楽をする為に努力しなさいって言い方を変えたほうがモチベーションあがるのでは？
1
79
203
THREE.jsを書くときは大体こういう感じで構築している。
画面サイズとかはglobal Uniformsに入れてモジュールに送りつけたりしてる。参照渡しなのでStageで更新すればモジュールでも変更を受け取れるので楽している。
GLSLをmodulesから切り離しているのはvertexとか使い回るものがある為。
1
7
199
ウェブ制作に関わる全ての人に向けたコンポーネントの名称とか役割とかをまとめた事典みたいなサイトあるべきだと思う。
共通認識をもてないまま物作ってるとコミュニケーションでロスが発生する気がする。
5
10
127
インタラクションやアニメーション周りの実装を主に担当しました。
もう1人の開発者が構築をして、その上にアニメーションやインタラクションだけを実装するというちょっと珍しいケースでした。
＜サイトを公開しました＞
●CREATIVE SURVEY サービスサイト
クリエイティブサーベイ株式会社が運営するアンケート・コミュニケーション・プラットフォームのサイトリニューアルに携わりました。デザイン、フロントエンド／バックエンドの制作を担当しています。
1
14
186
1
7
110
実は金曜日にスピッカートさんのオフィスにお邪魔していました。め〜っちゃ素敵なオフィスでした。野良猫も遊びに来ていました。
オシャレ過ぎて地元の方がカフェだと間違えて入ってくる事が結構あるのだとか。
3
8
111
エンジニア側でHTML,CSS,JSをこねくり回してアニメーション作るよりLottieとかRiveとかでjson吐いてもらって実装したほうがクオリティ高くね？と思う最近。
もちろん場合によるけども。
3
6
105
まじで一瞬でWPがlocalhostで立ち上がった。
プロジェクトごと？にWP本体がインストールされるっぽいので肥大化しそう。
DBはSQLiteを使ってwp-content内で管理していた。そんなことできるんだという驚きがあった。
個人制作とか小規模とか、非エンジニア向けにはすごい良さそうだなと思いました。
2
9
106
「気付かれないデザインこそ、デザイン」と佐藤卓さんが語られているけどこのマインドで開発していきたい。
0
10
98
もう古い本ですがちょっとはコードが書けるくらいの初学者のときにこれを読んだ瞬間に自分のスキルが特異点を迎えた気がしました。
とりあえずJSを書けるようになったけどこれから何をどうすればいいか分からない人にはいつもこの本を薦めている。
1
4
93
WebGL(THREE.js)勉強会やるかー。
THREE.js + scroll連動アニメーション + シームレスページ遷移の欲張りセットを教材にして。
今更感あるか。
3
0
84
ウェブデザイナーはコーディング出来るべきか否かという意見を見かけますが、
なんだかそれはコーディングが出来ないウェブデザイナーに対して威張りたいだけなのでは？とも感じました。
もちろん知識があるのは大事だし、実装出来るなら良いことではあるけど、それを押し付けるのは違う気がします。
4
14
77
これでどうだ。
2
5
67
リモートワークにおける自己流の心のケアとして、「お昼は絶対外食」「土日祝は死んでも仕事をしない」「オンライン上でも雑談をする」の2つかなー。
2
6
65
実は弊社でフォント作りました。
---
SHIFTBRAIN 20周年 『バリアブル仕様のコーポレートフォント＆グッズ』 制作の裏側｜SHIFTBRAIN
@SHIFTBRAIN
#note
0
3
63
社内Slackでクリエイティブを感じる物を投稿するチャンネルを作ったんだけど、最初は自分だけしか投稿してなかったのに、今はみんなが投稿してくれる様になって本当に嬉しい。
1
1
59
いつもと毛色の違う感じで実装しました。
子供向けということで少しでも楽しんでもらえるようにちょっとしたギミックを入れてみました。
クリックしたらチョコのカケラが飛ぶのは僕から提案してみて採用された案なのでちょっと嬉しかったです。
＜サイトを公開しました＞
●キャラパキ発掘恐竜チョコ 5周年特設サイト
発売5周年を迎えた「キャラパキ発掘恐竜チョコ」シリーズの特設サイトを制作しました。
1
8
86
2
5
55
募集始まりました。
レアです。
アニメーションやインタラクションやりたい人お待ちしてます。
バックエンドや開発環境は僕がサポートします。
1
7
55
4時間はまとめて時間取れないと効率良いコーディングができない。
細切れにMTGや差し込みがあると「今日はコーディング諦めて違う業務やろう」という心理になる。
1
5
53
「これを学べばリッチなWebアニメーション・WebGLを実装できて単価アップ！」みたいな情報商材が増えてきたけどそれだけでは課題は解決できないのでは？
やったことないような実装をどうやってアプローチしていくかみたいな内容の方が役立ちそう。
3
7
49
2
6
49
デザイナにはコーディングのことを意識してデザインをして欲しい気持ちもあるけど、それに囚われすぎて表現の幅を狭めて欲しくないもの本音。
0
4
44
position: sticky; を使いたいけど、親要素で overflow: hidden; を使いたいニッチなあなた！
親要素に overflow: clip; を使うと良いぞ。
0
0
43
久しぶりにWebGL(THREE.js)を書きました。
shaderも2枚くらい書いた。
＜サイトを公開しました＞
●西山製麺ドイツ法人 コーポレートサイト
昭和25年創業。札幌ラーメンの礎を築き日本のラーメン店3000軒と取引実績を誇る西山製麺。ヨーロッパに本物のラーメンを普及すべく2014年に設立された同社ドイツ法人のコーポレートサイトを制作しました。
1
11
108
0
0
42
意外とこういう細かいところまで実装している人は少ない気がしている
---
ボタンやアイコンやナビゲーションなど、クリック・タップ可能な領域のサイズを広くする実装方法のまとめ
0
9
40
🎉 勉強会に登壇します 👏
「THREE.jsを用いたKV作成について」
というタイトルで話します。
オンラインで開催なので広島県外の人もたくさん参加してください。先着30人だそうです。
---
広島フロントエンド勉強会 Vol.30 #ヒロフロ
1
8
40
登壇します。
オンラインでも視聴できるようです。
---
キャリア4年以上のフロントエンドエンジニアのあたまのなか【ひろクリギルド＃14】
1
5
40
実装を担当させていただきました
背景の線にはwebGL(THREE.js)を使用し,
お問い合わせフォームはVue.jsとPHPをつかって実装しております。
【Project】
SES事業や自社サービス開発、受託開発やデザイン事業、データ入力事業など、様々な事業を行うLiblock様のウェブアプローチにご協力させていただきました。
URL：
実績ページ：
0
4
16
0
3
40
アニメーション・インタラクション周りでディレクションしました！実は動き回りのディレクションは初めてやりました。
実装してくれたのは今年成人のソラくん(
@sora1406
)です！
エンジニア歴1年ちょっと？でガッツリ演出は初めて実装したようです！
<<実績のご紹介>>
株式会社LiKG様 | コーポレートサイト
価値を創造し、社会をエンパワーメントしていく
----------
弊社がwebサイト実装を担当させていただきました。
0
3
15
1
5
37
HTML → 難しい
CSS → 難しい
HTML + CSS → すごく難しい
JavaScript → console.log
0
0
34
かっこよく生きたいので、ビューポートを分ける際にSP,PCという命名をせずにMobile,Desktopという命名をする事をここに宣言します。
0
1
34
value / 2 よりも value * 0.5 派です。
0.5倍した方が処理が軽いって聞いてからそうしている。
重いシェーダ書いている時とかは意外と顕著にでる。
0
1
35
いつかやる勉強会ネタそのn「デザイナとどう言う連携でWebGLを導入しているか」「デザインファイルからWebGLに落とし込む時のアプローチの仕方」
2
3
34
ウェブデザイナのコーディング知識問題について…。
カッチリとしたサイトの場合にコーディングの知識があると結構助かる。
クリエイティブなサイトの場合は実装度外視でクリエイティブを爆発して欲しい。
それが最近の自分の中での落とし所。
0
0
32
サイトを実装している時に、動きをつけていない状態でも「このサイトかっこよくね？」って思えないと動きをつけてもしっくりこないことが多い。
そもそもで動きありきで考えると、盛り付け後に味が変わる料理みたいになる。調理中の味見が無意味になってしまう。
0
3
33
WebGL大体コレ説。
0
2
30
あんまり共感を得たことないのだけど夜の匂いっていいよね。
春の夜も夏の夜も秋の夜も冬の夜もなんか匂いがする気がしてなんだか深呼吸したくなる。
「今日はいい夜だ」って言ってもあまり共感されない。
2
0
29
Awwwardsってこうあるべきだと思う。
3Dゴリゴリよりも好き。
1
13
75
0
2
28
僕の持論ですが、ウェブサイトは現実世界の質のいいプロダクトの様に頑丈でないといけないと思っています。
決して安い買い物ではないはずなので、あらゆる操作に耐えられて使いやすいサイトじゃないとユーザもお客さんもしょんぼりしてしまいます。
1
3
27
実は入社してすぐにフルリモートになったのでこうやって皆と集まるのは初めてだったりします。
やっぱりオフライン交流は楽しいぞ。
＜20th Anniversary Partyを��催しました！＞
普段はフルリモートで業務を行っていますが、当日はスタッフ一同が会場に集結。 海外にいるメンバーはリモートで参加し、バリアブルグッズも全員に配布されました。 約2年半ぶりにみんなで顔を合わせて20周年を祝うことができた特別な1日となりました。
1
3
128
0
1
27
20歳になりました。
記念サイトも素敵なのでぜひ見てください
<20周年サイト公開のお知らせ>
シフトブレイン20周年サイトを公開しました。
360°SHOWREEL、VRオフィス、バリアブル仕様のコーポレートフォント、オリジナルグッズなどの企画をご紹介しています。プレゼントや参加型企画もご用意しました。詳細はサイトにてご確認ください！
1
28
250
0
1
27
SpicatoさんとARUTEGAさんと開発環境勉強会の話し合いをした。
あの案件のソースコードとか、普段のテンプレートとかをお菓子を食べながら見せ合いっこする約束をしました。
0
0
27
弊社ではデザイナーまたはエンジニアを募集しています。
CSS Animation, canvas2D, WebGLでご飯食べたい方は連絡してみてください。
0
6
26
新卒の時に受からなかった会社や組織の人達と今は普通に交流があって仕事をしているので面白い。
別にその時に第一志望に入れなくとも業界に居続ける事が出来たら勝手に繋がっていくんだなぁと。
多分同じ様な体験をしている人は結構いるはず。
1
0
24
あまりこのようなことを言ってはいけないけども、デザインがめちゃめちゃ素敵なのに実装が追いついていないサイトを見かけてしまうと「僕に実装させて！」って思ってしまう。
1
0
25
そういえば、「TailwindCSSで演出効果が多いリッチなサイト作れるんですね」みたいな事を言われますが、出来ます。
演出効果が厚い箇所は別途CSSでコンポーネント化してクラスを当てたりといい感じに分けています。
0
0
24
デザイナが聞きたいって思うエンジニアが登壇するイベントってどんなものがあるんだろう？
アニメーションとか演出周りなのかな？
それとも「こういうデザインだと実装しやすい」とかその類の話なのかな。
アイディアください。
4
4
25
そういえばこのパーティクルですが、一個一個をfor文で制御させていません。GPGPUでもないです。
1
0
23
地方に移住して良かったことは季節の移ろいを楽しめる様になったことかも。
季節の旬のものを食べて、草木の変化とかで「もう春だね」とか「そろそろ夏が終わるね」など。
金木犀が香ってきて秋だと感じるのもとても良い。
1
0
23
都合つけたので行きます。
会場で、久しぶりの人やはじめましての人に会えるのを楽しみにしています。
〓 12/1 (金) 師走忘年会@東京 のお知らせ 〓
今年の締めくくりに、会社の垣根を超えてクリエイター同士で乾杯しませんか？🍻 全国のデザインプロダクションによるトークイベント、職能別の交流ができるブース、軽食・飲み物ありのオープンイベントを開催します🎉
■ 詳細・参加URLは次のポストにて
1
32
236
1
0
23
アニメーション、インタラクション、WebGL使ってお仕事していきたいエンジニアさんが居たら連絡ください。
案件の紹介とかではなく、組織の紹介になります。
興味がありましたらDMでもなんでも連絡ください。
0
4
22
今年の抱負に地方の制作会社に遊びに行くというものを考えており、記念すべき1社目は福岡県の博多のstansさんにお邪魔してきました。
stansさんが運営されているDILLY DALLYというカフェにもお邪魔しました。次はどこの道府県の制作会社にお邪魔しようかな。
オフィス写真はバッチリ撮り忘れました。
1
3
22
iPod touch から TouchDesigner を経由してVEDAにフェーダーの信号送ってみた。
TouchOSC ってアプリ使いました。
1
3
21
今回はバックエンド担当しました。
管理画面とか細かいツールとか一般ユーザには見えない部分ですが使いやすくなればいいなーと思いながら作りました。
＜SHIFTBRAIN Webサイトリニューアルのお知らせ＞
年始のご挨拶にて告知しました通り、本日弊社のコーポレートサイトをリニューアルしましたのでお知らせいたします。
約5年ぶりとなる今回のリニューアルでは、18期目を迎えた今のSHIFTBRAINらしい佇まいを表現しています。
1
23
167
0
0
21
演出系のフロントエンド技術を教えるみたいなことをちゃんとしてみたいと思う反面、つよつよ実装者が溢れているこの世の中で需要ないのでは？と常に思って何もしないでいる。
3
0
21
ソニックジャムさんのモバイル時のUIが大好きです。
「これこれー」って感じがする。
0
0
21
娘に昇降デスクのコントローラの存在がバレたため、コーディング中に自動でデスクが上下するようになりました。
急にハードモード。
2
0
20
PHPにAstroを埋め込める様になったようだけど、結局サーバ側でNodejsが動かんといけないのでレンサバに納品することが多い身としては中々歯がゆい。
Astro 4.10 is out!
Introducing the experimental module astro:env -- fully type-safe environment variables, backed by a schema and available in any runtime.
Read more about it, and the rest of the release:
4
79
550
0
3
19
「WebGL(three.js)を導入したい！」ってオーダもらった時は、それを用いなくても再現できないかをまず最初に考えるようにしています。リッチな表現ができる反面、サイトのパフォーマンスに影響するので、本当にそのサイトに必要なのかを最初に話し合ったりします。
---
0
1
20
色々なアニメーションライブラリ触ったけど、「全部gsapでよくね？」ってなる。
重いとかなんだとか色々あると思うけど、それらをかなり気にするケースじゃなければ脳死で選択してもいい気がする。
0
0
20
「どうしてエンジニアになったのですか？」とよく聞かれますが、デザイナとして内定が出なかっただけです。
「デザイナとしてはいらないけどエンジニアとしては雇いたい」という旨をいくつも頂いたために方向転換をしました。
0
0
18
WordPressで大量のダミー投稿を入れる話とかしようかな。
プラグインでは解決できないACFとかカスタム投稿とかそこらへんにも対応できるやつ。
ここ数年、WP実装の時は管理画面でデータ入れることがない。
あとそのままローカルのDBをテスト環境に反映するやり方とかスクリプトとかの話とか。
2
0
19
友達100人できました
〓 師走忘年会 終了しました 〓
350人を超える大盛況の中、イベントが終了しました。おかげさまで熱気溢れる会になりました！
お礼とともに、当日の集合写真をお届けします！📸
イベントレポートはnoteで更新予定です。読んでいただければ幸いです。
みなさま、誠にありがとうございました！
0
11
127
1
1
19
こんにちは。
副業で良ければお手伝いします。
本業と平行になるため、お急ぎの案件はお手伝いは難しいです。
小中規模の案件でしたらお手伝いできます。
おやすみなさい。
0
0
18
登壇します。
テクいことは話しませんがどうやってデザイナとやっているかとかそんなことを話そうかと思います。
【情報解禁！3月イベント！】
フロントエンドエンジニアのキャリア4〜6年目の制作の進め方、チーム作り、キャリアについてをお話しします！
@ymnk4919
@_calamarify
@__hisho__
@echo_taiji
☑︎ オンライン・オフライン、同時開催 です ☑︎
0
15
23
0
2
17
Webデザインって見た目を整えるだけじゃダメよねー。
一見綺麗に見えても見た目だけで機能面や実装面を考慮されていないといつか破綻する。
実装は正直なんとでもなるけど使いにくさだけは事前に検証してもらわないとアカン気がした。
1
0
15
ものすごく久しぶりに掲載されましたー🙌
わーい🙌
1
0
16