Adobe Muse ビジネスセミナー

Creative Edge School Books


Creative Edge School Books Workshop

 

ビジネスセミナー告知用のイメージ

特別講義:
印刷会社がMuseを導入してビジネスにするための5つの準備


Adobe Museはマウスドラッグと数値入力だけで、レスポンシブWebデザインなどの高度なWebページを作成することができるツールです。Webデザイナーを対象としていない特異な製品だったので、Museがどのようなツールなのか認知されるまで時間がかかりました。

WixやJimdoなどのCMSベースのサービスと比較されることもありますが、Museは、IllustratorやInDesignなどのデザイン製品を使っている紙媒体のデザイナーを対象としたクリエイティブツールであることが大きな違いです。現在は、デザイナーに限らず、企業の広報担当者や学校、病院の職員、アーティストなど、さまざまな分野で利用されていますが、Webサイトやブログとは異なる独創的なビジュアルで訴求するプロモーション専用のページや特設ページなどに活用しているケースが多いようです。


2016年に入ってからは、Muse導入で新事業を軌道にのせて利益を出す企業も出てきており、法人向けセミナーの需要が高まっていました。

企画されたセミナーの多くは、Web制作の実績がない印刷会社やデザイン制作会社などが「どのようにMuseを使いこなしているのか」を検証し、共有することが目的でした。現在、ビジネスとして成立させるための考え方やノウハウなども出揃ってきたと考えており、今回の法人向け特別講義では、Muse導入でいかに実績を出していくかを具体的に取り上げています。



内容:

  • [1]Museを使うメリットと注意すべき点を最初に把握しておくこと
  • [2]Webサイトではなく「Webのチラシ(シングルページ)」のマーケットを対象にすること
  • [3]受注するシングルページのタイプを決めておくこと
  • [4]仕事を受注するための特設ページを最低でも3種類作成して公開すること
  • [5]他社と明確に差別化できるプレスリリースを出すこと

講義時間と形式:

  • 講義時間:60分(講義のみ)/120分(講義と一部実演)
  • 形式:ウェブキャスト/訪問ワークショップ
  • アーカイブ形式:スクリーンキャスト(使用したPCの画面と音声)

セミナースケジュール:

予定されていた全てのセミナーを終了しました。セミナーは個別対応で要望に沿って開催しましたので内容には(印刷会社向け、デザイン制作会社向け、小規模なデザイン事務所およびフリーランスなど)差異があり、アーカイブについては構成を調整中です。
セミナーのアーカイブは、以下の専用ページで公開します。



更新日:2016年9月12日(月)/投稿日:2016年7月1日(金)


セミナーのスライド画面の一部

ビジネスセミナーを終えて

海外では、ビジュアルデザイン重視のシングルページサイトで実績を出しているデザイン制作会社、およびデザイナーが多いのですが、国内ではちょっと違っていて軽量サイトも十分仕事になっているようです。


レスポンシブWebデザインについては、国内外問わず、Museでさえコスト高になってしまうため、ページの作り分けが中心になっています。デスクトップとスマートフォン向けの2種類のページを作成するのは手間だと思われていますが、実際はレスポンシブWebデザインの方が苦労しています。

コーディングするよりはるかに容易なMuseでも、可変レイアウトで手早く作成できる人は限られてしまうため、敷居が低く誰でも作業できるページの作り分けの方が効率がよいという結果です(逆の見方をすれば、人材を集めて可変レイアウトに対応した効率的なワークフローを構築できればチャンスなのかもしれません)。


時間に余裕があり、レスポンシブWebデザインがアドバンテージになる案件は積極的に採用し、それ以外は、ページの作り分けや固定幅レイアウトでこなしていく、というのが無理のない業務になりそうです。利益を出しているところは、ほぼこのパターンです。


更新日:2016年9月12日(月)


セミナーのスライド画面の一部

ビジネスセミナーの情報を掲載していきます

現在、Muse セミナーのタイプを「導入(一般・初心者向け)」と「クリエイティブ」、「ビジネス」に分けています。ビジネスセミナーは企業内で開催されることが多いため、クローズドになっていますが、公開可能な情報はこちらのページに掲載していきたいと思います。


更新日:2016年7月1日(金)


Dreamweaver講座のカバー画像

Dreamweaver CC

Dreamweaver CC 2015 ライブビューによるレスポンシブWebデザイン

Adobe Dreamweaver CC(ドリームウィーバー)とBootstrapの基礎から実践までを習得するための学習コンテンツです。

詳しい情報を見る


Animate講座のカバー画像

Animate CC

Animete CC 入門[基礎編]HTML5コンテンツ制作を習得しよう!

Adobe Animate CC(アニメート)の基礎を習得するための学習コンテンツです。HTML5 Canvasコンテンツ制作を学習します。

詳しい情報を見る


XD講座のカバー画像

Adobe XD

Adobe Experience Design(XD)プロトタイピング[基礎編]

Adobe Experience Design(エクスペリエンス・デザイン/通称エックスディー)の基本操作を習得するための学習コンテンツです。

詳しい情報を見る


Verification - Muse Content

 

Muse CC 2015 導入ガイド[固定幅編]のカバー画像

Muse CC 2015 導入ガイド[固定幅編]

只今、検証中


この学習カリキュラムで習得したスキルが、実際のビジネスの現場でどのように活用されているのか、まったく使用していない機能、実践の現場で生きるテクニックなどを検証していきます。
検証済みの項目にはリンクを設定します。

※検証のためのデモデータなどは、購入者向けの専用ページに掲載する予定です。


検証のポイント:

固定幅レイアウトは、Appleのサイトが採用しており、大まかにデスクトップ用、タブレット用、スマートフォン用の3〜4種類程度の固定幅レイアウトがウィンドウ幅にあわせて、切り替わる仕組みです(明確な定義はありませんがアダプティブWebデザインと呼びます)。

Museを導入している印刷会社、デザイン制作会社では「ページの作り分け」が多く、レスポンシブWebデザインがアドバンテージになる案件のみ、可変レイアウトを採用しています。ただし、レスポンシブより制作コストを抑えられ、最も幅が狭いブレークポイントだけ可変レイアウトにする「ハイブリッド」レイアウトも有効なので、コストと時間を考慮しながら検証したいと思います。


詳細ページ:

Adobe Museの基本操作をある程度習得した人が、Webページ制作を本格的に学ぶためのカリキュラムです。


イントロダクション

  • Museってどんなソフト? 5つの特徴を理解する
  • Museにはプラン/デザイン/プレビューの3種類のモードがある
  • パブリッシュの「Business Catalyst」について
  • Museが対応した「レスポンシブWebデザイン」を理解する
  • Museの基本操作を習得するための講座ビデオと情報サイトの紹介

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

  • STEP-01 サイズ変更と「レスポンシブな幅」の使い方を習得する
  • STEP-02 ページに固定する方法を習得する
  • STEP-03 「レスポンシブな幅」が指定された要素の特性を理解する
  • STEP-04 ブレークポイントについて理解する

Part-2 固定幅/可変幅レイアウトの基礎を理解する

  • STEP-01 ページ幅とブレークポイント幅の違いについて理解する
  • STEP-02 サイズと位置の情報をコピーする方法を習得する
  • STEP-03 特定のブレークポイントでテキストのスタイルを変更する
  • STEP-04 ブレークポイントごとに異なる画像を表示する方法

Part-3 固定幅レイアウトの基本ページを作成する

  • STEP-01 画像を配置してサイズの調整とトリミングをする
  • STEP-02 固定幅ページに画像をレイアウトする
  • STEP-03 最後に設定したブレークポイントのみ固定幅から可変幅に変更する

Part-4 固定幅レイアウトの応用ページを作成する

  • STEP-01 2種類のナビゲーションバーを作成する
  • STEP-02 ナビゲーションバーのステートボタンにスタイルを追加する
  • STEP-03 ブレークポイントで水平メニューと垂直メニューを切り替える
  • STEP-04 クリックで表示/非表示するモバイル用メニューを作成する
  • STEP-05 ハンバーガーアイコンとクローズボックスを表示する

更新日:2016年9月12日(月)

 

Muse CC 2015 導入ガイド[可変幅編]のカバー画像

Muse CC 2015 導入ガイド[可変幅編]

只今、検証中


この学習カリキュラムで習得したスキルが、実際のビジネスの現場でどのように活用されているのか、まったく使用していない機能、実践の現場で生きるテクニックなどを検証していきます。
検証済みの項目にはリンクを設定します。

※検証のためのデモデータなどは、購入者向けの専用ページに掲載する予定です。


詳細ページ:

固定幅のレイアウトデザインを習得した人が、可変幅のレイアウトデザイン(レスポンシブWebデザイン)を学ぶためのカリキュラムです。


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

  • Step-1 ハイブリッドレイアウトとリキッドレイアウトを理解する
  • Step-2 テキストの「読み込み」と「ペースト」の違いを確認する
  • Step-3 回り込みの設定とグラフィックスタイルの活用方法を習得する
  • Step-4 回り込みを設定したページのレスポンシブデザインを作成する
  • Step-5 回り込みを設定した2カラムのレイアウトページを作成する
  • Step-6 リキッドレイアウトに変換する方法と注意点を理解する

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

  • Step-1 見出しのマークアップと代替テキストの入力
  • Step-2 背景画像の指定方法とマスターの活用
  • Step-3 背景画像をレスポンシブに適応させる
  • Step-4 高解像度の画像を使用するときの問題と解決方法
  • Step-5 表組み(HTML)をページに組み込む方法

Part-3 可変幅レイアウトデザインの実践

  • Step-1 シングルカラムを表現する2つの方法
  • Step-2 実習[1]ページのカンプをマスターに配置する
  • Step-3 実習[2]マスターにブレークポイントを設定する
  • Step-4 実習[3]カンプの上にタイトル画像や写真を配置する
  • Step-5 実習[4]カンプの上に見出しや本文を配置する
  • Step-6 実習[5]ブレークポイントごとにレイアウトを調整する
  • Step-7 実習[6]カンプを外してヘッダーとフッターを追加する

更新日:2016年9月12日(月)

 

Muse CC 2015 導入ガイド[中級編]コンプリート版

Muse CC 2015 導入ガイド[中級編]コンプリート版

只今、検証中


この学習カリキュラムで習得したスキルが、実際のビジネスの現場でどのように活用されているのか、まったく使用していない機能、実践の現場で生きるテクニックなどを検証していきます。
検証済みの項目にはリンクを設定します。

※検証のためのデモデータなどは、購入者向けの専用ページに掲載する予定です。


詳細ページ:

Adobe Museの基礎および固定幅や可変幅のレイアウトデザインを習得している人が、さらにステップアップするための中級者向けのカリキュラムです。 現在、追加コンテンツ、および特別講義などを随時公開しています。


学習内容:

  • STEP-01 Business Catalystにパブリッシュ、HTML形式で書き出し
  • STEP-02 IllustratorからペーストしたグラフィックをHTMLで確認
  • STEP-03 マスターに設定したお気に入りアイコンをHTMLで確認
  • STEP-04 ページのタイトルをグラフィックで表現するときの注意点
  • STEP-05 OGPを設定してSNSで共有されたときに適切な情報を表示
  • STEP-06 ブレークポイントの設定を含む再利用可能な「部品」をつくる
  • STEP-07 ブレークポイントごとに画像を切り替える「部品」を書き出す
  • STEP-08 作成した「部品」をシングルページにドラッグして組み込む

追加学習:

  • STEP-01 Museの「スクロール効果」を完全習得しよう
  • STEP-02 Muse「スクロール効果」の計算方法を覚えよう
  • STEP-03 Museで作成できる視差効果のページを確認しよう
  • STEP-04 Museの「スクロール効果」の使い方を徹底解説!
  • STEP-05 スクロール効果の「不透明度」を設定しよう
  • STEP-06 ページの作り分けについて理解しておこう
  • STEP-07 トランジション-ワイプ効果の設定方法を習得しよう

更新日:2016年9月12日(月)

Project

Dreamweaver講座のカバー画像

Dreamweaver/Bootstrap

学生向け講座:Webデザイナーを目指せ! DreamweaverとBootstrapを習得しよう!

Adobe Dreamweaver CC(ドリームウイーバー)のライブビューとBootstrapを学ぶための学生向け特別講座です。

詳しい情報を見る


UXデザイン講座のカバー画像

UX Design

学生向け講座:高校生のためのUXデザイン入門〜Adobe XDを活用しよう!

Adobe Experience Design(エクスペリエンスデザイン:XD)を使ってUXデザインを学ぶための学生向け講座です。

詳しい情報を見る


ニュースレターのカバー画像

Newsletter

ThinkZero Magazine Newsletter(シンクゼロマガジンニュースレター)

AI(人工知能)やロボティクス、デジタルクリエイティブ、教育に関連した情報を提供しているサブスクリプションコンテンツです。

詳しい情報を見る

Creative Edge School Books

一人出版社は全てのプロセスを一人でこなす小さなインディペンデント


Creative Edge School Books(クリエイティブエッジスクールブックス)は、コンテンツの企画から取材、執筆、編集、オーサリング、ストアの運用、販売、プロモーションなどのすべてのプロセスを一人でこなしている「一人出版社」。「本をつくる」出版社と「本を売る」本屋さん、そして誰でも自由に参加できる「学びの場」の3つを融合させたプラットフォームになっています。
2014年の秋にスタートした小さなインディペンデントです。

Creative Edge School Booksのコンテンツは「学びの場(デジタルクリエイティブ)」で公開しています。利用者から意見や感想、要望をもらって、新しいコンテンツに反映していくというビジネスモデルを実践中。クリエイティブ分野が中心ですが、今後はビジネスや社会分野のコンテンツを充実させる予定です。現在、AI(人工知能)を導入する準備を進めており、一人出版社の40%〜50%をAIでこなすために日々テストを重ねています。


投稿者:境祐司(Creative Edge School Books)
ご連絡:ebookcast@gmail.com
情報発信:@commonstyle
更新日:2016年9月8日(木)/投稿日:2015年9月30日(水)

Creative Edge School

Open Education Platform - Creative Edge School Books