情報デザイン演習IIA｜2026
情報デザイン専攻｜前期 月曜３・４限｜デジタルラボ503
受講生一覧｜汎用シート
第14回｜2025.07.20
成果報告
各自、３分程度で以下の内容を簡潔に説明して下さい。
- プロジェクトのタイトルとサブタイトル
- プロジェクトの背景と目的
- 成果物の紹介
- 成果物の仕様
- 制作の方法（使用したツール、素材、手順など）
- 今回のプロジェクトで特にこだわった部分、工夫した点など・・
- 成果の振り返りと今後の課題
単位認定について
最終成果の確認は、前半・後半の両者ともあわせて試験期間中に行います。期末試験開始前までに、各自のページを整理して下さい。
第13回｜2026.07.13
はじめに
- 前回にひきつづき、ブラッシュアップの時間です。
- 全学一斉の授業アンケートへのご協力をお願いします。
- 同様にCLノート 第２Qの振り返り入力期間となっています。こちらも対応をお願いします。
進捗記録の記載
今回の作業について、その内容を具体的に記載して下さい。
**2026.07.13 ~ ~ ~
成果報告について
次回7月20日は最終回となります。各自、前半同様に後半のプロジェクトの成果報告を行なってください。
- プロジェクトのタイトルとサブタイトル
- プロジェクトの背景と目的
- 成果物の紹介
- 成果物の仕様
- 制作の方法（使用したツール、素材、手順など）
- 今回のプロジェクトで特にこだわった部分、工夫した点など・・
- 成果の振り返りと今後の課題
各自のページの整理について
- タイトル・サブタイトルを確定して下さい。
- 何らかのメインビジュアルを掲載して下さい。
- メインビジュアルの下、氏名・キーワード・成果物へのリンクが必須です。
- 大見出し「概要」の中身を、次週のプレゼン用に整理して下さい。
- 特に「成果物の仕様」の部分では、サイトマップや台割など、成果の全体像がわかる図や画像をコンパクトに掲載して下さい。以下のように列の比率を明記した表組にするとよいでしょう。
|50|50|C | #image(サイトマップ.png) | #image(ワイヤーフレーム.png) |
第12回｜2026.07.06
第12回・13回は、テスト（相互評価）の結果にもとづくブラッシュアップ期間です。再度テスト（相互評価）を行いたい場合は汎用シートの右端の欄を使って、意見を募集する案内を行なってください（この作業は任意です）。
進捗記録の記載
今回の作業について、その内容、新たな課題等の記載を行なってください。
**2026.07.06 ~ ~ ~
補足講義
- Webサイトを作成中の方へ
- トップ（ホーム）ページは index.html とするのが httpd のお約束です。
- ファイル名はすべて半角英数になっていますか（日本語はNGです）
- 大文字と小文字を区別していますか・・
Macローカルでは、xxx.jpg とxxx.JPG は同じ扱いなので、ブラウザに表示されますが、サーバーにアップすると別物になるので表示されなくなります。完成してから GitHub ではなく、先にリポジトリを作ってアップ・更新しながら作業を進めて下さい。
- コンピュータで扱うファイル名について ＞ FileName
- GitHub と GitHubPagesについて
- 画像生成、コーディングに関わるAI利用について
第11回｜2026.06.29
第１Qと同様に進行します。今回はテストの段階。プロトタイプに対する意見聴取を行います。
意見・感想を聴取する準備
それぞれのプロジェクトのプロトタイプについて、全員からコメントをもらうため、何らかの方法を検討し、自身のページのメインビジュアルの下にリンクを配置してください。今回は、Googleフォームの利用も可とします。
- Googleスプレッドシート（共同編集方式）
- 名簿部分のデータには、以下の一覧の氏名の列をご利用下さい。
- 汎用シート
- Googleフォーム（アンケート方式 ）
全員のプロトタイプを閲覧してコメント入力
以下から、受講生全員のページを確認して、シートあるいはフォームへコメントを入力して下さい。全員分の評価入力を終えたら、あとは自由・・です。
進捗記録にコメントを整理
次回までに意見を整理して、次の作業に着手できるよう準備して下さい。
以下、あくまでも記載例です。このとおりに書く必要はありません。
**2026.06.29 ***見出された問題点 -◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯◯◯、◯◯◯◯◯◯ ~ ***好評を得た点 ＞ プロジェクトの特性として -◯◯◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯◯◯、◯◯◯◯◯◯ ~ ~
再度、プロトタイプについて
プロトタイプは、本来「試作品」レベルのものです。短期間の演習のため、サイトマップや台割といった、設計段階のものでも相互評価（テスト）にかける展開となっていますが、時間的に余裕のある展開であれば、プロトタイプのテストでは、実際にアクセス可能なWebサイトや、冊子の状態になったものを提示して評価をしてもらうのが理想です。また、これは１回限りではなく、プロトタイプ → テスト → プロトタイプの修正 → テスト・・と複数回も繰り返してブラッシュアップするのが普通です。期間が短いことから、実際のプロジェクトの進め方と比較すると「略式の展開」となっていることをご了承下さい。
第10回｜2026.06.22
第１Qと同様に進行します。本日は、プロトタイプの制作です。
プロトタイピング
プロトタイピングの目的は、アイデアに対するユーザーの反応を見ることにあります。構想中のアイデアの「全体像」がある程度具体的なカタチになることで、ユーザーから様々な感想を得ることができます。要点は・・・
- これは何？ アイデアの全体像がわかるようにつくる
- 極力短時間・少資源でつくる
- 簡単に修正できるようなものにする（つくり込みすぎない）
- プロトタイプによって確認したいことを明確にしておく
- 情報の構造（構成）についての意見が欲しい
＞ サイトマップ、台割等を作る - 色・カタチやレイアウトについて意見が欲しい
＞ 具体的なサンプルページをひとつ作る（内容はダミー） - 操作性について意見が欲しい
＞ インターフェイス部分を再現したサンプルをつくる（内容はダミー）
- 情報の構造（構成）についての意見が欲しい
進捗報告の記載
以下の雛形を 学科サイトの個人ページ に、コピー＆ペーストするかたちで、今週の進捗報告を記載する枠組み用意して下さい。
**2026.06.22 ***今回制作したプロトタイプ 画像等を掲載して下さい。 ~ ***プロトタイプの説明 -◯◯◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯、◯◯◯◯◯◯ ~ ~
意見・感想を聴取する準備
それぞれのプロジェクトのプロトタイプについて、全員からコメントをもらうため、何らかの方法を検討し、自身のページのメインビジュアルの下にリンクを配置してください。例えば・・・
- Googleスプレッドシート（前回同様、相互の書き込みが見えます）
- Googleフォーム（アンケート方式）
意見聴取は、次回 6月29日の授業時間内に一斉に行います。意見をもらえるよう、テーマの概要等を記載するとともに、プロトタイプに相当する情報の掲載を次回までに確実に遂行するよう、お願いします。
補足：サイトのメニュー構成に悩むときは・・・
サイトマップ（メニュー構成）の設計は簡単ではありません。プロトタイプのテスト後に必ず修正が入る・・という前提で進めて下さい。以下、情報をどのように整理すればよいか、そのヒントとなるキーワードです。
- 5つの帽子掛け 情報整理の視点 リチャード・ソール・ワーマン
- カテゴリー：ジャンル別分類 ＞ 例：生命科学部
- 時間：年表、スケジュール、番組表 ＞ 例：Lyricism
- 位置（空間）：地図 ＞ 例：Graffiti Map
- アルファベット順：五十音順、番号順など ＞ 例：百科事典・辞書的サイト
- 連続量・階層：人気順、価格順など ＞ 例：ショッピングサイト
- 5W2H 新聞記事の必須項目
- What：これは何？
- Why：何のために / なぜ？
- When：いつ
- Where：どこで
- Who：誰が、誰に
- How：どのような方法で
- How much：費用（予算）は
- AIに聞く
◯◯についてまとめたWebサイトを作成します。 どのように情報を整理したらよいか、サイトマップのかたちで提案して下さい。
第９回｜2026.06.15
第１Qと同様に進行します。本日は、現状分析と課題定義、アイデア出しです。
はじめに
テーマ、成果物の仕様を、以下のシートに記入して下さい。
汎用シート
現状分析
あなたが取り組もうとしているプロジェクトについて、以下のような現状の調査・分析を行って、課題を定義して下さい。
- プロジェクトテーマと同様の「テーマ内容」に関する先行事例を探す。
- プロジェクトの成果物の「表現形式」に関する先行事例を探す。
- プロジェクトのテーマに関わる「時間的情報（歴史）」を調査する
- プロジェクトのテーマに関わる「空間的情報（地理）」を調査する
- プロジェクトのテーマに関わる「技術」について調査する
課題を整理する
現状の調査が終了して、ある程度予備知識がついたところで、プロジェクトの遂行にあたって「解決すべき課題」を整理して下さい。
- 公開方法
- 成果物のネーミング
- 成果物の形式（分量とサイズ）
- 成果物の構成
- 素材（イラスト・写真・記事等）の入手方法・生成方法
- 制作環境と方法
- その他、決める必要があるものをすべて「課題」として列挙する
アイデア出し
アイデア創出（Ideate）は、定義された課題を解決するためのアイデアを量産する段階です。質よりも量を重視して、考え得るさまざまなアイデアを一旦書き出して、その後、方向性を絞り込んで下さい。
本日の進捗記録の記載・公開
本日の日付を「中見出し」として、現状調査の結果と解決すべき課題、さらに個々の課題に対する複数のアイデアを箇条書きで記載して下さい。
**2026.06.15 ***現状分析 -◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ -◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ ~ ***課題定義 -1. ◯◯◯◯◯◯◯◯ -2. ◯◯◯◯◯◯◯◯◯◯◯ -3. ◯◯◯◯◯◯ ~ ***制作上のアイデア（課題ごとに複数のアイデア） -1. ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯ --◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ --◯◯◯◯◯、◯◯◯◯◯◯◯◯ -2. ◯◯◯◯◯◯◯◯◯◯◯◯◯ --◯◯◯◯◯、◯◯◯◯◯ --◯◯◯◯◯、◯◯◯◯◯◯◯◯ -3. ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ --◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ --◯◯◯◯◯、◯◯◯◯◯◯◯◯◯ ~ ~
第８回｜2026.06.08
はじめに
- 前半７週の演習の振り返り
- 個人ページ [ 氏名/情報デザイン演習IIA ] の整理・問題の除去
後半７週間のガイダンス
- 前半と同様の進行で、新たなテーマに取り組みます。
- 新たな個人ページ [ 氏名/情報デザイン演習IIA_02 ] を使用します。
後半のテーマ設定について
- 自分自身の関心事（あるいは問題意識）を可視化する
- 成果物の仕様（電子冊子、映像、Webサイト等・・サイズ・量）
- 自身のスキルアップにタイムリーなテーマ
- 付記：グループプロジェクトもOKです。
その場合、タイトル・サブタイトル、背景と目的等の部分は、全員共通の内容を記載し、メンバー一覧を書くとともに、役割分担を明確にして下さい。また、進捗報告は、それぞれの作業内容を記載して下さい。
本日の演習
- テーマタイトル・サブタイトルの書き込み
- 決まった方から報告 ＞ 汎用シートにテーマの書き込み
- 進捗報告の部分は以下のように・・最終候補を太字で
**2026.06.08 ***テーマ候補 -◯◯◯◯◯◯◯◯◯◯◯ -''◯◯◯◯◯◯◯◯◯◯◯◯◯'' ← 太字になります。 -◯◯◯◯◯◯◯◯◯◯◯◯◯ ~ ***成果物の仕様 -形式：◯◯◯◯◯◯ -サイズ：◯◯◯◯◯◯◯ -分量：◯◯◯◯◯◯ ~ ***参考リンク -◯◯◯◯◯◯◯◯◯◯◯◯ -◯◯◯◯◯◯ ~ ***この演習を通して身につけたいスキル -◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯◯◯、◯◯◯◯◯◯ ~ ~
第７回｜2026.05.28
成果報告
第１クォータの成果報告です。質疑を含めて一人５分程度を想定しています。
- プロジェクトのタイトルとサブタイトル
- プロジェクトの背景と目的
- 成果物の紹介
- 成果物の仕様
- 制作の方法（使用したツール、素材、手順など）
- 今回のプロジェクトで特にこだわった部分、工夫した点など・・
- 成果の振り返りと今後の課題
次回以降について
- 第２クォーターも同様に展開します。新たな取り組みテーマについて早めのご検討をお願いします。
- 以下を前提にご検討下さい。
- 自身のスキルアップにタイムリーなテーマ
- 自分自身にとって強い関心事であること（趣味全開で構いません）
第６回｜2026.05.25
はじめに
- CLノートの入力について
- 汎用シート に、以下の内容を記載して下さい。
- タイトル・サブタイトル
- 成果物の形式（Webサイト、PDF冊子など）
- 相互評価実施の有無（完了、受付中、未設定・・など）
- 成果報告実施の有無（この列は、第７回に入力します）
今回の演習について
前回同様に進捗状況をメモとして残して下さい。
**2026.05.25 ***作業の記録 -◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯◯◯、◯◯◯◯◯◯ ~ ***MEMO（ToDo項目など） -◯◯◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯、◯◯◯◯◯◯
補足１ PDFを軽くする方法
配置する画像のサイズ等によっては、出力したPDFが異常に大きくなる場合があります。スムーズに閲覧してもらうべく、ファイルサイズがなるべく軽くなるよう工夫して下さい。ちなみに、以下の卒業研究概要集は、60ページ以上ありますが、ファイルサイズは 10MB程度です。
https://design.kyusan-u.ac.jp/PDF/Proceedings2026.pdf
- Illustrator から PDF にする場合、
- PDFプリセットで、Illustrator初期設定ではなく、プレス品質、最小ファイルサイズ・・などの候補があるので、まずはプリセットの変更でどの程度ファイルサイズが変わるかお試しください。
- オプションで、Web用に最適化」にチェックを入れる、画像を指定解像度にまで圧縮する・・といった方法もあります。
Web用に最適化 画像の圧縮
- オンラインサービスを使う方法もあります。
Google:PDF圧縮 オンライン
- 配置画像のサイズ最適化（Illustratorファイル自体を最適化するために）
- 印刷（300dpi）時に10 cm （約４inch）になる画像の場合、単純計算で
4 x 300 = 1200px 程度ということになります。 - Photoshop で最適化する場合、イメージ ＞ 画像解像度 から、
再サンプリング, 10cm, 300dpi
と設定すれば、画素数が最適化されます。
- 印刷（300dpi）時に10 cm （約４inch）になる画像の場合、単純計算で
補足２ Lorem ipsum について
出版、Webデザインの分野において使用されている「ダミー原稿」です。文章原稿が実際のサイズで入力されることで、紙面の割り付けイメージを確認できます。以下、日本語のダミー原稿もWebから入手することができます。
Google:Lorem ipsum
次回（28日 木曜）、成果報告（プレゼン）の準備
成果報告は一人５分程度で発表と質疑応答・・を想定しています。スムーズかつ的確な報告ができるよう、自身のページを整理しておいて下さい。
- プロジェクトのタイトルとサブタイトル
- メインビジュアル（プロジェクトのイメージが視覚的にわかるもの）
- 氏名、キーワード
- 成果物へのリンク
- 背景と目的 他、概要部分の整理
成果物の公開について
- Webサイト：GitHub Pages / GoogleSites ・・
- PDF冊子：GitHub Repository / Google Drive 共有 / OneDrive 共有
- 現物：撮影して学科サイトに直接掲載
第５回｜2026.05.18
はじめに
- 相互評価シートへのリンクは、各自のタイミングで無効化して下さい。解放したままにすると、悪戯の書き込み等が入る可能性があります。
%%相互評価シート%% ご協力ありがとうございました。
第５・６回の演習について
- 各自のテーマで制作に集中する期間となります（第７回は成果報告）。
- この期間中にページの未記入の部分（目的・背景など）を埋めて下さい。
- 同様に、ページの上部にプロジェクトのビジュアルを掲載して下さい。
- 毎回、以下の形式で進捗記録を記載して下さい。
**2026.05.18 ***作業の記録 -◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯◯◯、◯◯◯◯◯◯ ~ ***MEMO（ToDo項目など） -◯◯◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯、◯◯◯◯◯◯
補足講義
第４回｜2026.05.11
はじめに
- 今回は TEST の段階です。それぞれのプロトタイプを相互評価するかたちで、第三者からの意見をもらい、その後のブラッシュアップにつなげます。
- 次回以降
- 第５、６回は制作を中心に行い、その間、１人１回進捗報告
- 第７回は、第１Qの成果のプレゼンテーションです。
本日の演習の流れ
- 1. 相互評価シートの作成とリンク掲載
- 2. 他の受講生のページを順に閲覧し、評価シートにコメントを記載
- 3. 次週までに・・ 参考となったコメントを本日の進捗記録部分に整理
- 参考イメージ：JohnSmith/情報デザイン演習IIA
テストについて
テストは、プロトタイプを試用してもらうことで、ユーザーからのフィードバックを得るとともに、ユーザーの共感を高めるための段階です。
- テストは、「ユーザーがそれをどのように認知するのか」、また「ユーザーはそれに対してどのようなやふるまいをするか」を理解する機会です。
- テストは、ユーザーが生活している実際の環境の中で行うのが理想です。しかし、テストを実際の状況で実施できない場合（今回のような遠隔評価もそのケース）は、擬似的な環境でそれを追体験できるように工夫しましよう（例えば、あなた自身が実際にそれを扱う場面を動画で見せるなど）。
テストの目的
- プロトタイプとアイデアを改善するため
テストはプロトタイピングを繰返してアイデアを改善する目的で行います。 - ユーザーの認知や行動について理解するため
テストは、観察と関わりを通して「共感」を構築する機会でもあります。また、予期せぬ「気づき」の機会でもあります。 - 着眼点を見直すため
テストは、私たちが問題を正しく捉えていなかったこと、また、正しい課題設定をしていなかったことを気づかせてくれる機会でもあります。
テストの要点
以下の説明は、リアルにテストが実施できる場合の一般論です。
- プロトタイプは、ユーザーが評価を行うための説明資料としてではなく、ユーザーがリアルに反応できる体験素材として準備します。
- 説明は行わず、とにかく「見せる」「触らせる」が重要です。
- ユーザーがプロトタイプを「自ら解釈する」時間を設けることが重要です。
- ユーザーがプロトタイプをどのように扱うか（どこで使い方を間違うか）、また、どのような反応をみせるかを「観察」しましょう。
- ユーザーがプロトタイプについて発した言葉や、ユーザーの発した疑問に耳を傾けましょう。
- ユーザーが「比較」できるように、複数のプロトタイプを試しましょう。比較をさせることで、潜在的なニーズが明らかになることがあります。
相互評価シートの準備
それぞれのプロジェクトのプロトタイプについて、全員からコメントをもらうために Googleスプレッドシート（共同編集シート）を用意します。
- 1) Googleドライブにシートを作成
- マイドライブ上で、右クリック＞新規スプレッドシート
- 汎用シートから名簿をまるごとコピー＆ペーストして、自分自身の行をグレーにして下さい。
- 作成したシートを 右クリック ＞ 共有
- 「制限付き」を「リンクを知っている全員」に変更
- 2) 共同編集を可能にする
- 「閲覧者」を「編集者」に変更
- 3) 学科サイトからリンク
- 上記のダイアログ上で「リンクをコピー」をクリック
- このリンクアドレスを以下の形式で貼ればOKです。
[[プロトタイプ評価シート>https://docs.google.com/sprea・・・sharing]]
この情報は、自身のページの上部の目立つ場所に記載して下さい。
次週までに・・進捗記録にコメントを整理
**2026.05.11 ***見出された問題点 -◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯◯◯、◯◯◯◯◯◯ ~ ***好評を得た点 ＞ プロジェクトの特性として -◯◯◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯◯◯、◯◯◯◯◯◯ ~ ~
参考
- 冊子系の作品を外注製本する方法
- フォトブックの利用：https://photobook.kitamura.jp/
- 一冊から格安製本：https://www.seichoku.com/
- 本格的なネット印刷：https://www.printpac.co.jp/
- ページ物のデータの作り方
第３回｜2026.04.27
はじめに
- 各自の SubMenu に [ 氏名 ] /情報デザイン演習IIA_01 を追加して下さい。
II の部分は、ローマ数字ではなく、大文字の [ I （アイ）] ２つです。
- 受講生の方のログ（テーマ、アイデア）を確認します。
受講生一覧
- 今後の予定
- 第４回：テスト ＞ 全員の取り組み、プロトタイプを相互評価
- 第５回：評価結果の整理 ＞ アイデアの更新 ＞ 本制作へ
- 第６回：本制作
- 第７回：成果報告
プロトタイピングについて
プロトタイピング（Prototyping）とは、実際に目で見て、手で触れることができるモノを作ること、ソフトウエアで言えば、入力から出力までの一連のプロセスを確認できる試作品を制作することを意味します。
プロトタイプ、モックアップ、試作品・・ざっくり言えば似たようなものです。
- プロトタイピングの目的
プロトタイピングの目的は、アイデアに対するユーザーの反応を見ることにあります。構想中のアイデアの「全体像」がある程度具体的なカタチになることで、ユーザーは「これが完成すれば面白い！」、「便利！」、あるいは逆に、「説明がわかりにくい」、「使いづらい」といった感想を持つことができます。プロジェクトメンバーが気付けなかった点について、ユーザー目線で直感的な意見をもらうことで、ディスカッションが活性化します。- 利用者（ターゲット層）にアイデアを具体的なカタチで説明するため。
- 開発メンバー間でアイデアを具体的なカタチで見て議論するため。
- 最小限の投資で早期に多くの失敗を体験するため。
- プロトタイピングの要点
- 短時間でつくることができるものを使う
- 修正・改善しやすいものを使う
- お金をかけずにつくる
- 利用者が全体を見て・触ることができるようにつくる（プロダクト）
- 利用者が全プロセスを体験できるようにつくる（Web・ソフトウエア）
- プロトタイプで何を確認したいのかを明確にする
- 大きさを確認したい ＞ 大きさに忠実な模型を作る
- 手触りを確認したい ＞ 素材を忠実使う（さわる部分的のみ）
- 操作性を確認したい ＞ インターフェイス部分のみ再現（その他はダミー
進捗報告の記載
以下の雛形を 学科サイトの個人ページ に、コピー＆ペーストするかたちで、今週の進捗報告を記載する枠組み用意して下さい。
**2026.04.27 ***成果物の仕様・プロトタイプ 画像等を掲載して下さい。 -◯◯◯◯◯、◯◯◯◯◯◯ -◯◯◯◯◯◯◯、◯◯◯◯◯◯ ~
「成果物の仕様・プロトタイプ」の記載例
- 冊子系プロジェクトの記載事例
#image(台割り.png) 台割りイメージ #image(表紙.png) 表紙イメージ
- 動画系プロジェクトの記載事例
#image(ストーリーボード.png) ストーリーボードまたは絵コンテ #youtube(ABCDEFG) 全体の流れがわかる １分間のダイジェスト映像 #youtube(ABCDEFG) 技法についての試作映像
- Web系プロジェクトの記載事例
#image(サイトマップ.png) サイトマップ #image(ワイヤーフレーム.png) サイトのワイヤーフレーム https://xxxx.github.io/project/index.html サーバーの動作確認（プロトタイプサイト）
用語の参考イメージ
- GoogleImage:台割
- GoogleImage:束見本
- GoogleImage:絵コンテ
- GoogleImage:ストーリーボード
- GoogleImage:サイトマップ
- GoogleImage:Webサイト ワイヤーフレーム
仕様書・プロトタイプ等制作ツール
- Figma：Googleアカウントを利用してアカウント登録すると利用可能
- Draw.io：GoogleDrive アプリケーションとして登録可能
- Spread Sheet：サイトマップ、台割りなど、セルを利用した図表の作成が簡単
第２回｜2026.04.20
はじめに
学科サイト個人ページの以下の部分を記載して下さい。
- ページの MainTitle の部分に、自身のプロジェクトタイトルを記載
- その下の SubTitle の部分に「これは何か？」を１行で端的に記載
- 概要部分（背景と目的以下）を順次記載
いずれも現段階での「仮のもの」でOK。後日修正可です。
現状調査（分析）
デザイン思考のプロセスにおいて、現状の問題を見出し、何をどうするべきか、その課題を定義する・・という作業は非常に重要です。極端に言えば、課題が決まれば（あとはアイデアを考えて実行するだけなので）プロジェクトの大半はできたも同然です。
そこで、まずは、あなたが取り組もうとしているプロジェクトについて、以下のような現状の調査・分析を行って、最終的に「課題の定義」につなげて下さい。
- プロジェクトテーマと同様の「テーマ内容」に関する先行事例を探す。
自身のテーマ内容に近い情報提供を行っているサイトをWeb上で調査して、そのURLを報告記事として列挙して下さい。 - プロジェクトの成果物の「表現形式」に関する先行事例を探す。
- プロジェクトのテーマに関わる「時間的な問題（歴史）」について調査する
- プロジェクトのテーマに関わる「空間的の問題（地理）」について調査する
- プロジェクトのテーマに関わる「技術」について調査する
課題を整理する
現状の調査が終了して、ある程度予備知識がついたところで、プロジェクトの遂行にあたって「解決すべき課題」を整理して下さい。
- 公開方法
- 成果物のネーミング
- 成果物の形式（分量とサイズ）
- 成果物の構成
- 素材（イラスト・写真・記事等）の入手方法・生成方法
- 制作環境と方法
- その他、決める必要があるものをすべて「課題」として列挙する
アイデア出し
アイデア創出（Ideate）は、定義された目的や方向性を実現するためのアイデアを量産する段階です。この段階では、ブレインストーミングや、アイデア創出技法を活用して、質よりも量を重視して、考え得るさまざまなアイデアを書き出してみます。
解決すべき複数の課題について、どれからでも構いません。着手しやすいものからアイデア創出を行なって下さい。何かひとつが決まると、そこから別の課題の方向性も自ずと絞り込まれていきます。
以下、アイデア創出に関わる一般的な知見、手法について紹介します。
- ブレインストーミング（BS法: brainstorming）
ブレインストーミングは、アレックス・F・オズボーンによって考案された会議方式のひとつで、みんなでアイデアを出し合う際に、相互の連鎖反応や発想を誘発する技法です。みんなが自由な発言の機会を得られるよう、ブレストを行う人数は、5 - 7名程度が望ましく、人数が多い場合は小グループに分けて、それぞれの成果を持ち寄る・・といったケースもあります。ブレストには、一般に以下のような原則があります。- 他者の発言を批判しない
- 判断・結論を出さない
- 荒削りな考えを歓迎する
- 質より量を重んじる
- アイディアを編集して発展させる
- KJ法
文化人類学者の川喜田二郎氏がデータをまとめるために考案した手法で、そのアルファベット頭文字をとって KJ法。ポストイットとマーカー、そしてホワイトボードを使って、以下のように情報を整理していく手法で、おそらくみなさんも総合学習の時間等で経験したことがあるかと思います。- ポストイット1枚に対して絵や字で1つのアイデアを書く
- たくさんのポストイット＝アイデアをホワイトボードに貼る
- 全体を眺めながら、それを貼り替えて、グルーピング
- アイデアのカテゴリーや方向性を絞り込んでいく・・
- 参考事例
- AIの活用
最近は、ブレーンストーミングの段階で、AIにタタキ案を作成させることで、アイデアの抜けを防止する・・というのが一般的です。
本日の進捗記録の記載・公開
本日の日付を「中見出し」として、現状調査の結果と解決すべき課題、さらに個々の課題に対する複数のアイデアを箇条書きで記載して下さい。
**2026.04.20 ← 中見出し ***現状調査（先行事例等） ← 小見出し -◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ -◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ ~ ***解決すべき課題（ToDoリスト） -1. ◯◯◯◯◯◯◯◯ -2. ◯◯◯◯◯◯◯◯◯◯◯ -3. ◯◯◯◯◯◯ ~ ***制作上のアイデア（課題ごとに複数のアイデア） -1. ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯ --◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ --◯◯◯◯◯、◯◯◯◯◯◯◯◯ -2. ◯◯◯◯◯◯◯◯◯◯◯◯◯ --◯◯◯◯◯、◯◯◯◯◯ --◯◯◯◯◯、◯◯◯◯◯◯◯◯ -3. ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ --◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ --◯◯◯◯◯、◯◯◯◯◯◯◯◯◯ ~ ~
最終的に
- 採用するアイデアを太字で強調
文字列を ' ' ( SingleQuotation x 2 )で囲むと、強調表示 になります。 - 採用しないものは、取り消し線
文字列を % %（ Percent x 2 ）で囲むと、取り消し線がつきます。
補足講義
- 冊子の制作について
- Illustrator で複数ページ：https://creators-plus.jp/illustrator-pdf/
- Adobe InDesign を使う：https://www.adobe.com/jp/learn/indesign
- Webサイトを作成公開する方法について
- GoogleSiteの利用 ＞ GoogleSites
- HTML+CSS によるコーディング
＋ GitHubPages あるいはレンタルサーバーへアップロード公開 - WordPress（ブログサイト）の利用 ＞ WordPress
第１回｜2026.04.13
科目概要
本科目、演習Aは「情報とメディアの歴史、原理、構造、機能についての「理解」を深めるとともに、ソーシャルデザインの観点から新たな情報環境の構築に関するデザイン提案を行う」ことを目的とした科目です。
ソーシャルデザインは「自分ゴト」から・・とよく言われます。１年次の演習では半径3m - 10m、２年次は半径100m、３年次は半径10km（地域社会）へと、徐々に活動範囲を広げることをイメージしています。
演習テーマ１｜第１週 - 第７週
半径 100m の「 面白い！ 」
- 未だ「情報化」されていない、「面白そうなもの」を、最適な情報媒体を選んで「情報化（見える化）」する・・というのがこの演習の趣旨です。
- 現在のあなたの生活拠点から半径100mあたりを目処に、調査・撮影・録音・録画等が可能な「ヒト、モノ、場所、コト」を探して下さい。
求める成果物
選ぶテーマによって、公開に適した媒体は異なります。紙媒体、映像媒体、Web媒体、あるいはイベントのような時限つき「場」の提案。成果の最終形態（公開情報）は 以下のいずれでも構いません（組み合わせも可）が、成果物に至る過程で必要となるソフトウエア等が利用できるか否か、そのあたりもふまえて、方針を決めるようにして下さい。
- ポスター（グラフィック中心）
- PDF冊子（文章とグラフィックス）
- 映像
- 音楽・音声
- Webサイト
- イベントの開催
参考事例
以下、昨年の先輩のプロジェクトの成果です。
演習に必要なツール
各自のテーマに応じて、なるべくシンプルなツール（お金をかけずに準備できるもの）を使って下さい。演習A は「考える」ことに重きを置くので、ツールは何でも構いません）。
パソコンが無い方は、スマートフォンのアプリ上で制作できるものでも構いません。さらに言えば、成果物がアナログ手作業のものでもかまいません（最終的に学科サイト上に写真等が掲載できればOKです）。
- 情報収集ツール
- カメラ
- 筆記具（アナログ、デジタルを問いません）
- アイデア創出・プロトタイプ制作・本制作のためのツール
- 情報公開のためのツール
- 学科サイトの個人ページ にて公表
- 学科サイトの個人ページ にて公表
演習の進め方
デザイン思考のプロセスに沿って進めます。
- １. テーマ設定（共感）
- ２. 現状分析（調査・問題定義）
- ３. アイデア創出
- ４. プロトタイピング
- ５. テスト（中間発表） ＞ プロトタイプの改善（４に戻って繰り返し）
「テスト」というのは、プロトタイプを試用する・・という意味で、「中間試験をします」という意味ではありません。 - ６. 実装 ＞ 実運用
- 付記：テーマ設定の段階から情報を共有（公開）します。
本日の演習
- テーマの候補を複数挙げて、その中から１つを選定します。
- ３限目の時間は、学科サイト個人ページ>の「進捗報告 2026.04.13」 の部分に、テーマの候補を複数、また参考となるリンク等を掲載してください。
- ４限目にそれぞれのテーマ候補を見て意見交換し、テーマを絞り込みます。
本日分のイメージ
**2026.04.13 ***テーマの候補 - - - ~ ***参考リンク - - ~ ~
参考
最も簡単にWebサイトを構築・公開する方法について
＞ GoogleSites
成績評価・単位認定について
単位認定に必須の要件
- 個人ページにプロジェクトの概要と作業記録がすべて記載されていること。
- 成果物を公開していること。
- 付記：受講生それぞれの過去の経験値が異なることを前提に、作品のクオリティに関する評価は ＋α 部分とします（要件を満たしていれば A）。