Muse Academy

最新版のPhotoshopとXDの連携を学ぶ 「Adobe Photoshop CC 2018 講座〜XDとの連携作業を完全習得」（150分）

Adobe Photoshop CC 2018（1月23日にアップデートした最新バージョン）の講座コンテンツです。

Web関連作業におけるPhotoshopの役割が変わったことで（Photoshopはアセット制作、ワイヤーフレームやカンプ制作はAdobe XDで行うことになるため）既存のワークフローを変更していくことになると思いますが、本講座ではスムーズに移行できるようにポイントを絞って学習していきます。

更新日：2018年2月5日（月）

Web制作はここまで早くなる！

コーディング不要のレスポンシブデザイン（50分）

当日のセッションの映像は「Adobe MAX Japan 2017 公式・アーカイブページ」で公開されています。

11月28日（火）パシフィコ横浜で開催されたクリエイティブイベント「Adobe MAX Japan 2017」のMuseセッション（Webトラック[wb4]）で使用したスライド資料を公開します。

スライド資料は以下の2つのタイプがあります。

1. PDF版
   PDFファイルになっています。当日使用したスライドには、デモビデオが埋め込まれていましたが、このPDF版には含まれていません（黒い静止画で表示されます）。ビデオは、リストを参照してください。個別に視聴することができます。
2. HTML5版
   ブラウザーで閲覧できるHTML5インタラクティブ版です。デモビデオも埋め込まれています。
   ※パソコン用です。スマートフォンなどのデバイスでは動作が重たくなり正しく表示されませんのでご注意ください。

以下の60秒の動画は「HTML5 インタラクティブ版の使い方」です。参考にしてください。

Adobe社では、クオリティを落とさず「素早く」制作しなければいけないニーズのことを「コンテンツベロシティ（Content Velocity）」と呼んでいます。スピードを伴ったコンテンツ制作というアプローチです。

Webサイトやブログを公開していれば「訪問してくれる（情報を届けられる）」という時代は終わりました。1つの完璧なコンテンツを時間をかけて作るというやり方では期待した結果を出せないケースが増えています。このような状況では「素早く」制作「素早く」公開「素早く」学び、実践しながら常に仮説検証を繰り返していくための動的なワークフローに変えていく必要があります。自ずとコンテンツ一つひとつに時間やお金をかけることはできなくなります。もちろん、クオリティを落とすわけにはいきません。

本講座は、ランディングページやプロモーションページ、ブランドページなどのシングルページサイトに絞り、クオリティを落とさず「早く作る」ためのスキル習得を目的とした実習で構成されています。

Appleは新製品をフィーチャーするためにスペシャルなブランドページを公開しますが、シングルページサイトのわかりやすい例です。

iPhone X - Apple

https://www.apple.com/iphone-x/

法人向けの学習コンテンツから、（累計800人の受講者から得た習得データをベースに考案された）特別講座「Adobe Muse を活用した「モジュール組み合わせ」によるランディングページ制作」を単体販売します。

講義タイトル：

Adobe Muse Module-based Page Building

Adobe Muse を活用した「モジュール組み合わせ」によるランディングページ制作

長期目標（long-term objective）：

スピードを伴う制作業務プロセスおよびシステムの刷新

短期目標（short-term objective）：

コンテンツをクオリティを落とさずに早く作るためのスキルを身につけること

受講に必要なスキル：

Museを完全習得している必要はありませんが、本コンテンツには基本操作などの解説が含まれていませんので、初心者レベルのスキルがないと実習をこなすことができません。

以下のMuse 導入ガイド［固定幅編］及び［可変幅編］を学習してください。

※Muse CC 2015が対象になっていますが、CC 2017でも学ぶことができます。

• Muse 導入ガイド［固定幅編］
• Muse 導入ガイド［可変幅編］

本講座は、法人向けの講座から最低限習得すべきポイントを抜き出した「速習」コンテンツになっています。学習する時間を確保できない方を対象としています。Adobe Museで高度なシングルページサイトを素早く作成するスキルを身に付けたい方はぜひご活用ください。

リリース日（販売期間）及び価格などは以下の特設ページをご覧ください。

更新日：2017年10月17日（火）
掲載日：2017年10月2日（月）

スライド資料（PDF）のダウンロード：

• point2017.psf（38.6MB）
  ダウンロード期間は終了しました。

※ダウンロードは期間限定（16日まで）になります。

※ビデオはPDFに埋め込まれていませんが、左のMP4リンクで視聴できます。

Museの作業スピードをUP

［2017年2月18日］新しい学習コンテンツ「Museで再利用・配布可能なナビゲーションメニューをつくろう！」がリリースされました。

Museには、ウィジェットライブラリという「部品」を再利用・配布できる仕組みがあります。例えば、リンクボタンを作りたいと思ったら、「ステートボタン」という部品をパネルからドラッグしてページに配置し、デザインを変更することができます。ナビゲーションメニューやお問い合わせフォームなど、さまざまなウィジェットライブラリがあり、YouTubeの動画などもサイズを自由に変更してレイアウトできます。

このウィジェットライブラリは、自分で作成することもできます。ライブラリ自体の開発はプログラミングが必要ですが、既存のライブラリをカスタマイズしたり、複数のライブラリを組み合わせて、新しいウィジェットライブラリを作る方法なら、マウスドラッグだけでOK。特別な知識は不要です。

今回は、ライトボックスと垂直方向のナビゲーションメニューを組み合わせて、新しいナビゲーションを作成します。

Adobe Muse ビジネスセミナー専用ページを公開

法人向けコンテンツ

 Web制作の実績がない印刷会社やデザイン制作会社が「どのようにMuseを使いこなしているのか」を検証、共有する「Adobe Muse ビジネス」専用ページを公開しました。

一人出版社では、Muse セミナーのタイプを「導入（一般・初心者向け）」と「クリエイティブ」、「ビジネス」に分けています。ビジネスセミナーは企業内で開催されることが多いため、クローズドになっていますが、共有したい有益な情報も多いため、可能なかぎり公開していきたいと思います。

パソコン向けとスマートフォン向けの

ページを簡単に作成できます。

Museは、パソコン向け、タブレット向け、スマートフォン向けのページを作成することができます。例えば、ワイドスクリーン用と、縦長の小さな画面用の2種類のページを用意するだけで、モバイルフレンドリーなウェブページをつくることができます。誰でも容易に習得することができる、最もシンプルで簡単な方法です。

1つのページで複数のレイアウトを

切り替える固定幅のページを作成できます。

Museは、ブラウザーのウィンドウの幅に合わせて、複数のレイアウトを切り替えることができる「固定幅」レイアウトのページを作成することができます（アダプティブデザインと呼びます）。パソコンからスマートフォンまで、1つのページで対応できるのが大きな利点です。ページ作成の難易度は少し高くなります。

1つのページでさまざまなデバイスに

適応した可変幅のページを作成できます。

Museは、さまざまなデバイスで視認性の高いページを表示できる「可変幅」レイアウトのページを作成することができます（レスポンシブWebデザインと呼びます）。事前に「ページ計画」の作業が必要になります。ページ計画無しで作り始めると、情報を追加する度に、面倒な作業が発生しますので注意が必要です。

90分で学ぶ

Adobe Muse CC 2015 で

シングルページウェブサイトをつくる

受講時間：90分

対象バージョン：Muse CC 2015

Adobe Muse CC 2015の基礎を習得するためのオンライン講座です。短い時間で学べるようにカリキュラムを構成しています。対象バージョンは、Muse CC 2015（2015年10月現在）です。より詳しく学びたい場合は、「6時間で学ぶ Adobe Muse CC 完全習得」を受講してください。

※必修学習として位置付けています。受講を強くお奨めしています。

6時間で学ぶ

Adobe Muse CC 完全習得

［基礎編］

受講時間：6時間

対象バージョン：Muse CC、CC 2014

Adobe Muse CCの基礎を完全習得するためのオンライン講座です。Museの基本機能をマスターするための短期集中カリキュラムになっています。2014年1月に実施された講座ですが（対象バージョンはMuse CC）、CC 2014でも学べるように学習ページごとに機能の違いを記載しています。

※講座公開後にドメインを変更していますので、素材のダウンロードリンクが変わっています。お手数ですが、「admn.mobi」の部分を「admn.heteml.jp」に変更してダウンロードしてください。

3時間で学ぶ

Adobe Muse CC

ランディングページ制作

受講時間：3時間

対象バージョン：Muse CC（2014以降でも学べます）

Adobe Muse CCでランディングページ制作を習得するためのオンライン講座です。YouTubeで公開していますが、課題で使う素材データは専用ページからダウンロードしてください。対象バージョンはMuse CCですが、講座で解説している基本機能は、CC 2014、2015でも変わりません。

※YouTubeで公開しています。ボタンをクリックするとYouTubeチャンネルを表示します。

Step-01

自分が使いやすいワークスペースに変更していこう！

Step-02

サイト設計するプランモードを上手に使いこなそう！

Step-03

Museデータの管理方法とデザインモードの便利な使い方

Step-04

デザインモードではグリッドシステムを使おうよ！

Step-05

ページタイトルを忘れずに！ページプロパティの設定方法

Step-06

画像を配置するときに注意することがあります！

Step-07

ページに配置した画像のリンクが切れてませんか？

Step-08

コンテンツの画像と背景に表示する画像は用途が異なるよ！

Step-09

見出しが段落になっていませんか？ 移動は変形パネルで！

Step-10

よく使う表現は「部品」にして書き出しておこう！

Step-11

長方形ツールでピカッと輝くボタンを作ってみよう！

Step-12

クリックすると自動的にスクロールするページを作ろう！

Step-13

クリックすると他のページの特定の位置に飛ぶ方法

Step-14

お気に入りアイコンをサイトに設定しよう！

Step-15

Illustratorの絵をMuseにペーストするときの注意点

固定幅レイアウトを習得する

Museのレイアウトデザインの学習は、［固定幅編］と［可変幅編］に分かれており、難易度の低い［固定幅編］を習得してから、［可変幅編］習得にステップアップするカリキュラムになっています。本コンテンツは、可変幅と共通する重要な学習を含みます。いきなり可変幅のレスポンシブWebデザインから入ってしまうと、結果的に遠回りすることになってしまう可能性が高いので、まずは固定幅のページ制作を完全習得してください。

イントロダクション

Museってどんなソフト？ 5つの特徴を理解する

Museにはプラン／デザイン／プレビューの3種類のモードがある

パブリッシュの「Business Catalyst」について

Museが対応した「レスポンシブWebデザイン」を理解する

Museの基本操作を習得するための講座ビデオと情報サイトの紹介

Part-1 可変幅の特性について理解する

STEP-01　サイズ変更と「レスポンシブな幅」の使い方を習得する

STEP-02　ページに固定する方法を習得する

STEP-03　「レスポンシブな幅」が指定された要素の特性を理解する

STEP-04　ブレークポイントについて理解する

可変幅レイアウトを習得する

レッスンデータを使って実際に作業をしながら、可変幅レイアウト（レスポンシブWebデザインのページ作成）の基礎を学びます。［固定幅編］で学習した人が次のステップに進むためのカリキュラムになっています。可変幅レイアウトは、デフォルト設定になっていますが、Museが備えている3つのページ作成機能で最も難易度の高い方法です。特に、一度ページを作成した後に、情報を追加する際、無計画に進めてしまうと修正作業が発生しますので「手順」をしっかり理解しておきましょう。

Part-1　ハイブリッドレイアウトの基本

Step-1　ハイブリッドレイアウトとリキッドレイアウトを理解する

Step-2　テキストの「読み込み」と「ペースト」の違いを確認する

Step-3　回り込みの設定とグラフィックスタイルの活用方法を習得する

Step-4　回り込みを設定したページのレスポンシブデザインを作成する

Step-5　回り込みを設定した2カラムのレイアウトページを作成する

Step-6　リキッドレイアウトに変換する方法と注意点を理解する

Part-2 ビジュアルデザインとページ構造の理解

より実践的な手法を習得する

中級編では、仮サイトの公開、HTMLデータの書き出し、HTML埋め込みを利用したアクセシブルなグラフィックタイトルの指定方法、SNSでの共有を考慮したOGP設定など、仕事に役立つ、より実践的な学習カリキュラムで構成されています。また、ページの構成要素を「ブレークポイントの設定を含む」再利用可能な「部品」にする方法についても学習します。可変幅レイアウト（レスポンシブWebデザイン）を可能なかぎり、効率化するために知っておくべき重要な学習です。

STEP-01　Business Catalystにパブリッシュ、HTML形式で書き出し

STEP-02　IllustratorからペーストしたグラフィックをHTMLで確認

STEP-03　マスターに設定したお気に入りアイコンをHTMLで確認

STEP-04　ページのタイトルをグラフィックで表現するときの注意点

STEP-05　OGPを設定してSNSで共有されたときに適切な情報を表示

STEP-06　ブレークポイントの設定を含む再利用可能な「部品」をつくる

STEP-07　ブレークポイントごとに画像を切り替える「部品」を書き出す

STEP-08　作成した「部品」をシングルページにドラッグして組み込む

Parallax Scrolling

MuseでAppleのページのような視差効果を設定しよう

Mockup

MuseでWebサイトのモックアップを作成する方法を習得しよう

※デモで使用しているデータは、フォトライブラリ（購入済み）が含まれるため、提供することができません。

スマホコミックを作ろう！

スクロール漫画は、2000年前半からウェブで公開されていましたが、韓国で登場した「webtoon（ウェブトゥーン）」で、広く知られるようになり、日本でも同様の手法でつくられたウェブ漫画が登場します。ウェブ漫画家のKang Full（カン・プル）が、2003年から6〜20ページもの縦スクロール漫画「純情漫画（English title: Love Story）」をDaum（ダウム）で公開していましたが、この頃の作品が現在のスマホコミックのベースになっています。

10年以上の歴史を持つスクロール漫画ですが、中学生、高校生がスマートフォンを所有する時代に入り、むしろ、これからが本領発揮する漫画表現になっていく可能性があります。かつての「活字小説 vs ケータイ小説」ほど差異はないように思えますが、漫画の文法は変わりますので（スクロール漫画には「ページの概念」がありません）、馴染めない読者もいるでしょう。

ただ、プリントレプリカ（紙媒体の漫画）とスマホコミックは対立するものではありません。選択肢の一つとして支持されていくと考えています。

今回のウェブキャストでは、概論を省き、実際にスマホコミックを作成するための基礎編として実施しましたスマホコミックの制作は、シナリオとコマ割り、ネーム、作画、画像処理、書き出し、オーサリング、スマホ表示のチェックの7つの作業で構成されています。

PS Lesson-01

Photoshop「コマ割りとフキダシのつくり方」

Lesson-01

Muse「スマホ向けページを新規作成してコマを配置する」

Lesson-02

Muse「ブラウザーで作成したページを確認する」

Lesson-03

Muse「スマホ向けページからパソコン向けページを作成する」

Lesson-04

Muse「ページにヘッダーとフッターを追加する」

Museはマウスドラッグと数値入力だけで、本格的なマルチデバイス対応のWebサイトを作成できますが、操作上の試行錯誤を減らし効率よく作業を進めるには、ちょっとしたコツが必要です。本セッションでは、Museを自在に使いこなすための「5つの実践手法」について、専用教材を使いながら詳しく解説します。

Step01　可変幅と固定幅

Step02　ブレークポイントとは？

Step03　ブレークポイントの設定方法

Step04　固定幅の作り方

Step05　ブレークポイントでテキストをフォーマット

Step06　サイズの変更

Step07　サイズと位置のコピー先

Step08　モバイルメニュー

セッションで使用したスライド資料（PDF）のダウンロード

［20151111-AdobeLive-Muse.zip］9.6MB

デモンストレーションで使用したサンプルデータのダウンロード

［20151111-AdobeLive-Muse-Demo1.zip］4.1MB