01
3秒で、強みを
理解させる。
大きな言葉、作品、証拠の順番を整理し、最初の画面だけで「何を頼める人か」を伝えます。
Message → Interest
Independent designer / Japan
DESIGN THATMOVES PEOPLE.見た瞬間に惹きつけ、迷わず行動へ。
高級感のあるブランドLPから、予約・問い合わせを生む集客LPまで。世界観・情報設計・実装・公開をひとつにつなぎ、スマートフォンで伝わる体験をつくります。
14+Public works
01One-stop partner
100%Mobile first
Move / Scroll / Explore
01 / Why it converts
美しいだけでは、
売れない。
驚かせる演出は入口です。その先で「何が違うか」「自分に合うか」「どう相談するか」が一瞬で分からなければ、問い合わせにはつながりません。
3秒で、強みを
02
世界観を壊さず、
行動を促す。
CTAを目立たせるだけではなく、心理的な抵抗を減らしながら自然に相談へつなげます。
Interest → Action
03
スマホで止まらず、
気持ちよく動く。
GPU演出は端末性能に応じて軽量化。見た目のインパクトと読み込み・操作性を両立します。
Motion → Performance
02 / Conversion sequence
ATTRACT.
EXPLAIN.
CONVERT.
REMAIN.
01 / First three seconds
スクロールする前に、質感・言葉・動きで「他とは違う」と感じさせる。
02 / Information architecture
美しさの中に、強み・違い・利用イメージを迷わず理解できる順番で配置する。
03 / Frictionless action
熱量が高まった瞬間に、相談・予約・購入へ進める導線を自然に差し込む。
04 / Memory design
見終わったあともブランドの形、色、言葉が残る。比較されたときに選ばれる体験へ。
03 / Selected work
CASES,
NOT CARDS.
作品を並べるだけでなく、課題・狙い・スマホ体験まで見せます。以下は世界観設計と実装力を示す自主制作のコンセプトワークです。
01 / Hospitality自主制作 / Concept
AO VILLAPrivate villa brand
海辺の静けさと、資料請求への強い導線を同居させた高級ヴィラLP。写真・タイポグラフィ・3Dモチーフを一つの世界観へ統合しました。
Challenge高級感と資料請求導線
Direction水平線・余白・低速モーション
Mobile1画面1メッセージ
Spatial / Conversion / Mobile
02 / Beauty自主制作 / Concept
LUCEBeauty clinic LP
大人女性の初回来院を想定し、院内の安心感、施術方針、予約導線を一本道に整理。白の余白を生かしながら、迷いを減らしています。
Challenge初回来院の不安を減らす
Direction白磁・光・静かな上質感
CV design予約CTAを段階配置
Editorial / Trust / Booking
03 / Architecture自主制作 / Concept
YŌHAKUArchitecture editorial
建築写真を主役にしながら、設計思想と相談導線を編集的に構成。スクロール自体が空間を歩く体験になるよう設計しました。
Challenge作品性と信頼感の両立
Direction素材・陰影・静かな動き
Structure実例から相談へ自然接続
Architecture / 3D / Editorial
04 / What you get
企画から公開まで、
窓口はひとつ。
デザインだけ、コーディングだけで分断しません。目的を整理し、言葉・見た目・動き・導線を一つのルールで完成させます。
01
戦略・構成
ターゲット、競合、強み、CTAを整理し、スクロールの順番を設計します。
02
世界観・コピー
配色、書体、写真、言葉を統一し、記憶に残るブランド体験をつくります。
03
実装・モーション
レスポンシブ、CSS 3D、Canvas / WebGL、軽量なスクロール演出まで対応します。
04
公開・改善
Cloudflare Pages等への公開、表示確認、基本的な速度・SEO設定まで整えます。
05 / More worlds
業種ごとに、
売り方を変える。
高級ブランドだけでなく、電話・LINE・予約・応募・ダウンロードなど、目的に合わせて導線を変えています。
06 / Reasons to choose
派手さの裏側まで、
設計する。
モーションを増やすほど、遅さや読みにくさも増えます。重要な場所だけを動かし、端末性能・画面サイズ・アクセシビリティに合わせて調整します。
14+公開中の制作実績
01企画から公開まで一人
3DCSS / Canvas / WebGL
SPスマホを別設計
Built for real use
見せるためではなく、
使われるために。
公開後に更新しやすく、読み込みすぎず、問い合わせ先が分かる状態まで仕上げます。
- レスポンシブと実機幅の確認
- 端末性能に応じた演出の軽量化
- 基本SEO・OGP・構造化された見出し
- 公開先に合わせた納品データ
07 / Process
FROM IDEA
TO LIVE.
資料が揃っていなくても、目的と届けたい相手から整理します。制作途中も確認しやすい形で進めます。
目的を定義
ターゲット、課題、競合、必要な成果を整理します。
世界観を設計
配色、書体、写真、コピー、3Dモチーフを決めます。
実装と最適化
PCとスマホを別調整し、速度と操作感を確認します。
公開まで対応
公開設定、最終確認、必要に応じて改善まで行います。
08 / Project finder
30秒で、
依頼の輪郭を。
まだ要件が曖昧でも大丈夫です。4つ選ぶだけで、相談メールに必要な情報とおすすめの制作方針を自動で整理します。
STEP 01 / 04NO DATA SENT
何をつくりたいですか？
いちばん重要な成果は？
予算感はどの段階ですか？
公開したい時期は？
Recommended direction
Conversion × Spatial LP
強い第一印象と、迷わない情報設計を両立する構成がおすすめです。
制作タイプ—
最重要成果—
予算の考え方—
希望時期—
09 / FAQ
依頼前の、
よくある質問。
内容が固まっていない段階でも相談できます。分かる範囲で、目的・業種・希望時期を教えてください。
01文章や構成が決まっていなくても依頼できますか？＋
可能です。誰に何を伝え、最終的にどの行動へつなげたいかを整理したうえで、必要なセクションと文章の方向性を組み立てます。
02スマートフォン表示にも対応しますか？＋
対応します。PC版を縮めるだけではなく、文字量、画像の見え方、CTAの位置、演出の負荷をスマートフォン向けに調整します。
033Dや派手なアニメーションは重くなりませんか？＋
端末性能に応じて解像度や演出量を下げ、低性能端末や「視差効果を減らす」設定では軽量表示へ切り替えます。目的に不要な演出は入れません。
04公開作業までお願いできますか？＋
Cloudflare Pagesなど静的サイト向けの公開に対応します。独自ドメインや既存環境がある場合は、状況を確認して進めます。
Available for selected projects
LET'S BUILDSOMETHING FELT.
つくりたいものが曖昧でも大丈夫です。業種、目的、希望時期、参考URLを分かる範囲で送ってください。
jiuyejiang3@gmail.com ↗