【Webデザイン初心者向け】デザインカンプからどうやってコーディングするの？実際の作業の流れを徹底解説！

デザインカンプからコーディングをする時の作業の流れについて、デザインデータの取り扱いからコーディング時の活用方法まで、初心者向けに徹底解説しました！
今回は「Adobe Illustrator」で作成されたデザインデータの場合を例に解説しております。

★★★「Webの神様」メンタープランのご案内★★★

ナビゲーターの「なつこ」が講師となって、皆さんのWebデザイン・プログラミング学習をサポートする「メンタープラン」を実施中です！

【お知らせ動画】
「Webの神様」があなたのメンターになります
   • 【お知らせ】「Webの神様」があなたのメンターになります【未経験・初心者大歓迎】  

【プランの詳細・お申し込み（MENTA）】
https://menta.work/plan/5148

未経験から学習中の方、Web・IT業界に就職・転職活動中の方、フリーランス独立を目指して活動中の方など、必要として頂いている皆さんのお役に立てるように精一杯サポートさせて頂きます！
是非ともご検討いただければ幸いです。

★★★★★★★★★★★★★★★★★★★★★★★

〈目次〉
・オープニング 0:00
・前置き：この動画で解説する範囲について 1:11
・手順① デザインカンプを確認する 2:13
・補足：デザインデータの形式について 3:15
・デザインカンプの取り扱いルール 5:20
・「アウトライン化」されたデータについて 7:16
・補足：「Google Fonts」のダウンロード 12:17
・手順② コーディング計画を立てる 13:11
・手順③ HTMLマークアップを行う 19:19
・補足；HTMLマークアップ後の例 23:43
・手順④ 画像素材を書き出す 24:13
・手順⑤ CSSを書いてレイアウトを整える 27:27
・補足；リセットCSSの読み込み 29:21
・手順⑤ CSSを書いてレイアウトを整える 31:05
・最後のまとめ 35:17

-- Webの神様 --
未経験、初心者のみなさんのHTML・CSSの学習を応援していくチャンネルです！

【タグ】
#Webデザイン #コーディング

【SNS】
-- Twitter --
  / webgodweb  

-- Facebook --
  / webgodweb  

【運営会社】
株式会社カラフルクローバー
https://www.colorful-clover.co.jp/