「Ameba」アイコン刷新 一貫性と再現性追求のための設計術 | CyberAgent Developers Blog

GUIにおけるアイコンとは、プロダクトを触れるユーザーに対して、機能や動作を抽象化してシンプルかつ直感的に伝達させる、文字情報に頼らない記号です。 基本的に、記号が内包する意味には受け手によって解釈の余地があるような状態であってはなりません。しかし、ユーザーに対して、シンプルに正しい意味を伝えることが出来るという前提さえ踏まえれば、それを成すスタイリングは作り手やプロダクトによって様々な表現が可能な余地が残されています。 つまり、アイコンは、記号としての機能性に加えて、装飾としての役割も抱く、プロダクトGUIにおけるスタイリング定義の標本となり得るということです。 前段 「Ameba」について 「Amebaらしい」アイコンとは何か 塗りと線のルール 「Amebaらしい」形状 「Ameba Sans」の形状分析と曲率定義 線の太さのルール 命名規則を決める Library化 リプレイス まと

[asada_bao]

昔はabemaの方が違和感あったけど、いつのまにかamebaの方がアレ？って感じるようになった

[spark7]

これよくやる。後で見てもぐちゃぐちゃで分からんけど。「アイコンの形が成立するまでの過程をアウトライン化せずに段階的に全て残す」

[flirt774]

貴重なデザイン論の軌跡。面白い。メルカリのフォントも似たような調整と議論が見えて面白かった　https://note.com/mercari_design/n/n569031b78562

[harumomo2006]

アメーバピグは知名度を支えてたんだろうなと思う

[SasakiTakahiro]

アイコンは、記号としての機能性に加えて、装飾としての役割も抱く、プロダクトGUIにおけるスタイリング定義の標本となり得る。

[rakda3]

アイコンの命名規則を含め、これだけ細かく考えてやってるんですよという記事。

[keren71]

デザインの教科書のような記事

[yoshiakist]

“しています。 ”

[mohritaroh]

“「Ameba」のデザインシステム「Spindle」”

[tsuki-rs]

Spindleと聞いて、Gacktの仮想通貨を思い出した。

[skypenguins]

たしかに統一感がある

[nanammeon]

“「『Ameba』15年の負債を払拭するカラーパレットのメソッド」”

[yasu-log]

【B!】「Ameba」アイコン刷新　一貫性と再現性追求のための設計術 | CyberAgent Developers Blog