＜この記事の著者＞
ばんか（bamka） - Tech Team Journal
Web制作会社の会社員として働きつつ、個人でブログ／メディアライターとして活動するパラレルワーカー。
iPhone・iPad・Mac・ITツールを用いて人々の生活をより豊かにするための活用術を提供する「デジタルライフブロガー」です。
Web制作に関わる人にとって、すでに公開されているWebサイトというのは非常に重要な勉強材料です。中には「こういった表現、次のプロジェクトで使ってみよう」「こういう見せ方いいなぁ。いつかやってみたい」と、いつか役立てたいサイトもあるでしょう。
そういった「参考サイト」は、自分だけのデータベース化しておくと便利です。私はNotionを使って、自分だけの参考サイト集を作成しています。
【目次】
自分だけの参考サイトギャラリーをNotionで作ろう
Notionには「ギャラリー」というレイアウトがあります。これを使えば、ちょっと見栄えの良いサイト集が簡単に作れます。
保存後の絞り込みが優秀というのも、Notionを利用する上でのメリットです。単純なメモとして保存するだけでなく、カテゴリーや属性によってフィルターを掛けたり、並び順をコントロールできるのは、Notionならではの使い方です。
ギャラリーサイトにあるような「テーマで探す」「業種・業態で探す」「色で探す」といった検索機能を、自分だけで作れてしまいます。
自分専用の参考サイトギャラリーを作る方法
1.データベースを作る
まずは保存するためのデータベースを用意します。新しいページを作成したら、ページタイプにて「ギャラリー」を選択します。
データベースのプロパティを設定したら完了です。設定しているプロパティは以下の通り。
プロパティを細かくすれば、それだけ検索や絞り込みの精度が上がります。
しかし一方で、運用の手間も増えていきます。参考サイトを保存するたびに細かなプロパティを設定していくと、それを行っている時間がイヤになってきてしまい、継続できなくなっていきます。
したがって、細かくプロパティを設定してもいいのですが、すべてを埋めようとは考えないようにしましょう。
「業種」などは、サイトをパッと見ただけでは判断が難しかったりします。「テイスト」も感覚的なものなので分類が難しいケースもあるでしょう。
そういうとき、未入力の空欄を恐れないでください。重要なのは「保存する」という行動そのものなので、整理整頓は二の次と考えましょう。
私は、自分がズボラであると認識しているので、プロパティの設定こそしていますが、中身が空っぽのサイトも多いです。
2. Webクリップを取得する
保存先のデータベースの準備ができましたので、実際に参考サイトのデータを保存していきます。
サイトのクリップを取得するのにオススメなのがGoogleChromeの拡張機能「Save to Notion」です。Notionの公式クリッパーの高機能版で、クリップするタイミングでプロパティも一緒に登録できます。
リンク：Save to Notion - chromeウェブストア
保存したいWebページを開いたら、拡張機能のアイコンをクリック。登録したいプロパティを選択したら、最後に「Save Page」のボタンをクリック。これだけの作業です。
これだけで、Webサイトの「タイトル」「URL」「アイキャッチ」も入力された状態で、先ほどのデータベースに保存されます。
ギャラリーがどんどん増えていくのは、コレクションが増えていく感じがしてワクワクします。
3. ページのキャプチャを取得
ただしこれだと、肝心のコンテンツ部分が保存されません。時間が経てばページのデザインが変わってしまう可能性もあるので、現在の状態を画像として保存し、それを貼り付けておく必要があります。
WebページのキャプチャにはGoogleChrome拡張機能「Awesome Screenshot」を利用します。ページ全体のキャプチャを瞬時に取得してくれるので重宝しています。
リンク：Awesome Screenshot - chromeウェブストア
しかし、キャプチャした画像は非常に重くなってしまうので、このままではNotionにアップロードできません。そこで画像圧縮を行い、ファイルサイズを減らしてから保存します。
画像の圧縮には「ImageOptim」を使っています。ファイルをドラッグ＆ドロップするだけで、画質を劣化させず、ファイルサイズだけを減らせます。
その画像を、Notionのページに貼り付ければ完了です。
動きのあるアニメーションはGifアニメで保存
Webサイトのメインビジュアルや、ボタンを押したときの特殊なアニメーションなど、動きの参考を保存しておきたいときは、Gifアニメーションでの保存がオススメです。
Gifアニメーションも画像ファイルなので、Notionに貼り付けて保存ができます。サムネイル設定しておけば、一覧からでもアニメーションが動くので、楽しいギャラリーができあがります。
GifアニメのキャプチャはDropbox Captureが便利でオススメです。パソコンの画面の一部を一定時間撮影し、それをGifアニメーションとして保存してくれます。
リンク：Dropbox Capture でより多くの情報を伝え、ミーティングを削減
最後に：記録すること自体が大事
最初からいろいろとこだわりすぎると、息が続かなくなってしまいます。キャプチャを撮ることが面倒になり、そのうち「まぁいいや」とサボる機会が増えていくでしょう。
Notionに保存すること自体がとても大切。極端な話をすれば、整理整頓や分類がされていなくとも、保存さえしてあれば見つけることができます。
まずは参考サイトデータベースを作り、気になったものをどんどん保存していきましょう。
(文：ばんか（bamka）)
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
