AI活用デジタルコンテンツ制作
dunopi
¥44,605
初級 / HTML/CSS, JavaScript, Web Design, Self Improvement, AI, claude, Vibe Coding
HTML & CSSベースのAI活用Web UI実践制作
初級
HTML/CSS, JavaScript, Web Design
svgを利用して簡単な絵を描き、サイトに適用させます。 ポートフォリオに適用すれば、目を引くページになります。


SVGアニメーション
スクロールアニメーション
今回の講義では、SVGとCSSを活用して船が川の経路に沿って自然に移動するアニメーションを作る方法を学びます。技術的にはpathの全長を計算し、stroke-dasharray、stroke-dashoffset属性を利用して動きを制御するというシンプルな原理を使用します。核心は、このプロセスを通じて単なる画像ではなく、デザインとインタラクションが結合された高度なウェブコンテンツを実装することにあります。
ここで重要なポイントは、このようなSVGアニメーションを活用することで、皆さんのポートフォリオのクオリティが目に見えて向上するという点です。特に、最近の企業やクライアントは、単純な静止デザインよりもユーザーの目を引く動的な画面構成、そしてウェブ技術をデザイン的に解釈できる能力を高く評価します。
今回の実習を通じて、背景デザイン、インタラクション要素、キャラクターの動きまで、すべてを自分自身で制御する経験を積むことができ、その成果物をポートフォリオに入れることで、次のような効果が期待できます。
✔ 単純な静的ウェブデザインとの差別化
ほとんどの志願者は、静的な画像、Figmaの試案、HTML構造を中心にポートフォリオを構成します。しかし、今回のプログラミングのようにSVGとCSSを組み合わせたリアルタイムのインタラクションを見せることで、自身のデザインが実際にどのように「生き生きと動くのか」を強調することができます。
✔ コーディングの可能性とデザインセンスを同時にアピール
単にきれいなデザインにとどまらず、自らコードを書いてインタラクションを実装した点を強調することで、「コードに精通したデザイナー」というイメージを与えることができます。これはフロントエンド職やウェブデザインポジションのどちらにおいても強力な競争力になります。
✔ プロジェクトに活用可能な実務感覚の証明
川に沿って動く船、多様なアイコンを組み合わせた演出は、企業のウェブサイト、製品プロモーション、イベントページ、ゲームデザインなど、実務に即座に適用可能なスキルです。単なるポートフォリオ作品ではなく、実質的に活用可能な成果物を提示することで、実務への適応力もアピールできます。
✔ 個性的で記憶に残るポートフォリオの演出
多くの志願者のポートフォリオが似たり寄ったりの定型化された構成であるのに対し、自分だけのアニメーション要素を挿入することで、面接官に強い印象を残すことができます。特に、船が自然に川に沿って移動するシーンは、シンプルながらも視覚的に非常にインパクトのある演出です。
今回の講義を通じて、単なる技術の実装を超えて実質的なポートフォリオの完成度を高め、競争力を備えた差別化された成果物を直接制作してみてください。 🌊🚤
様々なSVGイラストを描いてアニメーションに適用してみる講座です。
HTML/CSS、JavaScriptを使用します。
学習対象は
誰でしょう?
SVGアニメーションが初めての方、または経験のある方
ポートフォリオに活用したい方
実務にすぐ適用したい方
前提知識、
必要でしょうか?
HTML基礎、JavaScriptまたはjQuery基礎
全体
11件 ∙ (2時間 7分)
講座資料(こうぎしりょう):
1. SVGアニメーション紹介動画
00:21
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!
新規会員登録で25%OFF
¥4,068
25%
¥5,418