Figmaでのスライドの作り方と、デジタル庁のデザインシステム。デザイナー、コーチ、ディレクター / 井川

igawa design.

Memo

Figmaでスライドの作り方。アイコン素材もプレゼンも。

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

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の編集画面へ遷移する。


Figmaにある、デジタル庁のデザインシステムのスライドデータの画像。

参照元サイト:Design System 1.3.3 – 作成者:デジタル庁

Figmaの編集画面。

デザインシステム利用の手引き

画面左側のメニュー内の「ページ」で、「🔰 デザインシステム利用の手引き」が選択された状態。

パソコンやテレビのモニターに多い16:9のアスペクト比のフレームが12つあり、テキストや図形もそのまま編集可能な状態となっている。

この画面で、1つのフレーム = 1枚のスライドが制作されている。

Figmaにある、デジタル庁のデザインシステムのスライドデータの画像2。

画面右上の▷をクリックすると、プロトタイプのプレビュー機能を応用した、スライドの画面へ遷移できる。

スライドの順番。

注意点として、スライドは、左側のレイヤーにあるフレームの、下から上への順となる。

なので番号を振っておくと分かりやすい。(フレームを作成するときは自動的に番号が付く。)

例)

Figmaでスライドを作るときは、下から順にフレームが表示されるという例の画面。

Figmaのスライド画面。

Figmaのフレームを、プロトタイプのプレビューでスライド。

簡単なスライドを作るだけなら、デジタル庁のデータを基にできる。Figma上で用途に応じた編集を行うだけで良い。

Figmaにある、デジタル庁のデザインシステムのスライドデータの画像3。

切り替わった画面下にある矢印(上記スクショのオレンジ枠内)でスライドのページ送りが可能。
Figmaで作成した12個のフレーム上のデータを、12枚のスライドで見せられる。

スライドのサンプル動画。

スキルがある場合はグラフもFigmaで作れる。
もしくはChatGPTなどで生成して貼り付けるという方法もありかもしれない。

また、プロトタイプの機能で、フェードなどのアニメーション効果をつけることも可能。


デジタル庁による、イラストレーション・アイコン素材。

基本的に自由で使え、商用利用も可とのこと。(著作権はデジタル庁)

ライセンス:表示 4.0 国際 — CC BY 4.0
イラストレーション・アイコン素材利用規約:イラストレーション・アイコン素材利用規約

Figmaにある、デジタル庁のデザインシステムの画像。

Design System 1.3.3

URL: https://www.figma.com/community/file/1255349027535859598/Design-System-1.3.3

イラストやアイコン類。

画面左側の「デザインシステム利用の手引き」 > 「イラストレーション・アイコン素材」から。

規約通りであれば自由に使える上、参考にもなるのではないだろうか。
近い将来、画像生成AIにより、同じテイストの素材を増やせるようになる可能性も想定される。

素材はダウンロードもできる。(リンク先ページ下部の「ダウンロードして使う」から。)

イラストレーション・アイコン素材


デザインシステム – スタイル。

色やフォントの指定方法、レイアウトカラムや余白の使い方、画像のアスペクト比などの参考データが集められている。

Webサイトやアプリなどに使える、スタイルのルールや見本となるデータ類。

ユニバーサルデザイン的に、ルールやスキームが説明、定義されている。

  • カラー
  • タイポグラフィ
  • レイアウトカラム
  • 余白
  • 画像
  • 角丸
  • リンクテキスト

Figmaにある、デジタル庁のデザインシステム。スタイルの画面。


デザインシステム – コンポーネント。

ボタンやナビゲーションメニュー、フォームやモーダル、テーブルやページネーションなど部品の説明やデータが集められている。

UI/UXに使えるパーツ類。

ユーザーに優しく、また汎用性もある。そのままでも、ベースとしても、使用できる。

  • ボタン
  • ボトムナビゲーション
  • テキスト入力
  • テキストエリア
  • セレクター
  • ラジオボタン
  • チェックボックス
  • モーダルダイアログ
  • テーブル
  • ページネーション
  • ほか。

Figmaにある、デジタル庁のデザインシステム。コンポーネントの画面。


デザインシステム – テンプレート。

入力フォームについてのテンプレートが集められている。

フォームに関する説明とテンプレート類。

スマホ用、PC用それぞれのテンプレートが用意されている。

  • 入力
  • 入力フォーム 期間・種類など
  • 入力フォーム 添付
  • 入力フォーム基本情報

Figmaにある、デジタル庁のデザインシステム。テンプレートの画面。

項目別にまとめられており、それぞれに説明もあってわかりやすい。

アクセシビリティ・ユーザビリティがしっかりされているので、学習用にも実践用にも使用することができる。

Figma上にあるデザインシステムのデータ類とわんちゃん猫ちゃん。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。