VILLION Inc. — Selected Works
制作例 Works
業種ごとに、伝え方から設計する。
About these works
受託でお預かりした案件は守秘義務により公開できないため、ここではVILLIONが独自に企画・制作したWebサイトを掲載しています。
業種ごとに、誰に・何を・どの順で伝えるかを決めてから、構成・デザイン・実装まで一貫して手がけています。図版はすべてSVGとCSSで描き、外部ライブラリは使っていません。
Landing Page — 水まわり修理
水まわり修理サービスの集客LP
「みずまわり119 港南」
「呼んだら高額だった」という不安を先回りして解消する構成。料金表とFAQで判断材料をそろえ、電話・LINE・フォームのどれからでも相談できるようにしました。
- スマホ下部に固定の相談ボタン。電話番号はタップで発信
- 料金は「基本＋作業＋部品」の内訳まで表で開示
- 対応エリアはSVGの概略図とチップで表示
Recruiting — 訪問看護
訪問看護ステーションの
看護師採用LP
応募をためらう理由（オンコール・ひとりでの訪問）に正面から答える構成。明朝体と生成りの配色で、病院とは違う「暮らしの場」の仕事であることを伝えます。
- 給与は内訳まで開示し、1日の流れはタイムラインで表示
- 「見学のみ」も選べる応募フォームで最初の一歩を軽く
- 人物・建物のイラストもすべてSVGで作画
Corporate — 精密部品メーカー
精密部品メーカーの
コーポレートサイト
図面をモチーフにした4ページ構成。同じCSSを共有するWordPressのオリジナルテーマ付きで、お知らせは投稿から自動で表示されます。
サイトを見るPitch Deck — 受発注サービス
受発注デジタル化サービスの
事業提案資料
HTMLで組んだ12枚のスライド。課題→解決策→仕組み→収益の試算→判断基準まで、意思決定の順に組んだ構成。数字はすべて前提を明示した試算として示しています。
スライドを見るHow it's made
画像に頼らず、
コードで描く。
- 外部ライブラリ
- 0
- 写真・画像素材
- 0
- このページで描いているSVG要素
- —
素のHTML・CSS・JavaScriptだけで、スクロール連動の演出まで組んでいます。
人物・建物・図面・グラフは、すべてSVGとCSSで描いています。
読み込んだ時点で、ブラウザが数えた実数を表示しています。
- スマホとPC375pxの画面から1440pxまで、崩れ・横はみ出しがないことを確認しています。
- 動きを減らす設定OSで「視差効果を減らす」を選んでいる方には、演出を止めて表示します。
- JavaScriptがなくても演出が動かない環境でも、本文と画面はすべて読めるように作っています。
Contact
こういうサイトを、
一緒につくりませんか。
LP・採用ページ・コーポレートサイト・WordPress・提案資料まで。業種と目的に合わせて、構成から実装まで一貫してお受けしています。ご相談は会社サイトからどうぞ。
会社サイトへ