使用言語：HTML, CSS

1年前期に受けた授業の最終課題で制作したWebサイトです。
課題のテーマが「おすすめしたいもの」だったので、高校生の頃からドハマりしている、お笑い芸人さんについておすすめするWebサイトを制作しました。
この授業は基礎と応用に分かれていたのですが、高校生の頃に少しだけHTMLについて学習したので、応用の方に挑戦しました。
最初はついていけるか不安でしたが、先生の解説が非常に分かりやすく、最終的には自分の思い描くWebサイトを実現させることができて嬉しかったです。
また、この授業でWeb制作の楽しさを知ることができました。
私に夢を与えてくれた授業であったと言っても過言ではないと思っています！

1年前期に受けた授業の最終課題で制作しました。
課題のテーマが「自分と自分の大好きなものを組み合わせる」だったので、自分の写真だけでなく、猫やハムスター、ギターなど、とにかく自分の好きなものを詰め込んだ作品にしました。
自分の写真は幼いときのものでもOKだったので、小学校の入学式のときに撮った写真をデータ化し、編集しました。
ビルの構造に合わせてレイヤーを分けていくのが楽しかったです！

1年前期に受けた授業の最終課題で制作しました。
課題のテーマが「夏」だったので、私は七夕をテーマに選び、天の川や短冊をデザインしました。
マウスカーソルをプレビュー画面に持ってくると、天の川の星を描くことができ、オリジナルの天の川を作ることができます。
一つ一つの図形の座標を考えるのに苦労しました。
天の川の部分を半透明にし、星が薄く見えるようにこだわりました！

1年後期に受けた授業の最初の課題で制作したポスターです。
課題のテーマが「架空のお店のオープンをお知らせするポスター」だったので、私はお花屋さんを架空のお店として選び、開店のポスターを制作しました。
この課題には「写真を使ってはいけない、テキストと図形のみ使用可」という条件がありました。
そのため、どのようにデザインすればポスターっぽくなるかということを考えながら、制作しました。
この課題の評価により、基礎と応用で受講するクラスが分けられました。ちなみに私は応用クラスに入りました！

1年後期に受けた授業の課題で制作しました。
課題のテーマが「自分の名前や学籍番号を様々な表記でデザインする」というもので、写真などを使うのはNGとなっていました。
この課題で、限られた情報のみでデザインすることの難しさを体感しました。
私の名前は「い」という文字が多く、学籍番号に関しては「2」が多いので、そこに着目し、同じ文字のところに色をつけるというデザインにしてみました！

1年後期に受けた授業の課題で制作したジャケット写真です。
課題のテーマは「和ロックな曲を出している3人組のバンドのジャケ写」でした。
左側のジャケ写のデザインは、3つのカラフルな扇子が「3人組であること」と「和風テイストであること」を表現しています。また、仮のバンド名の文字が尖った風になっているのは「ロックテイストでもあること」を表現しています。文字の中にある赤色の格子模様も、和風の表現として取り入れています。
右側のジャケ写のデザインは、金色の衝立が「和風テイストであること」を表現しています。「RR」は曲名で「Rock」の頭文字から取りました。
ガイドを使っての本格的なデザインはこの課題が初めてだったので、指定の仕方などを間違えないように慎重に制作しました！

1年後期に受けた授業の課題で制作したチラシです。
私は、架空のフリーマーケットのチラシを制作しました。
自分で撮った写真をPhotoshopで加工し、Illustratorでテキストと組み合わせました。
チラシにはどんな情報を載せるべきなのか、本物のチラシを眺めながら考えて作りました！

1年後期に受けた授業の課題で制作したカタログです。
私は、家にあるシャンプーを使って、4つのシャンプーのカタログを制作しました。
このカタログを読む人が分かりやすく情報を得られるように、同じ情報は同じ位置に、商品の写真は全て同じ画角になるように工夫しました！

1年後期に受けた授業の課題で制作したイラストです。
課題のテーマが「身の回りにあるものを表現する」というもので、私は家に置いてあるティッシュ、コップ、テレビを題材に制作しました。
特にコップについては、コースターも実際に家で使っているものを再現しました。
パスなどを使い、図形の縁を曲げてものを描くのが難しかったです！

1年後期に受けた授業の課題で制作しました。
この作品は、現在時刻の秒数に合わせて円内の数字のカウントが増えていき、1分経ったらまた左上から秒数を数えていくものになっています。
この授業では、コードを書いて、それが想像通りの動きをしたときの達成感を味わうことができました。
また、この授業で初めて「コードが綺麗」と評価していただくこともできました！嬉しかったです！

1年後期に受けた授業の最終課題で制作した商品パッケージです。
制作したパッケージを、実際にプリングルスというお菓子の缶に張り付け、本物の製品のように完成させるのが、この課題の最終目標でした。
実際に切り取って張り付けたものが、右側にあるプレゼンテーションシート内の写真にあります。
本格的にパッケージのデザインをするということで、商品名やイメージ画像はもちろん、原材料名やバーコードなども本物に寄せて制作しました。
「パッケージのデザインをする」という体験型で、ペルソナなどを決めながら進めていくのが本格的で、良い経験をさせていただいた授業でした！

1年後期に受けた授業の最終課題で制作したプレゼンテーションシートです。
左側にある商品パッケージを実際に切り貼りし、完成させたものがこちらのプレゼンテーションシートになります。
それぞれ異なる写真でも、同じ画角で同じようにライトを当て、違和感を持たせないように工夫しました。
この授業では、課題についての良かった点、改善点を先生が一人一人的確にアドバイスして下さりました。そのおかげで「人に自分の作品を見られる」ということにあまり抵抗を感じなくなりました。
ペルソナから深堀して商品を計画していったので、完成したときには大きな達成感がありました！

1年後期に受けた授業の最終課題で制作したゲームです。
この作品ではビデオモーションというScratchの機能を使用しており、この機能ではゲーム画面に自分が映り、自分も参加できるようなゲームを作ることもできちゃいます。
ゲームを進めると登場する動物たちに手をかざして撫でると、Love度が上がっていきます（餌を与えても上がります）Love度が100になったらクリア！のゲームです。
「どうすれば本物のゲームっぽくなるか」という点に着目して制作しました。
コードを書かなくてもキャラクターたちを動かせることに最初はびっくりしました！

2年前期に受けた授業の課題で制作した映像です。
課題のテーマが「雨」だったので、わたしは雨とアメを掛け合わせた映像を制作しました。
普通の傘をさすと雨が降り、デコレーションした傘をさすとアメが降ってくるという内容になっています。
この案を思いついたときは「これ良いかも！」という感じでウキウキしていたのですが、実際に撮るとなったときに「どうやってアメが降ってる場面を撮るのか」といった、思いついた案を実現させることの難しさを学びました。
また、画角などの撮影方法、絵コンテについても体験して学び、非常に多くの経験をさせていただくことができました！

2年前期に受けた授業の最終課題で制作したCGです。
自分のノートパソコンで制作するときはMetasequoia、学校のパソコンで制作するときはMAYAを使用していました。
私が制作したものは「ブリキのロボット」で、ブリキ感を出すために、くすんだ色を指定するという工夫をしました。
一つ一つの図形の座標を考えるという点ではp5.jsと似ている感じがしますが、CGではz軸が出てくるので、余計難しく感じて頭が混乱しそうになっていました。
それぞれのパーツで図形を分け（頭部分、胴体部分、足部分など）座標を考えることで、理想の形の作品を完成させることができました！

使用言語：HTML, CSS

2年前期に受けた授業の最終課題で制作したポートフォリオサイト（自己紹介のサイト）です。
初めてWeb制作を行ったとき（おすすめ芸人さんのサイト）は、先生がレイアウトのテンプレートを提示して下さっていました。しかし、この課題ではレイアウトを一から自分で考えなければならなかったので、それを考えるのに苦労しました。
この授業では、コードに関する小テストを毎回行っていたので、かなり勉強しました。
その際にルーズリーフを何枚も使用したのですが、その勉強用ノートは今でもWeb制作の際に役立っています！

使用言語：HTML, CSS, JavaScript

2年後期に受けた授業の最終課題で制作したCGです。
この作品では「雪だるまが浮き輪で海に浮かんでいる」というありえない状況を、CGにしてみました。
言語はJavaScriptを使用しており、コードでもCG制作ができるということに驚きました。
オブジェクトの座標を考えることに苦労しましたが、写真をオブジェクトに張り付けて理想のものができると楽しいと感じました！

使用言語：HTML, CSS, JavaScript

3年前期に受けた授業の課題で制作したイラストです。
この授業では「数学」がテーマになっていたので、数学に出てくるグラフを利用して、イラストを描いてみるという課題が出ました。
そこで私は、猫の顔の部分と魚の体の部分を2次関数のグラフで表現できるのではないかと思い、制作しました。
猫の耳や魚の尾びれは、多角形を描けるコードで作っています。
イラストの案を思いついたときは、理想の形が出来上がるか不安でしたが、なんとか思っていた形のものが完成できて嬉しかったです！

使用言語：HTML, CSS, JavaScript

3年前期のゼミ活動で制作したWebサイトです。
ゼミ活動の内容は、青山学院大学と共同でチームを作り、オージス総研主催のソフトウェアアイデアコンテストに応募し、テーマに沿ったソフトウェアのアイデアを考案するというものでした。
その際に、アイデアの考案に加えて、武庫女側ではそのソフトウェアを紹介するWebサイト制作を行いました。
チーム内に武庫女生は自分を含めて2人いたので、2人でfigmaを使いながら、どのような画面にするか考えました。実際にfigmaで作った画面は1番左のものになります。
次に、figmaで作ったものを私がHTML,CSSでコーディングし（画像左から2番目）そして、デザインが得意なもう1人の子が色やフォントなどのデザインを考えて新たに作成してくれました（画像右から2番目）
誰かと協力しながらWeb制作を行ったのはこれが初めてだったので、新鮮でした！

その後、3年後期の「学生と企業の交流会」という武庫女の情報メディア学科によるイベントで、このプロジェクトを発表するためのスライドを作成しました（画像1番右）

3年夏季休暇に参加した、株式会社ナノコネクトのインターンシップにて、作成させていただいた企画書です。
ポートフォリオに載せてもよいという許可をいただいているため、掲載させていただいております。
11日間に及ぶインターンシップで、当時自分が参加した中では最も長い期間でのインターンシップでした。
内容はコンペ形式のインターンシップで、「就活生をターゲットとし、ゲーミフィケーションを組み込んだタスク管理サービス」をテーマに、スマホアプリのサービスを企画するというものでした。
ニーズの解釈や深堀りが難しく、非常に苦戦しました。
しかし、自分なりに考えて企画した案で特別賞を受賞することができ、非常に嬉しかったです。
また、フィードバックについても詳細に行っていただき、非常に良い経験になりました。
特別賞の賞品としていただいたマウスも非常に使いやすく、気に入っています！

使用言語：HTML, CSS

3年後期のゼミ活動で制作したWebサイトです。
ゼミ活動の内容は、前期と同様に青山学院大学と共同でチームを作り、それぞれのチームでコンテストに応募し、テーマに沿った企画を考えるというものでした。
私たちのチームでは、旺文社主催の『未来の「学参」企画大賞』の学習アプリ部門に応募しました。
また、前期同様、企画したアプリを紹介するウェブサイトを武庫女側で制作することになったので、チーム内の武庫女生と2人で協力して、ウェブサイトを制作しました。
まずは、2人でfigmaを使用してサイトの画面をどのようにするか決め、その後私がコーディングを行い、完成させました。その間、もう1人の子がスライドを作成してくれたので、効率良く制作物を仕上げることができました。
コーディングしたものをその子に見せたときに「めっちゃ良い感じ！」と褒めてもらえたのが嬉しかったです！

3年後期の「学生と企業の交流会」という武庫女の情報メディア学科によるイベントで、このプロジェクトを発表するためのスライドを作成しました（画像1番右）

使用言語：HTML, CSS, JavaScript

3年後期の「学生と企業の交流会」という武庫女の情報メディア学科によるイベントで、所属ゼミを紹介するウェブサイトを、同じゼミ生の子と2人で制作しました。
サイトの内容は、前期、後期を合わせた10チームのそれぞれの企画をまとめたものです。
提出までの時間があまりなく、ゼミの先生にも訂正してもらいながら、完成させました。
右の写真は、イベント終了後にゼミ生のみんなで撮った写真です！

※修正中のため、天気の表示はありません🙇‍♀️

使用言語：HTML, CSS, JavaScript(PetiteVue)

3年後期に受けた授業の課題で制作したアプリです。
このアプリでは、自分でタスクを追加し、TODOリストを作成することができます。
使い方は、まず、ADDの方でタスクの名前、期限、タスクの種類を分けるための色を設定し、＋ボタンを押すことで、設定したタスクをLISTのところに追加することができます。追加されたタスクを完了したら、チェックボックスにチェックをつけることで、そのタスクを削除することができます。
また、天気のデータを取得できるAPIを使用し、期限が近い今日と明日の天気を表示させるようにしています。ADDの画面内にある「地域を選んでね」のドロップダウンメニューを押すと、主要都市7つが表示されるので、自分の住んでいる場所に近い地域を選択することで、その地域の天気と、その天気の詳細（小雨、曇りがちなど）がすぐに表示されるようにしています。
このアプリでは、PetiteVueというJavaScriptのフレームワークを使用しています。
PetiteVueだけでなく、非同期処理やAPIの使用方法など、複雑なコードについても学び、プログラミング言語の奥深さを知りました……！

使用言語：HTML, CSS, JavaScript(PetiteVue)

春休みに制作したウェブアプリです。
これまで授業外でアプリ開発をしたことはありませんでしたが、前々からやってみたいとは考えていたので、就活もある中でチャレンジしてみました。
そもそもなぜやってみたいと思ったかというと、誰かのためになるものを作る前に、まずは自分のためになるものを作られるようになろうと思ったからです。その上で、私が自分のためになると思い、作ってみたいと思ったのが、この「コード辞書」です。
使い方は、まずは探したいコードの頭文字を選択します。そうすると、例えば頭文字が「a」の場合、aから始まるコードが、言語の種類に関わらず表示されます。言語の種類に応じて表示を変更したい場合は、それぞれ言語名のタグをクリックしてもらうことで、変更することができます。
使う場面としては、コーディングやプログラミングをしている際に「このコードってどうやって使うんだったっけ？」となったときに使ってもらえるといいかなと思っています。
今はとりあえず形にできたので載せていますが、まだまだアプリ内のコードが足りていないので、随時追加していく予定です！他にも言語の種類を増やしたり、検索機能でより自由度の高いものを作られたりしたらいいなーって思ってます！