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

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

© 2014 Adobe Systems Incorporated. All Rights Reserved.

本日のテーマ

× ×


本日のテーマ

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

× ×


Web 制作ツールと言えば


Web 制作ツールと言えば

Adobe Dreamweaver CCWeb サイトの統合制作ツール


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 を使用

日々これ 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 事例紹介


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/

イラストやロゴなどのポートフォリオをスライドショーを使ってデザイナー自ら作成したサイト

デザイナーアーティストポートフォリオ


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


企業のランディングページやキャンペーンサイト制作行程比較

従来の一般的な制作フロー

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 のことなら

Software

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