Submit Search
Upload
最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)
•
1 like
•
3,064 views
壽
壽子 大倉
Follow
ADC MEETUP Round08 「最低限のコードでWebサイトを作成しよう」
Read less
Read more
Software
Report
Share
Report
Share
1 of 42
Download now
Download to read offline
Recommended
【Edge Animate】スマホアプリのインタラクティブコンテンツ
【Edge Animate】スマホアプリのインタラクティブコンテンツ
Tomonori Watanabe
dotFes - Web標準にEdgeを利かそう
dotFes - Web標準にEdgeを利かそう
Andy Hall
画像投稿簡単!事例紹介で使えるメディアライブラリ
画像投稿簡単!事例紹介で使えるメディアライブラリ
lct-web
映像合成エンジンPENCIL概要(2014年4月)
映像合成エンジンPENCIL概要(2014年4月)
株式会社グラフィシア
映像合成ミドルウェア PENCIL 概要
映像合成ミドルウェア PENCIL 概要
株式会社グラフィシア
モダンなウェブをモダンなツールで創ろう!
モダンなウェブをモダンなツールで創ろう!
Andy Hall
CakePHP × 国産! baserCMS3の深化と今後の拡がり
CakePHP × 国産! baserCMS3の深化と今後の拡がり
Daisuke Abe
モダンなWebとモダンな開発ツールの新ネタ
モダンなWebとモダンな開発ツールの新ネタ
Andy Hall
Recommended
【Edge Animate】スマホアプリのインタラクティブコンテンツ
【Edge Animate】スマホアプリのインタラクティブコンテンツ
Tomonori Watanabe
dotFes - Web標準にEdgeを利かそう
dotFes - Web標準にEdgeを利かそう
Andy Hall
画像投稿簡単!事例紹介で使えるメディアライブラリ
画像投稿簡単!事例紹介で使えるメディアライブラリ
lct-web
映像合成エンジンPENCIL概要(2014年4月)
映像合成エンジンPENCIL概要(2014年4月)
株式会社グラフィシア
映像合成ミドルウェア PENCIL 概要
映像合成ミドルウェア PENCIL 概要
株式会社グラフィシア
モダンなウェブをモダンなツールで創ろう!
モダンなウェブをモダンなツールで創ろう!
Andy Hall
CakePHP × 国産! baserCMS3の深化と今後の拡がり
CakePHP × 国産! baserCMS3の深化と今後の拡がり
Daisuke Abe
モダンなWebとモダンな開発ツールの新ネタ
モダンなWebとモダンな開発ツールの新ネタ
Andy Hall
Adobe&HTML 札幌 - HTML5 Caravan
Adobe&HTML 札幌 - HTML5 Caravan
Andy Hall
ベトナム・ダナン オフショア開発記 by 中村健太(株式会社ビットエー/日本ディレクション協会)
ベトナム・ダナン オフショア開発記 by 中村健太(株式会社ビットエー/日本ディレクション協会)
セカイラボ(Sekai Lab Pte. Ltd.)
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
Tsuyoshi Nakao
HTML5 Caravan 福岡・Adobe&HTMLのスライド
HTML5 Caravan 福岡・Adobe&HTMLのスライド
Andy Hall
公開から4年間使ってきたbaserCMSをそろそろ本気でdisってみる(OSC2014福岡)
公開から4年間使ってきたbaserCMSをそろそろ本気でdisってみる(OSC2014福岡)
Garyuten
20150110 concret5 baser_cms合同勉強会
20150110 concret5 baser_cms合同勉強会
Daisuke Abe
サーバ管理はサーバレスで
サーバ管理はサーバレスで
horike37
ワイヤーフレームとは?
ワイヤーフレームとは?
Kazuma Sekiguchi
Adobe experience design April,May 2017 Update
Adobe experience design April,May 2017 Update
Kazuma Sekiguchi
Onsen UIが目指すもの
Onsen UIが目指すもの
アシアル株式会社
CSS Nite in SAPPORO x a-blog cms
CSS Nite in SAPPORO x a-blog cms
Seiko Kuchida
AngularでAmebaコミュニティサービス開発
AngularでAmebaコミュニティサービス開発
Yusuke Goto
Custom Vision APIの下準備
Custom Vision APIの下準備
Keiji Kamebuchi
Adobe xdモバイルアプリとの連携利用
Adobe xdモバイルアプリとの連携利用
Kazuma Sekiguchi
見せます! 半歩先のクラウド型アプリケーション開発
見せます! 半歩先のクラウド型アプリケーション開発
Tatsuki Manchu
Webデザイナーにフル活用してもらいたいWeb制作ツール
Webデザイナーにフル活用してもらいたいWeb制作ツール
Keisuke Todoroki
PanoPlazaについて
PanoPlazaについて
カディンチェ株式会社
ノンプログラマーのためのWordPressプラグイン開発超入門v1.0
ノンプログラマーのためのWordPressプラグイン開発超入門v1.0
Yuki Okamoto
WordPress ユーザーのための a-blog cms 入門
WordPress ユーザーのための a-blog cms 入門
Akiko Kasaya
強化された baserCMS の使いどころとは?
強化された baserCMS の使いどころとは?
Ryuji Egashira
AUGM Tokyo 2013 Adobe Creative Cloud のご紹介
AUGM Tokyo 2013 Adobe Creative Cloud のご紹介
Tsuyoshi Nakao
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
Keisuke Todoroki
More Related Content
What's hot
Adobe&HTML 札幌 - HTML5 Caravan
Adobe&HTML 札幌 - HTML5 Caravan
Andy Hall
ベトナム・ダナン オフショア開発記 by 中村健太(株式会社ビットエー/日本ディレクション協会)
ベトナム・ダナン オフショア開発記 by 中村健太(株式会社ビットエー/日本ディレクション協会)
セカイラボ(Sekai Lab Pte. Ltd.)
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
Tsuyoshi Nakao
HTML5 Caravan 福岡・Adobe&HTMLのスライド
HTML5 Caravan 福岡・Adobe&HTMLのスライド
Andy Hall
公開から4年間使ってきたbaserCMSをそろそろ本気でdisってみる(OSC2014福岡)
公開から4年間使ってきたbaserCMSをそろそろ本気でdisってみる(OSC2014福岡)
Garyuten
20150110 concret5 baser_cms合同勉強会
20150110 concret5 baser_cms合同勉強会
Daisuke Abe
サーバ管理はサーバレスで
サーバ管理はサーバレスで
horike37
ワイヤーフレームとは?
ワイヤーフレームとは?
Kazuma Sekiguchi
Adobe experience design April,May 2017 Update
Adobe experience design April,May 2017 Update
Kazuma Sekiguchi
Onsen UIが目指すもの
Onsen UIが目指すもの
アシアル株式会社
CSS Nite in SAPPORO x a-blog cms
CSS Nite in SAPPORO x a-blog cms
Seiko Kuchida
AngularでAmebaコミュニティサービス開発
AngularでAmebaコミュニティサービス開発
Yusuke Goto
Custom Vision APIの下準備
Custom Vision APIの下準備
Keiji Kamebuchi
Adobe xdモバイルアプリとの連携利用
Adobe xdモバイルアプリとの連携利用
Kazuma Sekiguchi
見せます! 半歩先のクラウド型アプリケーション開発
見せます! 半歩先のクラウド型アプリケーション開発
Tatsuki Manchu
Webデザイナーにフル活用してもらいたいWeb制作ツール
Webデザイナーにフル活用してもらいたいWeb制作ツール
Keisuke Todoroki
PanoPlazaについて
PanoPlazaについて
カディンチェ株式会社
ノンプログラマーのためのWordPressプラグイン開発超入門v1.0
ノンプログラマーのためのWordPressプラグイン開発超入門v1.0
Yuki Okamoto
WordPress ユーザーのための a-blog cms 入門
WordPress ユーザーのための a-blog cms 入門
Akiko Kasaya
強化された baserCMS の使いどころとは?
強化された baserCMS の使いどころとは?
Ryuji Egashira
What's hot
(20)
Adobe&HTML 札幌 - HTML5 Caravan
Adobe&HTML 札幌 - HTML5 Caravan
ベトナム・ダナン オフショア開発記 by 中村健太(株式会社ビットエー/日本ディレクション協会)
ベトナム・ダナン オフショア開発記 by 中村健太(株式会社ビットエー/日本ディレクション協会)
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
HTML5 Caravan 福岡・Adobe&HTMLのスライド
HTML5 Caravan 福岡・Adobe&HTMLのスライド
公開から4年間使ってきたbaserCMSをそろそろ本気でdisってみる(OSC2014福岡)
公開から4年間使ってきたbaserCMSをそろそろ本気でdisってみる(OSC2014福岡)
20150110 concret5 baser_cms合同勉強会
20150110 concret5 baser_cms合同勉強会
サーバ管理はサーバレスで
サーバ管理はサーバレスで
ワイヤーフレームとは?
ワイヤーフレームとは?
Adobe experience design April,May 2017 Update
Adobe experience design April,May 2017 Update
Onsen UIが目指すもの
Onsen UIが目指すもの
CSS Nite in SAPPORO x a-blog cms
CSS Nite in SAPPORO x a-blog cms
AngularでAmebaコミュニティサービス開発
AngularでAmebaコミュニティサービス開発
Custom Vision APIの下準備
Custom Vision APIの下準備
Adobe xdモバイルアプリとの連携利用
Adobe xdモバイルアプリとの連携利用
見せます! 半歩先のクラウド型アプリケーション開発
見せます! 半歩先のクラウド型アプリケーション開発
Webデザイナーにフル活用してもらいたいWeb制作ツール
Webデザイナーにフル活用してもらいたいWeb制作ツール
PanoPlazaについて
PanoPlazaについて
ノンプログラマーのためのWordPressプラグイン開発超入門v1.0
ノンプログラマーのためのWordPressプラグイン開発超入門v1.0
WordPress ユーザーのための a-blog cms 入門
WordPress ユーザーのための a-blog cms 入門
強化された baserCMS の使いどころとは?
強化された baserCMS の使いどころとは?
Similar to 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)
AUGM Tokyo 2013 Adobe Creative Cloud のご紹介
AUGM Tokyo 2013 Adobe Creative Cloud のご紹介
Tsuyoshi Nakao
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
Keisuke Todoroki
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
Keisuke Todoroki
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
Keisuke Todoroki
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
Tsuyoshi Nakao
Adobe & HTML5
Adobe & HTML5
Andy Hall
PhoneGapとハイブリッド開発
PhoneGapとハイブリッド開発
Andy Hall
デザイナー・印刷会社の皆様に贈る、Creative Cloud 導入のメリット <アップデート>
デザイナー・印刷会社の皆様に贈る、Creative Cloud 導入のメリット <アップデート>
Tsuyoshi Nakao
アドビの中の人が語るCreative Cloud最新事情と活用術! 〜 ココでしか聞けない「Adobe×山口」レア話 〜
アドビの中の人が語るCreative Cloud最新事情と活用術! 〜 ココでしか聞けない「Adobe×山口」レア話 〜
Michihiko Nasukawa
Adobe Web 統合開発環境のご紹介
Adobe Web 統合開発環境のご紹介
Tsuyoshi Nakao
Adobe Anywhere for Video
Adobe Anywhere for Video
Dell TechCenter Japan
良くわかる!Adobe Creative Cloud グループ版
良くわかる!Adobe Creative Cloud グループ版
Tsuyoshi Nakao
Cloudinaryの画像変換・配信で Webサイトを高速化
Cloudinaryの画像変換・配信で Webサイトを高速化
Mai Ito
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
xyz corporation
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
Teiichi Ota
Augm nagasaki 2014 adobe session
Augm nagasaki 2014 adobe session
Tsuyoshi Nakao
アバター着せ替えアプリ開発におけるフロントエンド技術(Vue.js活用事例) #denatechcon
アバター着せ替えアプリ開発におけるフロントエンド技術(Vue.js活用事例) #denatechcon
DeNA
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
Keisuke Todoroki
[網元] WordPress 高速化チューニング AMI
[網元] WordPress 高速化チューニング AMI
Hiromichi Koga
Similar to 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)
(20)
AUGM Tokyo 2013 Adobe Creative Cloud のご紹介
AUGM Tokyo 2013 Adobe Creative Cloud のご紹介
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
Adobe & HTML5
Adobe & HTML5
PhoneGapとハイブリッド開発
PhoneGapとハイブリッド開発
デザイナー・印刷会社の皆様に贈る、Creative Cloud 導入のメリット <アップデート>
デザイナー・印刷会社の皆様に贈る、Creative Cloud 導入のメリット <アップデート>
アドビの中の人が語るCreative Cloud最新事情と活用術! 〜 ココでしか聞けない「Adobe×山口」レア話 〜
アドビの中の人が語るCreative Cloud最新事情と活用術! 〜 ココでしか聞けない「Adobe×山口」レア話 〜
Adobe Web 統合開発環境のご紹介
Adobe Web 統合開発環境のご紹介
Adobe Anywhere for Video
Adobe Anywhere for Video
良くわかる!Adobe Creative Cloud グループ版
良くわかる!Adobe Creative Cloud グループ版
Cloudinaryの画像変換・配信で Webサイトを高速化
Cloudinaryの画像変換・配信で Webサイトを高速化
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
Augm nagasaki 2014 adobe session
Augm nagasaki 2014 adobe session
アバター着せ替えアプリ開発におけるフロントエンド技術(Vue.js活用事例) #denatechcon
アバター着せ替えアプリ開発におけるフロントエンド技術(Vue.js活用事例) #denatechcon
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
[網元] WordPress 高速化チューニング AMI
[網元] WordPress 高速化チューニング AMI
最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)
1.
最小限コードでWebサイトを作成しよう 大倉 壽子 @hisara_
| アドビ システムズ 株式会社
2.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. 本日のテーマ × ×
3.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. 本日のテーマ デザイナー向けの Web 制作ツールを どう使い分けるか × ×
4.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Web 制作ツールと言えば
5.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Web 制作ツールと言えば Adobe Dreamweaver CC Web サイトの統合制作ツール
6.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Web の統合制作環境 • デザイン、開発、公開、サイト管理 対象ユーザー • Web デザイナー、Web 開発者 新機能 • ライブビューを使用した編集 • エレメントクイックビュー • CSS デザイナーパネルの機能向上 • SFTP によるサイト管理の強化 • jQuery Widget Dreamweaver CC の主な機能
7.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. この 2 製品知ってますか? × × Edge Reflow Muse CC
8.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. 本日のテーマ:Web デザイナーが アドビの Web 製品をどう使い分けるか × ×
9.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Edge Reflow Edge Animate Edge InSpect Edge Reflow Edge Code Edge Font Adobe Edge ファミリーの一員 HTML5 をベースに最新のテクノロジーに対応し、 かつ最適化されたツール群
10.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Edge Reflow (Preview8) メディアクエリーによるレスポンシ ブデザインを直感的な操作で定義。 CSS パネルでスタイル設定も思いの まま。 Edge Inspect 連携によるスマホ上で のリアルタイムプレビューも強力。
11.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. レスポンス Web デザイン 1 つの HTML で様々な 画面サイズのデバイスに対応
12.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Edge Reflow メディアクエリーによるレスポンシ ブデザインを直感的な操作で定義。 CSS パネルでスタイル設定も思いの まま。 Edge Inspect 連携によるスマホ上で のリアルタイムプレビューも強力。
13.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Edge Reflow メディアクエリーによるレスポンシ ブデザインを直感的な操作で定義。 CSS パネルでスタイル設定も思いの まま。 Edge Inspect 連携によるスマホ上で のリアルタイムプレビューも強力。 レスポンシブ Web デザインのモックアップ作成
14.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. スクリーンサイズに応じたサイズ指定
15.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. 可変グリッド
16.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Photoshop との連携 PSD ファイルからすばやくレスポンシブ Web サイトのモックアップを作成可能
17.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. ブレークポイントの設定 数値で幅を指定 任意の名称
18.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. 複数のデバイスでの実機テスト
19.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Wi-fi でデータを送信
20.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Muse CC
21.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Adobe Muse CC とは コードを書くことなく HTML サイトをデザイン、公開
22.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Muse のオススメポイント –TOP 3- コードを書かずにサイト作成が可能 1. 1. 2. 2. 3. 数回のクリックで、サイト マップから公開まで Web 制作のすべてができる! Illustrator、InDesign、 Photoshop などの 使い慣れたツールの 操作感や連携の強み! SNS のシェアボタン、 スライドショー、フォーム などインタラクティブ機能 が簡単カスタマイズ
23.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Muse はシンプル。5ステップ プラン デザイン プレビューパブリッシュ 管理
24.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. 「FTP ホストにアップロード」で解決! Q:自社サイトで公開するには?
25.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. ちょっとしたテキストの修正なら ブラウザー上で更新作業を完結 https://inbrowserediting.adobe.com/login/
26.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. 「HTML に書き出し」で解決! Q:カスタマイズするには
27.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. 騎士とドラゴン http://www.kishidra.com スマホゲームアプリ「騎士とドラゴン」の紹介サイト。フッ ター部分のアニメーションは Edge Animate を使用 日々これ Muse http://www.ripplation.co.jp/ muse/ 株式会社 リプレーション / デ ザイナー、かわぎし てるよ氏の運営サイト。Muse での Web サイト制作の中で同氏が悩んだところ、独自に検証した機能 などのノウハウを中心に Muse の Tips を多数紹介 アトリエ秋山 http://atelierakiyama.com/ index.html フリーデザイナー秋山亮氏の運営するデザイン事務所のの サイト。暖かみのあるイラストとシンプルながら見やすい事 例が多数 マリモレコーズ http://marimorecords.com/ index.htmll 映像編集プロダクションのマ リモレコーズの自社サイト。Muse と Edge Animation を利用 してインタラクティブで楽しいサイトになっている ノンプログラマーデ ザイン http://design-zero.tv/muse/ 境祐司 氏の Muse オンライ ントレーニングのサイト。ト レーニングを購入するためのオンラインストア機能も付いて いる。 国内事例 Muse 事例紹介
28.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Muse 事例紹介 White Rabbit Creative, Australia http://www. whiterabbitcreative.com.au ページ上にさまざまな仕掛けが加えられたクリエイティブ エージェンシーのデモサイト ERRANTE CONSULTING & DESIGN http://erranteconsultingdesign. com/ テキストがモーションしなが登場するクリエイティブコンサ ルティングのサイト Aaron Lawrence Design, United States http://www. aaronlawrencedesign.com パララックススクロールを使いビジュアルが上下左右に変 化するデザインプロダクションのサイト Excuse Me Moses http://www.excusememoses. com/ アンカーを使ってページ内をスムーズにスクロールさせる バンドのオフィシャルサイト Matt Pearce - Digital Designer http://www.mattpearce. co.uk/ イラストやロゴなどのポートフォリオをスライドショーを 使ってデザイナー自ら作成したサイト デザイナー アーティスト ポートフォリオ
29.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Athenas Emporium, fine shabby chic and French style furniture http://www.athenasemporium. co.uk/ 女性らしいインテリアや小物を扱ったショップのサイト Link and Abby, United States http://www.linknabby.com 子ども向け洋服の商品がスクロールに合わせて変化 Caldo Caldo, Italy http://caldocaldo.eu TypeKit のフォントを巧みに使ってデザインされたイタリア ンフードのサイト David Bircham Design http://www. davidbirchamdesign.com/ タブレットに最適化された横スクロールを使ってコンテンツ を表現したデザインスタジオのサイト Mavens, United States http://musegrid-mavens. businesscatalyst.com 写真とインタラクティビティに富んだビジュアルが多くデザ インされたコーヒーバーのサイト オンラインストア Muse 事例紹介
30.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. 企業のランディングページやキャンペーンサイト制作行程比較 従来の一般的な制作フロー HTMLを編集 ブラウザに切替 タグのクラス を確認 ブラウザを リフレッシュ 参照先CSS の確認 HTMLに切替 CSSファイル を開く 参照先 JavaScript の確認 CSSの編集 JavaScript ソースを開く CSSファイル の保存 関連項目を参照 HTMLに切替 参照先を確認 HTMLの保存 参照ソース を編集 ブラウザで開く 参照ソース ファイルの保存 CSSを編集 ブラウザに切替 CSSファイル の保存 ブラウザを リフレッシュ プラン デザイン プレビュー HTMLに 書き出し 想定した作業内容:CSS、JavaScript が実装された HTML1 ページ分をコーディングする。 Dreamweaver で Web 制作: 1 ページのコーディングと検証作業の工数 Muse で工程短縮した制作フロー 工程短縮した制作フロー = 従来工程 = 手法改善 = 新機能
31.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Muse と Dreamweaver どう切り分ける コードで調整する?しない?
32.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. DTP デザイナー出身 Web デザイナー出身 製品をどう使い分けるか Web サイト 自分の得意分野で勝負する
33.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. デザイン HTML レイアウト CMS/API/PHP 公開 ( プレビュー ) 製品をどう使い分けるか ワークフローで考える
34.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. キャンペーンサイト、 ランディングページ制作 Photoshop や Illustrator でサイトデザイン ↓ コーダーに渡す サーバー連動 更新作業 Dreamweaver なら まかせろ! …等 製品をどう使い分けるか 案件で考える
35.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. 番外編 Web デザイナーが知っておくと便利な Adobe のツールたち
36.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. モーショングラフィックなどは Edge Animate から挿入
37.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. 素材の整理・管理・リネーム・比較表示に
38.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. Photoshop も Illustrator も整理されたデータで 【Photoshop】 画像アセット 【Illustrator】 複数 アートボード ▷▷ 1 ファイルでパーツを書き出し
39.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. まずは使ってみよう!
40.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. チュートリアルが充実 • Web 制作入門 http://www.adobe.com/jp/jos/pinchin/start.html#an • Design・Photo・Web・Video のチュートリアルが充実 http://www.adobe.com/jp/jos/creativestation/howto.html
41.
© 2014 Adobe
Systems Incorporated. All Rights Reserved. 参考リンク http://www.adobe.com/jp/jos/designmagazine.html アドビ デザインマガジン Muse のことなら
Download now