Sponsored Link
デザインルールを作るための最初の手順
魅力的なWebサイトを制作するための第一歩は、「デザインルール」を決めることです。
しかし、真っ白なキャンバスを前に、いきなりグリッドや配色、書体を決めるのは簡単ではありません。
そこで重要になるのが、参考となる優れたWebサイトデザインを探す(リサーチする)ことです。
今回は、プロのデザイナーも日頃から愛用しているツール「Pinterest」を使い、
効率的かつ的確にWebデザインの参考サイトを見つけ出し、
自身のデザインルール作りに活かすための具体的な手順を詳しく解説します。
なぜデザインルールの前に「リサーチ」が必要なのか?
デザインルール(配色、フォント、余白など)をゼロから感覚だけで作ろうとすると、
統一感のない、ちぐはぐなデザインになってしまいがちです。
優れたWebサイトをたくさんリサーチすることには、以下のようなメリットがあります。
直感を論理に変えるヒントが見つかる
「なぜこのサイトは見やすいのか」を分析することで、
ヘッダーの構成や視線誘導の法則を論理的に学べます。
トーン&マナーの具体化
クライアントやユーザーが求める「雰囲気」を、
具体的なビジュアルとして共通認識にできます。
デザインの一貫性を保ちやすくなる
参考にするベースがあることで、
ボタンの角丸やアイコンの線幅といった「一貫性のルール」の基準が作りやすくなります。
PinterestがWebデザインのリサーチに最適な理由
数あるリサーチツールやギャラリーサイトの中でも、
なぜPinterestがおすすめなのでしょうか。その理由は3つあります。
① 優れたアルゴリズムによる「芋づる式」の発見
1つの素敵なWebデザイン画像を見つけると、
その下に関連する質の高いデザインが自動的にずらりと並びます。
検索ワードを変えなくても、直感的に次の参考デザインへアクセスできます。
② 部分的なパーツ(コンポーネント)を探しやすい
「Webサイト 全体」だけでなく「Webデザイン ヘッダー」「ヒーローセクション スタイリッシュ」といった、
ページ内の特定のブロックやパーツに絞ったピン(画像)が豊富に存在します。
③ ボード機能による「デザインルールの言語化」
集めた画像を「配色参考」「レイアウト」「フォント」などのフォルダ(ボード)に分類して保存できるため、
そのままデザインルールの仕様書作りに直結させることができます。
Pinterestで参考サイトを探す実践5ステップ
それでは、実際にPinterestを使ってデザインルールの元となる参考サイトを探す手順を解説します。
STEP.01:アカウントを作成し、ビジネス(デザイン)用に最適化する
まずはPinterestのアカウントを作成します。
普段からプライベートで使用している場合は、デザイン専用のアカウントを別途作成するか、
新しく「シークレットボード(非公開)」を作ってリサーチを始めるのがおすすめです。
AIがあなたの検索傾向を学習し、ホーム画面に関連性の高いWebデザインを表示してくれるようになります。
STEP.02:目的の「キーワード」で検索する
検索窓に入れるキーワードが重要です。
単に「Webデザイン」と単一のワードで調べるよりも、
以下のように条件を組み合わせると理想のデザインに早く辿り着けます。
- 業種・ジャンルで絞る
「コーポレートサイト デザイン」「ECサイト デザイン」「カフェ Webサイト」など - トーン&マナーで絞る
「Webデザイン ミニマル」「Webサイト ポップ」「高級感 ランディングページ」など - パーツで絞る
「Webデザイン フッター」「ヒーローセクション タイポグラフィ」など
プロのコツ:英語で検索してみる
「Web design minimal」「UI design header」など、英語で検索すると、
海外の洗練された最先端のデザインを圧倒的なボリュームで見つけることができます。
STEP.03:新規ボードを作成し、直感的に「ピン」していく
「いいな」と思うデザインを見つけたら、右上の「保存」ボタンを押してボードに集めます。
この段階では深く悩まず、「直感的に良いと感じたもの」を20〜30枚程度どんどんピンしていきましょう。
なおボード名は以下のように分かりやすく分けておくのがおすすめです。
- [プロジェクト名]_全体イメージ
- [プロジェクト名]_配色・トーン
- [プロジェクト名]_パーツ(ヘッダー・UI)
STEP.04:関連ピンからさらに深く掘り下げる
ピンした画像の詳細画面を開き、下にスクロールすると「似ているピン」が表示されます。
ここからさらに好みのデザインを芋づる式に探していきましょう。
また、ピンのリンク先(実際のWebサイトやギャラリーサイト)へ飛んで、
「実際の動きやレスポンシブ(スマホ表示)がどうなっているか」まで確認すると、
より深いリサーチになります。
STEP.05:集めたピンを「言語化」して整理する
ある程度ピンが集まったら、ボードを見返します。
たくさん集まった画像には、必ずいくつかの「共通点」があるはずです。
- 「青ベースで、彩度が低めの落ち着いた配色が多いな」
- 「ゴシック体で、文字の間隔(カーニング)を広めに取っているな」
- 「ヘッダーはシンプルにロゴとナビゲーションだけで、余白を広く使っているな」
・・・などなど。
この共通点こそが、あなたがこれから作成する「デザインルールの骨組み」になります。
リサーチから「デザインルール」へ落とし込む方法
Pinterestで集めた参考をもとに、以下の4つの基本ルールに落とし込んでいきましょう。
| ルール項目 | Pinterestから盗むヒント | ルールへの落とし込み例 |
|---|---|---|
| 配色(カラー) | 参考サイトのメインカラー、アクセントカラーの比率を分析 | メイン:70%、サブ:25%、アクセント:5%のカラーコードを指定 |
| 書体(フォント) | 見出し(Heading)と本文(Body)のフォントの種類やサイズ感 | 見出しは「Noto Serif JP」、本文は「Sans-serif」でジャンプ率を設定 |
| 余白(グリッド) | コンテンツ同士の間隔や、要素の整列ルールを観察 | 8pxの倍数(16px / 24px / 32px)を基準に余白を設定 |
| 一貫性(パーツ) | ボタンの角丸やアイコンの線の太さの共通点を見つける | ボタンの角丸は一律「4px」、アイコンの線幅は「2px」に統一 |
まとめ
素晴らしいデザインは、徹底的なリサーチから生まれる
デザインルールを決めるための最初の一歩としてPinterestを使ったリサーチ手順を解説しました。
優れたデザインをたくさん見て、その「理由」を分析することは、決して真似(パクリ)ではありません。
先人たちが作った「見やすさ・使いやすさのロジック」を学び、
自分のデザインに論理的に組み込むための正しいアプローチです。
まずはキーワード検索から始めて、あなただけのインスピレーションボードを作ってみてください。
