最新情報から便利な使い方まで。Notion 情報に特化した Web メディア。

【無料テンプレ配布】Notionでブログとポートフォリオを簡単に公開できるテンプレートを作成した

2024年5月〜 Schoo さんでの講座が始まります → 詳しくはこちら



▼ Notion ラボで公開中の無料テンプレートまとめ記事はこちら


こんにちは、チャベスと言います。

今回は、ブログとポートフォリオを簡単に公開できるテンプレートを作成したので、その内容の紹介とページの公開方法について紹介します。

テンプレート配布

以下のリンクでテンプレートを公開しています。複製して自由に改造して使っていただくことができます。興味のある方はぜひ使ってみてください。

テンプレートの構成

テンプレートの構成は以下のようになっています。

トップページ
トップページ

ブログ記事はギャラリービューの左上のビューの切り替えで、タグごとに記事を表示切り替えできるようになっています。

各記事のページには目次をつけることにより、記事を読みやすくなるように工夫しています。

記事ページ
記事ページ

ポートフォリオはトップページの右下にリンクを配置しており、自分の経歴や関わったプロジェクトなどを記載できるようにしています。

ポートフォリオ
ポートフォリオ

細かな Tips

テンプレートを作るに当たって意識したポイントを解説します。

SNS リンクはコールアウトに入れる

SNS リンクは以下のようにコールアウトに入れ、アイコンをつけるときれいに見えます。

SNS リンクはコールアウトに入れるときれいに見える
SNS リンクはコールアウトに入れるときれいに見える

ギャラリービューを使う

データベースのギャラリービューは見た目がいいことに加え、スマホでもレスポンシブに対応してデザインが崩れないのでおすすめです。今回はブログ記事一覧やポートフォリオの実績一覧に使っています。

PC の見た目
PC の見た目
スマホの見た目
スマホの見た目

ギャラリービューに GIF 画像を使う

ギャラリービューには GIF 画像を使えるので、動きのある画像を使うことで個性を出しやすいかもしれません。

ギャラリービューに GIF 画像を使って動きを加える
ギャラリービューに GIF 画像を使って動きを加える

フォントを変える

Notion ではフォントを 3種類から選択できます。今回は デフォルトから Serif に変更しました。フォントは右上のメニューから変更できます。

フォントの変更
フォントの変更

ページの公開方法

ページの公開は、右上の「共有」から簡単に行うことができます。Notion の有料プランに加入していれば「ネット検索を許可」も選択することができ、Google などの検索結果にページが載りますが、無料プランの場合は検索結果には載りません。

無料プランを使う場合は、SNS のプロフィールなどに「Web公開用リンク」を貼り付けておきましょう。

ページの公開は、上の階層のページを公開するとそのページの下の階層のページは自動で公開されるようになります。今回でいえば、トップページ(ブログ)を公開設定にしておけば、ポートフォリオのページは自動で公開されるので設定を変更する必要はありません。

ページの公開設定
ページの公開設定

おわりに

今回は、私が作成した「ブログとポートフォリオ」のテンプレートを紹介しました。Notion の Web 公開機能を活用すれば、本当に簡単に自分だけのブログやポートフォリオが公開できるので、興味のある方はぜひ使ってみてください。

💡

初学者からでも安心して Notion を学べるオンラインコミュニティ「Notion 大学」を運営中。Notion コミュニティとしては国内最大規模で、会員数は現在200名以上となっております。

  • 分からないことは24時間チャットツールでいつでも質問できる
  • コミュニティ内の限定勉強会でタスク管理や知識管理術が学べる
  • 1から学べる Notion 学習ロードマップで初心者からでも学習可能
  • Notion 大学限定の学習動画が100本以上
  • 定期的に開催している有料セミナーへの無料参加券
  • 過去の有料記事・有料テンプレートが全て閲覧可能

コンテンツや特典盛りだくさんです。参加方法は下記の記事をご覧ください。

この記事の執筆者

チャベスのアイコン画像

チャベス

Web ライター・ディレクター。Notion 公式のおすすめのテンプレートクリエイター。個人で Notion をちょっと便利にする Chrome 拡張機能を開発中。代表作は「NotionSidebarHider」「Notion文字数カウント」。本業はメーカーで研究開発をしているエンジニア。

Twitter / Notion