Download to read offline
Uploaded byng ng
研究発表のためのデザイン入門 〜農工大 Advent Calendar 2024〜
このスライドは農工大 Advent Calendar 2024のためのものです。 https://qiita.com/advent-calendar/2024/tuat こちらも参考にしてください。 https://scrapbox.io/ngmemo/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%85%A5%E9%96%80%E3%81%AE%E8%A3%9C%E8%B6%B3%E3%80%80%E3%80%9C%E8%AA%AD%E3%81%BF%E3%82%84%E3%81%99%E3%81%84%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AB%E3%80%9C
研究発表のためのデザイン入門 〜農工大 Advent Calendar 2024〜
- 1. PowerPointで重要なこと ・近接 • 整列 ・強弱 • 反復 •以上のことがいいとは限らない • なぜ？ • 例えば整列しないことで生まれるリズムが価値を生む可能性が ある • 例外は常に存在する • PowerPointは難しい 1
- 2.
- 3.
- 4.
- 5. 目次 目次 1 デザイン入門 2 人力HTML描画マシン 3デザインの４大原則 4 箇条書き撲滅委員会 5 タイポグラフィ 6 配色 10 付録 7 図表とアニメーション 9 PowerPoint環境構築 8 発表に向けて
- 6. 参考文献 伝わるデザイン | 研究発表のためのユニバーサルデザインhttps://tsutawarudesign.com 伝わるデザイン | 高校生のための研究発表の手引 https://student.tsutawarudesign.com 見やすいプレゼン資料の作り方 - リニューアル増量版 https://www.slideshare.net/yutamorishi ge50/how-to-present-better パワーポイント・デザインブック 伝わるビジュアルをつくる考え方と技術のすべて https://amzn.asia/d/2AitIhU
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16. 1 デザイン入門 明確にペルソナを設定しよう 誰に？ 時間は？場所は？ 使える時間によって 許される詳しさは変わる 相手の背景知識の量は？ 学生？教員？ 暗い場所？明るい場所？ お固い場？ゆるい場？
- 17.
- 18. 2 人力HTML描画マシン BERTの概要 BERTには優れた性能を示す BERTのパラメータ ・Masked LanguageModel ・Next Sentence Prediction ・事前学習することで任意のタスクに転用可能（転移学習） ・入力の最大系列長 : 128 ・ミニバッチサイズ : 16 ・Dropout率 : 0.1 何とも言えない分かりにくさの正体は…？
- 19. BERTの概要 BERTには優れた性能を示す BERTのパラメータ ・Masked Language Model ・NextSentence Prediction ・事前学習することで任意のタスクに転用可能（転移学習） ・入力の最大系列長 : 128 ・ミニバッチサイズ : 16 ・Dropout率 : 0.1 2 人力HTML描画マシン ←タイトル ←主張 ←見出し ←主張 ←理由（？） ←パラメータ名・値 論理構造が †破滅† している
- 20. 2 人力HTML描画マシン “WYSIWYG” PowerPoint は WhatYou See Is What You Get 見たままが得られる 見た目に気を取られて 本質的な論理構造を置き去りにしがち
- 21.
- 22. 2 人力HTML描画マシン BERTの概要 BERTには優れた性能を示す BERTのパラメータ ・Masked LanguageModel ・Next Sentence Prediction ・事前学習することで任意のタスクに転用可能（転移学習） ・入力の最大系列長 : 128 ・ミニバッチサイズ : 16 ・Dropout率 : 0.1 ←タイトル ←主張 ←見出し ←主張 ←理由（？） ←パラメータ名・値
- 23.
- 24. 2 人力HTML描画マシン ←主張 ←主張 ←理由 （箇条書き） ←見出し ←パラメータ名・値（表） 下の要素が「理由」なので文言を変更 余白ができたので補足を加えた
- 25.
- 26.
- 27.
- 28. 2 人力HTML描画マシン <body> <h1>BERTの概要</h1> <h2>優れた性能を示す</h2> <ul> <li>Masked LanguageModel</li> <li>Next Sentence Model</li> </ul> </body> BERTの概要 優れた性能を示す ・Masked Language Model ・Next Sentence Model やっていることは同じ！
- 29. 2 人力HTML描画マシン <body> <h1>BERTの概要</h1> <h2>優れた性能を示す</h2> <div class="bert-list"> <a>・MaskedLanguage Model</a> <a>・Next Sentence Model</a> </div> </body> BERTの概要 優れた性能を示す ・Masked Language Model ・Next Sentence Model 結果は同じだけど、読みづらい
- 30.
- 31.
- 32.
- 33.
- 34. 3 デザインの４大要素 |強弱と反復
- 35. 3 デザインの４大要素 |強弱と反復 ←タイトル ←サブタイトル ←箇条書きのアイテム ←箇条書きのアイテム ←箇条書きのアイテム ←詳細 ←詳細 ←結論
- 36. BERTの概要 特徴 ・事前学習モデル ・実際のタスクは少量の学習データで良い ・双方向まではTransformerに接続 ・いまは左から右にのみ接続するのが 普通だった ・性能がとても高い コンピュータビジョンに応用 3 デザインの４大要素 |強弱と反復 ←タイトル ←サブタイトル ←箇条書きのアイテム ←箇条書きのアイテム ←箇条書きのアイテム ←詳細 ←詳細 ←結論
- 37. 3 デザインの４大要素 |強弱と反復 「ジャンプ率」を大きく！ 強弱の付け方 フォントを大きくする ウェイトを太くする 色を付ける
- 38. 3 デザインの４大要素 |強弱と反復 既存手法 BERTを用いた手法 ・ナイーブなモデル構成 ・良好な性能を示す ドメインを考慮したモデル構造 既存手法の問題点 ・ドメインの特徴を活かしきれていない
- 39. 3 デザインの４大要素 |強弱と反復 既存手法 BERTを用いた手法 ・ナイーブなモデル構成 ・良好な性能を示す ドメインを考慮したモデル構造 既存手法の問題点 ・ドメインの特徴を活かしきれていない 反復だから 同じ論理構造？
- 40.
- 41. 3 デザインの４大要素 |強弱と反復 既存手法 BERTを用いた手法 ・ナイーブなモデル構成 ・良好な性能を示す ドメインを考慮したモデル構造 既存手法の問題点 ・ドメインの特徴を活かしきれていない 異なる2つの主張を共存させるデザインは難しい…
- 42. 3 デザインの４大要素 |強弱と反復 春 秋 夏 冬 春はあけぼの やうやう白く なりゆく山ぎ はすこしあか 夏は夜月のこ ろはさらなり やみもなほ蛍 の多く飛びち 冬はつとめて 雪の降りたる はいふべきに もあらず霜の 秋は夕暮れ夕 日のさして山 の端いと近う なりたるに烏
- 43. 3 デザインの４大要素 |強弱と反復 図形が揃っていない 春 秋 夏 冬 春はあけぼの やうやう白く なりゆく山ぎ はすこしあか 夏は夜月のこ ろはさらなり やみもなほ蛍 の多く飛びち 冬はつとめて 雪の降りたる はいふべきに もあらず霜の 秋は夕暮れ夕 日のさして山 の端いと近う なりたるに烏
- 44. 3 デザインの４大要素 |強弱と反復 反復は徹底的に！ 春 秋 夏 冬 春はあけぼの やうやう白く なりゆく山ぎ はすこしあか 夏は夜月のこ ろはさらなり やみもなほ蛍 の多く飛びち 冬はつとめて 雪の降りたる はいふべきに もあらず霜の 秋は夕暮れ夕 日のさして山 の端いと近う なりたるに烏
- 45.
- 46. 3 デザインの４大要素 |余白 アナ ケイト リュウ ミカ 被害者 弁護士 検察 容疑者 アナ ケイト リュウ ミカ 被害者 弁護士 検察 容疑者 仲間は近くに （※反復は距離をとって） 余白＝適切な空白
- 47. 3 デザインの４大要素 |余白 ジャンプ率は高いけど… なんかダサい 余白を調整して スッキリさせよう
- 48. 3 デザインの４大要素 |余白 余白の調整の仕方 フォントを小さくして、空間を作る 行間の設定をする 文字の間隔の設定をする
- 49. 3 デザインの４大要素 |余白 余白の調整の仕方 フォントを小さくして、空間を作る 行間の設定をする 文字の間隔の設定をする 1.2を基準に1.1〜1.5で 調整しましょう
- 50. 3 デザインの４大要素 |余白 余白の調整の仕方 フォントを小さくして、空間を作る 行間の設定をする 文字の間隔の設定をする 専門外で分かりません>< 本当にこだわりたいときだけ 調整すればいいと思います PowerPointはデフォルトでカーニングが効いてるので基本的には 調整しなくてもいい感じになります（諸説あり）
- 51.
- 52. 3 デザインの４大要素 |整列 アナ ケイト リュウ ミカ 被害者 弁護士 検察 容疑者 アナ ケイト リュウ ミカ 被害者 弁護士 検察 容疑者
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61. 単純明快 ① Python ②C++ 文法が悪いと言われがち でもみんな使う チーター並の速度 習得は難しい
- 62.
- 63. 表にする←これ大事 Python v.sort C++ std::sort(v.begin(),v.end()) 塗りつぶしなし・罫線なしで運用するのもあり 箇条書き + コロン の組み合わせは必ず表に変換できる（未証明）
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74. メイリオ ・PowerPointのバージョンが違ってもいいくらい互換性が⾼い ・熱狂的なファン と批判的なフォントオタク がいる NotoSans JP Google Google 5 タイポグラフィ
- 75.
- 76. フォントサイズは 24pt 以上を目安に 自然な位置で改行を 5タイポグラフィ 24ptあればどんな会場でもだいたい見える 自然な位置で改行され てい ないと読みにくい。
- 77.
- 78.
- 79.
- 80.
- 81. 配色 3. 背景色と文字色もこだわってみよう #000000 や#FFFFFF は目に痛い 背景色 文字色 「テーマの色」の真ん中の黒あたり 「テーマの色」の一番上の灰色あたり 6
- 82.
- 83.
- 84. 配色 白黒で印刷されても問題ないデザインを 0.00 0.10 0.20 0.30 0.40 0.50 1 2 34 0.00 0.10 0.20 0.30 0.40 0.50 1 2 3 4 ○ テクスチャで明確に区別 ×同一トーンだと区別しにくい 6
- 85.
- 86. 7 図表とアニメーション |写真・図 聞き手と話し手のギャップを埋める最強武器 アナウサギ 哺乳綱ウサギ目ウサギ科アナウサギ属 体長35~50センチメートル 尾長4.5~7.5センチメートル 背面の毛衣は灰色 体毛の先端は黒や赤褐色 腹面の毛衣は明灰色
- 87. 図表とアニメーション | 写真・図 聞き手と話し手のギャップを埋める最強武器 30~50cm アナウサギ 哺乳綱ウサギ目ウサギ科アナウサギ属 体長35~50センチメートル 尾長4.5~7.5センチメートル 背面の毛衣は灰色 体毛の先端は黒や赤褐色 腹面の毛衣は明灰色 7 ちょっとの工夫で 大きく改善できる
- 88.
- 89. 図表とアニメーション | 写真・図 キャプションを書く 図.安らぐ猫ちゃん 7
- 90.
- 91. 図表とアニメーション | 写真・図 テキストでの補足を検討する 何に着目すれば良い…？安らぐ猫ちゃん！ 目を閉じている 7
- 92. 図表とアニメーション | 写真・図 切り抜きや修正を利用する(1/2) 縦横切り抜き 写真の形を 変えられる 7
- 93. 図表とアニメーション | 写真・図 切り抜きや修正を利用する(2/2) 暗くして、文字を見やすくするなど… 7
- 94. 図表とアニメーション | 表 構造的にtable であることを見抜いて、軽率に表組みにしよう （レイアウトもしやすい） 箇条書きの特別な場合 ・学習率 : 0.005 ・エポック数 : 1000 ・Dropout率 : 0.3 学習率 0.005 エポック数 1000 Dropout率 0.3 7
- 95.
- 96. ⼿法名 精度 Random Forest0.9532 CNN 0.9923 Transformer 0.9858 標準的なスタイル 線を減らし、行間を広めに取る
- 97. ⼿法名 精度 Random Forest0.9532 CNN 0.9923 Transformer 0.9858 ちょっとだけ格好良く① ストライプを入れる
- 98. ⼿法名 精度 Random Forest0.9532 CNN 0.9923 Transformer 0.9858 ちょっとだけ格好良く② 注目ポイントは強調する
- 99.
- 100.
- 101. 図表とアニメーション | インフォグラフィック グラフ 必ずExcel の出力から加工を加える（見づらい・ダサい） 0 5000 10000 15000 20000 1 2 3 4 5 6 7 8 9 10 11 12 府中市 那覇市 10000 12000 14000 16000 18000 1 2 3 4 5 6 7 8 9 10 11 12 電気料金 (円) 月 那覇市 府中市 7
- 102. 図表とアニメーション | インフォグラフィック グラフ 必ずExcel の出力から加工を加える（見づらい・ダサい） 10000 12000 14000 16000 18000 1 2 3 4 5 6 7 8 9 10 11 12 電気料金 (円) 月 那覇市 府中市 • 軸ラベルを加える（絶対） • 凡例を加える • フォントを変える • 数字 : Arial または Helvetica • 色をスライドに合わせる • 外向き目盛りをつける 7
- 103. 図表とアニメーション | インフォグラフィック グラフ 適切なグラフを使用する 嘘をつくような加工は行わない ・棒グラフ？散布図？箱ひげ図？ ・ 3D効果は使わない ・ 円グラフは使わない ・ 目盛りを歪ませない 7
- 104. 図表とアニメーション | インフォグラフィック ダイアグラム ダイアグラムは自己満足になりがちで、本当に難しい 調達製造 物流 販売 消費 本当に分かりやすい…？ 7
- 105. 図表とアニメーション | インフォグラフィック ダイアグラム ダイアグラムは自己満足になりがちで、本当に難しい 調達製造 物流 販売 消費 本当に分かりやすい…？ ピクトグラムは正しい？ 流れてる…？ 言葉が 難しすぎない…？ 7
- 106. 図表とアニメーション | インフォグラフィック ダイアグラム ダイアグラムは自己満足になりがちで、本当に難しい 調達製造 物流 販売 消費 これでも本当に分かりやすい…？ 材料を生み出す 工場で 作る トラックで 運ぶ 売る 買って使う 7
- 107.
- 108.
- 109.
- 110. 2022 2023 20242025 4500万ユーザー
- 111.
- 112.
- 113. 図表とアニメーション | アニメーション 静止画静止画 + アニメーション フルアニメーション 「読む」 正確に情報を伝える 「見てから読む」 部分的に情報を強化 「見る」 魅力を増幅。簡明さ重視 7
- 114.
- 115. 8 発表に向けて 対外発表は細かい点に注意しよう 表現・表記の揺れはないか？ 専門用語は正しく使えているか？ 漢数字と算用数字は使い分けているか？ ひらがな書きが適当でないか？ ページ番号は振られているか？ 例 )ユーザー vs. ユーザ 精度 vs. Precision 例 ) 提案・Bid・合意案候補 例 ) 一部 vs. 1部 例 ) 全て → すべて
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125. PowerPoint環境構築 ショートカットキーを覚える Command + Optionを押しながらオブジェクトを選択・移動で、簡単コピペ Command+ Option + Shift を押しながらオブジェクトを選択・移動で、平行移動でコピペ Command + Enter で、スライドショー開始 Command + Shift + Enter で、スライドショーを先頭から開始 Shift 押しながら選択・移動で、平行移動 Command + Shift + < で、フォント縮小 Command + Shift + > で、フォント拡大 Command + Option + G で、グループ化 9
- 126.
- 127.
- 128.
- 129. 10 付録 Beamer やMarp も検討しよう LaTeX や Markdownからスライドが生成できるフレームワーク （強制的に）論理構造を記述することになり、 それに合わせていい感じのスライドを生成してくれるため、 わかりやすいスライドになりやすい 細かな調整がしにくいのが難点