【制作デモ】実在のブランドではありません。架空のスキンケアブランドを題材に、企画・コピー・デザイン・実装まで一人で作った1ページ完結のブランドサイトです。
▼ 何を解決するページか
「静けさ」「透明感」のような感覚的な価値は、写真と文章だけでは伝わりにくいものです。このデモでは、画面に触れると水面に波紋が広がる仕掛けを入れて、言葉で説明せずにブランドの手触りを伝えています。
▼ 作りの要点
・画像素材を1枚も使わず、JavaScriptの計算だけで水面と波紋を描いています。読み込みが軽く、どの画面サイズでも崩れません
・指やポインタの動きに反応し、しばらく触らないと静けさへ戻ります
・動きを主役にせず、商品の世界観に奉仕させています。派手な演出は入れていません
・PC1440px／スマホ375pxの実機幅で確認し、横スクロール0、コンソールの警告とエラー0で通しています
▼ 制作について
HTML・CSS・JavaScriptの手書きで、外部ライブラリもCMSも使っていません。コーディングには生成AIを併用しています。同じ仕掛けを、御社の商材に合わせた表現でお作りできます。
- カテゴリー
- インタラクションデザイン
- 業種
- メーカー
- 制作期間
-
5日
- 参考価格
-
50,000 円
- 最終更新日
-
2026年9月27日
※この制作物は生成AIを活用しています
制作者
4時間前
写真と動きで覚えてもらえるWebページと、多言語サイトを公開まで一人で。
-
0 満足0 残念
- レギュラー
- 個人
企画から公開まで、一人で手がけているWeb制作者です。
得意なのは次の2つです。
・写真や立体の動きで、一度見たら覚えてもらえるトップページ
・日本語のページを、英語などの外国語でも見られるようにする多言語サイト
自分で作っている音声入力ソフト・iPhoneアプリ・Mac用の道具は、販売サイトを5〜6言語で作って公開し、今も自分で更新しています。
ポートフォリオのうち「自社」と書いていない作品は、業種を想定して作った制作見本です。
【気をつけていること】
・スマホでもパソコンでも崩れないこと。公開の前に、両方の画面幅で必ず確かめます
・外国語版だけ古い文章が残る、といった多言語サイトならではの抜けを出さないこと
・写真や素材の出どころを記録して、あとで困らないようにすること
【進め方】
1. ご相談（今のサイトや参考にしたいサイト、希望の時期をお聞かせください）
2. 構成案とお見積り
3. 制作 → 確認用のページをお送りします → ご修正
4. 公開（サーバーやドメインの設定までお手伝いします）
【先にお伝えしておくこと】
修正を回数の上限なくお受けすることと、長期の月額保守はお引き受けしていません。1本ずつ範囲と期日を決めて仕上げる形にしています。その分、お引き受けした案件は公開まで責任を持ちます。
