プロフィール · Profile / User · Blanc Nail

◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › UI Components › Profile / User

プロフィール

ユーザカード、著者バイオ、アカウント情報の表示パターン。

3

Patterns

UI Components

Group

isValid=0

Verified

CSS

Animation

01

Profile — Hero Bio Card

profile-hero-card

Copy
Link

👤

山田 美咲

プロダクトデザイナー ・ 東京

スタートアップ向けの SaaS UI を 8 年間設計してきました。最近は AI 機能の体験設計に夢中。

フォローする
メッセージ
  • パターン名: Profile — Hero Bio Card
  • 概要: Centered profile hero card with avatar, role and primary actions.
  • 使用目的: Profile / User領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 720px、主要ブロック group, group, group, paragraph, heading, paragraph, paragraph, buttons
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Profile / Userをリッチに見せるカバー/カード強調版 / Profile / Userをコーポレート向けに整える情報密度高め版 / Profile / Userをカジュアルに見せるアイコン/ラベル強調版 / Profile / Userをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/profile-hero-card"} /-->

CSS:
.section-profile-hero-card { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-profile-hero-card').forEach((el) => el.dataset.ready = 'true');

02

Profile — Author Signature

profile-signature

Copy
Link

✍️

執筆者

中村 詩織

編集部リードライター。技術と暮らしの交わるところを書きます。月 4 本ペースで連載中。

  • パターン名: Profile — Author Signature
  • 概要: Inline author signature block with avatar and short bio, suited for article footers.
  • 使用目的: Profile / User領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 720px、主要ブロック group, group, group, paragraph, group, paragraph, heading, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Profile / Userをミニマルに見せる余白重視版 / Profile / Userをリッチに見せるカバー/カード強調版 / Profile / Userをコーポレート向けに整える情報密度高め版 / Profile / Userをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/profile-signature"} /-->

CSS:
.section-profile-signature { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-profile-signature').forEach((el) => el.dataset.ready = 'true');

03

Profile — User Mini Cards

profile-user-grid

Copy
Link

アクティブメンバー

🌊

佐藤 翔太

Frontend ・ オンライン

🦊

伊藤 美羽

Designer ・ 退席中

🌌

高橋 涼介

Backend ・ オフライン

  • パターン名: Profile — User Mini Cards
  • 概要: Three user mini-cards with avatar, name, role and presence indicator.
  • 使用目的: Profile / User領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, heading, columns, column, group, group, paragraph, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Profile / Userをミニマルに見せる余白重視版 / Profile / Userをリッチに見せるカバー/カード強調版 / Profile / Userをコーポレート向けに整える情報密度高め版 / Profile / Userをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/profile-user-grid"} /-->

CSS:
.section-profile-user-grid { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-profile-user-grid').forEach((el) => el.dataset.ready = 'true');