ADC_MEETUP_08b

【ADC MEETUP 08】Adobe Ink&Slideを触ってみた&大量tips集備忘録

執筆:Daily GIF89a編集部

ADC_MEETUP_08b
©ADC MEETUP ROUND 08

 

2014年7月30日、品川、コクヨホールでWebデザイナーを対象に、「ADC MEETUP 08」がアドビ システムズ株式会社主催で開催された。Webデザインに役立つ機能を中心に、PhotoshopやIllustrator、Dreamweaver、Museなどの素晴らしいtipsを公開するセッションが行われた。本記事では当日のセッションで筆者が学んだことを備忘録的に列挙した。各項目の詳しい情報をまた改めて咀嚼した後お伝えできれば幸いである。

 

各セッションの内容は下記の通り、本記事はtipsを紹介したセッション2〜セッション5の内容で筆者が学んだ内容である。

  • セッション1:Creative Cloud 2014年リリース
  • セッション2:Creative Cloud デザインツールの便利な8つの機能
  • セッション3:コーディングを考慮したWebデザインガイドライン
  • セッション4:画面カンプからCSSを得る5つの方法 [ショートセッション]
  • セッション5:最小限のコードでWebサイト制作しよう

 

また会場では6月19日に公開された「Adobe Creative Cloud」と連携するモバイルアプリ群のリリースと合わせて、アドビとして初めてのハードウェアである「Adobe Ink 」「Adobe Slide」のデモも実施された。筆者もそのデジタルペンと、デジタル定規を実際に触ってみた。非常にかき心地がよく、iPadをつかってデザインのブレスト等ではかなり重宝すると感じた。

adobe ink & slide【アドビADC MEETUP ROUND 08】イベントレポートと学んだtips集
Adobe Ink & Slide

 

それでは、実際に当日学んだチップス集を記載してみる。説明画像等が無いのはご容赦いただきたい。

 

Creative Cloud デザインツールの便利な8つの機能
秋葉秀樹氏:株式会社ツクロア

akiba-hideki

大学の先生ならではの、学生や初心者の方がつまづくポイントや、便利なtipsを解説された。Photoshopのチップスやライブで行われたデモでは、会場にいた方のスマートフォンから投稿した写真が、リアルタイムで秋葉氏のPhotoshop画面に表示され、ぞくぞくとアップロードされる様子は非常に新鮮で面白かった。秋葉氏が解説したtipsの幾つかをご紹介しよう。

Illustratorのtips

[ラバーバンド機能]初心者でもハンドル・アンカーポイントを理解しやすくなる!

・ペンツールでパスを打つ際に、アンカーポイントとハンドルを混同してしまう初心者には非常に有効な機能で、プレビューをしながらアンカーポイントを打つことができるようになった。

[アンカーポイントツール]雲状の絵をどう描く?

経験のある方だとペンツールでアンカーポイントを打ちながらハンドルを調整していく。直感的な作業をするには、多角形のアンカーポイントを打った後に、アンカーポイントツールで押し出す形で雲状のパスを描いてもよいだろう。

[鉛筆ツール]ノイズのない綺麗な曲線が描ける。

鉛筆ツールのオプションで滑らかさを向上させることで、きれいな曲線を描くことができる。秋葉氏の説明にあったように、LINEスタンプを制作する方などは非常にきれいなイラストが簡単に制作できるだろう。

[CSS書き出し機能]スライスを減らす

UIパーツはよりシンプルになってきている。これはコンテンツが主役であり、「再生ボタン」や「ヘッダー」などはおまけでしかないからだ。
・色コードや角丸半径の値などの取得に便利
・ベンダープリフィックス対応が最新でないので注意

[Responisve SVG書き出し]レスポンシブを指定する。

SVGのwidthとheightの値を削除し、親要素に合わせて可変してくれるのでレスポンシブな利用ができる。

 

Photoshopのtips

[画像アセット]自動で書き出す。

レイヤーに適切な名前をつけることで、今まで保存してjpgやpngにスライスとして書き出していたのが、自動で出力される。非常に便利な機能だ。

[Photoshopでのビデオ編集]簡単な動画ならPhotoshopで加工をしてみると便利

iPhoneでとった動画に音楽をつけたり、フェードインやフェードアウトなどのトランジションをドラッグアンドドロップだけで動画を制作することができる。ちょっとしたショートムービーなどはPhotoshopで編集ができる。

[ビデオコーデック]Photoshopでの動画編集での注意

H.264に対応していないメジャーブラウザはMac版FireFox。今後対応はするだろうが、その点注意が必要だ。

 

 

 

セッション3 コーディングを考慮したWeb制作ガイドライン
巻下浩之氏(株式会社Plankton Design クリエイティブ・ディレクター)

hiroyuki_makishita

コーディング担当者が作業しやすいデザインカンプを作成するためのデザインおよびデザインデータ制作のガイドラインを理解することができるセッションだった。表現の揺れやコミュニケーションロスを削減するには、他者にもわかりやすい命名規則や反復利用しやすい画像を制作することが重要である。当セッションでは、WEBデザインの作法という基本的な部分から、修正に強いデータを作るためのtipsも解説していただいた。非常に勉強になった。

コーディング作業で困らないデザインとは?
巻下氏は以下の3点をお話された。
・WEBデザインの作法に則る。
・意図が明確で一貫性のあるデザインを作成する。
・他社が見てもわかりやすいデータを作成する。

[WEBデザインの作法]

  • カラーモードはRGBにしよう。
  • 寸法はピクセルにしよう。
  • テキストサイズは整数で指定しよう。
  • ブロック要素内で自動改行されるテキストを再現するために任意改行を入れない。
  • 透過画像として書き出す必要のあるレイヤーに特殊な描画モード(焼きこみカラーなど)を指定しない。
  • ドロップシャドウなど画像に切り出す要素を重ねず、画像で再現するのかCSSで再現するのかを決めておく
  • パターンなど反復する画像はリピート可能なデザインにする(正方形でパターン1単位を分けて作っておく)

 

[意図が明確で、一貫性のあるデザインを作成する]

  • 位置:レイアウトを決める際は因数を決めておく
  • マージンや1カラムの幅を4の倍数、5の倍数、6の倍数と定めておくことで統一感があり、他者とのコミュニケーションにおいて、コミュニケーションロスを削減できる。
  • 色:反復する色はスウォッチで管理する
  • スポイトでは正確に管理できない。仕様範囲や命名は規則的にして、管理をしやすくできる。プリセットマネージャーを用いて場、スウォッチの表示順などを入れ替えられるので、命名規則は重要。
  • ディティール
  • グラデーションやドロップシャドウなどの反復使用するものは保存する。
  • テキスト:反復使用する文字設定・段落設定は文字スタイル・段落スタイルパネルに登録する。
  • エレメント:反復しようするエレメントをエレメントファイルにまとめる。

 

[他社が見てもわかりやすいデータを作成する。]

  • レイヤーを統合せず編集可能な状態で残しておく。
  • レイヤーには名前をつける
  • レイヤーを順番(奥、上、左に存在する順番)に並べる
  • レイヤーをグルーピングする
  • 不要なレイヤーを削除
  • スマートオブジェクトを外部ファイル化(psbファイル)して反復利用するレイヤーを再利用しやすくする。
  • レイヤーカンプ、表示非表示を保存する。属性パネルから制御ができる。

 

 

 

セッション4 画面カンプからCSSを得る5つの方法 仲尾毅氏

tnakao

1.Fireworks CS6

・CSS書き出しやスライスツール、スプライト書き出しを利用する。

2.Photoshop CC

・レイヤーパネル上で右クリック、「CSSをコピー」で簡単にCSSを取り出せる。

3.Illustrator CC

・ファイル、生成、画像アセットをで画像を効率的に画像を吐き出す。

4.Edge Reflow CC

・Photoshopで作ったカンプをそのまま読みこんで、画面サイズのブレークポイントを 指定するだけでコードを書かずにレスポンシブなWEBサイトを構築できる。

5.Project Parfait

・PSDファイルをクラウド上で管理しCSSを抽出。

 

 

 

セッション5 最小限のコードでWebサイトを制作しよう 大倉 寿子 氏

hisako

Edge Reflow、Museは正直なところうまく使いこなせていない方も多いのではないだろうか、本セッションでは、その利用シーンをイメージした上で機能のtipsを解説されていた。

DreamweaverとEdge ReflowとMuseをどのように使い分けてWeb制作をするかというテーマで非常に勉強になるセッションであった。DTP出身の方はMuse,Web制作出身のかたはDreamweaver、EdgeReflow

 

DreamweaverでのWeb制作

  • ライブビューで直接修正することでコードを最小限で作業できる。
  • エレメントクイックビューでdivの階層構造をドラッグアンドドロップで変更できる。

 

Edge ReflowでのWeb制作

レスポンシブWebデザインを制作ことに特化したツール

  • スマホ、タブレット、PCなどの画面サイズに合わせてブレークポイントを設定し、要素を直感的に配置し、CSSを吐き出すことができる。
  • Photoshopから読み込む際は、グループなどの階層構造を整えておくと非常に簡単に作業をすすめられる。
  • Edge Inspect CCと連携し、デバイスでの実機動作をサーバーにあげずに確認する。

 

Muse CC

コードを書くこと無くHTMLサイトをデザイン、公開できるツール

  • プラン、デザイン、プレビュー、パブリッシュ、管理の5STEPでWebサイトを完成させることができる。
  • ブレークポイントではなく、制作する時点でPC、スマホ、タブレットの画面に分けて制作する。

 

また改めて時間がある際に、各項目を実際に触ってみながら咀嚼してみようと思う。

執筆:Daily GIF89a編集部

GIFMAGAZINE