見出し画像

Notionでホームページの原型を作ろう

はじめに

こんにちは ザッキーラボのザッキーです.

みなさんはホームページを作ったことがありますか.
私はむかしwixなどで制作したことがあり,現在はNotionを使って作っています.

Notionとは・・・と説明しようとするととても機能が多すぎて一言で言い表すのは難しいのですが,ざっくりというと文章・表・データベースなど様々な方法を駆使してメモを取ってまとめたりすることができるアプリです.

そのNotionでホームページを作る方法はいくつかあります.
今回はまず最初にNotion上でホームページの内容を作る方法について説明します.ホームページに特化した内容となっていますが,他の用途にも使えると思います.

私はWindows,iPad,iPhoneでNotionを使っていますが編集はほとんどWindowsで行っているので,Windows環境での説明となります.

また,別の記事で詳しくは説明しますがホームページはPotionという別のサービスを使って公開しています.
そちらの記事が公開されたらそちらもごらんください.

アプリを入れてアカウントを作る.

この部分についてはだいぶ前にやってしまって覚えていないので割愛させていただきます.
他のアプリと連携させたりする場合はGoogleアカウントと連携させると簡単なことが多いです(私のホームページでは特に関係ありませんが).
それほど難しい操作はなかったと思います.

Notionの基本 ページの作り方

まずNotionでページを作ってみましょう.

まずNotionでは左に細長くページの一覧や設定などをするところ,右側にページを編集する部分があると思います.
左側の「プライベート」と書いているところにポインターをあてると「+」が出てくると思います.そこをクリックしてページを追加しましょう.
(私の画面を載せるとすべてのページが見えてしまうので画像は載せません.ご了承を.)

ページの中身を作っていく

左側にこんなページができたと思います.

まずは「無題」と書いているところに題名を書いていきます.「○○のホームページ」とかですね.

その下にいろいろ書いていてテンプレートとかもあるのですが,私はホームページでは使っていないので「空のページ」というところをクリックして白紙にします.

題名のところにカーソルを合わせるとアイコンの追加・カバー写真の追加・コメントの追加が出てくると思います.
アイコンを設定しておくと記事の一覧を見たときにわかりやすいです.
カバー写真はヘッダーの代わりになるので設定しておくことがおすすめです.
コメント機能はホームページ制作では使わないと思います.

ここからどんどん内容を書いていくのですが使いそうな機能をピックアップして紹介します.

  • テキスト・・・そのまま文章をのベタ打ちです.何も設定しなければテキストになります.

  • ページ・・・子ページを埋め込みします.これでページの階層化ができます.

  • 見出し・・・見出しの大きい文字を書きたいときに使います.

  • 箇条書きリスト・番号付きリスト・・・名前の通りリスト表示にします.

  • トグルリスト・・・クリックすると下にピロンとトグルが出てきます.子ページのリストを表示させたりするのに便利かもしれません.

  • ページリンク・・・ほかで作ったページのリンクをいれるものです.

  • コールアウト・・・アイコンと背景の色が付きます.目立たせたいときや他と差別化したいときに使います.

  • メディア・・・さまざまなものを入れることができます.

  • 階層リンク・・・現在開いているページがどこなのかを表すものです.現在はPotionでは反映されないようです.

  • 同期ブロック・・・ほかのページにも同じ編集内容を反映したいときに使います.フッターとかヘッダーとかをこれで作ると便利です.

  • 〇列・・・横に段落を並べたいときに使います.

  • ページをメンション・・・文字などをクリックするとページに飛ぶようになります.

ほかにもたくさん機能があるのでどれを使えばいいのか最初はわからないかもしれません.
でも実際に使ってみると少しずつ分かってくると思います.
wixなどのホームページビルダーを使ったことがある方は感覚的にわかりやすいかもしれません.

実際に作ったサイトの例がこちらです.
Potionというサービスを使ってアップしています(別記事参照)
よろしければごらんください.
わからないことなどがあればコメントをしていただければ答えられるかもしれません.

よろしければサポートをよろしくお願いします! これからの活動経費としてつかわせていただきます. でも無理はしないでくださいね.