# # 宇部高専祭ウェブサイト2025 2025年宇部高専祭ウェブサイトを制作しました

せっかくシステムを作ったのでブログっぽいことをしてみます文章力無いですが、 ## ## 経緯コンピュータ部の先輩に話を聞いたようで、私のところに高専祭公式サイト開発の依頼が来ました高専でもWebサイトを作る人というものは意外と少ないんですね昨年と一昨年はわたすけ先輩がサイトを作っていたので、その引き継ぎですわたすけ先輩↓ 技術的な部分で私の技能は拙いので、デザイン全振りでいきたい...! バイブコーディングの流行りにのって、claude codeで開発を進めました AIに任せたほうが自分で書くより速いし品質もいいそして何より開発が楽 ## ## 解説せっかく作ったので語らせてください ### ### トップページ高専祭のテーマグラフィック(?)を置いてみました高専祭のロゴ作成のときに作って、ちょうどいい使い所がここでしたねファーストビュー「っぽさ」を演出できたのでは無いでしょうか

高専祭に関係あるかと言われると無いのですが、グラフィックデザインを簡単に使えるのがチケットのグラフィックだったりします適当に文字を入れただけなのですが、なかなかいい感じです

ダークモードではこれですね個人的にはダークモードのほうが好きスクリーンショット 2025-11-09 214937.png

ライトモードはインスタグラムのテーマカラーダークモードはXのテーマカラーを使用しています最初の考案段階からSNS風のレイアウトと、SNSのカラーテーマにするってことは決めていたのでいいかんじに取り入れられていると思っていますスクロールしていくとカードが並んでますスクリーンショット 2025-11-09 215044.png

ヘッダーのここ↓

開発途中でiOSの大幅なスタイル変更があって、ガラスモーフィズムが流行りました「LiquidGlassがリアルですごい」というあれです私も流行りにのっかって使ってやろうと思ったのですが、あんまり上手くいかなかったのでシンプルなブラーに落ち着きました

ガラスモーフィズム的なヘッダーを作ろうとした形跡 https://t.co/QFV8Cnuppa pic.twitter.com/css8uZvs5l
— samuido (@361do_sleep) June 18, 2025

### ### ステージ/展示・露店カード一覧のページですスクリーンショット 2025-11-09 213803.png

カードを表示するときにフェードインで下からアニメーションしてきますこれ、最初作ったときは一定の間隔でアニメーションさせていたのですが、それでは最後のほうのカードが表示されるのにラグがあってなんとなく不自然でもあったので、最初はゆっくり、徐々に間隔を狭めて整列するアニメーションになっていますサイトの軽量化をしようと思ったときにGSAP(整列アニメーションに使用したライブラリ)を置き換えて消そうかと思ったのですが、ここの置き換えが面倒だったのでやめました表示形式は初期状態の他にコンパクトなカード形式と、リスト風の横長表示形式がありますスクリーンショット 2025-11-09 223024.png

個人的に好きなのは、この横長表示↓ スクリーンショット 2025-11-09 223030.png

スタイリッシュに見えますよねカードは画像の上からテキストを重ねているのですが、画像が白いと見えづらいので、グラデーションをかけていますグラデーションをかけると写真が濁ってしまうのでギリギリまで薄く、かつ見えるように調整しています横長表示なら片側真っ暗でも良かったのですが、少し面倒カードのコンポーネントはサイト全体で統一していて、使い勝手はいいのですが、こういうところは設定が面倒くさいですカードをホバーするとタグなどが表示されて浮き上がりますスクリーンショット 2025-11-09 224754.png

コンパクト表示はコンパクトに詳細を見るボタンスクリーンショット 2025-11-09 225302.png

リスト表示は広がりますこれは動きが気持ちいいスクリーンショット 2025-11-09 225448.png

### ### タイムスケジュール高専祭はイベントが大事なので、タイムスケジュールもカードで見やすく作りましたスクリーンショット 2025-11-09 230032.png

これは自分で使ってても便利スマホで見ることも多かったですスクリーンショット 2025-11-09 230409.png

### ### 会場マップやっぱり、ここですよねこのサイトのメインともいえます学内マップを自前実装しましたスクリーンショット 2025-11-09 230844.png

面倒くさそうに見えますが、実際かなり面倒で一番時間がかかりましたまず、マップのデータが無いのでイラレで作るところから始めました ↓マップには右半分使われていないのですが、実際に制作したのはこのsvgです

学校の公開しているキャンパスマップも、あるはあるのですが、立体になってたり、実際の建物とズレてるところがあって使うのをやめました

代わりに使用したのがネット上のなにかのマップでした(肝心のところを覚えてない) 最初、航空写真からトレースしようとしたのですが、境界が曖昧で諦めました Googleマップからも考えたのですが、Googleマップの建物表示ってかなり曖昧なんですよね話を戻しますマップの操作の実装これがまたかなりの難所でした svgって万能ではなくて単純に画像を拡大縮小するだけでは、ガサガサになってしまうマップのベースの部分は参考リポジトリを3つくらい用意して作ったのですが、そのままの実装では使いづらいと感じましたなので、マップを拡大縮小して自分側が動いているのではなく、実際はマップ側が変形していますズームで表示サイズを大きくしたり、移動させたり、そしてそれにピンを追従させていますスクリーンショット 2025-11-09 232506.png

ピンの挙動もいくつか工夫していて、マップの拡大率に合わせて一定の距離より近いピンをまとまり(クラスター)として表示したり、ラベルの表示・非表示・左右位置を見やすく保つアルゴリズムを組んでいますスクリーンショット 2025-11-09 233011.png

ピンをクリックするとカードが表示されますカードを押すとそのまま詳細を見れますこれもなかなかいい感じでした右下のコントロールでマップの全画面表示と位置のリセットが出来ますスマホだとマップが小さいので全画面表示は必須ですこれは私だけなのかもしれませんが、スマホのブラウザで表示したときにタブなどの表示がされたりされなかったりで、時々コントロールが隠れてしまうことがあったので、マップのダブルタップでも全画面表示を切り替えられるようにしていますスクリーンショット 2025-11-09 233311.png

建物の階で重なってしまって、一部見にくいピンがあると指摘されたことがありましたそのときはタグで検索の機能を使って建物や階を絞れば見やすくなるよと伝えましたが、さすがに分かりづらいですよね面倒ですが、階数切り替えの機能も今後作る必要がありそうですスクリーンショット 2025-11-09 233855.png

### ### 詳細ページカードをクリックすると遷移するイベント詳細のページですスクリーンショット 2025-11-09 234937.png

サムネイル画像と場所、説明、タグあとマップと関連アイテムを表示していますここはもうちょっと頑張りたいところではあったのですが、イベント企画者からデータを集めるというのを、実行委員はあまりやりたくなさそうだったので私が簡単に説明を入れるという形になりました使おうと思えば有効活用出来そうだなとは思いつつ、そこは断念まぁ文化祭って、調べてどうこうするというより、ブラブラと歩くのが醍醐味なので需要は無いのかもしれないですね ### ### ブックマークシンプルなブックマーク機能ですスクリーンショット 2025-11-10 000055.png

SNSの要素としてあるので、作ってみましたが、実際使っている人がいたのかどうか、わかりませんカード右上の★マークか、詳細ページ右上の★マークで保存できますこれアイコンの切り替えが面倒だなと思ってテキストの★と☆を切り替えることで実装したのですが、たぶんブックマークアイコンのほうが良かったですね ### ### 検索ページ検索機能を実装しましたスクリーンショット 2025-11-10 000713.png

検索機能を1ページにするとなるとどのような構成がいいのか悩んだ結果、整っているのか整っていないのか微妙なデザインになりました Googleを意識してますが、全然違う気もするデータを保存しているjsonファイルからタイトルや説明・タグを検索しています AIに丸投げしましたが、文字をハイライトしてくれる機能気に入っていますスクリーンショット 2025-11-10 000923.png

検索欄の☓が重複していますね今気づきました検索機能はわりと頻繁に使いました一覧から探すより早いです ### ### スポンサースポンサー一覧もカード表示で実装しましたスクリーンショット 2025-11-10 001533.png

思っていたよりもずっと数が多くて驚きました説明を書くためにわざわざ1社ずつ調べたり、WebサイトのURLを探したりしました支援額で表示順を決めています ### ### 　【小ネタ】コンソールエッグ開発者コンソールに技術スタックとリポジトリのURLを表示していますこれは前任の先輩がやっていたので、真似しました伝統にしていきたいスクリーンショット 2025-11-10 002430.png

こんなところ興味のある人しか見ないですからね ### ### 引き継ぎ今回、私初めて公式サイト担当をしたのですがサーバーやURLの申請など、手続きが不明瞭で面倒な部分がありましたそして、説明の文書などなにもない経験者は既に卒業しているし、担当教員などもいないです引き継ぎの重要性をひしひしと感じました REDME.txtとして日記ついでに残しておきましたセキュリティを考えると大々的に公開できるものではありませんが、みられても大丈夫なくらいの内容ではあるはず... 学内ネットワークからでしかデプロイ出来ないという仕組みなので、まぁ大丈夫でしょう ## ## 次はどうしようか今年やりたかったことは実現できたと思います幸い、私はまだ3年なので来年・再来年も高専祭のサイトを作れるわけです(?) 来年は今年よりももっと良いものを作りたい今年は実装に必死でデザイン的なページを作れていないんですよねどうせならデザインやアニメーションに凝ったものを作ってみたい来年の目標はそうしておきますここまで読んでくれた人ありがとうございます自己満で書いているものなので、軽い自分語り的なものだと捉えてもらえれば嬉しいです精進します