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

Post on 12-Jan-2017

289 views 1 download

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

落合 恭子

ねぇねぇ、君は何使う?

WWeebb DDeessiiggnn

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

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

ttooooll

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

今宵のお話。h

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

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

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

アジェンダ2

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

まとめ!

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

やっほー!

落合恭子です!

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

落合 恭子

FFBB :: KKyyookkoo OOcchhiiaaii

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

   広報・企画などなど

出身 :: 兵庫県明石市

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

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

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

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

アジェンダ1

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

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

IIlllluussttrraattoorr

PPhhoottoosshhooppFFiirreewwoorrkkss

SSkkeettcchh

XXDD・・・などなどなど

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

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

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

のデザインを作成する

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

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

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

課題の例

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

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

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

のデザインを作成する

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

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

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

課題の例

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

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

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

IIlllluussttrraattoorr

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

このふたつだよね!

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

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??

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

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

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

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

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

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

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

ます。

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

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

時代の傾向に伴って

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

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

数が増えていく。� �

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

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

思うにh

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

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

うや」� �

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

思うにh

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

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

うや」� �

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

どんな風に� �

使い分けるか� �

見てみよう!

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

アジェンダ2

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

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

IIlllluussttrraattoorr

PPhhoottoosshhooppFFiirreewwoorrkkss

SSkkeettcchh

XXDD

MMuussee

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

参考デザインデータh

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

参考デザインデータh

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

参考デザインデータh

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

参考デザインデータh

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

参考デザインデータh

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

参考デザインデータh

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

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

今宵のまとめ!

まとめ①h

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

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

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

そのへん、

紙用のデザインも作るん

か?とか

まとめ②h

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

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

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

まとめ③h

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

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

ら、� �

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

思っとったら、 FFiirreewwoorrkkss・・・

ふふふh

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

興味が出てきたら、� �

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

22001166 SSttuuddiioo AArrccaannaa ccoo..,,LLttdd..

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

最後まで聞い

ていただいて、