和風お品書きの多言語対応UI

Motion / Interaction

実装ポイント Focus: 外国人観光客向けのメニュー表を想定し、日本語のメニュー名にマウスを合わせると料理の写真・英語名・解説文がカード形式で出現し、マウスの動きに合わせて滑らかに追従します。
日本語ならではの縦書きと余白が作り出す見た目の美しさと、快適な操作性の両立にこだわりました。
表示・非表示の切り替え処理を最適化し、負担を最小限に抑える工夫を施しこれにより、通信環境やデバイスの性能に左右されず、ストレスフリーな閲覧体験を提供します。
挑戦 Challenge: 縦書き特有の複雑なレイアウト挙動を制御することに注力しました。横書きとは異なる配置ルールを一つひとつ整理し、意図通りのデザインを再現しています。
また、追従するカードが操作の妨げにならないよう表示位置をプログラムで厳密に制御し、機能性と使いやすさを両立させました。
使用技術 Animation: ・HTML5 / SCSS
・JavaScript (GSAP)
詳細 Details: #GSAP #Hover Interaction