Adobe CSとCCの違いを製品別に解説!
(もっと楽になるWeb制作)

最新のCreative Cloudは、いつもの作業がもっと早くなる様々な機能が追加されています。CSからCCへ移行すれば、従来より効率よく高品質なWebサイトの制作が可能になります。

 Adobe CSとCCのWeb制作ワークフローの違い
 

  Photoshop編:CSとCCのWeb制作はこんなに違う
 

画像の切り抜き


CSでは…

合成時のマスクは、下レイヤーの画像が見えずやり直し作業が発生

CCなら…
「選択とマスク」を使うと、背景レイヤーを確認しながら直感的なマスクの切り抜きができ後からの修正も簡単!

詳細はこちら ›

 

素材の書き出し


CSでは…

スライスは切るのに手間がかかり、2倍解像度画像を書き出せない

CCなら…
レイヤーごと書き出す「クイック書き出し」、高解像度素材も一括して書き出す「書き出し形式」などで素早く書き出し

詳細はこちら ›

共通パーツの修正


CSでは…

ヘッダーの修正依頼が来た場合、今更全ページ修正することに…

CCなら…
スマートオブジェクト「リンクを配置」を使ってヘッダーを各ページに配置、全ページを一括して修正対応できる

詳細はこちら ›

 

複数サイズのバナー広告


CSでは…

展開するサイズの数だけPSDを作成、ファイルごとに編集と管理

CCなら…
必要なサイズのアートボードを並べ、一つバナーを作ったら、後は複製して整えていけば、次々にバナーが完成!

詳細はこちら ›

 


Photoshop CC の詳細はこちら ›

 

  Illustrator編:CSとCCのWeb制作はこんなに違う
 

スクリーン用素材の書き出し


CSでは…

画像ごとスライスを切り分け「Web用に保存」を繰り返す

CCなら…
アートボードやアセット単位で、複数のサイズやフォーマットを指定した一括書き出しが簡単&便利

詳細はこちら ›

 

素材の再利用


CSでは…

色やシャドウが違う場合は、別のシンボルとして編集する

CCなら…
「動的シンボル」を使えば、配置された個々のインスタンスに、個別の塗りやストロークを設定可能

詳細はこちら ›

 

アイコン作成


CSでは…

長方形/円形ツール、パスファインダー、ハサミ等々の組み合わせ

CCなら…
角丸の動的な変更ができるライブシェイプは再編集も容易。切り抜きや結合には、シェイプ形成ツールを利用

詳細はこちら ›

 

ピクセルグリッドに整合


CSでは…

変形したくないアンカーポイントもピクセルグリッドに整合される

CCなら…
カスタマイズ可能なピクセルスナップ機能が正確で自然なパスの整合を実現。描画時はもちろん変形や移動時も

詳細はこちら ›

 


Illustrator CC の詳細はこちら ›

 

  Dreamweaver編:CSとCCのWeb制作はこんなに違う
 

Bootstrap対応


CSでは…

カラム数をコードで記述、ブラウザー幅を調整しながら表示の確認

CCなら…
ドラッグ操作でカラム数やコンポーネントの配置を指定、クリックで表示幅を切り替えて見た目の確認

詳細はこちら ›

 

スマートフォンでプレビュー


CSでは…

最新ファイルをサーバーにアップロードして、ブラウザーにURLを入力

CCなら…
QRコードを読み込むだけ。ファイルを編集すると、スマホの表示が自動的に更新される

 

最新の開発ワークフロー


CSでは…

CSSプリプロセッサーには未対応。コードヒントを使ってコード補完

CCなら…
Sass等が環境構築無しで利用可能。Emmetやマルチカーソルが利用でき、スニペットもEmmetのように呼び出せる。Gitにも対応

 

PSDファイルの情報


CSでは…

PSDをPhotoshopで開き、スライスを利用して画像を取り出す

CCなら…
エクストラクトパネルに表示したPSDから画像やCSSを取り出すためPhotoshopは不要。要素間の寸法も取得できる

詳細はこちら ›

 


Dreamweaver CC の詳細はこちら ›