WORKS

ほろよいメーター

ほろよいメーター | 「ほろよいメーター」で酔い度をチェック。適量飲酒を心がけ、お酒をたのしく飲みましょう。by YUKI WORKS
概 要 ほろよいメーター (酔い度チェック&アルコール中毒判定)
URL https://www.yuki-017.com/horoyoi-meter/index.html
コンセプト お酒をもっと、たのしく。
制作の目的 プログラマー養成科の職業訓練校のJavaScript作成課題のために作成しました。

はじめはアルコール中毒という症状、アルコール中毒患者への理解を深める目的で作成しました。
若者中心としたアルコール中毒による死亡事故は少なくありません。

ですが「お酒は危険なのでダメ」ではなく、 お酒の飲み方について考えてもらい、お酒を楽しんでもらうきっかけになるようなサイトを作りたいと考えました。

私自身お酒が好きで、つい飲みすぎてしまうということがあったので、 本数を入力したら血中アルコール濃度が分かるものを作ってみたいと思いました。

ただJavaScriptで動くものを作るのではなく、ユーザー側が数値を入力して結果を見る「参加型」の作品を作りたいと思いました。
ターゲット アルコール中毒で搬送されるのは20代の若者(大学生・新社会人)が多い傾向にあります。
そのため「20代を中心とした若年層」をターゲットに作成しました。
デザイン ビールをイメージし、メインカラーに黄色■ #faf139を用いて統一感を出しました。
アクセントカラーには水色■ #26baf0を使用しています。
白黒の原色を使わず、白色には#fafafa、黒色には■ #1f1f1fを使用しました。

コンテンツ内を白色でかこみ、シンプルでややかっちりめのデザインにすることで、 企業サイトにあるような「ちょっとした特集サイト風」に仕上げました。

アルコール中毒を啓発するのではなく、「もっとお酒をたのしく」をコンセプトにしているので おつまみを紹介するコーナーも作成しました。
写真をそのまま貼るのではなく、いびつな円の形に変え、特徴のあるデザインにして遊び心を持たせたデザインにしました。

右下のビールをクリックすると、ビールがこぼれてビールの海になるようなデザインにして、楽しんでもらえるようなものを作りました。

若年層がターゲットのため、全ページレスポンシブ対応をしています。
スマホ、タブレットでもレイアウト崩れが起きないようになっています。
プログラム JavaScriptを使用して作成しました。簡単に説明を書いています。

Block Reveal Effects
それぞれの見出しにはアニメーションエフェクト「Block Reveal Effects」を活用して、二段階で要素が表示されるようにしました。
サイト自体がシンプルなデザインなので、デザインの邪魔にならないような動きのあるエフェクトをつけました。



月ごとのメッセージ
トップの「Introduction」の1行目(水色の部分)はその月ごとによってメッセージが変わるようになっています。
変数seasonにnew Date().getMonth() + 1で現在の月を取得。
変数season_messageを宣言し、if文で1~12月ごとに文章を変えるようにしました。
最後にdocument.getElementById('season_message').textContent = season_message;で書き換えを行っています。



計算、判定
入力値を取得し、「結果を見る」のボタンをクリックすることでonclick functionが機能し、 血中アルコール濃度、合計純アルコール量、合計飲酒量などが表示されるようにプログラムを書きました。
テーブル部分にある「純アルコール量」にはそれぞれのお酒の量が表示されるようになっています。

血中濃度に合わせた「酔い度」のイラストも表示されるようになっています。
酔い度のイラストは、それぞれの期をクリックすると画像が切り替わるようにしています。



リセット
リセットボタンを押すと、全ての入力値と結果がクリアされるようにしています。
酔い度のイラストは初期状態の「爽快期」に戻るような仕様です。



体重が未入力or「0」の場合
体重が未入力、または「0」の場合はwindow.alertと 体重入力フォームの下に「体重を入力してください」と表示されるようにプログラムを書いています。



wavify
フッター部分、メニュー部分にはjQueryプラグイン「wavify」とSVGを使って「ビールの海」を表現しています。
任意のidを指定して、スピードや高さ、色をカスタマイズしています。



ナビげ―ジョン
右下のビールをクリックすると、パソコンの場合は下から、スマホの場合は右側からメニューが出るようにしています。



よくある質問のアコーディオン
よくある質問では、jQueryを使って答えの部分がアコーディオンメニューのように表示されるようにしています。



フェードイン効果
おつまみのページでは、画像や文章が上下から出てくるようにしています。
遊び心を持たせたページのため、動きが多い方がいいと考えこのような仕様にしました。
レスポンシブ パソコン、タブレット、スマートフォン
制作期間 合計:約22時間(2020年9月13日~10月6日)

【内訳】
HTML/CSSコーディング、文章作成、JavaScriptプログラム:16時間
デザインカンプ:1時間(ラフ画のみ) ファビコン:10分
バナー・ボタン・見出し:1時間半
ロゴ:30分
Twitter card:1時間
イラスト作成:1時間
素材・写真探し:1時間
使用ツール コーディング:VScode
写真加工:Lightroom、Illustrator
ロゴ:Illustrator
バナー・素材:Illustrator
Twitter Card:Illustrator
使用素材 写真AC,Freepik,イラストAC