Café Aurora

課題

インターフェース開発の授業で、同じ依頼を3つのAI（ChatGPT、Gemini、DeepSeek）に出しました。いちばん良いページを選び、1行ずつ理解し、効果をひとつも失わずにコードを手で書き直すのが課題でした。

つくったもの

• オープニング画面、専用カーソル、粒子の背景、メニュー、ドリンクを組み立てるラボのあるサイバーパンクのカフェ。カップはCSSだけで描いています。
• 6時から18時までは「パン屋オーロラ」に変わります。色もメニューも変わり、パンのラボになります。どちらにするかは、ページが表示される前に訪問者の時計で決めます。
• 同じページを、素のCSS、Bootstrap、Tailwindの3つの版で。CSSの書き方で何が変わるかを比べられます。
• Linu Sitesのシミュレーターのサンプルサイトです。各パーツをそこでオン・オフでき、価格も一緒に変わります。

しくみ

• ひとつのテンプレートから13言語を生成。フォントはサイト自身から配信し、CDNは使いません。
• 昼も夜もAAのコントラスト、タップ対象は24 px以上。axeで確認しました。「視差効果を減らす」がオンならアニメーションは止まります。
• シミュレーターからの命令は、Linu Sitesのアドレスから来たものだけ受け付けます。