「13ページのコーポレートサイト」を、
デモから本物にする
— Aileron 制作記録

← Blog に戻る

クラウドワークスの応募フォームには、ほぼ毎回「ポートフォリオを提示してください」という項目がある。これまでは LP・予約システム・AIツールの作品はあったが、コーポレートサイト型の作品はまだ手元になかった。

そして今週、出会ったのは 「デザイナーが描いた完成イメージ（Photoshopファイル）を元に、WordPressで動かせるサイトを14ページぶん作ってください」 という案件。応募するなら、似た規模感の作品を一つ見せられるほうが説得力が出る。なので、応募と並行して作った。

何を作ったか

架空のAI業務自動化スタートアップ 「Aileron Inc.（エイルロン）」 のコーポレートサイト。 タグラインは「事業の方向転換を、確実に。」。 DXコンサルティング・AI業務自動化・システム開発の3軸を提供する、中堅企業向けの会社という設定。

依頼案件と同規模の 全13ページ を、ゼロから手書きのコードで実装。 後でこれを WordPress に組み込むことになっても困らないよう、 運用するクライアントが管理画面から「事例」や「お知らせ」を追加・編集できる仕組みを前提とした情報設計まで含めて整えてある。

ページ構成（13ページ）

「事例」と「お知らせ」は、納品後にクライアント側で記事を追加・編集できる仕組みを想定して設計した。Webに詳しくない担当者でも、「新しい事例を1件追加したい」「お知らせを今日中に掲載したい」が、管理画面から数クリックで完結する。
納品物としては、こうした運用ルールのドキュメントも一緒に出すつもりで作っている。

デザインシステム

コーポレートサイトに必要なのは、「派手さ」ではなく「信頼感」と「読みやすさ」。 そこで色は3色だけに絞った。

• ネイビー（#1A2A4A）：信頼感・コーポレート基調
• アクセントブルー（#4A6FB5）：リンク・CTAボタン・ハイライト
• 白（#FFFFFF）＋グレースケール：余白とテキスト

フォントは Inter（英語・数字）と Noto Sans JP（日本語）の組み合わせ。Google Fonts のみで完結。これで実装環境を選ばない。

こだわったポイント

1. 「色を変えたいとき、1箇所書き換えれば全ページ変わる」仕組み

サイトの色やフォントは、1箇所で一括管理。たとえばブランドカラーを変更したくなった時、全14ページのコードを書き換える必要はなく、設定ファイルの数値を一度書き換えるだけで全ページに反映される。
納品後、クライアント側でちょっとした色味調整がしたくなった時にも、たった1行の修正で済む。

2. 検索エンジンにも、運用者にも、伝わる構造

HTMLのタグ付け（見出し・本文・ナビゲーションの区別）を厳密に整え、検索エンジンが「ここはお知らせ」「ここは会社概要」と正しく理解できる作りに。
結果として SEOに強く、後から別のエンジニアがコードを触っても迷子にならない。引き継ぎコストが下がる構造になっている。

3. スクロールに合わせて要素がふわっと現れる動き

ページを下にスクロールすると、見出しや画像が一拍遅れて滑らかに登場する演出を入れた。
外部ライブラリに頼らず、最新のブラウザ標準機能（IntersectionObserver）で実装したので、ページの読み込みが軽く、スマホでも引っかかりがない。

4. FAQ・スマホメニューも全部、手書きで

「質問をクリックすると答えが開く」FAQ、「ハンバーガーアイコンを押すとメニューが出る」スマホ表示。よくある挙動だが、外部ライブラリに頼らず素のJavaScriptで実装した。
結果、ページの容量が軽く、保守時に「あのライブラリのバージョンを上げないといけない」みたいな引き継ぎコストがない。

AIで画像を作って、ブランドを揃える

もう一つの裏テーマは 「写真撮影もストック画像購入もせずに、ブランドの世界観を揃える」 こと。OpenAI のAI画像生成サービスを使って実現した。

生成したのはサムネ1枚＋事例カード6枚の計7枚。 「Aileron のブランドカラーで、こういう雰囲気の画像を作って」と一度ルールを決めてから、業種別（EC・製造・SaaS・小売・コンサル・教育）に少しずつ指示を変えて生成。 結果、6つの事例カードが 業種は違うのに、ぱっと見「同じ会社の画像群」と分かる統一感 を持って仕上がった。

— 6 categories, 1 brand voice. Generated in $0.12.

これまで「ストック画像を買う」「素材サイトから探す」が常識だったところを、必要なときに必要なだけ作るに切り替えると、ブランドの一貫性も、コストも、時間も、全部改善される。

使った道具

ポートフォリオへの統合

最後に、これを kokona-makes.dev の Works No.12 として追加した。 作品詳細ページには概要・ページ構成・こだわり・技術構成を載せて、「サイトを見る →」ボタンから本物の Aileron デモへ飛べるようにした。 クライアントの動線としては、ポートフォリオトップ → 作品詳細 → 実物の3ステップで、「文章で理解 → 実物で確認」が自然に流れるようになっている。

応募案件に向き合うために

応募中の案件は168件提案中のWordPress 14ページコーディング。提案文では、依頼の納期 6/18 に対して 5/31 納品をコミット。Claude Code を併用した独自ワークフローで標準工数の半分〜2/3で仕上げる前提だ。

この Aileron Inc. は、その提案を裏付けるための実物。「13ページのコーポレートサイトをこのクオリティで実装します」を口頭で言うより、本物のデモを見てもらう方が早い。