オンラインスクール
Atelier Lumen
アトリエ・ルーメン
Front-end / Landing Page Design
ブランドの世界観を、
そのまま画面に。
フレームワークに頼らず、vanilla な HTML / CSS / JavaScript だけで仕上げた、架空ブランドのランディングページ5作品です。 コンセプト設計・コピー・配色・実装まで、一貫してデザインしました。気になる作品をご覧ください。
Works — 5 Brands
5つの架空ブランドのLP
それぞれ業種・ターゲット・トーンの異なる架空ブランドを想定し、ブランドごとに固有の配色と書体、動きを設計しています。
コーヒー焙煎所
焙煎所 茜
Akane Roastery
プライベートサロン
月白
Tsukishiro Atelier
パーソナルジム
臨界
RINKAI
2ヶ月で、別人の自分へ。
恵比寿の完全予約制パーソナルジムを想定したLP。漆黒×電光ライムの大胆な配色と数字のカウントアップで、「データで結果まで伴走する」高揚感とスピード感を表現しました。
作品を見る
歯科クリニック
そよかぜ歯科
Soyokaze Dental
歯医者さんを、好きになる。
みどり野駅すぐの架空の歯科医院LP。既存4作品のダーク／和テイストとはあえて対照的に、白×ソフトブルー／ミントに暖色を効かせ、痛みへの配慮と「家族で通える清潔感」を明るく親しみやすく表現しました。
作品を見るCase Studies — Site Refresh
サイト改修 ビフォーアフター（2業種）
古い作りのサイトを、スマホ対応・読みやすさ・アクセシビリティ・集客導線の観点で作り直すと何が変わるか。架空の整骨院と個人食堂の2サイトを題材に、改修前後を比較できる事例です。
Before
2008年当時の作り
- スマホ非対応（横スクロール必須）
- テーブルレイアウト・12pxの小さな文字
- 低コントラスト・古い演出（marquee 等）
- 電話番号がタップ発信できない
After
現行の標準（レスポンシブ）
- モバイルファースト・横スクロールなし
- CSS Grid / Flex・clamp() で可読性向上
- WCAG AA・セマンティックHTML5
- tel: リンク＋24時間予約フォーム
Before
2008年当時の作り（個人食堂）
- お品書きが画像1枚（読めない・更新できない）
- 固定幅でスマホは横スクロール必須
- 定休日の説明が極小・低コントラストの注記のみ
- 電話のみ・タップ発信不可（tel: リンクなし）
After
現行の標準（レスポンシブ）
- 価格つきの読めるHTMLメニューに刷新
- モバイルファースト・横スクロールなし
- 営業時間テーブル＋定休日を明記
- tel: リンク＋24時間予約フォーム＋自作SVG地図
WordPress — Child Theme
WordPress 改修デモ（子テーマ・コード層）
既存のWordPressサイトの修正・機能追加にも対応しています。ページビルダーではなく、子テーマ・functions.php・自作ブロックという「コード」で改修するデモを、実際に動くWordPressごと公開しました。
ビルダーに頼らず、コードで直す。
架空の動物病院サイト（テーマ：Lightning）を題材に、tel: 化＋モバイル固定CTA・診療時間表のショートコード・お知らせ機能（カスタム投稿＋自作ブロック）・速度改善（JavaScript をローカル実測で96%削減）を子テーマだけで実装。親テーマに手を入れないのでアップデートで改修が消えません。コードはGitHubで公開、1コマンドで手元で動かせます。
Quick Fixes — Demo
よくある小修正デモ集
スマホ崩れ・問い合わせフォーム・読みにくさ・画像最適化・tel: リンク・レイアウト崩れ。既存サイトのよくある小修正を、実際に触って違いが分かるBefore→Afterで実演しています。
その困りごと、触って直せます。
6種類のよくある修正を、その場で切り替えて確認できるデモにまとめました。「ここだけ直してほしい」という単発のご相談のイメージ共有にどうぞ。
Search — SEO & FAQ
検索エンジン対応・Q&A設置デモ
「サイトを作ったのに検索に出てこない」「お客様向けのQ&Aを置きたい」というご相談向けに、検索結果の見え方の Before→After と、確認すべき設定、構造化データつきのQ&A実装をデモにまとめました。
「検索に出ない」を、設定から直す。
title・meta description で検索結果の一行がどう変わるかの比較、検索に出ないときに確認する7項目のチェックリスト、JS無効でも動くQ&A（よくある質問）の実装と FAQPage 構造化データ（JSON-LD）。リッチリザルトの現状など「できること・できないこと」も正直に書いた、検索まわりの整備のデモページです。
Web App — Interactive Tool
インタラクティブな Web アプリ
スクロール型のLPだけでなく、状態を持つ「動くツール」も制作します。選択に応じてリアルタイムに計算し、結果はURLに保存して共有できる、1画面完結のアプリです。
選ぶだけで、概算がそのまま。
リフォーム見積もりシミュレーター。箇所・グレード・オプション・広さを選ぶと、明細と税込合計をリアルタイムに計算します。選択内容はURLに保存して共有でき、キーボード完全操作・アクセシビリティ・JS無効フォールバックにも対応した1画面完結のアプリ風UIです。
Catalog — Filterable List
絞り込み検索のデータUI
たくさんの項目から、条件で素早く目的の1件へ。スクロール型のLPや1画面ツールとは別ジャンルの「一覧×絞り込み」を、データ駆動の業務プロダクトUIとして制作します。
21件を、その場で絞り込む。
架空の賃貸物件検索UI。家賃・間取り・面積・駅徒歩・築年数・こだわり条件で21件をリアルタイムに絞り込み、件数の即時更新・並べ替え・条件のURL保存・お気に入り保存に対応します。JavaScript無効でも全件を一覧できるプログレッシブエンハンスメント設計で、キーボード操作・スクリーンリーダー・モバイルのフィルタードロワーにも配慮した、データ駆動のプロダクトUIです。
Excel VBA — Documentation
Excel VBA 保守の納品文書サンプル
Webサイトだけでなく、Excelマクロ（VBA）の修正・解読もお引き受けしています。「直して終わり」にせず、次に引き継ぐ方の手がかりになる文書を必ず添えて納品します。その実物見本です。
マクロの中身を、日本語で残す。
「作った人が退職して誰も中身が分からない」マクロを文書化する解読レポートと、修正納品に添える変更内容書（原因・変更箇所・影響範囲をA4 1枚で報告）の見本2点。題材は見本用に自作した架空の請求書作成マクロで、実際のお客様のファイルは使用していません。
Tech & Approach
技術構成とこだわり
掲載しているLP・デモはすべてフレームワーク・ビルドツールなしで構築。HTMLファイルを開くだけで動き、静的ホスティングにそのまま載せられます（WordPress改修デモのみ別リポジトリで、WordPress Playground 上で動きます）。
Vanilla 構成
React・jQuery等は不使用。HTML / CSS / 素のJavaScriptのみで実装し、依存もビルド工程もありません。
レスポンシブ
clamp() と CSS Grid / Flexbox を用い、スマートフォンからワイド画面まで滑らかに最適化しています。
アクセシビリティ
スキップリンク、適切なARIA属性、キーボード操作、prefers-reduced-motion への配慮を組み込んでいます。
軽量な演出
IntersectionObserver によるスクロール表示やカウントアップなど、軽い純正JSで体験を引き立てています。
For Clients — できること・料金・流れ
ご依頼について
「既存サイトのここだけ直したい」から「LP・小規模サイトを作りたい」まで承ります。まずは無料でお見積もりしますので、お気軽にご相談ください。
対応できること
既存サイトの修正・改修
スマホ対応・表示崩れの修正・問い合わせフォーム設置・表示速度／画像の最適化・文字の見やすさ（コントラスト）改善・電話番号のタップ発信（tel:）・文言や画像の差し替え・検索エンジン対応（SEO基礎設定・Q&A設置）。
LP・小規模サイトの制作
ランディングページや数ページの小規模サイトを、デザインから、またはデザイン支給でのコーディングのみでも。スマホ対応・軽量に仕上げます。
動くツール・一覧UI
入力に応じて計算するツールや、条件で絞り込める一覧など、JavaScript で動く小さなUIも制作します。
WordPress の修正・機能追加（コード層）
子テーマでのCSS調整・レイアウト崩れ修正・スマホ対応、functions.php での機能追加（お知らせなどのカスタム投稿・ショートコード・自作ブロック）、コード層の表示速度改善、デザインデータ支給×既製テーマでのコーディング。※Elementor 等ページビルダーでの構築・ゼロからのデザイン制作は対象外です。
料金の目安
| 内容 | 目安（税抜・〜から） |
|---|---|
| 文言・画像の差し替え／tel: リンク化などの小修正 | 5,000円〜 |
| お問い合わせフォーム設置 | 10,000円〜 |
| スマホ対応化（レスポンシブ） | 10,000円〜 |
| 表示速度・画像最適化／コントラスト改善 | 10,000円〜 |
| 検索エンジン対応の基礎整備／Q&A設置（構造化データ） | 10,000円〜 |
| WordPress の軽微修正・機能追加（子テーマ・コード層） | 10,000円〜 |
| LP 1枚コーディング（デザイン支給） | 30,000円〜 |
| 小規模サイト（数ページ） | 50,000円〜 |
※ 内容・分量・納期によって変わります。確定金額は、内容を伺ったうえで無料でお見積もりします。お支払い・やりとりはクラウドワークスを通して安全に行います。
ご依頼の流れ
ご相談
クラウドワークスからメッセージをください。「何を頼めばいいか分からない」段階でも、内容の整理からご一緒します。
お見積もり
対応範囲・納期・金額を明確にしてご提示します（無料）。ご納得のうえで進めます。
着手・ご確認
制作・修正を進め、途中でプレビューURLなどで確認いただきながら調整します。
納品
スマホ実機まで表示を確認したうえで、変更点の簡単な説明を添えて納品します。
アフター
納品後の軽微な手直しにも対応します（対応範囲は事前にお約束します）。
ご相談・お見積もりは無料です。小さな修正ひとつからお気軽にどうぞ。
クラウドワークスで相談する