MotionRecは動きの軌跡を記録・再生する力で荒廃した世界を冒険するレコードパズルアクションです。 モーションレックを駆使して機械に支配された世界の謎を解き明かそう！ Steam: <a href="https://store.steampowered.com/app/2602230/MOTIONREC/" target="_blank" rel="noopener noreferrer">https://store.steampowered.com/app/2602230/MOTIONREC/</a> Credit 開発チーム：HANDSUM inc. Pixel Art：m7kenji Music：KyoheiFujita Developer：shoma

MotionRec

ジューシーなシューティングゲームを作りました。 タイトル画面からスムーズな移動、Xボタンを長押しした時のスムーズなUI表示、敵を倒した時のエフェクト、ボス戦など。 「PAYING THE PRICE」というお題からインスピレーションを得て、弾丸の個数を有限にしました。 敵によって弾丸を使い分けながらボス戦クリアを目指してみてください！ (5分ほどでクリアできると思います) <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/246eda45997a44498b4b811dca0bd0e9/juicejam2_2.gif" alt=""> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/0acb653d2e884ecb9c154a3c49f68206/juicejam2_4.gif" alt=""> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/acb2a8736f144004a5abab6d379ff987/juicejam_boss.gif" alt=""> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/0553c5205bb8446390fd3ffed6ce87ca/juicejam_boss02.gif" alt=""> カテゴリ：ゲーム制作 制作期間：2023年1月 実装：Shoma Kato <a href="https://shomaisshi.github.io/my_games/juicejam2/" target="_blank" rel="noopener noreferrer">Pick Up バレット</a>

Pick Up バレット

LSDJAM 2022&nbsp;というゲームジャムに参加して、夢を体験するゲームを作りました。 夢では、よく会う人がいて、よくいく町があり、よく死ぬ場所がある。そして朝起きる。それの繰り返し。 ゲームの仕組みとしては、「別の夢での体験や経験、イベントが他の夢に影響してくる」ことをベースにしてみました。 例えば町を散歩する夢の時、デパートであるアイテムを購入していたら、次の夢で先に進めたり。（この辺りのイベントや条件分岐はブラッシュアップで追加していきます） <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/9f36068d6b7348af82e37435581b65a5/lsdjam_img01.gif" alt=""> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/7f71346067334848928b40e9c0e9443c/lsdjam_img02.gif" alt=""> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/7319bcda87364f3db2463db487147ee5/lsdjam_img03.gif" alt=""> カテゴリ：ゲーム制作 制作期間：2023年1月 実装：Shoma Kato <a href="https://shomaisshi.github.io/lsdjam/#playing" target="_blank" rel="noopener noreferrer">Re:ドリーム</a> <a href="https://note.com/shoma_dev/n/n56d4e971024a" target="_blank" rel="noopener noreferrer">はじめてゲームジャムに参加しました｜shoma｜note</a>

Re:ドリーム

アゲアゲくんが走るゲームをPICO-8で制作しました。 からあげを取るとスピードアップ&amp;アゲアゲくんがしゃべります。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/c713422940454eaea67f306784bcbdbb/ageage_1.gif" alt=""> カテゴリ：ゲーム制作 制作期間：2022年10月-12月 開発：HANDSUM ピクセルアート：m7kenji 実装：Shoma Kato <a href="https://shomaisshi.github.io/agerun_lp/" target="_blank" rel="noopener noreferrer">走れ！アゲアゲくん！~classic~</a>

走れ！アゲアゲくん！~classic~

3Dモデリング

<img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/b093ac8766014180887009d02701b8d2/IMG_0974.JPG" alt=""> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/4ba32378cdf94997aefe9a6753beab03/IMG_0949.JPG" alt=""> 制作期間：2020年11月

静物スケッチ

色と位置を推理して当てる定番のゲームをTIC80で1から実装してみました。 カテゴリ：ゲーム制作 制作期間：2021年1月（5時間） 実装：Shoma Kato <a href="https://tic80.com/play?cart=2531" target="_blank" rel="noopener noreferrer">ヒットアンドブロー</a>

ヒットアンドブロー classic

スマートフォンで手軽にドット絵のタイルマップを描きたい、と思い制作しました。P5JSを使い、オブジェクト指向で設計しました。 自分で描いたタイルを、指先から描いていく楽しさがあります。 作りたいマップのイメージが湧いたらすぐにスケッチできるので、 2Dゲーム開発が捗ります。 Drawエリアでタイルを描き、 Mapエリアで描いたタイルを使い マップを描いていきます。 Drawエリアのタイルを書き直すと、 Mapエリアも更新されます。 制作期間：2021年9月-10月 デザイン、実装：加藤匠馬 技術：P5JS <a href="https://shomaisshi.github.io/Pixel-map-sketch/" target="_blank" rel="noopener noreferrer">Pixel Map Sketch</a>

Pixel Map Sketch

<h2 id="h246b94c7b5">テーマを伝えるwebデザイン</h2>Webメディアでサイトを作る意義について意識しました。 SNSとWebサイトの両方で集客することになったため、 細かい情報発信の役割はSNSに担わせることで、 Webサイトは展示会のテーマの印象を強く伝える役割に 特化することができました。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/ee32026a381947a2bf732fa3c635d359/sotuten.png" alt=""> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/6afeff6b262341c4b2baa5a09644d4b5/picture_pc_dff6a734d3e1c18b37ba8336d67fbd1a.gif" alt=""> <h2 id="he760d99ff3">メインビジュアルを踏襲したwebデザイン</h2>展示会のメインビジュアルは、テーマ「I am」のI(アイ)を 学生一人に見立てたという、個性豊かなビジュアルデザインが 横一列に配置されたものでした。 このメインビジュアルを最も印象深く伝えられるような webデザインを検討した結果、webではあまりみない、 横スクロール形式のレイアウトを採用しました。 横スクロールであることを気づいてもらうために、 サイトを表示した際に横に流れるアニメーションを挿入したり、 スライド方向を示すアイコンを設置したりするなどの工夫を施しました。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/906bce796cf74662b8b557b4f9a4f3c3/picture_pc_ef7da47d305a554e5f2ab953f8ec476b.jpg" alt=""> <h2 id="h8d1aa27f4b">どの画面幅にも対応するレイアウト</h2>どの画面幅の端末で見ても綺麗に見えるように、 文字幅調整やカーニングなどを施し、画面サイズごとに 細かい調整をした4段階のサイズを用意しました。 各サイズに合わせて細かくレイアウトを調整することで、 どの端末でも見やすくなるようにしました。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/9f3e666769e0469e95e31362600c03cb/picture_pc_737770f24671dbbafb18a20f78bf647d.jpg.webp" alt=""> <h2 id="h8a6d89bc4b">触ってもらって観察</h2>ある程度完成してきた時に色々な人に触ってもらって 反応を観察しました。 Webサイトでは珍しい、横スクロールであることに 気づいてもらうためのアイコンを入れた時と、入れなかった時や、操作できる面積を増やした時とそうでない時の 反応の違いを観察しました。 小さな変更をしただけで面白いくらいに反応が変わり、 客観的な視点の大切さに改めて気がつきました。 <h2 id="hdd03d110e2">noteでメイキング記事を公開</h2>卒展終了後には、noteで メイキング記事を公開しました。 統合デザイン学科は誕生したばかりで、 今回が3回目の卒展だったので、 情報が少なく、 後輩へのドキュメントとしても、 外部への広報にもつながったと思います。 <a href="https://note.com/900000/n/n431a1932c68f" target="_blank" rel="noopener noreferrer">【Making of “I am”】#03 web｜統合デザインの卒展 - note</a> 卒展に来てくれたお客さんや先輩方からは、 「webの完成度が高かったから、展示品への期待が膨らんだ」 と言っていただくことができ、達成感を感じました。 カテゴリ：Web 制作期間：2019年9月-12月 メインビジュアル：古林もえみ Webデザイン：加藤匠馬 Web実装：小林かずき <a href="http://www.tamabi.ac.jp/integrated/exhibit/graduation_20/" target="_blank" rel="noopener noreferrer">統合デザイン学科卒業・修了制作展2020 - Tama Art University</a>

多摩美術大学統合デザイン学科 卒業・修了制作展2020 特設Webサイト

<h2 id="h42a95060cf">新しい読書体験をデザインする</h2>「新しい読書体験をデザインする」というゼミの課題で制作しました。 電子書籍よりも紙の方が心地よいと言われる理由の一つに、 ページをめくる感触の心地よさがあります。 そこで、「言葉と身体が融和する読書体験」をテーマに、 ソフトウェアの触り心地にこだわることで、より楽しい読書体験を考えました。 生まれたのは、指で触ると言葉が出てきて、 それに合わせて絵やギミックも動く、まったく新しい本のカタチです。 <h2 id="h6dd5dca75c">制作プロセス</h2>まず、「本を読むとはどんな行為か」ということについて改めて問い直し、 今までの自身の読書体験を 思い返したり、 周りの人の動作を リサーチしました。 そこで、マウスから文字が出てきて 読めたら面白そうだと思い、Processingという言語で プロトタイプを作りました。 マウスではなく、 指から直接文字が出てきたら 気持ち良いのではないか、と考え、 ”指から文字が出てきて読める本” という新しいメディアができました。 またその考えを応用して、 同時に絵やプログラムを動かせる 絵本ができました。 <h2 id="hf40234aa30">たくさんの人に「あ〜！」と言ってもらえるようなモノづくり</h2>展示した時に、来てくれた人を遠くから観察していました。 多くのお客さんが、キャプションを見た後に画面に触れ、 その瞬間に「あ〜！」と驚きと発見を楽しんでくれているように見えました。 その時に「多くの人に驚きとワクワクを与えられる体験を デザインしていきたい」と思いました。 カテゴリ：メディアアート 開発環境/言語：P5js 制作期間：2018年4月-5月 企画/デザイン/実装：加藤匠馬 学生CGコンテスト2019太陽企画賞受賞 <a href="https://vimeo.com/272274879" target="_blank" rel="noopener noreferrer">Vimeoで再生</a>

Finger book

2本のワイヤーを使って石膏像の印象を作りました。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/3fa04202aa044e0aaef97d9779aac913/hermes2.png" alt=""> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/58fda07e65104972a4fde4076482ae6f/hermes3.png" alt=""> カテゴリ：彫刻 マテリアル：ワイヤー 制作期間：2017年 制作：加藤匠馬

OUTLINE

スケッチ

2003年