강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Web Development

ウェブパブリッシングマスター - figma to web with javascript

この講義では、Figmaのデザインをウェブページとして実装する過程を段階的に説明します。画像の保存からHTML、CSSの作成、JavaScriptの作成まで、全般的なウェブパブリッシングの実務を扱います。初心者でも簡単に 따라 할 수 있도록 体系的に進められます。実習中心の学習を通して、ウェブデザインを効率的にコードに変換する方法を学ぶことができます。

  • ezweb
웹퍼블리싱
Figma
javascript
자격증
시험
HTML/CSS
JavaScript

こんなことが学べます

  • Figmaでウェブ用画像を保存および最適化する方法

  • HTML構造設計と効率的なマークアップの作成方法

  • CSSの基本スタイリングおよびResetの適用

  • Flexboxレイアウトの活用法

  • ボタン、アイコン、アニメーション効果の適用

  • ウェブ標準とアクセシビリティを考慮したパブリッシング

デザインを完全にWebページに実装してみてください!

ピグマデザインを参照して、さまざまなレイアウト、さまざまなデザイン要素、計画の意図を把握し、Webページとして実装する方法を学びます。

学習目標

  • FigmaデザインをWebに実装するプロセスを理解します。


    デザインファイルを分析し、Webパブリッシングに適用する方法を学びます。

  • Webパブリッシングの基本概念と実務スキルを習得します。
    HTMLとCSSを活用したマークアップとスタイリングのテクニックを学びます。



  • FigmaでWeb用の画像を保存して最適化する方法を学びます。


    適切な画像フォーマットを選択し、Webパフォーマンスを考慮した画像最適化方法を学びます。



  • Web標準とアクセシビリティを考慮したコード作成能力を向上させます。
    さまざまな環境でも一貫したUI/UXを提供できるように学習します。



  • ヘッダーとナビゲーションバーの実装能力をインキュベートします。
    ナビゲーションバー、ヘッダーデザインをWebページに適用する方法を学びます。



  • フォント、色、ボタンスタイルなどのデザイン要素を適用する方法を学びます。


    ウェブサイトのデザインを統一的に保つ方法を実践します。



  • アニメーションと動的効果を適用する方法を学びます。
    CSSアニメーションとトランジション効果を活用してユーザーエクスペリエンスを向上させます。



  • Webパフォーマンスを考慮した最適化技術を習得します。
    コードの効率を高め、パフォーマンスを向上させる方法を学びます。

  • 実戦プロジェクトを完成し、実務能力を強化します。
    学習した内容に基づいて直接ウェブサイトを制作し、パブリッシング能力を育てます。


Webパブリッシャー、フロントエンド開発者を目指していますか?

その後、デザインはデザイナーに任せ、完成したデザインを参照して実装することに集中してみてください。

本講義では、ピグマのコミュニティで無料デザインを活用します。

デザインファイルアドレス: https://www.figma.com/community/file/1383362001941293031



主な学習内容

序盤部(1~5次時)

Webパブリッシングの基礎概念を理解する

Webパブリッシングは、デザインをHTML、CSSとして実装するプロセスです。 Web標準とアクセシビリティを考慮したコードの書き方を学び、デザインファイルを解釈し、マークアップ構造を設計する方法を学びます。また、メンテナンスが容易なコード作成法を身につけ、実務でも活用できるようにします。

Figmaで画像を保存して利用する方法

FigmaでWebパブリッシングに適した画像フォーマットを選択して保存する方法を学びます。 PNG、JPG、SVGなどの違いを理解し、解像度の最適化とWebパフォーマンスの改善方法を学びます。これにより、デザインをウェブサイトに自然に適用する技術を学びます。

HTML基本構造の作成

HTMLを活用してWebサイトの基本構造を作成する方法を学びます。セマンティックタグを使用してアクセシビリティを考慮し、メンテナンスしやすいマークアップを設計する原則を習得します。これにより、Web標準に準拠した効率的なコードの書き方を学びます。

中盤部(6~15次時)

ヘッダーとナビゲーションバーの実装

WebサイトのヘッダーとナビゲーションバーをHTMLとCSSを活用して実装する方法を学びます。ロゴ、メニュー、アイコンなどを適切に配置し、ユーザーが簡単にナビゲートできるように設計する原則を習得します。また、ナビゲーションバーのスタイルを適用し、さまざまなデバイスで一貫したデザインを維持する方法を学びます。


CSSスタイリングとレイアウト設定


CSSを活用してWebサイトのスタイルを設定し、レイアウトを構成する方法を学びます。 FlexboxとGridを使用してコンテンツを配置して配置する方法を学び、直感的なデザインを実装する方法を学びます。また、メンテナンスが容易なスタイル適用方法を身につけ、実務でも活用できるようにします。

フォント、色、背景画像の適用

ウェブサイトの読みやすさを向上させ、デザインを改善するために適切なフォント、色、背景画像を適用する方法を学びます。 Webフォントの使い方を習得し、背景画像を最適化してWebパフォーマンスを維持する技術を習得します。

後半部(16~23次時)

ボタンとアニメーション効果を追加

ウェブサイトでユーザーエクスペリエンスを向上させるためにボタンスタイルを適用し、さまざまなアニメーション効果を追加する方法を学びます。 CSSを活用してボタンのホバーとクリック効果を実現し、トランジションとキーフレームアニメーションを適用して自然なインタラクションを作る技法を習得します。これにより、視覚的な完成度を高め、動的なWeb要素を効果的に活用する方法を学びます。

マウスホバーアニメーション

スクロールアニメーション、ナンバーアニメーション

各種スライドの実装

Webサイトで画像やコンテンツを動的に表示するスライドを実装する方法を学びます。 CSSとJavaScriptを活用して上海移動、左右自動スライドなどを適用する手法を習得し、UXを考慮したスライドデザインを設計する原則を学びます。

javascriptスライドの実装

サンプルファイルと完成版を提供します。

flexのすべての属性の説明と実践例ファイルを提供します。

2回目と最終回目の講義で授業資料を確認してください。

コアクリーンアップPDFを提供します。

flexのすべての属性の説明と実践例リンクを提供します。


コミュニケーション窓口(アンケート、1:1オープンチャットルーム)

受講生の方は、ニュース欄の紹介されているGoogleアンケートと1:1オープンチャットルームを通じて、いつでもコメントや質問をすることができます。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • Figmaを活用したウェブパブリッシングを学びたい方

  • ウェブデザインをウェブサイトに変換する方法を学びたいデザイナー

  • 実務でパブリッシングスキルを向上させたいウェブ開発者

  • HTML/CSSの基礎を固めた後、実践的なプロジェクトを求めている学習者

  • ポートフォリオサイトを制作しようとしている学生および就職活動生

こんにちは
です。

2,522

受講生

49

受講レビュー

3

回答

4.9

講座評価

8

講座

■ [현재] 그린컴퓨터아트학원 웹퍼블리싱, 프론트엔드 강의
■ [현재] 웹 퍼블리싱 유튜브 채널 'Rock's Easyweb' 운영
■ 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
■ 한빛 컴퓨터아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의


[ 도서 ]
2021.07.19 출간 / 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서 / 비제이퍼블릭

2022.08.25 출간  / 코딩을 처음이라 with 웹 퍼블리싱  / 영진출판사

2023.10 출간 /2024 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

2024.11 재판 /2025 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

 

[ 수상경력 ]
2022.08 그린컴퓨터 아트 학원 종로지점 - 우수강사 2021.06 그린컴퓨터 아트 학원 종로지점 - 우수강사 2018.06 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2017.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2016.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2015.10 그린 컴퓨터아카데미 신촌 지점 - 우수강사 

 

 

 

カリキュラム

全体

23件 ∙ (7時間 16分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

1件

4.0

1件の受講レビュー

  • racoon726235님의 프로필 이미지
    racoon726235

    受講レビュー 6

    平均評価 4.8

    4

    30% 受講後に作成

    ¥7,865

    ezwebの他の講座

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

    似ている講座

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