個人で使う

デザインの参考サイトは「どこがいいか」まで保存する

参考サイトを保存するときに「どこがいいか」と「自分の制作で何を試すか」を一行ずつ添えると、後で使える資料になります。linqloにはページのURLを残し、見た目の好みをもう一段具体的な観察メモにしてみましょう。

執筆 linqlo確認日 2026年10月3日

参考の雰囲気を集める場面の生成イラストです。実在サイトや、そのまま使用できるデザイン素材の紹介ではありません。

「雰囲気が好き」の先を、一つだけ言葉にする

気になるサイトを見つけた瞬間は、配色も写真も文字も、全部がよく見えるものです。ところが数日後に開くと、何を参考にしたかったのか思い出せない。保存した時の気持ちは残っていても、制作へのつなぎ方が見えなくなることがあります。

一度にすべてを分析する必要はありません。「店の営業時間の近くに予約への入口がある」「写真の周囲に余白があり、隣の説明を読みやすく感じた」など、気付いた点を一つだけ書きます。なぜ良く見えたかを言葉にすると、別のテーマでも参考にできる部分が見えてきます。

配色を見るなら、色の組み合わせだけでなく役割を。 背景、本文、強調したい操作に、どの色を使っているかを観察します。「緑がきれい」から「落ち着いた背景の中で、予約の入口だけを見つけやすくしていると感じた」まで書くと、自分の案で試す方向が決まります。

余白を見るなら、何と何の距離かを。 写真の周囲なのか、見出しと本文の間なのか、別の情報のまとまり同士なのか。単に「余白が広い」と書くより、どの関係に注目したのかを残します。

導線を見るなら、何を確認した後に進めるかを。 営業時間、場所、内容を読んだあと、予約や問い合わせへどのように移れるかを見ます。ボタンの色だけでは、その導線を参考にする理由は分かりません。

文言を見るなら、読み手の疑問への答え方を。 「予約はこちら」のような文言の表面だけでなく、その前に何が説明され、押した先を想像できるかを観察します。実際の利用者への効果を測っていない場合は、自分の印象として書きます。

ここでは、週末イベントを知らせるカフェのページを作ると仮定します。以下の参考サイトA・B・Cと制作内容は説明用の架空例です。

参考サイトAから見たいのは、予約への入口です。メモが「すっきりしている」だけなら、制作中に役立ちにくいので、次のように書き換えます。

見る場所：営業時間の近くにある予約への入口。参考にする点：参加を判断する情報を読んだ後に、次へ進める配置。今回試すこと：イベント日時と定員の説明の後に、申込方法を置く。

参考サイトBでは、見出しを観察します。「文字が好き」から、「短い見出しの下に一文の説明があり、情報のまとまりを追いやすいと感じた」へ具体化します。今回の告知にも見出しと短い説明を試しますが、言葉は実際のイベント内容から書きます。

参考サイトCは写真の見せ方だけを見ます。「写真が大きい」ではなく、「横長の写真で店の奥行きを見せている。自分のページでは、イベントを行う場所が伝わる写真を選ぶ」と残します。画面を丸ごと似せるより、必要な役割を取り出す方が、三つの参考を一つの制作に使いやすくなります。

四つの色見本と、カフェとカップの写真風カードを並べたイラスト

色、余白、写真の切り取り方を見比べるための生成イラストです。実在サイトの検証結果を示すものではありません。

linqloに「カフェイベント・参考」というコレクションを作り、各ページのURLを保存します。URLだけ先に保存し、後から編集画面で「メモ」を加えれば大丈夫です。トップページ全体ではなく、参考にした箇所があるページへ戻れるURLを選びます。

タイトルは「サイトA｜予約への入口」「サイトB｜見出しと説明」のように、役割を添えます。「導線」「文言」「写真」といったタグも、自分が探す時の言葉に合わせて手動で付けられます。タグを増やすより、見る場所をメモに書くことを優先しましょう。

画面幅によって配置が変わる参考なら、「スマホで見た」「PCの横幅が広い状態で見た」といった条件も添えます。後で開いた時に違って見えても、最初の観察をたどりやすくなります。ページが更新されることもあるので、制作で使う段階では元サイトを開き直します。

「サイトA｜予約への入口」の手動メモを表示した実際のWeb版の編集画面

実際のWeb版の編集画面に、架空の example.com のリンクを表示しています。メモとタグは手動入力の例です。

参考でよく見えた配置が、今回の情報量や写真にも合うとは限りません。イベントの日時や場所が分かるか、申込先を迷わず見つけられるか、自分のページの内容で確認します。「参考と似たか」より、最初に解決したかった問題へ戻ることが大切です。

参考サイトの写真、文章、素材を使いたくなった場合は、別途その利用条件や必要な許可を確認します。URLを保存する作業と、素材を自分のページへ掲載する判断は分けて進めましょう。

制作後には「営業時間の近くに入口を置く考え方を採用。写真比率は自分の素材に合わせて変更」のように、実際に使った点を追記できます。次の案件で開いた時、単なる好みの一覧よりも、自分が考えた道筋の分かる参考集になります。

アカウントを作成して始めます。クレジットカードは不要です。