どのサイズにも合うデザインにする

ウィジェットは、ページ上で好きな大きさに配置できます。下端に沿った細い帯、隅の小さな正方形、横に沿った縦長の列、あるいは画面全体。よいウィジェットは、どのサイズでも狙いどおりのデザインに見えます。コツは、小さな枠では、同じものを縮小するのではなく、見せる内容を減らすことです。

すべてのサイズでプレビューする

ウィジェットスタジオのプレビューの上にあるプレビューサイズのタブで、よく使われる形にしたときのウィジェットを確認できます。

プレビューサイズ	形	向いている内容
正方形	stack	メインのブロックと、その下に少しの詳細
レンガ	compact	いちばん大事なものひとつだけ
ワイド	side	メインのブロックと、その横に詳細
バナー	band	1行だけ
トール	stack（縦長）	下に詳細を多めに入れられる
カラム	narrow	上から下へ1列に積み重ねる
フル	side（縦長）	画面全体。見せたいものをすべて表示できる

プレビューの端をドラッグすれば、その間のどんなサイズでも試せます。公開する前に、すべてのタブを確認してください。公開すると、Blotchはウィジェットライブラリ用に、各サイズでのウィジェットのプレビューも保存します。

形からレイアウトを考える

useLayoutShapeは、ウィジェットが埋めるべき形を教えてくれます。それに合わせてレイアウトを選びましょう。

import { Display, Paragraph } from "~lib/typography";
import { useLayoutShape } from "~lib/use-layout-shape";

export const Widget = () => {
  const { shape } = useLayoutShape();
  const temperature = <Display>18°</Display>;
  const summary = <Paragraph>Sunny, with a light breeze.</Paragraph>;

  if (shape === "compact") {
    return <div className="flex size-full items-center">{temperature}</div>;
  }

  if (shape === "band" || shape === "side") {
    return (
      <div className="flex size-full items-center gap-4">
        {temperature}
        {summary}
      </div>
    );
  }

  return (
    <div className="flex size-full flex-col gap-2">
      {temperature}
      {summary}
    </div>
  );
};

tallは、ワイドに対するフルのように、同じ形をゆったり使えるだけの高さが枠にあるかどうかを表します。幅を自分で判定するのではなく形を使えば、ほかのすべてのウィジェットと同じサイズでレイアウトが切り替わります。

クラスを使う方法

余分な1行を隠すといった小さな変更なら、ウィジェット自身のサイズに反応するTailwindのクラスを使うほうが簡単です。

クラスの接頭辞	ウィジェットが次のときに適用
@sm:	細い列以上の幅がある
@md:	画面の半分以上の幅がある
@lg:	メインのブロックの横に、もうひとつブロックを置ける幅がある
short:	バナーのように、低くて横長
compact:	レンガのように、低くて小さい
tall:	トールやフルのように、縦に長い

@max-sm:、@max-md:、@max-lg:は、それぞれの幅を下回るときに適用されます。たとえばclassName="short:hidden"は帯状のときに要素を隠し、className="flex flex-col @lg:flex-row"は幅に余裕ができると2つのブロックを横に並べます。

これらは画面ではなくウィジェットの枠を測ります。sm:やmd:といった、Tailwindの画面サイズ用の接頭辞は使わないでください。

正確なサイズは、リファレンスのブレークポイントを参照してください。

枠まわりはフレームに任せる

ウィジェットを配置する人が、枠線と余白を選び、必要なら上部に名前のバーも表示します。Blotchはそれらをウィジェットの周りに描き、その内側のスペースだけをウィジェットに渡します。そのため、次の点に気をつけてください。

• ウィジェットの周りに余白を付けないでください。コンテンツは枠の端まで広げます。
• ウィジェットの名前を示すタイトルを付けないでください。名前はフレームが表示できます。見出しは、試合の対戦チームや映画のタイトルなど、コンテンツのために使います。

枠線を付けたときの見た目は、プレビューの上にある枠線メニューで枠線を設定して確認できます。

はみ出さずに収める

枠の端からはみ出したコンテンツは切り取られます。中に収めるためのポイントは次のとおりです。

• 枠の大きさから計算したピクセル値ではなく、パーセンテージやflexboxでサイズを決めます。
• タイポグラフィーのコンポーネントを使います。テキストを指定した行数までに抑え、末尾を「…」で終えられます。
• 残りの高さをすべて使うブロックはBrimで囲みます。切り取られる部分が、きれいにフェードアウトします。