
くちどけ堂
「単一プロダクト」という制約をブランドの優位性に転換するUI/UX設計。ギフト用途に特化した導線を分離し、個数・のし・保冷剤・予約の要否といった付帯条件を、1画面だけで判断できる構造にしました。
デザインから実装まで。HTML / CSS / JavaScript をすべて手で書いています。その業種で表示が定められている事項を先に調べ、スマートフォンでの見え方を決めてから作ります。
WordPress のテーマを自作します。更新したい部分だけを管理画面から触れるようにし、触る必要のない部分は編集できないようにしておきます。誤って壊してしまう事故を防ぐためです。手順書もお渡しします。
見積もりシミュレーター、料金計算、診断コンテンツ。サーバーもデータベースも使わず、URLを開けば動く形で納品します。
チャットでの予約受付、スタッフへの通知、確認やリマインドの送信。決まった手順の作業を、生成AIと自動化の仕組みで肩代わりします。AIの答えはそのまま使わず、人が確かめる手順と、個人情報を外に出さない設定まで含めて組み込みます。
請求書、管理表、集計フォーマット。入力する人が迷わない順番に並べ、間違いに気づける形にします。関数だけで組めるものはマクロを使いません。セキュリティ設定でブロックされる事故を避けるためです。
売上・顧客・研究データを統計的に整理し、見て判断できるレポートやダッシュボードにします。数字が動いたとき、それがいつもの揺れなのか、確かめる価値のある変化なのかまで示すことを大切にしています。
提供している内容ごとに、1点ずつ選んでいます。 業種やターゲット層に合わせて、ページ構成から配色・書体まで、すべて個別に設計しています。
掲載しているものは、すべて架空の企業・店舗を題材にした制作サンプルです。実在の組織からの受注実績ではありません。 各サイトには常時「制作サンプル」の表示を入れ、検索エンジンには登録されない設定にしています。社名・住所・電話番号・価格はすべてダミーです。

「単一プロダクト」という制約をブランドの優位性に転換するUI/UX設計。ギフト用途に特化した導線を分離し、個数・のし・保冷剤・予約の要否といった付帯条件を、1画面だけで判断できる構造にしました。

WordPressテーマをフルスクラッチで構築し、物件管理システムをカスタム投稿として実装。宅地建物取引業法に基づく業者票の明示要件を設計の前に洗い出し、それを満たす形でUIに組み込んでいます。

サーバーを必要とせず、ブラウザ内で完結する動的見積もりアプリケーション。外部ライブラリに依存せずVanilla JS(素のJavaScript)のみで実装しているため、既存サイトの環境を問わず、安全かつ軽量に導入できます。

24時間対応のAI受付が、チャットで空き状況の確認から予約の確定までを行います。予約が入ると「スタッフへ通知 → 台帳に記録 → お客様へ確認 → 前日リマインド」までが自動で走り、管理画面で実行ログを確認できます。
架空の整体院を題材にした自主制作のデモです。公開中のAI受付は費用を抑えるためルールベースで動作しています(本番ではClaudeに切り替え可能)。予約データは定期的に初期化されますので、実際のお名前や連絡先は入力しないでください。

インボイス制度(適格請求書等保存方式)の記載要件に沿って設計し、税率ごとに1回だけ端数処理を行うロジックを実装。マクロがセキュリティ設定でブロックされる事故を避けるため、関数のみで構築した業務システムです。

「増えた・減った」を示すだけでなく、その変化が例年のばらつきの範囲内かどうかまで判定する分析ダッシュボード。季節の影響を打ち消すため前年同月と比較し、確かめる価値のある変化だけを色で示します。
架空の美容室と、分析手法をお見せするために用意した架空の売上データを用いた制作サンプルです。
手順と記録が厳密に決められた、医療の検査の仕事をしています。あわせて社会人博士課程に在籍し、データを扱う研究を続けています。
検査の世界には「精度管理」という考え方があります。出した結果が正しいと言えるかどうかを、結果を出すたびに確かめておく仕組みのことです。あとから誤りが見つかる前に、先に潰しておく。この順番が身についています。
Web制作でも同じやり方をしています。業種ごとに、サイトへの表示が定められている情報があります。不動産なら業者票、医療なら広告ガイドライン、電気工事なら登録番号、運転代行なら公安委員会の認定番号。デザインを描く前にそこを調べて、どこに置くかまで決めてから手を動かします。掲載しているサンプルは、すべてその確認を通したものです。
「なぜこの配置なのか」「なぜこの作り方を選んだのか」。お尋ねいただいたときに理由をお答えできる状態にしておくことを、自分に課しています。
ご相談の時点で、内容が固まっていなくて構いません。目的と、見ていただきたい相手。この2つさえ伺えれば、ページの構成はこちらで組み立ててお持ちします。決まっていない項目は、いつ決まるかだけ確認して先に進みます。
受注実績はまだありません。そのぶん、お渡しできるものは着手前にできるだけお見せするようにしています。
情報が整理されていなくても問題ありません。目的を紐解き、必要な情報を洗い出すところから並走します。手戻りを防ぐため、各工程でしっかりとご確認いただきながら、一つずつ確実に進めていきます。
目的やターゲット、ご用意可能な素材などを伺います。未定の項目は「いつ頃までに決めるか」というスケジュールだけを共有し、プロジェクトを滞らせずに前進させます。
ページの構成と、色をつける前のレイアウト図(ワイヤーフレーム)を作成します。ここで情報の優先順位や全体像をすり合わせることで、後工程での大きな修正を防ぎます。
設計図をもとに、まずはサイトの顔となるトップページのデザインを作成し、着手から5営業日以内を目安にご提示します。ビジュアルの方向性を完全に固めてから次へ進みます。
デザインをWeb上で動く形に組み上げます。スマートフォンでの表示崩れがないか、リンクやフォームが正常に動くかなど、すべての確認項目をクリアしてから公開へと移ります。
実際の操作画面を共有しながら、サイトの更新方法をご説明します。公開後もお客様ご自身で迷わず管理できるよう、図解入りの専用手順書(PDF)をお渡しします。
制作のご依頼や費用のご相談など、事前によくいただくご質問をまとめています。 こちらに記載のない事項や、個別の要件に関するご不明点につきましても、お気軽にお問い合わせください。
ページ数、更新機能の要否、原稿と写真のご用意状況で大きく変わるため、内容を伺ってからお見積もりをお出ししています。お見積もりとご相談は無料です。
ご予算が先に決まっている場合は、その金額を先にお知らせください。削るところと残すところを整理して、その範囲でできる構成をご提案します。予算に届かない場合は、正直にそうお伝えします。
正直にお答えすると、いただいたご依頼としての制作実績はまだありません。掲載しているものは、自分で題材を決めて作ったサンプルです。そこを実績のように見せることはしません。
そのぶん、判断の材料を先にお出しするようにしています。サンプルはすべて実際に開いて操作できる状態で公開していますので、仕上がりの水準はその場でご確認いただけます。ご相談の段階でページ構成の案をお見せしますので、そこで進めないとお決めいただいても構いません。
ページ数と、原稿・写真のご用意状況によります。1ページのLPで2〜3週間、5ページ程度のサイトで4〜6週間が目安です。
公開したい日が決まっている場合は、最初に教えてください。間に合うかどうかを先に判断して、難しければその時点でお伝えします。
その状態からで構いません。文章は、お伺いした内容をもとにこちらで下書きをお出しします。そのまま使っていただいても、直していただいても大丈夫です。
写真がまだの場合は、フリー素材で仮に組んでおき、あとからご自身で差し替えられる形にしておきます。撮影の順番や必要な枚数もこちらから整理してお伝えします。
構成とデザインを決める段階では、回数を区切っていません。納得いただけるまでお直しします。ここで詰めておくほうが、結果的に早く終わるためです。
実装に入ったあとで、方向性から作り直しになる場合のみ、あらためてご相談させてください。
更新したい箇所がはっきりしている場合は、そこだけを管理画面から触れる形にしてお渡しします。触る必要のない部分は、あえて編集できないようにしておきます。誤って壊してしまう事故を防ぐためです。
お渡しのときに画面を見ながらご説明し、手順書(PDF)もお渡しします。
すべてオンラインで完結します。打ち合わせは Google Meet や Zoom、チャットのみでも構いません。お電話での打ち合わせをご希望の場合も対応します。
どれを契約すればよいかのご提案から行います。契約はお客様のお名前で行っていただくのが原則です。あとから制作者を変えたくなったときに、ご自身で引き継げるようにしておくためです。手続きの画面は一緒に見ながら進めます。
「何を作ればいいか分からない」段階でも構いません。 ご予算とご希望の公開時期だけ教えていただければ、できることをご提案します。
お見積もり・ご相談は無料です。 原則24時間以内にご返信いたします。
フォームが使いにくい場合は、メールでも承ります。
matslanc@gmail.com