あとで見返せるNotionでの参考サイト集め
部屋って、アイテムの収納場所が決まってると散らからないんだって。
何の話？今日は参考サイトのまとめ方の話です！
そう、最初に収納先を決めておけば、そのあとは楽だよって話をします👀
こんにちは！
2025年3月まで、未経験からのデザイナー職へ就職を目指して就活中のドルちゃんです🐬
さて、先月ムラマツさんにアドバイスをいただいてから、Webデザインのスキル上げるぞ月間としてスキルを上げるべくWebデザインの勉強頑張ってます💪
👇詳しくはこちら
そのときに課題制作のフィードバックとして、＂参考にしたデザインに引っ張られすぎ＂（どのサイトを参考にしたか分かる）というお言葉をいただいていました。
本当にまさにおっしゃる通りで、引き出しがなさすぎてそれ以外の表現が思いつかなかったんですね。
これはマズイ。
そこから巻き返すべく、Webサイトの参考集めを始めたんですが、このまとめが我ながらなかなか良くて、自分が見たいところがすぐに探せたり、これを見たお友達にも褒めてもらえたりと、とてもよかったので共有したいと思います🐬
きっかけ
実は私、以前デザイナーさんの中で有名（？）なWebサイトのデザイン分析をしばらくやっていました。
Webサイトを一つ選んで、デザインを言語化していくやつです。
でもこれ、想像以上に大変で、1つのサイトを分析するのに何時間も時間がかかるし、言葉にするのが難しい。集中できる場所じゃないとできないし、ササっと終わらせたものはやった意味があるのか？と思うこともあり、ちょっと今の自分には合ってないのかも？と違う方法を模索し始めました。
そのときからパーツごとにスクショ撮ってペタペタ貼ってたんですが、言語化よりは負荷が低いわりに細かいところにも目がいくようになり、いいのでは？と思い、Notionでまとめ始めました。
実際にWebサイトを作ったときもすごく参考にしやすくて。
こういうときのレイアウトどれがいいんだろう？って思ったときにすぐ引き出せるようになりました。
Notionでのまとめ方 その①
Notionでの参考サイトのまとめは2種類作ってます。
どういう分け方をしているかというと
①制作するものが決まってる場合
②制作するものが決まってない場合
という風に分けています。
ただ、分けていると言っても最終的には全て②に持っていくので、データがどんどん蓄積されていきます😎
まずは①制作するものが決まってる場合からご紹介します👀
制作したまとめがこちら💁🏻♀️
（かなり量があるので説明を見てからの方がいいかもです）
こちらはパン屋さんのWebサイトを作ろうと参考資料を集めたものになります。
集めた参考サイトは30サイトほど。
目次を見ていただければ分かると思うんですが、カテゴリごとに分けてまとめています。
このカテゴリはすでに入れたいものが決まってるときはそのカテゴリのみ、決まってないときは通常パン屋さんはどんな構成で作られてるんだろうと考えながら、気になったもの全部入れていきます。
基本的には全てスクショを取って入れているんですが、最後にフォントだけをまとめたところがあります。
これはGoogle Chromeの拡張機能を使用して、Webサイトで使用されているフォントについての情報を見れるものなんです。
平均を知ることからはじめようと思って、他のサイトと比べやすいように見出しのタグごとに調べるようにしてます👀
ちなみにこの頃は大きい文字からh1だと思ってたので、そのまま記載してるんですが、ちゃんと調べるとそういうわけじゃないんですよね。
今は👇の拡張機能を使ってちゃんと調べるようにしてます。
右上の目玉ボタンをクリックすると、どの部分がh1なのかh2なのかが表示されるようになります👀
このフォントの参考集めがすごくよくて、フォント選びに迷ったらここを見ればOKという状態になりました🥰
Notionでのまとめ方 その②
つづいて、制作するアイテムが決まってない場合です。
最近の私の日課はギャラリーサイトで新しいサイトを見ることなので、新しいサイトが出たらそれを参考サイトとして保存するようにしています。
どんなに素敵なサイトでも期間限定での掲載だったり、理由はわからないけど気づいたらサイトが見れなくなってたりすることが結構あるみたいなので、放置せず早めに保存するように心がけてます👀
カテゴリ別に探しやすいようにまとめているんですが、それがこちら💁🏻♀️
👇こんな感じでカテゴリを分けています
で、この分け方なんですが、探しやすいようにヘッダー、コンテンツ(よく使われてる)、サブコンテンツ(たまに見かける)、フッター、スマホ(レスポンシブ)という形で分けています。
細かく分けすぎて迷子になるのでは？と思う方もいるかも知れませんが、上のパン屋さんのサイトでも30サイト見てたので、すぐ大量になってしまうと思って躊躇せず細かく分けました🥰
そしてNotionのいいとこは、この一つ一つがボタンのような働きをしていて、クリックするとノートが開けるようになってること！
中も業種ごとに検索しやすいように分けてまとめています👀
後で探しやすいようにスクショと合わせてサイトのURLもセットで保存するようにしました。
それから、実際にWebサイトを自主制作してみてマージンの情報も必要と感じ、それも一緒に調べることにしました！
ただ数字を記録するだけだとどこを測ったのかわからなくなるので、スクショも保存。
フォント同様、測る場所は事前に決めてあります。
こちらもGoogle Chromeの拡張機能がおすすめ🐬
活用方法
以前、「参考サイトは複数のサイトを混ぜてオリジナルにしていくといいよ」アドバイスいただいており、サイト①のレイアウト×サイト②のデザインとか、サイト①のヘッダー×サイト②の"3つの特徴"という感じで混ぜて活用しています。
もっとデザイン力が上がったらそこまで参考に引っ張られずに済むのかもしれませんが、今の私には組み合わせることでオリジナルにするというのが合ってる感じがします。
また、このまとめ方には違う業種のサイトもサクッと参考にできるというメリットがあります。
通常参考サイトを探すときって、作りたいサイトの参考を探すために同じ業種で探すことが多いんじゃないかなと思うんですが、これは違う業種が同じページにまとまってるので、新しいアイデアに繋がりやすいです。
時間の作りかた
これ、集めた数だけ見ると結構な量なので、そんなに集められない…と感じる方もいるかもしれませんが、ほとんどが隙間時間でやっています。
私の場合は職業訓練生なので、休憩時間とか、ちょっとした空き時間に集めることが多いです。
休憩時間にやるなんて脳筋みたい（！）ですが、
意外と時間かからずに大量に集められるし、どちらかと言えば勉強というよりは美しいサイトを見て癒されたり感動したりすることの方が多いかもしれないです🥰
まとめ
今日はデザインのスキル強化中の私の参考サイト集めについてご紹介させていただきました🥰
参考になったら嬉しいです。
ではまた〜🖐️
👇追記
こちらで紹介したNotionの作り方＋テンプレート配布します🥰
今日ご紹介した拡張機能・サイト