How to 制作
制作の裏側とデモサイトの解説
このサイトについて
私がデザインからシステム実装（JavaScript）、多言語対応までを完全単独で構築した、300ページ規模の本格特化型占いメディアから、目玉である「恋みくじ」の動的ギミックを単体で切り出した実装見本です。
12星座と12干支の完全オリジナルキャラクターを用いて、ただ結果を表示するだけでなく、訪問者がワクワクする「可愛い動き」を追求して作成しました。
制作の舞台裏・こだわり
「ユーザーを飽きさせないエンタメ性」にとことんこだわりました。【画像をクリック】➔【おみくじを振る動画（mp4）の再生】➔【ランダムで結果を表示】という滑らかな一連の流れをシステム化しています。
さらに、同じ「大吉」という結果であっても、裏側で複数のキャラクター画像をランダムに引き当てる仕様にすることで、「何度引いても毎回新鮮な楽しさがあるギミック」を追求。そのため、膨大なデータ量とJavaScriptの緻密なコード設計が必要となりました。
特に、動画再生が終了した瞬間にリロードなしで結果画面へとシームレスに切り替える「結果表示エリア（result-area）」のDOM操作と非同期制御には大変苦労しましたが、スマホでも一切ラグを感じさせない軽快な操作性を実現しています。
ベースとなった本番サイト
日英対応・300ページ超を単独構築した本格占いメディア
ここで実演しているおみくじ機能は、私が実際にデザインからシステム実装（JavaScript）、多言語対応、SEO対策までをすべてワンストップで行った本格占いサイトのギミックを抽出したものです。
本番サイトでは、数百ページ規模の膨大なデータ管理とスマホでの軽快な操作性を両立させた設計を行っています。
