https://engineer.blog.lancers.jp/フロントエンド/フロントエンド定例-ー-書籍：design-systems-の社内共有ー-2022-5-20/
こんにちは、フロントエンドチームです。 今週のフロントエンド定例の内容を記載します。
フロントエンド定例について、以前の記事（ランサーズのフロントエンドチームが取り組んでいること）でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。
以下、今週の内容です。
デザインシステムを中心に、システマチックにデザインにアプローチする方法を紹介し、デザインシステム思考を組織にインプットすることを目標とした内容です。 読者対象は、ビジュアルデザイナー、UXデザイナー、フロントエンドエンジニアとされていますが、プロダクトに関わる全員が読むべき本だと個人的には感じています。 Chapter1に本書の大切な要素がまとまっているので、以下は、Chapter1に記載されていた内容を掻い摘んで、自分流に噛み砕いて表現したものを記載しています。
本書でデザインシステムとは、デジタルプロダクトの目的を達成する為に一貫したルールで構成されたパターンや実践方法、慣習を集めたものと定義されています。 世間一般的には、標準の定義があるわけではなく、様々な用途で使用されています。
パターンは、以下のようなものを指し、これらを組み合わせてインターフェースを作成します。 例：ユーザーフロー、インタラクション、ボタン、テキストフィールド、アイコン、色、タイポグラフィ、ライティング
慣習とは、上記のようなパターンをどの様に作成、保存、共有、使用するかを記載したものです。 プロダクトが達成したい目的によって、デザインパターンが形成されます。
パターンと慣習のわかりやすい例として、トムソン・ロイターとFuture LearnのUIを画像で掲載します。
トムソン・ロイターのEikonのページ トレーディング及びマーケット分析アプリケーションで、 データ管理、実用性、速読性、マルチタスクを目的としたUI
Future Leran オープン教育のソーシャル学習サイト 深く考えながら記事を読む、形式張らない学習を目的としたゆったりとしたUI