［参考］Adobe Muse CC 2014 を使用したプロモーションページ作成［3］

Adobe Museには、デスクトップ、タブレット、スマートフォンの3つの編集画面があり、自動的にページを振り分けることができます。デスクトップしかない場合は、全てのデバイスで同じページが表示され、スマートフォンのページを追加すると、「デスクトップとタブレット」、「スマートフォン」の2つのページがデバイスによって振り分けられます。

通常、デスクトップのページはワイドスクリーン（横長）を前提にデザインしますが、スマートフォンの場合は、ポートレートモード（縦向き）がデフォルトだと考えてよいと思います。ランドスケープモード（横向き）にすれば、デスクトップの比率に近くなりますが、画面が小さいため、一覧性が極端に低下してしまいます。

現在のワークフローは、スマートフォンの縦向きで見やすい、読みやすいデザインを重視しており、写真やグラフィックなどのビジュアルについては、デスクトップとは異なる編集を加えることがあります。

更新日：2014年7月24日

---

大きな画面でも、小さな画面でも可読性を重視

以下は、書籍のプロモーションページですが、デスクトップとタブレットは共通、スマートフォンでは、ポートレートモード（縦向き）で読みやすいようにデザインしています。

Museの編集画面です。まず、トップカバーがデスクトップとスマートフォンで異なります。素材は共有していますが、画像の比率、タイトルの位置などを調整しています。
Adobe Illustratorを使用していますので、スマートフォン向けのトップカバー作成は15分もかかりません（デスクトップのデザインを加工するだけです）。

仕様［1］
タイトルは縮小せず、改行します。ただし、編集できないロゴタイプなどは縮小して配置。 水平方向に配置している構成要素は、垂直方向に並べ替えます。

仕様［2］
左から右に流れる図は、上から下へ変更します。 表組みは、内容にあわせて構造を決めなければいけませんが、列が少ない場合は、切り離して、垂直方向に並べます。

仕様［3］
スマートフォン向けに編集せず、デスクトップのデザインをそのまま表示した方がよい場合は、ランドスケープモード（横向き）でどの程度、読み取れるかチェックしておきます。

以下のページは、トップの見出しと下部の図を2種類作成しています。
作成を始める前から、デスクトップ＋タブレット、スマートフォンの2種類をデザインしていますので、Museでは配置するだけの作業になります。

本文については、デスクトップのテキストをコピーして、スマートフォンの編集画面にペーストします。テキストフレームのサイズをマウスで調整し、文字サイズを変更。ページのセクションごとに「レイヤー」パネルで管理されていれば、面倒な作業にはなりません。
※レイヤーで管理されていないと、煩雑な作業になってしまいます。

図は、あらかじめ作成しておきますので、Museではそれぞれ配置するだけです。
作成する図は、Adobe Illustratorをお奨めします。ここでも、レイヤーで図のオブジェクトを管理しておくと、編集しやすくなります。

スマートフォンの表示確認は、iOSシミュレーターを使っています。
Museの（スマートフォン）プレビューでは、擬似的な表示になってしまうため、使用していません。
最終的には、必ず「実機検証」をします（実際にスマートフォンで確認します）。

別件では、Dreamweaverを使ってレスポンシブデザインのページを作成していますが、シングルページであれば、作り分けの方が速く、難易度もかなり下がります。
ほぼ、グラフィックデザインのスキルで実行できますので、当面このワークフローで進めていきたいと思います。

---