Figmaでのスライドの作り方と、デジタル庁のデザインシステム。
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Contents - 目次
Figma上にある、デジタル庁によるデザインシステム。
デジタル庁のサイトはシンプルでまとまりが良く、お手本となるWebサイトのひとつ。
利用の手引きとしてサイト制作におけるビジョンや過程がスライド形式でアップされているため、プレゼン用などFigmaを使ったスライド作りの参考にもなる。
デジタル庁のデザインシステム。
Webサイトやアプリのためのデザインデータが、Figma上で見本的に公開されている。
スライドやイラスト、アイコンなどの素材や、テンプレートなどが一通り揃っている。
一貫してアクセシビリティやユーザビリティが考慮されており、地方自治体はもちろん、学校や独学、現場のデザイン制作やプレゼン資料にも使えそうなデザインシステム。
デジタル庁のスライド形式データ。
データはオンライン（Figma Community）で無料公開されているのでアクセスは簡単。
Figmaの「Design System 1.3.3」のページから、以下の手順で進むことができる。
（2023年8月28日時点で、バージョン1.3.3）
参照元サイト：Design System 1.3.3 – 作成者：デジタル庁
画面右上の「Figmaで開く」をクリック。
右上の青いボタン、「Figmaで開く」をクリックすると、Figmaの編集画面へ遷移する。
参照元サイト：Design System 1.3.3 – 作成者：デジタル庁
Figmaの編集画面。
デザインシステム利用の手引き
画面左側のメニュー内の「ページ」で、「🔰 デザインシステム利用の手引き」が選択された状態。
パソコンやテレビのモニターに多い16:9のアスペクト比のフレームが12つあり、テキストや図形もそのまま編集可能な状態となっている。
この画面で、1つのフレーム = 1枚のスライドが制作されている。
画面右上の▷をクリックすると、プロトタイプのプレビュー機能を応用した、スライドの画面へ遷移できる。
スライドの順番。
注意点として、スライドは、左側のレイヤーにあるフレームの、下から上への順となる。
なので番号を振っておくと分かりやすい。（フレームを作成するときは自動的に番号が付く。）
例）
Figmaのスライド画面。
Figmaのフレームを、プロトタイプのプレビューでスライド。
簡単なスライドを作るだけなら、デジタル庁のデータを基にできる。Figma上で用途に応じた編集を行うだけで良い。
切り替わった画面下にある矢印（上記スクショのオレンジ枠内）でスライドのページ送りが可能。
Figmaで作成した12個のフレーム上のデータを、12枚のスライドで見せられる。
スライドのサンプル動画。
スキルがある場合はグラフもFigmaで作れる。
もしくはChatGPTなどで生成して貼り付けるという方法もありかもしれない。
また、プロトタイプの機能で、フェードなどのアニメーション効果をつけることも可能。
デジタル庁による、イラストレーション・アイコン素材。
基本的に自由で使え、商用利用も可とのこと。（著作権はデジタル庁）
ライセンス：表示 4.0 国際 — CC BY 4.0
イラストレーション・アイコン素材利用規約：イラストレーション・アイコン素材利用規約
Design System 1.3.3
URL： https://www.figma.com/community/file/1255349027535859598/Design-System-1.3.3
イラストやアイコン類。
画面左側の「デザインシステム利用の手引き」 > 「イラストレーション・アイコン素材」から。
規約通りであれば自由に使える上、参考にもなるのではないだろうか。
近い将来、画像生成AIにより、同じテイストの素材を増やせるようになる可能性も想定される。
素材はダウンロードもできる。（リンク先ページ下部の「ダウンロードして使う」から。）
デザインシステム – スタイル。
色やフォントの指定方法、レイアウトカラムや余白の使い方、画像のアスペクト比などの参考データが集められている。
Webサイトやアプリなどに使える、スタイルのルールや見本となるデータ類。
ユニバーサルデザイン的に、ルールやスキームが説明、定義されている。
- カラー
- タイポグラフィ
- レイアウトカラム
- 余白
- 画像
- 角丸
- リンクテキスト
デザインシステム – コンポーネント。
ボタンやナビゲーションメニュー、フォームやモーダル、テーブルやページネーションなど部品の説明やデータが集められている。
UI/UXに使えるパーツ類。
ユーザーに優しく、また汎用性もある。そのままでも、ベースとしても、使用できる。
- ボタン
- ボトムナビゲーション
- テキスト入力
- テキストエリア
- セレクター
- ラジオボタン
- チェックボックス
- モーダルダイアログ
- テーブル
- ページネーション
- ほか。
デザインシステム – テンプレート。
入力フォームについてのテンプレートが集められている。
フォームに関する説明とテンプレート類。
スマホ用、PC用それぞれのテンプレートが用意されている。
- 入力
- 入力フォーム 期間・種類など
- 入力フォーム 添付
- 入力フォーム基本情報
項目別にまとめられており、それぞれに説明もあってわかりやすい。
アクセシビリティ・ユーザビリティがしっかりされているので、学習用にも実践用にも使用することができる。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。
