DMM.comの、一番深くておもしろいトコロ。

【デザイン勉強会】私たちが今知りたいことを学ぶ!UI設計ナイト  

【デザイン勉強会】私たちが今知りたいことを学ぶ!UI設計ナイト  

f:id:dmminside:20180911170455j:plain

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

ライツ管理部は、エンターテイメント本部という大きな部組織が母体となっており、主に DMM picturesなどのデザインを担当しています。
そんなエンターテイメント本部と、セールスソリューション本部に所属する若手デザイナーがこのたび“いのこりデザイン勉強会(略して“のこ勉” )”を発足し、第1回目となる会を先日開催しました!
 

いのこりデザイン勉強会の目的は?

 
のこ勉省略ロゴ 
 
勉強会、と言っても固いイメージではなく、デザイナーである私たちが欲しい知識を吸収し、交流の場にすることが目的のイベントです。
 
記念すべき第1回のテーマは・・・

『 UI設計 NIGHT 』

 
これが知りたい、とデザイナーからの要望が一番多いテーマです。
当日は、金沢を含め4拠点の事業所を中継でつなぐ形式で、第1回から大規模な会になりました。
慣れない運営にもどきどき・・・
 
会場には飲食物を用意し、交流できる雰囲気を作ります!

f:id:dmminside:20180911170458p:plain 

まずはこの勉強会の趣旨を説明します。
 
そしていよいよ、エンターテイメント本部に所属する3人の先輩方が登壇!
UIに関するあれこれを共有していただきました。
 

1人目の登壇者は、Life+事業部の髙山巧さん。

髙山さんの写真

テーマ『UIにまつわるお話』

髙山さんにはUI入門編として、UIの概念的なお話をしていただきました。
 

【スマホ画面のデザインの歴史】

①スキューモフィズム(2008〜)

慣れない画面上の操作に対して、実世界にあるもので表現することによって、ユーザーの理解を深めます。

f:id:dmminside:20180911175148p:plain

②フラットデザイン(2010〜)

ユーザーの理解度、SNSなど実世界にない体験の現出、開発効率などなど、
多様化したニーズや変化に対応するため、よりシンプルな表現に進化しました。

f:id:dmminside:20180911170526p:plain

③セミフラットデザイン (2014〜)

スマホの普及によって、老若男女さまざまな層にUIが浸透。
物理法則を参考にするなど、概念を設計し一貫したルールの中で、それぞれのUXが最適化されていきます。

ということで、現実世界の法則を取り入れた新しい概念をつくろうとする動きが出てきました。マテリアルデザインなどもここに含まれます。

f:id:dmminside:20180911170529p:plain

このように、ボタン一つの例を取って見ても、デザインは時代とともに常に目まぐるしく変化していることがわかります。
 
これはUIの歴史からわかるように、
ユーザー体験 / 開発効率 / 表現
この3点の最適化を繰り返しているためだというお話でした。

スライド画像

髙山さん髙山さん

情報・知識を取り入れ、疑問を持ち、背景や文脈を理解したうえで、より良いものは何なのかを常に考えながらUI設計に取り組むことが大切です〜!

 
日々勉強、ですね! 髙山さんありがとうございました!
 
 

お次は、エンターテイメント開発部の丸山祐里恵さん。

丸山さん

テーマ『これから始めるSketch×AtomicDesign - 導入事例と成功・失敗談 -』

丸山さんは、Atomic Designというデザイン手法によって

UIを①1人で設計した場合、②複数人で設計した場合、③フロントエンドエンジニアとの連携とスタイルガイド、というそれぞれのケースでの体験談をお話ししてくださいました。

【Atomic Designとは?】

デザインを部品に置き換えてそれを組み立てていくデザイン手法の1つ。
コンポーネントの組み合わせによって、属人化を防ぎ効率的なデザイン開発を可能にしてくれます。

 

f:id:kawasaki-minami:20181003010831p:plain

丸山さん丸山さん

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

丸山さん丸山さん

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

f:id:kawasaki-minami:20180913120316j:plain

丸山さん丸山さん

いろんな人をどんどん巻き込んでデザインしていこう! Atomic Designはあくまでも一つの手法なので、自分のチーム、プロジェクトが幸せになれる最適なデザイン開発を目指すことが重要です!

 
デザイン手法の貴重な体験談! 丸山さんありがとうございました!
 
 

ラストの登壇者は、オンラインサロン事業部の@BEMUさん。

f:id:dmminside:20180911170518p:plain

テーマ『Sketch Librariesを使ったスタイルガイドの構築法』

【スタイルガイドとは?】

サービスで一貫した体験を提供するための、再現性のあるデザインパターンと、その使い方を規定したドキュメント。元々は出版系の用語だったそうです。

主に外観や技術的側面に関するものについて記載されています。

中川さんBEMUさん

"再現性がある"ということは、ユーザーにしてみれば一貫した体験ができるということ。開発側にとっては、使い回しがきき、開発効率が上がるなど両者にメリットがあるんです。 どんなデザイナーが作ってもスタイルガイドに従えば一貫した体験を提供できるのが理想のスタイルガイドですね!

 

f:id:dmminside:20180911170539j:plain

f:id:dmminside:20180911170543j:plain

【スタイルガイドの基本要素】
・文字/色/アイコン
・その他にも…
 グリッド/スペーシング(間隔)/レイヤー(層)/最近ではモーションなどが含まれることも!
・コンポーネントは、これらの基本要素を組み合わせて作ります。
・基本要素は様々な媒体で転用可能
(※媒体の特性に合わせた調整は必要。CMYKとRGB、Webフォントなどなど…)
 
そして、話題はテーマにもなっているSketch Libraryについて。
 
【Sketch Librariesを使ったスタイルガイド】
Sketch Librariesとは、SketchファイルのSymbolとText Styleを、他のSketchファイルでも利用できるようになる機能です。これによってSketch上でのデザインの共有がよりスムーズに!
 
【作り方の基本は、たったの3ステップ!】
① Sketch Librariesにするファイルの基本要素をsymbol化、Text Style化する
② SketchファイルをSketch Librariesとして登録
③ 他のSketchファイルから登録したSketch LibrariesのSymbolを読み込む。
 
続いて、公開されている他社のスタイルガイドや、実際にBEMUさんが業務で使用しているデザインシステムなどを見せながら説明してくれました。
 

f:id:kawasaki-minami:20180913120341j:plain

 
中川さんBEMUさん

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

 
中川さんBEMUさん

スタイルガイドを作成するには、ちょっとしたコツも必要になるので、わからない時は詳しい人に聞いちゃおう〜! Sketch Librariesの使い方をチーム内にきちんと共有することも大切です!

 

デザインの制約をきちんと設けてあげることが後々の開発やユーザー体験にも繋がってくるんですね。

実際のデータや作成方法をデモで見せてもらえるのは、本当にためになります…!

BEMUさんありがとうございました!

 
 

というわけで、

UIについてもイベント運営についても、すべての学びが深〜い一夜となりました。
 
今回の反省点を生かして、私たちの”のこ勉”をより良い会にしていきたいと思っております。
次回開催もお楽しみに!