【Notion】お気に入りのWebデザインをストックする活用法

Notionでデザインストックを作る方法

みなさんこんにちは。Webデザイナーのしゅん(@shun_webdesign)です。

僕は参考になるウェブサイトのデザインやアニメーションなどをNotionを使ってストックしています。

「ウェブサイトはURLだけわかればいつでも見れるから関係ない」と思うかたもいるかもしれません。

しかし、突然サイトが非公開になったりアクセスできなくなって端末で確認ができなくなる可能性は大いにあるので僕は個人的に画像として保存するようにしています。

今回はNotionを使ってデザインをストックする方法を紹介します。

Notionを使ってひと目で分かるストックを作る

Notionのデータベースのギャラリービューを使って、サムネイル表示させています。

これでひと目でどんなサイトかデザインかわかりやすくなります。

サイトのデザインや特徴を参考にしたい部分をタグを使って更に細分化することでフィルターで探しやすくすることが可能です。

動きも見れるようにGIFを使っています

合わせて読みたい

プログラミングのコード管理方法を紹介しています。

Notionコード管理方法【Notion】コード管理ならコレ!プログラミングノートを作ろう

作成方法

実際のNotion画面を使って、ストック方法を紹介します。

手順は以下から説明します。

手順
  1. 「ページを追加」をクリックし、新規ページを作成
  2. 適当なページ名を入力
  3. データベース「ギャラリー」を選択
  4. ストックしたいデザインを選ぶ
  5. ページ内容を入力
新規ページを作成

Notionの画面左のメニューから「ページを追加」を選択します。(+のアイコン)

ページ名を入力

新規ページが開いたら適当に名前を入力します。

自分がわかりやすい名前でOKです。例:デザインストック

ギャラリーを選択

データベース「ギャラリー」を選択します。

新規データベース

「データソースなし」という表示がでるので画面右の「データソースを検索する」の一番下「新規データベース」をクリックしてください。

ページ1〜始まるサムネイルが出現します。

ストックしたいデザインを選ぶ

好きなサイトのURLをコピーしてページに貼り付けてください。

「Web Clipper」や「Save to Notion」を使った貼り付け方法にするととても便利です。

URL先のOGP画像がギャラリービューで表示されます。(画像参照)

WebClipperを使ってTwitterのブックマークを整理する【簡単】Notion Web Clipperを使ってTwitterのブックマークを整理する
ページ内容の入力

サイト全体のスクリーンショットを載せます。上手く撮れない場合はGIFや動画を貼ります。

デザインで参考になるところをスクリーンショットでページに貼りつけます。

文章を添えておくと見返したときにどこを見ていたのかわかりやすくなるのでおすすめです。

何度も読み返すのを前提にオリジナルでカスタマイズしてみてください。

ビューを追加で別表示もできる

「ビューを追加」からギャラリー以外の表示方法も追加できます。

画像をサムネイルに表示する必要がない方はリストにすると一度にたくさん確認できます。

まとめ

今回はNotionを使ってデザインをストックする方法を紹介しました。

  • データベース「ギャラリー」を使い、Web Clipper でストックしていく
  • テキストやタグなど、何回も見返すのを前提にカスタマイズする

今回紹介した方法はWebデザイン以外にも使うことができるので試してみてください。

Notionの使い方は自由自在に決めることができるので他にも便利な使い方を知っているかたがいたら教えてください。

最後まで見ていただきありがとうございます!是非記事の共有をよろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA