テキストの切り捨てとコンテンツ クリッピングを防止する
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
スマートウォッチの画面サイズはハンドヘルド デバイスよりも小さいため、ユーザーがアクセスできるように要素を配置して表示し、利用可能な画面スペースを効率的に使用することが重要です。アイテムを画面に収めるには、マテリアル ガイドラインで指定されているとおり、適切な量のパディングとマージンを使用します。
デザインが画面に収まる場合でも、ユーザーが次のいずれかの操作を行うと、インターフェースの要素が切り詰められることがあります。
- 表示言語を変更します。
- 文字のサイズを変更します。
- [テキストを太字にする] システム設定を有効にします。
さまざまなユーザー環境にシームレスに適応できるように、これらの考慮事項を念頭に置いて設計をテストすることが重要です。
インタラクティブな要素を完全に表示されるようにする
インターフェースにインタラクティブな要素が含まれている場合は、ユーザーがこれらの要素を完全にスクロールして表示できることを確認します。特に、これらの要素がページの端に配置されている場合はなおさらです。アプリで Horologist ライブラリを使用する場合は、responsive()
レイアウト ファクトリを使用します。それ以外の場合は、スペーサーを使用して ScalingLazyColumn
オブジェクトの上部と下部にマージンを追加し、最初と最後のリストアイテムが常にクリップされないようにします。
高密度レイアウトにカードの代わりにチップを使用する
高密度のレイアウトが必要な場合は、カードではなく CompactChip
を使用します。カードの表面領域が大きいと、テキストの切り捨てやコンテンツの切り取りを防ぐことがはるかに難しくなります。
切り捨てとクリッピングに対する画面サイズの影響を考慮する
Wear OS デバイスの画面サイズに応じて、追加のテキストやボタンを表示するスペースを狭める、または大きくすることができます。
余白を固定せず、余白を考慮してデザインする
Wear OS デバイスの画面サイズにレスポンシブに適応するコンテンツを作成するには、各マージンのサイズを画面サイズに比例して、マージンの割合を適用します。アイテムが画面の上部または下部に配置されている場合は、内側のパディングを追加して、画面の湾曲した端からのコンテンツのクリッピングを最小限に抑えます。一方、コンテンツのグループが 1 つの画面に収まるほど小さい場合は、上下のスペースが増加します。

check_circle
すべきこと
コンポーネントは、サイズが画面サイズに合わせてスケーリングされるように、パーセントの余白に従う必要があります。これにより、画面のコンテンツは常に使用可能なスペース全体に表示され、画面の端で切り抜かれることはありません。

cancel
すべきでないこと
小さな画面で切り捨てられ、デザインの機能に影響する可能性があることを考慮せずに、テキストに使用できる最大スペースを使用しないでください。
小さい画面で必要な文字数制限を使用する
ほとんどの場合、大きい画面では切り捨てられる前により多くのテキストやコンテンツが表示されます。より多くの水平方向のスペースが利用できる場合でも、デバイス間で一貫したエクスペリエンスを実現するため、常に最小の画面サイズに設計してください。
たとえば、大きな画面で文字を切り取るためのスペースがボタンに確保されていても、それがユーザー エクスペリエンスに不可欠な重要な行動喚起の場合は、小型のデバイスの画面でも文字が切り詰められずに表示されるよう、十分な長さのテキストを使用します。
タイルに可変コンテンツ(サーバーから取得したテキストなど)が表示される場合、小さな画面ではそのテキストが切り捨てられる可能性を考慮してください。

check_circle
すべきこと
行動を促すフレーズのボタンなど、デザインの機能に影響を与えるテキストは、画面が小さいことを念頭に置いて設計されています。大画面ではスペースが増えるため、ブレークポイントの後にテキスト行が追加されます。テキストの行数は、コンポーネントとコンテキストによって異なります。

cancel
すべきでないこと
小さな画面では切り詰められて表示され、デザインの機能に影響する可能性があることを考慮せずに、大きな画面で最大スペースを消費するようなテキストを記述しないでください。
このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2025-07-27 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2025-07-27 UTC。"],[],[],null,["# Prevent text truncation and content clipping\n\nSmartwatches have smaller screen sizes than handheld devices, so it's critical\nto arrange and display elements in a manner that users can access and that\nefficiently uses the available screen space. To help your items fit the screen,\nuse the correct amount of padding and margins as specified by the\n[Material guidelines](https://m3.material.io/foundations/layout/understanding-layout/spacing).\n\nEven when your design fits the screen, elements of your interface may be\ntruncated or clipped when the user does one of the following:\n\n- Changes the display language.\n- Changes the text size.\n- Enables the **Bold text** system setting.\n\nIt's crucial to test your designs with these considerations in mind to ensure\nthey adapt seamlessly to different user environments.\n\nKeep interactive elements fully visible\n---------------------------------------\n\nIf your interface includes interactive elements, check that users can scroll\nthese elements fully into view, especially if these elements are placed at the\nedges of a page. If your app uses the [Horologist](https://github.com/google/horologist) library, use the\n[`responsive()` layout factory](https://github.com/google/horologist/blob/main/docs/compose-layout.md). Otherwise, use spacers and add margins to\nthe top and bottom of a [`ScalingLazyColumn`](/reference/kotlin/androidx/wear/compose/foundation/lazy/package-summary#ScalingLazyColumn%28androidx.compose.ui.Modifier,androidx.wear.compose.foundation.lazy.ScalingLazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.foundation.lazy.ScalingParams,androidx.wear.compose.foundation.lazy.ScalingLazyListAnchorType,androidx.wear.compose.foundation.lazy.AutoCenteringParams,kotlin.Function1%29) object to prevent the first and\nlast list items from always being clipped.\n\nUse chips instead of cards for dense layouts\n--------------------------------------------\n\nIf you need a denser layout, use [`CompactChip`](/reference/kotlin/androidx/wear/compose/material/package-summary#CompactChip(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function1,androidx.wear.compose.material.ChipColors,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ChipBorder)) instead of cards. The larger\nsurface area of cards makes it much more difficult to prevent text truncation\nand content clipping.\n\nConsider screen size effects on truncation and clipping\n-------------------------------------------------------\n\nDepending on the Wear OS device's screen size, you have a smaller or larger\nspace for additional text and buttons to be visible:\n\n### Design for percentage margins, not fixed margins\n\nTo create content that adapts responsively to the Wear OS device's screen size,\napply percentage margins, where the size of each margin is relative to the\nscreen size. In cases where items sit on the top or bottom of the screen, apply\nadditional inner padding to minimize content clipping from the screen's curved\nedge. In contrast, the space at the top and bottom increases when a group of\ncontent is small enough to fit on one screen.\n\ncheck_circle\n\n### Do\n\nComponents must adhere to the percentage margins so that their size scales with the screen's size. This way, the content of your screen always fills the space available and isn't cropped by the screen's edges.\n\ncancel\n\n### Don't\n\nDon't use the maximum space available for text without considering how it may truncate on smaller screens and affect the functionality of your design.\n\n### Use the character limits required by smaller screens\n\nIn most cases, larger screens can show more text and content before truncation.\nEven though more horizontal space might be available, however, always design for\nthe smallest screen size to create a consistent experience across devices.\n\nFor example, a button may have space for more characters on a larger screen\nbefore truncation, but if it's an important call to action that is vital to the\nuser experience, then use text that's short enough to appear entirely, without\ntruncating, on a small device's screen.\n\nAlternatively, if the tile shows variable content, such as text fetched from a\nserver, plan for the possibility that this text is truncated on smaller screens.\n\ncheck_circle\n\n### Do\n\nText which affects the functionality of your design, like call-to-action buttons, is designed with the smallest screen in mind. The additional space on larger screens can show additional lines of text after the breakpoint. The number of lines of text depends on the component and context.\n\ncancel\n\n### Don't\n\nDon't write text that consumes the maximum space available on a larger screen without considering how it may appear truncated on smaller screens and affect the functionality of your design."]]