Notionで自分・社内用のWebデザインギャラリーをつくる方法

かっこいいWebデザインを見つけたら保存しておきたい。

ただ、単なるブックマークでは管理しづらいですし、クラウドストレージでは参考資料としては使いにくいです。また、チームで使うならメンバーが追加しやすく、参考にしやすいUIにしたいですよね。

そこで便利だったのが、Notionを使う方法。自分・社内用に、見やすく管理しやすいデザインギャラリーをかんたんにつくれたので、その方法をシェアします。

Webデザインの参考資料管理にNotionを使うメリット

Notionとは、メモやタスク、社内Wikiなどをつくれるワークスペースサービスです。自由度が高く多機能なので、使い方は様々です。今回はシンプルに社内用のWebデザインギャラリーとして利用したので、そのメリットをご紹介します。

ちなみに、少人数で利用する程度であれば、無料版でも十分事足ります。

参考サイトを一覧で確認できる

ギャラリーレイアウトに設定すれば、参考サイトを一覧で確認できる点が便利です。

ご覧のようにタイトル（画面下部に格納するメニュー）のほか、タグ（ナビメニュー、アニメーション）、リンク先URLも表示できます。

タグでデザインを分類できる

参考サイトにタグを設定できる点も便利です。文言は自由に設定・追加できます。
複数設定してもいいですし、ソート表示できるので、数が多くなっても絞り込みしやすいです。

もちろん、複数のタグにチェックを入れて、絞り込むことも可能です。この辺りの使いやすさは、データベースをかんたんにつくれるNotionならではですね。

チームでアイデアを共有できる

参考サイト一覧は、チームでかんたんに共有できます。

共有したアカウントなら、自由に参考サイトを追加したり、既存の参考サイトにコメントを残すことも可能です。アイデアの共有が捗ります。

Notionでデザインギャラリーをつくる方法

それでは、Notionでデザインギャラリーをつくる手順を解説します。大枠は次の3ステップです。

1. データベースを作成する
2. 管理項目を追加する
3. 一覧の見え方を調節する

順に見ていきましょう。

1. データベースを作成する

最初にデータベース（データを保存しておく箱）をつくります。
左側の「新規ページを追加」から「白紙のページ」を追加します。

ページが追加されますので、タイトルは「デザインギャラリー」などとします。
本文内には「/ga」と入力してください。

「ギャラリービュー」と表示されますので、クリックします。

上記のように表示されればOKです。データベースが完成しました。

2. 管理項目を追加する

続いて管理項目を追加していきます。Notionでは、プロパティと呼ばれています。今回はデザインギャラリーをつくるので、筆者は以下のプロパティを追加しました。項目名は自由に変更可能です。

追加作業自体が負担にならないように、基本的にはタイトル入力・スクショアップ・URL入力のみで機能する形にしましたが、追加や並び替えはお好みで自由に行えます。

3. 一覧の見え方を調整する

最後に、一覧での見え方を調整します。デフォルトの状態では、URLや画像を登録しても、一覧では表示されません。

これではわかりにくいので、入力した項目が表示されるように、データベース右上の「ビューの設定」から設定変更します。

「プロパティの表示/非表示」から先ほど追加したものを選びます。

スクショ以外が一覧に表示されていることがわかります。スクショはカードプレビューに表示したいので、次の箇所で設定します。

今一度、ビューの設定を開いて、レイアウトを選択します。その中にある「カードプレビュー > ページプロパティ > スクショ」を選びます。

これで、アップしたスクショがカードプレビュー（一覧）に反映されるようになります。

これにて一覧の見え方の調整は完了です。デザインギャラリーらしくなりました。

あとは、右上の共有ボタンからメールアドレス経由で共有できます。

編集権限のあるユーザーは自由に追加できるので、社内のデザインギャラリーとしては十分機能します。

WebデザインギャラリーにNotionを活用しよう

Webデザインの参考サイトを整理・共有するなら、Notionが便利です。

無料版でも実用的に利用でき、画像・URL・タグ・メモをまとめて管理できます。ブックマークやメモアプリで個別に保存するよりも、参考資料を検索・分類しやすく、チーム共有もスムーズです。

自分やチームの用途に合わせたデザインギャラリーをNotionでつくってみてください。

デザインのインスピレーションを得られるギャラリーサイトは下記記事でご紹介しています。