[{"data":1,"prerenderedAt":37},["ShallowReactive",2],{"post-dist53-event-report":3},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":7,"revisedAt":6,"title":8,"body":9,"categories":10,"author":13,"thumbnail":25,"ogpImage":29},"dist53-event-report","2026-02-26T05:43:47.403Z","2026-03-05T08:48:57.147Z","2026-03-05T08:32:50.517Z","DIST.53 「スライドデザイン道場」参加レポート","\u003Cp>2026年2月20日（金）、中野セントラルパーク カンファレンスにて、DIST.53「スライドデザイン道場」を開催しました。\u003C\u002Fp>\u003Cp>この記事では、当日のセッション内容をご紹介します。一部スライドも掲載しているので、ぜひチェックしてみてください。\u003C\u002Fp>\u003Cul>\u003Cli>「『見せる』登壇資料デザインの極意」\u003Cbr>株式会社カンム デザインマネージャー 大木 尊紀\u003C\u002Fli>\u003Cli> 「『スライドは動かすな』は本当か？ 発表資料の理解を助けるモーションデザインの手法5選」\u003Cbr>株式会社ICS テクニカルディレクター 池田 泰延\u003C\u002Fli>\u003Cli>「資料デザインは思いやり：相手の理解を助けるデザイン設計」\u003Cbr>株式会社clearly 代表取締役、デザイナー むらさき\u003C\u002Fli>\u003Cli>「絵や写真から学ぶ、要素がもたらす副作用」\u003Cbr>合同会社Steg 代表、エンジニア、フォトグラファー 中尾 圭吾\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"hc4608b5723\">「見せる」登壇資料デザインの極意\u003C\u002Fh2>\u003Cp>最初のセッションは、株式会社カンムのデザインマネージャー・大木尊紀さんによる発表でした。「読ませる」スライドから「見せる」スライドへ変えるために、コンテンツの設計からビジュアルの整え方まで体系的に解説していただきました。\u003C\u002Fp>\u003Ch3 id=\"hd8972a4a88\">コンテンツの設計が出発点\u003C\u002Fh3>\u003Cp>大木さんはまず、スライドデザインはビジュアルの前にコンテンツの設計から始まると強調しました。具体的には、全体の持ち時間を最初に区切り、各パートに何分使うかを決めること。これにより、5分のLTなのにスライドが60枚になるような事態を防げるといいます。\u003C\u002Fp>\u003Cp>また、「話さないことを明確にする」ことの重要性にも触れました。生成AIにプロットを投げると情報が詰まったスライドが出来上がりがちですが、結局何を言いたいのか分からなくなってしまいます。話の範囲を絞り、補足は別のリソースに委ねることで、聞き手に伝わる構成になるとのことです。\u003C\u002Fp>\u003Cp>さらに、話の流れを意識することも大切だと語りました。個別の話題をぶつ切りで並べるのではなく、前後のつながりを設計することで、聞き手が持ち帰れるメッセージが明確になります。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F16dc0d04d55846ef9f9c9552e4747379\u002FIMG_2266.JPG?w=1280&h=853\" alt=\"\" width=\"1280\" height=\"853\">\u003C\u002Ffigure>\u003Ch3 id=\"h1e738591ce\">ビジュアルを整えるポイント\u003C\u002Fh3>\u003Cp>ビジュアル面では、いくつかの実践的なポイントが紹介されました。文字サイズはFigma Slidesで48ピクセル程度が目安で、コントラスト比は9対1を目指すとプロジェクター投影でも見やすくなるとのことです。エンジニアがコードブロックをダークテーマで表示すると、会場では読めなくなるケースがあるため注意が必要です。\u003C\u002Fp>\u003Cp>そのほか、中央揃えよりも左端揃えの方が読みやすいこと、色は2色で十分であること、空白を恐れず1行で言い切るスライドにすることなど、すぐに実践できるTipsが共有されました。生成AIの活用については、コンテンツの中身には触らせず、図やインフォグラフィックの作成やレイアウトの調整に使うのが効果的だとまとめていました。\u003Cbr>\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;\">\u003Ciframe src=\"https:\u002F\u002Fspeakerdeck.com\u002Fplayer\u002F597780fb68ab4d34a5825c273edf7a77\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch2 id=\"h304e605fb0\">「スライドは動かすな」は本当か？ 発表資料の理解を助けるモーションデザインの手法5選\u003C\u002Fh2>\u003Cp>続いて、株式会社ICSのテクニカルディレクター・池田泰延さんによるセッションでは、スライドにおけるモーションデザインの活用法が紹介されました。「モーションは不要」という意見は多いものの、その問題の本質は目立たせるための過剰演出にあり、理解の補助として使えば情報伝達に役立つと語りました。\u003C\u002Fp>\u003Ch3 id=\"hcaae9284ba\">理解を助ける5つのテクニック\u003C\u002Fh3>\u003Cp>紹介されたテクニックは次の5つです。\u003C\u002Fp>\u003Col>\u003Cli>「段階表示で現在地を示す」。箇条書きや図形を一度に見せるのではなく、順番に表示することで、聞き手が初見でも情報を受け取りやすくなります。\u003C\u002Fli>\u003Cli>「スポットライトで注目点を示す」。スクリーンショットなど情報量が多い場面で、一部分だけ明るく残し、それ以外を暗くすることで視線の迷いを防ぎます。\u003C\u002Fli>\u003Cli>「スライド間に接続型アニメーションを加える」。PowerPointの「変形」やKeynoteの「マジックムーブ」を使い、前後のスライドに共通する要素を滑らかにつなぐことで、文脈の維持や変化の追跡がしやすくなります。\u003C\u002Fli>\u003Cli>「コード差分を動きで示す」。コードの変更前後を接続型アニメーションで見せることで、削除・追加・維持されている部分が視覚的に伝わります。\u003C\u002Fli>\u003Cli>「動画を埋め込む」。事前に画面操作を収録してスライドに埋め込むことで、キーボード入力のミスやネットワーク障害による停止を回避できます。ただし、ライブコーディングと誤解されないよう、事前録画であることを明示する必要があるとのことでした。\u003C\u002Fli>\u003C\u002Fol>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F5ded47fb0a99435cbe6d9f693545f037\u002FIMG_2277.JPG?w=1280&h=853\" alt=\"\" width=\"1280\" height=\"853\">\u003C\u002Ffigure>\u003Ch3 id=\"hf13ab7a0ce\">自作スライドツールの紹介\u003C\u002Fh3>\u003Cp>セッションの後半では、池田さんが自作したWeb技術ベースのスライドツールも紹介されました。Markdownで記述でき、AIによる修正指示も自然言語で書けるほか、ライト／ダークモードの切り替えや、プロポーショナルメトリクス・禁則処理・和欧間スペースといったWeb技術ならではの文字組み機能も備えているとのことです。\u003C\u002Fp>\u003Cblockquote class=\"twitter-tweet\" data-dnt=\"true\" align=\"center\">\u003Cp lang=\"ja\" dir=\"ltr\">『発表資料の理解を助けるモーションデザインの手法5選』というテーマで登壇しました。\u003Cbr>\u003Cbr>その場で収録したので、公開します！\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fhashtag\u002Fdist53?src=hash&ref_src=twsrc%5Etfw\">#dist53\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Ft.co\u002FE4PEj3UwVJ\">pic.twitter.com\u002FE4PEj3UwVJ\u003C\u002Fa>\u003C\u002Fp>— 池田 泰延 (@clockmaker) \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fclockmaker\u002Fstatus\u002F2024802490022314000?ref_src=twsrc%5Etfw\">February 20, 2026\u003C\u002Fa>\u003C\u002Fblockquote>\n\u003Cscript async src=\"https:\u002F\u002Fplatform.twitter.com\u002Fwidgets.js\" charset=\"utf-8\">\u003C\u002Fscript>\n\n\u003Ch2 id=\"h1ce18eebb4\">資料デザインは思いやり：相手の理解を助けるデザイン設計\u003C\u002Fh2>\u003Cp>休憩を挟んで再開されたセッションでは、株式会社clearlyの代表取締役・むらさきさんが登壇しました。資料デザインにおけるマインドセットと、ノンデザイナーでも実践できる情報整理・カラー設計の手法が紹介されました。\u003C\u002Fp>\u003Ch3 id=\"h4be9f2aa8e\">目的から始める情報設計\u003C\u002Fh3>\u003Cp>むらさきさんは、スライドデザインとは「見た目を整えること」ではなく「相手の理解を設計すること」だと定義しました。自分が何を伝えたいかよりも、相手がどう理解するかという視点が大切だといいます。\u003C\u002Fp>\u003Cp>制作の順序としては、まずスライドの目的を明確にし、次に情報設計・情報整理を行い、最後に視覚的効果を整えるという流れを示しました。情報整理の具体的なステップとしては、優先順位をつけること、ボックス分けで整理整頓すること、文字サイズの強弱や余白を揃えることが挙げられました。\u003C\u002Fp>\u003Cp>「詰め込みは一人よがり、削ぎ落としは思いやり」という言葉が印象的で、相手のことを思いやって作ることがスライド制作のポジティブな原動力になると語っていました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Ff31b5e5a02bf4099a005027baaa3164d\u002FIMG_2287.JPG?w=1280&h=853\" alt=\"\" width=\"1280\" height=\"853\">\u003C\u002Ffigure>\u003Ch3 id=\"ha79d9f6910\">カラー設計の3つのTips\u003C\u002Fh3>\u003Cp>視覚的効果のパートでは、カラー設計に絞った3つのTipsが共有されました。1つ目は「意味の補佐として使う」こと。色にポジティブ・ネガティブの意味を持たせることで、情報の理解を助けます。2つ目は「増やさない、ベースカラーを基準にする」こと。ベースカラーを1色決めたら、それを薄くして2色目を作るだけで、配色に迷わず統一感が出せるといいます。3つ目は「色は雰囲気作りにつながる」こと。色を加えるだけでスライド全体のトーンが大きく変わることを、ビフォーアフターの実例で示していました。\u003C\u002Fp>\u003Ch2 id=\"h30252f419e\">絵や写真から学ぶ、要素がもたらす副作用\u003C\u002Fh2>\u003Cp>最後のセッションは、合同会社Stegの代表・中尾圭吾さんによる発表でした。エンジニアでありフォトグラファーでもある中尾さんが、絵画や写真に隠された視線誘導の技法を紐解き、スライドデザインへの応用可能性について語りました。\u003C\u002Fp>\u003Ch3 id=\"h83702d9333\">フォーカルポイント：視線が集まる場所\u003C\u002Fh3>\u003Cp>フォーカルポイントとは、視線が自然と集まる場所のことです。中尾さんはまず、何も置かれていない白い画面では人の視線は中央に集まること、そして四隅にも視線を引く力があることを説明しました。\u003C\u002Fp>\u003Cp>そこに要素が加わると、明暗の差によって視線の行き先が変わります。背景がグレーでも、コントラストの高い黒い点があればそちらに目が向く。つまり、フォーカルポイントは明暗差によって生まれるということです。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fe29629d2763f4fa995a14db79cf5a5b7\u002FIMG_2298.JPG?w=1280&h=853\" alt=\"\" width=\"1280\" height=\"853\">\u003C\u002Ffigure>\u003Ch3 id=\"h1331967102\">リーディングライン：視線を導く線\u003C\u002Fh3>\u003Cp>リーディングラインとは、視線の動きをコントロールするための線です。明示的な線だけでなく、飛行機のアイコンが持つ進行方向や、人物の指差し・視線の向き、同じ要素の並びなども、人間の目は線として認識し、自然とたどっていくといいます。\u003C\u002Fp>\u003Cp>絵画の実例では、弓矢の向きが主題へ視線を戻す役割を果たしていたり、人物の視線や手鏡の角度によって画面の上下が循環するようにつながっていたりと、複数の見せたい要素をリーディングラインで結ぶ工夫が解説されました。\u003C\u002Fp>\u003Cp>スライドへの応用としては、四角形の角を丸めて視線の逃げを防ぐこと、明暗差やスポットライトで強調すること、要素の並びに沿って視線を誘導することなどが紹介されました。\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;\">\u003Ciframe src=\"https:\u002F\u002Fspeakerdeck.com\u002Fplayer\u002Faf5a3959385d4841ab39940025b733ee\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Chr>\u003Cp>以上、DIST.53 「スライドデザイン道場」の参加レポートでした。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fbcf894075f42440caa2a142dca646e25\u002FIMG_2306.JPG?w=1280&h=853\" alt=\"\" width=\"1280\" height=\"853\">\u003C\u002Ffigure>\u003Cp>過去の勉強会の動画はDISTの公式YouTubeチャンネルからいつでもご覧になれます。動画では資料だけでは伝わらない、スピーカーからの解説や実演シーンも見られます。オフラインの勉強会に抵抗を感じている方も、まずは動画から雰囲気を掴んでみてください。\u003C\u002Fp>\u003Cp>DIST公式サイト：\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"padding-bottom: 52.5%; padding-top: 120px;\">\u003Ca href=\"https:\u002F\u002Fdist.tokyo\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?url=https%3A%2F%2Fdist.tokyo%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>DIST公式YouTubeチャンネル：\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCNsgmodjXtYKAi1HxLK94kQ\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?url=https%3A%2F%2Fwww.youtube.com%2F%40DISTJP&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>",[11,12],"デザイン","イベントレポート",[14],{"id":15,"createdAt":16,"updatedAt":17,"publishedAt":16,"revisedAt":17,"name":18,"job":19,"avatar":20,"profile":23,"xId":24,"githubId":24},"zj4140csfzp","2024-02-16T08:47:03.048Z","2024-02-26T02:43:14.033Z","沖 良矢","代表／インタラクションデザイナー",{"url":21,"height":22,"width":22},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F5a1443817ff045dca487a1d1ff776039\u002Foki_202304.png",512,"1981年愛媛県生まれ。インタラクションデザイナー。2003年よりWeb制作に携わる。ビジネスとクリエイティブの両立を強みとして、戦略立案、UI\u002FUX設計、デザイン、フロントエンド開発に携わる。現場で培った知見をもとに講演、執筆、コミュニティ運営にも取り組んでいる。長岡造形大学、東京造形大学非常勤講師。","448jp",{"url":26,"height":27,"width":28},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F76a504d6ff18487c91436554673b4328\u002Fdist-53.png",720,1280,{"fieldId":30,"type":31,"image":33},"ogpImage",[32],"タイプ2（タイトル＋画像）",{"url":34,"height":35,"width":36},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fc0c82f92616144378001dfde8597534f\u002Fdist-53-ogp.png",630,1200,1776401660706]