fuji-soho サイト構築の裏側
fuji-soho サイト構築の裏側
こんにちは、フリーランスエンジニアの Fuji（フジ） です。
今回の記事では、この「fuji-soho」サイトをどのように作ったのか、その裏側を紹介します。
初めてブログを訪れてくださった方に、自己紹介も兼ねてお伝えできればと思います。
🎯 サイトを作った目的
- ポートフォリオサイトとして、これまでの制作実績を整理すること
- 技術ブログとして、自分の知見を記事化して公開すること
- 営業ツールとして、安心して仕事を依頼いただける導線を作ること
フリーランスにとって「信頼できるかどうか」が大切です。
そのため、デザインやUIだけでなく、安心感を持って問い合わせできるサイトを目指しました。
🛠 技術的なこだわり
このサイトは WordPressの自作テーマ をベースにしています。
余計な機能を省き、以下の点にこだわりました。
- SEO対策
- JSON-LDによるパンくずリスト構造化【検索エンジンに正しく認識される】
- OGP対応【SNSシェア時に綺麗に表示】
- meta descriptionの自動生成（制作実績はリード文から抽出）
- アクセシビリティ
aria-labelを適切に付与- エラーメッセージをコンパクト化し、フォーム入力時のストレスを軽減
- デザイン/UI
- 青基調で統一し、シンプルで誠実な印象に
- スマホ版はドロワーメニューでタップしやすく改善
- フッターにプライバシーポリシーや reCAPTCHA 表示を整理
✨ サイトの特徴
- 制作実績ページ
- 各案件をカード型で一覧化
- 詳細ページでは「課題 → 解決アプローチ → 成果」を整理して記載
- ブログ記事ページ
- アイキャッチ画像を16:9で統一
- SNSシェアボタンは AdBlock 環境でも消えないよう独自実装
- お問い合わせフォーム
- プライバシーポリシー同意チェックを必須化
- スパム対策として reCAPTCHA + ハニーポットを導入
👤 自己紹介
私はフリーランスのフルスタックエンジニアとして、
- Webシステム開発（Laravel / Next.js / React）
- モバイルアプリ開発（iOS / Android）
- サーバ構築・チューニング（Apache, PHP-FPM, Redis）
といった幅広い領域で活動しています。
「信頼できるエンジニアリングと丁寧なプロダクト開発」をモットーに、
クライアントと長く付き合える開発を大切にしています。
🚀 これから書いていくこと
このブログでは、
- サイト構築や運営の裏側
- 技術的なTips（WordPress / Laravel / React など）
- フリーランスとしての働き方や工夫
といったテーマを発信していきます。
ぜひお気に入り登録やSNSでフォローしていただけると嬉しいです！
最後まで読んでいただき、ありがとうございました。
次回の記事もぜひお楽しみに。