#3) デジタル庁がデザインシステムを公開。高まるコンポーネントの学習機運
こんにちは、梅本です。
11月13日は”いいひざの日”。
いいひざの日はゼリア新薬工業株式会社が記念日に制定しました。同社は関節痛の薬や健康ケア製品などを開発しています。
私は週に2〜3日は朝からランニングをしているのですが、ランニング用のタイツをはくと膝の痛みを感じません。
逆にタイツがないと痛みを感じる年頃です……
膝は消耗品だそうですので皆様もご自愛ください。
今週も私が過去にツイートしたことを振り返りつつ、いくつかデザイン系のニュースをお伝えします。
目次
1. デジタル庁がデザインシステムを公開
2. デザインシステムをつくるにはコンポーネントの理解が必要
3. Google Fonts にsonoが追加
4. あとがき1) デジタル庁がデザインシステムを公開
デジタル庁が一貫したデザインや操作性でサイトやアプリを提供するための指針である「デザインシステム」を一部公開しました。
リンク) デザインシステム | デジタル庁
デジタル系のデザインをする人たちにとっては、デザインシステムの有用性と浸透の難しさを感じているのではないでしょうか。
そんなタイミングだからこそ、デジタル庁がデザインシステム推進の音頭をとってくれることは業界の発展につながるので嬉しいことです。
デジタル庁が発表した、デザインシステムの目的
あるべきデザインを一貫性を持ってユーザーに提供するための仕組み
デザインと開発を効率化し、利用者の課題解決に集中できる時間を増やすこと
大規模サービスを素早く改善するため
一貫性を担保し、行政サービスを使いやすくするため
開発チームの円環なコミュニケーション
定石ですが、骨太でいいです。
デザインシステムはFigmaのコミュニティで公開
このデザインシステムはFigmaのコミュニティで公開されています。
そのため、誰でも見られて複製できます。国内トップクラスのデザイナーたちが作ったデザインシステムなので、学習資料としても最適でしょう。
なお、ライセンスはクリエイティブコモンズ4.0。著作権には一度目を通しておきましょう。
Figmaにある利用の手引き
Figmaにある利用の手引きに統一感があったので、グリッドデザインのガイドを表示しました。
サイズ：1920 × 1080
横は12カラム（マージン40、ガター40）
縦は5行（マージン40、ガター40）
左の1/3をタイトルエリア、右2/3をコンテンツエリアと区切りでスッキリさせてますね。右エリアの左右1カラムをマージンとして使っているところも余白がしっかりルール化されています。
さすが。
2) デザインシステムをつくるにはコンポーネントの理解が必要
そして、デザインシステムを構成する要素のひとつがコンポーネントです。
このコンポーネントを学習する場合、いろんなサイトがあるのですが私のお薦めはGoogleが運営するWeb.devです。
リンク）Web.dev Component patterns
コンポーネントとは
ひとつの機能や部品のことです。
具体例をいえば、ボタンもひとつのコンポーネントです。
これらはすべてボタンです。9種類ありますが、左側にシンボルがあり、右側にテキストを配置したパターンなどがあります。
（どんな動きをするか？はデモのURLをご覧ください。）
Web.dev がなぜコンポーネント学習で便利なのか？
結論
定番のコンポーネントのパターンがほぼ網羅されている
いつ、どう使うか？を動画とテキストで解説してくれている
HTMLとCSSがついているので、具体的に何をすればいいかわかる
デザインの初学者の方は、ボタンを何種類用意しておけばいいか？なやみますよね。
“プライマリー“と呼ばれる一番重要なボタンと次は”セカンダリー”のボタンとして、縁取りした形状の2種類くらいを用意しているのではないでしょうか。
もちろん、それも目的によっては正解です。
学習タイミングでは、THE 定番を知っておくことで自分の持ち幅や力を抜くところがより明確になるかと思います。
デザインシステムに興味がある人は、コンポーネントもあわせて勉強してみてはいかがでしょうか。
3) Google Fonts にsonoが追加
ニューヨークのEtcetera Type Compay が手掛けた複数のフォントがGoogle Fontsに追加されました。
リンク) ETCが手掛けたGoogle Fonts
どれも素敵なフォントです。私は sono に一目惚れしました。
ソフトな等幅（またはプロポーショナル）可変フォント
ウェイト軸（ExtraLight - ExtraBold）は7種類
デフォルトのスタイルは固定幅（カーニングされていない）
今後の資料づくりやプロトづくりが楽しみです。
あとがき
あっという間の第三回ニュースレター配信でした。ニュースレターの型を持てていない中での配信ですが、読者の方にわかりやすいか？読みやすいか？をまだ模索しております。
読者も楽しく、私も続けやすく。どんなかたちがいいのでしょうか。
ぜひ感想やコメントがあればフィードバックください。
引き続きお付き合いいただければ幸いです。