見出しの文字と装飾を比較し、Figmaの画面デザインで検討するための素材パックを無料配布しています。この記事には、既存の見出し素材40種類の見本を掲載しています。配布形式は .fig です。
更新履歴は2024年7月9日に20種類、2024年8月28日に20種類を追加した記録です。取得するファイルの版と、使いたい部品の収録状況を入手先でも確認してください。
見出し40種類の見本
文字サイズ、線や背景の装飾、余白を比較し、画面内で必要な見出しの階層に合う候補を選びます。見本の外観と、WordPressなどで実装する見出しの設定は分けて確認します。
.figファイルの入手先
見出し素材の配布フォルダーを開き、ファイル名・拡張子・更新情報を確認してダウンロードしてください。2026年10月3日から無料配布とし、codocでの購入は不要です。商用利用・加工・再配布・顧客への納品の条件が不明な場合は、使用前に運営者へ問い合わせてください。
Googleドライブでファイルをプレビューできない場合は、ダウンロード後にFigmaのファイルブラウザーから読み込みます。
Figmaへ読み込む手順
Figmaのファイルブラウザーで Create new → Import → Import from computer を選び、取得した .fig を開きます。配布原本は残し、作業用のコピーで編集してください。Figma公式のインポート手順
共有先の権限やフォントを含む共通の確認項目は、.figの読み込み方で説明しています。
見出しを編集するときの確認点
- 実際のタイトルを入れ、1行と複数行の両方で装飾と余白を確認する。
- フォントのファミリーと太さを確認し、欠落警告があれば必要なフォントを確認する。
- PC・スマホの画面幅に合わせて、行間、左右の余白、装飾の長さを調整する。
- 部品がインスタンスの場合は、個別の変更と元コンポーネントの変更を区別する。
- 実装先では、見た目に加えて見出しの階層と本文との関係を確認する。
文字が編集できない場合は文字サイズ・テキストの対処記事へ、フォントの警告は欠落フォントの対処記事へ進んでください。
関連する素材
ボタン素材35種類／SWELL向けFigmaテンプレート／Figmaの使い方まとめ
heading.figの読み込み確認
2026年10月3日、ブラウザー版Figma Designの日本語UIで、配布ファイルをドラフトへインポートして確認しました。これは今回の読み込み・表示の確認で、すべての文字の編集、フォントの充足、利用環境での再現を保証するものではありません。
Page 1にheading_00001〜heading_00040のグループを確認しました。キャンバスに見出しの見本が並び、右側には色スタイルの一覧も表示されました。部品全体のグループと、内側の文字・装飾を選び分けて編集します。
