Sketch 2026.3 Stacks の使い方：レイアウト改版ガイド

まず、改版対象を二つに分けます。テキストの長さ、親コンテナの幅、子項目の数が変わる部品はStacks向きです。一方、ポスターのような固定配置や、装飾の位置そのものがデザインになる画面は、通常の配置を残す方が管理しやすい場合があります。

Sketch公式のFlorence（2026.3）では、Stacksに最小サイズ、最大サイズ、相対サイズ、負の間隔、重なり順、境界線をレイアウト計算へ含める設定が追加されています。利用にはmacOS 15 Sequoia以降が必要です。詳細はFlorenceの公式更新記録とStacksの公式機能説明で確認できます。

旧ファイルでは、開いて表示できたことだけで合格にしません。複製を作り、元の共有ファイルを保護してから、代表コンポーネント、長い文言、書き出し画像、プロトタイプ表示を順に確認します。

カードは、Stacksの効果を確認しやすい部品です。見出し、本文、操作ボタンを縦方向に並べ、本文は内容に応じて伸びる設定にします。ボタンは必要な幅を維持し、カード全体には最小幅と最大幅を設定します。

最大幅は、長文が横へ伸び続けるのを防ぐために使います。最小幅は、ボタンやタグが押しつぶされて読みにくくなる状態を防ぐために使います。相対サイズは便利ですが、任意の画面幅で自動的に美しい比率を保証する機能ではありません。

検証では理想的な短文だけを使わないでください。短いタイトル、長いタイトル、画像なしの状態を用意します。本文が増えたときにボタンが押し出されるか、画像がないときに余白が残りすぎないかを確認します。

ナビゲーションバーでは、ロゴやアイコンを固定側に置き、検索欄や中央メニューなどを可変側に分けます。複数の要素に「残りの空間を埋める」設定を同時に付ける場合は、どの要素が優先して広がるのかを決めておく必要があります。

相対サイズは、親の大きさに応じて子要素の比率を変えるための指定です。固定サイズと同じ感覚で使うと、狭いコンテナで文字が切れたり、ボタン同士が接近したりします。Stacksレイアウトの公式ヘルプにあるサイズと余白の説明を確認し、役割ごとに設定を分けます。

検証するのは一つの画面幅だけでは足りません。広いコンテナ、標準的なコンテナ、狭いコンテナで、文字の省略、ボタンの窮屈さ、左右の揃い方を確認します。崩れる幅が見つかったら、相対指定を固定指定へ戻す要素を決めます。

アバターの列、複数タグ、装飾カードでは、負の間隔が有効です。要素同士を少し重ねることで、横幅を抑えながらグループとして見せられます。ただし、重なりを設定しただけでは前後関係まで意図どおりになるとは限りません。

重なり順を指定し、どのアバターが前面に来るかを固定します。Sketch公式のStacks説明でも、負の間隔と重なり順は別々に扱われています。したがって、見た目だけでなく、クリック対象の順序も確認してください。

視覚的な範囲とクリック範囲は一致しないことがあります。プロトタイプで背面の要素が選べるか、書き出し画像で遮蔽が正しいか、開発用の寸法やレイヤー名が誤解を招かないかを納品前に確認します。

入力欄、通知ボックス、境界線付きボタンは、線の扱いで余白がずれやすい部品です。境界線を外側に描くのか、中央に描くのかによって、レイヤーの寸法とレイアウト上の範囲が変わります。

外側の境界線をレイアウト計算へ含める設定は、隣接要素との間隔を実際の外周に合わせたい場合に向きます。中央の線を含める場合は、見た目の線幅を含めた寸法と、内部の余白を分けて確認します。公式の境界線レイアウト説明では、この計算方法の違いが整理されています。

フォームは通常状態だけで判断しません。入力中、エラー、無効の各状態で、ラベル、補足文、境界線、ボタンの位置を確認します。エラー文が増えたときに下の要素が自然に移動するかも、コンポーネントの受け入れ条件に含めます。

次の表で、Stacksを使う範囲とMac編集環境の必要度を切り分けます。

旧コンポーネントがSketch 2026.3で新しい挙動へ自動的に置き換わるとは限りません。表示が変わった場合は、ライブラリ全体を一度に直さず、影響を受けた部品を特定して局所的に再レイアウトします。

次の順番で作業します。

1. 共有中の原本を複製し、変更前の版を保存します。
2. カード、ナビ、フォームなど代表的な部品を一つずつ選びます。
3. 短文、長文、画像なし、エラー状態の内容を流し込みます。
4. 親コンテナの幅を変え、切れ、過密、余白の偏りを記録します。
5. プロトタイプ、書き出し画像、開発用の検査表示を確認します。
6. 問題がなければ対象部品だけをライブラリへ反映し、他の画面を再確認します。

Windowsのチームメンバーは、ウェブ上で閲覧、コメント、検査を担当できます。しかし、Macアプリと同じ完全な原本編集ができるわけではありません。Workspaceの役割と権限およびドキュメント権限の公式説明を基準に、編集者と確認者を分けます。

Sketchファイルを開く方法や、ウェブ上での扱いには条件があります。公式のドキュメント作成・表示ガイドも、チームの手順書へ加えておくと混乱を抑えられます。

Sketch 2026.3で最小・最大サイズをどう決めるか

最小サイズは、ボタンやラベルが読めなくなる直前ではなく、余白と操作性を保てる幅に設定します。最大サイズは、長文カードの可読性やナビゲーションの密度を基準にします。実際の文言を入れた状態で決めることが重要です。

Stacksで幅を親コンテナに合わせる方法

可変にしたい要素へ相対サイズまたは残りの空間を埋める設定を使い、ロゴやアイコンなどは固定側に残します。すべての要素を可変にするのではなく、役割ごとに固定と可変を分けると、狭い画面での崩れを見つけやすくなります。

旧ファイルのレイアウトが変わった場合

原本を保存したまま複製で検証します。崩れた部品だけを切り出し、状態別の内容と複数の幅で再レイアウトします。修正後は、元画面、プロトタイプ、書き出し画像を比較し、ライブラリ全体へ反映する前に承認を取ります。

Windowsから完全編集できるか

Windowsからは、チームの権限に応じて閲覧、コメント、検査を進められます。ただし、Stacksの設定変更や原本の完全編集が必要な作業では、macOS 15 Sequoia以降のMacアプリが必要です。短期作業なら遠隔Mac、継続運用なら固定のMac環境を検討します。

レビューとコメントが中心なら、ウェブ上の協業で足ります。原本をたまに修正する場合は、必要な期間だけ遠隔Macの利用環境を確保する方が、使わない期間まで実機を抱えずに済みます。

コンポーネントライブラリを毎週更新し、書き出しや検査を繰り返すチームは、安定したMac編集環境を優先します。自前で購入する場合は、Mac miniの導入条件も比較対象にしてください。長期の高負荷作業や物理機器との接続が中心なら、レンタルより自社管理のMacが適しています。

一方、現在のWindows中心の方法は、Sketchの完全編集に切り替えるたびに作業環境を変える負担があり、macOS専用の設定確認や原本修正をウェブだけで完結できません。固定のMacを購入すると初期費用、保守、利用しない期間のコストも発生します。代表コンポーネントの検証が終わった段階で、レビューだけならウェブ、偶発的な改版ならMESHLAUNCHの遠隔Mac、継続的なライブラリ運用なら固定Macという分け方が現実的です。