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

.

Memo

です・ます調の文章でなくすみません。

当初の名残りです..pets

Figma(フィグマ)でスライドの作り方。アイコン素材もプレゼンも。

Figma上にある、デジタル庁によるデザインシステム。

デザイン庁のサイト。

デジタル庁のサイトはシンプルでまとまりが良く、お手本となるWebサイトのひとつ。

サイト制作におけるビジョンや過程がスライド形式でアップされているため、プレゼン用などFigmaを使ったスライド作りの参考にもなる。

デジタル庁のデザインシステム。

Webサイトやアプリのためのデザインシステムは、お手本的に公開されている。

スライドやイラスト、アイコンなどの素材や、テンプレートなどが一通り揃っている。

一貫してアクセシビリティやユーザビリティが考慮されており、地方自治体はもちろん、学校や独学、現場のデザイン制作やプレゼン資料にも使えそうな、汎用性のあるデザインシステム。


デジタル庁のスライドデータ。

データはオンライン(Figma Community)で無料公開されているのでアクセスは簡単。

デジタル庁の「デザインシステム」 > 「デザインデータ」のリンク、もしくは、Figmaの「Design System」のページから、以下の手順で進むことができる。

2023年11月22日時点では、バージョンは1.4.0。)

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

画面右上の「Figmaで開く」をクリック。

右上の青いボタン、「Figmaで開く」をクリックすると、Figmaの編集画面へ遷移する。

Figma(フィグマ)上の、デジタル庁のデザインシステムのスライドデータの画像。

Figmaの編集画面。

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

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

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

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

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

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

デジタル庁のFigmaのスライド画面。

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

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

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

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

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

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

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

スライドの順番。

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

なので最初は番号を振っておくと分かりやすい。

よりシンプルなサンプルデータ。

番号と補足だけを付けたテンプレ。モニターに多いアスペクト比「16:9」のフレームが6枚。

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

  • 1〜6の番号を消し、見出しや文章、画像などを配置すると使用可。
  • フレームをコピペすると、スライド枚数の追加が可能。
  • Figma Community へアップしました。

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

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

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

イラストやアイコン類。

画面下部の、「イラストレーション・アイコン素材」から進める。

イラストレーション・アイコン素材 - デジタル庁の画面。

Figmaで開いた後は、画面左側のレイヤーパネルの「イラストレーション・アイコン素材」から。

イラストレーション・アイコン素材 - デジタル庁の画面。

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

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

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


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

スタイル

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

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

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

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

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


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

コンポーネント

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

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

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

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

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


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

テンプレート

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

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

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

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

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

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

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

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

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


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

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

Figma 関連メモ。

デザインツールFigmaのロゴ。
使い方 & プラグインなど。

免責事項について

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