サービス

ジャンル

職種：エンジニア

職種：ビジネス職

職種：デザイナー

職種：バックオフィス

職種：その他職種

技術

こんにちは！ デザイナー２年目になりました、ライツ管理部の川崎です。

ライツ管理部は、エンターテイメント本部という大きな部組織が母体となっており、主に&nbsp;<a href="https://pictures.dmm.com/" target="_blank">DMM pictures</a>などのデザインを担当しています。

そんなエンターテイメント本部と、セールスソリューション本部に所属する若手デザイナーがこのたび&ldquo;いのこりデザイン勉強会（略して&ldquo;のこ勉&rdquo; ）&rdquo;を発足し、第１回目となる会を先日開催しました！

<h3>いのこりデザイン勉強会の目的は？</h3>

<img alt="" height="356" src="https://image.dmm-corp.com/eg6idxjhe0t7cyo4ncfbsl5xganm" width="600" />

勉強会、と言っても固いイメージではなく、デザイナーである私たちが欲しい知識を吸収し、交流の場にすることが目的のイベントです。

&nbsp;

記念すべき第１回のテーマは・・・

『 UI設計 NIGHT 』

&nbsp;

これが知りたい、とデザイナーからの要望が一番多いテーマです。

当日は、金沢を含め4拠点の事業所を中継でつなぐ形式で、第１回から大規模な会になりました。

慣れない運営にもどきどき・・・

&nbsp;

会場には飲食物を用意し、交流できる雰囲気を作ります！

<img alt="" height="337" src="https://image.dmm-corp.com/22odqh39opbs9rkmqc3r5ilgi808" width="600" />

まずはこの勉強会の趣旨を説明します。

&nbsp;

そしていよいよ、エンターテイメント本部に所属する３人の先輩方が登壇！

UIに関するあれこれを共有していただきました。

&nbsp;

<hr />
１人目の登壇者は、Life+事業部の髙山巧さん。

<img alt="" height="100" src="https://image.dmm-corp.com/l7y8jx70h7esfge5kqu7jky2gbii" style="float:left" width="100" />

&nbsp;

<h4>テーマ『UIにまつわるお話』</h4>

髙山さんにはUI入門編として、UIの概念的なお話をしていただきました。

&nbsp;

【スマホ画面のデザインの歴史】

①スキューモフィズム（2008〜）

慣れない画面上の操作に対して、実世界にあるもので表現することによって、ユーザーの理解を深めます。

<img alt="" height="236" src="https://image.dmm-corp.com/hwln7793l8vf6xbehuco6az39q64" width="600" />

②フラットデザイン（2010〜）

ユーザーの理解度、SNSなど実世界にない体験の現出、開発効率などなど、 
多様化したニーズや変化に対応するため、よりシンプルな表現に進化しました。

<img alt="" height="236" src="https://image.dmm-corp.com/nq1scs6beqkau2wtztakw0iz5nwy" width="600" />

③セミフラットデザイン (2014〜)

スマホの普及によって、老若男女さまざまな層にUIが浸透。 
物理法則を参考にするなど、概念を設計し一貫したルールの中で、それぞれのUXが最適化されていきます。

ということで、現実世界の法則を取り入れた新しい概念をつくろうとする動きが出てきました。マテリアルデザインなどもここに含まれます。

<img alt="" height="263" src="https://image.dmm-corp.com/31muu8d8krph6nmyhmihh2v9gzbw" width="600" />

このように、ボタン一つの例を取って見ても、デザインは時代とともに常に目まぐるしく変化していることがわかります。

&nbsp;

これはUIの歴史からわかるように、

ユーザー体験 ／ 開発効率 ／ 表現

この３点の最適化を繰り返しているためだというお話でした。

<img alt="" height="350" src="https://image.dmm-corp.com/upver4tcs66e0xxz1i2qnb8ifv06" width="600" />

<figure class="image" style="float:left"><img alt="髙山さん" height="100" src="https://image.dmm-corp.com/l7y8jx70h7esfge5kqu7jky2gbii" width="100" />
<figcaption>髙山さん</figcaption>
</figure>

&nbsp;

&nbsp;

&nbsp;

&nbsp;

情報・知識を取り入れ、疑問を持ち、背景や文脈を理解したうえで、より良いものは何なのかを常に考えながらUI設計に取り組むことが大切です〜！

&nbsp;

日々勉強、ですね！　髙山さんありがとうございました！

<hr />
お次は、エンターテイメント開発部の丸山祐里恵さん。

<img alt="" height="100" src="https://image.dmm-corp.com/awetva6wh46uw7ebkdoydzkul2zh" style="float:left" width="100" />

&nbsp;

&nbsp;

<h4>テーマ『これから始めるSketch&times;AtomicDesign - 導入事例と成功・失敗談 -』</h4>

丸山さんは、Atomic Designというデザイン手法によって

UIを①１人で設計した場合、②複数人で設計した場合、③フロントエンドエンジニアとの連携とスタイルガイド、というそれぞれのケースでの体験談をお話ししてくださいました。

【Atomic Designとは？】

デザインを部品に置き換えてそれを組み立てていくデザイン手法の１つ。 
コンポーネントの組み合わせによって、属人化を防ぎ効率的なデザイン開発を可能にしてくれます。

複数人の時は、Abstract（共同でデザイン作業が行えるツールで、&quot;デザイナー向けのGitHub&quot;とも呼ばれています）を使用しながら毎日レビュー会を行い、デザインを作っていました。 MTGが多くなりがちですが、そのぶんメンバーそれぞれの視点があって、気づきも多くなるので良い点もたくさんありましたね。

Sketchのデザインデータとは別で、スタイルガイドを作ってエンジニアさんに渡してあげると、やりとりがよりスムーズになると思います。 UI設計を作っている早い段階で、Abstractにエンジニアさんを入れておいて早めにエンジニア視点のレビューをもらうことも大切ですね！

&nbsp;

<img alt="" height="498" src="https://image.dmm-corp.com/cau28cstjmbdlfkn4wdcw0wn7lg2" width="700" />

いろんな人をどんどん巻き込んでデザインしていこう！ Atomic Designはあくまでも一つの手法なので、自分のチーム、プロジェクトが幸せになれる最適なデザイン開発を目指すことが重要です！

<figure class="image"><img alt="丸山さん" height="100" src="https://image.dmm-corp.com/awetva6wh46uw7ebkdoydzkul2zh" width="100" />
<figcaption>丸山さん</figcaption>
</figure>

デザイン手法の貴重な体験談！　丸山さんありがとうございました！

<hr />
ラストの登壇者は、<a href="https://lounge.dmm.com/" target="_blank">オンラインサロン</a>事業部の<a href="https://twitter.com/BEMU" target="_blank">@BEMU</a>さん。

<img alt="" height="106" src="https://image.dmm-corp.com/l7stijsl57sb725hyvzjac07l6pu" style="float:left" width="100" />

&nbsp;

<h4>テーマ『Sketch Librariesを使ったスタイルガイドの構築法』</h4>

【スタイルガイドとは？】

サービスで一貫した体験を提供するための、再現性のあるデザインパターンと、その使い方を規定したドキュメント。元々は出版系の用語だったそうです。

主に外観や技術的側面に関するものについて記載されています。

&quot;再現性がある&quot;ということは、ユーザーにしてみれば一貫した体験ができるということ。開発側にとっては、使い回しがきき、開発効率が上がるなど両者にメリットがあるんです。 どんなデザイナーが作ってもスタイルガイドに従えば一貫した体験を提供できるのが理想のスタイルガイドですね！

<img alt="" height="566" src="https://image.dmm-corp.com/3xqr8hq2nf4xqgj4jllrxgclc0zc" width="600" />

<img alt="" height="425" src="https://image.dmm-corp.com/r01h6a9vtwu7eexpi9cztijjposc" width="600" />

【スタイルガイドの基本要素】

・文字／色／アイコン

・その他にも&hellip; 
　グリッド／スペーシング（間隔）／レイヤー（層）／最近ではモーションなどが含まれることも！

・コンポーネントは、これらの基本要素を組み合わせて作ります。

・基本要素は様々な媒体で転用可能

（※媒体の特性に合わせた調整は必要。CMYKとRGB、Webフォントなどなど&hellip;）

&nbsp;

そして、話題はテーマにもなっているSketch Libraryについて。

&nbsp;

【Sketch Librariesを使ったスタイルガイド】

Sketch Librariesとは、SketchファイルのSymbolとText Styleを、他のSketchファイルでも利用できるようになる機能です。これによってSketch上でのデザインの共有がよりスムーズに！

&nbsp;

【作り方の基本は、たったの3ステップ！】

① Sketch Librariesにするファイルの基本要素をsymbol化、Text Style化する

② SketchファイルをSketch Librariesとして登録

③ 他のSketchファイルから登録したSketch LibrariesのSymbolを読み込む。

&nbsp;

続いて、公開されている他社のスタイルガイドや、実際にBEMUさんが業務で使用しているデザインシステムなどを見せながら説明してくれました。

<img alt="" height="425" src="https://image.dmm-corp.com/oopvwg8dmu6g2glgm3s806avpbsm" width="600" />

スタイルガイドを作成するには、ちょっとしたコツも必要になるので、わからない時は詳しい人に聞いちゃおう〜！ Sketch&nbsp;Librariesの使い方をチーム内にきちんと共有することも大切です！

&nbsp;

デザインの制約をきちんと設けてあげることが後々の開発やユーザー体験にも繋がってくるんですね。

実際のデータや作成方法をデモで見せてもらえるのは、本当にためになります&hellip;！

BEMUさんありがとうございました！

<figure class="image" style="float:left"><img alt="" height="100" src="https://image.dmm-corp.com/l7stijsl57sb725hyvzjac07l6pu" width="100" />
<figcaption>BEMUさん</figcaption>
</figure>

&nbsp;

&nbsp;

&nbsp;

&nbsp;

というわけで、

UIについてもイベント運営についても、すべての学びが深〜い一夜となりました。

&nbsp;

今回の反省点を生かして、私たちの&rdquo;のこ勉&rdquo;をより良い会にしていきたいと思っております。

次回開催もお楽しみに！

<footer>&nbsp;</footer>

デザイン

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

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

シェア

関連する記事