静的サイトの制作
店舗サイト、コーポレートサイト、ランディングページ。デザインから実装まで一人で担当します。 スマートフォンでの表示は、実機幅で確認しながら作っています。
- HTML / CSS（BEM設計）
- JavaScript（フレームワーク不使用）
- レスポンシブ対応
- 図解・地図のSVG制作
WORKS
制作実績
すべて架空の店舗・企業を想定した自主制作です。作れるものの種類が分かるよう、5つの分野に分けて並べています。 Webサイト11件は実物を公開しており、その場で触っていただけます。各ページには「何が難しかったか」「どう解いたか」まで書いています。
01
Webアプリケーション
ログイン・予約・検索など、データベースと状態を扱う画面。表示だけでなく、同時アクセスや二重登録の扱いまで設計しています。
2 works-
Webアプリ
実際に予約してみる 制作の詳細 →
02
WordPressテーマ開発
既製テーマを使わず、テンプレートから書き起こしています。更新する人が迷わない管理画面にすることを重視しました。
2 works-
WordPress
実サイトを見る 制作の詳細 →
03
コーポレート・店舗サイト
会社や店の信頼を伝える複数ページ構成。情報の置き場所と、問い合わせまでの導線を整理しています。
2 works
04
ランディングページ
1ページで申し込みまで完結させる構成。読ませるだけで終わらせないよう、診断やシミュレーターを組み込んでいます。
5 works-
LP
実サイトを見る 制作の詳細 →
05
SNSクリエイティブ
Instagramの投稿と広告バナー。業種ごとに配色と書体を変え、いずれも量産できるテンプレートとして設計しています。
3 works-
Instagram
制作の詳細 → -
Instagram
制作の詳細 →
SKILLS
できること
WordPressテーマ開発
既製テーマの調整ではなく、テーマをゼロから書き起こします。 クラシックテーマとブロックテーマ（FSE）の両方に対応できます。
- カスタム投稿タイプ・タクソノミー設計
- ブロックテーマ / theme.json
- 管理画面の入力欄まわりの作り込み
React / Next.js
WordPressを管理画面として残したまま、表示側だけをNext.jsで作り直す構成に対応します。 編集のしやすさを保ったまま、表示速度を上げられます。
- Next.js（App Router）/ TypeScript
- ヘッドレスCMS（WordPress REST API）
- 静的生成・再検証（ISR）
検索・データベース設計
物件検索、求人検索、店舗検索。複数条件の掛け合わせと、選ぶ前に件数が分かる絞り込みUIを実装します。 静的サイトでは作れない部分です。
- 複数条件の絞り込み（AND / OR）
- Ajaxでの結果更新とURL同期
- 並び替え・ページ送り
予約・ログインの実装
空き状況の計算から予約の確定、スタッフ用の管理画面までを作ります。 二重予約のように「同時に操作されたときだけ起きる」不具合は、その状況を再現するテストを書いて確認しています。
- 予約枠の設計（重複の防止）
- ログイン・パスワードの管理
- 自動テスト（Vitest）
フォームの実装
プラグインに頼らず、入力チェックとスパム対策まで作ります。 エラーで戻ったときに入力が消えないなど、細かい使い勝手も詰めます。
- サーバー側での入力チェック
- スパム対策（プラグイン不使用）
- 送信内容の管理画面での確認
公開・運用まわり
サーバーへの配置、独自ドメインの設定、公開後につまずきやすい箇所の対処まで対応します。
- レンタルサーバー / クラウドへの公開
- ステージング環境の用意
- 公開後の修正・追加
引き継ぎ・ドキュメント
コードにはなぜそう書いたかを日本語で残し、更新手順書もお渡しします。 別の人が引き継げる状態にしてお渡しすることを前提にしています。
- 更新マニュアルの作成
- コード内のコメント
- 操作説明（オンライン）
FLOW
制作の進め方
-
01
ご相談・ヒアリング
何のためのサイトか、誰に見てほしいかをうかがいます。 「まだ固まっていない」段階でも構いません。要件を一緒に整理するところから始められます。
-
02
構成とお見積り
ページ構成と必要な機能を書き出し、金額と期間をお出しします。 この段階で「今回は不要」と判断できるものは削ります。
-
03
デザインと実装
トップページから形にしてお見せします。実際に触れる状態でご確認いただき、 修正しながら進めます。
-
04
確認・公開
公開前の環境でご確認いただき、問題なければ公開します。 スマートフォンでの表示や表記の揺れも、この段階で確認します。
-
05
お引き渡し・その後
更新手順書をお渡しし、操作の説明をします。 公開後の修正や追加も承ります。
ABOUT
プロフィール
Web制作をしている Youhei と申します。 普段は別の仕事をしており、Web制作は副業として承っています。
もともとは見た目を作るところから入りましたが、 「更新できない」「問い合わせが来ても気づけない」といった、公開したあとで困る部分に関心が移りました。 いまは、デザインと同じくらい仕組みの部分を大事にしています。
掲載している14件はすべて自主制作です。実在の会社ではありませんが、 「この業種ならこの機能が要るはず」と考えながら、実際に動くところまで作っています。 不具合を見つけて直した過程も、各ページに正直に書いています。
CONTACT
お問い合わせ
制作のご相談やご質問は、GitHubからご連絡ください。
「何から決めればいいか分からない」という段階でも構いません。
GitHubプロフィールを見る
※ このサイトは求職・受注のためのポートフォリオです。掲載しているサイトはすべて架空の店舗・企業を想定した自主制作で、実在の団体とは関係ありません。