Works
制作実績
5本とも、実在しない架空のクリニック・会社・商品・教室・サービスのLPとして、自主制作したものです。新しいものから並べています。
-
勤怠管理サービス
資料請求のLP
パソコン・スマホ・タブレットの画面イメージを重ねて、使う場面をひと目で見せました。人数を動かすと月の料金が分かる計算と、「無料トライアルは自動で有料にならない」ことを、ボタンの近くに置いています。
LPを見る（勤怠管理サービスの資料請求LP。新しいタブで開きます） -
料理教室
体験レッスンの予約LP
4人分の食卓の写真と「4品・90分・2,000円」の数字で、魅力を伝えました。駅に着く時刻を選ぶと教室に着く時刻が分かる「帰り道チェック」と、料金・キャンセルなどの条件を、予約の前にまとめています。
LPを見る（料理教室の体験レッスン予約LP。新しいタブで開きます） -
化粧水
定期購入のLP
水面に立つボトルと、ゆらぐ水の光で、商品を主役に見せました。定期便の回数・値段・解約の方法は、申し込みボタンの近くと確認画面の両方に表示しています。
LPを見る（化粧水の定期購入LP。新しいタブで開きます） -
運送会社
ドライバー・倉庫スタッフの採用LP
夕方の道と標識の絵で、「帰りたい時間に帰れる」を見せました。退社時刻・残業・休日を数字で示し、仕事と経験年数を選ぶと月給の目安が出る計算を置いています。
LPを見る（運送会社の採用LP。新しいタブで開きます） -
美容クリニック（美容皮膚科）
無料カウンセリングの予約LP
白を基調に、流れる光の動きで「なりたい肌」を先に伝えました。悩みを選ぶと、原因がある肌の深さと、そこに届く施術が図で分かります。料金とリスク、自由診療であることも表示しています。
LPを見る（美容クリニックの予約LP。新しいタブで開きます）
What I do
できること
5本の制作で、実際にやってきたことです。
-
企画から公開まで、一人で
LPの企画（構成・見出しと文言）、デザイン、コーディング（HTML / CSS / JavaScript）、公開（Cloudflare）まで。
-
スマホ対応
スマホとパソコンの、いくつもの画面の幅で表示を確かめています。
-
表示の速さへの配慮
写真を軽い形式（WebP）にして、画面の幅に合った大きさの写真を読み込みます。
-
動きを控える設定への配慮
端末で「動きを減らす」設定にしている人には、アニメーションを控えます。
-
動きのある表現
水面にゆらぐ光（WebGL）、流れる光（canvas）、SVGで描いた絵。
-
触って分かる部品
料金の計算、月給の計算、帰り道チェック、悩みを選ぶと答えが出る図や表。
-
表示の決まりへの配慮
定期購入の条件の表示、根拠のない「一番」を使わない、自由診療の表示など。ガイドラインや法律の考え方を参考に、表示を確かめました。
About
制作について
AIツールを活用して制作し、見え方・動き・文言はすべて自分で確認・調整しています。
ヘッダーの絵（トップの部屋の絵）は、AIで作成しました。