【2026年最新】コード不要！無料で使える「Claude Sonnet 4.6」でプロ級Webフォームを5分で作成する完全攻略ガイド
「AIって、結局エンジニアじゃないと使いこなせないんでしょ？」
もしあなたがそう思っているなら、この記事を読めばその考えは180度変わります。毎日、何時間もかけている面倒な事務作業やWeb制作。実は、最新の無料AIモデル Claude Sonnet 4.6 を使えば、コードを一行も書かずに、たった数分で自動化できてしまうのです。
この記事では、2026年2月にリリースされたばかりの革命的なAI「Claude Sonnet 4.6」を使い、プロのWebデザイナーが作ったような多機能な「採用応募フォーム」をゼロから作成する方法を、豊富なスクリーンショットを使って、AI初心者の方でも絶対に迷わないようにステップ・バイ・ステップで徹底解説します。
目次
この記事であなたが得られること
- ✅ 最新AIの驚異的な実力がわかる： なぜSonnet 4.6が「革命」と呼ばれるのか、その目で確かめられます。
- ✅ “AIに仕事をさせる”感覚が身につく： 曖昧な指示から、AIがどのようにして具体的な成果物を生み出すのか、そのプロセスを体験できます。
- ✅ 明日から使える実践的スキルが手に入る： 記事を読み終える頃には、あなたも「AIで業務を自動化できる人」になっています。
所要時間：約15分
目次
- はじめに：Claude Sonnet 4.6とは？
- 事前準備：必要なものは2つだけ
- ステップ1：Sonnet 4.6に「採用フォーム」の作成を依頼する
- ステップ2：AIに「初心者向けセットアップガイド」を作成させる
- ステップ3：GoogleスプレッドシートとGASを準備する
- ステップ4：コードを貼り付けて設定を行う
- ステップ5：Webアプリとして公開（デプロイ）する
- 応用例：あなたの仕事も自動化できる
- まとめ：AI活用の第一歩を踏み出そう
- 【特別プレゼント】今すぐ使える！採用フォームの全コード
はじめに：Claude Sonnet 4.6とは？
Claude Sonnet 4.6は、Anthropic社が開発した最新のAIモデルです。これまで最強とされていた有料モデル「Opus 4.6」に匹敵するほどの高い性能を持ちながら、なんと無料で利用できるという点で、リリース直後から世界中で大きな話題を呼んでいます。
特に、プログラムのコードを書く能力（コーディング能力）が飛躍的に向上しており、これまで専門的な知識が必要だったWebアプリケーション開発のようなタスクも、日本語で「こんなものを作りたい」とお願いするだけで、驚くほど高いクオリティの成果物を出してくれます。
この記事では、その実力を体感するために、実際にSonnet 4.6を使って本格的な「採用応募フォーム」を開発していきます。
▲ Claudeには3つのモデルがありますが、Sonnet 4.6は無料で使え、非常に高い性能を誇ります。
こんな人におすすめです
- 面倒な事務作業を自動化して、もっと創造的な仕事に時間を使いたい方
- プログラミング経験はないけれど、Webサイトやツール作成に興味がある方
- 最新のAIがどれほど凄いのか、自分の目で確かめてみたい方
- 会社のDX（デジタル変革）担当者で、具体的な業務改善のヒントを探している方
事前準備：必要なものは2つだけ
今回のマニュアルを進めるにあたり、必要なものは以下の2つのアカウントのみです。どちらも無料で作成できます。
- Claudeのアカウント： 公式サイトから登録できます。（無料プランで全く問題ありません）
- Googleアカウント： Googleスプレッドシートと、その拡張機能であるGoogle Apps Script（GAS）を利用するために必要です。
準備はこれだけでOKです。早速、AIの驚くべき世界に飛び込んでいきましょう。
ステップ1：Sonnet 4.6に「採用フォーム」の作成を依頼する
ここからが本番です。実際にClaude Sonnet 4.6に、たった一つの「指示文」を送るだけで、どれだけ凄いものが出来上がるのかを見ていきましょう。
1-1. 魔法の呪文（プロンプト）を唱える
AIに何かをしてもらうための指示文を「プロンプト」と呼びます。今回は、以下のようなプロンプトをClaudeに送りました。
弊社の採用募集のための応募フォームを作成したいです。
※社名は間違えやすいですが、NEXT INNOVAITION株式会社です
現状、弊社のお問い合わせフォーム関係はGAS（Google Apps Script）で構築しているため、今回もGASで作成したいです。
募集職種としては、現在のところ
・動画編集者
・AI駆動開発エンジニア
・AIコンサルタント
を想定していますが、他にも追加するか検討中です。
採用フォームとして最適な項目を洗い出した上でおしゃれなフォームを作成し、お問い合わせ内容はスプレッドシートに反映されるようにしてください。ポイントは、具体的な入力項目（氏名、住所など）をほとんど指定せず、「最適な項目を洗い出した上で」「おしゃれなフォームを」といった、かなり曖昧なお願いをしている点です。
▲ この短い文章を送るだけで、すべてが始まります。
1-2. わずか数分でプロ級フォームが完成！
そして、待つことわずか数分。Sonnet 4.6が生成したのが、こちらの応募フォームです。
▲ どうですか、これ。一発でこのクオリティです。信じられますか？
驚くべきは、そのデザイン性だけではありません。私たちが指示していないにもかかわらず、Sonnet 4.6は「採用応募フォームなら、こんな項目が必要だろう」と自ら考え、以下のような多機能な4ステップのフォームを提案してくれました。
| ステップ | 内容 | スクリーンショット |
|---|---|---|
| STEP 1 | 職種選択 |  |
| STEP 2 | 基本情報入力 |  |
| STEP 3 | スキル・志望動機 |  |
| STEP 4 | 確認・送信 |  |
「志望動機」や「ポートフォリオ」、「希望給与」といった項目は、こちらのプロンプトには一切含まれていません。AIが文脈を読み取り、必要な項目を完璧に推測してくれたのです。これが、最新AIの驚異的な能力です。
1-3. 【比較】旧モデルとの圧倒的なクオリティ差
このSonnet 4.6の凄さは、以前のモデルで作ったフォームと比較すると一目瞭然です。以下は、数ヶ月前に旧モデル（Opus 4.5）にほぼ同じような指示で作ってもらったフォームです。
▲ 左が旧モデルへの指示、右が生成されたフォーム。シンプルで悪くはないですが…
| 比較項目 | 旧モデル（Opus 4.5） | 新モデル（Sonnet 4.6） |
|---|---|---|
| デザイン | シンプルな単一ページのフォーム | 洗練されたデザインの複数ステップフォーム |
| 入力項目 | 指示された最低限の項目のみ | 職種に合わせた最適な項目を自動で提案 |
| 使いやすさ | 全項目が一度に表示され、長く感じる | ステップごとに分かれており、入力しやすい |
| 全体的な印象 | 手作り感のあるフォーム | プロが作ったような本格的なWebアプリ |
この進化が、しかも無料で使えるのです。もはや、Claude Sonnet 4.6を使わない理由はないと言えるでしょう。
ステップ2：AIに「初心者向けセットアップガイド」を作成させる
さて、素晴らしい応募フォームの「見た目」と「コード」は手に入りました。しかし、AI初心者の方にとって、ここからが最初の壁です。
「このコード、どうやって使えばいいの？」
ご安心ください。それもAIに解決してもらいましょう。今度は、このコードを実際にWebで動かすための「初心者向けのセットアップガイド」を、同じくSonnet 4.6に作ってもらいます。
2-1. 今度は「ガイド作成」をお願いする
AIが生成したコードの導入手順は、専門家にとっては簡単でも、初心者には分かりにくいことが多いです。そこで、以下のような追加のプロンプトを送ります。
導入の仕方がわかりづらいので、AI初心者でもわかりやすいような、セットアップガイドを作ってください。スプシも新規で作るところから入れてください
▲ 「わからない」と正直に伝えることが、AIを使いこなすコツです。
2-2. AIが「至れり尽くせり」の導入マニュアルを生成
この指示に対し、Sonnet 4.6は「お任せください！」と言わんばかりに、視覚的で非常にわかりやすいHTML形式のセットアップガイドを生成してくれました。
▲ PCが苦手な人でも大丈夫、とAIが寄り添ってくれます。所要時間まで書いてくれる親切さです。
このガイドの素晴らしい点は、単なるテキストの羅列ではないことです。
- 5つの明確なステップに分けられている
- 完成後のスプレッドシートのイメージが図で示されている
- どこをクリックすればいいか、画面のどの部分かが視覚的にわかるようになっている
- コードをどこに貼り付けるかが、コピー＆ペーストしやすいように整理されている
- よくあるトラブルと対処法（Q&A）まで用意されている
▲ まるで人間が作ったかのような、丁寧でわかりやすいガイドです。
ここまでの作業、すべてAIとの対話のみで、所要時間は10分もかかっていません。 これが最新AIの実力です。では、このAI先生が作ってくれた完璧な教科書をもとに、実際にフォームをインターネット上に公開していきましょう。
ステップ3：GoogleスプレッドシートとGASを準備する
ここからは、AIが作ってくれたガイドに従って、実際に手を動かしていきます。まずは、応募者のデータが自動的に記録される「器」となるGoogleスプレッドシートと、プログラムを動かすための「エンジン」であるGoogle Apps Script（GAS）を準備しましょう。
3-1. 応募データを保存する「器（うつわ）」を用意する
最初に、フォームから送信された応募者の情報を保存しておくための、Googleスプレッドシートを新規に作成します。
- ブラウザで sheets.google.com にアクセスし、「空白のスプレッドシート」を作成します。
- 左上の「無題のスプレッドシート」をクリックし、ファイル名を「採用応募一覧」など、分かりやすい名前に変更しておきましょう。
▲ AIのガイドより。スプレッドシートの新規作成から、ファイル名の変更、IDのコピーまで丁寧に解説されています。
3-2. 魔法のコードを書き込む「ノート」を開く
次に、先ほど作成したスプレッドシートから、AIが書いたコードを貼り付けるための特別なエディタ（Google Apps Scriptエディタ）を開きます。
- スプレッドシートのメニューバーから「拡張機能」をクリックします。
- 表示されたメニューから「Apps Script」を選択します。
▲ AIのガイドより。「拡張機能」→「Apps Script」を選択する手順が、メニューのビジュアルモックつきで解説されています。
これをクリックすると、新しいタブで「無題のプロジェクト」という名前のApps Scriptエディタが開きます。ここが、私たちのWebアプリケーションの心臓部となります。
▲ この画面が開けば、ステップ3は完了です。プロジェクト名も「採用応募フォーム」などに変更しておくと良いでしょう。
ステップ4：コードを貼り付けて設定を行う
いよいよ、AIが生成した魔法のコードを、先ほど用意した「ノート（Apps Scriptエディタ）」に書き込んでいきます。ここでの作業は、基本的にコピー＆ペーストだけです。難しくないので、リラックスして進めましょう。
4-1. サーバーサイドのコード（Code.gs）を貼り付ける
まず、フォームの裏側で動くプログラム（サーバーサイドの処理）を担当する Code.gs のコードを貼り付けます。
- Apps Scriptエディタの画面で、最初からある
コード.gsファイルを開きます。 - ファイル内に最初から書かれている
function myFunction() { ... }という数行のコードをすべて削除します。 - Claudeが生成した
Code.gsのコードをすべてコピーし、空になったコード.gsファイルに貼り付けます。
▲ Claudeの画面にある「コピー」ボタンを使えば簡単です。
4-2. フォームの見た目を作るコード（index.html）を追加する
次に、応募フォームの見た目（HTMLやCSS）を担当する index.html ファイルを新しく作成し、コードを貼り付けます。
- Apps Scriptエディタの左側にあるファイル一覧の「ファイル」の横の「+」アイコンをクリックします。
- 表示されたメニューから「HTML」を選択します。
- ファイル名を聞かれるので「index」と入力してOKボタンを押します。（
.htmlは自動で付きます）
▲ AIのガイドが、どこをクリックすれば良いかまで教えてくれます。
- 新しく作られた
index.htmlファイルを開き、最初から書かれている数行のサンプルコードをすべて削除します。 - Claudeが生成した
index.htmlのコードをすべてコピーし、空になったindex.htmlファイルに貼り付けます。
▲ Claudeが生成した「Index（HTML）」と「Code（GS）」の2つのファイル。「ダウンロード」ボタンでコードを取得できます。
4-3. 最後の仕上げ：IDとメールアドレスを設定する
最後に、このプログラムが「どのスプレッドシートに記録するか」「誰に通知を送るか」を教えてあげる設定を行います。
- もう一度
Code.gsファイルを開きます。 - コードの冒頭部分に、以下のような記述があります。
const SPREADSHEET_ID = ''; // ← スプレッドシートのIDを入力 const NOTIFY_EMAIL = ''; // ← 通知先メールアドレスを入力 - SPREADSHEET_IDの
''の中に、ステップ3-1で作成したスプレッドシートのIDを貼り付けます。 💡 スプレッドシートIDとは？
スプレッドシートを開いたときのURLの、.../d/と/editの間にある長い英数字の文字列です。https://docs.google.com/spreadsheets/d/【ここがIDです】/edit - NOTIFY_EMAILの
''の中に、応募があったときに通知を受け取りたいあなたのメールアドレスを入力します。
▲ この2ヶ所を書き換えるだけで、設定は完了です。
- 設定が終わったら、画面上部にあるフロッピーディスクのアイコン（プロジェクトを保存）をクリックして、必ず保存してください。
お疲れ様でした！これで、すべての準備が整いました。いよいよ、この応募フォームをインターネットの世界に公開します。
ステップ5：Webアプリとして公開（デプロイ）する
最後のステップです。作成したプログラムを「デプロイ」して、世界中の誰もがアクセスできるWebページとして公開しましょう。「デプロイ」とは、作ったプログラムをサーバーに設置して、実際に使える状態にすること、と理解してください。
5-1. デプロイを開始する
- Apps Scriptエディタの右上にある青い「デプロイ」ボタンをクリックします。
- 表示されたメニューから「新しいデプロイ」を選択します。
▲ ここから、あなたの作品を世界に公開する旅が始まります。
5-2. 公開設定を行う
「新しいデプロイ」ダイアログが開くので、いくつかの設定を行います。
- 種類の選択の右にある歯車アイコンをクリックし、「ウェブアプリ」を選択します。
- 説明を入力します（例：「採用応募フォーム v1」など、後で見てわかるように）。
- 次のユーザーとして実行： を「自分（あなたのメールアドレス）」に設定します。
- アクセスできるユーザー： を「全員」に設定します。これにより、URLを知っている人なら誰でもフォームにアクセスできるようになります。
- 設定が完了したら、「デプロイ」ボタンをクリックします。
5-3. アクセス権限を承認する
初めてデプロイするときには、このプログラムがあなたのGoogleアカウント情報（スプレッドシートやメール）にアクセスすることを許可するための「承認」作業が必要です。
- 「承認が必要です」という画面が表示されたら、「アクセスを承認」ボタンをクリックします。
- あなたのGoogleアカウントを選択する画面が表示されるので、使用するアカウントを選びます。
- 「このアプリはGoogleで確認されていません」という警告画面が表示されることがあります。これは自作のプログラムでは必ず表示されるものなので、心配いりません。左下にある「詳細」をクリックし、「（プロジェクト名）（安全でないページ）に移動」というリンクをクリックします。
▲ 警告画面が出ても慌てずに。これは自作アプリの通過儀礼のようなものです。
- 最後に、このプログラムがGoogleスプレッドシートなどを操作することを許可するか聞かれるので、右下の「許可」ボタンをクリックします。
5-4. 完成！公開URLを取得する
承認が完了すると、デプロイが実行され、ついにあなたの応募フォームの公開URLが発行されます！
▲ この「ウェブアプリのURL」をコピーしてください。これが、あなたの作った応募フォームへの入り口です。
このURLにアクセスしてみてください。どうでしょうか？あなたがAIに指示して作った、プロ級の応募フォームが、実際にインターネット上で動いているはずです。感動の瞬間ですね！
応用例：あなたの仕事も自動化できる
この記事では「採用応募フォーム」を例に解説しましたが、この技術の応用範囲は無限大です。今回学んだ「AIにGASコードを書かせて、スプレッドシートと連携させる」という手法は、あらゆる事務作業に応用できます。
例えば、こんなことが実現可能です。
- 請求書発行フォーム： 取引先名と金額を入力するだけで、整形された請求書PDFを自動生成し、指定のメールアドレスに送付する。
- 日報入力フォーム： チームメンバーが日報をフォームから入力すると、スプレッドシートに自動で集計され、SlackやChatworkに通知が飛ぶ。
- 経費精算システム： Googleドライブの特定フォルダに領収書の写真をアップロードすると、AIが画像から金額や日付を読み取り、スプレッドシートの経費精算表に自動で転記する。
動画の解説者は、「事務作業の8割は、このやり方で自動化できる」と述べています。あなたの周りにある「面倒だけど、やらなければいけない作業」を思い浮かべてみてください。そのほとんどは、Claude Sonnet 4.6が解決してくれるかもしれません。
▲ 請求書作成、メール返信、経費精算…。アイデア次第で、あらゆる業務が自動化の対象になります。
まとめ：AI活用の第一歩を踏み出そう
この記事では、最新の無料AI「Claude Sonnet 4.6」を使って、プログラミングの知識がなくても本格的なWebアプリケーションを作成できることを実証しました。
今日のポイント
- 最新AIは無料でここまで凄い： Claude Sonnet 4.6を使えば、曖昧な日本語の指示だけで、プロ級のコードを生成できる。
- AIは「アシスタント」であり「先生」でもある： コードを書いてくれるだけでなく、わからないことは「初心者向けに教えて」と頼めば、完璧なマニュアルまで作ってくれる。
- 自動化の基本パターンは「GAS + スプレッドシート」： この組み合わせを覚えれば、採用フォームだけでなく、請求書作成や経費精算など、あらゆる事務作業を自動化できる。
AIはもはや、一部の専門家だけのものではありません。日本語で対話できるようになった今、AIはすべての人のための「最強の思考ツールであり、実行ツール」です。
この記事を読んで「すごい！」と思っただけで終わらせてしまうのは、あまりにもったいないです。ぜひ、今日紹介した手順を実際に試してみてください。あなた自身の力で「AIに仕事させる」という革命的な体験をしたとき、あなたの仕事、そしてキャリアは、新しいステージへと進むことになるでしょう。
【特別プレゼント】今すぐ使える！採用フォームの全コード
お疲れ様でした！
この記事を通して、AIの可能性を存分に感じていただけたかと思います。
「でも、やっぱり自分でやるのは少し不安…」
「まずは完成品を動かしてみたい！」
そんなあなたのために、今回AIが生成した「採用応募フォーム」の全コード（Code.gs と index.html）を特別にプレゼントします。
以下のファイルをダウンロードし、この記事のステップ4から真似して設定してみてください。わずか数分で、あなたのGoogleアカウント上に、今日見たものと全く同じ応募フォームが完成します。
（※ただし、スプレッドシートIDと通知先メールアドレスは、ご自身のものに書き換えるのを忘れないでくださいね！）
この「小さな成功体験」が、あなたのAI活用への大きな一歩となることを願っています。
▼ コードのダウンロードはこちら
code.gs
// ===================================================
// NEXT INNOVAITION株式会社 採用応募フォーム
// Code.gs - サーバーサイド処理
// ===================================================
const SPREADSHEET_ID = ''; // ← スプレッドシートのIDを入力
const SHEET_NAME = '採用応募一覧';
const NOTIFY_EMAIL = ''; // ← 管理者の通知先メールアドレスを入力
/**
* Webアプリのエントリポイント（GET）
*/
function doGet(e) {
const template = HtmlService.createTemplateFromFile('index');
return template.evaluate()
.setTitle('採用応募フォーム | NEXT INNOVAITION株式会社')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
/**
* 他のHTMLファイルをインクルードするユーティリティ
*/
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
/**
* フォーム送信処理
*/
function submitApplication(formData) {
try {
const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
let sheet = ss.getSheetByName(SHEET_NAME);
if (!sheet) {
sheet = ss.insertSheet(SHEET_NAME);
setupSheetHeaders(sheet);
}
if (sheet.getLastRow() === 0) {
setupSheetHeaders(sheet);
}
const now = new Date();
const timestamp = Utilities.formatDate(now, 'Asia/Tokyo', 'yyyy/MM/dd HH:mm:ss');
sheet.appendRow([
timestamp,
formData.position,
formData.name,
formData.nameKana,
formData.email,
formData.phone,
formData.age,
formData.prefecture,
formData.currentJob,
formData.experience,
formData.skills,
formData.portfolio,
formData.motivation,
formData.desiredSalary,
formData.startDate,
formData.workStyle,
formData.source,
formData.message,
'未対応'
]);
// 管理者への通知メール
if (NOTIFY_EMAIL) {
sendNotificationEmail(formData, timestamp);
}
// 応募者への自動返信メール
sendAutoReplyEmail(formData, timestamp);
return { success: true };
} catch (error) {
console.error('Error submitting application:', error);
return { success: false, error: error.message };
}
}
/**
* スプレッドシートのヘッダーを設定
*/
function setupSheetHeaders(sheet) {
const headers = [
'応募日時', '応募職種', '氏名', '氏名（フリガナ）', 'メールアドレス',
'電話番号', '年齢', '都道府県', '現在の職業', '経験年数',
'保有スキル・資格', 'ポートフォリオURL', '志望動機', '希望給与',
'入社可能時期', '希望勤務形態', '弊社を知ったきっかけ', 'その他メッセージ', 'ステータス'
];
sheet.appendRow(headers);
const headerRange = sheet.getRange(1, 1, 1, headers.length);
headerRange.setBackground('#4BA3D8');
headerRange.setFontColor('#FFFFFF');
headerRange.setFontWeight('bold');
headerRange.setHorizontalAlignment('center');
sheet.setFrozenRows(1);
sheet.autoResizeColumns(1, headers.length);
}
/**
* 応募者への自動返信メール
*/
function sendAutoReplyEmail(formData, timestamp) {
const subject = '【ご応募受付のご確認】NEXT INNOVAITION株式会社 採用担当';
const body =
formData.name + ' 様\n\n' +
'この度は、NEXT INNOVAITION株式会社へご応募いただきまして、\n' +
'誠にありがとうございます。\n\n' +
'以下の内容でご応募を受け付けましたことをお知らせいたします。\n\n' +
'━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n' +
'■ 受付情報\n' +
' 応募日時 : ' + timestamp + '\n' +
' 応募職種 : ' + formData.position + '\n' +
' お名前 : ' + formData.name + ' 様\n' +
'━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n' +
'■ 選考フローについて\n\n' +
' STEP 1｜書類選考\n' +
' ご応募書類をもとに書類選考を行います。\n' +
' 結果は通常1週間以内にメールにてご連絡いたします。\n\n' +
' STEP 2｜一次面接（オンライン）\n' +
' 担当者とのオンライン面接（30〜45分程度）を実施いたします。\n' +
' 日程はメールにて別途調整させていただきます。\n\n' +
' STEP 3｜二次面接（代表との面談）\n' +
' 代表との面談（45〜60分程度）を実施いたします。\n\n' +
' STEP 4｜内定・条件面談\n' +
' 内定後、給与・勤務条件等についてご確認いただきます。\n\n' +
'━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n' +
'選考期間中にご不明な点がございましたら、\n' +
'本メールへの返信にてお気軽にお問い合わせください。\n\n' +
'なお、本メールは自動送信されております。\n' +
'返信内容は採用担当者が確認いたしますので、\n' +
'ご安心してご連絡ください。\n\n' +
'改めまして、ご応募いただきありがとうございました。\n' +
'皆様との出会いを心よりお待ちしております。\n\n' +
'━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n' +
'NEXT INNOVAITION株式会社 採用担当\n' +
'━━━━━━━━━━━━━━━━━━━━━━━━━━━━';
GmailApp.sendEmail(formData.email, subject, body, {
name: 'NEXT INNOVAITION株式会社 採用担当'
});
}
/**
* 管理者への通知メール
*/
function sendNotificationEmail(formData, timestamp) {
const subject = '【採用応募通知】' + formData.position + ' / ' + formData.name + '様';
const body =
'NEXT INNOVAITION株式会社 採用管理システム\n\n' +
'新しい応募がありました。\n\n' +
'■ 応募情報\n' +
'━━━━━━━━━━━━━━━━━━━━━━\n' +
'応募日時 : ' + timestamp + '\n' +
'応募職種 : ' + formData.position + '\n' +
'氏名 : ' + formData.name + '（' + formData.nameKana + '）\n' +
'メール : ' + formData.email + '\n' +
'電話番号 : ' + formData.phone + '\n' +
'年齢 : ' + formData.age + '\n' +
'都道府県 : ' + formData.prefecture + '\n' +
'現在の職業 : ' + formData.currentJob + '\n' +
'経験年数 : ' + formData.experience + '\n' +
'━━━━━━━━━━━━━━━━━━━━━━\n\n' +
'■ スキル・資格\n' + formData.skills + '\n\n' +
'■ ポートフォリオ\n' + (formData.portfolio || 'なし') + '\n\n' +
'■ 志望動機\n' + formData.motivation + '\n\n' +
'■ 希望条件\n' +
'給与: ' + (formData.desiredSalary || '未記入') + '\n' +
'入社可能時期: ' + formData.startDate + '\n' +
'勤務形態: ' + formData.workStyle + '\n\n' +
'■ その他メッセージ\n' + (formData.message || 'なし') + '\n\n' +
'━━━━━━━━━━━━━━━━━━━━━━\n' +
'スプレッドシートで詳細を確認してください。';
GmailApp.sendEmail(NOTIFY_EMAIL, subject, body);
}index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>採用応募フォーム | NEXT INNOVAITION株式会社</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Outfit:wght@300;400;600;700;900&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--primary: #4BA3D8;
--primary-dark: #2E87C8;
--primary-light: #D6EEFA;
--accent: #E91E8C;
--dark: #0D1F2D;
--text: #1A2E3D;
--muted: #64748B;
--border: #E2EBF3;
--bg: #F4F8FB;
--white: #FFFFFF;
--success: #10B981;
--error: #EF4444;
}
body {
font-family: 'Noto Sans JP', sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
}
/* ===== HERO HEADER ===== */
.hero {
background: linear-gradient(135deg, var(--dark) 0%, #0e3a5a 50%, #1a5276 100%);
position: relative;
overflow: hidden;
padding: 64px 24px 80px;
text-align: center;
}
.hero::before {
content: '';
position: absolute;
top: -100px; right: -100px;
width: 500px; height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(75,163,216,0.2) 0%, transparent 70%);
}
.hero::after {
content: '';
position: absolute;
bottom: -80px; left: -80px;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(233,30,140,0.15) 0%, transparent 70%);
}
.hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(75,163,216,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(75,163,216,0.06) 1px, transparent 1px);
background-size: 48px 48px;
}
.hero-content {
position: relative;
z-index: 1;
max-width: 680px;
margin: 0 auto;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(75,163,216,0.15);
border: 1px solid rgba(75,163,216,0.3);
color: var(--primary);
font-family: 'Outfit', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 8px 20px;
border-radius: 100px;
margin-bottom: 28px;
}
.hero-badge::before {
content: '';
width: 6px; height: 6px;
background: var(--accent);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.3); }
}
.hero h1 {
font-family: 'Outfit', sans-serif;
font-size: clamp(28px, 5vw, 48px);
font-weight: 900;
color: var(--white);
line-height: 1.15;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.hero h1 span {
color: var(--primary);
}
.hero p {
font-size: 15px;
color: rgba(255,255,255,0.65);
line-height: 1.75;
max-width: 480px;
margin: 0 auto 32px;
}
.hero-positions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.position-chip {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
color: rgba(255,255,255,0.85);
font-size: 13px;
padding: 7px 18px;
border-radius: 8px;
backdrop-filter: blur(10px);
}
/* ===== WAVE DIVIDER ===== */
.wave {
display: block;
width: 100%;
height: 60px;
background: var(--bg);
clip-path: ellipse(55% 100% at 50% 100%);
margin-top: -1px;
}
/* ===== MAIN LAYOUT ===== */
.main {
max-width: 760px;
margin: 0 auto;
padding: 0 20px 80px;
}
/* ===== PROGRESS STEPS ===== */
.progress-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-bottom: 48px;
padding: 32px 0 0;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex: 1;
max-width: 140px;
position: relative;
}
.step:not(:last-child)::after {
content: '';
position: absolute;
top: 18px;
left: calc(50% + 20px);
width: calc(100% - 40px);
height: 2px;
background: var(--border);
transition: background 0.3s;
}
.step.active:not(:last-child)::after,
.step.done:not(:last-child)::after {
background: var(--primary);
}
.step-num {
width: 36px; height: 36px;
border-radius: 50%;
border: 2px solid var(--border);
background: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 14px;
color: var(--muted);
transition: all 0.3s;
position: relative;
z-index: 1;
}
.step.active .step-num {
border-color: var(--primary);
background: var(--primary);
color: white;
box-shadow: 0 0 0 4px rgba(75,163,216,0.2);
}
.step.done .step-num {
border-color: var(--success);
background: var(--success);
color: white;
}
.step.done .step-num::after {
content: '✓';
font-size: 14px;
}
.step.done .step-num span { display: none; }
.step-label {
font-size: 11px;
color: var(--muted);
font-weight: 500;
white-space: nowrap;
text-align: center;
}
.step.active .step-label {
color: var(--primary);
font-weight: 700;
}
/* ===== FORM SECTIONS ===== */
.form-section {
display: none;
animation: fadeSlide 0.4s ease;
}
.form-section.active { display: block; }
@keyframes fadeSlide {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.section-card {
background: var(--white);
border-radius: 20px;
padding: 40px;
border: 1px solid var(--border);
box-shadow: 0 4px 24px rgba(13,31,45,0.06);
margin-bottom: 20px;
}
.section-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 2px solid var(--primary-light);
}
.section-icon {
width: 48px; height: 48px;
border-radius: 14px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(75,163,216,0.3);
}
.section-header h2 {
font-family: 'Outfit', sans-serif;
font-size: 22px;
font-weight: 700;
color: var(--dark);
}
.section-header p {
font-size: 13px;
color: var(--muted);
margin-top: 3px;
}
/* ===== FORM FIELDS ===== */
.field-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.field-grid.full { grid-template-columns: 1fr; }
.field {
display: flex;
flex-direction: column;
gap: 8px;
}
.field.span2 { grid-column: 1 / -1; }
label {
font-size: 13px;
font-weight: 700;
color: var(--text);
display: flex;
align-items: center;
gap: 6px;
}
.required-badge {
font-size: 10px;
font-weight: 700;
background: var(--accent);
color: white;
padding: 2px 7px;
border-radius: 4px;
letter-spacing: 0.05em;
}
.optional-badge {
font-size: 10px;
color: var(--muted);
background: var(--border);
padding: 2px 7px;
border-radius: 4px;
}
input, select, textarea {
width: 100%;
padding: 13px 16px;
border: 1.5px solid var(--border);
border-radius: 12px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 14px;
color: var(--text);
background: var(--white);
transition: all 0.2s;
outline: none;
appearance: none;
}
input:focus, select:focus, textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(75,163,216,0.15);
}
input.error, select.error, textarea.error {
border-color: var(--error);
box-shadow: 0 0 0 3px rgba(239,68,68,0.1);
}
select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 44px;
cursor: pointer;
}
textarea {
resize: vertical;
min-height: 120px;
line-height: 1.65;
}
.field-hint {
font-size: 12px;
color: var(--muted);
margin-top: 2px;
}
.error-msg {
font-size: 12px;
color: var(--error);
display: none;
align-items: center;
gap: 4px;
}
.error-msg.show { display: flex; }
/* ===== RADIO/CHECKBOX GROUP ===== */
.radio-group, .checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.radio-label, .checkbox-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 10px 18px;
border: 1.5px solid var(--border);
border-radius: 10px;
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--white);
transition: all 0.2s;
user-select: none;
}
.radio-label:hover, .checkbox-label:hover {
border-color: var(--primary);
background: var(--primary-light);
}
.radio-label input, .checkbox-label input {
display: none;
}
.radio-label.selected, .checkbox-label.selected {
border-color: var(--primary);
background: var(--primary-light);
color: var(--primary-dark);
font-weight: 700;
}
.radio-dot {
width: 16px; height: 16px;
border-radius: 50%;
border: 2px solid var(--border);
background: var(--white);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s;
}
.radio-label.selected .radio-dot {
border-color: var(--primary);
background: var(--primary);
}
.radio-label.selected .radio-dot::after {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: white;
}
/* ===== POSITION CARDS ===== */
.position-cards {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.position-card {
border: 2px solid var(--border);
border-radius: 16px;
padding: 22px 24px;
cursor: pointer;
transition: all 0.25s;
display: flex;
align-items: flex-start;
gap: 18px;
position: relative;
overflow: hidden;
background: var(--white);
}
.position-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--border);
transition: background 0.25s;
}
.position-card:hover {
border-color: rgba(75,163,216,0.5);
transform: translateX(4px);
}
.position-card.selected {
border-color: var(--primary);
background: linear-gradient(to right, var(--primary-light), var(--white));
}
.position-card.selected::before {
background: var(--primary);
}
.position-card input[type="radio"] {
display: none;
}
.card-icon {
width: 46px; height: 46px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.card-content h3 {
font-family: 'Outfit', sans-serif;
font-size: 17px;
font-weight: 700;
color: var(--dark);
margin-bottom: 6px;
}
.card-content p {
font-size: 13px;
color: var(--muted);
line-height: 1.6;
}
.card-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.card-tag {
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 6px;
background: var(--border);
color: var(--muted);
}
.position-card.selected .card-tag {
background: rgba(75,163,216,0.2);
color: var(--primary-dark);
}
.card-check {
width: 24px; height: 24px;
border-radius: 50%;
border: 2px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
flex-shrink: 0;
transition: all 0.25s;
}
.position-card.selected .card-check {
background: var(--primary);
border-color: var(--primary);
color: white;
font-size: 13px;
}
.position-card.selected .card-check::after {
content: '✓';
font-weight: 700;
}
/* ===== NAVIGATION BUTTONS ===== */
.nav-buttons {
display: flex;
gap: 12px;
justify-content: flex-end;
margin-top: 24px;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: 12px;
font-family: 'Outfit', sans-serif;
font-size: 15px;
font-weight: 700;
cursor: pointer;
border: none;
transition: all 0.2s;
letter-spacing: 0.02em;
}
.btn-ghost {
background: var(--border);
color: var(--text);
}
.btn-ghost:hover { background: #d0dce8; }
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
box-shadow: 0 4px 14px rgba(75,163,216,0.4);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(75,163,216,0.5);
}
.btn-primary:active { transform: translateY(0); }
.btn-submit {
background: linear-gradient(135deg, var(--accent), #c41676);
color: white;
box-shadow: 0 4px 14px rgba(233,30,140,0.35);
padding: 16px 40px;
font-size: 16px;
}
.btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(233,30,140,0.45);
}
/* ===== CONFIRM SECTION ===== */
.confirm-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.confirm-table tr:not(:last-child) td {
border-bottom: 1px solid var(--border);
}
.confirm-table td {
padding: 14px 0;
vertical-align: top;
font-size: 14px;
line-height: 1.65;
}
.confirm-table td:first-child {
width: 160px;
color: var(--muted);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
padding-right: 20px;
padding-top: 16px;
}
.confirm-table td:last-child {
color: var(--text);
}
/* ===== PRIVACY / TERMS ===== */
.privacy-box {
background: #F8FAFC;
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
font-size: 13px;
color: var(--muted);
line-height: 1.7;
margin-bottom: 20px;
max-height: 160px;
overflow-y: auto;
}
.privacy-box h4 {
color: var(--text);
font-weight: 700;
margin-bottom: 8px;
font-size: 13px;
}
.agree-check {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
}
.agree-check input[type="checkbox"] {
display: none;
}
.custom-checkbox {
width: 22px; height: 22px;
min-width: 22px;
border: 2px solid var(--border);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
background: var(--white);
margin-top: 2px;
}
.agree-check.checked .custom-checkbox {
background: var(--primary);
border-color: var(--primary);
color: white;
font-size: 14px;
}
.agree-check.checked .custom-checkbox::after { content: '✓'; }
.agree-text {
font-size: 14px;
color: var(--text);
line-height: 1.6;
}
/* ===== SUCCESS ===== */
.success-screen {
display: none;
text-align: center;
padding: 80px 24px;
}
.success-screen.show { display: block; }
.success-icon {
width: 100px; height: 100px;
border-radius: 50%;
background: linear-gradient(135deg, #10B981, #059669);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 32px;
font-size: 48px;
box-shadow: 0 8px 32px rgba(16,185,129,0.3);
animation: successBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes successBounce {
from { opacity: 0; transform: scale(0); }
to { opacity: 1; transform: scale(1); }
}
.success-screen h2 {
font-family: 'Outfit', sans-serif;
font-size: 32px;
font-weight: 900;
color: var(--dark);
margin-bottom: 16px;
}
.success-screen p {
font-size: 15px;
color: var(--muted);
line-height: 1.75;
max-width: 400px;
margin: 0 auto;
}
/* ===== LOADING ===== */
.loading-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(13,31,45,0.6);
backdrop-filter: blur(4px);
z-index: 100;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 20px;
}
.loading-overlay.show { display: flex; }
.spinner {
width: 52px; height: 52px;
border: 4px solid rgba(255,255,255,0.2);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay p {
color: white;
font-size: 15px;
font-weight: 500;
}
/* ===== FOOTER ===== */
.footer {
text-align: center;
padding: 40px 20px;
color: var(--muted);
font-size: 13px;
}
.footer strong {
color: var(--text);
display: block;
font-family: 'Outfit', sans-serif;
font-size: 16px;
font-weight: 700;
margin-bottom: 6px;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
.field-grid { grid-template-columns: 1fr; }
.field.span2 { grid-column: 1; }
.section-card { padding: 24px 20px; }
.step-label { font-size: 10px; }
.progress-bar { gap: 0; }
.confirm-table td:first-child { width: 120px; }
}
</style>
</head>
<body>
<!-- LOADING OVERLAY -->
<div class="loading-overlay" id="loadingOverlay">
<div class="spinner"></div>
<p>送信しています...</p>
</div>
<!-- HERO HEADER -->
<div class="hero">
<div class="hero-grid"></div>
<div class="hero-content">
<div class="hero-badge">Recruitment 2025</div>
<h1>一緒に、<span>AI</span>の未来を<br>創りましょう。</h1>
<p>NEXT INNOVAITION株式会社では、AIを活用して社会に新しい価値を提供するメンバーを募集しています。</p>
<div class="hero-positions">
<span class="position-chip">🎬 動画編集者</span>
<span class="position-chip">💻 AI駆動開発エンジニア</span>
<span class="position-chip">🧠 AIコンサルタント</span>
</div>
</div>
</div>
<div class="wave"></div>
<!-- MAIN -->
<div class="main">
<!-- PROGRESS BAR -->
<div class="progress-bar">
<div class="step active" id="step1">
<div class="step-num"><span>1</span></div>
<div class="step-label">職種選択</div>
</div>
<div class="step" id="step2">
<div class="step-num"><span>2</span></div>
<div class="step-label">基本情報</div>
</div>
<div class="step" id="step3">
<div class="step-num"><span>3</span></div>
<div class="step-label">スキル・動機</div>
</div>
<div class="step" id="step4">
<div class="step-num"><span>4</span></div>
<div class="step-label">確認・送信</div>
</div>
</div>
<!-- === SECTION 1: 職種選択 === -->
<div class="form-section active" id="section1">
<div class="section-card">
<div class="section-header">
<div class="section-icon">💼</div>
<div>
<h2>応募職種を選択</h2>
<p>ご希望のポジションをお選びください</p>
</div>
</div>
<div class="position-cards" id="positionCards">
<label class="position-card" onclick="selectPosition(this, '動画編集者')">
<input type="radio" name="position" value="動画編集者">
<div class="card-icon" style="background:linear-gradient(135deg,#ff6b6b,#e63946);">🎬</div>
<div class="card-content">
<h3>動画編集者</h3>
<p>AI関連コンテンツ・YouTube動画の企画・編集・ディレクションをお任せします。</p>
<div class="card-tags">
<span class="card-tag">Adobe Premiere</span>
<span class="card-tag">After Effects</span>
<span class="card-tag">DaVinci Resolve</span>
</div>
</div>
<div class="card-check"></div>
</label>
<label class="position-card" onclick="selectPosition(this, 'AI駆動開発エンジニア')">
<input type="radio" name="position" value="AI駆動開発エンジニア">
<div class="card-icon" style="background:linear-gradient(135deg,#4BA3D8,#2E87C8);">💻</div>
<div class="card-content">
<h3>AI駆動開発エンジニア</h3>
<p>生成AIを活用した業務自動化・システム開発・API連携の設計・実装をお任せします。</p>
<div class="card-tags">
<span class="card-tag">Python / GAS</span>
<span class="card-tag">Gemini / OpenAI API</span>
<span class="card-tag">LLM活用</span>
</div>
</div>
<div class="card-check"></div>
</label>
<label class="position-card" onclick="selectPosition(this, 'AIコンサルタント')">
<input type="radio" name="position" value="AIコンサルタント">
<div class="card-icon" style="background:linear-gradient(135deg,#E91E8C,#c41676);">🧠</div>
<div class="card-content">
<h3>AIコンサルタント</h3>
<p>企業へのAI導入支援・研修実施・業務改善提案など、コンサルティング全般をお任せします。</p>
<div class="card-tags">
<span class="card-tag">AI導入支援</span>
<span class="card-tag">研修設計</span>
<span class="card-tag">業務改善</span>
</div>
</div>
<div class="card-check"></div>
</label>
</div>
<p class="error-msg" id="positionError" style="margin-top:16px;">
⚠️ 応募職種を選択してください
</p>
</div>
<div class="nav-buttons">
<button class="btn btn-primary" onclick="goToStep(2)">
次へ進む →
</button>
</div>
</div>
<!-- === SECTION 2: 基本情報 === -->
<div class="form-section" id="section2">
<div class="section-card">
<div class="section-header">
<div class="section-icon">👤</div>
<div>
<h2>基本情報</h2>
<p>ご本人の基本情報をご入力ください</p>
</div>
</div>
<div class="field-grid">
<div class="field">
<label>氏名 <span class="required-badge">必須</span></label>
<input type="text" id="name" placeholder="山田 太郎" autocomplete="name">
<p class="error-msg" id="nameError">⚠️ 氏名を入力してください</p>
</div>
<div class="field">
<label>フリガナ <span class="required-badge">必須</span></label>
<input type="text" id="nameKana" placeholder="ヤマダ タロウ">
<p class="error-msg" id="nameKanaError">⚠️ フリガナを入力してください</p>
</div>
<div class="field">
<label>メールアドレス <span class="required-badge">必須</span></label>
<input type="email" id="email" placeholder="example@email.com" autocomplete="email">
<p class="error-msg" id="emailError">⚠️ 有効なメールアドレスを入力してください</p>
</div>
<div class="field">
<label>電話番号 <span class="required-badge">必須</span></label>
<input type="tel" id="phone" placeholder="090-0000-0000" autocomplete="tel">
<p class="error-msg" id="phoneError">⚠️ 電話番号を入力してください</p>
</div>
<div class="field">
<label>年齢 <span class="required-badge">必須</span></label>
<select id="age">
<option value="">選択してください</option>
<option>20歳未満</option>
<option>20〜24歳</option>
<option>25〜29歳</option>
<option>30〜34歳</option>
<option>35〜39歳</option>
<option>40〜44歳</option>
<option>45〜49歳</option>
<option>50歳以上</option>
</select>
<p class="error-msg" id="ageError">⚠️ 年齢を選択してください</p>
</div>
<div class="field">
<label>都道府県 <span class="required-badge">必須</span></label>
<select id="prefecture">
<option value="">選択してください</option>
<option>北海道</option><option>青森県</option><option>岩手県</option>
<option>宮城県</option><option>秋田県</option><option>山形県</option>
<option>福島県</option><option>茨城県</option><option>栃木県</option>
<option>群馬県</option><option>埼玉県</option><option>千葉県</option>
<option>東京都</option><option>神奈川県</option><option>新潟県</option>
<option>富山県</option><option>石川県</option><option>福井県</option>
<option>山梨県</option><option>長野県</option><option>岐阜県</option>
<option>静岡県</option><option>愛知県</option><option>三重県</option>
<option>滋賀県</option><option>京都府</option><option>大阪府</option>
<option>兵庫県</option><option>奈良県</option><option>和歌山県</option>
<option>鳥取県</option><option>島根県</option><option>岡山県</option>
<option>広島県</option><option>山口県</option><option>徳島県</option>
<option>香川県</option><option>愛媛県</option><option>高知県</option>
<option>福岡県</option><option>佐賀県</option><option>長崎県</option>
<option>熊本県</option><option>大分県</option><option>宮崎県</option>
<option>鹿児島県</option><option>沖縄県</option><option>海外在住</option>
</select>
<p class="error-msg" id="prefectureError">⚠️ 都道府県を選択してください</p>
</div>
<div class="field span2">
<label>現在の職業 <span class="required-badge">必須</span></label>
<select id="currentJob">
<option value="">選択してください</option>
<option>会社員（正社員）</option>
<option>会社員（契約社員・派遣）</option>
<option>フリーランス・個人事業主</option>
<option>学生</option>
<option>求職中</option>
<option>その他</option>
</select>
<p class="error-msg" id="currentJobError">⚠️ 現在の職業を選択してください</p>
</div>
</div>
</div>
<div class="nav-buttons">
<button class="btn btn-ghost" onclick="goToStep(1)">← 戻る</button>
<button class="btn btn-primary" onclick="goToStep(3)">次へ進む →</button>
</div>
</div>
<!-- === SECTION 3: スキル・志望動機 === -->
<div class="form-section" id="section3">
<div class="section-card">
<div class="section-header">
<div class="section-icon">⭐</div>
<div>
<h2>スキル・志望動機</h2>
<p>あなたの強みや想いを教えてください</p>
</div>
</div>
<div class="field-grid full">
<div class="field">
<label>経験年数 <span class="required-badge">必須</span></label>
<div class="radio-group" id="experienceGroup">
<label class="radio-label" onclick="selectRadio(this, 'experience', '未経験')">
<input type="radio" name="experience" value="未経験">
<div class="radio-dot"></div>未経験
</label>
<label class="radio-label" onclick="selectRadio(this, 'experience', '1年未満')">
<input type="radio" name="experience" value="1年未満">
<div class="radio-dot"></div>1年未満
</label>
<label class="radio-label" onclick="selectRadio(this, 'experience', '1〜3年')">
<input type="radio" name="experience" value="1〜3年">
<div class="radio-dot"></div>1〜3年
</label>
<label class="radio-label" onclick="selectRadio(this, 'experience', '3〜5年')">
<input type="radio" name="experience" value="3〜5年">
<div class="radio-dot"></div>3〜5年
</label>
<label class="radio-label" onclick="selectRadio(this, 'experience', '5年以上')">
<input type="radio" name="experience" value="5年以上">
<div class="radio-dot"></div>5年以上
</label>
</div>
<p class="error-msg" id="experienceError">⚠️ 経験年数を選択してください</p>
</div>
<div class="field">
<label>保有スキル・資格 <span class="required-badge">必須</span></label>
<textarea id="skills" placeholder="例：Adobe Premiere Pro（3年）、After Effects（2年）、ChatGPT/Claude活用経験あり、など"></textarea>
<p class="error-msg" id="skillsError">⚠️ スキル・資格を入力してください</p>
</div>
<div class="field">
<label>ポートフォリオ・GitHubなど <span class="optional-badge">任意</span></label>
<input type="url" id="portfolio" placeholder="https://your-portfolio.com">
<p class="field-hint">URL形式で複数ある場合はカンマ区切りで入力してください</p>
</div>
<div class="field">
<label>志望動機 <span class="required-badge">必須</span></label>
<textarea id="motivation" placeholder="NEXT INNOVATIONへの応募動機、入社後に挑戦したいことなどをご記入ください。" style="min-height:150px;"></textarea>
<p class="error-msg" id="motivationError">⚠️ 志望動機を入力してください</p>
</div>
<div class="field">
<label>希望給与 <span class="optional-badge">任意</span></label>
<select id="desiredSalary">
<option value="">選択してください（任意）</option>
<option>〜200万円</option>
<option>200〜300万円</option>
<option>300〜400万円</option>
<option>400〜500万円</option>
<option>500〜600万円</option>
<option>600万円〜</option>
<option>応相談</option>
</select>
</div>
<div class="field">
<label>入社可能時期 <span class="required-badge">必須</span></label>
<select id="startDate">
<option value="">選択してください</option>
<option>即時</option>
<option>1ヶ月以内</option>
<option>3ヶ月以内</option>
<option>6ヶ月以内</option>
<option>未定</option>
</select>
<p class="error-msg" id="startDateError">⚠️ 入社可能時期を選択してください</p>
</div>
<div class="field">
<label>希望勤務形態 <span class="required-badge">必須</span></label>
<div class="radio-group">
<label class="radio-label" onclick="selectRadio(this, 'workStyle', 'フルタイム（正社員）')">
<input type="radio" name="workStyle" value="フルタイム（正社員）">
<div class="radio-dot"></div>正社員
</label>
<label class="radio-label" onclick="selectRadio(this, 'workStyle', '業務委託・フリーランス')">
<input type="radio" name="workStyle" value="業務委託・フリーランス">
<div class="radio-dot"></div>業務委託
</label>
<label class="radio-label" onclick="selectRadio(this, 'workStyle', 'アルバイト・パート')">
<input type="radio" name="workStyle" value="アルバイト・パート">
<div class="radio-dot"></div>アルバイト
</label>
<label class="radio-label" onclick="selectRadio(this, 'workStyle', 'どちらでもOK')">
<input type="radio" name="workStyle" value="どちらでもOK">
<div class="radio-dot"></div>相談可
</label>
</div>
<p class="error-msg" id="workStyleError">⚠️ 勤務形態を選択してください</p>
</div>
<div class="field">
<label>弊社を知ったきっかけ <span class="optional-badge">任意</span></label>
<select id="source">
<option value="">選択してください（任意）</option>
<option>YouTube（あなたのAI顧問）</option>
<option>SNS（X/Twitter）</option>
<option>SNS（Instagram）</option>
<option>SNS（Facebook）</option>
<option>求人サイト</option>
<option>知人・友人の紹介</option>
<option>Google検索</option>
<option>その他</option>
</select>
</div>
<div class="field">
<label>その他メッセージ <span class="optional-badge">任意</span></label>
<textarea id="message" placeholder="特記事項、質問などがあればご記入ください。" style="min-height:80px;"></textarea>
</div>
</div>
</div>
<div class="nav-buttons">
<button class="btn btn-ghost" onclick="goToStep(2)">← 戻る</button>
<button class="btn btn-primary" onclick="goToStep(4)">確認画面へ →</button>
</div>
</div>
<!-- === SECTION 4: 確認・送信 === -->
<div class="form-section" id="section4">
<div class="section-card">
<div class="section-header">
<div class="section-icon">✅</div>
<div>
<h2>入力内容の確認</h2>
<p>送信前に内容をご確認ください</p>
</div>
</div>
<table class="confirm-table" id="confirmTable"></table>
</div>
<div class="section-card">
<div class="section-header">
<div class="section-icon">🔒</div>
<div>
<h2>個人情報の取り扱い</h2>
</div>
</div>
<div class="privacy-box">
<h4>個人情報保護方針</h4>
NEXT INNOVAITION株式会社（以下「弊社」）は、ご応募いただいた方の個人情報を採用選考および採用に関する連絡のみに使用し、選考終了後は適切に管理・廃棄いたします。ご提供いただいた個人情報は、法令に基づく場合を除き、第三者への提供・開示は行いません。お問い合わせ内容によっては、回答までに数日いただく場合がございます。
</div>
<div class="agree-check" id="agreeLabel" onclick="toggleAgree(this)">
<div class="custom-checkbox" id="customCheckbox"></div>
<span class="agree-text">個人情報の取り扱いについて同意します</span>
</div>
<p class="error-msg" id="agreeError" style="margin-top:12px;">⚠️ 同意のチェックが必要です</p>
</div>
<div class="nav-buttons" style="justify-content:space-between;">
<button class="btn btn-ghost" onclick="goToStep(3)">← 戻る</button>
<button class="btn btn-submit" onclick="submitForm()">
📨 応募を送信する
</button>
</div>
</div>
<!-- SUCCESS -->
<div class="success-screen" id="successScreen">
<div class="success-icon">🎉</div>
<h2>応募ありがとうございます！</h2>
<p>ご応募を受け付けました。<br>担当者より追って連絡いたします。<br>今しばらくお待ちください。</p>
</div>
</div>
<!-- FOOTER -->
<div class="footer">
<strong>NEXT INNOVAITION株式会社</strong>
© 2025 NEXT INNOVAITION Co., Ltd. All rights reserved.
</div>
<script>
let currentStep = 1;
const formData = {};
/* ===== POSITION CARD SELECTION ===== */
function selectPosition(el, value) {
document.querySelectorAll('.position-card').forEach(c => c.classList.remove('selected'));
el.classList.add('selected');
formData.position = value;
document.getElementById('positionError').classList.remove('show');
}
/* ===== RADIO BUTTON ===== */
function selectRadio(el, field, value) {
const group = el.closest('.field');
if (group) group.querySelectorAll('.radio-label').forEach(l => l.classList.remove('selected'));
el.classList.add('selected');
formData[field] = value;
const errId = field + 'Error';
const err = document.getElementById(errId);
if (err) err.classList.remove('show');
}
/* ===== AGREE CHECKBOX ===== */
function toggleAgree(el) {
el.classList.toggle('checked');
const cb = document.getElementById('customCheckbox');
if (el.classList.contains('checked')) {
cb.innerHTML = '✓';
} else {
cb.innerHTML = '';
}
document.getElementById('agreeError').classList.remove('show');
}
/* ===== STEP NAVIGATION ===== */
function goToStep(step) {
if (step > currentStep) {
if (!validateStep(currentStep)) return;
if (step === 4) buildConfirmTable();
}
// Update steps
for (let i = 1; i <= 4; i++) {
const stepEl = document.getElementById('step' + i);
stepEl.classList.remove('active', 'done');
if (i < step) stepEl.classList.add('done');
if (i === step) stepEl.classList.add('active');
}
document.getElementById('section' + currentStep).classList.remove('active');
currentStep = step;
document.getElementById('section' + currentStep).classList.add('active');
window.scrollTo({ top: 0, behavior: 'smooth' });
}
/* ===== VALIDATION ===== */
function validateStep(step) {
let valid = true;
if (step === 1) {
if (!formData.position) {
document.getElementById('positionError').classList.add('show');
valid = false;
}
}
if (step === 2) {
const fields = [
{ id: 'name', errId: 'nameError', check: v => v.trim() },
{ id: 'nameKana', errId: 'nameKanaError', check: v => v.trim() },
{ id: 'email', errId: 'emailError', check: v => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) },
{ id: 'phone', errId: 'phoneError', check: v => v.trim() },
{ id: 'age', errId: 'ageError', check: v => v },
{ id: 'prefecture', errId: 'prefectureError', check: v => v },
{ id: 'currentJob', errId: 'currentJobError', check: v => v },
];
fields.forEach(f => {
const el = document.getElementById(f.id);
const errEl = document.getElementById(f.errId);
if (!f.check(el.value)) {
el.classList.add('error');
errEl.classList.add('show');
valid = false;
} else {
el.classList.remove('error');
errEl.classList.remove('show');
formData[f.id] = el.value;
}
});
}
if (step === 3) {
if (!formData.experience) {
document.getElementById('experienceError').classList.add('show');
valid = false;
}
const skills = document.getElementById('skills');
if (!skills.value.trim()) {
skills.classList.add('error');
document.getElementById('skillsError').classList.add('show');
valid = false;
} else {
skills.classList.remove('error');
document.getElementById('skillsError').classList.remove('show');
formData.skills = skills.value;
}
const motivation = document.getElementById('motivation');
if (!motivation.value.trim()) {
motivation.classList.add('error');
document.getElementById('motivationError').classList.add('show');
valid = false;
} else {
motivation.classList.remove('error');
document.getElementById('motivationError').classList.remove('show');
formData.motivation = motivation.value;
}
const startDate = document.getElementById('startDate');
if (!startDate.value) {
startDate.classList.add('error');
document.getElementById('startDateError').classList.add('show');
valid = false;
} else {
startDate.classList.remove('error');
document.getElementById('startDateError').classList.remove('show');
formData.startDate = startDate.value;
}
if (!formData.workStyle) {
document.getElementById('workStyleError').classList.add('show');
valid = false;
}
// Optional fields
formData.portfolio = document.getElementById('portfolio').value;
formData.desiredSalary = document.getElementById('desiredSalary').value;
formData.source = document.getElementById('source').value;
formData.message = document.getElementById('message').value;
}
return valid;
}
/* ===== CONFIRM TABLE ===== */
function buildConfirmTable() {
const rows = [
['応募職種', formData.position],
['氏名', formData.name + '（' + formData.nameKana + '）'],
['メール', formData.email],
['電話番号', formData.phone],
['年齢', formData.age],
['都道府県', formData.prefecture],
['現在の職業', formData.currentJob],
['経験年数', formData.experience],
['スキル・資格', formData.skills],
['ポートフォリオ', formData.portfolio || '—'],
['志望動機', formData.motivation],
['希望給与', formData.desiredSalary || '未記入'],
['入社可能時期', formData.startDate],
['勤務形態', formData.workStyle],
['きっかけ', formData.source || '未記入'],
['その他', formData.message || '—'],
];
const table = document.getElementById('confirmTable');
table.innerHTML = rows.map(([k, v]) =>
`<tr><td>${k}</td><td>${escapeHtml(v)}</td></tr>`
).join('');
}
function escapeHtml(str) {
return String(str)
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/\n/g, '<br>');
}
/* ===== SUBMIT ===== */
function submitForm() {
const agreeLabel = document.getElementById('agreeLabel');
if (!agreeLabel.classList.contains('checked')) {
document.getElementById('agreeError').classList.add('show');
return;
}
document.getElementById('loadingOverlay').classList.add('show');
google.script.run
.withSuccessHandler(onSuccess)
.withFailureHandler(onError)
.submitApplication(formData);
}
function onSuccess(result) {
document.getElementById('loadingOverlay').classList.remove('show');
if (result.success) {
document.getElementById('section4').style.display = 'none';
document.getElementById('successScreen').classList.add('show');
window.scrollTo({ top: 0, behavior: 'smooth' });
document.querySelector('.progress-bar').style.display = 'none';
} else {
alert('エラーが発生しました: ' + result.error);
}
}
function onError(error) {
document.getElementById('loadingOverlay').classList.remove('show');
alert('送信に失敗しました。しばらくしてから再度お試しください。');
console.error(error);
}
// Real-time validation clear
['name','nameKana','email','phone'].forEach(id => {
const el = document.getElementById(id);
if (el) el.addEventListener('input', () => {
el.classList.remove('error');
const errEl = document.getElementById(id + 'Error');
if (errEl) errEl.classList.remove('show');
});
});
</script>
</body>
</html>セットアップガイド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>採用フォーム セットアップガイド | NEXT INNOVAITION</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Outfit:wght@400;600;700;900&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--primary: #4BA3D8;
--primary-dark: #2E87C8;
--primary-light: #D6EEFA;
--accent: #E91E8C;
--dark: #0D1F2D;
--text: #1A2E3D;
--muted: #64748B;
--border: #E2EBF3;
--bg: #F4F8FB;
--white: #FFFFFF;
--success: #10B981;
--warning: #F59E0B;
--code-bg: #1e2d3d;
}
body {
font-family: 'Noto Sans JP', sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.7;
}
/* ===== HEADER ===== */
.header {
background: linear-gradient(135deg, var(--dark) 0%, #0e3a5a 60%, #1a5276 100%);
padding: 56px 24px 64px;
text-align: center;
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(75,163,216,0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(75,163,216,0.07) 1px, transparent 1px);
background-size: 48px 48px;
}
.header-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.header-badge {
display: inline-block;
background: rgba(75,163,216,0.2);
border: 1px solid rgba(75,163,216,0.4);
color: var(--primary);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 7px 20px;
border-radius: 100px;
margin-bottom: 24px;
}
.header h1 {
font-family: 'Outfit', sans-serif;
font-size: clamp(26px, 4vw, 42px);
font-weight: 900;
color: white;
line-height: 1.2;
margin-bottom: 16px;
}
.header h1 span { color: var(--primary); }
.header p {
font-size: 15px;
color: rgba(255,255,255,0.65);
max-width: 480px;
margin: 0 auto 28px;
}
.header-time {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
color: rgba(255,255,255,0.8);
font-size: 14px;
padding: 10px 24px;
border-radius: 100px;
}
/* ===== OVERVIEW TABLE ===== */
.wave {
display: block;
width: 100%;
height: 50px;
background: var(--bg);
clip-path: ellipse(55% 100% at 50% 100%);
margin-top: -1px;
}
/* ===== MAIN ===== */
.main {
max-width: 820px;
margin: 0 auto;
padding: 0 20px 80px;
}
/* ===== SECTION OVERVIEW ===== */
.overview {
background: var(--white);
border-radius: 20px;
border: 1px solid var(--border);
padding: 36px;
margin-bottom: 40px;
box-shadow: 0 4px 20px rgba(13,31,45,0.06);
}
.overview h2 {
font-family: 'Outfit', sans-serif;
font-size: 20px;
font-weight: 700;
margin-bottom: 24px;
color: var(--dark);
}
.steps-overview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
}
.step-overview-item {
background: var(--bg);
border-radius: 14px;
padding: 20px 16px;
text-align: center;
border: 1px solid var(--border);
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
}
.step-overview-item:hover {
border-color: var(--primary);
background: var(--primary-light);
transform: translateY(-2px);
}
.step-num-badge {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
}
.step-overview-item .icon { font-size: 24px; margin-bottom: 8px; }
.step-overview-item h3 { font-size: 13px; font-weight: 700; color: var(--dark); margin-bottom: 4px; }
.step-overview-item p { font-size: 11px; color: var(--muted); }
/* ===== STEP SECTIONS ===== */
.step-section {
margin-bottom: 48px;
}
.step-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.step-num-large {
width: 56px; height: 56px;
min-width: 56px;
border-radius: 16px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(75,163,216,0.35);
}
.step-header-text h2 {
font-family: 'Outfit', sans-serif;
font-size: 24px;
font-weight: 700;
color: var(--dark);
}
.step-header-text p {
font-size: 13px;
color: var(--muted);
margin-top: 3px;
}
/* ===== INSTRUCTION CARD ===== */
.instruction-card {
background: var(--white);
border-radius: 20px;
border: 1px solid var(--border);
overflow: hidden;
box-shadow: 0 4px 20px rgba(13,31,45,0.06);
}
.instruction-item {
padding: 28px 32px;
border-bottom: 1px solid var(--border);
display: flex;
gap: 20px;
align-items: flex-start;
}
.instruction-item:last-child { border-bottom: none; }
.item-num {
width: 32px; height: 32px;
min-width: 32px;
border-radius: 50%;
background: var(--primary-light);
color: var(--primary-dark);
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.item-content { flex: 1; }
.item-content h3 {
font-size: 16px;
font-weight: 700;
color: var(--dark);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.item-content p {
font-size: 14px;
color: var(--muted);
line-height: 1.75;
margin-bottom: 12px;
}
.item-content p:last-child { margin-bottom: 0; }
/* ===== VISUAL MOCKUP ===== */
.mockup {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 14px;
padding: 20px;
margin-top: 16px;
font-size: 13px;
}
.mockup-bar {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 14px;
}
.mockup-dot {
width: 10px; height: 10px;
border-radius: 50%;
}
.mockup-url {
flex: 1;
background: white;
border: 1px solid var(--border);
border-radius: 6px;
padding: 5px 12px;
font-size: 12px;
color: var(--muted);
}
.mockup-content {
background: white;
border-radius: 10px;
padding: 18px;
border: 1px solid var(--border);
}
/* UI ELEMENTS IN MOCKUP */
.ui-menubar {
display: flex;
gap: 20px;
border-bottom: 1px solid var(--border);
padding-bottom: 12px;
margin-bottom: 16px;
}
.ui-menu-item {
font-size: 13px;
color: var(--muted);
padding: 4px 8px;
border-radius: 6px;
}
.ui-menu-item.active {
background: var(--primary-light);
color: var(--primary-dark);
font-weight: 700;
}
.ui-menu-item.highlight {
background: #fff3cd;
color: #856404;
font-weight: 700;
}
.ui-button {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
}
.ui-button.blue { background: var(--primary); color: white; }
.ui-button.gray { background: var(--border); color: var(--text); }
.ui-button.red { background: #ef4444; color: white; }
.ui-button.green { background: var(--success); color: white; }
.ui-select {
border: 1.5px solid var(--border);
border-radius: 8px;
padding: 8px 12px;
font-size: 13px;
color: var(--text);
background: white;
}
.ui-label { font-size: 13px; font-weight: 700; color: var(--text); display: block; margin-bottom: 6px; }
.ui-input {
width: 100%;
border: 1.5px solid var(--primary);
border-radius: 8px;
padding: 8px 12px;
font-size: 13px;
background: white;
box-shadow: 0 0 0 3px rgba(75,163,216,0.12);
}
.ui-row { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.ui-row:last-child { margin-bottom: 0; }
.ui-badge {
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 6px;
}
.ui-badge.yellow { background: #fef3c7; color: #92400e; }
.ui-badge.blue { background: var(--primary-light); color: var(--primary-dark); }
.ui-badge.green { background: #d1fae5; color: #065f46; }
/* ARROWS */
.arrow-down {
text-align: center;
color: var(--primary);
font-size: 24px;
padding: 8px 0;
}
/* ===== CODE BLOCK ===== */
.code-block {
background: var(--code-bg);
border-radius: 12px;
overflow: hidden;
margin-top: 16px;
}
.code-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
background: rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.code-header span {
font-size: 12px;
color: rgba(255,255,255,0.5);
font-family: monospace;
}
.copy-btn {
font-size: 12px;
color: rgba(255,255,255,0.6);
background: rgba(255,255,255,0.08);
border: none;
border-radius: 6px;
padding: 5px 12px;
cursor: pointer;
transition: all 0.2s;
}
.copy-btn:hover { background: rgba(255,255,255,0.15); color: white; }
pre {
padding: 20px 24px;
overflow-x: auto;
font-size: 13px;
line-height: 1.7;
color: #a8d4f0;
}
.c-comment { color: #6b8a9c; }
.c-key { color: #79b8ff; }
.c-string { color: #f8a169; }
.c-num { color: #b5d9f5; }
/* ===== ALERT BOXES ===== */
.alert {
border-radius: 12px;
padding: 16px 20px;
margin-top: 16px;
display: flex;
gap: 12px;
align-items: flex-start;
font-size: 14px;
line-height: 1.65;
}
.alert-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.alert.info { background: var(--primary-light); border: 1px solid rgba(75,163,216,0.3); color: #1a4060; }
.alert.warning { background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; }
.alert.success { background: #d1fae5; border: 1px solid #6ee7b7; color: #064e3b; }
.alert strong { font-weight: 700; display: block; margin-bottom: 4px; }
/* ===== HIGHLIGHT TEXT ===== */
.hl {
background: linear-gradient(transparent 60%, rgba(75,163,216,0.25) 60%);
font-weight: 700;
}
.hl-red {
background: linear-gradient(transparent 60%, rgba(233,30,140,0.2) 60%);
font-weight: 700;
}
/* ===== TAG ===== */
.tag {
display: inline-block;
font-size: 11px;
font-weight: 700;
padding: 2px 10px;
border-radius: 100px;
vertical-align: middle;
margin-left: 6px;
}
.tag.required { background: #fee2e2; color: #991b1b; }
.tag.important { background: #fef3c7; color: #92400e; }
.tag.optional { background: var(--border); color: var(--muted); }
/* ===== SPREADSHEET MOCKUP ===== */
.ss-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
background: white;
border-radius: 8px;
overflow: hidden;
}
.ss-table th {
background: #4BA3D8;
color: white;
padding: 8px 10px;
text-align: left;
font-weight: 700;
white-space: nowrap;
}
.ss-table td {
padding: 7px 10px;
border: 1px solid #e8f0f7;
color: #334155;
white-space: nowrap;
}
.ss-table tr:nth-child(even) td { background: #f8fbff; }
.ss-status {
display: inline-block;
font-size: 11px;
font-weight: 700;
padding: 2px 10px;
border-radius: 6px;
background: #fef3c7;
color: #92400e;
}
/* ===== DEPLOY SETTING ===== */
.setting-list {
list-style: none;
margin-top: 16px;
}
.setting-list li {
display: flex;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid var(--border);
font-size: 14px;
align-items: center;
}
.setting-list li:last-child { border-bottom: none; }
.setting-key {
width: 160px;
min-width: 160px;
font-weight: 700;
color: var(--muted);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.setting-val {
flex: 1;
color: var(--text);
}
.setting-val .value-box {
display: inline-flex;
align-items: center;
gap: 6px;
background: #d1fae5;
color: #064e3b;
font-weight: 700;
padding: 4px 14px;
border-radius: 8px;
font-size: 13px;
}
/* ===== COMPLETION ===== */
.completion-card {
background: linear-gradient(135deg, var(--dark), #0e3a5a);
border-radius: 20px;
padding: 48px 40px;
text-align: center;
color: white;
margin-top: 16px;
}
.completion-card h2 {
font-family: 'Outfit', sans-serif;
font-size: 28px;
font-weight: 900;
margin-bottom: 16px;
}
.completion-card h2 span { color: var(--primary); }
.completion-card p { color: rgba(255,255,255,0.65); font-size: 14px; line-height: 1.75; }
.checklist {
list-style: none;
text-align: left;
max-width: 440px;
margin: 28px auto 0;
display: grid;
gap: 12px;
}
.checklist li {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
padding: 14px 18px;
font-size: 14px;
color: rgba(255,255,255,0.85);
}
.checklist li .check { color: var(--success); font-size: 18px; }
/* ===== FOOTER ===== */
.footer {
text-align: center;
padding: 40px 20px;
color: var(--muted);
font-size: 13px;
}
.footer strong {
font-family: 'Outfit', sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--text);
display: block;
margin-bottom: 6px;
}
/* ===== NAV ===== */
.toc {
position: sticky;
top: 20px;
}
@media (max-width: 640px) {
.instruction-item { flex-direction: column; gap: 12px; }
.setting-key { width: 120px; min-width: 120px; font-size: 11px; }
.steps-overview { grid-template-columns: 1fr 1fr; }
.completion-card { padding: 32px 20px; }
}
</style>
</head>
<body>
<!-- HEADER -->
<div class="header">
<div class="header-inner">
<div class="header-badge">Setup Guide</div>
<h1>採用フォーム<br><span>セットアップガイド</span></h1>
<p>PCが苦手な方でも大丈夫！<br>画像付きで丁寧に説明します。</p>
<div class="header-time">⏱️ 所要時間：約15〜20分</div>
</div>
</div>
<div class="wave"></div>
<div class="main">
<!-- OVERVIEW -->
<div class="overview">
<h2>📋 全体の流れ（5ステップ）</h2>
<div class="steps-overview">
<a class="step-overview-item" href="#step1">
<div class="icon">📊</div>
<div class="step-num-badge">1</div>
<h3>スプレッドシート作成</h3>
<p>回答を記録するシートを用意</p>
</a>
<a class="step-overview-item" href="#step2">
<div class="icon">⚙️</div>
<div class="step-num-badge">2</div>
<h3>GASプロジェクト作成</h3>
<p>スクリプトエディタを開く</p>
</a>
<a class="step-overview-item" href="#step3">
<div class="icon">📋</div>
<div class="step-num-badge">3</div>
<h3>コードを貼り付け</h3>
<p>2つのファイルをコピペ</p>
</a>
<a class="step-overview-item" href="#step4">
<div class="icon">🔑</div>
<div class="step-num-badge">4</div>
<h3>IDとメールを設定</h3>
<p>自分の情報を2か所に入力</p>
</a>
<a class="step-overview-item" href="#step5">
<div class="icon">🚀</div>
<div class="step-num-badge">5</div>
<h3>公開・動作確認</h3>
<p>Webアプリとして公開する</p>
</a>
</div>
</div>
<!-- ==================== STEP 1 ==================== -->
<div class="step-section" id="step1">
<div class="step-header">
<div class="step-num-large">1</div>
<div class="step-header-text">
<h2>スプレッドシートを新規作成する</h2>
<p>応募データの保存先となるシートを作ります</p>
</div>
</div>
<div class="instruction-card">
<div class="instruction-item">
<div class="item-num">①</div>
<div class="item-content">
<h3>🌐 Google スプレッドシートを開く</h3>
<p>ブラウザで以下のURLにアクセスしてください。（Googleアカウントでログインしている状態で開いてください）</p>
<div class="code-block">
<div class="code-header">
<span>URL</span>
</div>
<pre style="padding:14px 20px;">https://sheets.google.com</pre>
</div>
</div>
</div>
<div class="instruction-item">
<div class="item-num">②</div>
<div class="item-content">
<h3>➕ 新しいスプレッドシートを作成する</h3>
<p>左上にある「<span class="hl">＋ 空白</span>」ボタンをクリックします。</p>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#ffbe2e;"></div>
<div class="mockup-dot" style="background:#2ac940;"></div>
<div class="mockup-url">sheets.google.com</div>
</div>
<div class="mockup-content">
<p style="font-size:18px;font-weight:700;color:#1A2E3D;margin-bottom:16px;">スプレッドシート</p>
<div style="display:flex;gap:12px;flex-wrap:wrap;">
<div style="width:120px;height:100px;background:linear-gradient(135deg,#4BA3D8,#2E87C8);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;font-size:28px;cursor:pointer;border:3px solid #4BA3D8;box-shadow:0 0 0 3px rgba(75,163,216,0.3);">
<span>＋</span>
<span style="font-size:12px;margin-top:6px;font-weight:700;">空白</span>
</div>
<div style="width:120px;height:100px;background:#f8f9fa;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:12px;border:1px solid #e2e8f0;">テンプレート</div>
</div>
</div>
</div>
</div>
</div>
<div class="instruction-item">
<div class="item-num">③</div>
<div class="item-content">
<h3>✏️ ファイル名をわかりやすい名前に変更する</h3>
<p>左上の「<span class="hl">無題のスプレッドシート</span>」という文字をクリックして、ファイル名を変更しましょう。</p>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#ffbe2e;"></div>
<div class="mockup-dot" style="background:#2ac940;"></div>
<div class="mockup-url">docs.google.com/spreadsheets/d/...</div>
</div>
<div class="mockup-content" style="padding:12px;">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;">
<div style="font-size:24px;">📗</div>
<div>
<div class="ui-input" style="width:280px;max-width:100%;">採用応募管理_NEXT INNOVAITION</div>
<p style="font-size:11px;color:var(--muted);margin-top:4px;">↑ このようなわかりやすい名前にしましょう</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="instruction-item">
<div class="item-num">④</div>
<div class="item-content">
<h3>🔗 URLからスプレッドシートIDをコピーする</h3>
<p>ブラウザのアドレスバーに表示されているURLの中に、<span class="hl-red">スプレッドシートID</span>が含まれています。</p>
<p>以下の形式で表示されているので、<strong>赤い部分</strong>だけをコピーして、どこかにメモしておいてください。</p>
<div class="mockup">
<div class="mockup-content">
<p style="font-size:12px;color:var(--muted);margin-bottom:8px;">📍 アドレスバー</p>
<div style="background:#1e2d3d;border-radius:8px;padding:14px 16px;font-family:monospace;font-size:13px;line-height:1.5;overflow-x:auto;">
<span style="color:#a8d4f0;">https://docs.google.com/spreadsheets/d/</span><span style="background:#E91E8C;color:white;padding:2px 4px;border-radius:4px;font-weight:700;">1aBcDeFgHiJkLmNoPqRsTuVwXyZ123456789</span><span style="color:#a8d4f0;">/edit</span>
</div>
<p style="font-size:12px;color:var(--accent);margin-top:10px;font-weight:700;">↑ ピンク色でハイライトされた部分がスプレッドシートIDです</p>
</div>
</div>
<div class="alert info">
<div class="alert-icon">💡</div>
<div><strong>どこからどこまでが ID？</strong>
<code>/d/</code>の後から、次の<code>/edit</code>の前まで（スラッシュは含まない）がIDです。<br>
長い英数字の文字列になっています。これを後で使います。</div>
</div>
</div>
</div>
</div>
<!-- SPREADSHEET PREVIEW -->
<div class="alert success" style="margin-top:16px;">
<div class="alert-icon">✅</div>
<div><strong>完成後のスプレッドシートイメージ</strong><br>
コードを実行すると、以下のようなヘッダー付きのシートが自動で作られます。</div>
</div>
<div style="overflow-x:auto;margin-top:12px;border-radius:12px;border:1px solid var(--border);">
<table class="ss-table">
<thead>
<tr>
<th>応募日時</th><th>応募職種</th><th>氏名</th><th>メール</th><th>電話番号</th><th>年齢</th><th>都道府県</th><th>スキル</th><th>志望動機</th><th>ステータス</th>
</tr>
</thead>
<tbody>
<tr>
<td>2025/06/01 10:23</td>
<td>AIエンジニア</td>
<td>山田 太郎</td>
<td>yamada@example.com</td>
<td>090-0000-0000</td>
<td>30〜34歳</td>
<td>東京都</td>
<td>Python, GAS...</td>
<td>AIで社会を...</td>
<td><span class="ss-status">未対応</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- ==================== STEP 2 ==================== -->
<div class="step-section" id="step2">
<div class="step-header">
<div class="step-num-large">2</div>
<div class="step-header-text">
<h2>GASプロジェクトを作成する</h2>
<p>スプレッドシートからスクリプトエディタを開きます</p>
</div>
</div>
<div class="instruction-card">
<div class="instruction-item">
<div class="item-num">①</div>
<div class="item-content">
<h3>📗 先ほど作ったスプレッドシートを開く</h3>
<p>STEP 1で作成したスプレッドシートを開いた状態にしてください。</p>
</div>
</div>
<div class="instruction-item">
<div class="item-num">②</div>
<div class="item-content">
<h3>🔧 メニューから「拡張機能」→「Apps Script」を選ぶ</h3>
<p>上部メニューバーの「<span class="hl">拡張機能</span>」をクリックし、表示されたメニューから「<span class="hl">Apps Script</span>」を選択します。</p>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#ffbe2e;"></div>
<div class="mockup-dot" style="background:#2ac940;"></div>
<div class="mockup-url">docs.google.com/spreadsheets/...</div>
</div>
<div class="mockup-content">
<div class="ui-menubar">
<span class="ui-menu-item">ファイル</span>
<span class="ui-menu-item">編集</span>
<span class="ui-menu-item">表示</span>
<span class="ui-menu-item">挿入</span>
<span class="ui-menu-item highlight">拡張機能 ▼</span>
<span class="ui-menu-item">ヘルプ</span>
</div>
<div style="background:white;border:1px solid var(--border);border-radius:8px;padding:8px;display:inline-block;box-shadow:0 4px 12px rgba(0,0,0,0.1);">
<div style="padding:10px 16px;font-size:13px;color:var(--muted);">アドオン</div>
<div style="padding:10px 16px;font-size:13px;background:var(--primary-light);color:var(--primary-dark);font-weight:700;border-radius:6px;">⚙️ Apps Script</div>
<div style="padding:10px 16px;font-size:13px;color:var(--muted);">マクロ</div>
</div>
</div>
</div>
</div>
</div>
<div class="instruction-item">
<div class="item-num">③</div>
<div class="item-content">
<h3>🆕 新しいタブでエディタが開く</h3>
<p>「Apps Script」をクリックすると、新しいタブでスクリプトエディタが開きます。</p>
<div class="mockup">
<div class="mockup-bar">
<div class="mockup-dot" style="background:#ff5f57;"></div>
<div class="mockup-dot" style="background:#ffbe2e;"></div>
<div class="mockup-dot" style="background:#2ac940;"></div>
<div class="mockup-url">script.google.com/...</div>
</div>
<div class="mockup-content">
<p style="font-weight:700;font-size:15px;margin-bottom:12px;">⚙️ Apps Script — 無題のプロジェクト</p>
<div style="display:flex;gap:12px;">
<div style="width:180px;background:var(--bg);border-radius:8px;padding:12px;font-size:12px;">
<p style="font-weight:700;margin-bottom:8px;color:var(--muted);">ファイル</p>
<div style="padding:6px 10px;background:var(--primary-light);border-radius:6px;color:var(--primary-dark);font-weight:700;">📄 コード.gs</div>
</div>
<div style="flex:1;background:var(--code-bg);border-radius:8px;padding:14px;font-family:monospace;font-size:12px;color:#6b8a9c;">
function myFunction() {<br> // ここにコードが入ります<br>}
</div>
</div>
</div>
</div>
<div class="alert info">
<div class="alert-icon">💡</div>
<div><strong>プロジェクト名を変えておこう（任意）</strong><br>
左上の「無題のプロジェクト」をクリックすると名前を変更できます。「採用フォーム」などわかりやすい名前にしておくと便利です。</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==================== STEP 3 ==================== -->
<div class="step-section" id="step3">
<div class="step-header">
<div class="step-num-large">3</div>
<div class="step-header-text">
<h2>コードを貼り付ける</h2>
<p>2つのファイル（Code.gs と index.html）を作成します</p>
</div>
</div>
<div class="instruction-card">
<div class="instruction-item">
<div class="item-num">①</div>
<div class="item-content">
<h3>📄 既存の「コード.gs」の中身を全て削除する</h3>
<p>エディタに最初から表示されているコード（<code>function myFunction() {...}</code>）を<span class="hl">すべて選択して削除</span>してください。</p>
<p>Windowsなら <strong>Ctrl+A</strong> → <strong>Delete</strong>、Macなら <strong>Command+A</strong> → <strong>Delete</strong> で全選択できます。</p>
</div>
</div>
<div class="instruction-item">
<div class="item-num">②</div>
<div class="item-content">
<h3>📋 「Code.gs」の内容を貼り付ける</h3>
<p>配布した「<span class="hl">Code.gs</span>」ファイルの内容を全てコピーして、エディタに貼り付けてください。</p>
<div class="alert warning">
<div class="alert-icon">⚠️</div>
<div><strong>ファイル名を確認！</strong><br>
エディタ左側に「コード.gs」と表示されていることを確認してください。</div>
</div>
</div>
</div>
<div class="instruction-item">
<div class="item-num">③</div>
<div class="item-content">
<h3>➕ 「index.html」ファイルを新規作成する</h3>
<p>左側ファイル一覧の「ファイル」の右にある <span class="hl">＋ ボタン</span>をクリックして、「<strong>HTML</strong>」を選択します。</p>
<div class="mockup">
<div class="mockup-content">
<div style="display:flex;gap:12px;">
<div style="width:200px;background:var(--bg);border-radius:8px;padding:12px;font-size:12px;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
<span style="font-weight:700;color:var(--muted);">ファイル</span>
<span style="background:var(--primary);color:white;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;">＋</span>
</div>
<div style="padding:6px 10px;background:white;border-radius:6px;color:var(--text);margin-bottom:4px;border:1px solid var(--border);">📄 コード.gs</div>
<div style="background:white;border:1px solid var(--border);border-radius:8px;padding:8px;margin-top:4px;">
<div style="padding:7px 10px;font-size:12px;color:var(--muted);">スクリプト (.gs)</div>
<div style="padding:7px 10px;font-size:12px;background:var(--primary-light);color:var(--primary-dark);font-weight:700;border-radius:6px;">🌐 HTML</div>
</div>
</div>
<div style="flex:1;display:flex;flex-direction:column;gap:8px;">
<p style="font-size:12px;color:var(--muted);">ファイル名の入力欄が出てきます</p>
<div style="display:flex;gap:8px;align-items:center;">
<div class="ui-input" style="flex:1;">index</div>
<div class="ui-button blue" style="font-size:12px;">OK</div>
</div>
<p style="font-size:11px;color:var(--accent);font-weight:700;">「.html」は自動でつくので「index」とだけ入力！</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="instruction-item">
<div class="item-num">④</div>
<div class="item-content">
<h3>📋 「index.html」の内容を貼り付ける</h3>
<p>新しく作った「index.html」が選択された状態で、配布した「<span class="hl">index.html</span>」ファイルの内容を全てコピーして貼り付けてください。</p>
<div class="alert warning">
<div class="alert-icon">⚠️</div>
<div><strong>最初から入っているコードを先に全削除！</strong><br>
index.html にも最初からサンプルコードが入っています。<strong>必ず全削除してから</strong>貼り付けてください。</div>
</div>
</div>
</div>
<div class="instruction-item">
<div class="item-num">⑤</div>
<div class="item-content">
<h3>💾 保存する</h3>
<p>Windowsなら <strong>Ctrl+S</strong>、Macなら <strong>Command+S</strong> で保存します。フロッピーディスクのアイコン💾をクリックしても保存できます。</p>
<div class="alert success">
<div class="alert-icon">✅</div>
<div>左側のファイル一覧に <strong>コード.gs</strong> と <strong>index.html</strong> の2つが表示されていれば完了です！</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==================== STEP 4 ==================== -->
<div class="step-section" id="step4">
<div class="step-header">
<div class="step-num-large">4</div>
<div class="step-header-text">
<h2>IDとメールアドレスを設定する</h2>
<p>Code.gsの冒頭2行を自分の情報に書き換えます</p>
</div>
</div>
<div class="instruction-card">
<div class="instruction-item">
<div class="item-num">①</div>
<div class="item-content">
<h3>📄 「コード.gs」を選択して冒頭を確認する</h3>
<p>左側ファイル一覧で「コード.gs」をクリックして開いてください。ファイルの一番上にこのような行があります。</p>
<div class="code-block">
<div class="code-header">
<span>Code.gs（変更前）</span>
</div>
<pre><span class="c-key">const</span> SPREADSHEET_ID = <span class="c-string">''</span>; <span class="c-comment">// ← スプレッドシートのIDを入力</span>
<span class="c-key">const</span> SHEET_NAME = <span class="c-string">'採用応募一覧'</span>;
<span class="c-key">const</span> NOTIFY_EMAIL = <span class="c-string">''</span>; <span class="c-comment">// ← 通知先メールアドレスを入力</span></pre>
</div>
</div>
</div>
<div class="instruction-item">
<div class="item-num">②</div>
<div class="item-content">
<h3>🔑 スプレッドシートIDを入力する <span class="tag required">必須</span></h3>
<p>STEP 1でコピーしておいたスプレッドシートIDを、<code>''</code>（シングルクォート）の間に貼り付けます。</p>
<div class="code-block">
<div class="code-header">
<span>Code.gs（変更後）</span>
</div>
<pre><span class="c-key">const</span> SPREADSHEET_ID = <span class="c-string">'1aBcDeFgHiJkLmNoPqRsTuVwXyZ123456789'</span>; <span class="c-comment">// ← ここに貼り付け</span>
<span class="c-key">const</span> SHEET_NAME = <span class="c-string">'採用応募一覧'</span>;
<span class="c-key">const</span> NOTIFY_EMAIL = <span class="c-string">''</span>;</pre>
</div>
<div class="alert warning">
<div class="alert-icon">⚠️</div>
<div><strong>シングルクォート（'）は消さないで！</strong><br>
IDの前後にある <code>'</code> は残したまま、その間にIDを貼り付けてください。</div>
</div>
</div>
</div>
<div class="instruction-item">
<div class="item-num">③</div>
<div class="item-content">
<h3>📧 通知先メールアドレスを入力する <span class="tag optional">任意</span></h3>
<p>応募があったときにメール通知を受け取りたい場合は、<code>NOTIFY_EMAIL</code> にメールアドレスを入力します。不要な場合は空のままで大丈夫です。</p>
<div class="code-block">
<div class="code-header">
<span>Code.gs</span>
</div>
<pre><span class="c-key">const</span> NOTIFY_EMAIL = <span class="c-string">'your-email@gmail.com'</span>; <span class="c-comment">// ← 通知を受け取るメール</span></pre>
</div>
</div>
</div>
<div class="instruction-item">
<div class="item-num">④</div>
<div class="item-content">
<h3>💾 保存する</h3>
<p><strong>Ctrl+S</strong>（Mac: <strong>Command+S</strong>）で保存してください。</p>
</div>
</div>
</div>
</div>
<!-- ==================== STEP 5 ==================== -->
<div class="step-section" id="step5">
<div class="step-header">
<div class="step-num-large">5</div>
<div class="step-header-text">
<h2>Webアプリとして公開する</h2>
<p>フォームのURLを発行して、誰でもアクセスできるようにします</p>
</div>
</div>
<div class="instruction-card">
<div class="instruction-item">
<div class="item-num">①</div>
<div class="item-content">
<h3>🚀 右上の「デプロイ」ボタンをクリック</h3>
<p>エディタ右上にある青い「<span class="hl">デプロイ</span>」ボタンをクリックし、「<span class="hl">新しいデプロイ</span>」を選択します。</p>
<div class="mockup">
<div class="mockup-content">
<div style="display:flex;justify-content:flex-end;gap:10px;align-items:center;">
<div class="ui-button gray">▶ 実行</div>
<div style="position:relative;">
<div class="ui-button blue">🚀 デプロイ ▼</div>
<div style="position:absolute;right:0;top:100%;margin-top:4px;background:white;border:1px solid var(--border);border-radius:10px;padding:8px;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,0.1);z-index:1;">
<div style="padding:10px 16px;font-size:13px;background:var(--primary-light);color:var(--primary-dark);font-weight:700;border-radius:6px;">＋ 新しいデプロイ</div>
<div style="padding:10px 16px;font-size:13px;color:var(--muted);">デプロイの管理</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="instruction-item">
<div class="item-num">②</div>
<div class="item-content">
<h3>⚙️ 種類を「ウェブアプリ」に設定する</h3>
<p>「新しいデプロイ」ダイアログが開いたら、「<span class="hl">種類の選択（歯車アイコン）</span>」をクリックして、「<span class="hl">ウェブアプリ</span>」を選択します。</p>
<div class="mockup">
<div class="mockup-content">
<div style="border:2px solid var(--primary);border-radius:14px;padding:24px;max-width:460px;">
<p style="font-weight:700;font-size:16px;margin-bottom:20px;">新しいデプロイ</p>
<div style="margin-bottom:16px;">
<p style="font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:700;">種類を選択 ⚙️</p>
<div style="display:flex;gap:10px;flex-wrap:wrap;">
<div style="padding:10px 16px;background:var(--primary);color:white;border-radius:8px;font-size:13px;font-weight:700;">🌐 ウェブアプリ ✓</div>
<div style="padding:10px 16px;background:var(--bg);border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--muted);">APIを実行</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="instruction-item">
<div class="item-num">③</div>
<div class="item-content">
<h3>🔐 アクセス権限を設定する <span class="tag important">重要</span></h3>
<p>以下の通りに設定してください。特に「<span class="hl-red">アクセスできるユーザー</span>」の設定が最も重要です。</p>
<ul class="setting-list" style="background:var(--bg);border:1px solid var(--border);border-radius:14px;list-style:none;overflow:hidden;margin-top:12px;">
<li>
<span class="setting-key">説明</span>
<span class="setting-val">採用フォーム公開<br><span style="font-size:11px;color:var(--muted);">（何でもOK。バージョン管理用のメモです）</span></span>
</li>
<li>
<span class="setting-key">次のユーザーとして実行</span>
<span class="setting-val"><span class="value-box">✅ 自分（自分のGoogleアカウント）</span></span>
</li>
<li>
<span class="setting-key">アクセスできるユーザー</span>
<span class="setting-val">
<span class="value-box">✅ 全員</span>
<br><span style="font-size:12px;color:var(--accent);font-weight:700;margin-top:4px;display:block;">⚠️ ここを「全員」にしないと応募者がフォームを開けません！</span>
</span>
</li>
</ul>
</div>
</div>
<div class="instruction-item">
<div class="item-num">④</div>
<div class="item-content">
<h3>🔒 権限の承認を行う</h3>
<p>「デプロイ」ボタンを押すと、Googleから権限の承認を求められます。以下の手順で進めてください。</p>
<div style="background:var(--bg);border-radius:14px;border:1px solid var(--border);padding:20px;margin-top:12px;">
<div style="display:flex;flex-direction:column;gap:14px;">
<div style="display:flex;gap:12px;align-items:flex-start;">
<div style="background:var(--primary);color:white;border-radius:50%;width:26px;height:26px;min-width:26px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;">1</div>
<div><p style="font-size:14px;font-weight:700;margin-bottom:3px;">「アクセスを承認」をクリック</p><p style="font-size:13px;color:var(--muted);">ポップアップが出てくるので「アクセスを承認」を押してください</p></div>
</div>
<div style="display:flex;gap:12px;align-items:flex-start;">
<div style="background:var(--primary);color:white;border-radius:50%;width:26px;height:26px;min-width:26px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;">2</div>
<div><p style="font-size:14px;font-weight:700;margin-bottom:3px;">Googleアカウントを選択</p><p style="font-size:13px;color:var(--muted);">自分のGmailアドレスを選択してください</p></div>
</div>
<div style="display:flex;gap:12px;align-items:flex-start;">
<div style="background:var(--warning);color:white;border-radius:50%;width:26px;height:26px;min-width:26px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;">3</div>
<div>
<p style="font-size:14px;font-weight:700;margin-bottom:3px;">「このアプリはGoogleで確認されていません」が表示された場合</p>
<p style="font-size:13px;color:var(--muted);">これは自分で作ったアプリのため正常です。「詳細」→「（安全ではないページ）に移動」をクリックして進めてください。</p>
</div>
</div>
<div style="display:flex;gap:12px;align-items:flex-start;">
<div style="background:var(--success);color:white;border-radius:50%;width:26px;height:26px;min-width:26px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;">4</div>
<div><p style="font-size:14px;font-weight:700;margin-bottom:3px;">「許可」をクリック</p><p style="font-size:13px;color:var(--muted);">最後に「許可」ボタンを押せば完了です</p></div>
</div>
</div>
</div>
<div class="alert info" style="margin-top:12px;">
<div class="alert-icon">💡</div>
<div>この承認は初回のみ必要です。2回目以降は表示されません。</div>
</div>
</div>
</div>
<div class="instruction-item">
<div class="item-num">⑤</div>
<div class="item-content">
<h3>🔗 フォームのURLをコピーする</h3>
<p>デプロイが完了すると「ウェブアプリのURL」が表示されます。このURLが採用フォームのアドレスです。</p>
<div class="mockup">
<div class="mockup-content">
<div style="border:2px solid var(--success);border-radius:12px;padding:20px;">
<p style="font-weight:700;font-size:14px;color:var(--success);margin-bottom:12px;">✅ デプロイが完了しました</p>
<p style="font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:700;">ウェブアプリのURL</p>
<div style="background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px;font-family:monospace;font-size:12px;color:var(--primary-dark);word-break:break-all;margin-bottom:12px;">
https://script.google.com/macros/s/AKfycb<span style="color:var(--accent);">xxxxxxxxxxxxxxxxxxxxxxxx</span>/exec
</div>
<div style="display:flex;gap:8px;">
<div class="ui-button blue" style="font-size:12px;">📋 コピー</div>
<div class="ui-button gray" style="font-size:12px;">完了</div>
</div>
</div>
</div>
</div>
<div class="alert success">
<div class="alert-icon">🎉</div>
<div><strong>このURLが採用フォームのURLです！</strong><br>
採用ページやSNS・メールにこのURLを貼り付ければ、応募者がフォームにアクセスできるようになります。</div>
</div>
</div>
</div>
<div class="instruction-item">
<div class="item-num">⑥</div>
<div class="item-content">
<h3>✅ 動作確認をする</h3>
<p>URLを開いて、実際にテスト応募をしてみましょう。スプレッドシートにデータが記録されれば、セットアップ完了です！</p>
<div style="background:var(--bg);border-radius:14px;border:1px solid var(--border);padding:20px;margin-top:12px;">
<p style="font-weight:700;font-size:14px;margin-bottom:14px;">確認チェックリスト</p>
<div style="display:flex;flex-direction:column;gap:10px;">
<div style="display:flex;gap:10px;align-items:center;font-size:13px;"><span style="font-size:18px;">☐</span> フォームが正しく表示される</div>
<div style="display:flex;gap:10px;align-items:center;font-size:13px;"><span style="font-size:18px;">☐</span> 必須項目を空にしたときエラーが表示される</div>
<div style="display:flex;gap:10px;align-items:center;font-size:13px;"><span style="font-size:18px;">☐</span> テスト送信後に「ありがとうございます」画面が表示される</div>
<div style="display:flex;gap:10px;align-items:center;font-size:13px;"><span style="font-size:18px;">☐</span> スプレッドシートにデータが記録されている</div>
<div style="display:flex;gap:10px;align-items:center;font-size:13px;"><span style="font-size:18px;">☐</span> 通知メールが届いている（設定した場合）</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==================== COMPLETION ==================== -->
<div class="step-section">
<div class="completion-card">
<h2>🎉 セットアップ<span>完了</span>！</h2>
<p>お疲れさまでした。採用フォームが稼働しています。<br>応募があるとスプレッドシートに自動で記録されます。</p>
<ul class="checklist">
<li><span class="check">✅</span> スプレッドシートが自動で作成される</li>
<li><span class="check">✅</span> 応募があると即座にデータが記録される</li>
<li><span class="check">✅</span> メール通知で見逃しゼロ（設定時）</li>
<li><span class="check">✅</span> ステータス管理で選考状況を一元管理</li>
</ul>
</div>
<!-- TROUBLESHOOT -->
<div style="margin-top:32px;">
<h2 style="font-family:'Outfit',sans-serif;font-size:20px;font-weight:700;color:var(--dark);margin-bottom:16px;">🔧 よくあるトラブルと対処法</h2>
<div class="instruction-card">
<div class="instruction-item">
<div class="item-content">
<h3>❓ フォームを開くと「このアプリはブロックされています」と表示される</h3>
<p>権限の設定が「全員」になっていない可能性があります。STEP5の③に戻って、アクセスできるユーザーを「全員」に設定し直してください。</p>
</div>
</div>
<div class="instruction-item">
<div class="item-content">
<h3>❓ 送信してもスプレッドシートにデータが記録されない</h3>
<p>スプレッドシートIDが間違っている可能性があります。Code.gsの1行目のIDを確認してください。シングルクォート（'）の間に正確に貼り付けられているか確認しましょう。</p>
</div>
</div>
<div class="instruction-item">
<div class="item-content">
<h3>❓ コードを修正した後、フォームに反映されない</h3>
<p>コードを変更した場合は、再度「デプロイ → 新しいデプロイ」を実行する必要があります。同じURLでは古いバージョンが表示されています。</p>
</div>
</div>
<div class="instruction-item">
<div class="item-content">
<h3>❓ 「このアプリはGoogleで確認されていません」が怖い</h3>
<p>これは自分で作ったアプリに必ず表示されるものです。悪意のあるアプリではなく、Googleの審査を受けていない個人製アプリというだけです。安全に進めて大丈夫です。</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<div class="footer">
<strong>NEXT INNOVAITION株式会社</strong>
採用フォーム セットアップガイド<br>
© 2025 NEXT INNOVAITION Co., Ltd. All rights reserved.
</div>
<script>
// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', e => {
e.preventDefault();
const target = document.querySelector(a.getAttribute('href'));
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
});
});
</script>
</body>
</html>
コメント