Figmaプレゼン資料を爆速で作る！時系列デザインサンプル｜カラーコード付き

始めに

ども！最近は登壇資料を全力で作成しており、いろんなことが後回しになっている龍ちゃんです。3月に入ってしっかりブログ更新の手が止まってしまっていました。なので、直近の業務でブログ化できそうなところを書いていきます。

今回のお話は「Figmaで作成する図：スケジュール編」となります。

スケジュール時間経過：Figmaデザイン

プレゼン資料からブログコンテンツまで、スケジュールを表現するコンテンツは、テンプレートとして所持しておいて損はありません。そんな「スケジュール」や「時間経過」を表現するコンポーネントのサンプルを貼っておきます。

今回使用しているフォントは以下の二つになります。一つは有料フォント（無料版あり）、一つは無料フォントとなります。

• LINE Seed JP
  LINEで使われているフォント（セリフ体）商用無料で使えるため超おすすめ！ダウンロードはこちら
• ビルの谷間と高架下
  BOOTHで販売されているとてもかわいい日本語フォント無料版もあり（条件アリ）これは買う価値あり！！

上記二つは、僕のFigmaでは高頻度で登場しています。

多色・横並び

こちらの図解で使用している色は以下になります。

こちらは、最大4つの工程表現に向いています。これ以上色を使用すると目に優しくないかと考えています。色も単色ではなく、若干淡い色（マットな表現）を意識して作成しています。

上部の時間経過を表現しているコンポーネントの作成方法としては、フレーム内に先端と文字領域用のフレームを配置しています。

三角形の部分を「拡大・縮小」にしておくことで、大元のフレームを操作しても形が崩れずに遷移します。Figmaで四角形を描画して、描画ツールで直接点を編集すると簡単に図を接合することができます。

単色横並び

こちらの図解で使用している色は以下になります。

こちらは、スケジュールよりもステップの表現に利用できます。もちろんスケジュールとしても表現することができますが、ステップなどの表現のほうが直感的に理解しやすいかと思います。

こちらは画面上部に配置し、下部にコンテンツを配置に向いています。WEBサイトのフォームなどでも使用することができる表現です。

単色縦並び

こちらの図解で使用している色は以下になります。

こちらは一ページを割いて表示するコンテンツとなります。目次としても利用可能です。目次として利用する場合は、以下のように要素に透明化を入れることで、トピックを明確にすることができます。

おわり

今回は、Figmaでスケジュールや時間経過を表現するコンポーネントのサンプルを紹介しました。これらのデザインは、プレゼン資料やブログ記事など、様々な場面で活用できます。一つのテンプレートとして保存しておくことで、効率的な資料作成が可能になりますので、ぜひ参考にして自作のコンポーネントを作成してみてください！

生成AIを活用したコンテンツ作りにも、取り組んでいます。ぜひ閲覧してみてください。「プレゼン資料が見違える！AI図解ツールNapkin AIの基本と実践的な使い方完全版」