情報デザイン専攻では、はじめてプログラミングを学ぶ1年生向けに「プログラミング入門」という授業があります。2019年度までは図形やアニメーションを描きながら、楽しくプログラミングを学ぶことができるProcessingを使用してきましたが、2020年度はオンライン授業に対応することもあり、ProcessingをJavaScriptで書けるようにしたライブラリp5.jsを導入しました。p5.jsはProcessingをJavaScriptに移植したものなので、少し書き方は異なりますが、自分の手元に開発環境が整っていなくても、Webブラウザ上でコーディングや共有が簡単にできるという利点があります。

2020年度も最後の3回の授業時間を使ってプログラミングコンテストを実施しました(これまでの結果はこちらからご覧になれます。第1回コンテスト第2回コンテスト第3回コンテスト第4回コンテスト第5回コンテスト第6回コンテスト第7回コンテスト)。2020年度のコンテストのテーマは「持続可能な世界の実現に向けて」にしました。2015年に国連によって定められた、2030年に達成すべき「持続可能な開発目標」SDGs。SDGsの目標又はターゲットの中から一つ選び、その知名度を向上させるための作品作りです。わかりやすく楽しめるプロモーションアニメ又はインタラクティブメディアの制作を課題としました。

こうして1年生全員がコンテンストに取り組みました。オンライン授業下では、なかなか友人と相談しながら進めるなどの機会には恵まれませんでしたが、そのような環境の中でもアニメーションやマウス・キーボード操作を駆使した素晴らしい作品が多数制作されました。今年度は創意工夫が凝らされた作品が多く、教員3名による審査は難航しましたが、優秀賞(ゴールド)4件、優秀賞(シルバー)1件を選出しました。次の通りご報告いたします。

受賞されたみなさん、おめでとうございます。また、惜しくも受賞できなかった方の中にも素晴らしい作品が多くありました。是非、これからも楽しんでプログラミングを続けて欲しいと願っております。

以下の受賞作品の画像をクリックすると、その作品が別タブが開きます。画面を一度クリックしてから、マウスやキーボードで操作して下さい。スマホのタッチには対応していない場合がありますので、必ずPCでご覧下さい。


【優秀賞(ゴールド)】クリックで学ぼう!SDGs

ClicktoLean1

作者のコメント:SDGsという一見難しそうなテーマを、いかに分かりやすく飽きさせない様に伝えるかで最初はとても悩みました。色々考えた末、SDGsの解説をテキストでしっかりする反面、周りの風景にアニメーションをつけて賑やかな雰囲気にする事で、閲覧意欲が上がる様にしました。素材はほぼ全て自作したのでとても時間がかかりましたが、プログラミングで思い描いていた通りに動いてくれた時には大きな達成感が得られて楽しかったです。
今後も様々な授業を通して、プログラミングのスキルを上げていけたらと思っています。


【優秀賞(ゴールド)】地球にやさしく!

Earth

作者のコメント:今回のテーマは「持続可能な世界の実現に向けて」ということで、SDGsの17の目標から
「13.気候変動に具体的な対策を」を宣伝しようと思いこの作品を制作しました。気候変動に対して私たちが日常でできる小さなことを、簡単に確認してもらえるように場面ごとに2択が出る作品になっています。場面の切り替えやポイント管理が大変で、想像しているものを表現するのはとても難しかったのですが、これまでの授業やインターネットで調べたこと、友人からの教えによりなんとか形にすることができました。まだ理解できていない部分も多いですが、様々な表現ができるようにこれからも勉強に励みたいと思います。


【優秀賞(ゴールド)】クリーンエネルギー

CleanEnergy

作者のコメント: 地球温暖化が進んでいる世の中において、エネルギーをクリーンにするというテーマは私たちにとって大変身近な問題でもあり、改善していかなければいけない問題だと思いこのテーマを選びました。この作品のテーマは世界全体が取り組まなければいけないことと、私たちが日々の生活で取り組むことが出来るエネルギーの節約についてを、アニメーションとスライド形式によって分かりやすく伝えるということです。私にとって初めてのプログラミングだったので、頭の中のイメージを作品として再現することはとても難しく大変苦労しました。今後もたくさんのプログラミング技術を吸収して、スキルの向上をしていきたいと思います。


【優秀賞(ゴールド)】分別ごみ拾い

Game

作者のコメント:至ってシンプルなゲームシステムです。しかし、細部までこだわり抜いた作品でもあります。「持続可能な世界の実現に向けて」ということで、スコアが上がるにつれて晴れていく空は、私たちが向かう明るい未来とリンクしています。この作品は、母の「最近はお肉のトレイも洗ってプラスチックごみで捨てているから燃えるごみの袋が軽い」という何気ない発言から生まれました。この作品の着想を与えてくれた母、私が理解できるまで質問に回答してくださった先生、そして試運転に付き合ってくれた友人たち、ついでに直接は関与していないけれど父に、この場を借りて感謝を伝えさせていただきます。長くなりましたが、この経験を自信として、より一層楽しみながら、精進していきます。


【優秀賞(シルバー)】節電

Saving

作者のコメント:「持続可能な開発目標」SDGsの七つ目の目標「エネルギーをみんなに、そしてクリーンに」より、節電を推奨するアニメーションスライドを作成しました。このスライドの一番の特徴として、キーボードの上下キーを電源スイッチに見立て、ONにした場合とOFFにした場合で場面が切り替わるようにプログラムしています。節電を行うことによって様々な方面に対して良い影響があるということが伝わっていたら嬉しいです。
自分が作りたいものを実際に再現することはとても難しく、試行錯誤しながらかなり時間をかけて完成させた作品なので、この経験を生かし、今後も引き続き知識を蓄えながら更に発展した作品を作れるよう努力していきたいと思います。


情報デザイン専攻では、はじめてプログラミングを学ぶ1年生向けに「プログラミング入門」という授業があります。この授業では、図形やアニメーションを描きながら、楽しくプログラミングを学ぶことができるProcessingと呼ぶプログラミング言語を使用しています。

2019年度にも最後の3回の授業時間を使ってプログラミングコンテストを実施しました(これまでの結果はこちらからご覧になれます。第1回コンテスト第2回コンテスト第3回コンテスト第4回コンテスト第5回コンテスト)、第6回コンテスト。2019年度のコンテストのテーマは「レシピ」にしました。手順物語性や変化を入れ込んだ、動きのあるインタラクティブな作品作りに結び付けてほしいとのねらいがありました。

こうして1年生全員が取り組んだコンテンストですが、2019年度もProcessingのアニメーションを駆使した素晴らしい作品が多数制作されました。その中から教員3名による審査の結果、優秀賞(ゴールド)2件、優秀賞(シルバー)3件を選出しましたので、ご報告いたします。

受賞されたみなさん、おめでとうございます。また、惜しくも受賞できなかった方の中にも素晴らしい作品が多くありました。是非、これからも楽しんでプログラミングを続けて欲しいと願っております。

以下の受賞作品の画像をクリックすると、その作品が別タブが開きます。画面を一度クリックしてから、マウスやキーボードで操作して下さい。スマホのタッチには対応していない場合がありますので、必ずPCでご覧下さい。Processingで制作されたコードは、processing.jsライブラリでWebページ上で動くように変換しております。


【優秀賞(ゴールド)】Let’s make pizza by processing!

pizza

作者のコメント:テーマである「レシピ」から食べ物を連想し、自分好みのピザのトッピングを楽しむことができる作品が作りたいと考え制作しました。基本部分を完成させた後、トッピングの種類やピザの焼き目をこだわったり、名前入力や日付表示、スクリーンショット、アドバイス表示などの機能を追加したりすることで、より興味を持って遊んでもらえるように工夫しました。自分のアイデアを表現するために本やインターネットで調べ、うまくいかない時は別の表現方法を考え探すなどの苦戦をしたり、 Webページ上で動かない機能があるなどの反省点があったりましたが、とても勉強になる良い経験となりました。今後はより視野を広げて、人の心を動かすことのできるコンテンツ制作を目指し、学びを深めていきたいと考えています。


【優秀賞(ゴールド)】花のレシピ

flower

作者のコメント:レシピがテーマということで、操作によって変化し、状態が移り変わっていくようなものにしようと考えた結果、花を育てるゲームを制作することにしました。この作品で一番大事なのは分岐だと考えます。花が育つまでに全部で3回操作を行うことが出来ますが、水か栄養剤のどちらを与えるかによって育ち方が変わっていきます。これには私の実体験も生かされています。また、見えない部分ですが、if文と状態を示す変数を利用して、タイトルとゲーム画面の状態遷移を戻り値なしの関数で行ってみました。こうすることですっきりまとまったのではないかと思います。あとは一番綺麗に育てることが出来た場合に、ちょっとしたお楽しみのヒントが表示されるようになっています。賞をいただけてとても嬉しいです。ありがとうございました。


【優秀賞(シルバー)】おだんご

odango

作者のコメント:今回のテーマ「レシピ」から私はおだんごが完成するまでの過程をつくりました。場面の切り替えやキーボードを押して操作できるようにするところに苦戦しました。おだんごを焼いているときに湯気を出したり、おだんごの焼き加減の色を工夫したので、みなさんにおいしそうと思ってもらえると嬉しいです。今後もプログラミングを勉強して、楽しくいろいろな作品がつくれるように頑張っていきたいです。


【優秀賞(シルバー)】恐竜のシチュー

dino

作者のコメント:この度は優秀賞に選んでくださりありがとうございます。今回の作品は、操作はすべてクリックで場面が展開していく作品を制作し、ストーリー性のあるゲームで楽しく見ていただけるような作品制作を心掛けました。ストーリーとしての面白みを出すために、あえて現実味のない内容にしました。レシピの要素として、このストーリーの結末は2種類用意してありますが、それぞれ最後の場面までの過程を「レシピ」と考えました。特に頑張った点は、クリックのタイミングをシーンごとに設定したところと、クリックの範囲指定です。初めてのプログラミング制作でしたが、頭の中でやりたいことがたくさん思い浮かんでしまい、時間はかかってしまいましたが、1つの作品を完成できたことに大きな達成感を感じることができました。多くの改善点はありますが、今後も精進していきたいと思います。


【優秀賞(シルバー)】mouse de cooking!

hotcake

作者のコメント:今回のテーマの「レシピ」から料理をイメージし、マウスを動かすと遅れてついてくる動きを焼く過程に使いたいと思いこの作品を制作しました。炎の揺らめきや時間経過に応じた焼き色の変化など細かい部分にもこだわりました。卵が落ちてくる部分の作成が1番大変でしたが、毎週の課題によって得た知識の中でどのように動きを表現しようか考える時間が楽しかったです。もっといろいろな表現ができるように今後とも精進していきたいです。


2年生必修授業「クリエイティブ思考法」で、様々なクリエイティブを生み出すデザイン会社でアートディレクター/デザイナーをされている新井俊樹先生にレクチャーを行なっていただきました。また、同じ会社に所属されているデザイナーの豊田メルさん、アカウントディレクターの岡崎睦さんにもお越しいただきワークショップを学生と一緒に行なっていただきました。

 

DSC04915

新井 俊樹 / Toshiki Arai
Art Director / Designer / 株式会社Neru代表 /株式会社ラナエクストラクティブ所属 / 武蔵野美術大学非常勤講師 / 三日坊主防止アプリ「みんチャレ」UIデザイナー
https://ne-ru.com/
https://www.ranaextractive.com/

 

今回は、実際のデザイン会社で行われているアイデア出しの様子や与件に対する企画の生み出し方のお話に加え、キャラクターデザインのワークショップという盛りだくさんな内容でしたが、大変な盛り上がりをみせました。

ブレインストーミングやアジャイル開発のお話は、グループワークでアイデア出しやプロトタイピングを行う学生にとってとても参考になったと思います。また、キャラクターデザインのワークショップでは、短い時間設定のなか、学生が楽しみながら真剣に取り組む姿が印象的でした。

DSC04919

DSC04924

 

同じワークショップに挑戦されたラナエクストラクティブの豊田さんと岡崎さん(岡崎さんは中野ゼミの卒業生!)お二人のプレゼンでは、そのアイデアの質と量に会場が湧きました。ごく短い時間にも関わらず、シートにはびっしりアイデアが書き込まれ、単なるデザインだけではなく、キャラクターの特徴設定、SNSの拡散方法、地域活性にまで結びつけて展開されていました。会場は先輩方のレベルに圧倒されましたが、ぜひ背中を追いかける学生が出てきて欲しいと願っています。

短い時間でしたが充実した講義となり、学生にはとても良い刺激になりました。

DSC04932
アイデアシートに収まりきらないほどアイデアが溢れていたデザイナー豊田さん

DSC04929
アカウントディレクター岡崎さんの細部までしっかり考えられたアイデアシートに見入る学生たち

DSC04933

 

6月9日(日)に千代田校でオープンキャンパスが開催されました。多くの方にご来校いただき、ありがとうございました。今回の様子を少しアップします。

3専攻紹介作品

今年もH棟1Fエントランスに情報デザイン専攻中野ゼミ3年生が制作した映像ウォールを展示しました。今回は社会情報学部3専攻の学びを表現したイラストのアニメーションとキーワードが散りばめられています。制作時間は約4週間というタイトなスケジュールでしたが、なんとか間に合わせました。7月のオープンキャンパスではさらにブラシュアップして展示する予定です!

openlecture_fujimura

藤村先生の体験授業では、独自に開発したWebアプリの「スペースおーたん」というゲームを実演していました。高校生のみなさんが、自分のスマホを振って大妻女子大学公式キャラクター「おーたん」を操り、ゴールを目指すというものです。競争では大いに盛り上がりました。さらに、こうしたWebアプリの仕組みの解説もあり、専攻の学びでこんなゲームも作れるんだということに驚いている様子が印象的でした。

次回オープンキャンパスは7月14日に行います。
ぜひ遊びに来てください!

オープンキャンパス2019

情報デザイン専攻では、はじめてプログラミングを学ぶ1年生向けに「プログラミング入門」という授業があります。この授業では、図形やアニメーションを描きながら、楽しくプログラミングを学ぶことができるProcessingと呼ぶプログラミング言語を使用しています。

平成30年度にも最後の3回の授業時間を使ってプログラミングコンテストを実施しました(これまでの結果はこちらからご覧になれます。第1回コンテスト第2回コンテスト第3回コンテスト第4回コンテスト第5回コンテスト)。平成30年度のコンテストのテーマは「過去と未来」にしました。物語性や変化を入れ込んだ、動きのあるインタラクティブな作品作りに結び付けてほしいとのねらいがありました。

こうして1年生全員が取り組んだコンテンストですが、平成30年度もProcessingのアニメーションを駆使した素晴らしい作品が多数制作されました。その中から教員3名による審査の結果、優秀賞(ゴールド)2件、優秀賞(シルバー)2件を選出しましたので、ご報告いたします。

受賞されたみなさん、おめでとうございます。また、惜しくも受賞できなかった方の中にも素晴らしい作品が多くありました。是非、これからも楽しんでプログラミングを続けて欲しいと願っております。

以下の受賞作品の画像をクリックすると、その作品が別タブが開きます。画面を一度クリックしてから、マウスやキーボードで操作して下さい。スマホのタッチには対応していない場合がありますので、必ずPCでご覧下さい。Processingで制作されたコードは、processing.jsライブラリでWebページ上で動くように変換しております。


【優秀賞(ゴールド)】

eisyaki

作者のコメント:映写機から映される6つの情景は、いずれも多くの女性が通ずる場面をセピア調で再現しました。全ての顔が白抜きになっているのは、皆様の顔をあてはめてみていただきたいと考えたからです。また「過去と未来」というテーマから連想して、赤子の未来、妊婦の過去だけでなく、まだ顔の見えない胎児の未来が最初のシーンに繋がるようにしました。


【優秀賞(ゴールド)】

eisyaki

作者のコメント:ジブリ映画のopで出てくる映写機を回すおじさんをヒントにムービーっぽく仕上げました。こだわりは映画がほんとに始まるかのように3、2、1のカウントダウンからスタートさせて、ワクワク感をひきたたせたことで、これは毎週の課題で得た知識を応用してコードを作りました。また、この作品は全てrect(30,50,50,60)など座標指定して図形を作って人や風景、物を表してるのがこだわりです。8ビットのようなデジタルらしい雰囲気で揃えたかったので頑張りました。プログラミング初心者で最初は全然分からなかったのですが、難しいコードを理解して自分で応用してアニメーションを完成させた時の達成感がとても大きかったです!2年生でも頑張ります!


【優秀賞(シルバー)】

FutureandPast

作者のコメント:「過去と未来」というテーマが発表され、その時私はゲームを作りたいと思っており、ゲームを作るとするならばどういった形にすべきか、どうのようにテーマと関連付けるかと思案しました。最終的にはクラスメイトと話し合い、先生にご教授いただきながら制作しました。このゲームは過去と未来のステージがあり、方向キーを操作しながら人間が穴を避けながらゴールまで走るゲームです。ポイントを取る判定と穴に落ちる当たり判定の調整に苦労しました。また、操作がわかりやすい・しやすいように心がけました。今後はこのゲームの改良・改善はもちろん、Processingを含めたプログラミング言語の勉学に励みたいと思います。


【優秀賞(シルバー)】

space_time

作者のコメント:テーマが昨年度よりはっきりしていたということもあり、どのようなものを作るかは想像しやすかったです。私はプログラミングを作るのがあまり得意ではないので、自分の得意な絵で表現していこうと思い、今回このような作品を作りました。1年前までは自分が1からこのような作品を作るとは思っていなかったのでとてもいい勉強になったかと思います。勉強不足のためできないことも多く悔しい思いもしましが、今回この賞に選ばれたことを今後の糧にしてさらに勉強に励んでいきたいです。


6月に続き、7月、8月もオープンキャンパスが開催されました。とても暑い日でしたが、多くの方にご来場いただき、ありがとうございました。今回も様子を少しだけアップします。

IMG_1548

専攻ガイダンスの様子

松田先生の専攻ガイダンスには、ロボット「ペッパー君」が登場。松田先生のペッパー君はとても働き者です!専攻の学生の普段の取り組みや就活状況など、詳しい解説に耳を傾ける受験生の姿が印象的でした。

 

IMG_1550

体験授業の様子

堤先生の体験授業では、実際の授業が行われるコンピュータールームで3DCG制作を体験しました。今注目されているVRやARなど、リアルな世界とバーチャルな世界を結びつける技術や、制作上の工夫について解説されていました。勉強になります!

 

DSC_9097

1Fエントランスの学生作品

H棟1Fエントランスホールでは、中野ゼミの学生(3年)によるプロジェクションマッピング作品を展示。壁に吊るした傘に映像を投影しました。中央ディスプレイの映像にもタイミングを合わせました。
※8月でこのプロジェクションマッピング展示は終わりになります

 

IMG_1568
7月、8月のオープンキャンパスは、すっかり雨もあがって、良すぎるくらいのお天気でした!多くのご来場、ありがとうございました!9月以降もオープンキャンパスは行いますので、ぜひ遊びに来てください。

 

 

情報デザイン専攻では、はじめてプログラミングを学ぶ1年生向けに「プログラミング入門」という授業があります。この授業では、図形やアニメーションを描きながら、楽しくプログラミングを学ぶことができるProcessingと呼ぶプログラミング言語を使用しています。今年からProcessingバージョン3.0を使用しています。

今年度も最後の3回の授業時間を使ってプログラミングコンテストを実施しました(これまでの結果はこちらからご覧になれます。第1回コンテスト第2回コンテスト第3回コンテスト)。今年のコンテストのテーマは「◯◯の物語」です。「◯◯」の部分は自由としました。このようなテーマにした出題者側の意図は「物語」は時間の経過による変化が不可欠ですので、アニメーションやインタラクティブな操作を取り入れた作品となることを期待したからです。期待を裏切ることなく、今年度もアニメーションを駆使した素晴らしい作品が制作されました。

その中から教員4名による審査の結果、優秀賞(ゴールド)3件、優秀賞(シルバー)3件を選出しましたので、ご報告いたします。昨年度までは「最優秀賞」1件と「優秀賞」数件を選んでおりましたが、本年度は優劣をつけることが難しかったため、このような形に変更させていただきました。受賞されたみなさん、おめでとうございます。また、惜しくも受賞できなかった方の中にも素晴らしい作品が多くありました。是非、これからも楽しんでプログラミングを続けて欲しいと願っております。

以下の受賞作品の画像をクリックすると、その作品が別タブが開きます。画面を一度クリックしてから、マウスやキーボードで操作して下さい。スマホではキーボードがないのでPCでご覧下さい。Processingで制作されたコードは、processing.jsライブラリでWebページ上で動くように変換しております。


【優秀賞(ゴールド)】

smallfish小さなお魚たちの物語

作者のコメント:テーマ「〇〇の物語」と聞いて、クリックすると場面が進展するようなものを作成しようとしましたが、
自分の思うようにはいかず悩むばかりでした。しかし、ふと有名なお話のワンシーンを思い出し、このような作品になりました。授業で習ったものや資料を探しながら作っていくのは、とても時間が掛かり大変でしたが、自分でプログラムを書いて思い通りに動いた瞬間が嬉しく、楽しみながら作ることが出来ました。その気持ちを忘れず、これからもどんどんプログラミングに挑戦して取り組んでいきたいです。(A.S.)

 

manある男の物語

作者のコメント:プログラミングに関してはほぼ初心者でしたが、授業の中で、作品を作っていく中で基礎から学ぶことができました。今回のテーマ「◯◯の物語」ときいて思い浮かんだのが絵本だったので、コンセプトを「電子絵本」にしました。調べつつ作るのは大変でしたが、思った通りのものを作ることができたと思います。しかし、今回実装できなかった機能が多々あるので改良していきたいです。また、画像表示に頼っているところがあるのでProcessingでの表現をもっと学びたいと思いました。頂いた賞に恥じぬよう、精進致します。(A.M.)

 

akazukin赤ずきんちゃんのおつかい!

作者のコメント:<追記予定>


【優秀賞(シルバー)】

fruits季節のフルーツ拾い

作者のコメント:まさか自分の作品が選ばれるとは思っていなかったので、連絡をいただいて驚きました。ありがとうございます。毎授業新しいことを学び、自分の手で一つ一つ形になっていくのはとてもおもしろかったです。最終課題では、もっとこうしたら良かったのではないかと今になって思う部分もあるので、今後の授業でもっと学び、より良いものを作れるよう頑張りたいと思います。(S.I)

 

kobit走る小人の物語

作者のコメント:この度は優秀賞に選んでくださりありがとうございます。今回のテーマが「物語」ということから小人の作品を作成しました。トレンドのレトロ感とシンプルさを求め限定した3色で仕上げました。また、動きや重力、速さを工夫することで差別化を図りました。多言語でのプログラミング経験はありましたが、ゲームを作ったのは初めてで思い通りに動くProcessingはとても面白かったです。これからもこの経験を生かして楽しくプログラミングを勉強していきたいです。(N.O.)

 

appleリンゴ物語

作者のコメント:プログラミングはほぼ初心者で、わからない事が多くとても難しく感じました。私は、決められた範囲の中だけで落下するプログラミングを作成してみたかったのでこの作品を作りました。最初は、上手くいかずとても苦労しましたが、少しずつ形になり出来上がりが目に見えとても楽しかったです。これからも、プログラミングを沢山勉強して今よりも完成度の高い作品が作れるよう頑張りたいと思います。(A.M.)


 

デザイン専攻の2年生の後期に開講されている「プログラミング論及び演習」という授業を昨年度に引き続き紹介します。この授業で使用するプログラミング言語は、2014年度から従来のC言語からJavaScriptに変更しまして2015年度は2年目となります。2015年度から私(藤村)と非常勤の山崎大助先生が授業を担当しております。

本年度は、JavaScriptの基礎を学んだ後、jQueryライブラリやp5.jsライブラリの活用方法などを学びました。p5.jsはJavaScriptでアニメーションや音楽を扱いやすくする新しいライブラリで、2015年度から導入しました。ちなみに、p5.jsについてはこちらにも記事があります。

授業の最後の3回では、授業で学んだ技術を駆使して自由にWebアプリを制作しました。以下に3つの作品を紹介します。HTML5対応のPC版ブラウザ(Chrome, Firefox, Microsoft Edge等)で閲覧した場合には、以下の画像をクリックすると、別ウインドウが開き、実際に操作することができます。

最初の作品は、マウスで画面上をクリックして隠されたヒントを読み、解読して部屋から脱出するゲームです。これを作成した学生によりますと脱出ゲームとしては難易度が低いそうですが、脱出ゲームに慣れていない人にとってはかなり難しいと思います。10分で解ければ天才かも?

脱出ゲーム
escape

次の作品はお絵かきツールです。PCに保存されている任意の画像を背景画像としてアップロードすることができ、お絵かき後、キャンバスを右クリックして画像をダウンロードすることができます。ちょっと手書きを加えたいときにとても便利ですね。

お絵かきボード
drawpict

最後の作品は以下の画像から想像できますようにキーボードです。PCのキーボードがキーボードとして:-)音楽を演奏することができますし、ドラムや音量や音程を変化させるイコライザーの機能もあります。詳しく説明しなくても使えると思いますので、是非、演奏してみて下さい。zキーを押すと音楽も流れます。

キーボード
music

この授業では、このようにjQueryやp5.jsのライブラリを使って、脱出ゲーム、お絵かき、キーボードといった幅広いWebアプリを自由に制作することができました。3年生、4年生では、この経験を生かして、本格的な作品制作にチャレンジして欲しいと思います。

情報デザイン専攻では、はじめてプログラミングを学ぶ1年生向けに「プログラミング入門」という授業があります。この授業では、図形やアニメーションを描きながら、楽しくプログラミングを学ぶことができるProcessingと呼ぶ言語を使用しています。

今年度も最後の3回の授業時間を使ってプログラミングコンテストを実施しました(これまでの結果はこちらからご覧になれます。第1回コンテスト第2回コンテスト)。今年のコンテストのテーマは「つながり」です。「つながり」という言葉から連想されるテーマを自由に取り上げ、アニメーションやインタラクティブな操作を取り入れた作品制作に取り組みました。

最後の授業では、Web上にアップロードされた4クラスの全作品を学生全員で相互鑑賞し、投票を行いました。この投票結果と教員による評価を合わせ、最優秀賞、優秀賞作品を選出しました。今年度はなかなかの力作ぞろいで、例年より多くの作品がノミネートされました。審査の結果、最優秀賞2件、優秀賞2件を選出しましたので、ご報告いたします。受賞されたみなさん、おめでとうございます。下の画像をクリックすると、別ウインドウが開き、HTML5対応のChrome、Firefox等(IEはバージョンによってNG)で閲覧した場合にはマウスやキーボードで操作することができます。

【最優秀賞】


yamanote

山手線の全駅を電車が順に走っていく作品です。コミカルな電車の描写が面白いだけでなく、走っている電車がどこを通過中かが画面下部のガイドに連動して表示されています。


sweets

星がまたたく月夜。スイーツをクリックすると、スイーツが勢いよくジャンプします。背景の星がまたたいたり、ジャンプの際に一緒にハートが飛び散るなど細かい工夫が施された、技術的にも評価の高い作品です。

【優秀賞】

gear

歯車で「つながり」を表した、歯車の美しさが際立つ作品です。歯車を動かす/止めるのを操作することができます。

train

電車の車両をユーザのキー入力で連結させ、連結後に走り出すことで「つながり」を表現しています。

これらの作品を作られた学生には、後日、「第3回プログラミング入門、プログラミングコンテスト」にふさわしい記念品が授与されます。残念ながら受賞とならなかった作品のなかにも大変素晴らしい作品が多くありました。この授業を通じて学んだことを生かして、2年生の授業でもますます腕を磨いていってほしいと思います。

受賞者のコメント(追記)

今回の作品は見てもらう人にインパクト、華やかさを感じてもらうこと、また触って遊べることをコンセプトに作りました。作品を作りはじめた当初はプロセッシングに苦手意識があり、自分が考えたアイデアをなかなかプログラムにすることができませんでした。そこで一度にすべてを作るのではなく、授業内容を復習しながら実現したいイメージを簡単に作りすこしずつ完成度を高め、苦手意識を克服しながら作品を完成させました。工夫した点はたくさんのランダム要素を加えたことです。右にはねたり左にはねたり、出てくる星やハートもそれぞれにいくつかのランダム要素が加えられています。また、後からソースがわかりやすく、変更しやすいように書くことも心掛けました。最優秀賞をもらい驚くとともに、嬉しさでいっぱいです。家族や友人、犬とも喜びを分かち合いました。(Y.T.)

「つながり」というテーマより、歯車同士の力のつながりを考え、今回作品を作りました。画像を使用せずProcessingのみで作品を作りたかったので形にするのはとても大変で時間がかかりましたが、この度優秀賞を受賞することができ、喜びでいっぱいです。自分が作りたいと思うものを形にするのはとても大変なことですが、達成感や自分への自信へと繋がっていくと思うので、これからも努力を怠らないよう頑張りたいと思います。(M.S.)

「つながる」というテーマから汽車の連結が思い浮びました。プログラミングは授業で習ったもので組むことができましたが、もう少しシンプルにまとめることができればよかったかなと思います。汽車の連結は、固定しておくものと動かすものとを区別して作るのに時間がかかり大変でしたが、私自身、一番気に入っているところです。これからも授業や自習を通してスキルを上げていきたいです。(F.M.)

 

<松田ゼミ-6 前へ>

報告者: 谷口鈴子、柳葉結花(情報デザイン専攻/松田ゼミ)

松田ゼミでは、3年生の社会情報学ゼミIで発想法の1つであるKJ法を実習します。実習では、9人いるゼミ生が2つのグループに分かれ、与えられた課題に対して、KJ法を用いて話し合うことで解決策を見つけていきます。今回の実習では、よりよい解決策を見つけ出すことよりもたくさんのアイデアを出すこと、ポイントになる点を明らかにすることを重点に置き、議論を進めました。

1. KJ法とはなにか?

KJ法とは、話し合いから集められた情報から必要なものを取り出し、関連するものを集め整理しまとめていくことでアイデアを見つけ出す発想法の1つです。KJ法では、課題に対する話し合いで出たアイデアや意見をカードなどに書き出しまとめ、似ているアイデアや意見を分類することで進めていきます。カードなどの紙を活用するところに大きな特徴があり、内容や質がまちまちな情報をまとめ、全体を把握するのに有効な技法といわれています。また、この方法は、個人の思考や会議での意見をまとめる際などに用いられ、例えば、まちづくりの分野などでも計画段階での住民意見の集約や、設計段階における関係者の意志の統一などに応用されています。今回のゼミでは、以下のようにしてKJ法を進めていきました。

  1. ブレインストーミング(以下、ブレスト)などで出されたアイデアや意見などをカードにまとめ、模造紙に貼り付けいく。
  2. カードを確認し、似たような意見同士をまとめ、グルーピングをしていく。グループごとにもタイトルをつけ、ほかのグループと関係があるものがあれば、大きな一つのグループにまとめていく。
  3.  グループを確認していき、グループごとの関係性を見つけていく。

最後は、発表資料にまとめて、ゼミ内で発表会を行いました。

2. ブレストした課題

今回、私たちがブレストした課題は「大妻女子大学、社会情報学部のホームページを見る人を増やすにはどうしたらいいか」ということです。この課題について議論するにあたり、対象者を、大学受験を控える高校3年生と、高校3年生を持つ両親に絞り、わかりやすく、見やすいホームページ(以下、HPとします)の作成案を作ることにしました。5月11日、22日の2週間にわたりゼミ生5人(瀬川、秋元、椎野、柳葉、谷口)でこの課題について話し合い(図1参照)、6月19日に発表会を行いました。

1

図1 ブレストの様子

3. ブレストで出た意見(主なもの)

現在の社会情報学部のHP(図2参照)をもとにKJ法を用いてブレストした結果、問題点が、大きく分け以下の3点になることがわかりました(図3参照)。

  1. 全体的にサイトが見にくい。
    サイトは文字の多さが目につき、読もうという気が起きない。各ページへのリンクが探しにくいために見たいページに行くのに時間がかかる。
  2.  サイトの作りがシンプルすぎる。
    サイトの色が2色しかなく、全面的に白色の割合が多く、単調なサイトに感じる。似たようなイラストがいくつも使われている上に、写真の少なさが画面の見にくさに繋がっている。
  3.  社会情報学部のニュース・トピックスの情報が在学生向けと一般向けで混在している。
    例えばイベントのお知らせも学生向けなのか、一般向けなのか判断がしづらい。また、専攻ごとに分かれていないのも見づらい。

2

図2.現在の社会情報学部のHP  

3                

図3.アイデアをポストイットに書き、グループ化、まとめた模造紙

これらの問題点に対し、リンクや、文字をまとめる、などのアイデアが出たので、画面の見やすさを高めることにしました。また、それだけでは寂しいHPになってしまうという意見が出たため、画像を多く利用するというアイデアを元に、ぱっとみただけでもわかるHP案を作成することにしました。ブレストを重ねていくうちに、大妻らしさ、そして女子大らしさを出したHPを作るのにはどうしたらよいかという課題を見つけ、話し合いを進めていきました(図4参照)。

4

図4 ブレストの結果をグルーピングしたもの

4. 解決策

KJ法の結果、得られた解決策を以下に示します。図5にこれをベースにし、自分たちで作成した例を示します。

  1.  誰がHPを見に来るのか、対象者をはっきりさせる。
    サイトを見に来る対象者が誰かということを考え、構成を女子高校生向けと保護者向けに分けます。しかし女の子が見たくなるような、『かわいらしさ』は今のサイトにはありません。そして女子高生の保護者は、きっと校内のことやセキュリティー、就職率などについて気になるのではないかと考え、対象者ごとにHPを用意することにしました。
  2.  サイトのデザインの変更
    サイトの全体の配色やデザインを一新し、リンクをまとめて見やすくすることにしました。今回は情報デザインのページを例に考えました(図5参照)。サイトの基本的な色は、現在の社会情報学部の各専攻用のバナーの色から情報デザインカラーの青を基調とします。(環境は赤、生活はピンク)トップ画像は昨年度のミス大妻を使用します。昨年度のミス大妻は社会情報学部の方だったので一般の人にも知ってもらおうと思い使用しました。4枚のトップ画像は自動で変わり、学部の紹介動画も見られます。カーソルを項目の上に動かすと項目が画像に切り替わり、イメージを伝えやすくします。
  3. 社会情報学部らしさのアピール
    私たち社会情報学部情報デザイン専攻の大きなアピールポイントは、女子大の中の理系ということです。共学の大学の理系のHPは男子学生の画像が貼ってあり、構成もシンプルなものが多いですが、その中で女子大の理系のHPの可愛さはインパクトがあると思います。また、理系ということで格好よさそうと思っている高校生もいるはずなので、サイトのデザイン自体を自分で変えられる機能をつけます。これはサイトに行くとサイト側から「可愛いのいいか、格好いいのがいいか」などの質問をされ、答えによってデザインが変わり、サイトへのイメージを変えつつ、同時にテクノロジーのアピールもできます。
  4. ニュース・トピックスの移動
    ニュース・トピックスの項目のほとんどは在校生向けで、高校生は見ないと考え、ページの一番下に配置します。各トピックスを在学生や専攻ごとに分けることで見やすくすることにしました。

5

図5 私たちが考えたサイトのイメージ図

5. 発表会

KJ法の結果は、ゼミ内の発表会を行い、もう1つのチームと議論をしました(図6参照)。発表会でもう1つのグループから主に以下のような質問が出ました。

  1.  対象者に保護者を入れる意味は何か?
    最近大学、特に女子大のオープンキャンパスには保護者が付き添うようになってきました。大学側でも親向けのイベントを行うなど、家族全体で子供の進路を考えています。このため、専攻ごとのページにも保護者が知りたい情報をまとめることで、保護者にもわかりやすくなるのではないかと考えました。
  2.  授業内容を写真で説明するのは難しいのでは?
    今までの授業内容は文字での説明が多く、どんな内容なのかイメージがしづらいですが、図を入れることでイメージが変わり、授業内容に興味が出るのではと考えました。
  3.  女子大は可愛いというイメージは人それぞれでは?
    女子大だからHPを可愛くすれば興味を持って見てもらえるという考え方は人それぞれです。そこで4節に記述したように自分でサイトのデザインを変えられるようにすることで、知的なイメージも伝えられるようにします。

6

図6.発表会の様子

6. まとめ

今回、KJ法を行ってみて課題を多方向から客観的に見ることができました。関係のないような些細なアイデアでもたくさん紙に書いて、グループにすることで何が問題なのかということがはっきりしていきました。また、発表しあうことで自分たちからではわからない意見も聞くことができ、よりよい解決策を考えることができました。今後は複数人でなく個人でも一つの課題について効率的に個々のアイデアから全体像を導き出すことができるのではないかと思います。