N. Design

webデザイナーやってます。お茶請け程度にどうぞ→@nnndmemo (Twitter)

Adobe MAX Japan まとめとか

f:id:nnnde:20160907111124p:plain こんにちは。 9月2日(金)にAdobe MAX Japanに行ってきたので 仕事用のレポそのままですが、まとめたのでよければ。

ずっと関東住まいですが、人生初ビックサイト行きました

www.event-web.net

KEY NOTE

簡単な挨拶

ピクドグラム

オリンピックでも使用されてる 「ピクトグラム」 ピグトグラム→誰が見てもすぐ伝わるイラスト (トイレマーク、非常口マークなど)

ピクトグラムの歴史、1964年の東京オリンピックがきっかけ 言語や文化の違いでも一目見てわかるようにと作られたもの デザインが果たす役割は当時から大きくある。 →言語や文化の違いを超えたデザイン

Adobe Beハンス

snsみたいなもの。  約800万人 新たな仕事の機会や、世界の人からのフィードバックがあります。 自分の作品のポートフォリオが作れます。

CCモバイル 製品開発の方の話

イキイキとしたクリティブのお手伝い

デジタル時代の創造的破壊

デジタルトランスフォーメンション 全てのものが、デジタルによって全てが変わるというもの デジタルに生活は作り変わったと言える(PC、スマフォなど)

他と一線を引くためにはインパクトの体験を作り出す - 質の良いデザイン - マルチスクリーン時代 (いつでもどこでもおもった時に使う) - パーソナルした体験

体験のカギを握る、クリティビティ →期待値を満たして越えていかなければならない

CCについて

2012年から現在まで

Adobe Stock/Librarise/xd アセットの話 CC Libranre 86% 作業効率向上 Adobe Stock 9.5% 作業効率向上

CCを使った例

webデザインを例に、CCを使えばこんなに早いよというのをシュミレーション

CompCC→その場で簡易にワイヤーやモックアップが作れる、作ったものはイラレなどに送る Photoshop→切り抜きの話 選択とマスクの話。 Photoshop→後、画像から、 書式→マッチフォント で画像に近いフォントが見つけられる XD→リピートグリット メモか何かで、テキストデータを改行で用意あれば、ドラックアンドドロップで反映できる

アドビリサーチ 伊藤大地さん

現在開発中のソフトの一部を公開

2Dデザインから3Dキャラクターの生成 3Dのような2Dシュミレーション 新しいブラシツール

シン・ゴジラ 編集・VFXスーパーバイザー 佐藤さんの話

ビジュアルエフェクト、予告編制作など

2015年1年頃に話が来た 16年夏にやるというのは必須 とあまり時間のないスケジュール

Premiere Pro CC を今回は導入を決意 (他にも映像編集では有名なソフトはあるらしい)

結構軽くて使いやすい、また、確認したりするのに手間があまりかからないので管理が楽

→今回は新しいことに試してみた。その結果時間があまりなくとも進められた。

アドビ初のUI/UXデザインツール、Adobe XDの使い方とロードマップ

Adobe XD3つのおすすめポイント

  • とにかく軽い LIGHT WEIGHT
  • そうとう簡単 SO EASY
  • そうとう簡単 SO EASY

とにかく使って楽しい

Adobe XDとは?

UIデザイン、プロトタイプ、共有 が1つのツールで出来るもの UserVoiceや、MonthlyUpdata(短いサイクルで機能を少しずつリリース)

機能実数は Ver1.0 →開発サイクルが長く、クオリティも犠牲に

そこでXDでは クオリティは最初からVer1.0 →機能を集中的に開発 短期間でリリースを繰り返すので、ユーザーの声も反映しやすい

クオリティを良い状態だと、要望などが拾いやすい。 逆にクオリティを犠牲にすると、バグなどの報告が多く、要望の声があまり表に出てこなくなる

まだプレビュー版ですがしっかり作りこんでます。

Adobe XD使い方の話

→知っているような内容だったので省略 →パス関係は全てダブルクリックでなんとかなる

Adobe XDのロードマップ

今後のリリース予定の機能紹介、今度追加されるものはサイトに書いてあります。

ADOBE APPBOX AWARDS 2016 →作品まだ募集してます

Webや映像を一段レベルアップするフォント選びの極意

花椿

花椿とは

資生堂が提供している、雑誌。78年ぐらい前の雑誌、 2016年デジタルへ移行。(webサイト)

コンセプトとして 「私たちは多くの人々と出会いを通じて新しく新しく深みのある価値を発見し、美しい生活文化を創造します」 見えていなかったものをクリアにし、それを鮮明な形で伝えることがデザイン

デジタルへ移行

3、4ヶ月使い、サイト制作 今まであまり取り込めなかった20代女性をターケッドに設計

紙で見ている人とは別に新規でつくる→本質をブレず、新規の入り口をつくる。

サイトのフォントはwebフォントを使用。

  • 両方(webと紙)使えるフォント
  • バイルとPCで見え方を変えたくなかった為

資生堂のロゴについて

手書きで用意している

全体的に中心が高い →モデルさん見たいに、立ち姿が美しいという所から来た

規則の中にどこかばバランスを崩してやるといいと考えている →静かな破壊活動

株式会社SIX

Lyric Speaker

音楽の世界は、CDとかよりオンライン上が主流に。 歌詞の魅了、言葉の魅力をもっと伝えたいという所からこのサービスが生まれた。

実物を見ましたが、ディスプレイに画面が出てくるのですが (ちょっと遠くて写真は撮れなかったです)

どんなものかというと、ちょっとしたディスプレイがあり、iPhoneから音楽を再生すると そのディスプレイに歌詞が出てくるのですが、ただ歌詞を流すだけではなく その歌詞の意味などにより動きやフォントが変わるというもの。

そこで使用したのがモリサワフォント

最初は様々なフォントを使用しようと思ったのですが、統一感を計りたかった為 文字は余白があるからいい。

デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック

架空のクライアントのwebサイト制作するという過程でCCのテクニックなどを紹介

アイディア出し/モック制作

持ち帰って、寝かせてからカンプ提出 →その場でイメージを具現化して共有できるのが、デキるデザイナー!

CompCC、St、XD などを使ってサクッとカンプ作成

デザイン作業前の準備

ガイドがずれたページを量産した →適切な設定でミスを防ぐのがデキるデザイナー!

PsとAiどっちで用意すればいいのか?

Photoshopメリット

Illustratorのメリット

  • ピクセルパーフェクトな時流の中で、Aiでのカンプ作成が求められている
  • フラットな色面メインのデザインをしやすい
  • オブジェクトの管理を数字で行いやすい
  • アセットの書き出しも便利になりました

→どっちかではなく、両方使えるのがデキるデザイナー!

カンプ作り込み

手癖で仕事して、時間単価があがらない 直しに強いデータを手早く作るのが、デキるデザイナー!

Photoshop

  • コンテンツに応じた切り抜き
  • 複数アートボード
  • スマートオブジェクト

Illustrator

  • ライブシェイプ
  • ダイナミックシンボル
  • CaptureCCとの連携

アセット書き出し

データ、レイヤーやグループが綺麗ではないデータ。 面倒なデータのコーディング苦痛 →コーダーに優しいデータを作るのが、デキるデザイナー!

アナログ技法×Creative Cloudで創り上げる、多媒体対応リッチビジュアルの製作工程

多媒体対応リッチビジュアル製作の概念と現実について

→どっちかというと印刷媒体などで使う大きさなど

多媒体に対応可能なデータ設計のために把握しておくべき項目について

  • 多媒体に対応しつつ、クオリティを落とさないため、発生するであろう媒体サイズを把握しておく。
  • データサイズは大きければいいというだけではない。大きすぎるものを縮小すると画像劣化する

アナログ技法を用いたリッチビジュアル具体的事例

→実際のpsdデータとともに紹介 1つ1つパーツごとに用意させているので、縦で作っていたものが横になっても対応できるように設計させている

  • ブラシワークス トーンシャープを防ぐ為にノイズを入れる
  • スマートオブジェクトを使う

感想

モリサワフォント1年分パスもらえた(マジ)

Adobeの製品PR的な印象も受けましたが、話を聞いて知らなかった機能も多くあり勉強になりました。 何気に最初のKEYNOTEの話は視点と意味では「当たり前の体験より上のものではならない」と言う事にガツンときました。当たり前とはいえ、改めて言われるとその通りだなと思ったので。

Adobe XDの開発ポリシーというのは説得力ありましたし、結構本気出しているなと聞いて感じました。確かに仕事で使い始めましたが、使いやすいです Adobe XDが今回、Adobe的には推しな感じです。

花椿のロゴのコンセプトは面白いかったし、最後のグラフィックのpsdデータはただただすごかった。

あとオリジナルグッツのクッション欲しかった (売り切れで買えなかった)

写真とか

f:id:nnnde:20160907113342p:plainf:id:nnnde:20160907113345p:plainf:id:nnnde:20160907113346p:plainf:id:nnnde:20160907113348p:plainf:id:nnnde:20160907113351p:plainf:id:nnnde:20160907113353p:plainf:id:nnnde:20160907113354p:plainf:id:nnnde:20160907113356p:plain