@herablog profile picture
Hara Kazunari 🟢 @herablog

Software Engineer, Tech Lead of Ameba Design System Spindle, CyberAgent Developer Experts,📕@wdpress 109(CDN), GitHubの教科書, CSS3逆引きデザインレシピ he/him/his

Joined August 2009
  • Tweets 2,220
  • Following 510
  • Followers 1,576
167 Photos and videos
Pinned Tweet
Hara Kazunari 🟢@herablog
6 Jun 2025
先日リリースされた「Figma Dev Mode MCP Server」を使って、Amebaのデザインシステム「Spindle」との連携を検証してみました🤚 課題だったアウトプットの精度が大きく改善されており、実際のデザイン・開発フローにうまく組み込めそうです🟢 developers.cyberagent.co.jp/…

Spindle MCP で変わるデザインシステムの開発 ~ Figma 連携で実現する超高速開発 ~ | CyberAgent Developers Blog

みなさんこんにちは。Amebaデザインシステム「Spindle」テックリードの原 ( @herabl ...

developers.cyberagent.co.jp
2
40
335
23,181
Hara Kazunari 🟢 retweeted
Chrome for Developers
@ChromiumDev
May 21
Hunting down elusive runtime errors by hand is a massive time sink → goo.gle/4ww17L8 @ca_developers resolved this bottleneck for their Ameba blogging platform by replacing manual debugging with Chrome DevTools for agents. By integrating these tools, they built a reliable, fully automated testing flow that eliminates manual overhead entirely. #GoogleIO
2
4
31
5,340
AI時代の開発者像。AI活用が前提にあり、ソフトウェアエンジニアリングのスキルを軸に専門領域外やエンジニアリング以外の領域にも広げていく。 #google
​「The T-shaped developer」と題された、AI時代のエンジニアのスキル構造を示すT字型の図。最上部に共通レイヤーとして「GenAI usage（生成AIの活用）」があり、その下に横軸として「Adjacent engineering（隣接するエンジニアリング領域：Increased breadth）」と「Non-engineering（非エンジニアリング領域：Increased breadth）」、縦軸として「Core software engineering（コア・ソフトウェアエンジニアリング：Increased depth）」が配置されている。

ALT ​「The T-shaped developer」と題された、AI時代のエンジニアのスキル構造を示すT字型の図。最上部に共通レイヤーとして「GenAI usage（生成AIの活用）」があり、その下に横軸として「Adjacent engineering（隣接するエンジニアリング領域：Increased breadth）」と「Non-engineering（非エンジニアリング領域：Increased breadth）」、縦軸として「Core software engineering（コア・ソフトウェアエンジニアリング：Increased depth）」が配置されている。
3
348
Hara Kazunari 🟢 retweeted
木村賢(Satoshi Kimura)
@kimuyan
May 20
Google I/OでAmebaの事例紹介。
1
16
2,871
AmebaブログのWebMCP事例がセッションに登場✨ 過去記事の取得、絵文字挿入、ハッシュタグ設定等、ブログ執筆のアシストとして活用できます🙌 #googleio
11
270
ChromeエリアのBuilt-in AIブースではAmebaブログ執筆の活用例が体験できます💫 #googleio
8
262
AI時代のCSS IS AWESOME #googleio
11
373
Hara Kazunari 🟢 retweeted
Microsoft Edge Dev
@MSEdgeDev
May 19
Modern Web Guidance is now in early preview 👀 AI coding agents often rely on legacy patterns → bloated JS. @googlechrome Edge are teaming up to fix that-helping AI generate cleaner, modern code using the latest web platform additions. Better web apps for the whole web community. Check out the public repo: msft.it/6015vpOgt

GitHub - GoogleChrome/modern-web-guidance

Contribute to GoogleChrome/modern-web-guidance development by creating an account on GitHub.

github.com
2
62
360
21,771
Amebaでは、ブログ記事執筆をアシストするためにオンデバイスAI、WebMCPに対応したChrome Extensionを実験的に公開しています💫 ストアページ内の注意事項をご確認のうえ、お試しください🙏 chromewebstore.google.com/de… #googleio

Chrome for Developers
@ChromiumDev
May 19
The WebMCP API will enter origin trial starting in Chrome 149 → goo.gle/4u57Wlf It's a proposed web standard that lets you expose structured tools, like JS functions and HTML forms, to browser-based agents, enabling them to know exactly how and where to interact with your site. #GoogleIO
3
13
2,343
Chrome DevTools for agents (MCP)を @AmebaSpindle で活用した例は以下の記事にまとめられています🙌 developer.chrome.com/blog/au… #GoogleIO

How CyberAgent achieved fully automated runtime error fixing using Chrome DevTools MCP  |  Blog  | ...

Learn how CyberAgent achieved fully automated runtime error fixing using Chrome DevTools MCP.

developer.chrome.com
3
11
929
Hara Kazunari 🟢 retweeted
Chrome for Developers
@ChromiumDev
May 19
Ensure your coding agents build apps that are modern, fast, & secure by default → goo.gle/3PcqfGj We just announced Modern Web Guidance at #GoogleIO. By injecting AI-ready skills and modern features—complete with Baseline Widely Available fallbacks—it ensures your agent keeps up with the latest web features🧵
5
31
141
37,334
Gemini in Chrome の日本提供開始に合わせて、Amebaブログを利用した例を紹介いただきました🙌
Google Japan
@googlejapan
Apr 20
Replying to @googlejapan
行ったり来たりの「タブの切り替え」はもう不要🙅 複数のタブで開いている情報を、Gemini が簡単に要約・比較します。 例えば、旅行先のホテル選びや、買い物のアイテム比較などがよりスムーズに。
0:36
2
9
2,053
記事を書きました✋ Amebaデザインシステム「Spindle」における、コードとデザインの間を、AIエージェントを介して自由に行き来する開発フローを、最近の事例とともに紹介しています🟢💫 ぜひご覧ください🙌 developers.cyberagent.co.jp/…

コードとデザインを自由に行き来する ー Figma MCP × AIエージェントがもたらしたSpindle開発フローの変化 | CyberAgent Developers Blog

Figma MCPやCursor、Claude CodeといったAIツールの浸透によって、Ameba ...

developers.cyberagent.co.jp
25
200
10,524
Hara Kazunari 🟢 retweeted
Ameba Accessibility Team@AmebaA11Y
26 Dec 2025
＼2025年、AmebaLIFEのアクセシビリティ振り返り📝🐍／ 🟢 合理的配慮のお問い合わせ窓口を新設 🟢 AIによる画像の代替テキスト自動生成🤖 🟢 Spindleコンポーネントのa11y改善 🟢 交流会・登壇・社内ゼミの開催 developers.cyberagent.co.jp/…

2025年、AmebaLIFEのアクセシビリティを振り返る | CyberAgent Developers Blog

AmebaLIFE事業本部でエンジニアをしている湯本航基（@yu_3in）です。 2025年もAme ...

developers.cyberagent.co.jp
5
9
1,478
Amebaデザインシステム「Spindle」の今年の開発を振り返りました🧑‍💻🟢 ・Spindle MCP ・Design to Code (w/ Figma MCP) ・AI 時代に向けたリポジトリ整備 ぜひご覧ください💫 🗒️: developers.cyberagent.co.jp/…

Spindle 2025: AI エージェント × デザインシステムで変わる Web 開発 | CyberAgent Developers Blog

Podcast こんにちは、Amebaのデザインシステム「Spindle」でテックリードをしている原 ...

developers.cyberagent.co.jp
9
121
5,890
Hara Kazunari 🟢 retweeted
CyberAgentDevelopers
@ca_developers
25 Dec 2025
/／ 🗓️2026.3.20 - 21 ⚡️Web Speed Hackathon 👑0.1秒の壁をぶち破れ! 最速を冠するのは誰だ!? \＼ 📱今年の題材は「架空のSNSアプリ」 ⚡️どこまでパフォーマンス改善できるか 💻今回も一般参加者と学生で競技同時開催 👇以下よりエントリーお待ちしています👇 cyberagent.connpass.com/even…
23
64
26,806
Chrome DevTools MCP を使って、Ameba のデザインシステム「Spindle」のランタイムエラー修正を自動化したケーススタディが公開されました🧑‍💻🟢✨ developer.chrome.com/blog/au…

CyberAgent が Chrome DevTools MCP を使用してランタイム エラーの完全自動修正を実現した方法  |  Blog  |  Chrome for Developers

CyberAgent が Chrome DevTools MCP を使用してランタイム エラーの完全自動修正を実現した方法について説明します。

developer.chrome.com
2
10
1,074
いよいよ明日 11/29 (土) 開催です！🎉 MTDDC Meetup TOKYO 2025 にて、Amebaデザインシステム「Spindle」の今年の進化についてお話しさせていただきます🟢 1年間の取り組みや変化を凝縮しました。 参加されるみなさま、どうぞよろしくお願いいたします💫 #MTDDC mt-tokyo.net/mtddc2025/speak…

原 一成 氏｜登壇者紹介｜MTDDC Meetup Tokyo 2025【11/29（土）開催】

2025年11月29日（土）開催予定の「MTDDC Meetup Tokyo 2025」の「登壇者紹介：原 一成 氏」

mt-tokyo.net
5
12
1,040
#Offers_DeepDive でお話させていただいたSpindle MCPのスライドを公開しました🙌 MCPで変わるAmebaデザインシステム「Spindle」の開発 speakerdeck.com/spindle/how-…

MCPで変わる Amebaデザインシステム「Spindle」の開発

この資料は、**Amebaのデザインシステム「Spindle」**と、その開発を加速させる**「Spindle MCP」**について説明しています。Spindle MCPは、**コンポーネント情報、デザインに関するルール、アイコン、アクセシビリティチェックリスト、Design Docテンプレート**など…

speakerdeck.com
12
121
6,037
🎉本日19時より開催🎉 @herablog 氏、 @yukukotani 氏ご登壇🎤 ✅AI時代におけるUI/UX実装やデザインシステムのあり方がわかる ✅実際の業務におけるMCP活用事例が具体的に分かる ✅MCPを活用したUI/UX実装の最新事例が学べる #Offers_DeepDive ⏬お申し込みはこちら⏬ offers-jp.connpass.com/event…

どこまで簡略化できてる？サイバーエージェント／Ubieに聞く　MCPで変わる爆速UI/UX実装 (2025/09/04 19:00〜)

# 👩‍💻アーカイブ動画配信中 ## こちらより、アーカイブ動画を配信中です # 📢イベント概要 MCPを含むAIの進歩は目覚ましく、多くのエンジニアが開発効率化への期待を抱いているでしょう。しかし実際には、全てを自動化するまでは難しいと感じている方も多いのではないでしょうか。特にフロントエンド開発におけるUI/UXは、結局手動での調整や再実装が必要で時間がかかってしまうと感じている方...

offers-jp.connpass.com
1
1
3
455
Hara Kazunari 🟢 retweeted
Yuku Kotani / Ubie
@yukukotani
13 Aug 2025
9/4(木) の #Offers_DeepDive で話します！ 融けるエンジニア/デザイナー境界と、企画フェーズから変わる開発プロセス、それらを支える生成AI時代のデザインシステムなどの話をします
Offers(オファーズ)｜AI時代のエンジニア転職プラットフォーム
@Offers_jp
13 Aug 2025
【サイバーエージェント・Ubie登壇！】新規イベント 9/4(木)19:00~ MCPで変わる爆速UI/UX実装！🚀 @herablog 氏 @yukukotani 氏に聞く MCPでどこまで簡略化できる？ デザインシステム活用の実践者が語る リアルな運用事例と限界値を探ります🎤 offers-jp.connpass.com/event… #Offers_DeepDive
1
11
28
4,650
Load more