今まではGameMakerでステージを作ってゲームを起動して確かめていた。 今回ゲームを遊びながらステージを組んだり修正したりすることができるようになった。 それをエクスポートする機能は実装してないがスクショでメモすれば十分でスケッチ的に使えるようになった。楽しい。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/8d3c957242894365b2ec93810eb9e188/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-11-18%2013.23.45.png?fit=max&w=1024&fm=webp" alt=""> こんなのもゲームを触りながらステージを作れるのでイメージを形にするのが早くなった。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/8275736cac2e4d08914ded6348ebdf4c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-11-18%2014.35.09.png?fit=max&w=1024&fm=webp" alt=""> これは真上に行くだけなら上に登る行動を記録すればいいが、右のリフトに乗りたいときは工夫する必要がある <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/85081275ccb14350b650f03c560bf956/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-11-18%2015.25.11.png?fit=max&w=1024&fm=webp" alt=""> こんなのとかも遊びながら思いついた。

MotionRecのサンドボックスを作った

2024年はiGiが始まりあっという間にTGSも終わり秋になった。去年は小さな作品をつくりながらブログに開発日誌を書いていた。今年はできてなかったので、それをまとめて書いてく。 2024年1月 トロヤさんの紹介で東京パソコンクラブというBSテレ東の番組でMotionRecのPICO-8バージョンを紹介していただく（大感謝）。めちゃくちゃ緊張した。 2024年2月 これまたトロヤさんに紹介していただいたiGiにMotionRecのプロトタイプを応募した。ElecHead作者の生高橋さんがメンターにいたこと、BitSummitやTGSに出展できること、パブリッシャが紐付いてないことがいまの開発状況にあっていたので出した。書類選考と面接を経て4期生に。 2024年3月 この時期は「動きを記録して再生する」システムからどんなゲームが作れるかわからなくてもがいてた（今もだけど）。あとゲームの世界観のコンセプトスケッチをしたり。 2024年4月 iGi4期がはじまる。品川シーサイドにあるiGiを運営するマーベラス社にみんな集まった。まだ4期生の作品も制作者もわからない時期。また、月末にゲームダンジョン5に出展した。そのときはまだゲームの仕様が固まってなくて操作も複雑だった。 2024年5月 謎の店と一緒に謎のハンドサムというポップアップショップをを池袋SEIBUさんでやった。ゲームも展示させてもらいテストプレイとして遊んでる様子を観察した。そこではゲームイベントと違い普段ゲームを遊ばない人も多く、それでも伝わるか？を確認したかった。遊んでもらうと最初の操作やコンセプトが理解できずコントローラーを置いてしまう人が多かった。これではだめだ・・・と思い仕様を大きく変更した。これまで「動きを記録して再生する」システムでの完成形が見えずもがき作っていたが、このときの仕様変更で確実に伝わりやすく、面白くなった手応えがあった。 2024年6月 新しいギミックを作りSNSにポストしまくってた。映像だけ見て伝わるかな...と。なぜかバズった。 <blockquote class="twitter-tweet">作りたかったギミック実装した <a href="https://t.co/J4u1MkMA8o">pic.twitter.com/J4u1MkMA8o</a>&mdash; shoma (@DonutsHunter) <a href="https://twitter.com/DonutsHunter/status/1799061595777356282?ref_src=twsrc%5Etfw">June 7, 2024</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 2024年7月 京都で行われるインディーゲームイベントBitSummitにiGiブースで出展した。けんじさんのグラフィックがついて藤田さんのBGMや効果音が一式そろい、ギリギリで体験版が完成した。ステージも15分くらい遊べるもの。直前はテストプレイを繰り返し、横から説明しなくても遊べて面白いと感じるか？夢中になるか？飽きないで遊んでしまうか？を検証した。友達に遊んでもらって違和感がありそうなところは全部直した。BitSummit本番、たくさんのひとが遊びに来てくれて「絶対買います」といってくれる人がいてうれしかった。イベントでのテストプレイを見ながら夜にホテルで修正などした。iGiのメンバーみんな同じホテルだったので合宿感があってワクワクした。開発のことやプライベートのことも話して仲良くなれた気がする。 <blockquote class="twitter-tweet">来週末のBitSummit DraftではMotionRecの体験版を出展します。 それにあわせてトレーラーを作りました。 ぜひ遊びに来てください！<a href="https://twitter.com/hashtag/BitSummitDrift?src=hash&amp;ref_src=twsrc%5Etfw">#BitSummitDrift</a> <a href="https://t.co/mHLXtH1WW0">pic.twitter.com/mHLXtH1WW0</a>&mdash; shoma (@DonutsHunter) <a href="https://twitter.com/DonutsHunter/status/1811934675855941851?ref_src=twsrc%5Etfw">July 13, 2024</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 2024年8月 パブリッシャにピッチをするデモデイが10月にあるのでプレゼンの資料をつくったりした。プレゼンは苦手意識があり資料作りも大変だった。英語バージョンも作る必要があり、なんにもわからん状態だった。 また、ゲームの後半部分もプロトタイプをつくりiGi内でテストプレイをしてもらった。新しいギミックを使ったステージを遊んでもらいどのように行動するのかを観察した。そこで作った後半のステージを壊してまた作り直してる。 2024年9月 幕張メッセで行われる東京ゲームショウにiGiブースで出展した。去年ヘルミッペさんに誘っていただきはじめてTGSに遊びに行った。今年は出展する側になっており、人生なにがおこるかわからないな...と。ブースの前を通る人が「あーこれしってる」みたいな反応もありびっくりした。「話題になってるゲーム」と言ってもらえることもあり、一体どこで話題になってるのだろう...？と思った。あと、子供向けに作ろうと思ったことはないけどちびっこがこのゲームを選んで遊んでくれてたのは印象的だった。それに大人よりもクリアが速い。TGSは燃え尽きない程度に頑張った。 2024年10月 iGiデモデイ本番。パブリッシャさんの前でピッチや質問会、テストプレイや対面でお話したりした。緊張して何を話したか覚えてない。デモデイが終わりパブリッシャとの交渉が解禁された。iGiの目的はパブリッシャ獲得なのでがんばらないとな、という気持ち。だけど今より多くの人を巻き込んでいいのか...？低コストで小さな作品を完成させていきたい。面白いと思ってもらえたら口コミで広がってくれたらいいな、くらい。常に不安になりながらアイデアを出し続けているので、今の時点で「めちゃくちゃ面白い作品になります！」なんて言えない。 iGiについて 毎月のメンタリングでは悩んでることを相談に乗ってもらえる。MotionRecはゲームデザインやストーリー、PRマーケティングなどアドバイスいただいた（大感謝）。特にElecHead作者の生高橋さんには専属メンターになっていただき、本質的なアドバイスによりゲームの方向性が決まっていった。5期生もあるらしいので企画とプロトタイプがありクオリティ上げたい！という方はぜひ応募してみてください。 iGi運営、メンターさん、同期のぽまいら、半年間ありがとうございます。 これから 一息ついたのでまた内容を作ってはテストを繰り返す日々になりそう。2~3時間でクリアできるボリューム感を目指して、かつやり込める要素もあったらいいな、くらい。ストーリーの構成はざっくりできてるのでそれにあわせて内容を作っていく。最後まで遊べるビルドを通しで作らないとおもろくなるのかわからないので年内にすべての要素をざっくりでもつくりたい...。 ------------------------------ MotionRecは動きの軌跡を記録・再生する力で荒廃した世界を冒険するレコードパズルアクションです。 <a href="https://store.steampowered.com/app/2602230/MOTIONREC/" target="_blank" rel="noopener noreferrer">https://store.steampowered.com/app/2602230/MOTIONREC/</a> 開発チーム：HANDSUM inc. Pixel Art：m7kenji Music：KyoheiFujita Developer：shoma

2024年の開発日誌まとめ

今年のグローバルゲームジャムにチームpico-8ersとしてuchuzineさん（<a href="https://twitter.com/uchuzine" target="_blank" rel="noopener noreferrer">@uchuzine</a>）と二人で参加してきました。1/26~28の三日間でお題を元にゲームを作るジャムです。 <iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FfwqUzYZRms4%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DfwqUzYZRms4&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FfwqUzYZRms4%2Fhqdefault.jpg&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=youtube" width="560" height="315" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe> 今回作ったのは「トラスト・ミー」という二人プレイ専用の"協力型"ゲームです。 お題は"MAKE ME LAUGH"（笑わせて！） 笑いは得意ではないかも...と思いながら普段どんなことで笑うか考えてみました。 ゲーム特有の笑いってなんだろう...と今までのゲーム体験や好きなゲーム実況者を思い浮かべると、「協力プレイでゲームの目的よりも仲間にちょっかい出す」ことでゲラゲラ笑って遊んでたことを思い出しました。 例えばモンハンで「手が滑った」と大剣で仲間を吹っ飛ばしたり、マリオで仲間にノコノコの甲羅を当てたり。 ゲームの目的達成のためには仲間と協力した方が速くクリアできるのに。 ちょっとやるくらいならやられた方も笑ってしまう。ゲーム内だからこそだなと。 「MAKE ME LAUGH」→「協力プレイで仲間にちょっかい出せる」→「協力プレイゲームに見せかけた、信頼と裏切りから生まれる笑い」 とコンセプトの軸を絞っていきました。 制作担当は企画/プログラミングを二人で行い、主にグラフィックや演出周りをウチュウジンさん、レベルデザインとギミック実装をshomaが担当しました。このゲームに合うBGMはマットさんが作ってくださいました。（大感謝） ウチュウジンさんに作っていただいたオープニング演出とマットさんのBGMがあるだけで一気に完成度が上がって見えますね...。すごい。 かわいくてキャッチーなデザインを描くウチュウジンさんと一緒に作れてとても新鮮でした。 キャラクターを投げたり表情で遊んだり踏み台にしたりするだけで楽しい...。作ってるものを見て二人でゲラゲラ笑いながら作業してました。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/224e8fbefc934056914d693d7d4ff8a1/IMG_5736%202.JPG" alt=""> これはゲームジャマーにハントされたドーナツたち 今回のゲームジャムは予定調和ではない遊びが生まれたのがよかったです。 例えば、棘に刺さってデスした時にそのまま残る方が見た目として面白かった。しかもデスしたプレイヤーの頭の上に乗れることも表現として面白いしゲーム性にも繋がったこと。 デスしたプレイヤーの上に乗ってる時もデスした側は相手を投げれらるという意図してなかった挙動が意外にも面白かったこと。 今回遊んでいただいてる様子を見るとコンセプトは伝わったのかなと思います。何より純粋にゲラゲラ笑いながらプレイしてくれたことが嬉しかったです。 イベント企画のCJさんやマットさん、スタッフの皆さん、ゲームジャマーのみなさん、そして一緒に参加してくださった宇宙人さんありがとうございました。 ----------------------------------- ↓こちらからオフライン二人専用で遊べます。 itch：<a href="https://donutshunter.itch.io/trust-me" target="_blank" rel="noopener noreferrer">https://donutshunter.itch.io/trust-me</a> GGJ24：<a href="https://globalgamejam.org/games/2024/trust-me-4" target="_blank" rel="noopener noreferrer">https://globalgamejam.org/games/2024/trust-me-4</a>

GLOBAL GAME JAM 2024にウチュウジンさんと参加してきました

ヘルミッペ氏がキュレーションする、5人展「ベリカード」- 彼方からのピクセルアート - にて小さなゲーム作品を一緒に作りました。（私はPICO-8での実装係をしています。） <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/d69db559ad064165a86500ca53415a1f/vericard%20p8_0.gif?fit=max&w=1024&fm=webp" alt=""> ヘルミッペ氏の電波塔のある風景 <iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F6W-w7pg9C20%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D6W-w7pg9C20&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F6W-w7pg9C20%2Fhqdefault.jpg&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=youtube" width="560" height="315" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe> 以下ヘルミッペ氏のXより引用<blockquote>それぞれのベリカードには架空の電波塔のある風景が描かれています QRコードを読み取るとその風景の中に入り、ゲームが始まります ゲームは1種類のみ、5つのステージに分かれていて、それぞれの作家の風景を移ろいながら旅をします</blockquote> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/ef537e5e41cb4e9ba4c5d031b13f5ddd/IMG_5046.jpeg?fit=max&w=1024&fm=webp" alt=""> 5人のベリカード <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/8eb1717b86114cd4a8b463e5dd779f8f/vericard_all_map02.png?fit=max&w=1024&fm=webp" alt=""> ベリカードの風景をもとにしたマップチップ （左から、APO、m7kenji、zennyan、モトクロス斉藤、ヘルミッペ） 5人それぞれが描いた風景を128×128ピクセルの中にぎゅっと詰めてもらいました。その対比が見ていて楽しい。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/87bb599b7bb54600b31843e98651612a/IMG_5042.jpeg?fit=max&w=1024&fm=webp" alt=""> 展示風景。デジタルのピクセルアートが現実のマテリアルとして定着していました。m7kenji氏の作品にはデジタルのキャプションが。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/4ef756e4e3fe4ca9831be4f3b667ed6f/vericard-export.png?fit=max&w=1024&fm=webp" alt=""> 128x128ピクセルのスプライトシート 今回のゲーム作品はピクセルアーティスト5人の絵をPICO-8の制約の中で表現する試みでもありました。 128x128ピクセルのスプライトシートをもとにマップやタイトル、アニメーションが作られています。 サウンドはヘルミッペ氏がPICO-8で制作してくださいました。 波や雨、草原など全ての絵に合うように作られています。 コラボに誘っていただいたヘルミッペさん、また、絵を描いていただいたAPOさん、m7kenjiさん、zennyanさん、モトクロス斉藤さん、ありがとうございました。ご一緒させていただきとても楽しかったです。 ＊ これからも、個人でドット絵やゲーム作品を作るとともに、いろいろな方とインタラクティブな作品を作っていけたらと思います。 「ベリカード」は以下のページよりプレイできます。 ぜひ5人の電波塔のある風景を歩いてみてください。 <a style="background-color:#ffffff" href="https://www.lexaloffle.com/bbs/?tid=54783" target="_blank" rel="noopener noreferrer">https://www.lexaloffle.com/bbs/?tid=54783</a> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/002a03e966af4eeebaae9d6541972a67/vericard%20p8_0.png?fit=max&w=1024&fm=webp" alt=""> 5人展「ベリカード」- 彼方からのピクセルアート - <a href="https://kac.amebaownd.com/posts/49313483" target="_blank" rel="noopener noreferrer">https://kac.amebaownd.com/posts/49313483</a>

5人展「ベリカード」- 彼方からのピクセルアート - とコラボして小さなゲーム作品を作りました

npckcさんが主催する同ZINEという世界に日本のインディーゲームを紹介するというコンセプトの ZINEに以前製作した「リリースノート」を掲載していただきました。 「リリースノート」とは、ブロック崩しをクリアするごとにアップデートが入り仕様が変わっていく作品です。 一週間でゲームを完成させるゲームジャムで作った作品で、「終わりが始まり」というテーマでした。 自分はアプリがアップデート通知が来るたびにわくわくしてアップデートの内容を隅からすみまで見るのが好きでした。毎回アップデート内容を確認してから更新して遊ぶ。そんな体験をコンセプトの軸にしたいと思い作りました。 紹介していただくにあたってゲーム内テキストの翻訳までしていただきました。npckcさん、ありがとうございました！ <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/2ff139471bde42a3befe67c2fdc8bff0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-28%2018.12.41.png?w=384&amp;h=386" alt=""> PICO-8の画面幅に入る文字数の制約の中、シンプルな英語に翻訳していただきました。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/5ab0532072ca465eb68c549140e09d28/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-28%2018.13.52.png?w=384&amp;h=383" alt=""> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/47e323477e3346a5a4342c9852c49e48/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-28%2018.14.10.png?w=384&amp;h=377" alt=""> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/58cf932623384e9eae7a57b27d10b360/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-28%2018.13.15.png?w=384&amp;h=384" alt=""> この作品自体、ゲームジャムが終わった後もBGMを追加したり翻訳していただいたりと時間を見つけてアップデートしていっています。 遊ぶだけでしたらブラウザで3分程で遊べますのでぜひ触ってみてください。 同ZINEはいままでに0号から今回の3号まででています。それぞれインディーゲーム作品が詰まったバンドルの販売になっております。バンドル版を購入していただくとPC、Mac、Linuxで動くアプリをダウンロードできるようになっています。 同ZINE バンドル <a href="https://itch.io/b/2071/zine-douzine-3" target="_blank" rel="noopener noreferrer">https://itch.io/b/2071/zine-douzine-3</a> リリースノート <a href="https://donutshunter.itch.io/release-note-eternal" target="_blank" rel="noopener noreferrer">https://donutshunter.itch.io/release-note-eternal</a>

同ZINE3号に「リリースノート」掲載していただきました

ここ一ヶ月くらい、けんじさんと友人と作っていた作品のプロトタイプ版が完成しました。 <iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FN2N7t3I-U94%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DN2N7t3I-U94&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FN2N7t3I-U94%2Fhqdefault.jpg&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=youtube" width="560" height="315" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe> MOTION●REC 「動きを記録して再生する」というコンセプトのアクションパズルです <h2 id="h8e1cd00986">プロトタイプ版を作った目的</h2>アイデアに広がりがあるか考えるための叩き台として制作しました。 コンセプトが伝わることも大事なので、UIなども丁寧に制作しました。 （客観性を失っていたため、面白さや独自性があるのか知りたかった） <h2 id="h79f4f151d6">開発を始めた時のことや過程</h2>いつもはゲームジャムに参加しテーマを決めて1週間で制作しています。 しかし、今回はアイデアがすでにあり、遊びで実装したのが始まりでした。 はじめは「コピー&amp;ペースト」を2Dゲームのモーションにも使えたら面白そうと考えました。一度コピーしたモーションを繰り返すことでステージを進ことができるとアクションパズルが作れるのでは...。（ElecHeadがめっちゃ好き） 奥山さんやけんじさん、学生時代の友人に見せたところ面白がってもらえたのでしっかり作ることにしました。 <h2 id="hf2f59f44ab">制作で意識したこと</h2>1. 小さく完成させること 2. 大事なことから手をつけること （優先順位を決める。手段と目的を入れ替えて現実逃避をしないように） 今回はレベルデザインが面白くならないとアイデア止まりになってしまうため、一番優先度が高かったです。 また、コンソール版にしたときにアイデアに広がりがあるかの検証も大事でした。ビームをオブジェクトに当てることで物や敵の動きを記録できたり、複数の記録データを持てたり、動く床のギミックなど。 次にこのアイデアを伝えるためのチュートリアルとUIデザインが同じくらい大事だったこと。 けんじさんから「PICO-8のステージはほぼチュートリアルでいいくらい」と言われて親切設計を心がけました。 今回のプロトタイプはここまで検証できたらOKとしました。 <h2 id="h1018f39d38">UIのアップデート</h2>最初のUIでプレイしてもらったところ「何をすればいいか全くわからない」と言われてしまいました。 どうしても横で説明したくなる。いや説明してしまう。 これを「ゲームだけ渡しても操作できてコンセプトが伝わる」ところまで磨ければ完成としました。 放課後の18時ごろ、けんじさんがUIのアイデアを書いてくださり上下ボタンを使ったレバーデザインになりました。 （PICO-8では使えるボタンの数が少ないため、「記録」「再生」「逆再生」「ジャンプ」を操作するのに工夫が必要でした） さらにカセットのUIをいただき実装して完成しました。 カセットの上下移動に緩急をつけることでデジタル空間が一気に物理空間に変わったような気がしました。イージング楽しい。 また、PICO-8ではスプライトの制限があるので今回はこれだけで制作しています。1つのテキストファイルにグラフィックやマップ・サウンド全て収まります。データサイズなんと31k！ <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/6dcbdc8bdfdd44edb8101d0baef67712/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-07-15%2022.28.42.png?w=384&amp;h=191" alt=""> PICO-8のスプライト画像 <h2 id="h54f75201e3">コンソール版について</h2>L2で「動きを記録」、R2で「再生」のような操作感だと直感的かと思いコンソール版（Nintendo SwitchやSteam）を作ることにしました。 ゲームエンジンはインディーゲームのリリース実績が多そうなGameMakerを検討しています。 <h2 id="hfbf2743935">目標</h2>まずはコンソール版完成させる！（2週間でGameMakerで下地づくり） 新しい体験を作りたい！ Indie Worldで紹介されたい！ -------------- MOTION●REC <a href="https://www.lexaloffle.com/bbs/?tid=53392" target="_blank" rel="noopener noreferrer">https://www.lexaloffle.com/bbs/?tid=53392</a> itchはこちら <a href="https://donutshunter.itch.io/motionrec" target="_blank" rel="noopener noreferrer">https://donutshunter.itch.io/motionrec</a>

MOTION●RECプロトタイプ版をリリースしました

本日（2023/06/09）Wave TimerのApp Store審査が通りリリースできました！ <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/69ce5e3b2e1a41ad853cc297797e15a9/08xZ9Z.png?fit=max&w=1024&fm=webp" alt=""> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/1bb1c8075e5144b38da4f3c493132735/Yetxne.png?fit=max&w=1024&fm=webp" alt=""><blockquote>清々しいまでにノスタルジック。&nbsp;玩具みたいなタイマーアプリ。</blockquote> 一ヶ月ほど前、けんじさんが「使いたいタイマーアプリが見つからないので独自にデザインしたい」とプロジェクトが始まりました。 結果的に3週間でリリースまで完了しました。 まず2週間で実装まで終わらそうと締め切りを設定しました。そうすることで最低限実装したいものと時間があれば実装するものと優先順位をつけることができました。（実装したい箇所は無限に出てくるので適当に終わりを決めることが大事ですね...） <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/2274fec79d0544e68145fa22d2e227cc/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-09%2019.57.04.png?fit=max&w=1024&fm=webp" alt=""> ＊ 今回すこし苦戦したのはピクセルパーフェクトのデザインをレスポンシブ対応させることです。 Web制作でレスポンシブを実装するのには慣れていたのですが、ドット絵を拡大縮小するとピクセルの都合で歪みが出てしまいます。iPhoneだけでなくiPadにも対応したかったので違和感のないように実機で確認しながら実装していきました。 こだわったところは数字のカウントダウンアニメーションです。けんじさんが数字間のアニメーションを作り始めて見せていただいた時は「アニメーション気持ち良い！」と「今からこれ実装するんですか！」という気持ちでした。 しかし、けんじさんがこだわっているアニメーションを実装すると手触りが良くなることは前回作った「Ringo」で実感していたのでできる限り実装しようと思い作りました。 ＊ <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/7d97180440454bbfabc8ec5dfa8dab7c/IMG_3799.jpeg?w=800&amp;h=600" alt=""><blockquote>iPadで画面分割して使うといい感じ</blockquote> Godot Engineを使った感想はPICO-8に比べてコードを書く量が少なく楽ということでした。 ある程度アニメーションやモーション、タッチインターフェースに関する機能が揃っていたので1から作ることなく実装できました。（PICO-8では仕組みを知りたいため車輪の再発明をしています） とはいえ、イメージを形にするためにコードを書かなければいけないので慣れるまでは時間がかかります。 作品のクオリティを上げるためにはできるだけコードを書かないでコンテンツに時間を使った方がいいのかな〜とか思ったりします。ゲームシステムとか絵とかサウンドとかストーリーに。あくまでプログラムは表現するための手段として使っているのでなるべく手数を少なくしたい。（コードを書くのは好きなので無限にやってられるけど...） ＊ 今回はGodot Engineを使ってApp Storeにリリースする良い経験になりました。 タイマーはいいですね。皆さんもぜひWave Timerを使ってみてください。 このブログもタイマーをセットして書いてみました。 次はけんじさんのロクジョーヒトマをiOSやNintendo Switchでリリースできたらと思っています。 ------------------------------- <h2 id="h7da81cf46d">Wave Timer </h2>App Store <a style="background-color:#ffffff" href="https://apps.apple.com/app/wave-timer/id6449960392" target="_blank" rel="noopener noreferrer">https://apps.apple.com/app/wave-timer/id6449960392</a> Webページ（itch.io） <a style="background-color:#ffffff" href="https://m7kenji.itch.io/wavetimer" target="_blank" rel="noopener noreferrer">https://m7kenji.itch.io/wavetimer</a> <blockquote>この清々しいまでにノスタルジックさ満点なドット絵デザインのタイマーアプリで 日常をタイムマネジメントしてQOLをあげよう！ 「Wave Timer」は、遊び心満載(じゃなきゃプリインの使うよね！)のツールで、画面に指を滑らせ離すだけで1分から60分までのカウントダウンを設定できます。 特徴的なのは、時間の経過が画面内に溜まる波の高さで表される点。 時間が過ぎるたびに波がゆっくりと引きカウントダウンの終了とともに波が消えるんだ。 これで一目瞭然、まるで砂時計を見ているような感覚を味わえるよ。 Wave Timerで、時間の流れを視覚的にキャッチし些細な気づきを得て人生を噛み締めてください。 慌ただしい日常の中で、この小さな波があなたの時間を静かに見守るからね。 さあ、Wave Timerと共に人生をエンジョイしよう！</blockquote>

Wave Timerをリリースしました。

サウンドの重要性について考えるようになった。映画やドラマ、ゲームにおいてサウンドデザインはとても重要だった。いままでサウンドが作れないからと後回しにしていた。BGMがかかるだけでその場の状況を伝えることができる。ハッピーなのか恐ろしい状況なのか。むしろ映像は適当でもサウンドをつけるだけでそれっぽくなる。最近つくったサウンドはゆったりとした低音メインのアンビエント？のような曲だった。個人的にはポケモンの出現BGMや街を歩いてる時のハッピーなBGMが作りたい。音にはいろいろなドレミファソラシドがあるらしい。レからはじまるドレミファソラシド、ミからはじまるドレミファソラシド、ファからはじまるドレミファソラシド。それらを使い分けることでハッピーな曲調にしたりおどろおどろしい曲調にしたりできるらしい。曲を作り始めてから映画やドラマを見る耳が変わった。 クラゲガイドについて サウンドをつけたら少しわかりやすくなったが根本的な操作感やグラフィックの閉鎖感が問題な気がする。今の状態にどう手を入れたら良くなるか。うーん。一旦放置して次行くのが良いかも。群れの動きが鈍臭いから爽快感よりもストレスが溜まる気がする。最初はある程度ジャンルにそった形にしたほうがいいかも。次は見下ろしのアドベンチャーかローグライク、プラットフォーマーかノベルに挑戦してみる。 薬屋はサウンドをつけたことでかなり良くなったと思う。自分でもずっとやってられるというかやってしまうようなカタチになった。楽しく遊んでたらバグがあって固まってしまった。修正しておかないと。。 個人ブログで日記を続けたい。毎日あったことや思ったこと、気づいたことや考えたことを淡々と書いていく。昔から簡単な日記はつけていた。その延長で書く。開発のことでもいいし見た映画のことでもいい。同じようなことを書いてたら新しい行動をした方がいい。見るものも変わっていくかな。あとで見返して読みにくいところを推敲していく。長期的ななにか。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/898e36f9c9134f51b8289ecca9ebeedb/IMG_1098.png?w=384&amp;h=384" alt="">

2023年5月30日

PICO-8でのグラフィック表現の幅を広げようと思い、好きなゲームをPICO-8の解像度で表現してみる試みをしました。 ゲーム制作中に、他のゲームエンジンならもっと上手くやれるのではないか？などと現実逃避を始めてしまうことがあります。それで他のゲームエンジンを触ってまた初めからコードを書いて...を繰り返すと何も終わらないです。 そのバイアスを解くためにも、PICO-8でどこまで表現ができるのかを知るための模写です。 PICO-8では128×128の解像度という制限だけでなく、使えるスプライトにも制限があります。頑張ればPICO-8で表現できるくらいを目指して描いてます。 <h3 id="h6fddbb7b71">スプラトゥーン サーモンラン</h3><img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/6d89ba86e7d54c5793e3a42d7436c05f/IMG_0041.PNG?w=384&amp;h=384" alt=""> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/ac3b7781a13f4dc898926078b1a2d400/IMG_0039.PNG?w=384&amp;h=384" alt=""> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/3e3fa132a29b4caa9f7399f0a70cb131/IMG_0037.PNG?w=384&amp;h=384" alt=""> サモランはアイコニックに作られていてゲームとしてもわかりやすいので、「2Dで表現したら？」を考えやすかったです。 8×8で絵を描くには、要素の特徴を大袈裟に表現するのがいいと気づきました。 コジャケであれば、大きな目と口、赤いトサカが印象的だったのでそれを全面に出してみました。 あと金属の質感を描くのは楽しいですね。 <h3 id="he5686603dc">ゼルダの伝説 ティアーズオブザキングダム</h3><img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/fe862d23a3b0440d8e26c8ab95ae438f/IMG_0035.PNG?w=384&amp;h=384" alt=""> 制作をしていると、イラストを描きたい欲も出てきます。 では128×128すべてを使って描いてみよう、ということでゼルダの新作を描いてみました。 ドット絵は色がパッキリしていいですね。 とにかく影の中は描かないことを頭に入れながらスケッチしました。 光側のトーンを豊富に描写する意識を忘れずに。 <h3 id="hd8d063621f">コーヒートーク</h3><img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/d1248cfac72245a685670b233017dd31/IMG_0030.PNG?w=384&amp;h=384" alt=""> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/dfc61e45fbb94fdaa85a1a7f182951f4/IMG_0026.PNG?w=384&amp;h=384" alt=""> 最近は寝る前にコーヒートークをやっていました。 サントラもいいし登場するキャラクターのお話も個性があっていいです。 店主（自分）の喋りが村上春樹の「ぼく」っぽくてかなり好きです。ずっと読んでいられる。 2枚目はエルフと悪魔のカップルの会話です。 キャラクターは顔を似せるのが難しいですね。 今年はノベルゲームにも挑戦しようと思っています。 <h3 id="h14d53ed01d">UNDERTALE</h3><img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/bd54228afdae45bfbc5d2b4d42f1fd25/IMG_0018.PNG?w=384&amp;h=384" alt=""> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/023ae278617f4a688ce467c61b8de549/IMG_0020.PNG?w=384&amp;h=384" alt=""> キャラクターのサイズを12×12にしてみました。 8×8だと画面に対して小さくて、16×16だと大きすぎる...。 文字は自作の5×5ピクセルフォントを使っています。 結構いい感じ。 <h3 id="h2dbfbfe78f">DOWNWELL</h3><img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/f927b2fb73694ae9a308f24c145914f2/IMG_0024.PNG?w=384&amp;h=384" alt=""> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/b0282cb9dcfc4b9d84346701812e76c2/IMG_0023.PNG?w=384&amp;h=384" alt=""> Downwellはキャラクターが16×16くらいだったので、4分の1サイズになった感じです。 登場するキャラクターやエフェクトが特徴的で8×8で作りやすかったです。 自分は2-2面までしか進めないです。クリアしたい。 <h3 id="h180c0f1edd">BABA IS YOU</h3><img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/60671037c6314cd59c4b82ae12930a2a/IMG_0021.PNG?w=384&amp;h=384" alt=""> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/bf1c0d3528c14206a7e539c98267aead/IMG_0022.PNG?w=384&amp;h=384" alt=""> BABA IS YOUに衝撃を受けてからインディーズゲーム制作を始めました。 8×8で文字ブロックを表現するのが厳しい感じはありますが、知ってれば読めなくもない...ですね。 <h3 id="h7d59cc217e">ポケットモンスター金銀</h3><img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/bb2a0124795c47a1b7ff060b95700af7/IMG_0017.PNG?w=384&amp;h=384" alt=""> ポケモンをたくさん描いていたら流石にスプライトが足りなくなりますね。 絵としては結構いけるのではないでしょうか。 ポケモンの名前を5×5ピクセルフォント、テキストを6×6ピクセルフォントにしています。 <h3 id="hcf83e1357e"> </h3>

好きなゲームをPICO-8サイズで描いてみた

「何気ない日常からいかに面白いことを探すか」に関して、うちの猫はすごい。 毎日家の中しか行動範囲がないからか、とにかく「遊べるもの」を探してひとり遊びを始める。 よくやるのは机の上からものを落とすこと。落ちて転がるのが面白いとしってから、毎晩ものを落としまくる。 あとはビニールを噛むのが好き。かしゃかしゃいうのが楽しいのだと思うけど、何も知らずに食べちゃったりするからすぐにやめさせないといけない。 ビニールを見えないところにしまっておくと、ゴミ箱漁りを始める。足で踏むとゴミ箱の蓋が開くタイプなんだけど、猫も踏めば開くことを覚えてから毎晩ゴミ箱を漁るようになった。大変。 お風呂を開けると普段行けないエリアだからか、すごいスピードで入ってくる。ドアが閉まる前にとにかく入る。 普段はお湯を張ってないからお風呂の桶に入ってしまう。この前、お湯が張ってある時にドアを開けたら、とんでもないスピードで二階から降りてきてドアをくぐり抜けてお風呂にダイブした。

フライ&ダイブ

ゲームジャムを通して3本制作を終えたので振り返りです。 どの作品も、3分程度で終わる作品になっています。 ゲームジャム（itchというゲームプラットフォームで行われる1週間でゲームを作るコンテストのようなもの）に参加して、個人的に大きな発見が1つありました。 1週間で終わらせるには、細かいところを省いたりボリューム感をぎゅっと縮める必要があるのですが、それがよかったことです。（たぶん） 荒削りで大味の表現が、見る人の想像力を引き出してくれる。 詳細に語りすぎないことで、体験者ごとに作品が作られていく。 ＊ <h3 id="h5cccf171b2">Re: ドリーム</h3><img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/677b7902b5374584a045e88dccda7b57/lsdjam_0.png?fit=max&w=1024&fm=webp" alt=""> 夢では、よく会う人がいて、よくいく町があり、よく死ぬ場所がある。そして朝起きる。それの繰り返し。 よく見る夢を繰り返すだけの作品です。 <h3 id="hb1bc57ec19">Pick Up バレット</h3><img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/246eda45997a44498b4b811dca0bd0e9/juicejam2_2.gif?fit=max&w=1024&fm=webp" alt=""> ジューシーなシューティングゲームを作りました。 有限の弾を拾いながらクリアを目指します。 <h3 id="had3813b749">リリースノート</h3><img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/89ea36e27fc64b9bb09f99a422541776/brackeysjam_2.png?fit=max&w=1024&fm=webp" alt=""> ブロック崩しをクリアするごとにアップデートが入り仕様が変わっていく作品です。 開発者の心情によってゲーム内の仕様が変化したりしなかったりします。 ＊ また、PICO-8を使った制作でネックだだと思っていたフォントが読みにくい問題も、カスタムフォントを作ることでかなりいい感じになりました。 6×6ピクセルフォント <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/008dd5ea016549e8bffcc2f6cf8f166e/6pixelfont.png?w=384&amp;h=384" alt=""> 5x5ピクセルフォント <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/8edb8d7c6c6d4d178b85552a45b9e05c/font_snippet_5.png?fit=max&w=1024&fm=webp" alt=""> 今年の目標は、ゲームジャムを通して小さな作品を10本作り、それぞれブラッシュアップした後に短編集としてitch、iOS、Steamにリリースすることです。 128×128の解像度だから良い、と思ってもらえるように表現を模索していきます。 <a href="https://donutshunter.itch.io/re-dream" target="_blank" rel="noopener noreferrer">Re:ドリーム</a> <a href="https://donutshunter.itch.io/pick-up-bullet" target="_blank" rel="noopener noreferrer">Pick Up バレット</a> <a href="https://donutshunter.itch.io/release-note-eternal" target="_blank" rel="noopener noreferrer">リリースノート</a> <a style="color:#1d9bf0" href="https://twitter.com/hashtag/5x5%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hashtag_click" target="_blank" rel="noopener noreferrer">#5x5ピクセルフォントチャレンジ</a>

3本ゲームジャムを終えたので振り返り

ゲームジャムに参加して作品を完成させることを繰り返そうと思いました。 今回のお題は「LSD」という作品がテーマになっていて、夢を体験できるようなもの。 「LSD」ぽいものをつくってもあれなので「夢」を自分なりに解釈して作品を作ってみます。 まず、夢の要素をいくつか抽出しました。 ・突然シーンが切り替わる ・日常がリアルに再現される ・無茶苦茶な身体能力 ・逃げ回る ・時間が経つと夢から覚める（自力で抜けられない） そこから自分なりに解釈して、「ゲーム」と組み合わせた。 ・ステージが時間で切り替わる ・ステージごとにルールが変わる 汎用的なコンポーネントを作って、ゲーム内オブジェクトに適当につけてみる。 画面内に何の動きもないキャラクターを置いて、適当なコンポーネントをつけて動かしてみる。 敵も置いて、たくさん出して動かしてみる。 てきと自分がぶつかった時の挙動もつけてみたり。 画面の上で遊んでるうちに、この動作気持良いという瞬間がある。 意味わからない仕様や動きでも、なんか気持よかったというのを大事にして制作を進めてみる。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/9f36068d6b7348af82e37435581b65a5/lsdjam_img01.gif?fit=max&w=1024&fm=webp" alt=""> シューティングっぽく弾を出してみた。 その時の弾を適当なスプライトを使ってアニメーションさせてみたらなんかいい動きになった。 虫みたいな敵も、アニメーションの中にシカクを入れるとなんか強そう そして時間が来たらとつぜん寝室に戻される 自分の夢にはよくいく街がある。 あ、まえきたところだ、なんて思うこともなく当たり前に既にある街だと認識している。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/7f71346067334848928b40e9c0e9443c/lsdjam_img02.gif?fit=max&w=1024&fm=webp" alt=""> 銃に打たれて死ぬ夢をよくみる。FPSのゲームはやらないし、戦争の映画も興味ないんだけど、よく見る。死んだところで汗をかいて目覚める。そんな自分の体験を入れてみた。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/7319bcda87364f3db2463db487147ee5/lsdjam_img03.gif?fit=max&w=1024&fm=webp" alt=""> ゲームの仕組みとしては、「別の夢での体験や経験、イベントが他の夢に影響してくる」ことをベースにしてみた。 例えば町を散歩する夢の時、デパートであるアイテムを購入していたら、次の夢で先に進めたり。 <a href="https://shomaisshi.github.io/lsdjam" target="_blank" rel="noopener noreferrer">ブラウザで遊ぶ</a> <a href="https://donutshunter.itch.io/re-dream" target="_blank" rel="noopener noreferrer">Re: Dream by DonutsHunter</a> <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/de364332ed8041e980e80304528e3937/lsdjam_0.png?fit=max&w=1024&fm=webp" alt="">

LSDJAM2022参加してみる

けんじさんにChromeの恐竜がジャンプするゲームみたいの作ってみたら、と言われてからPICO-8でけんじさんと作り始めた作品です。 唐揚げを取るとアゲアゲくんがしゃべります。セリフはアゲアゲくんのTwitterやアゲアゲくんの漫画を参照しました。壁にぶつかってゲームオーバーになった時もセリフを用意しています。 いまのところ、からあげを60個以上とったあとはスコアを上げるのみになっています。 思いつきのアイデアをアプデで入れていきたい。 また、「走れ！アゲアゲくん！」の次回作（スマホ版）も制作中です。お楽しみに。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/c713422940454eaea67f306784bcbdbb/ageage_1.gif?fit=max&w=1024&fm=webp" alt=""> 1/18に秋葉原のMOGRAでやってるゲームイベント、Tokyo indiesに行ってその場で展示させていただきました。 コントローラーがなかったので、QRコードを印刷したポスターを置くだけの予定でしたが、鶏の遺影展示会になってしまい急遽mac bookを置きました。パソコンを置いてるとゲームを展示してる感があっていいです。Tokyo indiesは色々な国の方がいるので英語勉強して喋れるようになりたいな〜と思いました。話せた方が絶対楽しい。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/b7dcf2f022f04a90a35b6f72495e68e7/title.png?w=384&amp;h=384" alt=""> けんじさんが描いてくれたタイトル画面イラスト。（アゲアゲくんがカッコいいｼﾞｭﾜね...） 「唐揚げジャンプ」を中国語に翻訳するとこうなるらしいです。 <a style="background-color:#ffffff" href="https://shomaisshi.github.io/agerun_lp/" target="_blank" rel="noopener noreferrer">走れ！アゲアゲくん！~classic~</a> <a style="background-color:#ffffff" href="https://shomaisshi.github.io/agerun/" target="_blank" rel="noopener noreferrer">ブラウザで遊ぶ</a>

アゲアゲくんのゲームを作りました

こんにちはshomaです。 気づいたら2023年になっていたので目標とかやりたいことを書いていきます。 今年のテーマは「完成させること」 何事も完成させる意識を強く持つように。作品を完成させてリリースする。未完のまま終わらないこと。 また、やらなくていいことはできる限りやらないこと。できるだけだけ簡単に作れるツールを使うこと。 質より量を出すこと。 ここは、そのためのアウトプット用のブログです。 2023年の目標は、 「インディーゲーム作品を小さくたくさんリリースすること」 です。 128×128の解像度でスケッチもたくさん描いていきます。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/3e3dda8f22a34940822af27f77c3dc86/graphic_template_6.png?fit=max&w=1024&fm=webp" alt="">

2023年の目標とか

ポートフォリオ&amp;ブログサイトを作りました。 技術はmicroCMS、Next.js、Vercelを使っています。 <img src="https://images.microcms-assets.io/assets/ed0ec09100b14edba674c272adbe2e67/855c0998c0f740f39e2ffc001a6eb554/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-01-16%2018.56.00.png?fit=max&w=1024&fm=webp" alt=""> ポートフォリオサイト https://microcms-next-portfolio-ebon.vercel.app/ とりあえず公開する為の必要最低限の実装ができたので、デザインは一旦置いておきコンテンツを作っていきます。 記事を更新したいときはmicroCMSで書いて公開すれば自動的にvercelでビルドされて静的なページがデプロイされる仕組み。 デザインを変更したいときはGithubにpushすればOK。 デザインとコンテンツを分離できるので、飽きたら簡単にデザイン変更できます。 これでスマホでもPCでもブラウザがあればWebを更新できるのでめっちゃ楽になった。 以前、Nuxt.jsとnuxt contentを使ってブログを作ったのですが、更新が面倒で続かなかったです。 楽なのは正義。本当はTwitterが正義。 Jamstackは仕事でもどんどん使っていきたい。 ヘッドレスCMS+Next.jsでJamstack構成のメディアサイトをたくさん作りたい。 cssはTailwindCSSを使ってみた。 <a href="https://tailwindcss.com/docs/guides/nextjs" target="_blank" rel="noopener noreferrer">TailwindCSS</a> 時間の表示についてはdayjsを使用。 <a href="https://help.microcms.io/ja/knowledge/specification-of-utc-time" target="_blank" rel="noopener noreferrer">作成日（createdAt）や公開日（publishedAt）がAPI経由で取得すると1日ズレてしまいます。</a> ページネーションについてもこちらの記事を参考に実装しました。 <a href="https://blog.microcms.io/next-pagination/" target="_blank" rel="noopener noreferrer">Next.js(SSG)でページネーションを実装してみよう | microCMSブログ</a> microCMSの参考記事 <a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer">microCMS + Next.jsでJamstackブログを作ってみよう | microCMSブログ</a> <a href="https://blog.microcms.io/next-category-page/" target="_blank" rel="noopener noreferrer">Next.jsでカテゴリー機能を実装してみよう | microCMSブログ</a>