Atomic Design ～堅牢で使いやすいUIを効率良く設計する〜

「ユーザーが使いやすいサービスをより少ない工数で作りたい」

サービスの規模が大きくなるにあわせて、UIの開発に求められる量も増すばかり。
機能の開発と同様に、複雑化するUIをどのように設計し、実装していくべきか。

今回のDevLOVEのテーマは「 Atomic Design 」です。
Atomic Design とは コンポーネントベースでUIを設計する手法 のことです。

UI構成要素の最小の単位である「原子」から始まり、2つ以上の原子をまとめた「分子」、原子や分子で構成される「有機体」、そしてページの雛形たる「テンプレート」、実際のコンテンツを流し込んだ「ページ」という概念を用いてコンポーネント設計を行います。そう、UIコンポーネントの分割を化学要素の分類に見立てて、整理する考え方がAtomic Designです。

ユーザーインターフェースの核心にある複雑さに立ち向かうための力を。手に取れ。

参考：UI 開発をアジャイルに行うための Atomic Design

書籍「Atomic Design 堅牢で使いやすいUIを効率良く設計する」とは？

(技術評論社サイトより)
「1画面を変更したつもりが，アプリ全体のUIが崩れてしまった」
「理想のデザイン通り実装したのにユーザーが使いにくい」
「コードが複雑に入り組んでいてもはやメンテナンス不能」

こんな課題の数々は，Atomic Designの考え方を使えば解決できます。

本書では，UI設計のこれまでの問題をあぶり出し，設計の本質から，具体的な手順，UIテスト，現場でひっかかりやすいポイントまでを，インターネットテレビ「Abema TV」のUI設計で実践導入した著者が解説。フロントエンドの方にオススメの1冊です。

Atomic Design 堅牢で使いやすいUIを効率良く設計する(技術評論社サイト)
Atomic Design 堅牢で使いやすいUIを効率良く設計する(Amazonサイト)

イベントの進め方

・19時00分より開場します。開始は19時30分です。
・「リアル参加」の場合はイベントスペースにお越し下さい。
・「Zoom参加」の場合は ZoomのイベントURLを参加者にメールで送りますので、Zoomで参加してください。なお、通信の不具合などで当日配信できない場合もあります。ご承知おき下さい。
・参加者から応募時に寄せられた悩みをピックアップし、深掘りします。

予定している内容

・著者五藤さんからの「Atomic Design」の紹介、解説
・Q & A

話し手

五藤 佑典さん ( @ygoto3_ )

<プロフィール>
株式会社サイバーエージェント所属のエンジニア。米国カリフォルニア州立大学サンバナディーノ校でグラフィックデザインを学んだ後，大手IT会社にてマーケティングとデザイン業務に従事。現職でエンジニアに転向。「AbemaTV」にてUI設計に携わり，実装レベルで初めて「Atomic Design」を導入した。現在は，技術領域を動画へと広げて，「AbemaTV」の動画技術戦略に携わり，国内外で動画事業における技術研究を行っている。

DevLOVEって何？

DevLOVEはデベロッパー(プログラマー、デザイナー、etcetc)が集まり、昨日より今日、今日より明日と、各々が各々の現場を前進させていくための場です。

DevLOVEサイト: http://www.devlove.org
Facebookグループ: http://www.facebook.com/groups/devlovepark/