Yuta-Fukuhara

Roulette App (ルーレットアプリ)

HTML / CSS / jQuery / Glassmorphism
Roulette App

はじめに

「今日のランチはどこに行こう?」「次の掃除当番は誰?」 そんな日常の些細な決断を、少しだけ楽しくするために開発したのがこの「Roulette App」です。

シンプルながらも、使うこと自体が楽しくなるような「美しいデザイン」と「心地よい動き」にこだわって作成しました。

主な特徴

1. モダンなデザイン (Glassmorphism)

UIデザインのトレンドの一つである「グラスモーフィズム(すりガラス風)」を取り入れました。 背景のぼかし効果や透過を使用することで、奥行きと洗練された印象を与えています。

2. 完全レスポンシブ対応

スマートフォンでの利用を第一に考え、PCからモバイルまでどのデバイスでも快適に操作できるように設計しています。 画面サイズに合わせてレイアウトが自然に変化します。

3. 自由なカスタマイズ性

ルーレットの項目はユーザーが自由に追加・編集・削除できます。 ランチの候補店リストを作ったり、パーティーゲームの罰ゲームを決めたりと、用途に合わせて自由に設定可能です。

技術スタック解説

HTML5 / CSS3

セマンティックなマークアップと、Flexbox/Gridを駆使したレイアウト。

JavaScript (jQuery)

DOM操作とアニメーション制御に使用。 ルーレットの回転ロジックや、当選項目の判定などのコア機能を実装しています。

デザイン

Google Fonts (Inter, M PLUS Rounded 1c) と Font Awesome を使用し、視認性と美しさを両立させました。

使い方

  1. 項目の追加: テキストボックスに入力し、+ボタンでリストに追加。
  2. 項目の編集/削除: リストアイコンから簡単に編集・削除が可能。
  3. スタート: STARTボタンでルーレットが回転!ランダムに当選が決まります。