最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)

最小限コードでWebサイトを作成しよう
大倉壽子 @hisara_ ｜アドビシステムズ株式会社

© 2014 Adobe Systems Incorporated. All Rights Reserved.
本日のテーマ
× ×

本日のテーマ
デザイナー向けの Web 制作ツールを
どう使い分けるか
× ×

Web 制作ツールと言えば

Web 制作ツールと言えば
Adobe Dreamweaver CC
Web サイトの統合制作ツール

Web の統合制作環境
• デザイン、開発、公開、サイト管理
対象ユーザー
• Web デザイナー、Web 開発者
新機能
• ライブビューを使用した編集
• エレメントクイックビュー
• CSS デザイナーパネルの機能向上
• SFTP によるサイト管理の強化
• jQuery Widget
Dreamweaver CC の主な機能

この 2 製品知ってますか？
× ×
Edge Reflow Muse CC

本日のテーマ：Web デザイナーが
アドビの Web 製品をどう使い分けるか
× ×

Adobe Edge Reflow
Edge
Animate
Edge
InSpect
Edge
Reflow
Edge
Code
Edge
Font
Adobe Edge ファミリーの一員
HTML5 をベースに最新のテクノロジーに対応し、
かつ最適化されたツール群

Edge Reflow (Preview8)
メディアクエリーによるレスポンシ
ブデザインを直感的な操作で定義。
CSS パネルでスタイル設定も思いの
まま。
Edge Inspect 連携によるスマホ上で
のリアルタイムプレビューも強力。

レスポンス Web デザイン
1 つの HTML で様々な
画面サイズのデバイスに対応

Adobe Edge Reflow
まま。

Adobe Edge Reflow
まま。
レスポンシブ Web デザインのモックアップ作成

スクリーンサイズに応じたサイズ指定

可変グリッド

Photoshop との連携
PSD ファイルからすばやくレスポンシブ
Web サイトのモックアップを作成可能

ブレークポイントの設定
数値で幅を指定
任意の名称

複数のデバイスでの実機テスト

Wi-fi でデータを送信

Adobe Muse CC

Adobe Muse CC とは
コードを書くことなく
HTML サイトをデザイン、公開

Muse のオススメポイント –TOP 3-
コードを書かずにサイト作成が可能
1. 1. 2. 2. 3.
数回のクリックで、サイト
マップから公開まで Web
制作のすべてができる！
Illustrator、InDesign、
Photoshop などの
使い慣れたツールの
操作感や連携の強み！
SNS のシェアボタン、
スライドショー、フォーム
などインタラクティブ機能
が簡単カスタマイズ

Muse はシンプル。5ステップ
プラン
デザイン
プレビューパブリッシュ
管理

「FTP ホストにアップロード」で解決！
Q：自社サイトで公開するには？

ちょっとしたテキストの修正なら
ブラウザー上で更新作業を完結
https://inbrowserediting.adobe.com/login/

「HTML に書き出し」で解決！
Q：カスタマイズするには

騎士とドラゴン
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 事例紹介

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/
イラストやロゴなどのポートフォリオをスライドショーを
使ってデザイナー自ら作成したサイト
デザイナー
アーティスト
ポートフォリオ

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 事例紹介

企業のランディングページやキャンペーンサイト制作行程比較
従来の一般的な制作フロー
HTMLを編集
ブラウザに切替
タグのクラス
を確認
ブラウザを
リフレッシュ
参照先CSS
の確認
HTMLに切替
CSSファイル
を開く
参照先
JavaScript
の確認
CSSの編集
JavaScript
ソースを開く
CSSファイル
の保存
関連項目を参照
HTMLに切替
参照先を確認
HTMLの保存
参照ソース
を編集
ブラウザで開く
参照ソース
ファイルの保存
CSSを編集
ブラウザに切替
CSSファイル
の保存
ブラウザを
リフレッシュ
プランデザインプレビュー
HTMLに
書き出し
想定した作業内容：CSS、JavaScript が実装された HTML1 ページ分をコーディングする。
Dreamweaver で Web 制作：
1 ページのコーディングと検証作業の工数
Muse で工程短縮した制作フロー
工程短縮した制作フロー
= 従来工程 = 手法改善 = 新機能

Muse と Dreamweaver どう切り分ける
コードで調整する？しない？

DTP デザイナー出身 Web デザイナー出身
製品をどう使い分けるか
Web サイト
自分の得意分野で勝負する

デザイン HTML レイアウト CMS/API/PHP 公開 ( プレビュー )
ワークフローで考える

キャンペーンサイト、
ランディングページ制作
Photoshop や Illustrator
でサイトデザイン
↓
コーダーに渡す
サーバー連動
更新作業
Dreamweaver なら
まかせろ！
…等
案件で考える

番外編
Web デザイナーが知っておくと便利な
Adobe のツールたち

モーショングラフィックなどは Edge Animate から挿入

素材の整理・管理・リネーム・比較表示に

Photoshop も Illustrator も整理されたデータで
【Photoshop】
画像アセット
【Illustrator】
複数
アートボード
▷▷ 1 ファイルでパーツを書き出し

まずは使ってみよう！

チュートリアルが充実
• Web 制作入門
http://www.adobe.com/jp/jos/pinchin/start.html#an
• Design・Photo・Web・Video のチュートリアルが充実
http://www.adobe.com/jp/jos/creativestation/howto.html

参考リンク
http://www.adobe.com/jp/jos/designmagazine.html
アドビデザインマガジン
Muse のことなら

最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)

最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)

More Related Content

What's hot

Similar to 最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)

最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)