ウェブサイト / ゴルフスクール
ARCLINE
測る設備と料金を、
先に開いて見せる。
神奈川県横浜市の架空の屋内ゴルフスクールを題材にしたウェブサイトです。全打席の測定設備と追加料金のない月会費を前に出し、コース料金を比べて体験レッスンの申込へ進める構成にしました。
作品を開く架空の事業者を題材にした自主制作です。
料金だけで、
比べさせないために。
想定したのは、ゴルフを始めて間もない社会人です。設備、費用、担当の付き方という三つの軸を先に示し、月会費の額だけで通う先を決めずに済む材料を渡すことを目指しました。
冒頭はレッスンの映像と短いコピーにとどめ、その先に通う人の像、三つの特徴、コース料金、屋外レッスン、体験の内容、アクセスの順で並べています。
打ち出しの角度で、
斜めに切る。
地色は緑がかった淡い生成り、文字とボタンには深い緑を使い、見出しも本文もゴシック体でそろえています。ヘッダーはロゴと主なページを入れた丸いバーで、画面上部の中央に浮かび、下へ読み進めると縮みます。
切り口はすべてボールの打ち出しと同じ右上がりにそろえ、節の見出しは画面を横切る黄緑の斜めの帯、写真は斜めに切って組みました。節の間ではスクロールに合わせて放物線が描かれてボールが飛び、着地すると次の節が斜めの境目から現れます。
希望日と条件を入れて、
内容を確かめる。
コース料金は五つのプランを並べ、通い放題や月4回といった回数と、平日昼など使える時間帯を添えました。入会金と体験料、ラウンドレッスンの別料金も同じページにあります。
体験の申込では、希望日を三つまでとゴルフ歴、参加人数を選べます。送信前に入力内容の確認を挟む形にしました。送信も保存もしないデモです。
縦に積んでも、
金額の条件は残す。
スマートフォンでは映像を画面いっぱいに敷き、下から濃い緑へ暗くなる地にコピーと予約ボタン、体験料金を重ねます。丸いバーの「メニュー」を開くと、全ページのパネルが出ます。コース料金はプラン名と金額を縦に並べ、条件は開閉で読ませます。
制作情報
- 種別
- 自主制作・架空サイト
- 制作範囲
- 構成・文章・デザイン・実装
- 使用技術
- HTML / CSS / JavaScript
Vite / GSAP - 対応画面
- PC・タブレット・スマートフォン