そのページで使われているパーツ(ボタンや、色、フォントなど)を繰り返し使い回せるように管理しておくことが重要です。するかをプロジェクトメンバー間で決めておかないと、だんだんと崩壊していきます。するかのルールを定めて明文化することを「デザインシステム」といいます。Systems」という本の輪読会を行いました。この記事は本のまとめと感想の記事になります。業務時間内で毎週1時間をつかって1章ずつ声に出して読みました。全10章なので10週で終わります。認知パターンがないと似たような機能になる認知パターンを使用することでユーザの関心をひき、行動を促したり、タスクを容易にしたり、達成感をコントロール感を与えることができる。共通言語チームで作業している場合、プロダクトの開発に携わるメンバー間で言語を共有する必要がある。「ボタン」とは?クリックできる領域?どこかにリンクされているページ上のインタラクティブな要素?ユーザーデータを送信できるフォーム要素?言語に関する取り決めについて話し合い、審査し、明文化することで共有言語を確立してからインターフェースについて考える。それに加えて、ユーザー側がそれをどう解釈するかもさらに合わせて考える。パターンライブラリデザインパターンを一覧化したもの、ツールWebのデザインシステムでは以下を一覧化したものをさす上で説明したデザインパターン共通言語メンテナンスされ続けること必要デザインシステムで明文化すべきこと1プロダクトの目的と価値Webサイトの対象ユーザーとその目的、ニーズ、動機を理解する。2解決したい課題デザインで何を解決しようとしているのかを明らかにしておく。3デザイン原則プロダクトの目的を表現する基盤となる原則を確立する。プロダクト作成に関わる人々が価値に賛同し、その実現に尽力することが目的。測定や数値化ができないので、定義は反復作業しながら徐々に作られていく。「シンプル、便利、楽しい」を明文化した場合、それが実行可能であること視点(POV)がある「シンプル、便利、楽しい」のうち、どれを優先させるかはっきりさせるための視点があること関連付けやすく、覚えやすい多くても覚えられないので、4~5点くらいに抑えていること作り方の例プロダクトの目的から作るメンバーのすでにある共通認識から作るターゲットに注力して作る検証して原則を進化させる4どうやって機能パターンを切り出すか目的達成に向けて、主にどのような行動をユーザーに促したいかを考え、どの粒度でパターンを分割をするか。Billboard」という名称パターンの中身を考える→どんな要素が必要か(見出し、CTA、目を引く画像)パターンをスケールで比較する→パターンの大小が間違っていて行動の妨げになっていないか→PC用とスマホ用を考える5どうやって認知パターンを切り出すか誰にどのように認知して欲しいかについて考える。他社ではどうやっているかなど、想像以上に効果的でした。本を読みながら、うちはこうだよね!とか、これができてないよね!とかが話せてとても効果的でした。ここでまとめたことは、本のたった半分の「基本編」だけです。「応用編」では実際にどうやって作るのかが具体的に記載されていて、一読の価値ありです。実際どうやって進めたかは以下の記事にまとめました。参考になれば幸いです。Designを使ったコンポーネント指向のUI開発...本稿は(序)(破)(Q)のシリーズの3番目の記事になります。Designを使ったコンポーネント指向のUI開発:破〜月別アーカイブHPスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。