N. Design

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

AdobeMaxJapan 2017感想

こんばんわ、お久しぶりです。Adobe MAX Japan2017に行ってまいりました。会社に出したレポそのままですが、こちらにもはい、どんしようかと思います。

Keynote

  • Adobe Community Evangelist
  • Adobe製品、ここいいよと広める人。(講演したりなど)

Adobe製品アップデート内容など

  • イラレCC2018 パヘットワーク という新しい機能
  • Capture CC 写真とって、その写真から似たフォントを提案してくれる
  • 新しいフォント 貂明体
  • フォトショップ 円などのパスが簡単に書ける様に
  • フォトショップ ブラシ kyleさんという方が無料で提供してるものがある
  • フォトショップ ブラシ なめらか。というのが追加
  • Xd アセットパネルで色、シンボル、文字が管理可能
  • Xd 開発者へ仕様渡しやすく
  • Dimensions 新しいやつ。簡単に3D作れる。
  • lightroom 写真調整、管理ツール モバイル版、ウェブ版、ディスクトップ版あり
  • lightroom また検索でワード入れると、タグとかつけてなくても「鳥」とか入れると頑張ってそれを表示させてくれる(ディープラーニング?)
  • Premiere Pro レスポンシブデザイン取り入れた
  • キャラクターアニメーター 製品化へ

Adobe Sensei

  • AIぽい感じだと思われ、Adobe Sensei。
  • テンプレ用意して(PC)音声で「スマフォ版のレイアウト」にすると自動で用意してくれる
  • デザインでよくある「ここが◯◯ではなくて××の場合もみたい」などの場合もすぐに対応できる。

落合陽一さんトーク

なんかすごい研究者の人。 レポートとかをインデザインで書いてたらしい。

  • フレームの外の自然へ、メディア自体をクリーエションする
  • 環境に馴染むものをつくるのが大事、自然な場所にいれていく
  • 人はいずれイルカになる
  • デジタルが自然化する

シャボン玉の膜みたいなのに蝶写ったりなどの動画だったりで、本来なら、ん?と思うけどどこか馴染む不思議な作品多かったです。

ベテランほど知らずに損してるPhotoshop[MAX Special]

鷹野 雅弘 さん スイッチ/三浦 将 さん Derario Creative

過去(CS6 2012)と今(CC 2017)で変わった面を実際の操作をみながら紹介

ポイント 1 web用画像書き出し 2 画像配置関連 3 Adobe Stockとの連携 4 強力なエクステンション

1.web用の画像書き出し

基本

[cs6] スライスツールで1つ1つやってた

[cc] 画像アセットがある。

・切り出したい部分のレイヤー名に拡張子をつける
・ファイル→ 生成 →画像アセット

そして保存すると、 ファイル名-assets というフォルダで生成され画像が保存される。

画像アセットはチェックつけたらずっとつく。 チェックした場合、常にリアルタイムに修正が反映させる。

複数書き出し

スマフォ版などの、複数書き出しも可能 下記の様な形だと、原寸と@2xのサイズが書き出せる。

xxx.png,200%@2x

複数の場合など。

でも200%@2xなど1つ1つ名前を振るの大変。そこで Asset renamerを作ったよ。

名前 →エクステンション →aseet renamer 書き出したい、ボタンをぽちっと

名前一括変換 書き出したいサイズを選んでボタンでポチなどで簡単に。

2.画像配置関連

レイヤー → スマートオブジェクト / ウィンドウ → 属性 → リンクされたファイルを選択 でリンク設定可能。

ウィンドウ→ライブラリー→レイヤー→スマートオブジェクト→新規ライブラリーレイヤ

レイヤーに雲マークがクラウド上に保存される。 文字、カラーも保存も可能なので共同作業で役に立つ。 共通パーツを外部で一括などできる。

ONとOFFなど。

しかしよくある、headerのページごとにONとOFFが違う問題 レイヤーカンプを使おう

ウィンドウ→属性→レイヤーカンプの切り替えを行う

3.adobe stockとの連携

ウィンドウ→ccライブラリー→キーワードを入れる

adobe stock→adobe

カート:ライセンスを取得 雲マーク:仮で使う場合

また、ライブラリからD&Dで調整画像を差し替え。 ※別途有料 月何点などいうもの

4.強力なエクステンション

拡張機能 Bootcamp

写真を入れたい場合、細かく調整していたが、

エクステンション→bootcamp

imagebox

ボタンを押すとファイル→選ぶ 中央に配置。ただしマスクはさててないので微調整は必要。 削除すると自動でダミー画像

リピートグループ

リピートさせせたいのを選んでぽちぽちやるだけ (Xdのリピートグリットと一緒)

レイヤー→ダミー→全て選択→rename

レイヤー名とファイル名と統一され、ぶっ込み。

非破壊編集

・調整レイヤー ・スマートフィルダー ・スマートオブジェクト

これらを使って元のレイヤー(画像)を破壊せずに編集しようという考え

シャドウ・ハイライト自分で選択範囲選ばない。

シャドウ:暗いのを明るい ハイライト:明るいのを暗く

直接やるのは破壊していることになる。

スマートオブジェクトに変換し、別ファイルでパッケージ化 そして調子を行う。(調整レイヤー)

camera raw →どんな画像にも適用可能 かすみの除去便利

よくある室内からとった写真の、蛍光灯などを消したい スポット修復ブラシツール → ヒーリングブラシ(コンテンツに応じる)

でできるが、非破壊がテーマなのでスマートオブジェクトに変換すると、スポット修復は使えないそこでどうするか。

透明なレイヤーを入れる/全レイヤーを対象 で編集可能に。

2018年版Webデザイン体験講座 / Adobe XD+IllustratorPhotoshop連携テク

黒野 明子さん/crema design ・イラレのパス、パヘットワーク、アートボート一括揃え ・photoshop コンテンツに応じる、髪の毛の簡易切り抜き ・Xdのライブラリーの連携させ、楽に流しこむ。

などを一緒に流れ作業で行ったもの。

伝言ゲームをなくしてデザインの質を高める!Adobe XDを使ったライブデザインのコツ

池原 健治さん/ソニーインタラクティブエンタテインメント

デザインが完成する間までのコミュニケーション、伝言ゲームになってないか? 「理想のデザインを追求する」「人の意見も聞く」を両方やらなければならない。

そこでXdでそれをどう改善するのかを使ってやってみよう (仮のサイトを用意ずみ、改善などをデモストレーションして、即座に反映させる) (Xdで結構なホネぐみも作れる様になったし、モックも作れる。またデザインスペックも渡せるので仕様書不要に)

デザインを作る時には理由をつけよう。 Xdは変更など、頭で考えたことがすぐにできる様に。

Xdストリーム

ブレスト/絞り込み/デザイン/確認 これらが間挟まず、一括でXdで全て済むので伝言ゲームにならずに済む。

ブレインストームの手法と同様に、Xdライブデザインでストームして、その場で視覚化する手法をXdストーム(プレゼンの方が勝手につけた)

あるサイト制作にXdを導入してみて

- 早い段階でラフデザインができた - 細かい作り込みに回せる時間ができた - 関係者への回覧、簡易ユーザテスト - コミュニュケーションとデザイン、両方の質が上がり、無駄なやり直しがなくなった

Photoshop CC実践講座 〜決めるのは今!広告写真レタッチに最新版は必要!?〜

cc2018のフォトショップの大きな変更機能 - パスツール強化 - ブラシツール今日か - HIEFのサポート - 詳細ツールチップ

など様々。

パス:ラバーバンドを入れるとアシストに。

オススメのブラシは2種類り、結構いろいろなレタッチに対応できる。

  • 感覚1%でなめらかな線のものに。
  • 聞きそびれたが、ぼかしぽい感じのもの

あとは細かいレタッチなどをデモストレーションしながら解説

感想

  • 去年に引き続き、Xd推しなのか、その関連のものを力入れてる印象。
  • AdobeSenseiというワードがやたら出てきて、面倒な作業はAIにおまかせ、作ることに集中して欲しいという感じを目標にしている感じ、なんとなくコーダーの仕事がそろそろ本当になくなりそう。
  • Dwとかはあまり話題に上がってないのでひっそり頑張ってる感じ?でも今のところDwにあまりメリットは感じられない。
  • 新しいフォントの使い所わからないが、もっと色々なものに対して日本語対応強化して欲しい
  • 貂明朝美しい

残念に思った点(個人的に)

  • たまに隣の会場の声が混じって聞き取れなかったのがあったので残念だった
  • たくさんの人が集まるのは嬉しいことだけど、もっと調整できなかったのかなとは思う
  • それに関連して受付がスムーズでなかったのはちょっと疑問バーコードで管理するもの結構謎で2度手間なのでは。
  • keynote、レシーバーいるのわからなかったので一部セッション聞けなかった。必須であればもっとわかりやすく。

あと、願わくはこれもお願いしたい。アプリ設計する上では結構重要なので。

身の周りからUIを考えた話

f:id:nnnde:20170430152005p:plain

2か月ぐらい前に、Twitterのフォロワーさんが、初心者TL会をやるんだけど。 的なつぶやきを拝見した際に、人前でTLなんてしたことないし(社内向けならありますが) そういうのも試してみるのもいいかと思い、登壇者側として参加しました。

3月中旬頃に開催されました。1か月以上前ですね、はい。今更感。

そこで都合により詳細のURLなどは出せませんが、私が話した内容をまとめてみました。

続きを読む

リクルート流 - 新たな価値のつくり方 UX & Service Sketch #23 に行ってきた

こんにちは、新年初投稿。 気づけば2月。気まぐれでたまにしか書けなかったので なるべく今年は頑張りたいと思いつつもうすでに2月。

今更感満載ですが、こないだこちらの勉強にお邪魔しました。 お写真など後悔NGな部分もあるみたいなので話していた事を簡単にまとめてみます

mtl.connpass.com

続きを読む

AdobeXDに恋して

f:id:nnnde:20161222195132p:plain

prottもいいけどXDに惚れたよ

こないだwindows版出たみたいですね。
今までワイヤー制作と言えばsketch3とかprottあたりを使ってましたが、XDが出てきて、いいなと思ってからは基本ワイヤーはXDのみで作ってます。
なぜそうなったのか、というお話。ひたすら褒めちぎる内容です。

使えば使うほど好きになる それがAdobeXD

AdobeXDここに惚れたよ

  • 立ち上げサクサク
  • シンプルな画面(不要な要素がない)
  • リピートグリット
  • プロットタイプも可能で共有しやすい
  • デザイナーに嬉しい機能も付いている

以上の点を軽く説明します。
ある意味メインでもあります。

続きを読む

UX JAM13のまとめ

f:id:nnnde:20160313223031p:plain

久々にレポ書きます。こないだUX JAM13 行って来れたのでまとめます。 実は前かUX JAM前々回にも行けたのですが、 そちらもまだまとめかけてないですが、とりあえず最新のまとめです。 最近のUX JAMご飯が美味しいですw

uxmilk.connpass.com

続きを読む

PostCSS mixins 基礎とか

f:id:nnnde:20161118183121p:plain

こんばんわ、久々すぎてちょっと笑ってます。

最近、PostCSSを使うようになったのですが、コードを書く際に、mixinでつまづきました。 PostCSS mixinsのあまり頭の回転がよくない私がgitのhowto読んでもわからなかったので、 色々試行錯誤しながらという感じですが、自分のmemoも含めてちょっと書いてきます。

PostCSS github.com

実装方法などはこちらを参考にしてください qiita.com

続きを読む

ディズニーランドのランチショーからの私なりのUX/UI論とかを考えてみた

f:id:nnnde:20160924230938p:plain

 

きっかけは、社内でLTをするということをしているのですが、

何を話しようと思った時にUXをネタに少し話をしたので、それについて話を紹介します。

あくまで自論ですので、それは違うのではというご意見お待ちしてます。

 

行ってきたのはこちらのランチショーです。

www.tokyodisneyresort.jp

 

内容としては、このランチショーはディズニーランド内にある、ランチとキャラクターショーが楽しめるものです。要予約制。予約は難しく1ヶ月前に予約可能ですが、予約取るもの難しく、すぐ埋まります。

実は今年で2回目のランチショーに行ってきました。

基本的にあまりキャラクターショーとか興味なかったのですが、なぜ2回目を決めたのかをUX/UIの話に結びつけたら面白いと思いました。

 

続きを読む