Flex解説 - 2025 ウェブデザイン技能士 (A3, B4, C1, D3, E4, F3)
dunopi
この講義を通じて ウェブデザイン技能士 A3、B4、C1、D3、E4、F3 問題を display:flexで解く方法を学ぶことができます。 作業速度が速いです。止めながら見てください
초급
HTML/CSS, jQuery
SVGを利用し、簡単な図形を描画してサイトに適用させます。 ポートフォリオに適用すれば、目を引くページになります。
SVG アニメーション
スクロールアニメーション
今回の講義では、SVGとCSSを活用して、船が川の水路に沿って自然に移動するアニメーションを作成する方法を学びます。技術的にはpathの全長を計算し、 stroke-dasharray 、 stroke-dashoffset属性を使って動きを制御する簡単な原理を使います。重要なのは、このプロセスを通じて、単純なイメージではなく、デザインとインタラクションを組み合わせた高度なWebコンテンツを実装することです。
ここで重要なポイントは、このようなSVGアニメーションを活用すると、あなたのポートフォリオクオリティが目立つように上昇することです。特に、最近の企業やクライアントは、単純な静的なデザインよりもユーザーの視線を引くことができる動的な画面構成、およびWeb技術をデザイン的に解釈する能力を高く評価しています。
今回の実習を通じて、バックグラウンドデザイン、インタラクション要素、キャラクターの動きまですべて自分が直接制御する経験を積むことができ、この結果をポートフォリオに入れれば次のような効果が期待できます。
✔シンプルな静的Webデザインとの差別化
ほとんどの申請者は、静的なイメージ、ピグマシアン、HTML構造を中心にポートフォリオを構成しています。しかし、今回のアニメのようにSVGとCSSを組み合わせたリアルタイムインタラクションを見せると、本人のデザインが実際にどのように「生きて動くか」を強調することができます。
✔コーディング可能性とデザイン感覚の同時アピール
単にきれいなデザインを超えて、自分が直接コードを書いてインタラクションを実装したことを強調すれば、「コードに上手なデザイナー」というイメージを与えることができます。これは、フロントエンドの直軍やウェブデザインのポジションの両方で強力な競争力になります。
✔プロジェクトに活用できる実務感覚証明
川に沿って動く船、多様なアイコンを組み合わせた演出は、企業ウェブサイト、製品広報、イベントページ、ゲームデザインなど実務にすぐに適用可能なスキルです。単なるポートフォリオ作品ではなく、実質的に活用可能な結果物を提示すれば、実務適応力もアピールできます。
✔個性的で記憶に残るポートフォリオ演出
多くの応募者のポートフォリオは似たような整形化された構成を持っていますが、自分だけのアニメーション要素を挿入すると、インタビューに強い印象を残すことができます。特に、船が自然に川に沿って移動するシーンはシンプルながらも視覚的に非常にインパクトのある演出です。
今回の講義を通じて、単純な技術実装を超えて実質的なポートフォリオ完成度を高め、競争力のある差別化された結果物を直接制作してみてください。 🌊🚤
いろいろなsvg絵を描いてアニメーションに適用してみる講義です。
HTML/CSS、JavaScriptを利用します。
学習対象は
誰でしょう?
SVGアニメーション初めての方、または経験者の方
ポートフォリオに適用をご希望の方
実務にすぐさま適用したい方
前提知識、
必要でしょうか?
HTML基礎、JavaScript or jQuery基礎
全体
11件 ∙ (2時間 7分)
講座資料(こうぎしりょう):
1. svg アニメーション 紹介映像
00:21
¥2,110
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!