【UIパーツ大全】トランケート[truncate]参考パーツ一覧

2025.05.11

WebやアプリのUI設計において、限られたスペースにテキスト情報を適切に収めるための手法の一つが「トランケート（truncate）」です。トランケートとはテキストを一定の長さで切り詰め、省略記号（…）などを用いて表示を簡略化する技術です。本記事ではトランケートの基本的な概念から、主要なUIパターン、実装例、参考になるデザインパーツまでを網羅的に解説します。

トランケートとは？

トランケート（truncate）とは、長すぎるテキストを制限文字数や表示領域に合わせて省略表示することです。典型的には「…」（三点リーダー）を使い全文を表示せずにコンパクトに見せることで、UIの可読性やレイアウトの整合性を保つ役割を果たします。

なぜトランケートが必要なのか？

限られたスペースに対応：スマートフォンやカードUIなど、表示面積に制限がある場面では必須。
視認性の向上：無制限に文字列が表示されると、ユーザーの集中を妨げる。
美しいレイアウトの維持：崩れない整ったUI設計の実現に貢献。

トランケートの種類とUIパターン

テーブルUIの基本は「行（row）」と「列（column）」の組み合わせです。HTMLの<table>タグでも馴染みがある通り以下のような構造が一般的です。

ヘッダー（thead）：カラム名や分類ラベルを表示
ボディ（tbody）：実際のデータを格納
フッター（tfoot）：集計やページ送り、操作系のボタンなど

基本的なテーブルでも以下のようなデザイン選択がUXを大きく左右します。

スクロール可能な横幅
ソート機能付きのカラム
ページネーション or 無限スクロール
レスポンシブ対応（モバイル時に縦表示に変化するなど）

ユースケース別・テーブル参考パーツ一覧

単一行トランケート（Single-line truncate）

使用例：リスト表示やボタン、ナビゲーションメニュー

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

特徴：1行に収まらないテキストを「…」でカットする。シンプルかつ汎用的。

複数行トランケート（Multi-line truncate）

使用例：ニュースの概要、商品説明など

.truncate-multi {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

特徴：2行以上に対応可能。CSSの-webkit-line-clampを使う。

ツールチップ併用型トランケート

使用例：マウスオーバー時に全文表示する情報項目

<div class="truncate" title="これは全文のテキストです">これは全文のテ...</div>

特徴：アクセシビリティを確保しつつ、省略された情報を補足表示。

展開ボタン付きトランケート（Read more）

使用例：長文のブログ概要やFAQ回答

<p class="excerpt">ここに表示されるのは...</p>
<button class="read-more">続きを読む</button>

特徴：省略と全文表示の切り替えでUX向上。

トランケート実装時の注意点

アクセシビリティ：title属性の活用や、スクリーンリーダー対応を忘れずに。
レスポンシブ対応：画面サイズごとに適切な文字数制御を行う。
言語特性への配慮：日本語では句読点や助詞で切れると意味が通じにくくなる。
SEOとのバランス：見出しや重要なコンテンツにトランケートを使いすぎると、SEO的に不利になる場合も。

トランケート参考UIパーツ一覧

Material UI (MUI)

コンポーネント名：Typography + noWrap
公式リンク：Material UI (MUI)

<Typography noWrap>とても長いタイトルの例文...</Typography>

Tailwind CSS

ユーティリティクラス：truncate, line-clamp-*
公式リンク：Tailwind CSS

<p class="truncate">これは非常に長いテキストで...</p>
<p class="line-clamp-3">複数行の例文がここに...</p>

Bootstrap

ユーティリティクラス：.text-truncate
公式リンク：Bootstrap

<div class="text-truncate" style="width: 200px">長いテキストを省略します...</div>

Ant Design

コンポーネント：Tooltip, Typography.Paragraph
公式リンク：Ant Design

<Tooltip title="フルテキスト">
  <Paragraph ellipsis>フルテキストを省略表示...</Paragraph>
</Tooltip>

Vuetify (Vue.js)

コンポーネント：v-tooltip, v-text
公式リンク：Vuetify (Vue.js)

<v-tooltip top>
  <template v-slot:activator="{ on }">
    <v-text v-on="on" class="text-truncate">省略されたテキスト...</v-text>
  </template>
  <span>省略前のフルテキスト</span>
</v-tooltip>

まとめ

トランケートは単純なテキスト切り詰めから複数行対応、ツールチップとの組み合わせまで、使い方次第でユーザー体験が大きく変わります。特にレスポンシブデザインやアクセシビリティへの配慮が求められる今、適切なトランケートの設計と実装はUIの品質を左右します。本記事で紹介したUIパターンやライブラリの活用例を参考に、あなたのプロジェクトにも最適な形でトランケートを導入してみてください。

他にもクリエイターの収入アップ方法も紹介しているので、自分の給与に違和感がある方は覗いていってみてください。