本文へ移動

HAKU Labo
見本・サンプル
Webサイト制作

Portfolio — Web

Webサイト制作のポートフォリオ

LP・小規模サイトから、問い合わせを受ける管理画面まで。企画・構成・デザイン・実装・公開を一貫して担当しています。すべて実際に開いて、スマホでも操作を確かめられます。

Samples & Demos

見本・デモ

架空の店舗・架空のデータで作った自主制作です。実在店舗の実績ではありません。

おそうじ屋ハレノヒ（架空）のトップ画面

LP（1ページ）・ハウスクリーニング

おそうじ屋ハレノヒ架空店舗

地域のハウスクリーニング店を想定した、見積もり依頼につなげるための1ページLP。メニュー・料金、選ばれる理由、ご依頼の流れ、よくある質問、見積もりフォームの構成です。

担当範囲: 構成・文章・デザイン・実装・公開
工夫した点: スマホでは画面下に常に見積もりボタン。フォームは項目ごとのエラー表示、迷惑送信対策、連続送信の制限付き。区画を設定で差し替えられるテンプレートとして作り、業種ごとに流用できます。
連携: 送信内容は下の管理画面デモの「メール」に届きます（公開デモのため連絡先は伏せ字）。

レスポンシブ
問い合わせフォーム
構造化データ・OGP
Cloudflare Workers

サイトを開く

業務管理画面のデモ画面

Webアプリ・業務管理画面

お店の業務管理画面（デモ）架空データ

問い合わせ・案件・顧客・売上をひとつの画面で管理するWebアプリのデモ版です。ログインなしで、誰でも操作を試せます。

担当範囲: 設計・データベース設計・実装・公開
主な機能: 問い合わせの受信一覧と対応状況、案件の進行管理、顧客台帳、商品・料金とキャンペーン枠、売上・経費・粗利の集計、レビュー、通知。
本番運用: 同じ仕組みを、HAKU Labo の全サイトと連動する総合管理画面として実際に使っています（本番版は認証付きで非公開）。連動のしくみ

TypeScript
Cloudflare Workers
D1（SQLデータベース）
署名付きWebhook連携

デモを開く

Live Sites

運用中のサイト（自社）

HAKU Labo が自社で制作し、実際に運用しているサイトです。

おみせのページ工房のトップ画面

サービスサイト・7ページ

おみせのページ工房

お店・教室・会社向けホームページ制作サービスの専用サイト。制作見本・料金・制作の流れ・よくある質問・問い合わせを分けて案内しています。

担当範囲: 構成・文章・デザイン・実装・公開
仕組み: 問い合わせはデータベースに保存してから管理画面へ転送し、届かなかった分は自動で再送します。

静的サイト生成
Cloudflare Workers・D1
セキュリティヘッダー

サイトを開く

うたの制作室のトップ画面

サービスサイト・申込受付

うたの制作室

歌ってみたMIXなど音楽制作サービスのサイト。料金表、MIX前後の聴き比べ、依頼フォーム、お客様ごとの進行確認ページをそろえています。

担当範囲: 構成・文章・デザイン・実装・運用
工夫した点: 音源の聴き比べで仕上がりを確かめてから依頼できる流れ。プランごとの内容・修正回数・納品形式を比べやすく整理。
連携: 申し込みを業務管理画面へ送り、見積・決済リンク・進行状況をお客様ページへ返す連携を実装しています。

申込フォーム
音源の聴き比べ
管理画面との連携

サイトを開く

おみせの投稿係のトップ画面

サービスサイト・飲食店向け

おみせの投稿係

飲食店のSNS投稿画像・縦動画を制作するサービスのサイト。サンプル、お試しの内容、写真の送り方、相談フォームをまとめています。

担当範囲: 構成・文章・デザイン・実装・運用
工夫した点: 飲食店の方が迷わないよう、サンプルを先に見せてから、お試し・写真の送り方・相談の順に案内。

サンプル一覧
相談フォーム
スマホ中心の設計

サイトを開く

HAKU Labo ホームページのトップ画面

コーポレートサイト

HAKU Labo ホームページ

3つの事業の入口となるサイト（このサイト）。事業紹介、見本、よくある質問、問い合わせフォームの構成です。

担当範囲: 構成・文章・デザイン・実装・公開
仕組み: 問い合わせは業務管理画面に自動で届き、対応状況まで一元管理しています。

静的サイト生成
Cloudflare Workers・D1
OGP・構造化データ

※ 飲食店を想定した複数ページのサイト見本（架空店舗）を制作中です。公開したらここに追加します。

Connected System

すべてのサイトを、総合管理画面と連動。

HAKU Labo のサイトは、ひとつの総合管理画面とつながっています。問い合わせ・申し込み・入金・料金をサイトごとに見に行く必要はなく、収益と各サイトの情報を一か所で把握できます。

問い合わせ・メール各サイトのフォームから届いた問い合わせが、送り元のサイト名つきで一覧に並びます。対応済みの管理、顧客へのひも付け、新着の通知まで。
案件・顧客申し込みを案件として登録し、見積・制作中・納品などの進行と納期を管理。顧客ごとに過去の依頼とやり取りをまとめて見られます。
収益（売上・経費・粗利）決済サービス（Stripe）の入金・返金を自動で記録して案件と照合。売上・手数料・経費・紹介報酬から粗利益を、日・月・年、事業ごとに集計します。
商品・料金・キャンペーン料金の変更履歴を残し、「先着5名」などのキャンペーン枠の残り数を管理。変更はサイトの料金表示へ反映します。
お客様ページとの連動見積・決済リンク・進行状況・お客様へのメッセージを、管理画面からお客様専用ページへ送ります。
レビュー・紹介・データ購入者レビューの掲載管理、紹介パートナーへの報酬計算、CSVでの出力・取り込み、操作の記録（監査ログ）。

サイト	総合管理画面と連動している情報
HAKU Labo ホームページ	問い合わせ（メール画面・通知）
おみせのページ工房	問い合わせ（メール画面・通知）
うたの制作室	申し込み（案件・顧客）、見積・決済リンク・進行状況（お客様ページ）、料金・キャンペーン枠、入金（売上）
おみせの投稿係	案件・売上を事業別に管理（サイトのフォームとの自動連動は準備中）
見本：おそうじ屋ハレノヒ	見積もりフォーム → 管理画面デモのメール画面（公開デモのため連絡先は伏せ字）

※ 本番の総合管理画面は認証付きで非公開です。同じ画面をデモ（架空データ）で操作できます。

For Partners

制作会社・代理店の方へ

LP・小規模サイトの制作や、フォーム・管理画面まわりの実装のご協力もご相談ください。内容・範囲・スケジュールを伺い、個別にお見積りします。

LP・数ページ規模のサイトの構成・デザイン・実装
問い合わせフォームと受付・管理の仕組みづくり
案件・顧客・売上などの業務管理画面の開発
Cloudflare を使った公開・運用まわり

制作のご相談メールで連絡する