【サイト制作入門】NotionテンプレートとNotionFormsで採用サイトを制作してみよう
公開日:2022年8月24日 更新日:2022年8月24日
記事概要
この記事は、NotionテンプレートとNotionFormsで採用サイト制作&公開する方法を解説します。
Notionテンプレートとは
Notionのテンプレートとは、コピーして自分、もしくは自社の用途にアレンジして使えるページのことです。テンプレートを使うことで、サイトを制作する手間を省くと同時に必要なコンテンツを効率的に作ることができます。例えば、タスク管理や読書管理などのテンプレートがあります。
以下、公式サイトのテンプレートギャラリーです。ここに数多くのテンプレートが公開されています。
利用するテンプレート紹介
今回は、公式サイトのテンプレートギャラリーの中から「採用サイト」テンプレートと「応募者管理」テンプレートの2つを使います。
- 「採用サイト」テンプレート(田原聖悟さん公開)
- 「応募者管理」テンプレート(Notion公式)
NotionFormsとは
Notionのサイト上のフォームから送信した情報をNotionデータベースに連携させることができるサービスです。フォームも作成することができます。
有料プランもありますが、無料でも十分なフォーム機能を利用することができます。
- NotionForms公式サイト
採用サイトと応募者管理の完成版
完成版のサンプルページです。以下、サンプルページをゴールとして作成方法を解説します。
*実際には募集してないのでご注意ください
サンプルページのアニメーションはこちら
![採用サイトと応募者管理の完成版サンプルページのアニメーション](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/wywy/8c727817-c25b-4db4-b21a-ebc8d7685ec9/c9417ff5e142c5403d08eef3cea65676.gif)
採用サイトページ
【完成版】wywy合同会社 採用サイト応募者管理ページ
作成準備
- Notionアカウント(無料プランでOK)
- NotionFormsアカウント(無料プランでOK)
作成方法のアニメーションはこちら
![NotionFormsアカウント作成方法のアニメーション](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/wywy/0c980122-11b1-489b-bf3f-9bbd8890f13b/ed4a24d169e1aa7b65c4720470c64af3.gif)
- Stop Animations
記事中のアニメーションを一時的に停止したい場合は以下、Chrome拡張機能もインストールしてください。「escキー」を押すとアニメーションが一時停止します。
採用サイトの作成手順
以下、手順1〜6までのアニメーションはこちら
![採用サイトの作成手順1から6までのアニメーション](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/wywy/4610644a-ab9b-445e-a410-80c3fa276683/703e4f8c7e20d50315140ce4add8d2c4.gif)
- 「採用サイト」テンプレートをコピーする
- 会社名を変更する
- アイコンとカバー画像(メインビジュアル)を変更する
- 「事業内容」と「ミッション」の文言を変更する
- 「事業内容」の資料をYouTubeに変更する
- 「社員一覧」
- 社員画像と名前を変更する
- 役職プロパティを編集する
- 各社員に役職を設定する
以下、手順7のアニメーションはこちら
![採用サイトの作成手順7のアニメーション](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/wywy/2f89d618-e2a2-4b4f-96c5-2eb37056c10a/45ae01896cc881b7d21656dd18422d78.gif)
- 「募集一覧」の職種、勤務地のプロパティを変更する
応募者管理ページの作成手順
以下、手順1〜8のアニメーションはこちら
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/wywy/323da081-76ed-4bb0-921a-1fb7ab3eb542/381ea76ed11a562d7dedc0f4c61f3756.gif)
- 応募職種プロパティの編集
- 勤務地プロパティの編集
- スキルプロパティの編集
- Webサイトプロパティの削除
- 不要なため(各自判断お願いします)
- 添付ファイルプロパティの削除
- 不要なため(各自判断お願いします)
- 採用担当を自社ユーザーに変更
- エンジニアリングビューの削除
- 不要なビューのため(各自判断お願いします)
応募フォーム(NotionForms)の作成手順
以下、手順1〜7のアニメーションはこちら
![応募フォーム(NotionForms)の作成手順1〜7のアニメーション](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/wywy/dd64b423-4438-489f-a17c-5f74fdd78daa/257b3aec067f1ea979a843c85e7f06a4.gif)
- NotionFormsにログインする
- Notionと連携する
- 「Login with Notion」クリック > ページを選択する > 「応募者管理」をONにする
- 応募フォームを作成する
![応募フォームを作成する](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/wywy/ad6f2fb7-af5f-4fa1-b7ca-ceea91d1f2f2/e4fc14b905a25df08181ed4e91a1a063.png)
- フォームのリンクをコピーする
![フォームのリンクをコピーする](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/wywy/8301fab2-548e-48a8-81b4-dc05428bc455/d27c0c90bfe25771c4694e5d6c94d352.png)
- 採用サイトに「埋め込みを作成」でペーストする
![採用サイトに「埋め込みを作成」でペーストする](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/wywy/12dc0bfd-7e4c-4bc1-9527-7b2f18d23030/309a32668cd6f9cbf51750da00f6a401.png)
- 応募フォームを入力して「Submit」する
- 募集者管理ページに応募データが追加されたことを確認する
![募集者管理ページに応募データが追加されたことを確認する](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/wywy/95ee8926-2328-45ed-a796-fe6fcc603eaa/5586d7aa98fb403e90dc6461f78841ad.png)
サイト公開
- 採用ページが完成しましたら「共有設定をON」にして公開しましょう
*「応募者管理ページ」は社内用なので共有しないでください
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/wywy/bd647c13-b03f-4404-922e-c25c711f6538/47949c35a5059d5e3020ec28350dc81a.png)
まとめ
- 採用サイトの作成手順
- 応募者管理ページの作成手順
- 応募フォーム(NotionForms)
以上、3つ作成手順をアニメーションも合わせて解説してみましたがいかがだったでしょうか。
NotionテンプレートとNotionFormsを上手く活用すれば、HTML/CSSのスキル不要でサイトの制作&公開できるので、是非試してみていただければ幸いです。
【参考資料】Notionによる採用サイト事例
- Notionによる採用サイト事例を4事例を紹介しています。
- Notionによる採用サイトを13事例紹介しています。
- Notionによる採用サイトを50事例紹介しています。
[宣伝] GASプログラミング入門の教材 - Udemy
- 2023年11月時点で、約3,000人の受講生を獲得し、「Udemy Business」に選定されてます。
- 「Udemy Business」とは、Udemyが「企業研修」向けに提供しているサービスのことです。
- Udemyで販売している全ての講座の中から、「企業研修」に提供できる高品質な講座をレビューや内容を加味して厳選していることが特徴のサービスです。
- その「Udemy Business」で、このGAS講座は採用されております。
- 教材の詳細は、以下のUdemyに記載しておりますので内容ご確認ください
- 以下のバナーから購入すると、通常、定価27,800円が1,500円に割引される特別クーポンが適用されます!
- 有効期限は、です。