見出し画像

Web小説書きがNotionで個人サイト兼ポートフォリオを作ってみた。


はじめに

私はカクヨムなどに投稿している自作の小説をまとめたポートフォリオ的な個人サイトを、2020年頃から運営しているWeb小説書きです。

さらに個人サイトとは別に、利用しているWebサービスや経歴などをまとめたプロフィールサイトも持っていました。

個人サイトの雰囲気を保つために細々としたことは別のところにまとめておきたいと思っていたから、当時は二つのサイトを使い分けていました。

でも結局、個人サイトよりもプロフィールサイトを使うことが増えてきたので、だったらもう個人サイトとプロフィールサイトを一緒にしてしまった方がいいのではないかと思い、最近めでたく統合しました。

新しく作った個人サイト兼ポートフォリオは、多機能ワークスペースツールであるNotionNotionサイトという機能を使って作っています。

Notionは元々自作小説の設定をまとめるのに使っていたのですが、Notionサイトもかなり便利でした。
ただNotionはなんでも出来すぎるので、自分に必要な機能を見極めるのがちょっと難しかったりします。

Web小説書きが個人サイト兼ポートフォリオを作るときには、Notionのどこをどう触れば良かったのか。

あくまで自分の場合の話ですが、ここに覚え書き代わりに使い方のポイントをまとめたいと思います。

1 基本はテキストリンクで見てほしいものをまとめる

自己紹介とSNSリンク

まずはタイトルに自分の名前を入れて、そのすぐ下にはSNSのリンクと自己紹介文を入れました。SNSのリンクは太文字にしてあります。
文章に自由にリンク貼れるのが便利ですね。

ヘッダーには愛用してる素材集からイラストをお借りしてきた画像を使いましたが、ページ全体のアイコンは設定しませんでした。
ここは好みの問題ですが、私はアイコンあるとごちゃごちゃしてる印象になるのでやめました。

自己紹介の次は、最新情報としてnoteの記事のURLをWebブックマークの形で埋め込みました。

Notionでのリンクの貼り方は、下記の公式ヘルプ記事が詳しいです。

2 コールアウトでメリハリを付ける

各種リンクのまとめ

SNS以外のまとめたいリンクは、コールアウトという表示方法を使ってメリハリをつけてまとめました。

コールアウトを使う

コールアウトは枠線をつけたり、アイコンをつけたりできる機能で、画面にワンポイントほしいときに便利です。

3 補足的な情報はNotionで別のページをつくる

サブページにまとめた経歴

詳しい経歴とか、そこまで重要じゃないサイトのアカウントとか、細かい情報はサブページを作ってまとめました。

(※ サブページも他のテキストリンクと一緒にまとめたかったので、サブページとしてのアイコン付きの見出しはトグルで隠しました)

トグルで見出しを非表示にする

4 作品一覧はデータベースで作る

作品一覧

作品一覧は表示画像も込みでデータベースでまとめて、ギャラリー表示のインラインデータベースとして自己紹介文やリンク一覧と一緒にまとめました。

読み込みが遅くならないように、25ページで読み込み制限をかけてあります。

読み込み制限をかける

またジャンルや長さ、執筆した順番などの情報もデータベースに入れて、並び替えや絞り込みもできるようにしました。

作品一覧のデータベース

表紙画像そのものは、ヘッダーと同じ加藤木麻莉先生の素材集の画像に無料デザインツールのCanvaで文字入れして作っています。

5 カスタム絵文字で情報をより見やすくする

Notionのカスタム絵文字機能を使うと、テキスト内に好きな画像を配置することができます。

私はSNSやWebサービスのロゴアイコンをカスタム絵文字として登録して、テキストリンクの近くに置いてリンク先をわかりやすくしました。

ロゴアイコンがあることで視覚的に把握しやすくなる
サイトTOPにもカスタム絵文字のロゴアイコン

また、データベースの項目名にカスタム絵文字を使っても便利です。
私は「新作」と「更新」のカスタム絵文字を作って、最新情報がわかりやすいようにしてもよいかもしれません。

「新作」と「更新」のカスタム絵文字を使ったデーターベース

(2025/12/21追記)

6 いかにもNotionっぽい雰囲気にしたくない場合は

サブページの見出しと挿入画像だけで作ったページの例

自分の場合はNotionらしさのあるポートフォリオサイトにしましたが、いかにもNotionっぽい雰囲気にしたくない場合は、アイコン画像だけでなくヘッダー画像も設定せずに、サブページの見出しと挿入画像だけのシンプルなTOPページを作っても良いかもしれません。
どことなく古の個人サイトっぽいデザインにもできるので、懐古趣味の方にもおすすめです。

7 スマホでの表示を確認する

NotionはPCやスマホなど様々な画面のサイズに合った表示ができるレスポンシブデザインに対応しているのですが、スマホでの表示が微妙なこともあるので確認が必要です。

スマホでの表示

8 リンクカードの問題は時間が解決することも

Notionはリンクカードが綺麗に表示されないことがよくあるのですが、私の場合は諦めて放置してたら知らないうちに良い感じの表示になってました。

どうしてもどうにかしたい方は、解決策をギリギリまで考えた方の動画あるのでこちらを参考にするとよいかもしれません。

また、この動画の制作者の方のブログ記事もNotionでの個人サイト制作の参考になるのでおすすめです。

9 公開時は「テンプレートとして複製」と「ネット検索の許可」のオンオフに注意

公開設定から公開する

完成したら共有ボタンからWebサイトとして公開するわけですが、公開設定はデフォルトで「テンプレートとして複製」がオン、「ネット検索の許可」はオフになっているので注意です。
他の人も自由に複製できるテンプレートとして公開するつもりはない場合は「テンプレートとして複製」はオフにし、またGoogle等の検索サイトに検索結果に表示されたい場合は「ネット検索の許可」はオンにしてください。

こちらの公開設定は非公開にするたびにリセットされるので、その点も要注意です。

おわりに

こんな感じでいろいろいじった結果、出来上がった個人サイト兼ポートフォリオがこちらです。

情報がさっと一覧できる今風のサイトになっていると思うので、ぜひ見てもらえると嬉しいです。

私はWixPotofuBentoなど様々なWebサービスを試し、理想のポートフォリオサービスを探してさまよい続けてきました。

ただ私がいろんなサイトを試さなきゃいけなかったのは、サービスがEOL状態になってしまったとか満足か不満足か以外の理由も結構あるので、ユーザーが多くてアプデも頻繁にあって、代わりがない感じのサービスを提供してくれているNotionにはちょっとした安心感を覚えています。

デザインに凝らず、ただ情報を見やすくまとめたいだけの個人サイトなら、Notionはすごくおすすめです。
便利に使うのにはちょっと慣れが必要かもしれませんが、ぜひ試してみてください!

いいなと思ったら応援しよう!

名瀬口にぼし 記事を読んでくださり、ありがとうございます!  もし良かったらスキやフォロー、コメントをよろしくお願いいたします。 また小説は個人サイトにまとめていますので、こちらもぜひ→ https://t.co/XTXm4MWlmg