Figmaでのスライドの作り方と、デジタル庁のデザインシステム。 / いがわ

.

Memo

Figmaでスライドの作り方。デザインシステムの使いt方。

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

デザイン庁のサイト。
とにかくシンプル。

デジタル庁のサイトはシンプルでまとまりが良く、ページの表示速度も速い。

色々とお手本となるWebサイトのひとつ。

デジタル庁のデザインシステム。
まとめられた、デザインデータ。

Webサイトやアプリのためのデザインシステムも公開されている。

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

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

アクセシビリティやユーザビリティへの配慮。

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


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

Figma Communityで公開しているデータ。
Figma Community。

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

たびたびバージョンアップもされている。

2024年03月時点では、バージョンは1.4.1。)

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

Figma上のデザインシステムへリンク。

デザインデータをFigmaで開く。

Figma上のデザインシステムの開き方。

「Figmaで開く」をクリックすると、Figmaの編集画面へ遷移する。

Figmaでスライド作成。デジタル庁のデザインシステムのデータ画像。

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

Figmaの編集画面。

デザインシステム利用の手引き。
レイヤー内の「ページ」。

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

レイヤー内の「フレーム」。

パソコンやテレビのモニターに多い16:9のアスペクト比のフレームが12つある。

テキストや図形も、上部のツールバーなどで、編集可能な状態となっている。

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

Figmaで作成。デジタル庁のデザインシステムのスライドデータの画像2。

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

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

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

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

特別なソフトを使う必要がなく、SafariやChromeなどのブラウザの画面上で見ることができる。

画面の下部にある矢印(下記スクショのオレンジ枠内)で、スライドのページ送りが可能。

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

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

Figmaで作成した12個のフレーム上のデータを、12枚のスライドで見せられる。

スライドの順番。
順番は下から上へ。

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

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

スキルや予算がある場合。
Figmaでグラフ。

グラフもFigmaで作って、貼り付けられる。

ChatGPTでグラフ。

もしくは、ChatGPTなどで生成して貼り付ける。

Figmaのプロトタイプでアニメーション。

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

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

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

Figmaで作るスライドのテンプレートの画面。

シンプルな説明と、サンプルのデータ。
  • 1〜6の番号を消し、スライド用の見出しや文章、画像配置などで使用可能。
  • フレームをコピペすると、スライド枚数の追加が可能。
  • サンプルはダークモード用。ライトモードにしたい場合は、フレーム(Frame 1〜6の部分)を選択し、右サイドバーの「選択範囲の色」から白に変更可。
  • Figmaの背景色もダークモード用。ライトモードにしたい場合は、フレームが配置されているところ(キャンバス)をクリックし、右サイドバーの「デザイン」 > 「ページ」から白に変更可。
  • Figma自体をライトモードにしたい場合は、Figmaがダークモードに対応。背景色設定も簡単、目に優しい!を参考に。

補足:Figma Community へアップしました。


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

イラストやアイコン類。

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

イラストレーション・アイコン素材の場所。

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

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

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

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

規約通りであれば自由に使える。制作時の参考にもなる。

近い将来、画像生成AIにより、同じテイストの素材を増やせる可能性も想定される。

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

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


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

スタイル。

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

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

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

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

バージョンアップごとに、増えたり修正されたりしています。)

Figma上のデジタル庁のデザインシステム。スタイルの画面。


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

コンポーネント。
コンポーネントごとに。

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

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

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

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

バージョンアップごとに、増えたり修正されたりしています。なるべく最新版をご参照ください。)

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


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

テンプレート。

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

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

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

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

バージョンアップごとに、増えたり修正されたりしています。なるべく最新版をご参照ください。)

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

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

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

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

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


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

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

Figma 関連メモ。

デザインツールFigmaのロゴ。

使い方 & プラグインなど。


免責事項について

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