01パーソナルジム｜体験予約 LP
IRONPACT
体は、約束で変わる。
黒と、溶けた鉄の橙で、力強く活動的に。セクションをトレーニングの「SET」に見立て、予約は店舗・日付・時間枠を選んで確認画面まで進むフォームにしました。
サイトを見るApproach（考え方）
見た目がきれいなだけのページは、すぐに忘れられてしまいます。誰に、何を伝えて、どう動いてほしいのか。目的から逆算して構成を考え、デザインし、Web サイトやチラシ、SNS の投稿に仕上げるところまで。最初から最後まで、ひとりで責任を持って担当します。
Selected Works制作見本
よくある LP のご依頼を想定して作った、架空の 3 サイトです。題材・目的・デザインの方向をそれぞれ変えています。予約フォームやカートも実際に操作できます。
予約カレンダー02スキンケア商品｜購入 LP
asatsuyu
朝露のように、澄んだうるおいを。
写真を大きく、余白を広く。商品写真は 3DCG で制作し、スクロールに合わせて背景色が夜明けから朝へ移ります。カートは数量変更と定期便の切り替えまで動きます。
サイトを見る
カート03法人向け予約管理サービス｜無料トライアル LP
hitokoma
予約の「ひとコマ」を、売上に変える。
情報を整理して、わかりやすく。製品画面のモックはすべて HTML と CSS で描き、料金の切り替え・機能タブ・費用対効果の試算・申込みフォームを実装しました。
サイトを見る
費用対効果の試算※制作見本は架空のサイトです。掲載している店舗・商品・数値はすべて架空のもので、フォームの内容は送信されません。
Print & Socialチラシ・SNS 画像
Figma・Canva で、チラシや Instagram の投稿、Web 広告のバナーもつくります。Web サイトと色・書体・写真のトーンをそろえると、どこで見ても同じお店・同じサービスだと伝わります。下は、上の制作見本と同じ架空ブランドで作った見本です。
※架空のブランドで作った見本です。掲載している店舗・商品・数値はすべて架空のものです。
Servicesできること
Web サイトだけ、チラシだけ、まとめてでもお受けします。料金は内容に合わせてお見積もりします。作りたいもの・素材の有無・希望の時期をお知らせいただければ、目安をお伝えします。
-
01
LP 制作Landing Page
目的とターゲットの整理から、構成・デザイン・コーディング・公開まで。原稿や写真がまだなくてもご相談ください。
-
02
チラシ・SNS 画像Figma & Canva
チラシ・ショップカード・Instagram の投稿やストーリーズ・Web 広告のバナー。Canva で作れば、あとから文字や写真をご自身で差し替えられます。
-
03
コーディングFrom your design
いただいたデザインを、崩れにくく更新しやすい HTML / CSS に。スマートフォン表示の調整や動きの実装も含めて対応します。
-
04
機能の実装Forms & Interaction
予約・問い合わせフォーム、入力チェック、料金シミュレーター、カート。見た目だけでなく、使いやすさまで作り込みます。
-
05
改修・スマホ対応Fix & Improve
表示の崩れ、スマートフォンでの見づらさ、ページの重さなどの改善。部分的な修正からお受けします。
Why Mto_Web大切にしていること
見た目だけでなく、「ちゃんと動いて、あとから直しやすい」こと。本業が Web エンジニアだからできる作り方です。触って確かめてみてください。
01
どの画面幅でも、崩れない。
スマートフォン・タブレット・PC。幅に合わせてレイアウトを組み替えます。右端のつまみを左右に動かしてみてください。
02
迷わせないフォーム。
入力中にその場でチェックして、どこを直せばいいかを具体的に伝えます。
入力すると、その場でチェックします。
03
軽くて、速い。
画像は WebP に最適化し、見えるところから順に読み込み。ライブラリに頼らない軽いコードで、スマートフォンでもすぐに表示されます。
04
あとから直しやすいコード。
命名のルール（FLOCSS / BEM）をそろえ、誰が読んでもわかる HTML / CSS に。コード一式の納品にも対応します。
<!-- 予約フォーム -->
<form class="p-reserve__form" novalidate>
<fieldset class="p-reserve__group">
<legend>日付</legend>
.p-reserve__slot.is-selected {
background: var(--color-accent);
}05
決めたことは、残す。
やりとりで決めたことは記録して共有します。「言った・言わない」を防ぎ、修正もスムーズに進みます。
- メインコピーを「体は、約束で変わる。」に決定
- 予約は 3 ステップ（入力 → 確認 → 完了）
- スマホは画面下に予約ボタンを固定
Processご依頼の流れ
ご相談からお見積もりまでは無料です。内容と費用にご納得いただいてから始めます。
- 01
ご相談
作りたいもの・目的・時期をお聞かせください。決まっていないことが多くても大丈夫です。
- 02
お見積もり
内容・費用・スケジュールをまとめてお送りします。
- 03
構成・デザイン
ページの構成案を作り、デザインをご確認いただきます。
- 04
制作
Web は PC とスマートフォンの両方で確かめながら実装。チラシや画像は実寸で仕上げます。
- 05
確認・修正
実際に動くページをご確認いただき、修正して仕上げます。
- 06
納品・公開
Web はファイル一式、チラシや画像はご希望の形式でお渡しします。公開や入稿もご相談ください。
FAQよくあるご質問
ほかにも気になることがあれば、ご相談の際にお気軽にお聞きください。
原稿や写真が用意できていません。
構成の段階で、必要な文章と写真を一緒に整理します。写真は商用利用できる素材でのご提案も可能です。
デザインだけ、コーディングだけでも頼めますか？
はい、どちらか一方だけでもお受けします。
チラシや Instagram の投稿画像だけでも頼めますか？
はい。Web サイトとセットでも、チラシや投稿画像だけでもお受けします。印刷用の PDF・画像・Canva で編集できるデータなど、ご希望の形でお渡しします（印刷の入稿仕様は、ご利用の印刷会社に合わせて確認します）。
修正は何回までできますか？
回数の目安はお見積もりの際にお伝えします。デザインの確認と、実装後の確認の 2 つの段階でご意見をいただきます。
公開後の更新もお願いできますか？
はい。文章や画像の差し替えなど、公開後の修正もご相談ください。ご自身で更新しやすい作りにすることもできます。
やりとりはどのように進めますか？
メールやチャットでのやりとりが中心です。ご希望があれば、オンラインでの打ち合わせもご相談ください。
About
Mto_Web
LP・Web サイト制作 ／ チラシ・SNS 画像のデザイン
Mto_Web として、Web サイトとグラフィックの制作をしています。本業は Web エンジニアで、Python / Django、TypeScript、AWS で Web サービスを開発しています。見た目を整えるだけでなく、「ちゃんと動いて、あとから直しやすい」ものをつくることを大切にしています。
開発では AI ツールも取り入れながら、決めたことを記録に残して進めています。小さなご依頼でも、目的に合った形をご提案します。
- Figma
- Canva
- HTML / CSS
- JavaScript
- TypeScript
- レスポンシブ
- アクセシビリティ
- Python / Django
- AWS
- Cloudflare Pages
- Blender
このサイトも、ライブラリを使わずに HTML / CSS / JavaScript だけでつくっています。
Contact
Let’s make it clear.ご相談・お見積もり
ご相談・お見積もりは無料です。作りたいもの・目的・希望の時期を添えて、メールでお気軽にどうぞ。