Adobe Muse をはじめましょう。.muse ファイルを理解して、ページプロパティを設定する方法、お気に入りアイコンを追加する方法などを学びます。

注意:

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

Adobe Muse をはじめる

ログインした後、Adobe Muse ワークスペースが起動します。Adobe Muse スタートアップスクリーンが表示されます。次のいずれかの操作を実行します。

  • 「新規作成」をクリックして、新規サイトを作成します。
  • 「開く」をクリックして、コンピューターから既存の .muse ファイルを参照します。
Adobe Muse のようこそ画面
ようこそ画面を使用して、新規サイトを作成します。

新規サイトを作成するときは、新規サイトダイアログボックスが表示されます。「可変幅」を選択して、レスポンシブレイアウトを有効にするか、「固定幅」を選択して、代替レイアウトを選択します。このダイアログボックスには、最大ページ幅、列、および間隔値を設定できるフィールドが含まれています。

新しい Web サイトを作成する新規サイトダイアログ。
ファイル/新規サイトを選択して、新規サイトを作成します。

「詳細設定」をクリックして、サイトのサイズ、マージン、列数、パディングの値を(ピクセル単位の数値で)設定します。このウィンドウから「解像度」と「言語」も選択できます。

後で、ファイル/サイトのプロパティを選択してこれらの設定をいつでも更新することができます。

サイトのプロパティを設定するサイトのプロパティダイアログボックス。
新規サイトダイアログボックスでサイトプロパティを設定します。

終了したら、「OK」をクリックしてダイアログボックスを閉じます。

デフォルトでは、2 つのアイテムが既に作成されているプランビューが開きます。左上にあるホームページは、ライブサイトをユーザーが訪れたときに最初に読み込まれます。下の A-マスターページは、テンプレートのようなものです。サイトのすべてのページに表示したいアイテムは A-マスターページに配置します。これにより、共通のサイトエレメントを 1 つの集中した場所で更新するだけで十分です。

NewWebsite
Adobe Muse は、ホームページとマスターページを自動的に生成します。

上部に沿って、それぞれインターフェイスの異なるセクションである「プラン」、「デザイン」、「パブリッシュ」を示す 4 つのリンクがあります。

インターフェイスの使用と Adobe Muse によるサイトのデザインの詳細については、「Adobe Muse をはじめる」と「Adobe Muse による最初の Web サイトの制作」を参照してください。

.muse ファイルの理解

Dreamweaver などの他のプログラムで Web サイトをデザインするときは、すべてのサイトコンテンツを含むサブフォルダーとファイルを持つフォルダーをコンピューターで作成します。エレメントのセット全体を管理し、サイト内に破損したリンクがないことを確認するのは、非常に手間がかかる可能性があります。

Adobe Muse で新規サイトを作成してファイル/保存を選択したときに、1 つの .muse ファイルを作成します。これは、Photoshop で PSD ファイルを作成する場合と同様です。このファイルには、任意の数のレイヤー、グラフィック、リンクされたアセットを含めることができます。この 1 つの .muse ファイルはすべての画像、リンク、コード、およびサイトファイルを含んでいるため、サイトのデザインに必要な唯一のファイルです。サイトのデザイン中に他のユーザーと作業をしたい場合は、作成した .muse ファイルのコピーを同僚に送信できます。これにより、同僚はコピーを開いて変更を行い、追加した変更をパブリッシュできます。

通常は、.muse ファイルでの作業を一度に 1 人に許可するのが適切です。コンテンツをサイトに追加したら、パブリッシュし、同僚に .muse ファイルを送信します。これにより、同僚はコンテンツを編集し、さらに追加することができます。作業を終了したら、同僚は更新した(変更を含んでいる) .muse ファイルを返却します。このように、互いの作業が上書きされないようにします。

また、.muse ファイルを作成し、仮サイトをパブリッシュすることもできます。次に、その .muse ファイルを同僚と共有します。同僚はファイルを開き、ファイル/名前を付けて保存を選択し、保有しているコピーを変更します。ユーザーは自身が保有しているコピーで作業を続けます。ユーザーは同僚が独自の新しい仮サイトをパブリッシュする予定であることを理解しています。ただし、このワークフローを使用する場合、サイトの 2 つの複製が同期しなくなります。ユーザーの .muse ファイルのバージョンは、同僚が追加した変更を含むように更新されません。逆もまた同じです。

既存の Web サイトに大きな変更を行う場合は、いつでも .muse ファイルを開いてファイル/名前を付けて保存を選択して保存することが適切です。少し異なるファイル名で新規 .muse ファイルを作成し、コンピューター上の単一のフォルダーにすべての .muse ファイルを維持します。こうすることで、クライアントがサイトのオリジナルバージョンを希望した場合は、古いデザインの .muse ファイルの以前のバージョンをいつでも開いて再パブリッシュし、サイトを以前の状態に戻すことができます。

また、.muse ファイルを頻繁に保存することも適切です。Adobe Muse がクラッシュした場合は、通常、Adobe Muse を再起動したときに、最新の編集内容を含む .muse ファイルの復元されたバージョンが表示されます。この場合、.muse ファイルの復元されたバージョンを即座に保存し、そのファイルで作業を再開します。各ファイルには、Web サイト全体が含まれているため、作成する .muse ファイルは安全な場所に保存し、バックアップしてください。.muse ファイルを失い、バックアップコピーがない場合、サーバー上でホストされているサイトファイルをダウンロードして .muse ファイルを再構築することはできません。

多くの Web デザイナーは、my_site_v1.muse や my_site_v2.muse など、わかりやすい名前を .muse ファイルに付けて保存することを好みます。どのバージョンが古いかをわかりやすくするために、my_site_2012-4-13.muse や my_site_2012-4-30.muse などのように .muse ファイルの名前に日付を付けることもできます。ただし、最も役に立つと考えられる方法でファイルに名前を付けることができます。

Adobe Muse で新規サイトを作成中のサイトプロパティの設定

新規サイトを作成し、サイトプロパティを定義するには、次の手順に従います。

  1. スタートアップスクリーンで、新規作成/サイトを選択します。レスポンシブレイアウトの「可変幅」、または代替レイアウトの「固定幅」をクリックします。

  2. 表示される新規サイトダイアログボックスで、「ページ幅」を 950 に、「最小の高さ」を 800 に設定します。「段組の数」を 3 に、「間隔」を 20 に設定します。「マージン」領域で、4 つの値をすべて 50 に設定します。パディング値を 36 に設定します。

    サイトプロパティダイアログボックスからサイトの属性を設定します。
    フィールドに直接値を入力するか、各設定の矢印ボタンをクリックして、サイト属性を設定します。

    注意:

    サイトをスマートフォンやタブレット用にデザインしている場合、「デスクトップレイアウトからリダイレクト」オプションでモバイルレイアウト用のリダイレクトをオン/オフできます。この機能は、レイアウトの準備が未完了で、まだリダイレクトしない場合(作業中のレイアウト)に便利です。リダイレクトオプションがオフの場合でもレイアウトは書き出されることに注意してください。ただし、モバイルブラウザーはモバイルページにリダイレクトしません。また、サイトのサイトプロパティダイアログボックスでこのオプションが有効にされるまで、書き出されたファイルは sitemap.xml に含まれません。

  3. 「OK」をクリックして設定を保存し、ダイアログボックスを閉じます。

  4. ファイル/サイトプロパティを選択します。「お気に入りアイコンの画像」の横のフォルダーアイコンをクリックします。Kevins_Koffee_Kart サンプルファイルフォルダーに移動し、favicon.png というファイルを選択します。「OK」をクリックします。

    fig_07
    お気に入りアイコンとは、ブラウザーのアドレスバーでサイトの URL の横に表示されるアイコンです。

  5. ファイル/保存を選択します。新規サイトに、YourNameKoffeeKart.muse などの一意の名前を付けます(このチュートリアルのサンプルサイトの名前は 01KevinsKoffeeKart.muse です)。

サイトプロパティパネルでお気に入りアイコンを追加

お気に入りアイコンは小さな四角の画像で、ブックマークと URL をカスタマイズするために、サイトに作成および追加してアップロードできます。ご使用のブラウザーに応じてビヘイビアーは異なりますが、通常、お気に入りアイコンは、サイトの閲覧中に、ブラウザーのアドレスバーのサイト URL の横に表示されます。さらに多くの場合、お気に入りに追加されるとページ名の横に表示され、読み込まれたサイトページのブラウザーのタブにも表示されます。お気に入りアイコンファイルとして使用する四角い(縦横比が均一な)画像ファイルの作成には、Photoshop や Illustrator など、任意の画像編集プログラムを使用できます。このチュートリアルでは、PNG ファイルが用意されています。

次の手順に従って、お気に入りアイコンをサイトに追加します。

  1. ファイル/サイトプロパティを選択します。サイトプロパティパネルが表示されます。

  2. 「コンテンツ」タブで、「お気に入りアイコン」セクションの右側にあるフォルダーアイコンをクリックします。表示される、お気に入りアイコンの画像の選択ダイアログボックスを使用して、サンプルファイルフォルダーを参照し、favicon.png という名前のファイルを選択します。

    Favicon
    サイトプロパティパネルで favicon.png ファイルを設定します。

    注意:

    Adobe Muse 2015.0.2 以前を使用している場合は、ファイル/サイトのプロパティで「レイアウト」タブをクリックし、サイトのお気に入りアイコンを追加することができます。

  3. 「開く」をクリックして、お気に入りアイコンの画像の選択ダイアログボックスを閉じて、ファイルを選択します。次に、「OK」をクリックして「サイトプロパティ」ダイアログボックスを閉じます。

  4. ファイル/ブラウザーでサイトをプレビューを選択します。ブラウザーウィンドウの上部で、アドレスバーにお気に入りアイコンが表示されているかを確認します。タブでサイトが読み込まれた場合、タブにも表示されている場合があります。ページをお気に入りに追加して、お気に入りリストのページ名の横にアイコンが表示されているかを確認してください。

    これでサイトが完成しましたので、次の手順では、サイトを用意された Adobe Business Catalyst ホスティングサーバーにアップロードします。

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

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