TOP

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/

注意事項

※ こちらのイベント情報は、外部サイトから取得した情報を掲載しています。
※ 掲載タイミングや更新頻度によっては、情報提供元ページの内容と差異が発生しますので予めご了承ください。
※ 最新情報の確認や参加申込手続き、イベントに関するお問い合わせ等は情報提供元ページにてお願いします。
2018/06/29(金)
19:30〜21:00
参加者
87人 / 定員120人
会場
富士通クラウドテクノロジーズ株式会社
東京都新宿区北新宿2-21-1 新宿フロントタワー(18階)

注目のポジション