制作事例

実務での業務改善事例と、Web制作の自主制作作品を掲載しています。

掲載内容について
01 は勤務先の業務で実際に作成し、運用しているものです(個人情報を架空データに置き換えたサンプルを公開しています)。
02〜04 は技術習得のための自主制作で、架空の店舗を想定して制作したものです。実在の企業・店舗とは関係ありません。いずれも実際に開いて操作できます。
受注案件の掲載は、クライアントの許可を得られたものから順次追加します。

📊

01

学生寮のシフト表を自動化実務事例

勤務先である高校の学生寮で、毎月手作業で作っていたシフト表を関数で自動化しました。年月を入力するだけで日付と曜日が切り替わり、曜日ごとの基本担当が自動反映されます。特定の日だけ担当者を差し替えても、空欄部分は基本担当が維持される仕組みです。入力欄・数式セルを色分けし、担当者以外でも更新できるようにしました。 匿名化したサンプルを見る →

Excel / スプレッドシート 業務効率化 関数設計 シフト管理
整体屋 まんきちのトップページ。施術内容と予約ボタンが上部に並んでいる。

02

整体院サイト「整体屋 まんきち」自主制作

架空の整体院を想定した練習制作です。初めての方が来院しやすいことを目標に、施術内容・料金・院の雰囲気を上から順に確認でき、最短で予約ボタンにたどり着く構成にしました。気になる部位を図で指定できる問診票ページも用意しています。スマートフォン表示にも対応しています。 サイトを見る →

架空店舗 健康・整体 導線設計 HTML/CSS
喫茶ひとときのトップページ。営業時間とテイクアウトの受付時間が最初の画面に並んでいる。

03

地域カフェ向けホームページ「喫茶ひととき」自主制作

架空のカフェを想定した練習制作です。「テイクアウトの注文を増やすには何を最初に見せるべきか」というテーマで設計し、営業時間・テイクアウトの受付時間・場所・電話番号を最初の画面に集約しました。スマートフォンでは画面下に「メニュー」と「テイクアウト予約」を固定表示し、どのページからでも1タップで進めるようにしています。予約フォームは、入力欄を離れたときと送信操作のときに、足りない項目と定休日・過去日の選択を知らせます。 サイトを見る → サイト生成ツールのAstroで、ヘッダーやフッターを1か所にまとめて4ページを書き出しています。ページが増えても直す場所が1か所で済む構成です。ソースは公開リポジトリに置いています。

架空店舗 飲食・カフェ スマホ最適化 Astro HTML/CSS
くらしの雑貨 てらすのトップページ。商品・イベント・営業時間への入口が3つ並んでいる。

04

地元雑貨店向けホームページ「くらしの雑貨 てらす」自主制作

架空の雑貨店を想定した練習制作です。「SNSはあるがホームページがない店舗」という設定で、SNSから来た方が最初の画面から「商品と在庫」「直近のイベント」「営業時間と場所」の3つへ直行できるようにしました。お知らせと商品はデータファイルに分けて管理する構成にしました。 サイトを見る → お知らせと商品を、ページ本体から切り離したデータファイルで管理しています。このサンプルの時点では、更新にはファイルの編集と再アップロードが必要です。実際のご依頼では、この読み込み先をmicroCMSなどの管理画面へ接続することで、お店の方がブラウザから更新できる形にできます(接続の実装は別途必要です)。

架空店舗 小売・雑貨 SNSからの流入導線 データ分離 HTML/CSS/JS