フレックスレイアウトとは何か(8終)オブジェクトスタイル

2026年01月16日

長い連載になっていますが今回で終わりです。

なおこの連載は、InDesign 2026のバージョ21.0~21.1時点での情報であることを改めて記載しておきます。というのInDesignプレリリースでちょっと困った情報がありまして、もしかすると記事内容を大幅に変更しなければならない可能性が出てきたからです。これ以上申し上げることはできませんが、将来「画像が違う」「機能名が違う」といったことがあるかもしれません。あらかじめご了承ください。


オブジェクトスタイルにフレックスレイアウト関連の設定が追加されていることを説明していないことに気づきましたので、追記します。この連載の初回(路線図)からオブジェクトスタイルを使っていたのですが、説明が抜けていました。

実はフレックスアイテムを複製した際に「間隔を埋める」設定が「固定」に戻ってしまうことが何回かありました。そのためフレックスレイアウト項目だけを設定したオブジェクトスタイルを作成し、それを適用することで素早く変更できます。

 

ここで注意が必要なのは「塗り」じゃねえぇーーーー!ってところ。整理するとこうなります。

場所 原文(英語版) 日本語版
フレックスレイアウトパネルでフレックスアイテムを選択したときのWとH Fill Space 間隔を埋める
オブジェクトスタイルパネル内「フレックスレイアウトの子要素のWとH Fill 塗り

そもそも英語版で「Fill Space」を「Fill」と略したのが間違い。だから日本語訳も間違ってしまう。(指摘したはずなんだけど直ってない)

ということでやっぱり苦言を呈さずにはいられないのでした。


前々回で、「Adobe XDのユーザーガイドのレスポンシブサイズ変更にある最初の例を(フレックスレイアウト機能を使って)InDesignで実現する」ことを予告していましたが、これはボツになりました。理由は「フレックスレイアウトを使わなくても実現できたから」です。

別にフレックスレイアウトを使わなくていいじゃん、意味なかった」ということです。なかなCSS Flexboxに近い例が出てきませんね。

以上で今回の連載は終わりです。バージョンアップで機能改善があるか、新たな使い方を見つけたときにまた、フレックスレイアウトについて書くと思います。


おまけで、XDのユーザーガイドの例の作り方を書いておきます。下にあるレイヤーから順に説明します。

まず下部のカード部分ですね。これは1枚の画像です。別InDesignのドキュメントを貼ってもよかったのですが。

次は上部の画像です。フレーム調整オプションで「自動調整」にチェックを入れておけば基本的OK。

その上は「POPULAR」「RECENT」と書かれているボタンですね。これはテキストフレームで、テキストを中央揃えにしてアンカー付きオブジェクトを配置しているだけ。中央揃えであればテキストフレームの大きさがどうであろうと中央に来ますからね。

テキストフレームは塗りにグラデーションオーバーレイ効果を掛けていて、上部の画像の下側に重ねています。

最上位が3段組のテキストフレームです。文字色は紙色なんですが、説明用にマゼンタに変更しています。各行はそれぞれ中央揃えですね。

一番上の行は段抜きになっています。

上4つのオブジェクトをグループ化して完成です。やってみたら改めInDesignのテキスト機能は有能だと思いました。