inflearn logo
知識共有
inflearn logo

SVGマルチストローク・スクロールアニメーション

svgを利用して簡単な絵を描き、サイトに適用させます。 ポートフォリオに適用すれば、目を引くページになります。

28名 が受講中です。

難易度 初級

受講期間 無制限

HTML/CSS
HTML/CSS
JavaScript
JavaScript
HTML/CSS
HTML/CSS
JavaScript
JavaScript

受講後に得られること

  • SVGアニメーション

  • スクロールアニメーション

今回の講義では、SVGとCSSを活用して船が川の経路に沿って自然に移動するアニメーションを作る方法を学びます。技術的にはpathの全長を計算し、stroke-dasharraystroke-dashoffset属性を利用して動きを制御するというシンプルな原理を使用します。核心は、このプロセスを通じて単なる画像ではなく、デザインとインタラクションが結合された高度なウェブコンテンツを実装することにあります。


ここで重要なポイントは、このようなSVGアニメーションを活用することで、皆さんのポートフォリオのクオリティが目に見えて向上するという点です。特に、最近の企業やクライアントは、単純な静止デザインよりもユーザーの目を引く動的な画面構成、そしてウェブ技術をデザイン的に解釈できる能力を高く評価します。

今回の実習を通じて、背景デザイン、インタラクション要素、キャラクターの動きまで、すべてを自分自身で制御する経験を積むことができ、その成果物をポートフォリオに入れることで、次のような効果が期待できます。


単純な静的ウェブデザインとの差別化
ほとんどの志願者は、静的な画像、Figmaの試案、HTML構造を中心にポートフォリオを構成します。しかし、今回のプログラミングのようにSVGとCSSを組み合わせたリアルタイムのインタラクションを見せることで、自身のデザインが実際にどのように「生き生きと動くのか」を強調することができます。


コーディングの可能性とデザインセンスを同時にアピール
単にきれいなデザインにとどまらず、自らコードを書いてインタラクションを実装した点を強調することで、「コードに精通したデザイナー」というイメージを与えることができます。これはフロントエンド職やウェブデザインポジションのどちらにおいても強力な競争力になります。


プロジェクトに活用可能な実務感覚の証明
川に沿って動く船、多様なアイコンを組み合わせた演出は、企業のウェブサイト、製品プロモーション、イベントページ、ゲームデザインなど、実務に即座に適用可能なスキルです。単なるポートフォリオ作品ではなく、実質的に活用可能な成果物を提示することで、実務への適応力もアピールできます。


個性的で記憶に残るポートフォリオの演出
多くの志願者のポートフォリオが似たり寄ったりの定型化された構成であるのに対し、自分だけのアニメーション要素を挿入することで、面接官に強い印象を残すことができます。特に、船が自然に川に沿って移動するシーンは、シンプルながらも視覚的に非常にインパクトのある演出です。

今回の講義を通じて、単なる技術の実装を超えて実質的なポートフォリオの完成度を高め、競争力を備えた差別化された成果物を直接制作してみてください。 🌊🚤



様々なSVGイラストを描いてアニメーションに適用してみる講座です。
HTML/CSS、JavaScriptを使用します。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • SVGアニメーションが初めての方、または経験のある方

  • ポートフォリオに活用したい方

  • 実務にすぐ適用したい方

前提知識、
必要でしょうか?

  • HTML基礎、JavaScriptまたはjQuery基礎

こんにちは
dunopiです。

465

受講生

8

受講レビュー

24

回答

4.8

講座評価

6

講座

ウェブデザイン技能士実技

全国平均合格率60%で

私たちのクラスは90%合格中ですよ〜ん!

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

dunopiの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!

新規会員登録で25%OFF

¥4,068

25%

¥5,418