SharePoint Online のリストをギャラリー（タイル）表示で運用していると、People（ユーザー）列の「名前」だけ妙に大きく見えてしまい、カード全体のバランスが崩れて気になることがあります。この記事では、タイル書式の JSON を最小限だけ修正して「名前」列の文字サイズをちょうどよく小さくする具体的な方法と、あわせて知っておきたい調整テクニックを詳しく解説します。
SharePoint Online のギャラリー（タイル）表示で「名前」が大きく見える理由
まず、なぜ People（ユーザー）列の「名前」だけが大きく表示されるのかを整理しておきます。理由を理解しておくと、今後別の列をカスタマイズするときにも応用が効きます。
- ギャラリー（タイル）ビューのカードは、既定の CSS クラス（例：
sp-card-userContent,sp-card-highlightedContentなど）で装飾されている - People 列の表示部分は「重要な情報」として扱われやすく、太字＋やや大きめのフォントサイズがデフォルトで適用されている
- タイル書式の JSON で
role="heading"が付与されていることも多く、見た目上「見出しっぽく」強調されやすい
重要なのは、この見た目は SharePoint 側の CSS によるものであり、JSON を通じて直接 CSS ファイルを書き換えることはできないという点です。しかし、タイル書式では各要素に style プロパティを指定できるため、インライン CSS で上書きすることが可能です。
つまり、People 列の「名前」を表示している要素（多くの場合 <p> や <div>）に対して、font-size を明示的に設定してあげれば、カード全体のレイアウトはそのままに、テキストだけ小さくすることができます。
タイル書式の基本：どこを触れば文字サイズを変えられるか
SharePoint Online のギャラリー表示で使われるタイル書式（ビューの JSON）は、tile-formatting.schema.json に従って記述されます。ざっくり整理すると次のような構造になっています。
elmType… 実際に出力される HTML 要素の種類（div,span,pなど）attributes… class や title など要素の属性（class,title,roleなど）style… 要素に直接付与するインラインスタイル（CSS を上書きできる）children… 子要素の配列（カードの内側の構造を定義）forEach… 配列型の列をループするときに使う構文（People 列で複数ユーザーを扱うときなど）
今回のポイントは、「名前」を表示している要素に style.font-size を追加するという一点です。対象が特定できれば、そこにだけ font-size を指定することで、他の項目には影響を与えずに調整できます。
最小限の修正で「名前」の文字サイズを小さくする方法
多くのケースでは、People 列「名前」を出力している部分は、次のような forEach と p 要素の組み合わせになっています。
{
"forEach": "personIterator in [$Name]",
"elmType": "p",
"defaultHoverField": "[$personIterator]",
"style": {
"display": "=if(loopIndex('personIterator') >= 1, 'none', '')",
"margin": "0"
},
"txtContent": "[$personIterator.title]"
}
このままだと、既定の CSS により「名前」がやや大きめのフォントで描画されてしまうことがあります。ここに font-size を追加して、テキストサイズを明示的に小さくします。
修正後の JSON 例（最小変更版）
{
"forEach": "personIterator in [$Name]",
"elmType": "p",
"defaultHoverField": "[$personIterator]",
"style": {
"display": "=if(loopIndex('personIterator') >= 1, 'none', '')",
"font-size": "12px",
"margin": "0"
},
"txtContent": "[$personIterator.title]"
}
追加したのは "font-size": "12px" だけです。このように style ブロックに font-size を書くことで、既定のカード内のスタイルを安全に上書きできます。
font-size のおすすめ値
実際の運用でよく使われる値をまとめておきます。
| 指定値 | 見え方の目安 | おすすめ用途 |
|---|---|---|
14px / 0.9rem | やや控えめ。既定より少し小さい程度 | カードの主役だが、他項目とバランスを取りたい |
12px / 0.85rem | 小さめ。情報量が多いカード向け | 「名前」を少し抑え、タイトルやステータスを目立たせたい |
10px | かなり小さい。PC前提の運用向け | 一覧性を最優先し、カードをぎゅっと詰めたい場合 |
迷ったら、とりあえず 12px を起点にして調整していくとバランスを取りやすいです。
親コンテナごとまとめて縮小する方法
「名前」の文字だけでなく、アイコンや表示領域も含めてブロック全体を小さく見せたい場合は、People 情報を包んでいる親コンテナの div に font-size を指定するのがおすすめです。
よくある構造として、次のような div が People 情報の親になっています。
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-neutralPrimary sp-card-userContent sp-card-highlightedContent",
"title": "[$Name.title]",
"role": "heading",
"aria-level": "3"
},
"children": [
/* 中略：アイコンやテキスト要素 */
]
}
ここに style を追加して、フォントサイズを一括縮小します。
修正後の JSON 例（親コンテナに指定）
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-neutralPrimary sp-card-userContent sp-card-highlightedContent",
"title": "[$Name.title]",
"role": "heading",
"aria-level": "3"
},
"style": {
"font-size": "12px"
},
"children": [
/* 中略：アイコンやテキスト要素 */
]
}
この方法の特徴は次の通りです。
- メリット：1 箇所の指定で People ブロック全体のサイズ感をまとめて調整できる
- デメリット：同じコンテナ内の他のテキスト（役職名や部署名など）がある場合、それらも一緒に小さくなる
もし People ブロック内で「名前」と「補足情報（部署や役職など）」のサイズを分けたい場合は、親コンテナにはやや大きめ、子の p 要素にはさらに小さめの font-size を指定するなど、組み合わせて調整するとよいでしょう。
さらに抑えたい場合：強調クラス sp-card-highlightedContent を外す
People ブロックが大きく見えるもう一つの要因が、sp-card-highlightedContent という CSS クラスです。このクラスはカード内の「強調すべき内容」に付与され、フォントサイズやウェイトが少し大きめになる傾向があります。
もし強調を外してもかまわない場合は、クラスから sp-card-highlightedContent を取り除くのも有効です。
クラスから強調スタイルを外した例
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-neutralPrimary sp-card-userContent",
"title": "[$Name.title]",
"role": "heading",
"aria-level": "3"
},
"children": [
/* 中略 */
]
}
この変更だけでも、全体的な「大きさ」「太さ」が少し落ち着き、他の項目とのバランスが取りやすくなることが多いです。
なお、role="heading" と aria-level は主にスクリーンリーダーなどのアクセシビリティ向けの情報であり、文字サイズそのものには直接関係しません。見た目の調整は class と style で行われる、という点を覚えておきましょう。
実際の設定手順：SharePoint の画面から JSON を修正する
次に、SharePoint Online の画面上でタイル書式を編集する具体的な手順を整理します。既に JSON をお持ちの場合も、念のため手順を確認しておくと安心です。
- SharePoint の対象サイトを開く
- 対象のリストを開く
- 右上の「表示オプション」（ギャラリー／リストを切り替えるボタン）をクリック
- 「ギャラリー」または独自に作成したギャラリービュー を選択
- 再度「表示オプション」→「このビューの書式設定」をクリック
- 「書式設定の種類」で「ギャラリー」を選び、「詳細オプション」または「JSON でカスタマイズ」を開く
- 既存の JSON があればコピーしてローカルにバックアップしておく（重要）
- People 列「名前」を表示しているブロックを探し、前述のように
style.font-sizeやclassの修正を行う - 「保存」をクリックし、ギャラリービューに戻って表示を確認する
反映されないように見える場合は、次の対処も試してみてください。
- ブラウザの再読み込み（F5）
- 別のビューに切り替えてから、再度ギャラリービューに戻る
- ブラウザキャッシュのクリア、シークレットウィンドウでの再表示
font-size の単位ごとの特徴と使い分け
font-size は px, em, rem のいずれも利用できます。それぞれの特徴をまとめると次の通りです。
| 単位 | 基準 | 特徴 | ギャラリー表示での使いやすさ |
|---|---|---|---|
px | 画面上のピクセル数 | 絶対的なサイズ指定。環境に関わらず同じ見え方になりやすい | もっとも扱いやすい。デザインの再現性が高い |
em | 親要素のフォントサイズ | 親のサイズを基準とした相対指定。ネストが深いと計算が複雑になりがち | 複数箇所を「親に対して相対的に」調整したいときに有効 |
rem | HTML のルート要素（<html>）のフォントサイズ | ページ全体の基準に対する相対指定。全サイトの文字倍率変更に強い | サイト全体で統一されたデザインポリシーがある場合に向く |
SharePoint Online のタイル書式は、もともと既定の CSS によるスタイルがかかっているため、まずは px での指定を使うのが無難です。特にこだわりがなければ、12px や 14px のようにシンプルに指定しておくと、デザインの再現性が高くなります。
行間や複数行表示も同時に整える応用テクニック
People 列の「名前」は、ユーザー名が長い場合に折り返し表示されます。文字サイズを小さくしたにもかかわらず、行間が広すぎて「スカスカ」に見えてしまうこともあります。その場合は、行間（line-height）も一緒に調整すると、表示がぎゅっと締まり、視認性が上がります。
行間と文字サイズを同時に指定した例
{
"forEach": "personIterator in [$Name]",
"elmType": "p",
"defaultHoverField": "[$personIterator]",
"style": {
"display": "=if(loopIndex('personIterator') >= 1, 'none', '')",
"font-size": "12px",
"line-height": "1.2",
"margin": "0"
},
"txtContent": "[$personIterator.title]"
}
line-height を 1.2 や 1.1 にすると、適度に行間が詰まり、カードに収まる情報量が増えます。逆に、詰まりすぎて読みにくいと感じる場合は、1.4 や 1.5 に上げて調整してください。
名前が極端に長いユーザーが多く、「1 行だけ表示できればよい」場合は、white-space や overflow, text-overflow を組み合わせて、1行省略表示（…）にすることもできます。
1 行に収めて省略表示する例
{
"forEach": "personIterator in [$Name]",
"elmType": "p",
"defaultHoverField": "[$personIterator]",
"style": {
"display": "=if(loopIndex('personIterator') >= 1, 'none', '')",
"font-size": "12px",
"line-height": "1.2",
"margin": "0",
"white-space": "nowrap",
"overflow": "hidden",
"text-overflow": "ellipsis"
},
"txtContent": "[$personIterator.title]"
}
これにより、カードの高さが安定し、一画面あたりに表示できるアイテム数が増えるため、SharePoint リストを「カード型ダッシュボード」として使う場合に特に有効です。
People 列に複数ユーザーが設定されている場合の注意点
People 列を複数値許可にしている場合、1 件のアイテムに複数ユーザーが登録されることがあります。その際、タイル書式では forEach を使ってユーザーの配列をループさせるのが一般的です。
以下のようなコードは、最初の 1 人だけを表示し、それ以外のユーザーは非表示にするための典型的な書き方です。
{
"forEach": "personIterator in [$Name]",
"elmType": "p",
"defaultHoverField": "[$personIterator]",
"style": {
"display": "=if(loopIndex('personIterator') >= 1, 'none', '')",
"font-size": "12px",
"margin": "0"
},
"txtContent": "[$personIterator.title]"
}
loopIndex('personIterator') が 0 のときだけ表示し、それ以外（1 以上）は display: none にするロジックです。この書き方をそのまま使う場合、文字サイズの指定は 1 人目にだけ適用されるので、意図通りの表示になります。
もし「全員を表示したいが、2 人目以降はさらに小さくしたい」といったニーズがある場合は、style の中で式を使ってサイズを変える方法もあります。
1 人目は 12px、2 人目以降は 10px にする例
{
"forEach": "personIterator in [$Name]",
"elmType": "p",
"defaultHoverField": "[$personIterator]",
"style": {
"font-size": "=if(loopIndex('personIterator') == 0, '12px', '10px')",
"margin": "0"
},
"txtContent": "[$personIterator.title]"
}
このように、式で font-size を切り替えることで、カード内の情報の優先度をより細かく表現することができます。
よくあるハマりポイントと対処法
タイル書式の JSON を編集していると、些細なミスで「何も表示されない」「うまく反映されない」といった状態になることがあります。よくあるパターンと対処法を表にまとめました。
| 症状 | 原因の例 | 対処方法 |
|---|---|---|
| カードが真っ白になり、何も表示されない | JSON の構文エラー（カンマ抜け、波括弧の不一致など） | エディターのエラー表示を確認し、構文チェックサイトなどで JSON を検証する |
| 「名前」のサイズだけ変更されない | 対象の elmType が People 列とは別の要素になっている、または別の箇所に上書きの font-size がある | People 列の出力部分を特定し、同じ要素に複数の style が定義されていないか確認する |
| 書式を変更しても表示に変化がない | 別のビューを編集している、またはブラウザキャッシュの影響 | 編集対象のビュー名を確認し、ブラウザを再読み込み、別ブラウザで動作確認を行う |
| モバイル表示で文字が読みにくい | PC 前提で文字サイズを小さくしすぎている | モバイルでも確認し、最低でも 12px 程度を維持するよう調整する |
ビュー書式と列書式の違いをおさらいしておく
People 列の見た目を変えたいとき、「列の書式」と「ビュー（タイル）の書式」のどちらを使うか迷うことがあります。それぞれの特徴を整理すると、次のようになります。
| 項目 | 列の書式 | ビュー（タイル）の書式 |
|---|---|---|
| 適用範囲 | 対象列が表示されているすべてのビュー | そのビュー（ギャラリー）だけ |
| レイアウトの自由度 | 基本は 1 列内の装飾に限定 | カード全体を自由に組み立て可能 |
| ギャラリー表示との相性 | カードレイアウトの調整には向かない | ギャラリー（タイル）専用の見た目を作り込みやすい |
今回のように、「ギャラリー（タイル）表示のときだけ People 列の名前を小さくしたい」というケースでは、ビュー（タイル）の書式を使うのが正解です。標準のリスト表示やその他のビューには影響を与えず、ギャラリービュー専用のデザインを実現できます。
運用時のベストプラクティスとおすすめ設定例
最後に、実際に SharePoint Online を業務で運用する際に役立つ、いくつかのベストプラクティスとおすすめ設定例を紹介します。
JSON は必ずどこかにバックアップしておく
- ビュー書式を少し触っただけのつもりでも、構文エラーで「元の状態に戻せない」事態になりがちです。
- 必ず編集前に JSON 全体をコピーし、SharePoint の別リスト、OneNote、または Git リポジトリなどに保管しておきましょう。
- 複数のビュー（一覧、コンパクト、ギャラリーなど）ごとにファイルを分けて管理するのがおすすめです。
デザインポリシーを簡単にメモしておく
- 「People 列の名前は 12px」「タイトル列は 14px」「ステータスは色付きバッジ」など、最低限のルールだけでもテキストで残しておくと、後から修正するときに迷いません。
- チームメンバーが増えたときも、デザインの統一感が保ちやすくなります。
おすすめの組み合わせ例
SharePoint Online のギャラリー表示で、People 列と他の列のバランスを取りたい場合の、一例を紹介します。
- タイトル（件名）列：
font-size: 14px; font-weight: 600; - People（名前）列：
font-size: 12px; line-height: 1.2; - 日付列：
font-size: 11px; color: #666666; - ステータス列： 小さめのラベル＋背景色で表現
このように、タイトルをやや大きめ、People 列を標準、日付などの補足情報を小さめにすることで、ひと目で「誰の」「何のカード」かが分かるギャラリーを作ることができます。
まとめ：People 列の「名前」だけをスマートに縮小して見やすいタイルに
SharePoint Online のギャラリー（タイル）表示で People 列の「名前」が大きすぎると感じたら、まずは以下のステップを押さえておけば十分です。
- タイル書式の JSON で、People 列「名前」を表示している要素（多くは
p）を探す - その要素に
styleを追加し、font-sizeを12pxなどに設定する - 必要に応じて
line-heightやwhite-spaceも調整し、行間や折り返しを整える - さらに抑えたい場合は、親コンテナの
sp-card-highlightedContentを外したり、親に対してfont-sizeを指定する
これだけで、既定の見た目を大きく崩すことなく、カード全体のバランスを取りつつ「名前」列の存在感をコントロールできます。SharePoint Online のリスト書式設定とタイル書式を組み合わせることで、標準機能の範囲内でも十分に「使いやすく」「見やすい」業務用ダッシュボードを実現できますので、ぜひ今回の方法をベースに、チームの運用に合わせたカスタマイズに挑戦してみてください。
コメント