今回から何回かに分けてNotionのページを、それっぽいおしゃれなデザインにカスタマイズしていきたいと思います。
主にやることは以下の通りです。
- ダッシュボードを作る
- icons8でアイコンの設定
- indifyからウィジェットを取得
- カラムの作り方
この記事ではダッシュボードを作り、そこのアイコン画像をIcons8からリンクさせたいと思います。
それでは早速やっていきましょう。
Notionのページをおしゃれデザインにカスタマイズする
1.ダッシュボードを作る
Notionだけに限りませんが、たくさんページを作ってしまうと管理することが大変になってきます。
なので、作ったページを管理しやすくるためにダッシュボードを作ります。
ダッシュボードとは一言で説明すると、ウェブサイトのトップページに当たる部分です。
Notionで作った多くのページをダッシュボードにリンクし、表示することによって管理がしやすくなりますし、使いやすくもなります。
今回はこのダッシュボードを作り、そこのアイコンをIcons8という他サイトからリンクさせます。
では早速ダッシュボードを作ります。
作り方は普通のページを作るのとなんら変わりません。
「Add a page」で新規ページを作り、タイトルを「HOME」としておきます。（僕はHOMEにしましたが、お好きな名前で大丈夫です。）
ダッシュボードの画像1
今後はここに今まで作ってきたページをリンクさせて、ウェブサイトのトップページのような形にしていきます。
2.余談 ダークモードに変更する方法
余談ですが、Notionはダークモードに対応しています。
今回のデザインではダークモードは使用しませんが、変更する方法を説明しておこうと思います。
左側にあるワークスペースから「Settings & Members」を選択し、「Appearance」をクリックするとNotionの見た目の変更ができます。
ダークモードに変更
初期設定では「Light」になっているので、ここを「Dark」に変更してもらうと、ダークモードになります。
3.Icons8からアイコンを取得する
ではデザインを作っていきます。
Icons8というアイコンを無料で提供しているサイトからアイコンをリンクさせます。
Icons8にはこちらからアクセスできます。
登録が必要なのですが、Googleアカウントがあればそのままログインができます。
使い方はとても簡単です。
「Free icons」と記載されているところからアイコンを選択します。
今回は「iOS Glyph」からアイコンを取得したいと思います。
アイコンの設定方法
検索欄に「Home」と入力し、それっぽいデザインを選択します。
アイコンの設定方法2
デザインが決まったら、「Embed HTML」をクリックし、90pxのサイズを選択します。
アイコンの設定方法3
その後に「Paste this fragment into your HTML」と書かれているところのURLをコピーします。
アイコンの設定方法4
コピーしたURLをNotionのアイコン設定の個所で「Link」を選択し、貼り付けます。
貼り付けた時にHTMLのimgタグも一緒にくっついているので、それを消してから使用してください。
今回の場合だと、<img src=”https://img.icons8.com/ios/90/000000/log-cabin.png”/>となっているので、「””」で囲まれたhttps~.pngのみを貼り付けます。
前にある「<img src=”」と、後ろの「”/>」は消してください。
アイコンの設定方法5
これでアイコンの設定ができました。
最後に
見た目をおしゃれに整えるのに画像はかなりの力を発揮してくれます。
フリープランだとアップロード容量に制限があるので、リンクを最大限に活用することがマストになってきます。
次回はウィジェットと呼ばれる機能を追加して、さらに見た目をおしゃれに整えていきたいと思います。
次の記事はこちら！
またNotionに関しては基礎編やデータベース編など、多くの記事を書いていますので、併せてお読みいただけると幸いです。
今回はNotionのデザインという部分にフォーカスを当てて書いてみました。
今後デザインの知識は、仕事とかでも何かと必要になってくると個人的には感じています。
多少なりデザインに関する知識や技術があれば、何かを創作することも楽しくなりますので、この際デザインの勉強をしてみてはいかがでしょうか？
デザインについて何か本をお探しでしたら、以下の３つがデザインの基礎や色の配色、レイアウト等でとても参考になるのでお勧めです。
僕は記事のサムネイルを作る時にこれらの本からレイアウトと色を参考にしています。
Notionだけに限らず他のところでもデザインの知識はきっと役に立つと思いますので是非読んでみて下さい。
