Doorkeeper

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

2018-06-29(金)19:30 - 21:00 JST

富士通クラウドテクノロジーズ株式会社

東京都新宿区北新宿2-21-1 新宿フロントタワー(18階)

申し込む

申し込み受付は終了しました

今後イベント情報を受け取る

リアル参加 (会場にて参加) 無料
Zoom参加 (オンラインで参加) 無料

詳細

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

サービスの規模が大きくなるにあわせて、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/

コミュニティについて

DevLOVE

DevLOVE

DevLOVEとは、開発(Develop)を愛する人たちの集まりです。 この集まりでは、開発の楽しさを再発見し、広げるために、下記3つのコンセプトのもと、明日の開発の現場に役に立つことを目指した勉強会やイベントを開催しています。 開発の楽しさを発見しよう。広げよう。 開発の現場を前進させよう。 自分から越境しよう。 新DevLOVEサイト: https://devlove.link...

メンバーになる