36
6+B ꝏ Ꜳꜳꜳ ꝏ 落合 恭子 ねぇねぇ、君は何使う? Ý 株式会社スタジオ・アルカナ の話。 第+回 アルカナ社内勉強会 6+BBc にて。 ꝏꝏ

ねぇねぇ、君は何使う?Web Design tool の話。

Embed Size (px)

Citation preview

Page 1: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

落合 恭子

ねぇねぇ、君は何使う?

WWeebb DDeessiiggnn

株式会社スタジオ・アルカナ

の話。第1100回 アルカナ社内勉強会 22001166//66//99 TThhuu にて。

ttooooll

Page 2: ねぇねぇ、君は何使う?Web Design tool の話。

今宵、この場でお話すること。P

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

Page 3: ねぇねぇ、君は何使う?Web Design tool の話。

今宵のお話。h

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

デザインツールの� � 種類と変遷

アジェンダ1デザインツールの� � 特徴を知ろう

アジェンダ2

というわけで� � 何使う?

まとめ!

Page 4: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

やっほー!

落合恭子です!

スピーカーの紹介をします。

Page 5: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

落合 恭子

FFBB :: KKyyookkoo OOcchhiiaaii

仕事 :: 総務・経理・デザイン・

   広報・企画などなど

出身 :: 兵庫県明石市

趣味 :: vvaappee(ベイプ)・ギター・    アニメ・ミューゼスなどなど

どうぞよろしくお願いします。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

キャッチコピー ::シアワセクリエイト

Page 6: ねぇねぇ、君は何使う?Web Design tool の話。

デザインツールの種類と変遷P

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

アジェンダ1

Page 7: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

どんなツールがあ�るかな?h

IIlllluussttrraattoorr

PPhhoottoosshhooppFFiirreewwoorrkkss

SSkkeettcchh

XXDD・・・などなどなど

Page 8: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

デザイナーがツールを用いてやるべきことh

クライアントさんの課題を解決する為

のデザインを作成する

・イメージチェンジをしたい?� �

・売上をあ�げたい?� �

・導線をちゃんとしたい?

課題の例

Page 9: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

デザイナーがツールを用いてやるべきことh

クライアントさんの課題を解決する為

のデザインを作成する

・イメージチェンジをしたい?� �

・売上をあ�げたい?� �

・導線をちゃんとしたい?

課題の例

ぶっちゃけこれができてれば� �

何を使ってもいい。(持論)

Page 10: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

いまシェアが多いのは・・・h

IIlllluussttrraattoorr

PPhhoottoosshhooppなんだかんだ言って、� �

このふたつだよね!

なんでこのふたつが� � よく使われてるんだろう?

Page 11: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

わたしの中のツールの歴史h

PPhhoottoosshhoopp � � IIlllluussttrraattoorr時代

PPhhoottoosshhoopp vvss FFiirreewwoorrkkss時代PPhhoottoosshhoopp??

電気屋時代

同僚からPPhhoottoosshhoopp55..55と� � IIlllluussttrraattoorr88..00を譲り受ける。

デジハリに通うPPhhoottoosshhoopp66..00 IIlllluussttrraattoorr99..00FFllaasshh DDrreeaammwweeaavveerrFFiirreewwoorrkkss を習得。� � 先生も同僚も、紙のデザインの� � 人が多数。

わたし東京進出

クリオでスカウトしてくれた会社に� � 入社。先輩はIIlllluussttrraattoorrで� � デザインする人。もともと紙。� � 社長に勧められてFFiirreewwoorrkkssを本格的に使い始める。

派遣で某不動産系会社へデザインはほとんどPPhhoottoosshhooppで。� � コーディングはDDrreeaammwweeaavveerrで。� � 個人で作るデザインはFFiirreewwoorrkkssで作ってた。

アルカナ入社へツールの制約がなかった上に、� � 同僚もFFiirreewwoorrkkss派だったので、� � デザインはほぼFFiirreewwoorrkkssで。� � メンバ〜チェンジにより、徐々に� � PPhhoottoosshhoopp派が増える。

これからは?AAddoobbee CCCC 22001166から、FFiirreewwoorrkkssがDDLLできなくなる。� � さて、これからはどのツールを� � メインにしていこうか?

22000011年ごろ 22000033年ごろ 22001133年ごろ 現在

PPhhoottoosshhooppとIIlllluussttrraattoorrでデザインしてる。

WWeebbは、紙のついでで� � 発注されることが多かった。� � 紙のデザイナーさんが、� � クライアントさんに頼まれて� � WWeebbを作るイメージ。

FFiirreewwoorrkkssのスライス機能や、hhttmmllの書き出し機能を求めて、PPhhoottoosshhooppからFFiirreewwoorrkkssに変える人をかなり見かけた。� � 少しずつ、WWeebbと紙が切り離されていく。

ツール同士のVVSSをちょいちょい見かけるようになる。いろんなツールで同じようなことができるようになってきた雰囲気。

PPhhoottoosshhoopp vvss FFiirreewwoorrkkss がいちばん激しかったんじゃないかな?

FFiirreewwoorrkkssの開発が終了。� � 路頭に迷うFFiirreewwoorrkkss信者が続出。� � PPhhoottoosshhooppはさらに便利に改良される。

時代の雰囲気

わたしの行動

MMuussee出現

SSkkeettcchh台頭

SSkkeettcchh??

Page 12: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

どうしてPPhhoottoosshhooppとIIlllluussttrraattoorrが強いのか?h

もちろん、これだけが理由ではないけれど

紙のデザイナーさんが、WWeebbデザ

イナーに移行するパターンが多かっ

たというのが、最初のシェアの広がり

の原因なのではないかな?と思ってい

ます。

Page 13: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

どうしてPPhhoottoosshhooppとIIlllluussttrraattoorrが強いのか?h

時代の傾向に伴って

WWeebbに特化した機能の追加によ

り、どんどん使いやすくなり、ユーザー

数が増えていく。� �

この2つがあ�れば、大体なんでも

できるようになっている。

Page 14: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

思うにh

「この先、ツールはAAddoobbee製品�の中

でいい感じで使い分けしていきましょ

うや」� �

という流れを感じています。

Page 15: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

思うにh

「この先、ツールはAAddoobbee製品�の中

でいい感じで使い分けしていきましょ

うや」� �

という流れを感じています。

どんな風に� �

使い分けるか� �

見てみよう!

Page 16: ねぇねぇ、君は何使う?Web Design tool の話。

デザインツールの特徴を知ろうP

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

アジェンダ2

Page 17: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

これらのツールについてお話しします。h

IIlllluussttrraattoorr

PPhhoottoosshhooppFFiirreewwoorrkkss

SSkkeettcchh

XXDD

MMuussee

Page 18: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

Page 19: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

参考デザインデータh

過去のデザインデータを参照してデモします。

Page 20: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

Page 21: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

参考デザインデータh

過去のデザインデータを参照してデモします。

Page 22: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

Page 23: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

参考デザインデータh

過去のデザインデータを参照してデモします。

Page 24: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

Page 25: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

参考デザインデータh

過去のデザインデータを参照してデモします。

Page 26: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

Page 27: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

Page 28: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

参考デザインデータh

過去のデザインデータを参照してデモします。

Page 29: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

Page 30: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

参考デザインデータh

過去のデザインデータを参照してデモします。

Page 31: ねぇねぇ、君は何使う?Web Design tool の話。

というわけで、何使う?P

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

今宵のまとめ!

Page 32: ねぇねぇ、君は何使う?Web Design tool の話。

まとめ①h

① デザインツールは、案件や環境に応じて、使い分ける必要があ�るが、要件が満たされていれば、基本的にはなんでもよい。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

コーダーさんが� � ツールもってるか?とか

あ�んじょう考えたって。納品�ファイルの形式はなに?とか

そのへん、

紙用のデザインも作るん

か?とか

Page 33: ねぇねぇ、君は何使う?Web Design tool の話。

まとめ②h

② 今のところは、なんとなく、AAddoobbee製品�だけで使い分けが完結しそうな雰囲気になっている。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

まぁ、いろいろあ�るわな。

囲い込みっちゅうやっちゃな。

Page 34: ねぇねぇ、君は何使う?Web Design tool の話。

まとめ③h

③ 時代の傾向によってベストなツールは変わるので、常にウォッチしておくことが大事。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

突然、足元すくわれんねんで。おれ、このツール得意やか

ら、� �

ぜんぜん大丈夫〜って� �

思っとったら、 FFiirreewwoorrkkss・・・

Page 35: ねぇねぇ、君は何使う?Web Design tool の話。

ふふふh

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

興味が出てきたら、� �

無料体験版を使ってみてね!

Page 36: ねぇねぇ、君は何使う?Web Design tool の話。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

あ�りがとうございました

最後まで聞い

ていただいて、