Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
<脱初心者>即戦力WebデザイナーになるためのHTML/CSS講座【ブロックデザイン編】プロの納品ソースコードから厳選!
Rating: 4.5 out of 5(18 ratings)
249 students

<脱初心者>即戦力WebデザイナーになるためのHTML/CSS講座【ブロックデザイン編】プロの納品ソースコードから厳選!

講座なのに実務経験が積める!?HTML/CSSは一通り習得したけど、なかなか現場レベルのスキルが身に付かない、身に付ける場所がない…とお悩みのかた必見!クライアント大満足のデザイン/ソースコードをあなたもそのまま学んで、使えるようになろう!
Last updated 7/2025
Japanese
Japanese [Auto],

What you'll learn

  • 現場レベルの実践的なHTML/CSSコーディングが習得できる
  • 実際のクライアントに好評だったWebデザインを丸ごと学ぶことができる
  • CSSのみでphotoshopで作ったようなデザインを表現できるようになる
  • フリーランスWebデザイナーレベルになるためのスキルを積むことができる
  • 本教材で獲得したコードのデータをそのまま活用して、案件や顧客にすぐ納品できるようになる
  • 案件獲得や営業効果が高まるポートフォリオ用の作品が増える

Course content

15 sections86 lectures9h 1m total length
  • 受講の流れ・ポイント6:56
  • 講師プロフィール・受講における注意点4:08
  • 本講座で準備するもの3:57

Requirements

  • 基本的なHTML、CSSの知識とスキル
  • Webデザインスクール卒業者もしくは現役生徒レベルのコーディングリテラシー

Description

基礎卒業生/初心者のかたが、即戦力Webデザイナーになるために、最もオススメしたい学習の1つが「実務で使われたブロックデザイン」をマスターするということです。


HTML/CSSにおける「ブロックデザイン」とは、全ての要素を1つのブロックとして扱い、特定の領域を作ってスタイリングするデザイン手法のことです。ブロックデザインは基本的なHTMLとCSSのスキルに集中でき、何度も繰り返し実践することで初学者が確実に成長できる分野の1つです。


本教材では、実際の案件で利用された顧客満足度の高かった納品データと同じ完成デザインのHTML/CSSのコーディングを一緒に行っていきます!


デザイン、コーディング、ライティング、ディレクションすべての分野に長けた講師が実務で納品したサイトの一部をコーディングするため、受講生の皆様は、この講座で実務経験を積んでいるのと同質の体験を得ることができるのが、他の教材との圧倒的な違いです。


即戦力のブロックデザインが身に付けば、「サービスの特徴」「他社との違い」「プラン内容」「導入事例」「お客様の声」「利用の流れ」「機能紹介」など、Webサイトで登場する定番のセクションをハイクオリティにデザイン&コーディングできるようになります。


実際、講師である私自身は、ワイヤーフレームやデザインカンプを作ることなく、いきなりHTML/CSSでデザインを仕上げて、そのままWebサイトを納品するといったことをしています。そのため、Webサイトの案件では、1回のヒアリング、1回のサイト提出で、即納品といったことができています。


短期間で少ないやり取りで納品することができれば、特にフリーランスWebデザイナーとしては、大きく稼ぐことが可能になっていきます。


もしも、CSSしか勉強しておらず、ネストされたScssのコーディングの書き方を知らないのであれば、あなたはかなり損しています!ScssはHTMLを構造的に捉えやすく、変更にも強く、爆速でしかもより簡単にハイレベルなデザインのコーディングができるスキルです!今回の講座では、CSSの中でも、Scssの記述をより高度にマスターできるようになります!


HTML/CSSで高品質なWebサイトを仕上げることができる独自のテクニックやノウハウをぜひ学んで頂き、他のスクールや教材では成長できない姿を一緒に手に入れていきましょう!

Who this course is for:

  • もっと現場ですぐに活きるコーディングスキルを高めたいWebデザインスクール生
  • 中級者になるための良い教材になかなか出会えていないと感じる駆け出しWebデザイナー
  • 現場未経験者から一気にフリーランスになって稼ぎたい会社員・専業主婦(夫)のかた
  • HTML/CSSの基礎を一通り学び終えて、次に何に取り組んだら良いか迷っているコーディング初心者
  • 長年通用するCSSデザインの引き出しを増やしたい現役Webデザイナー
  • コーディングができないと悩んでいる、カンプ専門デザイナー
  • デザイン性の高いコーディングを学びたいプログラム寄りのフロントエンジニア