【サイト制作入門】NotionテンプレートとNotionFormsで採用サイトを制作してみよう

Home > TECH BLOG > 【サイト制作入門】NotionテンプレートとNotionFormsで採用サイトを制作してみよう
公開日:2022年8月24日 更新日:2022年8月24日
著者:藤澤勇樹 (FUJISAWA Yuki)

記事概要


この記事は、NotionテンプレートとNotionFormsで採用サイト制作&公開する方法を解説します。

Notionテンプレートとは


Notionのテンプレートとは、コピーして自分、もしくは自社の用途にアレンジして使えるページのことです。テンプレートを使うことで、サイトを制作する手間を省くと同時に必要なコンテンツを効率的に作ることができます。例えば、タスク管理や読書管理などのテンプレートがあります。
以下、公式サイトのテンプレートギャラリーです。ここに数多くのテンプレートが公開されています。

利用するテンプレート紹介

今回は、公式サイトのテンプレートギャラリーの中から「採用サイト」テンプレートと「応募者管理」テンプレートの2つを使います。

NotionFormsとは


Notionのサイト上のフォームから送信した情報をNotionデータベースに連携させることができるサービスです。フォームも作成することができます。
有料プランもありますが、無料でも十分なフォーム機能を利用することができます。

採用サイトと応募者管理の完成版


完成版のサンプルページです。以下、サンプルページをゴールとして作成方法を解説します。
*実際には募集してないのでご注意ください
サンプルページのアニメーションはこちら
採用サイトと応募者管理の完成版サンプルページのアニメーション
採用サイトと応募者管理の完成版サンプルページのアニメーション

採用サイトページ

【完成版】wywy合同会社 採用サイト

応募者管理ページ

作成準備


  • NotionFormsアカウント(無料プランでOK)

採用サイトの作成手順


以下、手順1〜6までのアニメーションはこちら
採用サイトの作成手順1から6までのアニメーション
採用サイトの作成手順1から6までのアニメーション
  1. 「採用サイト」テンプレートをコピーする
  1. 会社名を変更する
  1. アイコンとカバー画像(メインビジュアル)を変更する
  1. 「事業内容」と「ミッション」の文言を変更する
  1. 「事業内容」の資料をYouTubeに変更する
  1. 「社員一覧」
    1. 社員画像と名前を変更する
    2. 役職プロパティを編集する
    3. 各社員に役職を設定する
以下、手順7のアニメーションはこちら
採用サイトの作成手順7のアニメーション
採用サイトの作成手順7のアニメーション
  1. 「募集一覧」の職種、勤務地のプロパティを変更する

応募者管理ページの作成手順


以下、手順1〜8のアニメーションはこちら
  1. 応募職種プロパティの編集
  1. 勤務地プロパティの編集
  1. スキルプロパティの編集
  1. Webサイトプロパティの削除
    1. 不要なため(各自判断お願いします)
  1. 添付ファイルプロパティの削除
    1. 不要なため(各自判断お願いします)
  1. 採用担当を自社ユーザーに変更
  1. エンジニアリングビューの削除
    1. 不要なビューのため(各自判断お願いします)

応募フォーム(NotionForms)の作成手順


以下、手順1〜7のアニメーションはこちら
応募フォーム(NotionForms)の作成手順1〜7のアニメーション
応募フォーム(NotionForms)の作成手順1〜7のアニメーション
  1. NotionFormsにログインする
  1. Notionと連携する
    1. 「Login with Notion」クリック > ページを選択する > 「応募者管理」をONにする
  1. 応募フォームを作成する
    1. 応募フォームを作成する
      応募フォームを作成する
  1. フォームのリンクをコピーする
    1. フォームのリンクをコピーする
      フォームのリンクをコピーする
  1. 採用サイトに「埋め込みを作成」でペーストする
    1. 採用サイトに「埋め込みを作成」でペーストする
      採用サイトに「埋め込みを作成」でペーストする
  1. 応募フォームを入力して「Submit」する
  1. 募集者管理ページに応募データが追加されたことを確認する
    1. 募集者管理ページに応募データが追加されたことを確認する
      募集者管理ページに応募データが追加されたことを確認する

サイト公開


  • 採用ページが完成しましたら「共有設定をON」にして公開しましょう
    • *「応募者管理ページ」は社内用なので共有しないでください

まとめ


  • 採用サイトの作成手順
  • 応募者管理ページの作成手順
  • 応募フォーム(NotionForms)
以上、3つ作成手順をアニメーションも合わせて解説してみましたがいかがだったでしょうか。
NotionテンプレートとNotionFormsを上手く活用すれば、HTML/CSSのスキル不要でサイトの制作&公開できるので、是非試してみていただければ幸いです。

【参考資料】Notionによる採用サイト事例