狠狠撸

狠狠撸Share a Scribd company logo

WCK Meeting Vol.27「Webデザイナーの役目」

?
?
玄 中野
玄 中野

WCK Meeting Vol.27「Webデザイナーの役目」のスライドです。

1 of 53
「 We b デ ザ イ ナ ー の 役 目 」 WCK Meeting Vol.27 HOOP Design 2015.2.27
?We b デ ザ イ ナ ー の 仕 事 は ？ と 聞 い て ? 「 ? を す る 人 」 と 答 え ら れ る 人 が ? ど れ く ら い い る で し ょ う か 。 W E B D E S I G N E R
コ ー ド が 書 け な い と デ ザ イ ナ ー と は 呼 べ な い K G I を 意 識 し な い デ ザ イ ナ ー な ん て あ り え な い P h o t o s h o p し か 使 え な い け ど ？ フ リ ー ラ ン ス な の で 、 な ん で も や り ま す 。て か 、 も う W e b と か じ ゃ な く な い ？ な ど … 、 様 々 な 解 釈 を さ れ る 職 業 だ と 思 い ま す 。
さ ら に 近 年 、 多 様 な デ ィ バ イ ス の 普 及 に よ り ア ウ ト プ ッ ト す る も の が 定 ま ら ず 、 何 を デ ザ イ ン す れ ば 良 い の か 分 か ら な く な り が ち だ っ た り 、 ? D E V I C E
CSS フ レ ー ム ワ ー ク 、 テ ン プ レ ー ト 、 フ リ ー 素 材 利 用 の 高 ま り に よ り 、 時 に は “ デ ザ イ ナ ー 不 要 論 ” が さ さ や か れ た り し ま す 。 T E M P L A T E
こ の ま ま で 良 い の か ？ デ ザ イ ナ ー 不 要 だ そ う で す よ ！
い ず れ な く な る と か 、 ? 不 要 だ と も 思 い ま せ ん 。
デ ザ イ ナ ー が 自 ら の 役 割 = 存 在 意 義 を 認 識 す る 必 要 が あ り ま す 。
ま ず … We b デ ザ イ ン と は 何 か ？
誰 が 誰 に 何 を ど う や っ て 伝 え る か 。
誰 が 誰 に 何 を ど う や っ て 伝 え る か 。 こ れ の ど こ を 指 し て デ ザ イ ン と い う の で し ょ う 。
誰 が 誰 に 何 を ど う や っ て 伝 え る か 。 こ れ の ど こ を 指 し て デ ザ イ ン と い う の で し ょ う 。 ×
誰 が 誰 に 何 を ど う や っ て 伝 え る か 。 こ れ の ど こ を 指 し て デ ザ イ ン と い う の で し ょ う 。 ×
誰 が 誰 に 何 を ど う や っ て 伝 え る か 。 こ れ の ど こ を 指 し て デ ザ イ ン と い う の で し ょ う 。 ×
誰 が 誰 に 何 を ど う や っ て 伝 え る か 。 こ れ の ど こ を 指 し て デ ザ イ ン と い う の で し ょ う 。 ×
「誰に何をどうやって伝えるか」 を 設 計 す る 仕 事 We b デ ザ イ ナ ー と は （ イ ン タ ー ネ ッ ト を 使 っ て ）
誰に どうやって User Designing?Construct 要件定義（ヒアリング）? ユーザー分析 ターゲットの選定 導線?インタラクション?トーン＆マナー?コミュ ニケーション?ビジュアルコンセプト?ユーザビリ ティ?アクセシビリティ?レイアウト などの設計 UX 何を Contents 要件定義（ヒアリング） 市場調査 ニーズ分析
こ の 3 ポ イ ン ト に 分 け て 、 We b デ ザ イ ナ ー の 仕 事 の 具 体 例 を 紹 介 し ま す 。
誰に User ターゲット（コア）ユーザーの選定
[　　　　 ] 誰に伝えたい情報かを クライアントとともに考える。 ヒアリング クライアントの要望だけではなく、 解析データなどを元に検証する。 【参照】http://www.google.com/analytics/
Contents 何を どういうコンテンツにするか。
クライアントから問題点や目的を 引き出し、明確にする。 ヒアリング ヒアリングシートを用意した方が良い。 が、それに頼りすぎないようにする。 【参照】http://matome.naver.jp/odai/2136206583957406101 [　　　　 ]
[　　　　 ] 大したことをしなくても、 同業他社、競合サイトはチェックする。 市場調査?ニーズ分析 ニーズ分析にはGoogleトレンドを使う。 ????http://www.stat.go.jp/data/index.htm? ????http://kawarekata.com ????http://www.google.co.jp/trends/ 【参照】
[　　　　 ] とにかくたくさん案を出す。 が、最終的には“的を得たもの”だけに。 コンセプト?アイデア出し ペルソナを使って具体化する。? データに頼りすぎないように。 ????http://fladdict.net/blog/2015/02/google-design-workshop.html【参照】 ????http://yutmpo.com/blog/archives/619 ????http://www.gv.com/sprint/
情報の性質に合っ たコンテンツ形式 を選ぶ。 コンテンツタイプの検討 ????http://www.roundup-strategy.jp/content-101/startup/variation16【参照】
どう やって Designing ユーザーに情報を効果的に的確に伝える 最善の方法は何か
[　　　　 ] 「?らしさ」の演出、 色?形?言葉?イメージ?動きなど トーン&マナー設計 どの程度の演出をするのか慎重に考える 説明的過ぎず、外し過ぎず！ ????http://www.concentinc.jp/labs/2014/04/tone-and-manner/【参照】 ????http://bm.s5-style.com/
[　　　　 ] ワイヤーフレームを作成し、 ユーザーの流れを確認します。 レイアウト?導線設計（UI） ペルソナを使って具体化する。? しっかり、ゴール設定をする。 ????https://www.sociomedia.co.jp/category/uidesignpatterns【参照】 ????http://www.flickr.com/groups/ilovewireframes/pool/ ????http://liginc.co.jp/web/useful/128790
[　　　　 ] 動作確認やコンテンツボリュームを はかるために、試作をつくる。 プロトタイプ作成 CMSテンプレートやCSSフレームワー クを利用して工数を減らす。 ????http://qiita.com/komeda/items/a74bda1408141e9109c9【参照】 ????https://prottapp.com/ ????https://plogless.com/
[　　　　 ] ワイヤーフレームを元に? ビジアライズを行い具現化する。 デザインカンプ作成 ワイヤーフレームからの改善点 を必ず取り入れるようにする。 ????http://www.concentinc.jp/downloads/PPP2_JP.pdf【参照】 ????http://tsutawarudesign.web.fc2.com/index.html ????http://www.concentinc.jp/labs/2012/11/ia100tube/
[　　　　　 ] トンマナ?デザインカンプ作成時に 設計できていない細かなデザイン マイクロデザイン 特にスマートフォンサイト、アプリ設計に マイクロインタラクションが用いられる。 ????http://webnaut.jp/design/1134.html【参照】 ????http://kudakurage.hatenadiary.com/entry/2014/04/20/153711 ????http://useyourinterface.com/
[　　　　 ] デザインクオリティーを保つ、 文書構造的に正しい記述をする コーディング（マークアップ） 見えないところもキッチリと設計する。 ????http://www.html5.jp/【参照】 ????http://qiita.com/ ????http://semooh.jp/jquery/
[　　　　 ] もろに完成度に差がでるので、 最後まできっちりチェックする。 デザイン?動作確認 スケジュールの中にしっかり入れておく。 ????http://fladdict.net/blog/2015/02/google-design-workshop.html【参照】
以降、改善点があればこれまでの作業を もう一度行います。 公開→運用フェーズへ
ざ っ と 、 こ ん な 感 じ で す 。
製 作 工 程 の ほ ぼ 全 部 や ん ？ ? そ う で す 。 デ ザ イ ン は そ れ だ け 広 い 意 味 の 言 葉 な の で す 。 ? ?
こ れ ら す べ て を デ ザ イ ナ ー 1 人 で や る の は 大 変 で す 。 と い う か 、 自 分 は 無 理 で す 。 だ け ど 、 こ れ ら の 工 程 を 認 識 し て い る か い な い か の 差 は 大 き い の で す 。 「 何 を デ ザ イ ン （ 設 計 ） し て い る の か 」 を 理 解 し て い る の で す か ら 。
で 、 デ ザ イ ナ ー 不 要 論 … ? 実 際 ど ん な こ と が さ さ や か れ て た の か ？
フリーランスWebデザイナーという職業も 無くなる4つの理由 http://blog.btrax.com/jp/2015/02/22/freelance-web-designers/ ウェブサービス開発の現場における デザイナー不要論と5?10年後の生存戦略 http://ja.ishibashihideto.net/blog/2014/08/25/web-designer-survival.html 「Photoshopしか使えない」 Webデザイナーが「絶滅」する時代がやってきた http://yumeirodesign.jp/blog/201501/webdesigner-2015.html
論点 1. 多くの企業はWebに関する機能を社内に持つ 2. 外注コストの低下 オンラインマーケティング等に関する重要性を大きく捉えているアメリカの市場 においては、大企業を中心にWebに関連する部署、もしくはスタッフを社内に抱 えているケースが一般的である。大手企業はWeb制作関連の仕事を外注する事は 稀である。 ビジネス上の取引において一度も会わずに仕事を進める事も少なくは無い。クラ ウドソーシングサービスを利用してWebサイトの作成、SEO, SEM等のある程度 パターン化した業務を海外に発注する事が一般的となっている。 フリーランスWebデザイナーという職業も無くなる4つの理由
3. 引き抜き 4. スタートアップによるデザインスタジオの買収 デザイン会社や開発会社で働くそのような”すごい”技術者を平気で倍以上の給料 で引き抜く事が珍しく無く、デザイン会社の存続が危うくなりやすい。 恐らく彼らは高い技術力を持ったデザイナーの必要性を感じ、人材獲得の為に、 デザイン会社ごと買収していると思われる。 5. SaaSプラットフォームの充実化 最近は専門知識が無くてもそれなりに簡単にWebサイトの作成と運用が可能な SaaSプラットフォームの充実が進んでいる。そしてその多くが、初期費用が無料 かもしくは非常に安く、サイトの立ち上げも短時間で可能になっている。
6. コーディングの自動化 7. Webサイトの重要性の低下 デザイン会社や開発会社で働くそのような”すごい”技術者を平気で倍以上の給料 で引き抜く事が珍しく無く、デザイン会社の存続が危うくなりやすい。 恐らく彼らは高い技術力を持ったデザイナーの必要性を感じ、人材獲得の為に、 デザイン会社ごと買収していると思われる。 8. SaaSプラットフォームの充実化 最近は専門知識が無くてもそれなりに簡単にWebサイトの作成と運用が可能な SaaSプラットフォームの充実が進んでいる。そしてその多くが、初期費用が無料 かもしくは非常に安く、サイトの立ち上げも短時間で可能になっている。
主張 もしかしたら、近いうちに”Webデザイナー”という職業自体が消滅 すれば、一つの役職が20年足らずで無くなる事になる。 フリーランスWebデザイナーという職業も無くなる4つの理由 時代の変革期とも言える最近は、これまでとは比べ物にならない程速いスピードで物 事が変化し、それに伴ってプロダクト、ビジネス、企業、そして職業にも大きな変革 が必要とされている。数年前までは高い需要を誇っていた仕事が急激にコモディティ 化する事も珍しくは無い。 デザイナーとして必要とされる能力としては、デザインの基本技術に加え、 常に最先端の需要に対して最適な問題解決の提供であり、そこに必要とされ る技術や考え方に対して臨機応変に対応していく必要があるだろう。 今後はクリエイティブな考え方と、マーケティング的視点はどのような役職 でも絶対に重要になる。それを踏まえ、優れたユーザーエクスペリエンスや ブランドコミニュケーションを設計するのが、次世代のデザイナー、そして ビジネスに関わる全ての人々に求められる能力になるだろう。
ウェブデザイナーの仕事がエンジニアによって奪われつつある 「デザイナーがエンジニアリングを勉強するよりも、エンジ ニアがデザインを勉強するほうが早いよね」 ウェブサービス開発の現場では、ウェブデザイナーの仕事がエンジニア／プログラマーによって少し ずつ奪われつつある。とくに小さな組織や新規事業の現場では。象徴的なのは「Bootstrapが あればデザイナー不要だよね」論。「もはや社員としてデザイナーを雇う必要は なくて、必要な時にランサーズで発注すればいいよね」「スタイルシートいじっ たり画像パーツ作ったりしてくれるだけでいいよね」と考える企業が増えつつある。 その理由については、身もふたもないけれど、「学力（偏差値）の差」でシンプルに説明 できてしまうだろう。平均的には、エンジニア／プログラマーのほうが、デザイナーより も学力が高い。 ウェブサービス開発の現場におけるデザイナー不要論と5?10年後の生存戦略論点
生存戦略1. ウェブサービスのアートディレクター ウェブサービス開発の現場におけるデザイナー不要論と5?10年後の生存戦略 「フルスタックウェブデザイナー」とは、IAからフロントエンド実装まで一人でこなせる人のこと。つ まり、UXリサーチやデザインワークショップのファシリテーションから、プロトタイプ制作、 jQuery、マークアップ、スタイルガイドまで、全部一人でやれるということ。HamlやSassをマスター して、GitでRuby on Railsのviewを触るのも当たり前。ミニマムなTodoリストを作れるくらいのプロ グラミングもできたほうがいい。 主張 生存戦略2. フルスタックウェブデザイナー 分かりやすく例えると、佐藤可士和的な立ち位置でプロダクトデザインにもコミットしていくイメージ。飲料 パッケージや携帯電話の事例を参照すべし。「出来上がったプロダクトのプロモーションを請け負うだけの仕 事」から「プロモートされるべきプロダクト自体もデザインする仕事」へのシフトは、マーケティング?ミッ クス論的にも正当化される。プロダクトとプロモーションがバラバラにデザインされるよりも、統合的にデザ インされているほうがいい。その二つを統合できるロール（役割）としての「アートディレクター」なのだ。
「photoshopでWebデザインができます」、 だともう付加価値がない 「普通の」Web制作会社でキャリアアップ、の時代の終焉 「Photoshopしか使えない」Webデザイナーとは、「お絵かき」「見た目」だけにこだ わるデザイナーのことです。ビジュアルデザイン以外の付加価値がないデザイナーは今後 は生き残ることは難しいです。 アプリやWebサービスが増え、UIデザイナーの需要が増えました。ただ、需要が増えたのです が、デザイナー側の意識や対応が追いついていないのが実情でしょう。 時代に追いついて食べていけるデザイナーになるには、「普通の」Web制作会社でキャリア アップは難しい部分があるかもしれません。これから生き残っていくには、特にフリーランス になりたいデザイナーなら、「Photoshopしか使えない」のは致命的な弱点だと思いますね。 「Photoshopしか使えない」Webデザイナーが「絶滅」する時代がやってきた論点
「Photoshopを極めてWebのグラフィックデザイナー?アートディレクター」になる? いまからHTML/CSS/JavaScriptやUX?UIデザイン、またビジネスのことを猛烈に勉 強して「UIデザイナー」的な立ち位置に移行する コーダーさんやプログラマーさんと組んでユニットとして仕事する このまま何もせず消えていく。いまのままでいいならそれでいいじゃないの、という 感じでもいいと思う 2014年は日本ではここ数年の中でも最もUIデザイナーという職種が注目というか議論が巻 き起こった年だったのではないでしょうか。 「Photoshopしか使えない」Webデザイナーは、「UIデザイナー」ではありません。 10年前はビジュアルデザイン以外の付加価値がないデザイナーでも、業界で価値がありまし た。しかし、現在ではそういうデザイナーの「商品価値」はどんどん減ってきています。 主張
この議論踏まえて、 今後、Webデザイナーは 誰に何をどうやって伝えていくべき だと思いますか？
そんなのかんけねー WCK的 デザイナー不要論への返答
な ぜ 、 デ ザ イ ン す る の か ？ と 聞 か れ る と 。 ? 「 必 要 だ か ら 」 と 答 え ま す 。
ま だ ま だ 、 We b に は 使 い づ ら い も の 、 残 念 な も の が たくさん。 何 か 役 に 立 て る の で は と 思 う 間 は こ の 仕 事 を 続 け る つ も り で す 。
We b デ ザ イ ン の チ カ ラ を 信 じ て ご清聴ありがとうございました。 そ れ で は 、 明 日 か ら も
【 参 考 】 htt p:// b l o g . bt rax.c o m /j p/ 2 0 1 3 / 04/13/six _key_elements_for_creativity/ C R E A T I V I T Y こ れ か ら は 、 よ り ク リ エ イ テ ィ ビ テ ィ が 重 要 。 Imagination / 想像力 Habitat / 習慣 Knowledge / 知識 Attitude / 姿勢 Resources / 環境 Culture / カルチャー

More Related Content

WCK Meeting Vol.27「Webデザイナーの役目」