ブログ

第95回「WEB TOUCH MEETING」にUstreamで参加しました

news_study

こんにちは、デザイナーのTantanです。
少し前になりますが、11月12日に第95回「WEB TOUCH MEETING」が開催されました。私は不参加でしたが、一部Ustreamの動画配信を見られたので、その部分だけレポートさせていただきます。

1つめの発表は聞けず

CodeCodeのフロントエンドエンジニア井上拓さんのセッションは残念ながら配信が間に合わなかったようで、聞けませんでした。「gulp.js」というツールのお話だったようです。非エンジニア的には正直よくわかっていませんが、おなじくらいわからない人のために勇気を出して説明してみます。

gulp.jsってどう便利なのか

  • gulpは開発現場の面倒な処理を自動化できる便利ツール
  • 面倒な処理とは例えばsassのコンパイルとか
  • sassっていうのはcssをまとめて書いたりできる仕組み
  • 便利に書けるけど、編集後にその都度コンパイルという作業でcssに成形しないといけない、ちょっと面倒
  • gulpはそのコンパイルを自動化できて、更にほかの処理と組み合わせることができる→便利!

デザイン作業で例えるなら

PCで編集した画像をスマホのブラウザで頻繁にチェックしなきゃいけないとしたら、
画像を編集→保存→zip圧縮→メール添付→スマホで開封→解凍→閲覧
という作業を頻繁にやるのは面倒です。
それを、PCで編集したらその都度スマホの画面が自動更新されればとても便利というわけですね。

2つめの発表は聞けました

クランチタイマーのフロントエンドエンジニア向井咲人さんの発表は、フロントエンド周りの技術が色々紹介されていました。正直これまた非エンジニアにはついていけない内容だったのですが、それでも素人なりに発見がありました。

Flexboxいいじゃん!

以前cssを初心者レベルで書いてみたことはあるのですが、「中央揃えしたいだけなのに、なんでこんなにややこしいのか!」と内心憤慨しておりました。それに比べて、Flexboxの説明を聞くとなんだか素直に思えました。「そうそう、揃えるってこういうことだよね」と。

その他にも、ネーミングの統一とか色々な話が盛り沢山だったのですが、ちょっと知識が追いつかず。
弊社フロントエンドのゆきパンダいわく、「フロントエンド的にはすごく面白い内容だった」とのことです。

3つめはデザインソフトの話

村上圭さんのセッションは、AdobeのPhotoshop、Illustrator、Fireworksの話だったので、ちゃんとついて行きました!
それぞれのメリットデメリットと、デメリットを克服する工夫についてでした。

Photoshopは直感的じゃない

薄々感じていたことですが、やっぱり直感的じゃないんですよね。よかった、私だけじゃなくて。
文字や図形をちょっと移動や変形する、位置を揃える、というときになんかワンクッション噛ませる感覚。レイアウトを試行錯誤したいときにもたつく感じが苦手です。私の場合Illustratorに慣れすぎてるせいでもあるんでしょうが。
村上さんからは以下のテクニックが紹介されました。

  1. バウンディングボックスを表示する
  2. 移動するだけのときも自由変形するくせをつける
  3. ⌘クリックで選択できる
  4. レイヤーの境界線を表示する

1は私もやっています。3はむしろクリックで自動選択にしています。2はこれからぜひやっていこうと思いました。

Illustratorはピクセルがずれる

やっぱりイラレの弱みはピクセル端数。
CC2017では「ピクセルの最適化」でそのへん強化されたようです。そう聞いて早速アップデートしたので、これから検証していこうと思います。
あと、アセット書き出しのマスク余白問題。Photoshopのドロップレットで対応する工夫は私もやってみようと思いました。jpgだと白に少し色がついたりして失敗すると思っていましたが、イラレからpngで書き出してPhotoshopでjpgを吐き出せばいいはず。これも検証してみようと思います。

Fireworksは開発が終了している

開発終了。これに尽きますね。
思うにフォトショもイラレもWebデザイン専用のツールじゃないので、どちらもオーバースペックかつ痒いところに手が届かない感があります。そのため、Fireworksの立ち位置は重要だと思うのですが、なぜ開発終了なんでしょうか。はやくこの空白を埋めて最強のWebデザイン専用ツールがでてくるのを期待しています。後継はXdなのかどうなのか。そもそもいつまで「カンプ」というものを作るのか。無くなりそうで意外となくならない「デザインカンプ」という存在。悩ましい問題です。

質疑応答

質疑応答で「Illustratorで渡してくるデザイナーに、どうやってPhotoshopの良さを説得しますか」というような質問がありました。Illustratorで作ってしまう私のようなデザイナーには耳に痛い質問でした。冷や汗ものです。
「イラレで作られると画像書き出し&端数処理が大変」というエンジニアさんの気持ちはとってもわかります。
「説得はしないで自分側で画像書き出しを工夫したりして対応しています。」というようなご回答だったのでちょっとホッとしました。

新しい技術を導入する勇気

自分の作業環境を便利にする技術は、導入ハードルが少しあっても見合う便利さがあるなら取り入れていかねば、ということを今回強く感じました。
メリットのほうが大きいことでも、既存の技術をダラダラ使い続けてしまうことは自分も覚えがあります。「最強のwebデザイン専用ツールAdobeから早くでないんかなー」と受身の姿勢でいないで、既存のPhotoshop、Illustratorを便利に使うスクリプトなんかを導入していかねばですね。
ちょっと面倒でも身につけた技術は自分の資産になるはずなので、恐れず怠けずチャレンジしていきたいと思いました。

登壇者のみなさま、運営のみなさま、今回も貴重な学びの機会をありがとうございました!

■この記事を書いた人 Tantan(デザイナー)

18歳まで広島育ち。大阪・東京でデザインの経験を積み、先日広島にUターンしてきました。糖質制限を実践中で冷凍庫には牛肉を常備。最近気になるキーワードは「ミニマリスト」。でも家の中を散らかしまくる2児の子育てに疲労困憊。

関連記事

  1. blog_panda_penguin ユーモアのあるサムネイル画像をデザインするための発想法
  2. blog_image_concrete5 CMS concrete5について特徴や強みをご紹介
  3. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など 【初心者OK】IllustratorCCで漫画風吹き出しの作り方…
  4. perspective_tips_10 イラレの遠近グリッドで3D風のイラストを描く方法「車編」
  5. How-to-make-text-decoration-8 フチ付き文字8段階!チラシやLP制作に使えるイラレ文字装飾テク
  6. 40f8970f6d4d71678b9f13c00265354d_s Atomで書いたコードに見えないTofu(豆腐)が紛れ込んだ時の…
  7. Materialicon-00 デザイナーのためのGoogle Material iconsの使…
  8. photo-size_15 レスポンシブのフルスクリーン画像はどんな比率の写真が最適?

最近の記事

  1. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  2. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  3. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  4. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  5. lig_10
PAGE TOP