Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Software Development Tools No-Code Development
Business
Entrepreneurship Communication Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certifications Network & Security Hardware Operating Systems & Servers Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Paid Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement & Gardening Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition & Diet Yoga Mental Health Martial Arts & Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Learning Teacher Training Test Prep Other Teaching & Academics
Web Development JavaScript React Angular CSS Node.Js HTML5 PHP Vue JS
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Amazon AWS Cisco CCNA Microsoft AZ-900 AWS Certified Developer - Associate
Microsoft Power BI SQL Tableau Data Modeling Business Analysis Business Intelligence MySQL Qlik Sense Blockchain
Unity Unreal Engine Game Development Fundamentals C# 3D Game Development C++ Unreal Engine Blueprints 2D Game Development Virtual Reality
Google Flutter Android Development iOS Development React Native Swift Dart (programming language) Mobile App Development Kotlin SwiftUI
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting Canva InDesign Character Design Procreate Digital Illustration App
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Life Purpose Mindfulness Meditation CBT Cognitive Behavioral Therapy Sound Therapy
Entrepreneurship Fundamentals Business Fundamentals Freelancing Business Strategy Startup Business Plan Online Business Blogging Home Business
Digital Marketing Social Media Marketing Marketing Strategy Internet Marketing Google Analytics Copywriting Email Marketing YouTube Marketing Podcasting

DesignWeb DesignAdobe XD

プロになる基礎から実践まで!WebデザインからHTML5・CSS3(Sass)でのコーディングを全て学べる講座

Webサイト作成の思考方法、PhotoshopとAdobeXDを用いたデザイン作成・プロトタイプ作成、HTML5とSass(SCSS)・jQueryを用いたレスポンシブ対応のコーディングを爆速で学べるコース。
Rating: 4.0 out of 54.0 (209 ratings)
1,503 students
Created by 浅本 侑樹
Last updated 6/2018
Japanese

What you'll learn

  • デザインからコーディングまで一貫してWebサイトを作成できるようになり、実務でも通用する制作の流れを習得できます。
  • Adobe XDを用いてWebデザインが出来るようになります。
  • HTML5、CSS3、Sass(SCSS)に関する知識・よく使うタグを身につけることができます。
  • パソコンにもスマートフォンにも対応したレスポンシブのWebページの作り方を身につけることができます。
  • Webフォントやアイコンフォントが使えるようになります。

Requirements

  • 初歩的なPC操作の知識
  • MacもしくはWindows
  • デザイン編ではAdobe Photoshop、実践編ではAdobe XDが必要です。(コーディングだけを学習したい方は不要です)

Description

サイト作成にあたって考えるべきことを学べ、成果物としてワイヤーフレーム作成まで行う思考編

Photoshopを用いてワイヤーフレームからデザインをし、成果物としてはデザイン作成まで行う デザイン編

HTML5やSass(SCSS)を用いてコーディングを行い、自己紹介ページの作成まで行う コーディング編

実際の私の仕事の流れを再現し、思考編・デザイン編・コーディング編を網羅した実践編。デザインのツールはPhotoshopではなくAdobe XDを使用。プロトタイプ作成からデザインフィードバックをもらう方法に加えて、Webフォントの使用やよく目にするアニメーションなど、全面的にトレンドを取り入れています。成果物としてはブログのトップページ、記事一覧ページ、記事詳細ページとなります。

一連の流れを学びたい方はもちろん、コーディングやデザインだけ学びたい方にもオススメの講座です。
コーディングするものは全てレスポンシブデザインで作成します。

---

使用する言語
HTML5、CSS3、Sass、jQuery

使用するツール
Photoshop、AdobeXD、Atom、Google Chrome

使用する外部サービス
Google Fonts、Google Fonts + 日本語早期アクセス、Font Awesome、ress

使用しているマシン
前半はMac(macOS High Sierra)ですが、動作が重いため、途中からWindows(Windows10)に切り替わります。
インターフェイスに違いはそれほどないので、Macユーザーの方でも問題ありません。

Who this course is for:

  • Webデザインもコーディングも学びたい方
  • プライベートや仕事でホームページ(Webページ)の作成が必要な方
  • Webデザイナーになりたい方
  • 爆速でPhotoshop、Adobe XD、HTML、CSS3、Sass(SCSS)を学習したい方

Instructor

浅本 侑樹
Webデザイン
浅本 侑樹
  • 4.0 Instructor Rating
  • 209 Reviews
  • 1,503 Students
  • 1 Course

小学生のときにアフィリエイトをするためにブログ・Webサイト制作を始めました。

高校卒業後、4年制専門学校でWeb開発学科を専攻し、Webデザイン・プログラミング・アプリ開発など幅広く学んだ後、Webマーケティングのメディア運営会社に就職し、Webデザイナーとして勤務。Webサイトのデザイン・コーディング、LP制作、バナー制作などを経験。

2017年に結婚式場口コミメディア運営会社に転職し、Webデザイナーとして勤務。メディアのフルリニューアル(デザイン・コーディング)、LP制作、バナー制作、スタイルガイド作成などを経験。

2018年8月よりAidemyにてデザイナーとして勤務。

本業の傍ら、「より使いやすいWebサイトであふれる社会を作りたい。Webデザインをより身近に。」という想いでブログ・QiitaでのWebデザインに関するナレッジの共有を行っています。

Qiitaでは1記事で累計75000PV、いいね250件を超えているものもあります。

Top companies choose Udemy Business to build in-demand career skills.
NasdaqVolkswagenBoxNetAppEventbrite
  • Udemy Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Investors
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Accessibility statement
Udemy
© 2022 Udemy, Inc.