Webデザイナー1年生の為のしおり

1. デザイナー Web の為のしおり 1年⽣これから⽬指す⼈にも/

2. #01 そもそも、 Webデザイナーとは？

3. そもそも、Webデザイナーとは？ 1 Web+デザイナー WorldWideWebの略世界中どこにいても、コンピューターなどによって情報を得られるシステムのことワールドワイドウェブ Webとは？ ! インターネット≠Web インターネットの中に Webが含まれる

4. そもそも、Webデザイナーとは？ 1 WebサイトやWebアプリなど Webに特化したデザイナー Webデザイナー

5. #02 Webデザイナーの仕事は？

6. Webデザイナーの仕事は？ 2 ①新規制作 ②運⽤ ③その他例）Web制作会社（受託）の場合 Webサイトやアプリのデザイン(画⾯設計)とコーディング公開後のデザイン修正やコンテンツ更新 Web広告やSNS⽤のクリエイティブ制作

7. Webデザイナーの仕事は？ 2 デザインするコーディングする実装・公開プランニングイメージの⾒える化ブラウザ上で⾒える化 ※Webデザイナーの業務領域は、会社規模や業種により異なります。 ■プロトタイプ作成 ■デザインカンプ作成 ■HTMLでマークアップ ■CSS+JSでスタイリングデザイナーディレクターエンジニアエンジニアディレクターエンジニアデザイナーデザイナー

8. Webデザイナーの仕事は？ 2 デザインするコーディングするイメージの⾒える化ブラウザ上で⾒える化 ※Webデザイナーの業務領域は、会社規模や業種により異なります。使⽤するツール（プロトタイピング・カンプ）使⽤するプログラミング⾔語 □AdobeXD □Skecth □Figma □AdobePhotoshop □AdobeIllustrator □HTML(pug) □CSS(sass) □Javascript □PHP

9. #03 デザイナーとしての役割・使命

10. デザイナーとしての役割・使命 3 デザインとは？デザインの語源はデッサン(dessin)と同じく、“計画を記号に表す” という意味のラテン語designareである。また、デザインとは具体的な問題を解き明かすために思考・概念の組み⽴てを⾏い、それを様々な媒体に応じて表現することと解される。 wikipedia「デザイン」より「デザイン」の語源

11. デザイナーとしての役割・使命 3 デザインとは具体的な問題を解き明かすために思考・概念の組み⽴てを⾏い、それを様々な媒体に応じて表現すること課題解決設計表現

12. デザイナーとしての役割・使命 3 デザインとは？課題解決の為に、設計・表現すること

13. デザイナーとしての役割・使命 3 誰の為のデザインか？ステークホルダー何を伝えたいか？どうアクションを取ってもらうか？課題は何か？どうやって接点を作るか？ユーザーデザイン

14. デザイナーとしての役割・使命 3 誰の為のデザインか？どうアクションを取ってもらうか？ステークホルダー何を伝えたいか？課題は何か？どうやって接点を作るか？ユーザーデザインクライアントの利益も⼤事ユーザーの利便性・操作性も⼤事

15. デザイナーとしての役割・使命 3 デザイン課題解決を通じて、ステークホルダーやユーザーのすること。それが、デザイナーの役割・使命。

16. デザイナーとしての役割・使命 3 □かっこいいデザインを作るのが、デザイナー。かっこいいデザイン＝良いデザインとは限らない。そして、デザインとアートは全くの別物。 □デザイナーは、クライアントの利益だけを優先すべき。 □デザイナーはアーティスト。 ×間違った考え⽅

17. #04 WebサイトやWeb制作について理解する

18. WebサイトやWeb制作について理解する 4 Webサイトの種類ターゲットとなるユーザーやクライアントの事業形態によって多くの種類があります。

19. WebサイトやWeb制作について理解する 4 ●コーポレートサイト企業や店舗などの事業について紹介するサイト⾃社の特定サービスやブランドを紹介するサイト⾃社のサービスや商品をネットで売買するサイト集客の為に⾏う「⾃社運営」のメディアサイト社内報など組織内だけに閲覧限定されたサイト検索エンジンやリンク集など広告を使⽤した集客⽤ページ（サイト）新卒・中途採⽤⽬的のサイト ●リクルートサイト ●イントラネットサイト ●ポータルサイト ●オウンドメディアサイト ●ランディングページ（広告） ●サービス・ブランドサイト ●ECサイト #Webサイトの種類ビジネスモデル別⽬的・⽤途別デバイス別

20. WebサイトやWeb制作について理解する 4 BtoB 企業間取引⼀般消費者向け個⼈間取引 BtoC CtoC BusinesstoBusiness ※上記以外にも、BtoBtoC（BtoCを⽀援）など様々なビジネスモデルが派⽣しています。 BusinesstoConsumer ConsumertoConsumer #Webサイトの種類ビジネスモデル別⽬的・⽤途別デバイス別

21. WebサイトやWeb制作について理解する 4 PC向けサイトスマホ向けサイトレスポンシブサイトアダプティブサイト XXXXX.com/ XXXXX.com/ XXXXX.com/ XXXXX.com/sp/ ユーザーのデバイスによって表⽰するコンテンツやスタイルを切り替える PC表⽰に最適化されたデザインやコンテンツを表⽰スマートフォンなどのモバイル端末に最適化デバイスのディスプレイサイズによってスタイルを切り替える #Webサイトの種類ビジネスモデル別⽬的・⽤途別デバイス別

22. WebサイトやWeb制作について理解する 4 Webサイト表⽰の仕組み Webサイトがどのようにして公開され、表⽰されているのか？

23. WebサイトやWeb制作について理解する 4 Webサーバー Webクライアント Web上で情報を公開 Webブラウザなどで情報を閲覧 Chrome Safari Firefox Edge... リクエスト応答 #Webサイト表⽰の仕組み WebサーバーとWebクライアント Webサイトの公開の流れ

24. WebサイトやWeb制作について理解する 4 レンタルサーバーの⽤意 HTML/CSS作成サイト情報をサーバーにアップロードドメインの取得 #Webサイト表⽰の仕組み WebサーバーとWebクライアント Webサイトの公開の流れ

25. WebサイトやWeb制作について理解する 4 静的サイト・動的サイトいつアクセスしても同じものが表⽰既にWebページがあるリクエスト毎にWebページを⽣成アクセスしたときの状況に応じて異なる内容が表⽰される

26. WebサイトやWeb制作について理解する 4 CMS コンテンツ管理システムのこと。HTMLなどWebの専⾨知識がなくても、Webサイトの構築や運⽤ができるシステム。今やサイト構築・運⽤に⽋かせない/ ContentManagementSystem 無料〜数百万するCMSまで様々 MAツールやCRMとの連携国産CMS・外国産CMS 多機能

27. WebサイトやWeb制作について理解する 4 #CMS（コンテンツ管理システム）知名度の⾼いCMS 上場企業が使⽤するCMS

28. WebサイトやWeb制作について理解する 4 #CMS（コンテンツ管理システム）知名度の⾼いCMS 上場企業が使⽤するCMS Drupal AdobeExperienceManager NOREN BlueMonkey 4. 5. 6. 7. 8. 9. 10. DotNetNuke はてなブログMedia RCMS WordPress MovableType ShareWith 1 2 3 全体の約20％ ※株式会社DataSign「上場企業CMS調査2019年6⽉版」https://datasign.jp/blog/datasign-report-cms_201906/ 上場企業CMS導⼊ランキングTOP10 ※⽇本取引所グループの上場銘柄⼀覧に含まれている企業3,664社

29. #05 Webデザイナーとしてどこで働くのか？

30. Webデザイナーとしてどこで働くのか？ 5 働き⽅・就業先就業先の会社の規模や形態によっても仕事内容は⼤きく違います！企業研究は、⼊念に⾏いましょう。 Webデザイナーの

31. Webデザイナーとしてどこで働くのか？ 5 #働き⽅・就職先雇⽤形態就業先アルバイト・パート正社員・契約社員業務委託

32. Webデザイナーとしてどこで働くのか？ 5 #働き⽅・就職先雇⽤形態就業先制作会社事業会社フリーランスオンラインショップ運営会社 ※厳密にはより多くの就業先があります。（広告代理店やSIerなど）インハウスデザイナーとしてインハウスデザイナーとして

33. #06 Webデザイナーとして誰と働くのか？

34. Webデザイナーとして誰と働くのか？ 6 周りの⼈々プロジェクト規模や業種により、デザイナーを取り巻く⼈々の相関関係や職種が異なります。 Webデザイナーと

35. Webデザイナーとして誰と働くのか？ 6 プロジェクトマネージャー Webプランナー Webディレクターフロントエンドサーバーサイド ●アシスタント ●デザイナー ●シニアデザイナー ●リードデザイナー（マネージャー）例）Web制作会社（中規模案件） Webデザイナーエンジニアチームデザインチームディレクションチーム企画営業チーム企画提案サイト設計（要件定義・画⾯設計書...）デザイン（プロトタイプ・カンプ）コーディングテスト・実装

36. Webデザイナーとして誰と働くのか？ 6 事業責任者 Webディレクターエンジニアマーケターアナリストマーケター例）事業会社マーケティング（あるいは広報）チームサイト設計デザイン（プロトタイプ・カンプ）コーディング実装運⽤ Webデザイナー

37. #07 Webデザイナーに必要なスキルとは？

38. Webデザイナーに必要なスキルとは？ 7 デザインスキルデザイン基礎スキルアプリケーションスキルアウトプット以前の基礎⼒デザインをアウトプットする⼒ □四⼤原則（近接・整列・反復・対⽐） □トーン＆マナーの理解 □デザインパターン、レイアウト.... □AdobePhotoshop □AdobeIllustrator □AdobeXD,Figma,Skech... ×

39. Webデザイナーに必要なスキルとは？ 7 コーディングスキル HTML5+CSS3 Javascript Webサイト制作の必須スキル +αのスキルを⾝に付ける □最低限知っておいた⽅がいい □簡単なサイト修正などにも活きる □Sassなどの技術を習得すると尚良い □最初は、jQueryからでも良い □アニメーションやカルーセル実装 □素のJSを書けるようになると尚良い＋

40. Webデザイナーに必要なスキルとは？ 7 知識×スキル×モチベーション Webデザイナーとしての能⼒知識だけでもダメで、スキルだけでも能⼒を伸ばす事はできない。

41. #08 今から考えるキャリアプラン

42. 今から考えるキャリアプラン 8 Webデザイナー平均年収 600万 500万 400万 300万 200万 20代 30代 DODA:平均年収ランキング（職種別の平均年収∕⽣涯賃⾦）2020年12⽉版 40代 327 348 444 510 388 431 全職種平均年収

43. 今から考えるキャリアプラン 8 あなたのタイプ・志向は？コーディング⼤好きフロントエンドいいかも！職⼈気質何歳になってもデザイナーでいたい独⽴志向将来はフリーor起業なんでも⾃分でやりたい！管理したいプロジェクト全体を⾃分で管理したい

44. 今から考えるキャリアプラン 8 縦と横の広がり Webデザイナーディレクター UIデザイナーコーダーマーケターアナリストプランナーフロントエンドサーバーサイドプロデューサー UXデザイナー UXリサーチャーアートディレクタークリエイティブディレクターリードデザイナーシニアデザイナー

45. 今から考えるキャリアプラン 8 Webデザイナーディレクター UIデザイナーコーダーマーケターアナリストプランナーフロントエンドサーバーサイドプロデューサー UXデザイナー UXリサーチャーアートディレクタークリエイティブディレクターリードデザイナーシニアデザイナーエンジニア領域プロジェクト管理ジョブチェンジジョブチェンジ昇進マネジメントスペシャリスト

46. 今から考えるキャリアプラン 8 Webデザイナーと●●の平均年収 600万 500万 400万 300万 200万 20代 30代 DODA:平均年収ランキング（職種別の平均年収∕⽣涯賃⾦）2020年12⽉版 40代 327 387 366 506 486 605 599 388 431 ●クリエイティブディレクター∕アートディレクター ●Webサービスエンジニア

47. 今から考えるキャリアプラン 8 現代のWebデザイナーは、考える事がいっぱいステークホルダービジネス視点ユーザー視点ユーザー幅広くアンテナを⽴て、Webマーケティングやデジタルマーケティングという⼤枠でデザインを⾒つめる PDCA CVR SEO CRM連携 UX ユーザビリティアクセシビリティ多デバイス対応ブランディング SNS デザイン⼿法パーソナライズ

48. WebDesigner TOMOAKITOMONO 最後までお読みいただき、誠にありがとうございます。参考⽂献・参考サイトアダプティブWebデザインとは？-レスポンシブWebデザインとの違い-(ビックマック株式会社) https://big-mac.jp/column/what-is-adaptive-web-design/ デザイン組織のマネジメントにおける⼼がけとは？(GoodpatchBlog) https://goodpatch.com/blog/design-orgs-tips 平均年収ランキング（職種別の平均年収∕⽣涯賃⾦）(DODA) https://doda.jp/guide/heikin/syokusyu/ Webデザイナー・クリエイターとして素晴らしい1歩が踏み出せますように。 @DesignerTomono https://note.com/minamotono

Webデザイナー1年生の為のしおり

Webデザイナー1年生の為のしおり

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados(20)

Similar a Webデザイナー1年生の為のしおり

Similar a Webデザイナー1年生の為のしおり(20)

Webデザイナー1年生の為のしおり