Adobe Muse で Web サイトのプロトタイプやワイヤフレームを作成する方法について学習します。

注意:

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

Adobe Muse は非常に直観的に使用できることに加え、オンラインで表示できる Web プロジェクトのプロトタイプをすばやく作成できます。トライアルサイトを作成できることは、潜在的なクライアントとリンクを共有できることを意味します。つまり、クライアントはサイトの最終バージョンを表示するブラウザーと同じブラウザーを使用してプロトタイプをオンラインでレビューできます。これにより、クライアントは完成したサイトがどのように表示されるかを容易に理解できます。

fig01.wireframe.b720
ワイヤフレームは、ページエレメントの位置を指定するプレースホルダーを含んでいます。

以下で、サイトのワイヤフレームのデザイン、構造化されたプランビューの構築、およびプレースホルダーエレメントの作成方法について説明します。コンテンツの完成後、プレースホルダーエレメントを実際のページエレメントと置き換えることができます。

ワイヤフレームの使用

ワイヤフレームは、サイトのページレイアウトを表示します。ユーザーはリンクをクリックしてサイトがどのようにフローするかを確認できます。ワイヤフレームをインタラクティブに操作した後、最終ライブサイトにアクセスして、ワイヤフレームと完了したバージョンを比較してください。ワイヤフレームのプレースホルダーエレメントがサイトの最終バージョンのグラフィックにどのように置き換えられたかがわかります。

ワイヤフレームがどのように構築されているかを確認するには、サンプルファイル(ZIP、4.5 MB)をダウンロードしてください。ZIP ファイルの圧縮を解除し、フォルダーを開いて KevinsKoffeeKartWire.muse ファイルを見つけます。このファイルをダブルクリックして、Adobe Muse でワイヤフレームを開きます。プランビューを使用し、どのようにページが種々の階層に編成されてサイトマップが構築されているかを学んでください。個々のページをダブルクリックしてデザインビューで開き、どのようにデザインされているかを探索してください。

Adobe Muse には、ワイヤフレームの作成に役立つ多数の機能があります。

  • デザインビューには、オプションの列グリッドがあり、レイアウトエレメントの整列に役立ちます。
  • フレキシブルな描画ツールを使用すると、グラフィックのプレースホルダー形状を容易に作成できます。
  • アセットパネルには、プレースホルダー画像の更新に役立つ機能があります。
  • Adobe Muse は、サイトをパブリッシュまたは書き出すときに、すべての画像ファイルを最適化、スライス、および書き出します。
  • テキストヘッダーと段落スタイルは、構造化ページの作成に役立ち、テキストフォーマットの変更を簡単にします。
  • 「配置」コマンドを使用すると、クライアントのロゴをブラウザーから直接保存して、Adobe Muse ファイルに配置できます。
fig02.wireframe.b720
ファイル/配置を選択して、ブランディングエレメントをワイヤフレームにすばやく追加します。

クライアント承認用のワイヤフレームのデザイン

クライアントとの初回ミーティングの後、最終サイトのグラフィックとテキストフォーマットを含まない、ページエレメントの配置と機能の概略を示すサイトのワイヤフレームモックアップを作成できます。ワイヤフレームの目標は、各ページのベアボーンを複製して、カラーや視覚コンテンツに煩わされることなく、Web ページのシミュレーションを作成することです。長方形をプレースホルダーとして使用して画像の位置をマークし、手書きまたは汎用フォントを使用して、テキストコンテンツを含むページの領域を表示します。

ワイヤフレームには、次のような利点があります。

  • クライアントはサイトの構造に集中してページレイアウトを理解できます。
  • インタラクティブなライブ体験ができるため、クライアントによるサイトのレビューと承認に役立ちます。
  • コミュニケーションツールとして機能し、サイトのデザインと機能が明確になります。

Adobe Muse は Web デザインツールであるばかりでなく、プロジェクトのプロトタイピングに最適です。ユーザーは、ライブトライアル URL を即座に作成してクライアントに電子メールメッセージで送信できるため、承認プロセスが簡素化されます。ワイヤフレームモックアップを Adobe Muse で作成する利点はこれだけではありません。

往復の画像編集機能と編集可能な段落スタイルにより、Web デザイナーは .muse ファイルをすばやく更新して、承認されたワイヤフレームを迅速に最終のライブバージョンに変換できるため、Adobe Muse でのワイヤフレーム作成は、他のデザインツールよりも生産性で一歩先を行っています。クライアントの承認を得ることなく、ワイヤフレームを廃棄することなく、プロジェクトを最初から開始することもなしに、承認されたワイヤフレームの更新を即座に開始し、実際の Web コンテンツを追加して最終バージョンを制作できます。途中で、サイトのデザインが進化するに伴い任意の数のトライアルサイトをパブリッシュして、反復をドキュメント化し、リンクをクライアントと共有できます。

次の基本的なワークフローを使用して、ワイヤフレームによりサイトを構築できます。

  • ワイヤフレームを構築して無償トライアルをパブリッシュします。
  • クライアントはクリックしてページ間を移動し、ライブサイトをレビューします。
  • クライアントは変更を要求したり、デザインの明確化を依頼します。
  • 必要な改訂の後、クライアントはワイヤフレームをサインオフします。
  • ユーザーはワイヤフレームサイトを更新し、グラフィックエレメントとカラーを追加します。
  • 段落スタイルを更新し、既存のテキストコンテンツをフォーマットします。
  • クライアントは、サイトの更新されたバージョンをレビューし、追加の変更を要求します。
  • ユーザーは要求された変更を行います。
  • クライアントは完成したバージョンを承認します。
  • ユーザーはサイトを更新し、ドメインを設定して最終サイトを開設します。

Adobe Muse のプランビューでの構造の検証

サイトのページが、ナビゲーションリンクのアッパーレベル層とサブレベル層を定義している階層でどのように配置されているかを確認するには、Adobe Muse でワイヤフレームの .muse ファイルを開いて解析します。プロジェクトを開くと、プランビューが表示され、サイトのすべてのページが表示されます。

fig03.wireframe.b720
プランビューにワイヤフレームのページが表示されます。

トップレベルとサブレベルの 2 つの層があり、サイトマップの階層を示していることがわかります。サイトの開発またはメンテナンス中はいつでも、これらのページをクリックしてドラッグし、サイト構造内で位置を変更できます。

新しいページを作成するには:

  1. 既存のページの右または下にあるプラス(+)記号をクリックし、ページの名前フィールドをクリックして名前を入力します。

    各ページには、わかりやすい名前を付けてください。

  2. ページサムネールを右クリックし、表示されたメニューオプションを使用して、ページの複製、削除または名前変更を行います。

    また、ページの上にマウスを移動し、右上隅に表示される X アイコンをクリックして削除することもできます。

  3. 説明に沿って操作している場合は、ページの追加、位置変更、削除を試して、サイトマップを変更してください。ワイヤフレームサイトを前の状態に戻すには、編集/取り消しを選択します。

    プランビューインターフェイスは直観的に使用できます。Adobe Muse はすべてのページ名を追跡し、メニューウィジェットに表示されるリンクを維持します。すべての変更は自動的に更新され、リンクが破損することはありません。

グラフィックスタイルを使用した、属性を共有するプレースホルダーエレメントの作成

Adobe Illustrator や Adobe Photoshop ソフトウェアと同様に、Adobe Muse では、一貫した外観と操作性を作成して一連のエレメントに追加したい場合にグラフィックスタイルを容易に作成できます。これは、既存のグラフィックスタイルを変更して、そのスタイルが適用されていた他のすべてのページエレメントをすばやく更新できるため、ワイヤフレームの作成(およびページのデザイン)に役立ちます。既存のスタイルをコピーして、そのバリエーションを作成することもできます。

グラフィックスタイルを使用して属性をシェイプに適用し、ワイヤフレームサイトの画像ファイルのプレースホルダーを作成するには:

  1. 長方形ツールを使用して、デザインビューのページに 3 つの長方形を描画します。

  2. 1 つの長方形を選択して編集し、線のカラー、塗りのカラーおよび不透明度設定を設定し、ドロップシャドウなどのグラフィック効果を追加します。

  3. 長方形を選択した状態で、グラフィックスタイルパネルの下の「新規グラフィックスタイル」をクリックします。このスタイルは選択した長方形のフォーマットに基づきます。新規グラフィックスタイルをダブルクリックして、わかりやすい名前を付けます。

  4. 他のいずれかの長方形シェイプを選択し、スタイルの名前をクリックして、同じグラフィックスタイルを適用します。この手順を繰り返して、3 番目の長方形にスタイルを適用します。したがって、3 つの長方形すべてに同じスタイルを使用します。

  5. 1 つの長方形を選択して編集し、スタイルを少し変えます。グラフィックスタイルパネルの編集したスタイルの名前の横にプラス(+)記号が表示されます。

  6. グラフィックスタイルパネルのスタイルの名前を右クリックし、「スタイルを再定義」を選択します。新しいスタイルに合わせて他の 2 つの長方形が更新され、プラス(+)記号が消えます。

  7. クライアントが変更を要求した場合は、グラフィックスタイルを使用してシェイプをすばやくフォーマットして一貫したワイヤフレームを作成し、一連のサイトアセットを迅速に更新します。

構造化 Web ページの作成と段落スタイルによるテキストのフォーマット処理

ワイヤフレームサイトを構築する際は、テキストツールを使用してテキストフレームを作成し、後で置き換えるプレースホルダー(またはダミー)テキストを追加します。また、クライアントが Web サイトを既に保有している場合は、ブラウザーからテキストを直接コピーしてテキストフレーム内にペーストすることができます。テキストエレメントを作成した後、テキストパネルを使用してテキストにフォーマットを適用できます。

段落スタイルを使用すると、ヘッダーテキストと段落タグを定義して、ページのテキストコンテンツを構築することができます。

  1. デザインビューで、テキストツールを使用してテキストフレームをページにドラッグします。テキストフレームにテキストを入力またはペーストして書き込みます。

  2. デザインビューワークスペースの上部にあるテキストパネルまたはコントロールパネルのオプションを使用して、フォント、フォントサイズ、フォントカラー、および他のプロパティなどを選択し、フォーマットオプションを設定します。

  3. 段落スタイルパネルの下にある「新規段落スタイル」をクリックして、新規段落スタイルを作成します。新規スタイルの名前をダブルクリックしてわかりやすい名前を付けます。

  4. スタイルを右クリックし、「スタイルを編集」を選択します。段落タグメニューを使用して、段落スタイルを設定し、P、H1、H2 または H3 など、特定の HTML タグをターゲットにします。

    fig04.wireframe.b720
    「段落スタイル」パネルでスタイル名を右クリックし、スタイルを編集ダイアログボックスを使用して、特定のヘッダーまたは段落タグに対してスタイルを定義します。

  5. テキストを含む複数のテキストフレームをさらに作成します。テキストフレームを選択して段落スタイルの名前をクリックすると、選択したテキストフレームに段落スタイルのフォーマットが適用されることがわかります。段落スタイルを適用したいずれかのテキストフレームを後で選択すると、プラス(+)記号が段落スタイルパネルのスタイル名の横に表示されます。これは、グラフィックスタイルと同じビヘイビアーを使用して、スタイルが変更されたことを示しています。

  6. 同じスタイルを使用してすべてのテキストフレームを自動的に更新するには、段落スタイルパネルでスタイル名を右クリックし、「スタイルを再定義」を選択します。

    この簡単な例からわかるように、異なるテキストコンテナを作成して特定のスタイルを使用するように設定し、一貫したデザインを作成できます。次に、ワイヤフレームを更新してサイトの最終バージョンをデザインするときは、クライアントの要求に応じてスタイルを簡単に更新できます。サーチエンジンの最適化ランキングの向上に役立つため、テキストコンテナを備えた構造化された Web ページを作成することは最良の事例です。

注意:

単色の背景色でページをデザインするときは、テキストフレームの背景の塗りのカラーを一致させて設定します。これにより、Adobe Muse はテキストコンテンツをより効率的にパブリッシュします。背景の塗りが不明な場合は、Adobe Muse はテキストフレームの背景色を透明に設定するため、パブリッシュされたテキストのエイリアシングの外観のスムーズさが劣ります。ただし、ページ背景にグラデーションや画像が表示される場合、テキストフレームの塗りのカラーを「なし」に設定してください。

最終のサイトグラフィックによるプレースホルダー画像の更新

クライアントによりワイヤフレームが承認された後、サイトをすばやく更新して、実際の画像ファイルを使用できます。

  1. ページの画像プレースホルダーを選択します。

  2. アセットパネルを開いて、選択した画像エレメントを確認します。

  3. ページエレメントを右クリックします。表示されたメニューでは、ワイヤフレームサイトのアセンブル方法に応じて、画像ファイルの更新に役立つ 2 つの選択肢があります。

    Adobe Photoshop または Adobe Fireworks ソフトウェアでファイルを作成してページに配置した場合は、「オリジナルを編集」を選択して作成に使用した製品でオリジナルファイルを編集できます。マスターファイルを保存し、Adobe Muse に戻ると、配置したファイルのインスタンスはサイト内で自動的に更新されています。

    また、Adobe Muse で長方形ツールを使用して画像ファイルのプレースホルダーを作成した場合は、「すべてのインスタンスを再リンク」を選択して、コンピューター上にあるファイルを参照して選択し、プレースホルダーファイルを最終のグラフィック画像に入れ替えます。

    fig05.wireframe.b720
    アセット名を右クリックし、「オリジナルを編集」を選択して、作成に使用した画像編集プログラムでプレースホルダーファイルのマスターを開きます。

  4. これらの手順を繰り返して、ページ上のすべてのプレースホルダー画像を実際の画像ファイルに置き換えます。

    注意:

    アセットパネルでアセットの名前を右クリックして、「アセットに移動」を選択することもできます。このオプションにより、Adobe Muse で選択したアセットを含むページが開かれるため、すばやく更新することができます。

Adobe Muse で生成された、最適化された画像ファイルへのアクセス

作成した Adobe Muse サイトをホストサーバーにパブリッシュすることに加え、サイト全体を書き出して、スライスおよび書き出された画像ファイルのフォルダーを取得することもできます。

  1. ファイル/HTML 形式で書き出しを選択します。

    HTML 形式で書き出しダイアログボックスが表示されます。

  2. サイトファイルを書き出すコンピューター上の場所を選択し、「OK」をクリックします。

この操作を完了したら、Adobe Muse はファイルを書き出して指定したローカルフォルダーに保存します。フォルダーに移動し、画像フォルダーを開いて最適化された画像ファイルにアクセスします。これらの画像ファイルは、ニュースレター、モバイルアプリケーション、ソーシャルネットワークページ、および他の関連プロジェクトの作成に再利用できます。

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

リーガルノーティス   |   プライバシーポリシー