Microsoft Swayを使う上で最低限知っておくこと

1. Swayとは

Microsoft Swayは、Web上で閲覧するレポート、案内ページ、プレゼンテーションなどを作成するMicrosoft 365系のツール。

PowerPointとの大きな違いは、作成者が各要素の位置やサイズを細かく決めるのではなく、文章・画像・動画などのコンテンツとその構造を指定し、実際のレイアウトはSwayに任せる点にある。

そのため、

PC・タブレット・スマートフォンに合わせて自動的にレイアウトされる
位置合わせや画像サイズの微調整がほとんど不要
一方で、列数や要素の位置などを厳密に指定するのは苦手

という特徴がある。

基本思想は「配置を作る」のではなく「コンテンツの構造を作る」と考えると分かりやすい。

2. 基本構造：Storyline → Card → Group

Swayの編集は主に「ストーリーライン（Storyline）」で行う。

基本単位はカード（Card）。

例えば、

見出し
テキスト
画像
動画
埋め込みコンテンツ

などが、それぞれカードになる。

複数のカードをまとめて表示したい場合はグループ（Group） にする。

概念的には、

Sway
├─ 見出しカード
├─ テキストカード
├─ 画像カード
├─ 画像グループ
│   ├─ 画像カード
│   ├─ 画像カード
│   └─ 画像カード
└─ 見出しカード

という構造になる。

HTMLのように細かなDOMを組むものではないが、

「コンテンツをカードとして並べ、意味のあるまとまりをグループ化する」

という理解で概ねよい。

3. StorylineとDesignを分けて考える

Swayには大きく、

Storyline
何を、どの順番で掲載するか

Design
それをどう見せるか

という2つの側面がある。

基本的にはStoryline側で、

見出し
↓
説明
↓
写真
↓
説明
↓
写真

という論理的な順番を正しく作ることを優先する。

最終的な見た目はDesign側で確認する。

PowerPointの感覚で「この画像を少し右に移動したい」といった調整を始めると、Swayの長所を失いやすい。

4. レスポンシブデザインが大前提

Swayは閲覧する端末や画面サイズに応じて、レイアウトを自動調整する。

そのため、編集時に見えている配置が、すべての端末でそのまま再現されるとは限らない。

例えば複数の画像をグリッドとして配置した場合でも、画面幅などに応じて列数や折り返し位置が変化することがある。

これは不具合ではなく、Swayが画面サイズに応じてレイアウトを決める設計だからである。

したがってSwayでは、特定の列数や位置関係を厳密に固定するよりも、表示環境が変化しても内容や意味が正しく伝わる構造にすることが重要になる。

5. 「配置」ではなく「意味」をグループ化する

レスポンシブデザインを使う上で特に重要。

複数の画像やコンテンツに意味的な関係がある場合は、それらを同じグループとして扱う。

例えば、

Before / After
表 / 裏
全景 / 拡大
製品 / 使用例

など、複数のコンテンツを一緒に見ることに意味がある場合はグループ化する。

Swayでは具体的な表示位置を細かく指定できないため、作成者は「どこに置くか」よりも「何と何が関連しているか」を構造として与える。

原則

見た目を作るためだけのグループ化ではなく、意味的に一緒に見せたいものをグループ化する。

6. 画像グループの種類

複数画像には用途に応じたグループ表示がある。

代表的には、

自動：Swayにレイアウトを任せる
グリッド：複数画像を一覧表示
スライドショー：画像を順番に表示
スタック：画像を重ね、めくるように表示
比較：2枚の画像を比較

など。

「全部グリッド」で済ませず、画像同士の関係で選択する。

特に比較は、変更前後や新旧比較などに向いている。

7. 画像の「フォーカスポイント」は重要

レスポンシブ表示では、画像が端末によってトリミングされる場合がある。

人物の顔、製品、建物など「ここだけは切れてほしくない」という部分がある画像では、**フォーカスポイント（Focus Points）**を設定する。

Swayはフォーカスポイントを考慮して画像を表示する。

したがって、

「画像サイズを調整する」より「何を見せたい画像なのかを指定する」

という考え方になる。

8. 強調は「サイズ指定」ではない

SwayではPowerPointのように、

幅 320 px
高さ 180 px

などと指定するのではなく、コンテンツの強調度を指定する。

つまり、

この画像は重要
この画像は補助的

という意味をSwayに伝え、具体的な表示サイズはSway側に決めさせる。

これもSway全体に共通する、

「具体的な配置」ではなく「意味・重要度を指定する」

という考え方の一部である。

9. ナビゲーション方式も選べる

Sway全体の閲覧方法は変更できる。

代表的には、

縦方向にスクロール
横方向にスクロール
プレゼンテーション的な表示

など。

一般的なWebページや説明資料なら、まず縦スクロールを基準に考えると扱いやすい。

「PowerPointのようなプレゼンテーション」として使うのか、「Web記事」として使うのかによって選択する。

10. 外部コンテンツを埋め込める

Swayは画像や文章だけでなく、対応サービスのコンテンツを埋め込める。

Microsoft 365系を含め、文書・動画・フォームなど様々なコンテンツを利用できる。

埋め込みコードを使用できる場合もあるが、任意のWebサイトを無制限に表示できるわけではなく、Sway側の対応状況や埋め込み先サービス側の制限を受ける。

外部コンテンツを利用するときは、閲覧者にもそのコンテンツへのアクセス権があるか確認する。

11. 見出しは「見た目」ではなく構造として使う

文字を大きくしたいから見出しにする、という使い方は避ける。

タイトル
  ├─ 見出し
  │   ├─ 本文
  │   └─ 本文
  └─ 見出し
      └─ 本文

のように、文書構造として見出しを使用する。

これは、

読みやすさ
アクセシビリティ
スクリーンリーダー
ナビゲーション

にも関係する。

12. 画像には代替テキストを設定する

意味のある画像には**代替テキスト（Alt Text）**を設定する。

特に、

グラフ
図
写真そのものが情報になっているもの

では重要。

単なる装飾画像なら、内容を無理に長文で説明する必要はない。

Swayにはアクセシビリティを確認するための機能もあるため、公開前に確認しておく。

13. PC画面だけを見て完成と判断しない

Swayではレスポンシブ表示が前提なので、最低でもPCとスマートフォン相当の表示を確認する。

特に確認するものは、

画像のトリミング
画像グループの並び
見出しと本文の関係
長い文章
埋め込みコンテンツ
画像内に文字を入れている場合の可読性

など。

「PCで美しく配置できた」ことより、画面幅が変わっても意味が壊れないことの方が重要。

14. Swayでやらない方がよいこと

Swayは万能なWebページ作成ツールではない。

次のような要求が重要なら、別のツールを検討した方がよい。

厳密なレイアウト

左から100px
幅400px
2列固定
高さを揃える

など。

印刷を前提とした帳票

A4一枚に正確に収める、といった用途。

複雑な表

Excelのような大きな表をSway上で直接表現する用途。

高度なWebページ

CSSやJavaScriptを細かく制御したい場合。

Swayは、

コンテンツの構造は人間が決め、具体的な表示方法はSwayに任せる

用途に向いている。

15. Swayを使うときの基本原則

迷ったら以下を基準にする。

やりたいこと	Swayでの考え方
画像を任意の位置へ移動したい	配置はSwayに任せる
画像を目立たせたい	強調度を指定する
画像の重要部分を残したい	フォーカスポイントを設定
複数の要素を関連付けたい	同じグループにする
表示順を決めたい	Storylineの順序を整理
セクションを分けたい	見出しを使う
PCとスマホで配置を変えたい	原則Swayに任せる
列数などを厳密に固定したい	Swayには不向き
外部サービスを表示したい	埋め込みを利用
公開前に確認したい	再生・複数画面幅・アクセシビリティを確認

16. 一言で理解するSway

PowerPointでは、

「どこに置くか」を作る。

Swayでは、

「何を、どの順番で、何と一緒に、どの程度重要なものとして見せるか」を作る。

実際の位置・大きさ・折り返しはSwayに任せる。

この違いを理解しておけば、Swayで不要なレイアウト調整に時間を使わずに済む。