アワードとったWebサイトをAI使って3日で作った話

武蔵野美術大学基礎デザイン学科2年生の有吉史成(ありよしふみなり)です！

この前、WebサイトのアワードであるCSSWINNERにて人生で初めて賞を受賞することができました！！

制作したWebサイト

なんとこのウェブサイト、3日でデザインから構築までしました！

AIをふんだんに使用することで実現させています。きっとAIがなければ私の技術なら1ヶ月はかかっていたかもしれません。。。

1.きっかけ

TAとして私が1年生の頃に出会った当時3年生の先輩が卒業されるということで卒業制作で70ページの写真集を作っておられました！

私は以前から先輩の作品が大好きで天才だと周りの友達に言っていました！（隠れた大ファンという感じでした）

その卒業制作も美しくて、卒業制作展で先輩の作品がメインで見にいきました。

卒業制作展後、先輩はInstagramでそのデジタル版をGoogle Driveで共有されていました。ただ、Google DriveにそのままPDFが突っ込まれていたので、Google DriveのUIのせいで作品の世界観がだいぶ感じづらくなっており。。

以前からお仕事としてもWeb制作やUI/UX設計を行なっていた私は彼女にWEBSITE化いかがですか。。？と提案したのが始まりです！

2.デザイン

先輩もWebサイト化を当初検討していたものの、技術がなく諦めていたとのことで制作させていただくことになりました！

いつも通り、デザインのCoreValueを設定するところから始めました。

1. Simplicity シンプルさ
2. Curiosity 好奇心
3. Fast loading 高速ローディング

1.Simplicity

最初に決めたのは、デザインしすぎないこと。そのままで美しい写真が主役となるべきです。だからUIは極限まで削る必要があると思いました。

• 余白を徹底的に確保
• タイポグラフィは主張しすぎないものを選択
• ナビゲーションは直感的に
• 操作感はデバイスごとに最適化し、自然に操作できる

コアバリューを踏まえたFigmaでのドラフト案

2.Curiosity

ただ、デザインを削るべきで、ただカルーセルを用意するのではWEB構築する意味がない。そのため、シンプルでありながら、印象的なThree.jsのカルーセルを使うことにしました！

Three.jsでのカルーセルの案

ただ、もちろん、Three.jsで3次元にするからと言って写真を湾曲しすぎて元の写真が壊れてしまったら意味がない。。湾曲率はDat.guiを入れて慎重に細かく設定をしました。

Dat.guiで調整中

3.Fast loading

70ページ分の画像をWEBSITE化するということで、何も対策をしないとロードがめっちゃ重くなることは目に見えていました。ロードが重くなるどころかそもそもスマホだとサイトが落ちます。(実際PNGで入れてたら落ちました)

当初画像をWebPにすることで何とかなるだろうと思っていたので、GoogleGeminiでPNGからWebPに一気に変換してくれるWebAppを作って変換してみましたが、、

Png to WebP一括のWebapp

色味が違いすぎる。あと文字が読めない。

今までWebPにして色味の違いはぶっちゃけそんなに感じたとこ無かったんですが、色が大事だからか色味がだいぶ嫌味な色になっててやめました。写真に文字が入っているのですが、WebPにするとぼやけすぎて読めなくなりました。AI機能をつけて判別するようにしましたが、テキスト認識はGeminiの簡易的なCanvas機能でそのAI機能をつけるのは難しかったようです。

結局JPEGにしてから一気に画像をリサイズすることで大幅に画像サイズを小さくしました。

*一気に画像リサイズするWebAppもGeminiで作って一気にやりました。

さらに少しでもロードの負荷を減らすためにCMSを繋ぐのではなくSSGで画像をファイル内で管理することで、ロード時間改善に努めました。Vanilla JSで簡単に構築したのでNext.js等を使っておらず、自分でSSGで管理する方が早いだろうと思って11tyを採用してCMSにはしませんでした。(サイト更新もないでしょうし)
初回のロード時間は少し長くなってしまいしたが、Cashが溜まっている2回目以降はだいぶ爆速になったかと思います。

3. AIコーディングについて

Google Antigravityを使って3日で実装したのですが、

Google Antigravity神です。

賢すぎ。CursorやCodex等も使ってきましたが、他のAIと比べてもだいぶ的確だと思います。Gemini3で使用してました。別ファイル内のコードを簡単に参照できるのも強い。
話題になるだけある。

学生は1年間無料でGoogleProが使えるので、ありがたく恩恵を受けていきます。

個人的にAIコーディングでちょっとこだわりというか開発のコツが自分の中であって、

AIを自分の支配下に置くこと。

です。

例えば、AIコーディングでよくあるのが

「ここをいい感じにしてください」「アニメーションを追加してください」

的な感じでコーディングベースではなくて事象ベースだと思うのですが、これだと実装方法がいろんなのがありすぎて、自分のわからない、構造のわからないコードを書いてくることが多いんですよね、、

ただ、

「ScrollTriggerでpinを固定し、scrubを0.8に設定して」

「~についてtextをspanに分けてそれぞれの文字でoverflow hiddenにしてgsap fromToでx:-5からx:0で遷移するように」

こんな感じで指示するとAIの暴走なく、

自分の手が超高速で動いている感覚になります。

しかも、AIがやりたいことを汲み取って他のこともそんな感じで追加でやってくれるので、結構おすすめです。しかも、AIが書いてきたコードや構造が自分の頭の中で描いてるものなので、どういうふうに実装しているか分かりやすくて、微調整ができます。

(それでもAIに置いてかれることも多いですが、、）

やりたい実装方法や構造がわからない時はAIにそのまま投げるか、DemoをGeminiのCanvas機能を使って作ってからそのコードを投げます。

そうすると、主導権はこちらのまま、AIが中心となってコードを書き、AIのサポート、手助けのポジションとして人間が動けます。

という感じで、CSSWINNERというWEBDESIGNのアワードに出したところ、STARというAWARDが取れました！
人生初のアワードだったので嬉しいです！

今回の内容を簡単にまとめたショート動画

ポートフォリオサイト

ABOUT ME
有吉史成 - ありよしふみなり
武蔵野美術大学基礎デザイン学科 2年生。
デザイナー。
京都で生まれ育ち、両親が日本料理店を経営している中で成長しました。UI/UXデザインから3Dプロジェクト、AIの使用まで、表現を制限せず、各プロジェクトのニーズに応じて最高のデザインを提供するために必要な手段を得ることを心がけています。
→ CSSWINNER STAR FEB'26