Comments
Description
Transcript
ウェブ業界の実際 - 夏本健司OfficialWebサイト
ウェブ業界の実際 あなたに知って欲しい８つのポイント ウェブクリエイター 夏本健司 Webが実際にどのように作られ、 またこれからどうなっていくのか、 どうすれば⾼収⼊が得られるか を、お話します。 今⽇のトピック これから変わるウェブクリエイターの働き⽅ 2014年ウェブデザインのトレンド プロとして必要なクリエイターマインド おさえておくべき仕事の進め⽅・お⾦の流れ トラブルやミスを起こさないためのマメ知識 給与アップの先特情報 これから変わる ウェブクリエイターの働き⽅ 質問 「『ウェブデザイン』とは何か を説明してください」 とクライントに⾔われたら、 あなたなら、何と答えますか？ 「ウェブデザインとは何か？」 「ウェブデザイン」 ＝「グラフィックデザイン」ではない。 「ウェブデザイン」 ＝「PS」で作業することではない。 「ウェブデザインとは何か？」 「ウェブデザイン」 ＝ユーザーに「よりよい体験」を提供 する仕事。 「ウェブデザイン」 ＝より現実的な「ショールーム」を作 ること。 「ウェブデザインとは何か？」 誤解されがちな「ウェブデザイン」 定義しにくい「ウェブデザイン」 コンテンツ ユーザーインターフェイス グラフィックデザイン （UI） エディトリアルデザイン 「ウェブデザインとは何か？」 ユーザーインターフェイス(User Interface) 機械、特にコンピューターとその機械の利⽤者（通 常は⼈間）の間での情報をやりとりするための接 点・境界⾯のこと。 「インタラクション」「ビジュアル」「アーキテク チャ」⾊々な語り⼝があり、捕らえ⽅や定義は様々。 システム業界では、よく「画⾯表⽰」という⾔い⽅ をするが、その⼤半はユーザーインターフェイスの 挙動のことを指している場合が多い。 （前半出所：wikipedia) 「ウェブデザインとは何か？」 ユーザーエクスペリエンス（User EXperience） デジタル機器/システムに対するユーザーの⾒⽅に影 響を与えるようなアーキテクチャやインタラクショ ンモデルの⽣成に関する⼿法。「製品とユーザーの インタラクションのあらゆる⾯、すなわちどのよう に気づかれ、学ばれ、使われるのか」をその適⽤範 囲とする。 製品やサービスの利⽤を通じて得られるユーザーの 体験の総称。使いやすさ・使い勝⼿などユーザビリ ティ要素を備え、さらに感動・好印象・⽣活の変化 など経験として累積させる技法・⼿段。 ⽇本語の”おもてし”に近いとよく⾔われる。 （前半出所：wikipedia） 「ウェブデザインとは何か？」 ユーザーエクスペリエンス・デザイン （User Experience Design） UXを設計すること。ユーザがよりよい体験のできる UIを提供すること（クライントではなく）。 ユーザが求めていることに先回りして、結果として 喜んだり、感動したり、驚いてもらえる体験や価値 を作り出すためのデザイン⼿法。 UXは、１つのドラマや映画を作るようなもの。 UIはその中の⼀場⾯。 UXDは、これらを作る上での考え⽅。まとめ。 ここだけしか⾒ていませんか？ グラフィック デザイン 画⾯に⾒えている部分 ▲ ▲ 画⾯に⾒えていない部分 UI UX UXD カスタマージャーニーマップ ユーザーシナリオ プロトタイピング ペルソナ コンテンツデザイン SEO インタラクションデザイン A/Bテスト インターフェイスデザイン EFO アーキテクチャー LPO ここだけしか⾒ていませんか？ 画⾯に⾒えている部分 ▲ グラフィック デザイン ▲ 画⾯に⾒えていない部分 ⼀般的に認識されている 「ウェブデザイン」は “氷⼭の⼀⾓”に過ぎない。 ウェブデザインの歴史 1995年 ウェブデザイン黎明期 2005年 情報設計・ ユーザビリティ醸成期 2015年 ユーザー志向・ 多デバイス対応初期 DTPや映像業界など他 業界から参⼊してきた ため、グラフィックデ ザイン志向が強かった。 ビジネスツールとして 認知され、情報⼯学や 認知⼼理学の必要性が 叫ばれた時代。 ⾼度に機能するプロダ クトを短期間で作り上 げ、メンテナンスし続 ける知識と経験が必要 な時代。 業界として未成熟だっ たので、“アート”、“実 験芸術”として捉えられ る向きがあった。 黎明期に活躍した⼈の 影響を受けた⼈が活躍 した時代。「ウェブデ ザイン」＝「グラ フィックデザイン」は、 ここから⽣まれた。 もはや静的な「グラ フィックデザイン」の 範疇を軽く超え、いわ ば動的な「⽣命体」を 作る意識が必要。 2014年 ウェブデザインのトレンド 2014年ウェブデザインの トレンド フラットデザイン パララックスサイト シングルページ完結型ウェブサイト 無限スクロール読み込み Retinaディスプレイへの対応 ゴーストボタン ドロアーメニュー（ホットドッグアイコン・三本線） 2014年ウェブデザインの トレンド 微妙なグラデーション トーンジャンプ シネマグラフ ジオメトリー 特⼤サイズテキスト ロングシャドウタイポグラフィ フルスクリーン写真・動画背景 Material Design フラットデザイン フラットデザイン パララックスサイト シングルページ完結型サイト 無限スクロール読み込み Retinaディスプレイへの対応 AppleのRetinaディスプレイ（⾼解像度スクリー ン）に対応していない画像は、ぼやけて表⽰され てしまいます。2倍・３倍のサイズの画像で作成 し、HTML・CSSで等倍指定をするか、アイコン フォントやSVGファイルで代替する必要がある。 ゴーストボタン ゴーストボタン ゴーストボタン ドロアーメニュー （ホットドッグアイコン・三本線） 2014年ウェブデザインの トレンド 微妙なグラデーション トーンジャンプ シネマグラフ ジオメトリー 特⼤サイズテキスト ロングシャドウタイポグラフィ フルスクリーン写真・動画背景 Material Design 2014年ウェブデザインの トレンド これらが、単なる⾒せ掛けではなく、 深い設計思想と技術の発達によって 再現させていることを忘れないこと。 ここで、⾃⼰紹介 Webクリエイター 夏本健司 東京藝術大学美術学部卒。 1995年にウェブデザイナーと しての職歴をスタートさせ、 以降、ディレクター、プロ デューサー、マーケッター、 ライター、データサイエン ティスト、Webマスターなど さまざまな職種で業界に携 わっている。 ウェブサイト：na2ken.com プロとして必要な クリエイターマインド 質問 あなたは、ある有名なメーカーの ウェブサイトのデザインを任されました。 うれしくて、 「持てる技術とセンスのすべてを 使ってデザインしよう！」 と決めました。 質問 さて、これは正しい選択でしょうか？ 答え プロとして必要な クリエイターマインドとは？ どうしたら”成果”が出せるか考え抜き、 協調作業によってそれを実現することに 集中すること。 間違ったクリエイターマインド よく、この２つを混同する⼈がいる。 ＝プロとして失格。 ファインアート コマーシャルアート 芸術的価値を専らにする 制作活動。⾃らの創造性 を発揮し、追求し、⾃由 に創造活動をしてよい。 商品の販売、宣伝を⽬的 とし、⽬標を達成するた めに制作をするもの。⾃ 分の好きなように作って はいけない。 ＝純粋美術 ＝商業美術 結果を求められない。結果を求められる。 プロとして必要な クリエイターマインドとは？ “売れる”デザインがよいデザイン。 綺麗でも、“売れない”デザインは ダメなデザイン。 これを肝に命ずること。 おさえておくべき仕事の進め⽅・ お⾦の流れ ワークフロー＃１ 要件 定義 100% 設計 制作・ 開発 テスト 100% 100% 100% X 納品 一度制作に着手したら 設計に戻れない ウォーターフォール型開発 ソフトウェア⼯学で古くからある、もっともポピュラーな開発モデル。原 則として前⼯程が完了しないと次⼯程に進まない（設計中に制作を開始す るなどの並⾏作業は⾏わない）事で、前⼯程の成果物の品質を確保し、前 ⼯程への後戻り（⼿戻り）を最⼩限にする。利点は、⼯程の進捗管理がし やすいことである。 ワークフロー＃２ 要件 定義 テスト・ レビュー 設計 制作・ 開発 ・ ・ ・ 納品 30% 50% 70% アジャイル型開発 ソフトウェア⼯学において、迅速かつ適応的にソフトウェア開発を⾏う軽 量な開発⼿法群の総称。 反復 (イテレーション) と呼ばれる短い開発期間 単位を採⽤することで、リスクを最⼩化しようとする開発⼿法。 ワークフロー＃３ 要件 定義 プロト タイプ 開発 デザイン テスト・ レビュー ・ ・ ・ 納品 30% 50% 70% Designing in the browser HTML、CSS、JavaScript(jquery)でコーディングしたプロトタイプをブ ラッシュアップしながら画⾯やサイトを完成させていく開発⽅法。レスポ ンシブWebデザインの現場で最も効⼒を発揮する。設計書を書かず、実 際に動く画⾯を仕様とする考え⽅で増加するデバイス、多様化する⽬的に 適応していくために⾒直された最も進んだワークフロー。 Designing in the browser プロトタイプ1 プロトタイプ2 完成版 4 7 仕事の役割＃１ プロデューサー マーケッター ディレクター エンジニア デザイナー コーダー テスター 縦割りによる分業制 仕事の役割＃２ 仕様決め・仕様書作成 サイト構造設計 システム設計 ユーザーフローの設計 グランドデザイン テンプレートデザイン 詳細デザイン HTMLコーディング ・ ・ ・ 責任者（主） 責任者（副） プロデューサー ディレクター プロデューサー ディレクター ディレクター エンジニア プロデューサー ディレクター ディレクター デザイナー デザイナー デザイナー コーダー コーダー エンジニア 業務分担・協業制 仕事が始まるまで 業務開始までのプロセス オファーを出す NDAを締結する RFPを請求する 注⽂書を受け取る オリエンテーションに 参加する 注⽂請書発⾏する 提案（コンペ）に参加する キックオフ実施 結果通知を受ける 正式⾒積書を提出する 仕事が終わる直後〜完了まで 納品直前から⼊⾦までのプロセス テスト計画書を発⾏する ガイドラインを発⾏する テスト結果報告書を発⾏する 検収書を発⾏する 納品する 請求書を発⾏する 納品書を発⾏する ウェブサイト構築の仕事の４業態 世の中の 流通数 サイズ プロジェクト規模 受注⾦額（⽬安） 1 エンタープライズ ⼤規模サイト 数千万円〜 数億円 １ ミドルサイズ 中規模サイト １千万円以内 2 スモールサイズ ⼩規模サイト 〜３百万円 6 マイクロサイズ 極⼩規模サイト 数万円〜３０万円 ウェブサイト構築の仕事の４業態 サイズ デザイナーの求められる役割（傾向） エンタープライズ UIとグラフィックデザイン、視覚デザインの専⾨家 ミドルサイズ UIとグラフィックデザイン、視覚デザインの専⾨家、 コーダー、ディレクション、ウェブサイト設計 スモールサイズ UIとグラフィックデザイン、視覚デザインの専⾨家、 コーダー、ディレクション、ウェブサイト設計、 ライティング、SEO対策など このサイズの制作が最も多い。 マイクロサイズ UIとグラフィックデザイン、視覚デザインの専⾨家、 コーダー、ディレクション、ウェブサイト設計、 ライティング、SEO対策、マーケティングプランナー、 アクセスログ分析、改善提案など トラブルやミスを起こさない ためのマメ知識 この２つの違いによる悲劇。 それが、すべてのトラブルのもと。 新⼈ウェブデザイナーが クライントやディレクター 思っているデザイナー像 が欲しているデザイナー像 指⽰以外のことはやっちゃダメ。 指⽰通りこなすのがデザイナー。 積極的に提案して欲しい。いい案を求 む。ユーザーのことを考えられる⼈。 W.F.が「楕円」だったから、 デザインもそのまま楕円。 楕円の理由は何だろうか？こ こは四⾓の⽅がよいのでは？ 提案書が「右」だったから、 デザインもそのまま右。 もっとユーザ視点のレイアウ トは？調査してみよう。 指⽰通り作業するだけだったら、 デザイナーではなく「オペレーター」 成果を出すために⼒を尽くすデザインの 専⾨家＝「デザインコンサルタント」 トラブルやミスを起こさない ためのマメ知識 誰でもできる６つのチェックポイント デザイン指⽰は必ず⽂字すること クライアントやディレクターより先に意思表⽰すること すべてのデザインに「意図」があるか確認すること そのデザインに論理的な説明ができるか確認すること 参考サイトは要素分解してメモること 提出時間は必ずバッファを持たせる 給与アップの先得情報 求⼈の現状 有効求⼈倍率1.1倍 出所：厚⽣労働省11⽉28⽇発表の職業安定業務統計 IT業界の現状は？ ⼈⼿が⾜りない。 と、⾔われているが、本当は、違う。 IT業界の現状は？ オペレーターは、沢⼭いる。 ⼈⼿が⾜りないのではなく、 的確な提案ができる⼈。 結果の出せる⼈。 が、⾜りないのだ。 推定年収 推定⽉収（ある⼈から聞いた話） ウェブデザイナー ウェブディレクター ２０代 22〜25万円位 25〜30万円位 ３０代 30〜40万円位 35〜45万円位 ４０代 35〜45万円位 40〜60万円位 年俸制・⽉給制、企業により様々。 ⼊った時の給料で2〜3年は変わらない。 先特情報 そんな中、⾼収⼊の⼈がいる ⽉収100万円前後の⼈。 誰だ？ 先特情報 グロースハッカー Growth Hacker と呼ばれる⼈。 先特情報 グロースハッカー ⽶国で最もホットで⾼収⼊の職種の１つと ⾔われている。 ”ユーザー獲得担当エンジニア” とか“成功請負⼈”など とも⾔われる。最⼩限の予算で⽬的や⽬標の成果を上 げられる⼈のこと。 現状を分析し、最適なマーケティング⼿法を考案し、 ⾃らデザイン・コードを実装できる⼈。 先特情報 グロースハッカー ウェブディレクター デザインコンサルタント デザインオペレーター やりがいと将来性のある “グロースハッカー”を 最初から⽬指してみたら？ 最後に 時代の流れがますます速くなっているIT業界、企 業からは、流されずにしっかりと考えて⾏動・成 ⻑できる「マーケティング思考」「データ分析思 考」を持った⼈材が重視されてきている。 Webクリエイターにとっても、それは同じこと。 単にトレンディなグラフィックデザインをするこ とが仕事ではなく、いかしたら⾃分の成果物がエ ンドユーザに貢献できるか（クライントの売上貢 献ができるか）を分かった上で、それをプレゼン テーションでき、かつ実⾏できる⼈材が、時代に 求められ、結果的に⾼収⼊のWebクリエイターに なることは、間違いない。