![](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/eb868ea0d6af41aaaff3091b7c1d4cfb/team_article_002_cover.png?w=2736&h=1208&fm=jpg&q=90)
Amebaらしさの定義 「Spindle」成立の軌跡
15年を超える歴史を持つAmebaでは、「Amebaらしさ」を改めて解釈するために、ブランドを再定義し、それを体現するためのデザインシステム「Spindle」を構築しました。今回は、Amebaという大きく長い歴史を持つサービスで、どのようにしてブランドに意識を向けることができたのか、どのような経緯でデザインシステムを作るに至る事ができたのかに関して、主要メンバーの一部で対談を行い、1年に渡る開発舞台の裏側を振り返り、語ります。
- ブランディング
- デザイナー
- ブロガー
![](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/eb868ea0d6af41aaaff3091b7c1d4cfb/team_article_002_cover.png?w=2736&h=1208&fm=jpg&q=90)
- 武本 敏治
- 2012年中途入社。クリエイティブ責任者としてメディアサービスの新規立ち上げやリニューアルを複数担当。現在はAmebaおよびその周辺事業のブランド戦略、デザイン戦略に従事。価値をデザインする人。
- 谷 拓樹
- 2012年中途入社。Webのフロントエンド開発とUI/UX設計を兼ねて、組織横断で活動。現在はAmebaおよびAmebaマンガに従事。デザインシステムの開発やUXリサーチなど幅広く関わる。
- 本田 雅人
- 2017年新卒入社。CyberAgentメディア事業本部配属後、2019年から「Ameba」に異動。 サービス運用の傍ら、デザインシステム「Spindle」の構築においてデザインリードを行う。
Amebaブランド定義の始まり
![本田のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/a39657bea64d44ca91727fbfe707498e/team_article_002_thumbnail_honda.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
今日は、何人かいるSpindle開発メンバーの内の本田・武本・谷の3名で開発の裏話について話していければと思います。
![武本のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/633ac70f96964747a54ad01b5f5d18b9/team_article_002_thumbnail_takemoto.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
よろしくおねがいします。
![谷のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/079e4e7303de406e814c645d9d9288e5/team_article_002_thumbnail_tani.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
よろしくおねがいします。
![本田のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/a39657bea64d44ca91727fbfe707498e/team_article_002_thumbnail_honda.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
そもそもSpindleというのはAmebaブログにおいてのデザインシステムの名称なんですが、デザインシステムを作る前にまずはAmebaのブランド定義をしてましたよね。
![武本のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/633ac70f96964747a54ad01b5f5d18b9/team_article_002_thumbnail_takemoto.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
そうですね、2019年の春に自分がAmebaに参画することになったんですが、そのタイミングで色々課題があることに気づきました。 Amebaは様々なサービスを提供していて、一人一人がサービスを成長させたいという熱量はすごくあるものの、目指している方向性が合っていない印象があって、施策にしても、デザインにしても指針があやふやでした。
Amebaは歴史が長いサービスで、外から運用を見ててもちょっとそのような雰囲気が感じ取れたので、これから事業を再成長させるためにとにかくその課題を解決したいなと。そう思ってAmeba事業責任者の下山さんに「Amebaのブランド定義をしませんか?」と働きかけたのが事の始まりですね。
![本田のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/a39657bea64d44ca91727fbfe707498e/team_article_002_thumbnail_honda.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
事業責任者とそのへんの課題感は結構早めに擦り合ってましたね。
![武本のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/633ac70f96964747a54ad01b5f5d18b9/team_article_002_thumbnail_takemoto.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
AmebaのWebチームの原さん(Spindleのテックリード)とかと話して、この流れでAmebaのデザインシステムみたいな物も作りたいという流れになりました。最終的にデザインシステムを構築することを念頭に置いて、Amebaブランディングプロジェクトが始まりましたね。
![本田のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/a39657bea64d44ca91727fbfe707498e/team_article_002_thumbnail_honda.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
そのころは自分はまだAmebaに参加してなかったんですよね。最初の方はどういう形で進めていったんですか?
![武本のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/633ac70f96964747a54ad01b5f5d18b9/team_article_002_thumbnail_takemoto.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
最初はAmebaの色んなプロジェクトを徘徊して、雰囲気や課題感などを調査してました。社内でイメージ調査のアンケートなども実施しましたね。
そのうち、主要メンバーを集めて、1DAY合宿を月に一回のペースでやって、目指す方向性、Amebaの価値の顕在化と「らしさ」を定義し直しました。
![武本のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/633ac70f96964747a54ad01b5f5d18b9/team_article_002_thumbnail_takemoto.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
この状態になるまで半年かかってます。
経営、広報、エンジニア、PM、デザイナー、多角的な視点でやれたほうが良いなと思ったのでそういう人たちを集めて合宿していました。
ミッション・コンセプトは言葉の強度を上げる、言語化していくのに時間がかかりましたね。
編集の人も巻き込んでその人の力も借りて強度をあげたり。
![会議室で談笑する武本](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/e6de8e130ebb45d196ab33eb642d73a9/team_article_002_d.png?w=1920&h=680&q=90&fm=jpg)
Amebaデザインシステム「Spindle」
![武本のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/633ac70f96964747a54ad01b5f5d18b9/team_article_002_thumbnail_takemoto.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
谷さんはこのブランド定義ができたあたりで入ってきたのかな。
![谷のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/079e4e7303de406e814c645d9d9288e5/team_article_002_thumbnail_tani.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
そうですね、僕が入ったタイミングでブランド戦略全般、なんでブランディングをやるのか?ってところも含め理想イメージはできてました。
![武本のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/633ac70f96964747a54ad01b5f5d18b9/team_article_002_thumbnail_takemoto.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
そのあたりで大きい構想みたいなものの計画はできてて、どう実行しようかというところで谷さんいっしょにやりましょうてなりましたね。
![本田のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/a39657bea64d44ca91727fbfe707498e/team_article_002_thumbnail_honda.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
その実行のところがデザインシステムSpindleの起こりだったと。
![武本のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/633ac70f96964747a54ad01b5f5d18b9/team_article_002_thumbnail_takemoto.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
描いた「Amebaらしさ」を実際にチームが体現できるようにする手段を成立させる必要があったんですよね。
プロダクトやチームにブランドを浸透させる手段として、デザインシステムを作って、UIのパターンライブラリや、VIを作って定義、言語化させよう、ということになりました。
![谷のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/079e4e7303de406e814c645d9d9288e5/team_article_002_thumbnail_tani.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
デザインシステムとして、最初はUIとかに偏らずに、ユーザーとのタッチポイントを網羅的に考えていってましたね。
このあたりから武本さんにはVI周りの一新を考え始めてもらってました。
![本田のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/a39657bea64d44ca91727fbfe707498e/team_article_002_thumbnail_honda.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
そのあたりから自分もブランド戦略室に参加しました。
最初はプロダクトの理想とのギャップを洗い出すためにUIのインベントリをデザイナー中心でやってました。
![本田のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/a39657bea64d44ca91727fbfe707498e/team_article_002_thumbnail_honda.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
自分はブランド戦略室ほぼ専任で配属してたんですけど、デザインシステムに投資する意思決定ってどんな感じでできたんですか?
![武本のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/633ac70f96964747a54ad01b5f5d18b9/team_article_002_thumbnail_takemoto.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
デザインシステムの開発期間に関しては下山さんと戦略を作ってましたね。
Amebaブランドを体現する、負債を解消するっていうところが共通認識あったので、半年投資しようっていうのを握れた感じです。
![谷のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/079e4e7303de406e814c645d9d9288e5/team_article_002_thumbnail_tani.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
僕はデザインシステムとしてまず最初にブランドを体現する約束事を作ろうとして、デザイン原則というものを作ってました。
![ブランドデザイン原則(らしさをデザインする約束事)の一覧 4項目 敬意(ユーザーの価値観を尊重しましょう。ユーザーが大事にしていることはひとりひとり異なります。それが誰かを傷つけるものでない限りは、その価値観を尊重してください。価値観を理解するために、ユーザーをあらゆる視点で深く知ることを心がけましょう。ユーザーの行動を観察・分析し、その背景にある気持ちを理解するようにしてください。私たちがユーザーに何かを伝えたいとき、自分たちの価値観を押し付けていませんか?)、軽快(気軽に話しかけられる存在でいましょう。 ユーザーと私たちの間には常に会話があります。ユーザーがかしこまることなく、友人のように話ができる存在でいてください。会話を弾ませるために、ユーザーの話に耳を傾け、気持ちの良い反応をしましょう。そして話し方には口調やテーマに一貫性をもたせてください。これは言葉のコミュニケーションだけでなく、サービスとしてのレスポンス速度やUI操作に対するフィードバックのことも含みます。私たちがユーザーと会話するとき、一方的な話し方をしていませんか?)、情緒(ユーザーの心を動かしましょう。 ユーザーにサービスを「使ってもらう」だけでは足りません。その時々でユーザーがサービスに共感できるようにしてください。Amebaがただのシステムではなく、ひとりの人間であるかように、私たちの言葉や表現に、人間味や親しみを込めるようにしましょう。私たちもまたユーザーに共感し、その感情に適した言葉をかけるようにしてください。私たちがユーザーに反応を返すとき、ただ事実だけを伝えていませんか?)、歓迎(いつでもだれでも喜んで迎え入れるようにしましょう。 ユーザーの属性や利用環境、状況はさまざまです。ユーザーがハードルを感じることがないように迎え入れ、居心地の良さを感じられるようにしてください。使いたいときに迷わず、困らず使えるようにしましょう。初めてのひとはもちろん、常連であるほど、より親密に、すぐ手助けをしてあげてください。私たちがユーザーを迎え入れるとき、ユーザーは自分の意思で行動できていますか?)](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/0f99123a908a4ccdb453b52669320cc4/team_article_002_a.png?w=1920&h=680&q=90&fm=jpg)
![谷のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/079e4e7303de406e814c645d9d9288e5/team_article_002_thumbnail_tani.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
現在は4つに絞られているんですが、第一稿では6つあって、単語と、ちょっとしたリード文がある程度のものだったけど、そこを推敲して磨いていって、今の形になりました。
これも数ヶ月ぐらいかかってますね。
デザイン原則は今もまだまだ磨き中って感じです。
![本田のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/a39657bea64d44ca91727fbfe707498e/team_article_002_thumbnail_honda.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
当時その推敲を横目で見ながら自分はUIの理想形を考えてましたね。
![武本のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/633ac70f96964747a54ad01b5f5d18b9/team_article_002_thumbnail_takemoto.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
あと、Spindleの名付けもこのあたりでやってました。
ここは結構しっかり作りましたね。ロゴもこのタイミングにできた。
![Spindleのロゴの成り立ち 白銀比を用いられてデザインされており、 モチーフとしてアルファベットのSの形、遺伝子、紡錘体などを取り入れて作られている](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/c8210d64fb3745319eb4452a75725ac6/team_article_002_b.png?w=1920&h=680&q=90&fm=jpg)
リモート期間に入って
![本田のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/a39657bea64d44ca91727fbfe707498e/team_article_002_thumbnail_honda.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
そういえばその辺で積極リモート期間に入りましたっけ?
![谷のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/079e4e7303de406e814c645d9d9288e5/team_article_002_thumbnail_tani.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
確かにそのあたりかも。よく考えたらSpindleのメンバーの対面でのミーティングってほぼやったことないんですよね。
![本田のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/a39657bea64d44ca91727fbfe707498e/team_article_002_thumbnail_honda.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
でもそんな生産性落ちてなかったかもしれないですね。今考えると。
![武本のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/633ac70f96964747a54ad01b5f5d18b9/team_article_002_thumbnail_takemoto.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
進行はかなり順調だった記憶があります。
各員がそれぞれ別のことをやりつつも、みんなが自走してプロジェクトを進めたので、滞りなかったですね。ブランド定義が先にできていたのも大きかったと思います。
![スクリーンに映し出されたSpindleの画面を指差しながら語る谷](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/e467224ee1b64bd1899bd626b5dd01ee/team_article_002_e.png?w=1920&h=680&q=90&fm=jpg)
UIライブラリの開発
![本田のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/a39657bea64d44ca91727fbfe707498e/team_article_002_thumbnail_honda.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
自分はその頃からUIのパターンライブラリを作ってました。
UIに関しても、長い歴史が積み重なってできたAmebaに一本指針を作る、ということで基礎の基礎からゼロイチで考えて設計しました。
最終的にチームメンバーに利用してもらうライブラリなので、誰が見ても納得できるように、かつ使いやすいように作る必要があって、一つのプロダクトを作っているような心持ちでやっていました。
![Amebaのデザインシステム開発における成果物2点 カラーパレットと、アイコンのリニューアル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/ecd6e42a2fbe4f30aaf3b9685271c9e3/team_article_002_c.png?w=1920&h=680&q=90&fm=jpg)
![谷のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/079e4e7303de406e814c645d9d9288e5/team_article_002_thumbnail_tani.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
Spindleにアクセシビリティに明るいメンバーもいたのが心強かったですね。
![本田のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/a39657bea64d44ca91727fbfe707498e/team_article_002_thumbnail_honda.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
アクセシビリティが判断基準になって助かる場面は多かったですね。できるだけ個人の主観にならないようにデザインする過程で、アクセシビリティの観点で良し悪しを判断できることは説得力の強化にだいぶ寄与してくれました。
![武本のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/633ac70f96964747a54ad01b5f5d18b9/team_article_002_thumbnail_takemoto.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
本田はブランド戦略室所属で100%これにコミットしてました。
それがデザインシステムを仕上げる上では大きかったですね。
![谷のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/079e4e7303de406e814c645d9d9288e5/team_article_002_thumbnail_tani.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
開発の初動でエンジンかけなきゃいけないところに、集中して取り組むことでブーストできたのはよかったですね。
これがなかったら今の形にはなってないと思います。
![本田のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/a39657bea64d44ca91727fbfe707498e/team_article_002_thumbnail_honda.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
UIライブラリ周り一式を進め方まで任せて頂けたので、個人的にも指標としてはGoogleのMaterial DesignやAppleのHuman Interface Guidelinesと比較しても遜色無いものを作ろうと、割と志高く作れてました。
Amebaブランド定義は何をもたらすことができたのか
![谷のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/079e4e7303de406e814c645d9d9288e5/team_article_002_thumbnail_tani.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
Amebaブランド、Amebaらしさを言語化して、サービスに指針を定められたことはやってよかった点であると言えます。
そしてそれを体現するためのデザインシステム、Spindleは一旦叩きとして完成はしたものの、Amebaプロダクトに落とし込む所はまだまだ試みる余地があると言った所ですね。
組織全体に対してAmebaブランドの理解度を深めてもらうところはより力を入れてやっていきたいところです。
![武本のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/633ac70f96964747a54ad01b5f5d18b9/team_article_002_thumbnail_takemoto.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
むしろデザインシステムの土台ができたここがスタート地点と言っても過言ではないですね。
![本田のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/a39657bea64d44ca91727fbfe707498e/team_article_002_thumbnail_honda.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
そんな感じで、世の中が大きく動いた中で、Amebaはブランド戦略からそれを形づくるデザインシステムまで、約半年でこのチームで作ることができました。
![谷のサムネイル](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/079e4e7303de406e814c645d9d9288e5/team_article_002_thumbnail_tani.png?w=80&h=80&fit=crop&crop=faces&fm=jpg&q=80)
Amebaのブランド戦略もSpindleもまだまだ未完成です。Spindleにはアップデートの余地をたくさん残っているので、今後も引き続きこのメンバーとAmebaのみんなで磨き上げていきます。
![Spindle開発主要メンバーが会議室で談笑する図](https://images.microcms-assets.io/assets/24995dc41d5c40808fe4a9e3f6fb2b20/e70e0206179e4bc98eab2e025b9c8c9e/team_article_002_f.png?w=1920&h=680&q=90&fm=jpg)