立ち上がれ、私の分身！ポートフォリオ！！

こんにちは、お疲れ様です。AIMAIです。今回は、自身の作品をまとめたサイト、ポートフォリオサイトを制作したので、その紹介をしていきます！AIMAIの好き！！！を詰め込んだサイトです。ぜひみていってください！

実際のサイトはこちらから！

作品の概要

自身の作った作品を並べるためのサイトです。就職活動に必須となるもので、春休みが明けたすぐ1週間で制作しました。時間、厳しかった……

こだわりポイント

はじめに、この作品に込めた想いを語らせてください。

まずは、最大限自分を表現すること。AIMAIの根幹をなす「音楽」をテーマに、遊び心も忘れずに制作しました。もちろん、自分の作った作品を見てもらうものではありますが、私自身のことも余すことなく知ってもらえるような、そんなサイトを目指しています。凝ったものが描けないので、あまり制作する作品に入れなかった自分の絵も今回は使っています。

デザイン

一見すると、モノクロのデザインになっていますが、ホバーして進んでいくと文字に色がついていく、そんなデザインになっています。

アクセントカラーたちは、本当は虹色にしたかったんですけど、赤と青と紫の明度が黒背景に勝てなくて……この色にしました。

ヘッダーはCDで、トップページはスクロールするとデスクトップ版は左、スマホ版は上にCDが挿入されていきます。フッターまで行くとまた出てきて、CDケースの中に収まる、といった感じになっています。

見出しの背景にも五線譜があり、トップページの見出しはそれぞれ文字がある位置が違ったりします。”音色”ということもあって、その位置の違いによって色も変えたり……ヘ音記号なのは、ト音記号より収まりがいい低音が好きだからです。でも私がやってたバリトンサックスはト音記号の楽譜なのでヘ音記号の楽譜は読めません。ゆるして

トップの表題にもたくさん音楽を詰め込んでいます。元のフォントも、レトロな感じのメリハリのあるセリフ体が楽譜っぽいなと思い選びました。
fを楽譜の中のフォルテっぽくしたり、大文字の直線を終止線にしたり、繰り返し記号にしたり、iの点をフェルマータにしたり、jは八分音符にしてしまったり。好き勝手してみました。

コーディング

今回は初めてflocssでのコーディングに挑戦してみました。手探りで進めていったのでかなり時間がかかってしまいましたが、終盤は大分慣れることができました。正直、一人での制作でこれをするのは効率悪い気がしましたが、今後あるチーム制作で活かせるだろうなという所感です。

GitHubCopilotとChatGPTを活用に活用してコードを書きました。ChatGPT大好き！！！！作品一覧のタグでのソート機能と作品ページの画像の拡大機能はChatGPTに力を借りて作っています。めちゃくちゃ時短になりました……

そのほかのヘッダーのアニメーションや、自己紹介の音楽プレイヤー風のスライダーは自分でコードを組み立てましたが、特にスライダーのJavaScriptには苦戦しました。止めたり次に進めたりする動作を、ボタンの上のバーのアニメーションに連動させるのが難しかったです。

CMSは導入しませんでした。だって更新するの自分だし……やりたいことはできたし……

ひとくち日記

このブログが、ポートフォリオっぽくなってません？！なんてことを思いつつ、このブログとは違って固めで簡潔な文章で作品をまとめているので、まあ……

最近、ChatGPTに物語を作らせてそれを読むことにハマっています。長く書かせていると物語の整合性が取れなくなってくるんですけど、結構魅力的なものを自分好みにしながら読ませてくれるので楽しいです。