最低限のコードでwebサイトを作成しよう(adc meetup 08)
DESCRIPTION
ADC MEETUP Round08 「最低限のコードでWebサイトを作成しよう」TRANSCRIPT
![Page 1: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/1.jpg)
最小限コードでWebサイトを作成しよう大倉 壽子 @hisara_ | アドビ システムズ 株式会社
![Page 2: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/2.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
本日のテーマ
× ×
![Page 3: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/3.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
本日のテーマ
デザイナー向けの Web 制作ツールをどう使い分けるか
× ×
![Page 4: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/4.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
Web 制作ツールと言えば
![Page 5: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/5.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
Web 制作ツールと言えば
Adobe Dreamweaver CCWeb サイトの統合制作ツール
![Page 6: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/6.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
Web の統合制作環境• デザイン、開発、公開、サイト管理
対象ユーザー• Web デザイナー、Web 開発者
新機能• ライブビューを使用した編集
• エレメントクイックビュー
• CSS デザイナーパネルの機能向上
• SFTP によるサイト管理の強化
• jQuery Widget
Dreamweaver CC の主な機能
![Page 7: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/7.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
この 2 製品知ってますか?
× ×
Edge Reflow Muse CC
![Page 8: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/8.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
本日のテーマ:Web デザイナーがアドビの Web 製品をどう使い分けるか
× ×
![Page 9: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/9.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
Adobe Edge Reflow
Edge Animate
Edge InSpect
Edge Reflow
Edge Code
Edge Font
Adobe Edge ファミリーの一員
HTML5 をベースに最新のテクノロジーに対応し、かつ最適化されたツール群
![Page 10: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/10.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
Edge Reflow (Preview8)
メディアクエリーによるレスポンシブデザインを直感的な操作で定義。CSS パネルでスタイル設定も思いのまま。
Edge Inspect 連携によるスマホ上でのリアルタイムプレビューも強力。
![Page 11: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/11.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
レスポンス Web デザイン
1 つの HTML で様々な画面サイズのデバイスに対応
![Page 12: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/12.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
Adobe Edge Reflow
メディアクエリーによるレスポンシブデザインを直感的な操作で定義。CSS パネルでスタイル設定も思いのまま。
Edge Inspect 連携によるスマホ上でのリアルタイムプレビューも強力。
![Page 13: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/13.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
Adobe Edge Reflow
メディアクエリーによるレスポンシブデザインを直感的な操作で定義。CSS パネルでスタイル設定も思いのまま。
Edge Inspect 連携によるスマホ上でのリアルタイムプレビューも強力。
レスポンシブ Web デザインのモックアップ作成
![Page 14: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/14.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
スクリーンサイズに応じたサイズ指定
![Page 15: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/15.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
可変グリッド
![Page 16: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/16.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
Photoshop との連携
PSD ファイルからすばやくレスポンシブWeb サイトのモックアップを作成可能
![Page 17: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/17.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
ブレークポイントの設定
数値で幅を指定 任意の名称
![Page 18: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/18.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
複数のデバイスでの実機テスト
![Page 19: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/19.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
Wi-fi でデータを送信
![Page 20: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/20.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
Adobe Muse CC
![Page 21: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/21.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
Adobe Muse CC とは
コードを書くことなく HTML サイトをデザイン、公開
![Page 22: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/22.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
Muse のオススメポイント –TOP 3-
コードを書かずにサイト作成が可能
1. 1. 2. 2. 3.数回のクリックで、サイトマップから公開まで Web制作のすべてができる!
Illustrator、InDesign、Photoshop などの使い慣れたツールの操作感や連携の強み!
SNS のシェアボタン、スライドショー、フォームなどインタラクティブ機能が簡単カスタマイズ
![Page 23: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/23.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
Muse はシンプル。5 ステップ
プラン
デザイン
プレビュー パブリッシュ
管理
![Page 24: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/24.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
「FTP ホストにアップロード」で解決!
Q:自社サイトで公開するには?
![Page 25: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/25.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
ちょっとしたテキストの修正なら
ブラウザー上で更新作業を完結
https://inbrowserediting.adobe.com/login/
![Page 26: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/26.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
「HTML に書き出し」で解決!
Q:カスタマイズするには
![Page 27: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/27.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
騎士とドラゴンhttp://www.kishidra.com
スマホゲームアプリ「騎士とドラゴン」の紹介サイト。フッター部分のアニメーションは Edge Animate を使用
日々これ Musehttp://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 事例紹介
![Page 28: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/28.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
Muse 事例紹介
White Rabbit Creative, Australiahttp://www.whiterabbitcreative.com.au
ページ上にさまざまな仕掛けが加えられたクリエイティブエージェンシーのデモサイト
ERRANTE CONSULTING & DESIGNhttp://erranteconsultingdesign.com/
テキストがモーションしなが登場するクリエイティブコンサルティングのサイト
Aaron Lawrence Design, United Stateshttp://www.aaronlawrencedesign.com
パララックススクロールを使いビジュアルが上下左右に変化するデザインプロダクションのサイト
Excuse Me Moseshttp://www.excusememoses.com/
アンカーを使ってページ内をスムーズにスクロールさせるバンドのオフィシャルサイト
Matt Pearce - Digital Designerhttp://www.mattpearce.co.uk/
イラストやロゴなどのポートフォリオをスライドショーを使ってデザイナー自ら作成したサイト
デザイナーアーティストポートフォリオ
![Page 29: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/29.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
Athenas Emporium, fine shabby chic and French style furniturehttp://www.athenasemporium.co.uk/
女性らしいインテリアや小物を扱ったショップのサイト
Link and Abby, United Stateshttp://www.linknabby.com
子ども向け洋服の商品がスクロールに合わせて変化
Caldo Caldo, Italyhttp://caldocaldo.eu
TypeKit のフォントを巧みに使ってデザインされたイタリアンフードのサイト
David Bircham Designhttp://www.davidbirchamdesign.com/
タブレットに最適化された横スクロールを使ってコンテンツを表現したデザインスタジオのサイト
Mavens, United Stateshttp://musegrid-mavens.businesscatalyst.com
写真とインタラクティビティに富んだビジュアルが多くデザインされたコーヒーバーのサイト
オンラインストア
Muse 事例紹介
![Page 30: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/30.jpg)
© 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 で工程短縮した制作フロー工程短縮した制作フロー
= 従来工程 = 手法改善 = 新機能
![Page 31: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/31.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
Muse と Dreamweaver どう切り分ける
コードで調整する?しない?
![Page 32: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/32.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
DTP デザイナー出身 Web デザイナー出身
製品をどう使い分けるか
Web サイト
自分の得意分野で勝負する
![Page 33: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/33.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
デザイン HTML レイアウト CMS/API/PHP 公開 ( プレビュー )
製品をどう使い分けるか
ワークフローで考える
![Page 34: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/34.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
キャンペーンサイト、
ランディングページ制作
Photoshop や Illustratorでサイトデザイン
↓
コーダーに渡す
サーバー連動
更新作業
Dreamweaver なら まかせろ!
…等
製品をどう使い分けるか
案件で考える
![Page 35: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/35.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
番外編Web デザイナーが知っておくと便利なAdobe のツールたち
![Page 36: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/36.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
モーショングラフィックなどは Edge Animate から挿入
![Page 37: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/37.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
素材の整理・管理・リネーム・比較表示に
![Page 38: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/38.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
Photoshop も Illustrator も整理されたデータで
【Photoshop】
画像アセット
【Illustrator】 複数
アートボード
▷ 1 ファイルでパーツを書き出し
![Page 39: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/39.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
まずは使ってみよう!
![Page 40: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/40.jpg)
© 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
![Page 41: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/41.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved.
参考リンク
http://www.adobe.com/jp/jos/designmagazine.html
アドビ デザインマガジン
Muse のことなら
![Page 42: 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)](https://reader038.vdocuments.net/reader038/viewer/2022102922/546de70daf79595e068b4580/html5/thumbnails/42.jpg)