DMM.com ラボさまの社内勉強会にお声がけ頂き、「Atomic Design & Design Systems」というテーマでお話させて頂きました。 当日の構成 勉強会のテーマがAtomic Designについてだったので、前半はGUILDさん勉強会でお話させて頂いた内容を少し持ってきました。 後半ではAtomic Designの視点をもう少し広げて、Design System（毎回デザインシステム表記とどっちにしようか悩む）全般について、僕が調べたり考えたことをまとめました。 と言っても自分は何かしらのデザインシステムを取り入れたり実践したりと言った経験はありません。そのため、内容のほとんどは海外の事例や記事の引用・意訳になります。Design Systemについてまとまった情報が知りたい！という方には有益かと思いますが、基本的なことは知ってるよーという方にはあまりお役に立てないと思

はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo

【CEDEC2016】全てはプロデューサーが集中して楽しめるように！　『デレステ』UIの要諦は基本ルールと最小のパーツ　軽量版やウインクの秘話も明らかに Cygamesは、「アイドルマスターシンデレラガールズ スターライトステージ 制作事例・アート編 － 総勢60名のアイドルを最大限魅力的に表現し、ライブに集中する手法（モデリングとUI/UXデザイン）」と題するセッションを8月26日の「CEDEC2016」で開催した。モデリングパートとUI/UXデザインのパートに分かれており、今回はUI/UXデザインパートの模様をレポートする。UI/UXデザインのパートでは、Cygamesデザイナー部UIデザインチームマネージャーの中村ふじ子氏（写真）が登壇した。 『アイドルマスターシンデレラガールズ スターライトステージ（以下、デレステ）』は、「Mobage」で配信されている『アイドルマスターシンデレラ

GMOサイバーセキュリティ byイエラエ（旧オハコ）は、サービスデザインやUX/UIデザインを中心に、企画、設計、デザイン、開発、運用、グロースとワンストップでお客様のパートナーとして伴走いたします。また、デザインだけでなく、ビジネスとテクノロジーのプロフェッショナルによるチームがお客様とワンチームとなり、事業成果にコミットいたします。

はじめに 本稿は UI Design Advent Calendar 2015 – 9日目の GUI アニメーションに関する記事です。 アニメーションの12の基本原則と GUI ディズニーの アニメーションの12の基本原則/12 basic principles of animation というのがありまして、要はこの原則に沿ってアニメーションを制作すればまるでそれが生きているかのような動きをする、平たく言えばディズニーっぽい動きになる、というものです。http://the12principles.tumblr.com がとてもわかりやすいので、うちいくつかを転載しておきます。 SQUASH & STRETCH ANTICIPATION FOLLOW THROUGH & OVERLAPPING ARCS ビデオ解説：The illusion of life これらを見ただけでも、『あー、デ