こんにちは! デザイナー2年目になりました、ライツ管理部の川崎です。
いのこりデザイン勉強会の目的は?

『 UI設計 NIGHT 』
テーマ『UIにまつわるお話』
【スマホ画面のデザインの歴史】
①スキューモフィズム(2008〜)
慣れない画面上の操作に対して、実世界にあるもので表現することによって、ユーザーの理解を深めます。
②フラットデザイン(2010〜)
ユーザーの理解度、SNSなど実世界にない体験の現出、開発効率などなど、
多様化したニーズや変化に対応するため、よりシンプルな表現に進化しました。
③セミフラットデザイン (2014〜)
スマホの普及によって、老若男女さまざまな層にUIが浸透。
物理法則を参考にするなど、概念を設計し一貫したルールの中で、それぞれのUXが最適化されていきます。
ということで、現実世界の法則を取り入れた新しい概念をつくろうとする動きが出てきました。マテリアルデザインなどもここに含まれます。

情報・知識を取り入れ、疑問を持ち、背景や文脈を理解したうえで、より良いものは何なのかを常に考えながらUI設計に取り組むことが大切です〜!
テーマ『これから始めるSketch×AtomicDesign - 導入事例と成功・失敗談 -』
丸山さんは、Atomic Designというデザイン手法によって
UIを①1人で設計した場合、②複数人で設計した場合、③フロントエンドエンジニアとの連携とスタイルガイド、というそれぞれのケースでの体験談をお話ししてくださいました。
【Atomic Designとは?】
デザインを部品に置き換えてそれを組み立てていくデザイン手法の1つ。
コンポーネントの組み合わせによって、属人化を防ぎ効率的なデザイン開発を可能にしてくれます。

複数人の時は、Abstract(共同でデザイン作業が行えるツールで、"デザイナー向けのGitHub"とも呼ばれています)を使用しながら毎日レビュー会を行い、デザインを作っていました。 MTGが多くなりがちですが、そのぶんメンバーそれぞれの視点があって、気づきも多くなるので良い点もたくさんありましたね。

Sketchのデザインデータとは別で、スタイルガイドを作ってエンジニアさんに渡してあげると、やりとりがよりスムーズになると思います。 UI設計を作っている早い段階で、Abstractにエンジニアさんを入れておいて早めにエンジニア視点のレビューをもらうことも大切ですね!

いろんな人をどんどん巻き込んでデザインしていこう! Atomic Designはあくまでも一つの手法なので、自分のチーム、プロジェクトが幸せになれる最適なデザイン開発を目指すことが重要です!
テーマ『Sketch Librariesを使ったスタイルガイドの構築法』
【スタイルガイドとは?】
サービスで一貫した体験を提供するための、再現性のあるデザインパターンと、その使い方を規定したドキュメント。元々は出版系の用語だったそうです。
主に外観や技術的側面に関するものについて記載されています。

"再現性がある"ということは、ユーザーにしてみれば一貫した体験ができるということ。開発側にとっては、使い回しがきき、開発効率が上がるなど両者にメリットがあるんです。 どんなデザイナーが作ってもスタイルガイドに従えば一貫した体験を提供できるのが理想のスタイルガイドですね!
グリッド/スペーシング(間隔)/レイヤー(層)/最近ではモーションなどが含まれることも!

スタイルガイドのデメリットはスタイルガイド構築&運用のためのコストがかかる。正直めんどい。でも、スタイルガイドがないということは、デザインの指針がないに等しい。 例えるなら、作画監督のいないアニメと同じ。かなりやばい状況です。

スタイルガイドを作成するには、ちょっとしたコツも必要になるので、わからない時は詳しい人に聞いちゃおう〜! Sketch Librariesの使い方をチーム内にきちんと共有することも大切です!
デザインの制約をきちんと設けてあげることが後々の開発やユーザー体験にも繋がってくるんですね。
実際のデータや作成方法をデモで見せてもらえるのは、本当にためになります…!
BEMUさんありがとうございました!
というわけで、