モバイルデバイス向けやスマートフォン向けの Web サイトを作成する方法については、この記事をお読みください。

注意:

Adobe Muse は、新しい機能が追加されなくなり、2020 年 3 月 26 日にサポートが中止される予定です。詳細な情報と支援については、Adobe Muse のサービス終了ページを参照してください。

Adobe Muse のレスポンシブ Web デザインを使用すると、モバイル向けの Web サイトを作成し、デザインすることができます。レスポンシブレイアウトで単一の Muse ファイルを使用し、モバイルを含むすべてのデバイス向けの Web サイトを作成できます。

まず、Web サイトを表示させるブラウザーの幅を決定してください。その後、サイトのデザインを続けることができます。レスポンシブレイアウトを使用してモバイルサイトを作成する方法については、「レスポンシブ Web サイトの作成」を参照してください。

モバイル専用のサイトの代替レイアウトをデザインする場合は、以下の記事を参照してください。

モバイル限定 Web サイトのデザイン

Adobe Muse を使用すると、デスクトップ、スマートフォン、タブレットに表示する Web コンテンツのサイトレイアウトを作成できます。モバイルデザイン機能を使用すると、デスクトップだけでなく、スマートフォンやタブレットでの体験を味わうことができる代替レイアウトを作成できます。

Adobe Muse には、100% 幅の切り替えやスティッキーフッターなどの設定が含まれており、作成したデザインを現在市販されている多数のデバイス画面でうまく表示できます。Adobe Muse では、使い慣れたワークフローを使用して、あらゆる可能な画面寸法に合わせた魅力あふれるデザインを作成できます。

モバイル向けの代替レイアウトを作成するには、以下を実行します。

  1. Adobe Muse を開き、ファイル/新規サイトをクリックします。

    固定幅を選択し、特定デバイス向けの Web サイトを作成します。
    固定幅を選択し、モバイル Web サイトを作成します。

  2. 固定幅を選択し、同じダイアログボックスの「詳細設定」をクリックします。

    新規サイトの詳細設定
    新規サイトを作成するための詳細設定。

  3. 「最大ページ幅」を指定します。

    モバイル電話向けに適切なブラウザー幅を決定し、値を入力します。

  4. モバイルサイト向けにインデントとパディングの値を入力します。次の詳細を入力します。

    • ページの幅と高さ:ページの初期寸法を設定できます。ページの高さは、コンテンツを追加し続けるにつれて自動的に増えるため、ページの高さの最大値は設定しません。
    • 段落数と段落の幅:段落は、Muse Web ページを視覚的に均等となるように分割するため、デザインエレメントを正確に整列することができます。Muse は、指定した段落数と間隔値に応じて「段落の幅」を自動的に設定します。
    • インデントおよびパディング:インデントは、デザインエリアの外側にある Web ページの周囲のエリアをクリアします。パディングにより、Web ページのデザインの周囲内のエリアをクリアできます。

    「OK」をクリックします。

    モバイル Web サイト向けの、レイアウトのデザインを開始できます。

既存の Adobe Muse サイトへのスマートフォンレイアウトの追加

新規プロジェクトを作成する場合は、まずレイアウトのいずれかをデザインすることを選択し、次にその他のレイアウトを作成できます。すべて同じ .Muse ファイルに保存されます。  サイトをパブリッシュするか書き出すと、すべてのレイアウトについて、すべてのページのリストを含む、sitemap.xml という名前のファイルが自動的に生成されます。sitemap.xml ファイルは、他のサイトアセットと共にアップロードされます。これにより、検索エンジンがサイトのインデックスを作成しやすくなり、サイトの SEO(検索エンジン最適化)が向上します。このため、検索結果においてページが正確にランク付けされます。

スマートフォン用に新しいモバイルレイアウトを作成するには、既存のサイトに対して最初にすることの 1 つとして、コンテンツを確認し、スマートフォンのユーザーエクスペリエンスにどのアイテムが必要かを特定することが挙げられます。スマートフォンによる訪問者は外出中である場合がよくあり、コンテンツを小さい画面で表示するため、デザインを簡単にし、タッチスクリーンで有効かつ操作しやすいコンテンツのみを表示する必要があります。

  1. 代替スマートフォンレイアウトを追加する、既存の .Muse ファイルを開きます。

  2. プロジェクトの各ページを開き、「ページ/代替レイアウトを追加/スマートフォン」をクリックします。

    スマートフォンレイアウトオプションの追加
    スマートフォンレイアウトを追加してモバイルサイトを作成

  3. メニューを使用して、コピーする既存のレイアウトを選択できます。この記事の趣旨に従って、「デスクトップ」を選択してデスクトップレイアウトをスマートフォンレイアウトにコピーします。

    サイトプランページ属性およびブラウザー背景をコピーすることもできることに注意してください。既存のデスクトップサイト情報をスマートフォンレイアウトにコピーするため、初期設定のままとします。

  4. 「OK」をクリックしてダイアログボックスを閉じ、スマートフォンレイアウトを追加します。

    スマートフォンレイアウト用のサイトプランが作成されます。ページ名、サイトの構造、マスターページの属性が上書きコピーされます。Muse プロジェクトにスマートフォンレイアウトが追加されたため、「スマートフォン」レイアウトボタンは、名前の横にプラス(+)記号が表示されなくなります。

    スマートフォンレイアウトのページサムネールには、実際のページコンテンツは追加されません。これは仕様どおりの動作です。実際に必要なコンテンツだけをモバイルレイアウトの各ページにコピーできるようにするためです。追加するコンテンツは新しい各ページに移動するとき、モバイル画面の小さな寸法に収まるように縮小できます。

    ホームページの右側にあるプラス記号をクリックして、新しいページを追加できます。サイトマップの設定が完了したら、モバイル体験のデザインを開始できます。

    次のセクションでは、スマートフォンレイアウト向けのマスターページの設定方法について説明します。

    新しいページを追加して、モバイルレイアウト用のサイトマップを作成します。
    新しいページを追加して、モバイルレイアウト用のサイトマップを作成します。

マスターページの設定と共通 Web ページエレメントの追加

  1. プランビューで A-マスター電話ページをダブルクリックすると、ページがデザインビューで開きます。

  2. ブラウザー背景インターフェイスを使用して背景画像を設定します。

  3. 画像セクションで、「画像を追加」をクリックします。背景画像として設定するファイルを参照して、選択します。

    画像を追加オプション
    背景画像をスマートフォンマスターページに追加します。

  4. サイズ調整オプションを 「全体に拡大・縮小」に設定し、中心の位置をクリックします。

  5. ページの外側のグレーの領域をクリックするか、コントロールパネルの任意の場所をクリックして、ブラウザー背景インターフェイスを閉じます。

サイトナビゲーション用ハイパーリンクの追加

Adobe Muse では、ハイパーリンクを使用して外部ページ、ダウンロード可能ファイル、Web ページ内のセクションなどに簡単にリンクできます。ユーザーのサイトに適切なナビゲーションを設定することは、訪問者がユーザーの Web サイトページ内を簡単に移動できるようにするために重要です。サイトナビゲーションを上手に構成することにより、ユーザーの Web サイトは検索エンジンに対しても最適化されます。詳しくは、ハイパーリンクの作成を参照してください。

ユーザーのサイトマップに追加されたハイパーリンクドロップダウンリストページまたはアンカーリンク。正しいリンクを検索するために、ページまたはアンカーの名前の入力を開始します。最初の数文字を入力するだけで、ハイパーリンクメニューによって結果がフィルタリングされ、ドロップダウンリストに表示されます。これにより、更新するリンクにすばやく簡単にアクセスできます。

ハイパーリンクのオプション
ハイパーリンクメニューのフィールドで最初の数文字を入力して、リンクのリストをフィルタリングします。

スマートフォンレイアウトページへのコンテンツの追加

ホームページの仕上げに取り掛かります。

  1. 「インテリア(スマートフォン)」タブをクリックします。番号の付いた 4 つのボタンのグループ全体をコピーします。
  2. ページへ移動機能を使用してホーム(スマートフォン)ページに移動し、グループをペーストします。前述のセクションで追加したリンクが保持されるので、ホームページとインテリアマスターページの両方が同じナビゲーションを共有します。
  3. 選択ツールを使用して、ホームページの中央で、フッターの下部の付近にグループを配置します。
  4. 「スクラッチ(デスクトップ)」タブをクリックして、スクラッチページに戻ります。一番左のポッドにある、「問題を解決するには、複数の方法があります」というテキストフレームをコピーします。
  5. 「ホーム(スマートフォン)」タブをクリックして、このテキストフレームをペーストします。選択ツールを使用して、テキストフレームがボタンのグループの上部で、中央に整列されるように配置します。
Home ページのデザインの完了
Home ページのデザインが完了しました。

次に、セクション 01 ページのページコンテンツを追加します。

  1. 「スクラッチ(デスクトップ)」タブをクリックして、スクラッチページに戻ります。左から 2 番目のポッドで、背景にある白い角丸長方形と 3 つのテキストフレームを選択します。3 つのテキストフレームには、円 01、セクション 01 のプレースホルダーのテキストおよびオレンジ色の電話ボタンが含まれます。選択されたアイテムをコピーします。
  2. Command+J キー(Mac)または Control+J キー(Windows)を押して、セクション 01 の最初の数文字を入力します。下向き矢印をクリックして、セクション 01 のスマートフォンページを選択してから、Return/Enter キーを押し、デザインビューでこのページを開きます。
  3. スマートフォンレイアウトのセクション 01 ページに要素をペーストします。選択ツールを使用して、一時的に表示されるガイドを使用して要素をページの中央に配列します。

ビジネスの内容を手短に紹介し、モバイル訪問者が簡単に電話をかけられるようにすることが、セクション 01 ページの目的です。モバイル Web サイトをデザインする場合は、訪問者が画面をタップして、スマートフォンの電話ダイヤラを起動し、電話番号をかけられるように新しいタイプのリンクを追加できます。潜在的な顧客がビジネスに電話をかけるのが非常に簡単になるので、これは優れたモバイルサイト機能です。

電話番号をダイヤルするためのリンクをモバイルレイアウトに追加するには、次の手順に従います。

  1. 選択ツールを使用して、電話ボタンを選択します。
  2. リンクメニューのフィールドで、次のように「tel:+1」と入力してから電話番号を入力します。
    tel:+14155551234

この形式を使用すると、モバイルブラウザーが電話番号のリンクを認識できます。

  1. Return キーまたは Enter キーを押してリンクを保存します。

注意:電子メールのリンクを作成する場合は、ハイパーリンクメニューのフィールドに次の形式で入力します。
mailto:designers@design-is-fun.com

電話ボタンにリンクを追加すると、セクション 01 ページのデザインは完了です。

  1. 「スクラッチ(デスクトップ)」タブをクリックして、スクラッチページに戻ります。背景にある白い角丸長方形、緑色の円 02、セクション 02 のテキストフレーム、埋め込み地図および緑色の地図ボタンを選択します。選択されたアイテムをコピーします。
  2. Command+J キー(Mac)または Control+J キー(Windows)を押して、セクション 02 の最初の数文字を入力します。下向き矢印をクリックして、セクション 02 のスマートフォンページを選択してから、Return/Enter キーを押し、デザインビューでこのページを開きます。
  3. 手順 1 でコピーした要素をスマートフォンレイアウトのセクション 02 ページにペーストします。選択ツールを使用して、整列ガイドを使用して要素をページの中央に配列します。

セクション 02 ページには、インタラクティブマップを作成するために Google マップ Web サイトで生成された埋め込み HTML コードが含まれます。

「Muse をはじめる前に」というタイトルのチュートリアルの手順に従った場合は、Google Web サイトから Google マップのソースコードをコピーし、Muse の埋め込み HTML 機能を使用してページにペーストしたことを覚えているでしょう。

幸いなことに、Google マップのコードにはタッチスクリーン上での指ジェスチャーのサポートが含まれているので、デバイスを使用する訪問者が簡単にマップとやり取りできます。このサンプルプロジェクトでは、マップのサイズが既に変更されています。

ただし、プロジェクトで埋め込み HTML コンテンツのサイズを変更する必要がある場合は、コンテンツを右クリックして、HTML を選択して HTML ウィンドウにコードを表示できます。コード内で高さと幅の値を編集して、マップが小さい画面に収まるようにサイズを変更します。

コード内の埋め込み HTML 要素サイズの変更
埋め込み HTML 要素のサイズを変更する必要がある場合は、コードで寸法を更新できます。

HTML を編集ウィンドウを開いた場合は、「OK」をクリックして、変更を加えずにウィンドウを閉じます。

  1. マップボタンを選択します。

このとき、外部 Web サイト(Google マップ)にリンクを追加すると、モバイル訪問者が新しいブラウザーウィンドウでフルバージョンのマップにアクセスするのが簡単になります。

  1. 下のリンクをコピーしてリンクメニューのフィールドにペーストします。

https://maps.google.com/maps?q=adobe+systems,+san+francisco&hl=en&sll=37.269174,-119.306607&sspn=17.492546,19.160156&hq=adobe+systems,&hnear=San+Francisco,+California&t=m&z=14

  1. リンクメニューの左側にあるリンクという文字をクリックします。ここで表示されるダイアログボックスで、「新規ウィンドウまたは新規タブでリンクを開く」チェックボックスをオンにします。また、ツールヒントフィールドで、Map to Adobe Fremont というテキストを入力します。
ハイパーリンクのオプション
新しいブラウザーウィンドウを開くためのリンクを設定し、ツールヒントを追加します。

  1. リンクダイアログボックスから離れた位置をクリックして閉じます。

次に、セクション 03 ページのページコンテンツを追加します。

  1. 「スクラッチ(デスクトップ)」タブをクリックして、スクラッチページに戻ります。背景にある白い角丸長方形、紫色の円 03、セクション 03 のテキストフレーム、コンタクトフォームおよび「送信」ボタンを選択します。選択されたアイテムをコピーします。
  2. Command+J キー(Mac)または Control+J キー(Windows)を押して、セクション 03 の最初の数文字を入力します。下向き矢印をクリックして、セクション 03 のスマートフォンページを選択してから、Return/Enter キーを押し、デザインビューでこのページを開きます。
  3. 手順 1 でコピーした要素をスマートフォンレイアウトのセクション 03 ページにペーストします。選択ツールを使用して、整列ガイドを使用して要素をページの中央に配列します。スマートフォンレイアウトにコピーする場合、デスクトップのコンタクトフォームウィジェットに適用されたスタイルは維持されます。モバイルレイアウトのフォームを準備するために加えた唯一の変更は、小さい画面に収めるためのフォームおよびフォーム要素のサイズ変更です。

セクション 03 ページには、Business Catalyst のサーバー側スクリプトとデータベースを使用して送信されたフォームデータを処理するコンタクトフォームウィジェットが含まれます。「パブリッシュ」をクリックして、Muse からサイトファイルをアップロードすると、フォーム機能が自動的に動作します。

注意:他のサービスプロバイダーを使用して完成した Muse Web サイトをホストできますが、Business Catalyst サーバーでサイトがホストされない場合、コンタクトフォームを機能させるため、追加のコーディングが必要になります。

このサンプルプロジェクトでは、コンタクトフォームで CAPTCHA が有効になっていません。CAPTCHA はコンタクトフォームウィジェット用オプションメニューの設定です。スクリプトまたは「スパムボット」ではなく、人間によってフォームが送信されたことを確認する場合に追加できます。CAPTCHA のインターフェイスには、一連の文字と画像が表示されます。訪問者が正常にフォームを介して自分のメッセージを送信するには、この文字列と同一の文字列を入力する必要があります。スパムボットによるフォーム送信への対策は面倒になる可能性があるため、携帯電話でのサイトの使いやすさを考慮することも重要です。フォームへの入力が難しすぎると、訪問者はメッセージの送信を断念する恐れがあります。

セクション 03 ページが完了しました。「送信」ボタンは既にコンタクトフォームウィジェットの一部として設定されているため、このボタンにリンクを追加する必要はありません。

スマートフォンレイアウトの最後のページ、セクション 04 には、スライドショーウィジェットが含まれます。Muse 内のウィジェットは、すべての最新デスクトップやモバイルブラウザーで動作するように設計され、テストされているので、タッチスクリーンでスライドショーを動作させるために変更を加える必要はありません。

デスクトップレイアウトのスクラッチページから、スマートフォンレイアウトのセクション 04 ページにコンテンツをコピーするには、次の手順に従います。

  1. 「スクラッチ(デスクトップ)」タブをクリックして、スクラッチページに戻ります。背景にある白色の長い長方形、赤色の円 04、スライドショーウィジェットおよびセクション 04 のテキストフレームを選択します。選択ツールを使用すると、すべての要素をクリックしてドラッグし、一度に選択できます。選択されたアイテムをコピーします。
  2. Command+J キー(Mac)または Control+J キー(Windows)を押して、セクション 04 の最初の数文字を入力します。下向き矢印をクリックして、セクション 04 のスマートフォンページを選択してから、Return/Enter キーを押し、デザインビューでこのページを開きます。
  3. 手順 1 でコピーした要素をスマートフォンレイアウトのセクション 03 ページにペーストします。選択ツールを使用して、整列ガイドを使用して要素をページの中央に配列します。スマートフォンレイアウトにコピーする場合、デスクトップのコンタクトフォームウィジェットに適用されたスタイルは維持されます。モバイルレイアウトのフォームを準備するために加えた唯一の変更は、小さい画面に収めるためのフォームおよびフォーム要素のサイズ変更です。インタラクティブな機能のあるウィジェット(スライドショーウィジェットなど)を Muse で作成したモバイルレイアウトに追加すると、オプションパネルに「スワイプを有効にする」オプションが表示されることがわかります。デフォルトでは、この設定が有効になっているので、モバイルデザインに追加したすべてのウィジェットは、訪問者がタッチスクリーンにタップしてジェスチャーを使用できるように自動的に設定されます。セクション 04 には、サムネールをタップしたときに対応する画像を表示するスライドショーウィジェットが含まれます。スライドショーは、ギャラリー内の画像をめくる水平トランジションを使用するように設定されています。この例では、写真を表示するためのユーザー操作が要求されます。しかし、ユーザー操作を選択した場合でも、スライドショーウィジェットによる自動再生を選択できるので、ページを読み込んだときに、画像が自動的に切り替わります。

注意:スライドショーウィジェットでフェード水平、または垂直トランジションを使用するように設定する場合、Muse 内のコードが自動的に指でスワイプジェスチャーを有効にするので、訪問者はタッチスクリーンをスワイプしてスライドショーの画像をめくるように表示できます。

次のセクション「Adobe Muse でモバイル Web サイトを作成する」では、すべてのモバイルプラットフォームで簡単にアセットを更新する方法、各モバイルレイアウトに対して Muse サイトをパブリッシュする方法について学習します。

モバイル Web サイト用アセットの更新と最適化

デスクトップコンピューターに比べると、タブレットやスマートフォンでは、プロセッサーの性能に限界があり、接続速度が遅く、ストレージ容量も小さいです。この結果、モバイルデバイス向けにサイトのデザインを設計し、配信する場合は、特別な配慮が必要です。

Muse は、サイトをすばやく読み込み、許容可能な性能を保証するため、モバイルのレイアウトで表示されるグラフィックの最適化に役立つ機能を備えています。

  1. Command/Control+7 キーを押すと、デスクトップレイアウトが表示されます。次に、A-Master デスクトップファイルをダブルクリックすると、デザインビューでファイルが開きます。
  2. アクティブにするように設定したパネル内でタブをクリックして、アセットパネルを開きます。または、パネルが閉じている場合は、ウィンドウ/アセットを選択します。
  3. 緑の丘の大きい背景画像を選択します。このアセットは、アセットパネル内でハイライトされます。
  4. アセットの名前(background.jpg)をクリックしてサイト内で使用するインスタンスのリストを展開します。背景画像ファイルは 3 回リスト表示されており、異なるアイコンが 2 つあることがわかります。これは、スマートフォンレイアウトとデスクトップレイアウトの両方に使用されていることを示します。
アセットパネル
アセットパネルで background.jpg のインスタンスを確認して、サイト内でアセットが存在する場所に関する情報を取得します。

この小さなサイトの例では、アセットのリストを管理するのは簡単ですか、大規模なサイトを構築すると、アセットのリストが長くなり、スキャンするのが困難になります。

アセットのリストを検索しやすくするには、各アセットの最初のアイテムを選択してから、左にある矢印をクリックしてセットを折りたたみます。サイトプロジェクト内でアセットが使用されているインスタンスのリスト一覧を展開して表示するには、もう一度矢印をクリックします。

特定のレイアウトで使用されているアセットを検索する場合、デスクトップ、タブレット、または電話のアイコンが表示されるアセットパネルの右端にある列の一番上をクリックします。これにより、アセットのリストが並べ替えられ、統合されたセット内に各レイアウトのアセットが表示されます。

アセットパネル
アセットパネル内でいずれかの列のヘッダー見出しをクリックすると、アセットのリストがそのタイプ別に並べ替えられます。

(すべてのレイアウト上で)すべてのインスタンスを更新するような変更をグラフィックに加える場合は、アセット名を右クリックし、表示されるメニューから「オリジナルを編集」を選択できます。

「オリジナルを編集」を選択して、サイト全体にわたってアセットを更新
「オリジナルを編集」を選択して、サイト全体にわたってアセットを更新します。

配置したオリジナルファイルは、Photoshop、Fireworks、またはそのファイルを作成した画像編集プログラムで開くので、すばやく変更を加えることができます。

改訂済みのオリジナルファイルを保存して Muse に戻ると、アセットパネル内のアイテムに非同期アイコンが表示され、サイト内にあるグラフィックのバージョンがソースファイルに一致しないことを示します。このファイルをもう一度クリックして「アセットを更新」を選択すると、新しいバージョンを使用してグラフィックのすべての複製が更新されます。

「アセットを更新」機能を使用して、サイト内で使用されるアセットの全インスタンスを改訂
「更新」機能を使用して、サイト内で使用されるアセットの全インスタンスを改訂します。

モバイルレイアウトのプレビュー

作成したサイトのデザインをプレビューするために使用できるオプションがいくつかあります。

デスクトップレイアウトのデザインビューで「プレビュー」をクリックすると、組み込み Webkit ベースのエミュレーターによる HTML、CSS および JavaScript のレンダリングが表示されます。プレビューを使用すると、サイトをパブリッシュする前に、ブラウザー内でレイアウトがどのように表示されるか確認したり、デバイス上でレイアウトをオンラインで確認したりできます。

スマートフォンビューのデザインビューで「プレビュー」をクリックすると、スマートフォンレイアウトの表示を確認できます。プレビューサイズメニューを使用すると、iPhone 4、iPhone 5、Samsung Galaxy S III および Nokia Lumia 920 のいずれかを選択して、異なる画面サイズで表示されるレイアウトを確認できます。

モバイルレイアウトのプレビュー
スマートフォンまたはタブレットのレイアウトでページをプレビューすると、プレビューサイズメニューが表示されます。

プレビューサイズウィンドウの右側にあるアイコンをクリックすると、縦方向モードと横方向モードの間でレイアウトの表示を切り替えることができます。

プレビューサイズには、最も一般的な携帯電話の画面サイズをカバーする、あらかじめ定義された高さと幅の比率が含まれています。

Motorola Droid のように、一部のスマートフォンには画面の幅が広いものがあります。訪問者がディスプレイ幅の広い携帯電話を使用している場合、Muse のビューポート機能によってスマートフォンレイアウトの幅が使用可能な画面領域に合うように自動的に調整されます。

プレビューモードでは、リンクをクリックしてサイト全体を移動できます。画面をスクロールして指ジェスチャーのスワイプをシミュレートできますが、実際にテストするには、デバイス上でテストすることをお勧めします。

プレビューモードでプレビューサイズメニューの横にある「i」ボタンをクリックすると、Edge Inspect という名前の Adobe ツールを説明するリンク付きのメモが表示されます。Edge Inspect では、Chrome ブラウザーの拡張を使用してモバイルデバイスをコンピューターに接続してから、デスクトップ Chrome ブラウザーに表示されているコンテンツで両者を同期します。

Edge Inspect があれば、Chrome と Adobe Muse の「ブラウザー」オプションの「プレビュー」を使用してデスクトップ上でサイトを表示できます。同じページが接続されたデバイスにも自動的に表示されます(必ず Chrome をデフォルトのブラウザーに設定してください)。

必要に応じて、Reflection というサードパーティ製のツールを購入できます。このツールを使用すると、デスクトップコンピューターの画面に表示される(同じネットワークを使用して接続されている)デバイスのエミュレーションを表示できます。スマートフォンやタブレットを使用してサイトを移動中、エミュレーターはデバイスのタッチスクリーンをミラーします。

モバイルレイアウトに関連のある追加機能

スティッキーフッター

以前のバージョンの Muse と同様、ガイドをドラッグすると、ページの下にある領域を定義して、フッター領域を設定することができます。コンテンツ要素をフッターアイテムとして設定することもできます。これにより、サイトプロパティで設定された最小ページ高さ、または既存のページのコンテンツのどちらか長い方の下に表示されます。

サイトに含まれるページの長さが異なる場合、フッターのコンテンツを定義すると、非常に便利です。これは、フッターの配置を垂直方向に調整することで、ページのコンテンツが重複することなく、ページの最下部に沿って一貫して表示されるためです。

デフォルトでは、「スティッキーフッター」オプションは有効になっています。この機能は、特に大型のデスクトップモニターを使用している訪問者向けに設計されました。ほとんどの場合は、ご使用の Web サイトに対して「スティッキーフッター」オプションを有効にしておきます。これは、Apple Cinema Display で表示するように、ブラウザーのウィンドウが Web ページのデザインよりもはるかに大きい場合でも、目的の場所にフッターを維持できるためです。

これがどのように機能するか確認するには、ブラウザーで Muse サイトをプレビューして、ページをズームアウトします。ブラウザーウィンドウと比較してページコンテンツが小さすぎる場合、ブラウザーの最下部にフッターが固定されず、フッターの下の領域が空いてブラウザーウィンドウが表示されます。

Muse で新しいサイトを作成すると、新規サイトダイアログボックスで「スティッキーフッター」オプションが有効になるのがわかります。

新規サイトのオプション
新規サイトを作成すると、「スティッキーフッター」チェックボックスが自動的に選択されます。

通常、サイトをデザインするときに「スティッキーフッター」機能を使用するのが最適です。ただし、表示されるページの長さが希望の長さよりもはるかに長い(サイトには最低限のページコンテンツしか含まれず、ページがかなり短いため)場合は、ページプロパティダイアログボックスでチェックボックスをオフにすることで、いつでもこの機能を無効にすることができます。

ページプロパティから「スティッキーフッター」を無効にします。
サイトを作成した後、ページプロパティを更新し、「スティッキーフッター」オプションを無効にします。

固定された要素

Muse によって生成されたコードは、すべての最新の Web ブラウザーとプラットフォームで期待どおりに表示および動作することを確認するためにテストされています。

固定されたページ要素のサポートは、デスクトップブラウザーとモバイルブラウザーの間で異なる Web 規格の 1 つです。デスクトップブラウザー向けにサイトをデザインする場合、要素を選択して「コントロールパネル」オプションを使用すると、ブラウザーウィンドウにページ要素を固定できます。一貫した操作を実現するには、固定を使用すると便利です。訪問者がどれ程スクロールダウンするかに関係なく、長いページの同じ領域に要素を維持する場合も固定は便利です。

このドキュメントを作成している時点では、モバイルブラウザーは固定されたオブジェクトを同様にサポートしていません。結果として、スマートフォンやタブレットのレイアウトをデザインするときに、固定されたオブジェクトのための代替戦略を考え出すことが必要です。

スマートフォンまたはタブレットのレイアウトをデザインする場合、「固定」オプションはグレーアウトされ、無効になることがわかります。

固定された要素のオプション
モバイルレイアウトをデザインする場合、コントロールパネル内の「固定」インターフェイスが利用できません。

モバイルレイアウトを含むサイトのパブリッシュ

通常、デスクトップサイトをパブリッシュする際に使用するのと同じ方法を使用して、Muse で複数のレイアウトを含むサイトをパブリッシュできます。トライアルサイトをパブリッシュしてから、小さな画面でデザインをテストするため、モバイルデバイスを使用してライブバージョンを表示する場合にも便利です。

「パブリッシュ」をクリックするか、ファイル/FTP ホストにアップロードを選択して、ホスティングサーバーにサイトファイルをアップロードします。

複数のレイアウトを含む Muse サイトをパブリッシュする場合、単一の URL でライブになります。次のように、ドメイン名を 1 つだけ登録すれば十分です。

http://www.my-site.com

2 つまたは 3 つの異なるレイアウトを含むサイトをパブリッシュする場合、訪問者がどのタイプのコンピューター/デバイスや、どのタイプのブラウザーを使用してページにアクセスしているか識別する検出スクリプトを含むサイト向けのコードが Muse によって生成されます。

検出コードによってプラットフォームとブラウザーのバージョンが判断されてから、正しいレイアウトが自動的に表示されます。何もしなくても、タブレットを使用している訪問者に対してタブレットのデザインが表示され、スマートフォンを使用している訪問者に対してスマートフォンのデザインが表示されることが保証されます。これらの操作はすべて背後で実行されます。

Muse の新しいモバイルレイアウト機能を使用すると、モバイルレイアウトが最適化されるので、デバイスユーザーが不必要に大きなファイルをダウンロードする必要がなくなります。代替のレイアウト機能は、小さな、サイズの変更された画像ファイルに対してのみ機能するので、サイトはすべてのプラットフォームおよびブラウザーで高性能を発揮します。

Muse の使用方法について詳しくは、Adobe Muse ヘルプページの記事やチュートリアルを確認してください。

「ページへ移動」を使用したレイアウト間でのサイトコンテンツのコピー

「マスター(デスクトップ)」タブをクリックして、デザインビューでマスターデスクトップページをアクティブにします。

Muse では、付属のナビゲーションツールページへ移動を使用してレイアウト間の切り替えを容易に行えます。このボタンは、複数のレイアウトを含むプロジェクトのデザインビューで表示されます。

  1. ページに移動ボタンをクリックします。
ページに移動ボタン
ページに移動ボタンは、ページを指す矢印のように表示されます。

複数のレイアウトを使用する場合、コンテンツを簡単にコピー&ペーストできるよう、2 つ以上のページ間ですばやくレイアウトを切り替えることができると便利です。

注意:ページへ移動ボタンをクリックする以外にも、Command+J キー(Mac)または Control+J キー(Windows)のキーボードショートカットも使用できます。

ページへ移動ダイアログボックスが表示されます。サイト内にあるページ名の最初の数文字を入力するのに使用するテキストフィールドが含まれるので、何度もプランビューに戻らずに、簡単にそのページに移動できます。

  1. 検索するページの最初の 3 文字を入力します。この例では、Master の最初の 3 文字「mas」を入力します。

このフィールドは、サイト内に一致するページ名が存在するかスキャンした後、一致するページ名を以下のリストに表示します。

  1. 下向き矢印を 2 回押して A-Master(スマートフォン)ページを選択してから、Return/Enter キーを押すと、ページが開きます。

デザインビューで A-Master(スマートフォン)ページが開き、編集可能になります。

新しいキーボードショートカットを使用して、サイト内の異なるレイアウト間で移動するのも非常に便利な方法です。

  • Command/Control+7 キーを押すと、デスクトップレイアウトが表示されます
  • Command/Control+8 キーを押すと、タブレットレイアウトが表示されます
  • Command/Control+9 キーを押すと、スマートフォンレイアウトが表示されます

これらのショートカットは、対応するレイアウトを含むサイトを編集する場合のみアクティブなります。レイアウトや特定のページを切り替えるときに、これらの新しいショートカットを試用して好みのワークフローを開発します。

次に、2 番目のマスタースマートフォンページを作成して、デザイン要素を追加します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー