Pinterestピン作成ガイド

保存されるピンの作り方を完全解説。デザインスペックと運用ルールをまとめました。

📥 無料でダウンロード

登録不要・商用利用OK

はじめに

このガイドでは、Pinterest で保存されやすいピンを作るための具体的な仕様を解説します。

Canva、Adobe Express、Photoshop などのデザインツールで、この値をそのまま入力すれば、プロ品質のピンが作れます。各セクションの値をコピーして使ってください。

STEP 01：キャンバスを作る

「カスタムサイズ」で以下を入力するだけです。

項目値
幅1000 px
高さ1500 px
背景色#f8f7f6

セーフエリアとして、上下左右 120px の余白を確保します。Canva ならガイド線を 120px の位置へ引いておくと便利です。テキストや要素がこのエリアからはみ出さないようにしてください。

STEP 02：色をブランドキットに登録する

使う色は 5 色だけです。ブランドキットに登録しておけば毎回入力不要になります。

名前カラーコード用途
background#f8f7f6背景（オフホワイト）
ink#0B1F3Bメインテキスト（濃紺）
muted#4B5B73補足テキスト（グレー）
border#d6d3d0線・区切り
white#ffffffラベル背景

実際に使うのは ink + muted + border の 3 色です。強調したいときは色を変えず、太字にします。色を増やすと視線が散ってメッセージが伝わりにくくなるため、3 色ルールを守ってください。

STEP 03：3ブロックで上から積む

すべてのピンは「タイトル → ステップ → CTA」の 3 つのかたまりで構成されます。

上部：タイトルブロック

ピンの最上部に配置する要素です。

要素構成
プレフィックスタイトルの前置き文（省略可）
メインタイトル一番大きく目立たせる
サブ補足説明（省略可）
区切り線タイトルとステップの境界

タイトルは左揃え・上部に固定します。

中央：ステップブロック

ピンの中央に配置するメインコンテンツです。

要素構成
番号01、02、03…または✓マーク
見出し各ステップのキーワード（太字）
補足見出しの説明文（1行）

ステップはタイトルと CTA の間に等間隔で並べます。

下部：CTAブロック

ピンの最下部に配置する行動喚起です。3 行で固定します。

行内容
1行目誘導テキスト（例：▶ 続きはプロフィールから）
2行目ベネフィット（例：副業ロードマップ公開中）太字
3行目ハンドル（例：@yourhandle）

CTA はキャンバス下端から 120px の位置に中央揃えで配置します。Canva なら「配置 → 下揃え」してから少し上にドラッグしてください。

STEP 04：テキストを置いてサイズを設定する

テキストを追加して、以下の表の値をそのまま入力します。フォントは Zen Kaku Gothic New 推奨です。Canva なら Noto Sans JP、ローカルなら游ゴシックでも問題ありません。

タイトルブロックの設定

要素サイズ太さ色メモ
ラベル（任意）24pxRegular#4B5B73「保存版」「初心者向け」など。枠線つき
プレフィックス（任意）32pxRegular#4B5B73タイトルの前置き文。省略可
メインタイトル64pxBold#0B1F3B一番大きく目立たせる
サブ（任意）24pxRegular#4B5B73補足説明。省略可
区切り線750px / 2px—#d6d3d0「線」を追加して幅を750pxに

ステップブロックの設定（テンプレート別）

テンプレートによってサイズが異なります。

要素5ステップ3ステップチェックリストBefore/After
番号48px / Regular / muted56px / Regular / muted✓アイコン 28pxなし
見出し32px / Bold / ink36px / Bold / ink30px / Bold / ink32px / Bold / ink
補足テキスト24px / Regular / muted26px / Regular / mutedなし24px / Regular / muted
項目間の余白28px48px罫線で区切り（余白16px）罫線で区切り（余白20px）
レイアウト縦1列縦1列縦1列左右2列
列ヘッダーなしなしなし24px / Bold / muted

CTAブロックの設定

行内容例サイズ太さ色
1行目▶ 続きはプロフィールから20pxRegular#4B5B73
2行目副業ロードマップを無料公開中22pxBold#0B1F3B
3行目@yourhandle24pxRegular#4B5B73

STEP 05：テンプレートを選ぶ

コンテンツの種類と項目数でテンプレートを選びます。

5ステップ型（標準）

「〇〇する 5 つの方法」「〇〇の手順」などハウツー系コンテンツに最適です。番号があることで「順番に読む」意識が生まれ、最後まで見てもらいやすくなります。

以下は構成例です。

  • プレフィックス：副業を始める前に
  • メインタイトル：知っておくべき 5 つのこと
  • サブ：保存版：最初の 1 ヶ月で迷わないために
  • ステップ 01：目標金額を明確にする / 月 1 万/5 万/10 万で戦略が変わる
  • ステップ 02：スキルの棚卸しをする / 過去の経験×市場ニーズで選ぶ
  • ステップ 03：初期費用ゼロで始める / 無料ツールだけで十分 OK
  • ステップ 04：最初の案件を取る / クラウドソーシング 3 社に登録
  • ステップ 05：継続の仕組みを作る / 週 2 時間のルーティンが鍵
  • CTA：▶ 続きはプロフィールから / 副業ロードマップ公開中 / @yourhandle

3ステップ型（大きめ）

項目が少ないときに、余白を活かしてインパクトを出します。文字サイズが大きいため、フィードをスクロールしている最中でも目に留まりやすくなります。

以下は構成例です。

  • プレフィックス：朝活を続ける
  • メインタイトル：3 つのルーティン
  • ステップ 01：前夜に準備を終わらせる / 服・持ち物を枕元に置く
  • ステップ 02：起きたら水を 1 杯飲む / 脳と体のスイッチが入る
  • ステップ 03：最初の 15 分で最重要タスク / 集中力が最も高い時間を活かす
  • CTA：▶ 続きはプロフィールから / 朝活テンプレ無料配布中 / @yourhandle

チェックリスト型（5項目）

「〇〇する前に確認すべきこと」「〇〇のポイント」などリスト系コンテンツに最適です。✓マークが視認性を高め、「保存して後で確認しよう」という行動を促します。

以下は構成例です。

  • プレフィックス：引越し前の
  • メインタイトル：やることリスト
  • ✓ 不用品を処分する
  • ✓ 転居届を出す
  • ✓ ライフラインの手続き
  • ✓ 荷造りスケジュール作成
  • ✓ 住所変更リストを作る
  • CTA：▶ 続きはプロフィールから / 引越しチェックリスト配布中 / @yourhandle

Before/After型（比較）

ビフォーアフター、改善例、比較など「変化」を見せたいときに最適です。左右 2 列で変化を並べて見せることで、違いが一目で伝わります。

以下は構成例です。

  • プレフィックス：朝の過ごし方を変えたら
  • メインタイトル：1 ヶ月で変わった 5 つの習慣
  • サブ：実体験ベースで紹介
  • Before：ギリギリまで寝る / 毎朝バタバタで出発
  • After：30 分早く起きる / 余裕が生まれて集中力 UP
  • （以下、Before/After のペアを繰り返す）
  • CTA：▶ 保存版テンプレ配布中 / 迷ったらこの型で OK / プロフィールリンクから DL

STEP 06：公開前チェック

書き出す前にこれだけ確認すれば完了です。

1. 見出しは全部1行に収まっている？

2 行になっていたら短く言い換えてください。長い見出しは読まれにくく、レイアウトも崩れやすくなります。

2. 補足に数字・条件・具体語がある？

18〜22 文字が目安です。「すごく良い」「とても便利」などの抽象的な表現は避け、「月 1 万円」「週 2 時間」「3 社に登録」など具体的な情報を入れてください。

3. CTAが3行になっている？

誘導（muted）→ ベネフィット（ink 太字）→ @ハンドル（muted）の 3 行構成を守ってください。2 行や 4 行になっていないか確認します。

4. 色が3色以内？

ink + muted + border のみを使用してください。追加の色は使わないでください。強調したい部分は太字で対応します。

5. 区切り線は75％幅（750px）になっている？

端から端まで引いていないか確認してください。区切り線は 750px で、キャンバスの 75％幅にします。

6. セーフエリア（120px余白）を守れている？

テキストや線が端ギリギリになっていないか確認してください。上下左右 120px の余白を確保します。

7. フォントは正しく設定されている？

Zen Kaku Gothic New / 游ゴシック / Noto Sans JP のいずれかになっているか確認してください。デフォルトフォントのままになっていないか注意します。

タイポグラフィまとめ

すべての要素のサイズ・ウェイト・色を一覧でまとめます。

要素サイズウェイト色
プレフィックス32pxRegularmuted
メインタイトル64pxBoldink
サブ24pxRegularmuted
ステップ番号（5ステップ）48pxRegularmuted
ステップ番号（3ステップ）56pxRegularmuted
キーワード（5ステップ）32pxBoldink
キーワード（3ステップ）36pxBoldink
補足テキスト24pxRegularmuted
CTA誘導20pxRegularmuted
CTAベネフィット22pxBoldink
CTAハンドル24pxRegularmuted
ラベル24pxRegularmuted

フォント

推奨フォントと代替フォントの一覧です。

優先度フォント名備考
1Zen Kaku Gothic NewGoogle Fonts（Canva / Web対応）
2Noto Sans JPCanva標準
3游ゴシック MediumWindows / macOS
4ヒラギノ角ゴ Pro W3macOS
5メイリオWindows

Canva で作成する場合は「Noto Sans JP」が標準で使えます。Zen Kaku Gothic New を使いたい場合は、Canva の「テキスト」→「フォント」から検索して追加してください。

ステップ番号のバリエーション

番号の表示方法は 6 種類から選べます。

A. ベーシック（推奨）

シンプルな数字のみの表示です。最も汎用性が高く、どのコンテンツにも合います。

48px / Regular / muted で設定します。

B. サークル（線）

円形の枠線で囲む表示です。柔らかい印象を与えます。

border 2px / muted で設定します。

C. サークル（塗り）

円形を塗りつぶす表示です。番号を強調したいときに使います。

background ink / color white で設定します。

D. スクエア

角丸の四角形で囲む表示です。モダンな印象を与えます。

background muted / border-RADIUS 8px で設定します。

E. アンダーライン

番号の下に線を引く表示です。シンプルながらアクセントになります。

Bold / ink / border-bottom で設定します。

F. ドット付き

番号の前に小さな丸を付ける表示です。リスト感が強調されます。

dot 8px / muted で設定します。

タイトルのバリエーション

タイトルブロックは 4 つのパターンから選べます。

フル構成（推奨）

すべての要素を使う最も情報量の多い構成です。

  • プレフィックス（小・muted）
  • メインタイトル（大・ink・太字）
  • サブ（muted）
  • 区切り線 75%

プレフィックスなし

プレフィックスを省略したシンプルな構成です。

  • メインタイトル（大・ink・太字）
  • サブ（muted）
  • 区切り線 75%

サブなし

サブを省略したすっきりした構成です。

  • プレフィックス（小・muted）
  • メインタイトル（大・ink・太字）
  • 区切り線 75%

ミニマル

メインタイトルと区切り線のみの最小構成です。

  • メインタイトル（大・ink・太字）
  • 区切り線 75%

ラベル / バッジ

タイトル上部に「保存版」「初心者向け」などのラベルを追加できます。

スタイル仕様
アウトラインborder 1px / border色 / border-RADIUS 4px
塗りbackground white / border-RADIUS 4px
ピルborder 1px / border色 / border-RADIUS 100px

共通設定は 24px / Regular / muted / padding 8px 20px です。

ラベルは使いすぎると逆効果です。本当に強調したい場合のみ使用してください。

テンプレートをダウンロード

このガイドに沿った 4 パターンのテンプレートを無料配布しています。

テンプレートをダウンロードする

今すぐ無料でダウンロード

📥 ダウンロードする（ZIP）

登録不要・商用利用OK・再配布禁止