𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | クオートワークス

QUOITWORKS(
Front-End Develop / Direction / Nursing / Blender
Tech Blog : Zenn (

[𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | クオートワークス @kon_coder]

フル実装 & メインビジュアル3Dモデル作成担当致しました！
弊社では珍しく、動画ではなく3DモデルをThreeで盛り込んだサイトです！
閲覧の妨げにならないように、インタラクションをギリギリまで削ったり
慣性スクロールを、読み物系ページではかなり弱めたり
動きはありつつ、邪魔じゃないラインの調整を
ちょっと頑張りました！！
皆様ありがとうございました！！
みてもらえると嬉しいです😊
https://t.co/qnBPbsCEEK

[ムラマツヒデキ｜クオートワークス @muuuuu_chang]

＜実績紹介＞
プロジェクト支援とAI導入で組織変革を先進的に行う企業「クロスバリュー」の総合的なブランディングを弊社で担当いたしました！

対応範囲：ブランディング/ロゴ/メインコピー制作/情報設計/コピー開発/Webデザイン/実装

⚫︎URL
https://t.co/XVtBaCnr3E

[𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | クオートワークス @kon_coder]

Microsoftの「NLWeb」の話、けっこう面白かった！

Webサイトがブラウザで見られるだけじゃなく、
AIエージェントから質問される場所にもなっていくかも
今も大事だけと、これからさらに
大事になりそうなのは

・セマンティックHTML
・https://t.co/IR6YZNbPwvなどの構造化データ
・情報の分類や整理
・AIに誤解されにくいコンテンツ設計

見た目のUIだけじゃなく、「AIにも正しく読まれるサイト」を意識していきたい！

参考サイト
https://t.co/2jmRzYOHWy

[𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | クオートワークス @kon_coder]

💡Pixel Glitch

・画像の上に表示用のメインcanvasを重ねる
・裏側に非表示のscratch canvasを1枚用意する
・元画像をscratch canvasへ小さいサイズで描画する
・scratch canvasをメインcanvasへぼかさず拡大描画する
・scratchの1pxが画面上では大きなピクセルとして見える
・scratch canvasのサイズを徐々に大きくする

結果として、大きいピクセルから細かいピクセルへ変化する

[𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | クオートワークス @kon_coder]

@bright_moco Thank you so much!
Your motion was really inspiring — I learned a lot by trying to recreate it!

[𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | クオートワークス @kon_coder]

とても気持ち良い動きだったので
真似させてもらって、つくってみた！

綺麗なマーブル作るの至難すぎるぞ！

[Bright Agency @bright_moco]

Quick process behind this 2D abstract wave.

The effect itself is simple — the feeling comes from motion and timing.

[𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | クオートワークス @kon_coder]

仕事上でよく言及される（かもしれない）
「実況」と「説明」の違いについてまとめてみた！👀

相手に何かを伝えるときは
目的を意識して、適切な情報を
渡せるようにしたいものです！💪

それ、説明じゃなくて実況かも。Web制作で意識したい「伝える」と「説明する」の違い https://t.co/O2DRAi8szz

[𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | クオートワークス @kon_coder]

⚫︎ホバーしたら文字が揺れる問題

CSSの scale ホバーで文字が微妙に揺れる時
will-change: scale; で改善することがあります！

理由は、ブラウザに「この要素はscaleが変わる予定」と事前に伝えられるから
(まさに、will-change)

通常は hover した瞬間に描画方式が切り替わり
テキストのアンチエイリアスや
サブピクセル位置がブレることがある

will-change を付けると
事前に合成レイヤー化されやすくなり
hover前後の描画切り替えが減る

ただし万能ではなく
使いすぎるとレイヤーが増えるので
メモリ消費が増えてしまいます！
使い所は、要検討ですね🤔

← will-changeなし
will-changeあり→

[トム・イシカワ（石川 智規） @tomonorix0805]

＼俺とシテイしないかっ！／

どうもこんにちは、見習い師匠のトム・イシカワです。ぼんやり企画を眺めていたらいつのまにか手を挙げていたみたいです。トムのトム性を見出せたあなたと送る師弟エンターテインメントがここに開幕です🕺🪩

このためにStudioで応募フォームを作った師匠を褒めてください

[𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | クオートワークス @kon_coder]

@Chanblog1993 低浮上ちょっと復活！！！

[𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | クオートワークス @kon_coder]

今度、妻とディズニーランドに行くのですが
諸事情であまりアトラクションには乗れないので
それでも楽しめるようにサイトを作ってみた！

犬の散歩をしながら30分くらいで、
要件定義から公開までできで
今更ながら、バイブコーディングの威力をひしひしと感じている。。🐕

個人で使うものを作る分には
スマホぽちぽちで作るくらいでもはや
いいのでは。。？🤔

⚫︎サイトの概要
・隠れミッキーを探す宝探し的コンセプト
・隠れミッキーの場所について3段階のヒントを提示
・答え合わせとして、参照URLを表示
・隠れミッキーを見つけたら写真を撮ってローカル保存可能
・暇つぶしに読む、豆知識、トリビアを70話用意

⚫︎作った流れ
犬の散歩に行く
AIにやりたいこと伝えて、要件定義書作りたいので質問してという
定義書確認して、実装してもらう
デプロイしてもらって中身確認
修正してもらって完成

(とても非公式なので、パブリック公開は控えます🤛)

[𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | クオートワークス @kon_coder]

@tomonorix0805 まさに、AIの台頭でますます90 : 90の法則感が強まっている気がします！！笑
(AIが90%作って、残りの10%を人間が90%の時間をかけてやる)

https://t.co/Z1Ps7LzxZH

[𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | クオートワークス @kon_coder]

@momovvw 時間なくて突貫で作ってもらったけど
意外と形になってびっくりしてる！！

[𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | クオートワークス @kon_coder]

⚫︎共通UIをページごとに変え過ぎてはいけない理由

ヘッダーナビやサイドナビは、
ユーザーがサイト内を行き来するときの「判断の手がかり」になるUI

ページごとに位置・順番・見た目が大きく変わると、内容を見る前に「このページではどこを見ればいいか」を再確認する必要が出てしまう 🤔

ユーザーが迷うというより、
本来コンテンツ理解や比較検討に使ってほしい注意力を、UIの把握に使わせてしまうのが問題

もちろん、現在地表示や下層ページ用のサブナビ追加、LPでの簡略化はあり

共通UIは、ただ見た目を揃えるためのものではなく、
ユーザーが迷わず目的に進むための土台。
だからこそ、一貫性は大事にしたい！

参考：W3C / WCAG 2.2「Consistent Navigation」
https://t.co/6RPb0IllLC

[𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | クオートワークス @kon_coder]

実装した後に、リンク切れとかリンクラベル忘れとか
リンクチェックするの、地味に大変なので
Chrome拡張機能作ってみた！

アラートでた要素にハイライトできるようにしたのと
JSONとCSVでエクスポートできるので
お手元のコーディングエージェントに投げて
修正するのがちょっと楽になるかも👊👊

[𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | クオートワークス @kon_coder]

Figmaで何のカラーコンポーネント使ってるのかとか
フォントの種類何があるのかとか
サクッと知りたい時があったので
プラグインにしてみた！

実装するときに、種類探して変数に登録していくの面倒だったので
ちょっと楽になるかも🤏

[𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | クオートワークス @kon_coder]

Chrome148からvideoタグにloading属性が使えるようになるのか
今まではJSでの遅延読み込みが必要だったけど
ちょっと楽になるな！

他の属性と合わせて以下のような形が
今の所のベストなんじゃないかと考えている🤔

⚫︎FV動画
<video autoplay muted playsinline preload="auto" poster="/poster.jpg"
src="/movie.mp4"></video>

⚫︎下層・スクロール後に出る装飾動画
<video loading="lazy" autoplay muted playsinline preload="metadata" poster="/poster.jpg" src="/movie.mp4"
></video>

https://t.co/9L3D6xwO7G
https://t.co/IeIP1qlYCF

[ムラマツヒデキ｜クオートワークス @muuuuu_chang]

AIで制作することにおいて、会社としてどう考えているのか、公式に発信する必要があると思ってて、1ヶ月くらいかけてまとめました。

⚫︎AIでWeb制作、自社で進められる範囲とプロに頼む価値がある3つの領域。丸2年以上AIを課金した制作会社が思うこと。
https://t.co/qVEb12RuJr

[ムラマツヒデキ｜クオートワークス @muuuuu_chang]

2日で100名こえ！ありがたい！張り切っちゃう！
勝手に資料作ってタイムオーバーさせちゃおうかと思っています。

⚫︎2/14、21時から。
デザインが2026倍 楽しくなる方法 -Desig-win 2026クラファンキックオフイベント-
https://t.co/IzNuwJFj6o

[ムラマツヒデキ｜クオートワークス @muuuuu_chang]

デザインって「自分との戦い」だけど、
自分の品質のことばっか考えてても弱くて、
ユーザーは当然として、
依頼主の「ドキュメンタリー」を知ったり
想像することでエネルギーに変わって
強くなると思うのです。

⚫︎山口一郎さんの配信から学ぶ、デザインとライブの共通点
https://t.co/TS8EiWhP5V

[𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | クオートワークス @kon_coder]

自戒
人生の上での曖昧さは趣として必要だと思うけど
ビジネス上は、徹底排除したい
曖昧さセンサー磨きたい🫠

https://t.co/gRnokLyqk0

[𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | クオートワークス @kon_coder]

Yahooのテキスト解析のルビ振りAPI使って
supabaseに入れた漢字入り単語を
ひらがなに変換、ができた！！
これ結構便利だな

https://t.co/00bEJRtsxZ