
Webデザイン機能士実技(デザイン編)
dunopi
Webデザイン機能士(デザイン)する授業です。 何度やってみると難しくないようにすることができるでしょう。 ただし、Photoshopを行うことを知っておく必要があります。
初級
Photoshop
1名 が受講中です。
難易度 初級
受講期間 無制限
Web制作の基礎
Web制作の専門家
ポートフォリオの方向性
AI専門家
ウェブページを作るためには、単にHTMLタグとCSSの文法を暗記するだけでは不十分です。
画面をどのように構成するかを考え、
デザインをHTMLとCSSで実装し、
必要なアニメーションとインタラクションを適用し、
PCとモバイル環境に合わせてレスポンシブに仕上げる必要があります。
そして今では、AIを活用する能力もウェブ開発における重要な競争力となっています。
この講義では、Web制作の基礎を身につけると同時に、AIを積極的に活用してより速く作り、より簡単に修正し、より良い成果物を作る方法まで一緒に学びます。
Webの基本となるHTMLを理解することから始めます。
単にタグの使い方だけを学ぶのではなく、実際のWebページがどのような構造で作られているのかを見て、自分で構成します。
HTMLの構造を理解すれば、デザインを見ながらも
"この画面はどのような構造で作ればよいだろうか?"
を自分で判断できるようになります。
HTMLで作られた構造にCSSを適用しながら、本格的にWeb UIを制作します。
テキストや色、余白といった基本的なスタイリングから、Flex、Grid、Positionなどを活用したレイアウト構成まで段階的に学習します。
デザイン案を見てそのまま再現するだけでなく
画面を分析し、必要なCSSを自分で構成する能力を身につけます。..
ウェブページは静的な画面だけで終わるものではありません。
SVGやCSSアニメーション、スクロールインタラクションなどを活用し、ユーザーの行動に反応するさまざまなUIを作成します。
SVGグラフィック
SVGストローク
CSSアニメーション
トランジション
スクロールインタラクション
さまざまなUIモーション
シンプルなウェブページから一歩進んで、生き生きとしたWeb UIを実装します。
PCで見栄えよく表示されるウェブページを、モバイルでもそのまま表示することはできません。
レスポンシブWebの基本原理を理解し、画面サイズに応じてレイアウトとUIが自然に変化するように実装します。
Desktop → Tablet → Mobile
各環境に合わせた画面を実際に作りながら、実践的なレスポンシブWeb制作の方法を身につけます。
この講義では、AIを単にコードを代わりに書いてくれるツールとして使うのではありません。
Webページを作りながらAIを活用して
アイデアを具体化し → コードを作成し → 結果を確認し → 問題を修正し → 完成度を高める
実際の開発プロセスを体験します。
AIを活用してHTML/CSSコードを記述し、
複雑なコードを分析し、
エラーが発生した際に原因を探り、
既存のUIを改善し、
レスポンシブコードを修正する方法を学びます。
重要なのは、AIが生成したコードをそのまま使うことではなく、AIが作成した成果物を理解し、望む方向に修正できる能力です。
文法を一つずつ勉強するだけでは終わりません。
学んだ内容を実際のWebページ制作に応用しながら
HTML構造設計
↓
CSS UIの実装
↓
SVG &アニメーション
↓
インタラクティブUI
↓
Responsive Web
↓
AI活用
↓
実践的なウェブページの完成
まで一連の制作過程を体験します。
講義を受講しながら、単なるサンプル画面ではなく、実際のWeb制作に活用できるさまざまなUIを自分で実装します。
ウェブサイトの基本レイアウト
さまざまなUIコンポーネント
レスポンシブウェブページ
SVGグラフィック
アニメーションUI
スクロールインタラクション
モバイル対応のウェブページ
AIを活用したWeb UI制作
AIがコードを生成してくれる時代だからこそ
コードを理解し、望む結果を生み出せる基礎力が重要です。 càng trở nên quan trọng.
この講義では、HTMLとCSSの基礎をしっかり身につけながら、SVG、アニメーション、レスポンシブウェブまで発展させ、
最後にAIを活用して、より速く効率的にWebページを制作する方法までつなげます。
ウェブを初めて始める方から
従来のウェブ制作方法からさらに一歩進みたい方まで、
自分で作り、AIとともに改善し、一つのウェブページを完成させるプロセスを体験してみてください。..
学習対象は
誰でしょう?
業務にAIを活用したい人
UXの方向性
全体
62件 ∙ (21時間 3分)
講座資料(こうぎしりょう):
9. GitHubの説明
07:20
10. GitHubリポジトリを作成する
04:34
13. SVGアニメーションの紹介
00:21
14. SVG下絵たち
11:13
15. 背景制作
15:18
16. HTML下書き
14:14
17. SVGアニメーションの原理
08:49
18. 船を描く
28:02
19. サイズ合わせ
22:16
20. 動きの完成
22:16
21. イラスト画像ファイル
05:19
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!