Webデザイン 4番勝負！有限会社アップルップル

Sketch VS

Photoshop

理紗子今井

✤原則、最新バージョンの機能です（2015.09.11現在）

✤主観も多分に含みます取り入れられそうなものだけ取り入れちゃってください

今井 理紗子 有限会社アップルップル デザイナー 2014.04～

CMSを導入した更新できるWebサイトの制作がメイン

デザインツールを乗り換えるまで

本セッションの流れ

デザインパーツの作成

画像の書き出し

プロトタイピング

拡張機能

まとめ

1

2

3

4

0

5

VS

VS

VS

VS

デザインツールを乗り換えるまで0

Fireworksの開発中止をきっかけに、Sketchの勉強会を受講

→社内プレゼン後、弊社のデザインツールに

Fw

Photoshop CC 2015 リリース！ Webデザイン向け機能の充実に「これでもいいんじゃない？」ムードが漂う

？ ？

VSなんて銘打ってしまいましたが、

どちらもとても良いツールです

それを踏まえて、 よりWebデザイン向きなのは どちらか考えていきます

あなたにピッタリの ツールを見つける お手伝いができれば幸いです

✤Fireworksの後継として話題に

✤MacOS専用です

✤扱える単位はピクセルのみ

✤比較的軽い

✤とはいえ、まだまだ発展途上

✤日本語の扱いが弱い

✤UIがオールEnglish

✤Windowsに互換性なし

イマイチなところ

グループ・オブジェクト

サイズやカラー、 シャドウなどの効果を設定

アートボード

値段の比較をしてみました

¥ 11,800App Store (2015.09.09現在) ※メジャーバージョンアップ時には注意

¥ 980～ /月Adobe フォトグラフィプラン

1VS デザインパーツの作成

✤ボタンとバナー

✤パーツを使い回すには

✤パス、SVGの扱い

ボタンとバナー

•効果の重ねがけはできる •文言の修正に強い •ビットマップは要注意

Dynamic Buttonで文言修正に対応 &複数の塗り(Fill)や効果を追加

ボタンとバナー

•レイヤー効果は便利 •シャドウの自由度 •和文フォントの美しさ

CC 2015 から一部レイヤースタイルが 重ねがけ可能に！

パーツを使い回すには

•Shared Style •Symbol

Styleで色やサイズを管理

Symbolでパーツを管理

パーツを使い回すには

•文字スタイル •段落スタイル •スマートオブジェクト

スマートオブジェクトでパーツを管理

パス、SVGの扱い

•Illustratorからコピペ •SVG書き出しにも対応

パス、SVGの扱い

•Illustratorとの連携 •CC 2014以降はSVG書き出し対応

ボタンとバナー

パーツの使い回し

パス、SVGの扱い

Winner PhotoshopVS 1. デザインパーツの作成

2VS 画像の書き出し

オブジェクトごとに 書き出し ＆複数の画像を一気に！

Exportで複数の画像を一括書き出し

スライス不要？ 「アセットを抽出」

指定のレイヤー名をつければ自動書き出し

OVEN http://oven.chrometaphore.com/

レイヤーの名前つけを よりスムーズに

たくさんのパーツを一括で 書き出すならPhotoshopが便利

画像の書き出し

Winner PhotoshopVS 2. 画像の書き出し

3VS プロトタイピング

InVision http://www.invisionapp.com/

リアルタイムでスマホサイトのデザインが確認できます

or

Sketch Mirror ※現在iOS版のみ ※有償

Adobe Preview CC ※現在iOS版のみ

Sketch、Photoshopで 同じサービスを使える

プロトタイピング

DRAWVS 3. プロトタイピング

4VS 拡張機能

プラグイン ありきです！

✤Content Generator

✤Sketch Dynamic Button

✤Align Text Baseline

✤Sketch Measure ……などなど

Sketch Toolbox でまとめて管理 http://sketchtoolbox.com/ ※beta

本体機能が 充実しても まだまだ現役！

✤Guide Guide

✤OVEN

✤ INK ……などなど

プラグインで Webデザイン用に強化

必要なものを追加したいならSketch

拡張機能

Winner SketchVS 4. 拡張機能

まとめ5

まとめ

まとめ

デザインパーツ

画像の書き出し

拡張機能

プロトタイピング

Winner Photoshop …ですが

• 動作が軽いよ！ • 学習コスト • スマホUI得意！

Sketchのいいところ

Prott https://prottapp.com/ja/

Sketch Photoshop

どちらでも Webデザインはできます

CSS再現性重視＆Webフォントなら…

私はこのタイプの 制作がメインです

画像見出しやバナーを盛り込むなら…

シチュエーションに合わせて Webデザインをハッピーに！

ツールでの作業時間を減らせば よりクリエイティブなところに 時間が使えるようになるはず！

http://4kakudez.com

ブログで情報発信中！

こんなイベントなら聞きに 行ってやってもいいぞ！など ご意見お待ちしております！

ご清聴ありがとうございました

i_mairy

http://4kakudez.com

Risako Imai