Honda | Spindle

AmebaLIFE プロダクト戦略室所属 Design System Spindle デザインリード インターフェースデザイナー

[Honda | Spindle @Windom40]

Spindle関連の個人制作物まとめ

Spindle UI定義(AmebaデザインシステムSpindleのUI Library)
https://t.co/g07W8YWMUH

カラーパレット設計
https://t.co/znGcQpGoCq

アイコン設計
https://t.co/NurRVapMo7

モーション設計
https://t.co/fr9I43t3c6

[Honda | Spindle @Windom40]

@NakajimaKaichi ありがとうございますmm

[Honda | Spindle @Windom40]

【 単著で、本を出版します。】

タイトルは
表層UIデザインの解剖学──ユーザーの知覚に訴える「見た目」の作り方
です。

これからの時代に表層のUIデザインがどのような価値を持ち、UIデザイナーはどう振る舞っていくべきなのか、をデザインシステム等制作した経験と考察を踏まえて執筆しています。

7/8発売で、各種サイトで予約受付中です、何卒よろしくお願いします。

[技術評論社販売促進部 @gihyo_hansoku]

【新刊】2026年7月8日発売『表層UIデザインの解剖学──ユーザーの知覚に訴える「見た目」の作り方』本体2,600円+税，本田雅人 著，「当たり前」を超えるデザインを生み出せるのは人間であるhttps://t.co/jP7ACKMfb2

[Honda | Spindle @Windom40]

【 単著で、本を出版します。】

タイトルは
表層UIデザインの解剖学──ユーザーの知覚に訴える「見た目」の作り方
です。

これからの時代に表層のUIデザインがどのような価値を持ち、UIデザイナーはどう振る舞っていくべきなのか、をデザインシステム等制作した経験と考察を踏まえて執筆しています。

7/8発売で、各種サイトで予約受付中です、何卒よろしくお願いします。

[Honda | Spindle @Windom40]

https://t.co/T1N4mTH8jS

[こぎそ @kgsi]

CyberAgent Amebaの本田さん @Windom40 による「職域を超えるデザイン」。
Spindle（デザインシステム）の運用者であるデザイナーがCursorを使ってアニメーションまで自ら実装しきった事例で、ワークフローが具体に開示されている。

印象に残った点👉
1️⃣ デザイナーが実装に責任を持つことで「遠慮による90〜95点止まりの妥協」が消える
2️⃣ About Usの曲線アニメを3パス分割×長さ比例のeasingで連続化——詰めが効くのは越境ゆえ
3️⃣ 一方でコードレビュー・DOM設計・Safariのレンダリング問題は最終的にエンジニアの経験値が必要

越境＝丸投げではない、という線引きが明示されているのが誠実だった。

「職域が溶ける感覚」、自分もFigma MCP × Claude Codeで日々感じている領域と地続き。デザイナー側の越境事例、他にどんなパターンで進めてる人いるか聞いてみたい。

[Ameba Design System Spindle @AmebaSpindle]

🟢新着記事のお知らせ

Spindleデザインリードである @Windom40 がAI時代のデジタルプロダクトデザインを実体験に基づきながら考察しています。

実装の違和感を見過ごさず、見つけた粗は自分で直す。AI活用で実現したリアルな開発体験が書かれています。

ぜひご覧ください✋
https://t.co/9lAZ3wXiTY

[Honda | Spindle @Windom40]

https://t.co/XUqYqgufWx

[Honda | Spindle @Windom40]

「AmebaLIFE事業本部公式サイト」を制作しました。

[Honda | Spindle @Windom40]

最近思ったことについて、記事を書きました。
https://t.co/II8sBAPeww

[Ameba Design System Spindle @AmebaSpindle]

🎊 Happy New Year 2026 🎊

新年あけましておめでとうございます🎍🌄
Spindleより、謹んで新春をお祝い申し上げます💚

本年もAmebaデザインシステム「Spindle」をよろしくお願いいたします🧍🟢

[Honda | Spindle @Windom40]

https://t.co/jbv5kNtDhM

[Honda | Spindle @Windom40]

新年初アウトプット

[Honda | Spindle @Windom40]

あけましておめでとうございます

[Honda | Spindle @Windom40]

2025お疲れ様でした

[サイバーエージェント Creative PR @ca_creative_PR]

／
UI/UXデザインを基礎から学びたい社会人向け
リスキリングアカデミー「Creative Switch」 を開催します🎊
＼

全10回の講義やワークを通じて、UI/UXの基礎からアプリデザインができるレベルまでを段階的に学べるカリキュラムです🙌
本日より受講者の募集を開始いたします。

☑️受講者のみの特別選考フロー
☑️受講料無料！ツール費用も当社負担
☑️実践的なカリキュラム&当社クリエイターによる特別講義やフィードバック機会

▶︎詳細&ご応募はこちらから
https://t.co/D0OSPYLu9T

[Honda | Spindle @Windom40]

お邪魔します。

10月に開催された「Schema by Figma 2025」について喋ります。

[Figma Japan @FigmaJapan]

Schema by Figma: Tokyo Recap
Figmaのデザインシステム関連の新機能をご紹介!
📅 12月3日 18:00 (オンライン配信)
https://t.co/Tz2edb8Jpi

ゲストにAmebaのデザインシステム Spindle のデザインリード本田さん @Windom40 が出演決定！今回の発表内容への期待や利点を語っていただきます。

[Web Designing編集部｜マイナビ出版 @WD_editors]

📣Web Designing 8月号　6/18（水）発売📣

今号のテーマは…
第1特集　Figmaとデザイン
第2特集　デザインリサーチの基礎と実践

📕目次

ーーーーーーーーーーーーーーーーーーーーーーー
第1特集 Figmaとデザイン
ーーーーーーーーーーーーーーーーーーーーーーー

[レポート] Figma Config 2025

[座談会] Figmaは制作現場の何を変えたのか？
綿貫佳祐 @kskwtnk @Qiita）/ 石井克尚 @kuniorock_ @GoodpatchTokyo / 坪内陽佑（フェンリル株式会社 @fenrir_official

_Figmaが“ゲームチェンジャー”である理由

[事例]
_共同制作を支える運用テクニック
山口暁亭 @akinaga / 西村愛美 （株式会社レアゾン・ホールディングス @Reazon__s

_「Spindle」に学ぶ 新機能の取り入れ方
本田雅人 @Windom40 / 原一成 @herablog @ca_creativebase

_“自動実装”に向けたMCP活用
渡辺智保子 @chihokotaro / 江崎広太 @kke1229 @UbieCorp_JP

_「Sparkle Design」に見るFigma × デザインシステム構築術
甲斐田愛華 @aik__daccaii / 乗田拳斗 @nrtknt / 矢吹ナスカ @nazcadon（株式会社グッドパッチ @GoodpatchTokyo ）

[Case Study]
_ライブラリ分散と自動化でトークン管理
林とも子 / 井上大開 / 細貝未紀 （弁護士ドットコム株式会社 @bengo4_creators ）

_共同作業の“ブレ”を低減させるためには？
植田将基 @wentz_design（株式会社SmartHR @SmartHR_jp ）

[コラム]
_Figma×AIの「現在地」
鈴木慎吾 @shingo2000 （株式会社つみき @tsumikiinc ）

_先生たちのFigma / FigJam事情2025
ローレン・マッキャン （Figma @FigmaJapan ） / 柴田直樹 （鎌倉学園中学校・高等学校）/ 茂田可愛 @shigetasensei （Canadian Academy）

_Figmaプラグイン集＆学び方

ーーーーーーーーーーーーーーーーーーーーーーー
第2特集 デザインリサーチの基礎と実践
ーーーーーーーーーーーーーーーーーーーーーーー
監修：菅原大介（リサーチャー）@diisuket

_なぜデザインリサーチで「仮説」が重要なのか？

_探索＆検証 ｜ よくある課題と解決策
鈴木健一 @suk （株式会社プレイド @PLAID_Info ） / 佐々木祐真 @memo_skzn
/ 平光蔵 @tckw_flt （株式会社アイスリーデザイン @i3design_jp ）

ーーーーーーーーーーーーーーーーーーーーーーー
特別企画
ーーーーーーーーーーーーーーーーーーーーーーー
_ KDDIコーポレートサイトリニューアルの舞台裏
小玉千陽 @chiharukodama （株式会社ium @iuminc ） / 平藤篤 @hey2gm （株式会社マルチプル @multiple_work ） / 難波貴則 / 茨木誠也 （KDDI株式会社） / 瀧野哲史 / 杉山諒 （株式会社アマナ @amanajp ）

ーーーーーーーーーーーーーーーーーーーーーーー
連載
ーーーーーーーーーーーーーーーーーーーーーーー
_WHAT’S ON PLUS
「Spot-if-AI」
テレアガ・ボグダン / シェーファー・マティアス （Qosmo @qosmo_inc ）

_WHAT'S ON

_データのミカタ（トランスコスモス・アナリティクス　萩原雅之 @m_hagihara ）

_GOTO-CHI CREATIVE!（iDID @iDID_team ）
京都 ｜ 松倉早星 @sbr_m / 西怜香 / 北山里菜 @rinabo1997 （Nue Inc.）

_モヤモヤバスターズ（株式会社FIREBUG 佐藤詳悟 @sato_shogo1 ）
ゲスト：クロちゃん @kurochan96wawa （安田大サーカス）

_文章力を上げる鉄板ルール（株式会社ワン・パブリッシング　松井謙介 ）

_知的財産権にまつわるエトセトラ（鶴巻町法律事務所　桑野雄一郎 @KuwanoYuichiro ）

_MISH MASH
・今、気になる一冊（田渕将吾 @shogoTabuchi ）
・日本語を組む（工藤俊祐 @shunsuke_kudo_ ）
・洗練されたデザインのつくり方（加藤千歳 @ChitoseWatanabe ）

_デザインの手前（グラレコ版）　
グラフィックレコーディング：大島水音さん（ニューQ）
ゲスト：橋本麦 さん @_baku89

_gestures（FANTASIA inc. ）

_Perspective
一ノ瀬雄太（ @ichinoseyuta ）
DJサモハンキンポー （ @hajimematsushit ）

Cover Illustration
大橋絵里奈（クックドゥードゥードゥー） @cddd_design

ご予約はこちらより！
https://t.co/PjO1JuaTsl

#WebDesigning
#WD233

[Honda | Spindle @Windom40]

検証していただきました

[Hara Kazunari 🟢 @herablog]

先日リリースされた「Figma Dev Mode MCP Server」を使って、Amebaのデザインシステム「Spindle」との連携を検証してみました🤚

課題だったアウトプットの精度が大きく改善されており、実際のデザイン・開発フローにうまく組み込めそうです🟢

https://t.co/GiCEu9K7T7

[Figma @figma]

See if color contrast meets accessibility standards right within the color picker

[Honda | Spindle @Windom40]

どうぞ

[JESUS ™ ∣ CA @mocmillan]

あけましてあめでとうございます
今年もよろしくどぅーぞー