中村 玄太郎

株式会社リクト マークアップエンジニア

[たむら しょうご / タムショー @tamshow_]

ツールのページをまとめ直しました！
よかったらご覧ください😊

無料のウェブアクセシビリティ試験記録・報告書作成ツール｜A11yWorkFlow
https://t.co/6F92UVxvA4

[しまぶー @shimabu_it]

みんな、今回の件でStudioを辞めて別のところに移行したいと思うだろ？

残念ながらStudioからHTML/CSS/JSを吐き出す機能はないし、デザインデータもエクスポートできない

[すねーく @azusaverz]

車の中でウエハース食った時

[こぎそ @kgsi]

ローディングアニメーションの決定版みたいなライブラリが出てた、いいなこれ。
https://t.co/BT23zONkmZ

[Emi@フロントエンドエンジニア🐾 @smem_risweb]

社内でも、AIに課金してる人の作業スピードがどんどん上がって、課金してない人の作業が相対的に遅く感じる現象が起き始めてる。
どこまでAIにお金をかけるかにもよるけど、自腹でAIに課金して生産性を上げ、その結果さらに仕事量が増える。
AIクレジットなくなったらどうするんだの境地。

[たむら しょうご / タムショー @tamshow_]

MacでもmiChecker。URL を入れるだけでアクセシビリティ検査できるツールを作りました

測定できないサイトがたまにあったりで現在、ベータ・先行受付中です！

フィードバック歓迎！ぜひ試してみてください😊
https://t.co/Fqv9PSe1SX

[tatsuki @tatsuki_nowave]

Netflixを1時間見るよりも、この2時間のスタンフォード講義を見た方がいいと言われている動画。

[angel @angeldot_]

ADIÓS POWERPOINT.

Claude 4.7 puede crear una presentación completa en 60 segundos.

Usa estos 6 prompts y mira la magia.

📌Guárdalo, te va a servir

[tatsuki @tatsuki_nowave]

Claude Code、インストールだけして放置してる人、めちゃくちゃ多いんですよね。

僕もそうでした。ターミナルが立ち上がって「はい、どうぞ」の状態でフリーズ。何を頼めばいいかわからないし、頼んでも「そのファイル見ないとわからないです」と返されて、結局ChatGPTに戻ってコピペ生活。
でもこれ、使い方の問題じゃなくてセットアップの問題だったんですよ。

Claude Codeは、立ち上げた瞬間は「あなたのことを何も知らない初対面の人」です。仕事も、使ってるツールも、文体も、よくやるタスクも何も知らない。毎回ゼロから説明するから疲れるし、返ってくる答えも浅いまま。
この「毎回ゼロから説明する生活」を永久に終わらせる5ステップを、記事にまとめました。

MCPでツールをつなぐ Google DriveやSlackをClaude Codeから直接見える状態にする。ここを先にやるのが最短ルート。

①CLAUDE.mdで自分のことを教える 自己紹介・文体・働き方の3ファイルを置くだけで、毎回セッションが「あなた専属」の状態で始まります。

②タスク管理の型を仕込む プランモード必須、todo.md、lessons.mdの運用をCLAUDE.mdに書いておく。これでAIが暴走しなくなります。

③よく使う作業をコマンド化する /draft-posts クライアント名 みたいなスラッシュコマンドを作っておく。毎週の作業がワンコマンドで終わるように。

④自動で走らせる仕組みを作る 定期実行やGitフックで、頼まなくても動く状態にする。ここでアシスタントから社員に昇格します。

⑤準備編にインストール手順も入れたので、まだClaude Code自体を入れてない人でもゼロから追えます。所要時間は全部で30〜40分。

僕の実感で言うと、X運用代行の投稿案作成が1本15分→1分、月次レポートが1社1時間→5分、業界リサーチが週3時間→10分。合計で月40時間、丸5営業日分が返ってきてます。
やらない理由がないんですよね。

[Tetsuro Miyatake @tmiyatake1]

HTMLを使わずに、リアルタイムで全ピクセルを生成するサービスのプロトタイプ「Flipbook」。

https://t.co/nwB82R6d1p

[Claude Code Studio @ClaudeCode_love]

実はMCPサーバーは、入れる順番が９割！！

いきなり30個入れると逆に混乱するので、
初心者は段階的に入れていくのが正解🙆‍♂️
順番全部書きます👇保存推奨。

𝗦𝘁𝗲𝗽 𝟭：基盤（まずここから）
・filesystem
・git
・memory
・sequential thinking
無料・公式・他の全サーバーの効果を底上げ。

𝗦𝘁𝗲𝗽 𝟮：自分のスタック
PostgreSQL使うならNeon MCP。
GitHub使うならGitHub MCP。
使ってるツールと1対1で対応させる。

𝗦𝘁𝗲𝗽 𝟯：生産性ツール
Notion・Slack・Gmailを接続。
Claudeがコミュニケーションハブになる。

𝗦𝘁𝗲𝗽 𝟰：データアクセス
Firecrawl・Browserbase・Apify。
強力だけど使う場面は限定的。必要になったら入れる。

基盤→スタック→生産性→データ。
この順番を守れば迷いません🔥

[駒居康樹｜Levela代表取締役 @koki_komai]

あと10万インプくらい伸びたら消したほうがいい。

[ごくう @ComagerTon79278]

Claude Codeを使うなら「寝癖ついたら直す」ぐらい当たり前にするべきことがあって、それは𝗙𝗶𝗻𝗱 𝗦𝗸𝗶𝗹𝗹𝘀というスキルをインストールする事。

これは「～をやりたいので良いskillsはありますか？」って聞いたら大量のskillsの中から適切なものを提案してくれる。

YouT〇ube自動運用システムで爆益を出せているのは、これで適切なskillsをインストールできているためやし、これだけはインストール必須。

Claude Codeってskillsゲーと言われるほど大事な要素やし、自分で作るのが大事なんやけど、まずは既にあるものを使ってみる事からよね。

インストール方法↓

[かずなり | 生成AI活用術 @MacopeninSUTABA]

「Claude Code を Level 5 まで育てたら、開発が『指示と確認だけ』になった」が有益。

実ファイル構成と育成プロセスを段階的に徹底公開している。Claude Codeを"部下"として仕上げるための具体的な設計図が詰まった必読の一本。

こちら👉
https://t.co/yh3MZg9LXJ

[なかじ / 中島大介@ウェブ職TV @ds_nakajima]

これ全部わかる？

もしひとつでもわからないものがあるんだったら、Claude Codeを使う前に、ちゃんと勉強した方がいい。

・IDE
・VSCode
・開発コンテナ
・環境変数
・.env
・mkdir
・rm
・.gitignore
・Git
・GitHub
・フロントエンド
・バックエンド
・フレームワーク
・データベース
・キャッシュ
・API
・Cookie
・IPアドレス
・DNS
・暗号化
・秘密鍵
・トークン
・SSH
・FTP
・Docker
・デプロイ
・デバッグ
・ログ

本来はエンジニアの領域(というには簡単すぎてITリテラシーの範囲内に収まるもの)なんですが、おそらく知らない人が多いのでは？

これらはエンジニアの初歩の初歩の手前くらいのものだと思いますが、非エンジニアにとっては馴染みのないものが多いと思われる。

本来は踏み込めない領域にAIの力で、誰でも踏み込めるようになった結果、最低限の知識がない人をよく見かける。

しかも、わからないならAIに聞けばいいけど、わからないから仕方ないで「YES!!」を連発している人が多いと思う。

別に上手に正確に説明ができる必要はないけど、なんとなく「ああこういう感じのものでしょ」くらいは言えないと普通にまずいと思った方がいい。

[けんすう @kensuu]

Claude Desgin(に限らずですが)、資料をいきなり作ってもらっても精度が低いので、

・まずはデザインのテンプレートを作る(これは、例えばWebサイトで使っているdesign.mdとかでもいいし、なんならデザイン系のファイルそのままとか.penファイルとかスクショでもいい)

・そこから「資料とかで使われそうなフレームワークのページをひたすら作って」という

・それで作ったたくさんのテンプレートを選びながら中身は自分で考えていく

・その中身を見て、足りていない部分を補足してもらったり充実するのにAIリサーチを使う

みたいな順番でやった方が効率が良くて早い気がします。全部がこれでなんとかなるわけではないんですが、資料の30％くらいは、これでやった方が自分でやるよりも良い内容になったりします。

世界中の優秀なフレームワークを使ったスライドを出してもらって、それをどう使うか？を考えた方が早いケースが多い。

[paji.eth @paji_a]

Claude Opus4.7、もう怖いんよ…

[Sadao Tokuyama @tokufxug]

HTMLを直接3Dの質感として描画できる新機能「html-in-canvas」

複雑な操作画面をWebブラウザの標準機能でそのまま3D空間へ配置できます。

現在はChromeの試験運用機能ですが、Web3DのUI制作を劇的に効率化する可能性を秘めた期待の技術です。

[中村 玄太郎 @lct_nakamura]

深いな…

[ゆうたろう｜コーダーの"できた"を広げる伴走者 @hirataro_89]

コーダーのみなさん、
JavaScriptを1つのファイルにぜーんぶ書いてません？

SCSSは細かく分けるのに
なぜかJSはscript.jsに全部書き殴ってしまいがち...

■ 1つのscript.jsに全部書くと…

・どこに何があるか分からない
・修正のたびにスクロール地獄
・バグの原因特定も困難
・別案件で再利用もしづらい

完全に〝沼〟にはまります😇

■ ファイルを分けておくと？

/js/
├─ _drawer.js
├─ _slider.js
├─ _modal.js
└─ script.js

script.jsで必要なやつだけ
importすればOK。

import "./_drawer.js";
import "./_slider.js";
import "./_modal.js";

✅️読みやすい
✅️修正しやすい
✅️バグも発見しやすい
✅️再利用がめちゃくちゃ楽
✅️コードレビューもしやすい

分割するだけで
ほんとに扱いやすくなる。

JSがちょっと苦手な人こそ、
SCSSと同じようにまずは
〝パーツごとに分ける〟から始めてみて😌