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

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

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

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

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

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

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

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

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

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

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

合わせて読みたい

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

2021年12月24日【Notion】コード管理ならコレ！プログラミングノートを作ろう

作成方法

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

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

新規ページを作成

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

ページ名を入力

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

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

ギャラリーを選択

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

新規データベース

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

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

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

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

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

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

2021年3月20日【簡単】Notion Web Clipperを使ってTwitterのブックマークを整理する

ページ内容の入力

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

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

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

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

GIFの作成

GIFや画像をページ上に貼り付けることでサムネイルとして表示されます。

GIFは「Gyazo GIF」を使って撮っています。インストールは下記リンクからお願いします。

<br>参考

Gyazo – スクリーンの瞬間共有サービス Gyazoへようこそ

ツールをクリックし、範囲を決めるだけでGIFが撮れます。最大7秒間撮ることが可能です。

ページの先頭に配置することで一覧表示に表示されるようになります。

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

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

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

まとめ

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

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

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

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