【GIG勉強会Vol.13】「AtomicDesignの考え方を利用したSketch活用法」と「UX改善 UXライティング」

こんにちは。GIGのセンターフォワードこと、エンジニアのよしです。普段はお客様のサービス開発に携わるほか、勉強会やイベントの運営も担当しています。

13回目の勉強会は、これまでは講師として1名の社員に登壇してもらっていたのですが、今回は初の試みでLT(ライトニングトーク)の形式をとり、2名に登壇してもらいました。そんな記念すべき第一回目を飾ってくれたのは、デザイナーのちゃっきー（高原理沙）と編集者のまえちゃん（前川有香）です。

前半のテーマは「Atomic DesignとSketch」

まず登壇してくれたのはデザイナーのちゃっきー。

デザイン手法の1つと知られる「Atomic Design」とはどのようなものか、そしてAtomicdesignの考え方をデザインソフト「Sketch」に応用したアイディアを発表しながら、具体的に1つ1つの要素がデザイン上でどのような役割を果たすのか、わかりやすく教えてくれました。

高原理沙（ちゃっきー）：デザイナー。大学在学中インターンにてフロントエンドとデザインを学びWeb制作会社に入社。その後フィリピンでのインターンに参加しWeb開発とブリッジSEを担当。帰国後フリーランスを経てGIG入社。

Atomic Designとは？

Atomic Design とは、UI要素を粒度によってカテゴリー分けする手法で、その名前からわかるように、Atom = 原子を元として小さなものの組み合わせで全体が出来るという物理学的な考え方です。Web制作においては、bootstrapのような、開発をしながらデザインシステムを作るためのフローとして利用されています。

ちゃっきー：「まず、1番小さな要素であるAtomはlabel, input, buttonのような、これ以上分解出来ない構成要素のことです。カラースキムやフォントなどもAtomとして扱います。

そのAtomを2つ以上組み合わせて出来る最小限のユニットがMolecle(分子)です。例えばラベルのあるフォームフィールドは先ほどのlabel, input, buttonの3つのAtomから成ります」

ちゃっきー：「そしてそのMoleculeの組み合わせにより複雑で独自のセクションを構成するものがOrganism(有機体) となります。例えばサイトロゴや検索フィールドが含まれたヘッダーなどがそれにあたります」

ちゃっきー：「さらに、Organismの集合体のTemplate(テンプレート)になり、さらにそれが集合したものが1つのPage(ページ)となり、ウェブサイトを形作っていきます」

Atomic Design は「Sketch」との親和性が高い

続いてAtomic Designの「Sketch」との親和性について説明してくれました。

GIGのデザイナーにとってSketchは必須ツール。フロント側の開発にとっても重要な役割を果たすため、みんな一層深く聞き入っていました。Sketchにはシンボルとオーバーライドという機能があります。

再現性の高いUI要素を簡単に作れることから、Atomic Designとの親和性が高いことを、丁寧に説明してくれました。

SketchでAtomic Designを導入するポイントは、構造を意識しながらシンボル化したり、コンポーネントの構造が見える状態でフロントに渡すなど。実際の制作フローの中で重要になってくる点も挙げてくれました。

デザインシステムを作るための開発フローとして、Sketchとの親和性も高いAtomic Design。使ったことない方は、ぜひ試してみてください。

「コンポートのシステム」をデザインしていくAtomic Design。こんなメリットもあります。

1. デザインを構造化できる
2. 共通言語化でチーム制作しやすい
3. 再現性、再利用性の高いパーツを作れる

後半のテーマは「UX Writing」

2人目の登壇者は編集者でライターの前ちゃん。「UX Writing」について発表してくれました。

前川 有香（前ちゃん）：編集者。 編集プロダクションにて、雑誌や書籍等紙媒体の編集・執筆を経験。2017年7月にGIGに入社。現在はコンテンツマーケティングやWeb記事制作をメインに担当している。

みんな「UX」を考えながら文字を書いている

ライターには、コンテンツライターやコピーライター、シナリオライターといった様々な種類が存在します。ただ、どの種類のライターでもUXのことをある程度考慮して書かなければなりません。そこで、UX改善に焦点を当てる、UXライターが誕生しました。

日本ではまだ認知度が低いUXライターですが、海外ではすでに職業として確立されています。

実際にGoogleやSpotifyといった世界を代表する企業は昨年からUX Writerを募集しています。

UXライターとは？

そもそも、UXライターとはどんな存在なのでしょうか。

Googleの求人によると“UXライターとは、文字情報によって、ユーザーのタスク完了を支援する。自社の商品がもつトーンと製品のUXデザインを牽引する存在。”

とあります。

では具体的にどんなことを改善する人なのか、よくあるログインエラーの表示を例にわかりやすく教えてくれました。

UXwritingでユーザビリティを改善する3つの視点

その1.主語を意識して明確に述べる

（例：失敗 認証エラーが発生しました。 → サインインができませんでした 間違ったパスワードが入力されました）

その2. 簡潔に書く

（例：パスワードが間違っています）

その3.ユーザーにとって有益な情報を与える

（例：OK → やり直す / パスワードを再取得する）

前ちゃんがこの説明をしている時、エンジニアとしてサービス開発をしている僕も、思わず「なるほど」と頷いてしまいました。
UXライターとは、特定のシーン(ログイン画面など)での行動をサポートするための言葉を書き、デザイナーやディレクターがやっていた「正しく伝える」作業の一翼を担うのです。日本での認知度がまだまだ低いUXライターですが、これからどんどん注目されていく職業の1つになること間違いなしです。

最後に、今回のLTから、質問タイムを挙手制からカード制に変更しました。よりたくさんの質問が集まり、運営者としても嬉しかったです。

LT終了後は恒例の立食会

LTが終了すると、オフィスの雰囲気は一変し、みんな真剣な面持ちから、和やかな表情に。ビールや酎ハイ、ノンアル飲料でおつかれさまの乾杯！

登壇者の2人も、ピザを前にやっとリラックスしたようです。普段はなかなか話さないような冗談や、それぞれが持っているビジョンの話、恋愛の話などを語り合えるのがこの場所。GIGのメンバーは個性的な人が多いので、話題に事欠きません。

それでは次回のLTもお楽しみに！

GIGでは一緒に学べる仲間を募集しています！

現在GIGでは「一緒に学びながら、成長していきたい！」と意欲のある仲間を募集しています。

詳しく話を聞きたい方はお気軽にどうぞ！