강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Web Development

Figma参照 - レスポンシブECサイト作成パーフェクトガイド

HTML、CSS、JavaScript(jQuery)の基礎はありますか?でも、ウェブサイト全体をどう作ればいいのかよくわからないですか?それなら、デザインを参考にしてショッピングモールのメインページの実装に挑戦してみてください。完成されたデザインを参考に、企画意図やデザインの詳細な事項を把握し、ウェブサイトを実装するノウハウをお教えします。

  • ezweb
반응형웹
Figma
HTML/CSS
JavaScript
jQuery

学習した受講者のレビュー

こんなことが学べます

  • Figmaデザインの解析とイメージ抽出

  • HTML/CSSファイルの初期設定

  • CSS変数とグローバルスタイルの作成

  • Webフォントの使用設定

  • レイアウト設計:GridとFlexboxの活用

  • メディアクエリを活用したレスポンシブCSSの実装

  • コンテナクエリを活用したレスポンシブCSSの実装

  • Swiper.jsを活用したレビュー スライドの作成

  • jQuery活用 モバイルメニュー、カートトグルスライドの作成

  • GitHub Pages を活用してウェブサイトを公開する

このコースは、HTML、CSS、Javascript、jQueryの基礎を持っている必要があることを学ぶことができます。

各パートごとの学習は下記リンクをご確認ください。

プロジェクト環境設定

  • 必須プラグインのインストール

    • Export Original Images

    • Export Styles to CSS Variables

    • Font Scanner

  • プロジェクトファイルの構成

    • ディレクトリの作成: images , css , js

    • 共通のHTMLファイルとCSSファイルの作成: common.html common.css

デザインでウェブサイトに必要なイメージを保存し、共通に適用されるスタイルとタグを common.html と common.css に作成し、一貫性が維持され、今後のメンテナンスが楽なウェブサイトを制作します。

プロジェクトファイルの構成

Figma デザインを理解する

  • Figmaで必要な画像やスタイルを簡単に取得する方法を学びましょう。

  • デザインシアンをWebで実装するための基礎を学びます。

このコースでは、Home Page(メインページ)を実装しながら、デザインを参照してhtml構造、cssスタイルを作成するノウハウを学習します。

Figma デザインを理解する

基本ファイルの設定

  • reset.cssとnormalize.cssできれいな起動を準備します。

  • 効率的な作業のためのフォルダ構造と共通ファイルを作成します。

reset.cssでHTMLが一意に持っているプロパティを初期化し、normalize.cssを介してすべてのブラウザで同じUIを実装できるようにプロジェクトを設定します。

スタイルの基本設定

  • よく使う色と文字サイズを変数に設定します。

  • Google Fontsできれいなフォントを適用してみてください。

共通CSSを作成する

レイアウトを構成する

  • GridとFlexboxで柔軟な画面構造を作成します。

  • ウェブサイトの主要領域を設計します。

主な領域HTML

デザインの主な領域を特定する

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

  • cssプロパティを利用してスクロール時に固定される効果を作成しましょう。

  • スクリプトを書かずに純粋なcssとして実装します。


スクロール時に固定される要素を実装する

ボタンに鮮やかなプラス

  • CSSとjQueryで素晴らしいボタン効果を作りましょう。

  • クリックしたい3Dボタンを実装します。

CSSとjQueryを活用したボタンアニメーション

CSSとjQueryを活用したボタンアニメーション

レビュースライダーの作成

  • Swiper.jsでさわやかなスライドを実装します。

  • すべてのデバイスでうまく機能するスライダーを作成します。

swiper.js活用レビュースライドの実装

インタラクション機能の実装

  • jQueryで便利なカート機能を作りましょう。

  • ユーザーフレンドリーなカートデザインを完成させます。

  • モバイルメニューの機能を作りましょう。

インタラクション機能の実装(モバイルメニュー、ショッピングカート)

レスポンシブデザインを完成させる

  • すべてのデバイスで完全に機能するようにトリムします。

  • モバイルでも便利なメニューやカートを実装します。

レスポンシブデザインを完成させる(pc、タブレット、モバイル)

展開する

  • ウェブサイトのパフォーマンスを最適化します。

  • GitHub PagesやNetlifyであなたの作品を世界に披露します。

繰り返されるコードなどをリサイクルできるように整理し、不要なソースは削除します。

githubページまたはNetlifyに静的なサイトをアップロードして、誰でも訪問できるように展開します。

仕上げ

このプロセスは、実際のショッピングモールを実装するプロセスではありません。実際のショッピングモールを実装するには、データベースとの連携が必要です。その部分については、バックエンド言語とデータベース関連の学習をさらに進めてください。このプロセスでは、Webパブリッシャーとしてデザインを参照し、html、css、javascript(jQeury)を活用してエンドユーザーに表示される画面を完成させます。

このコースを習得し、Web開発に興味がある場合は、以下の内容を確認してフロントエンド開発者またはベックエンド開発者に挑戦してください!

  • JavaScript フレームワーク/ライブラリ

    • react, vue.js, Angular

  • TypeScript学習

  • バックエンドの基本理解

    • REST APIとHTTPリクエスト/レスポンス構造

    • JSONデータを扱う方法

  • シンプルなバックエンド体験

    • Node.jsとExpress.jsを活用したシンプルなサーバー作成

    • データベース接続(MongoDB、Firebase、MySQLなど)

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

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


こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTML、CSS、jQueryの基礎知識がある学習者。

  • パブリッシング作業の経験は不足しているものの、実際のプロジェクトを完成させてみたい初級開発者。

  • デザインツール(Figma)の活用経験はないが、学びたいと考えている人。

  • レスポンシブWebの実装とパブリッシングの実務プロセスを学びたい学習者。

  • ウェブパブリッシングとフロントエンド開発の基本原理を習得したい人。

  • コーディングの基礎はあるものの、総合的な応用が難しい方

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

  • HTML

  • CSS

  • JavaScript

  • jQuery

こんにちは
です。

2,523

受講生

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 그린 컴퓨터아카데미 신촌 지점 - 우수강사 

 

 

 

カリキュラム

全体

21件 ∙ (8時間 39分)

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

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

受講レビュー

全体

4件

4.8

4件の受講レビュー

  • tomomo님의 프로필 이미지
    tomomo

    受講レビュー 7

    平均評価 5.0

    5

    100% 受講後に作成

    Creating a site in Figma has been very helpful. Thank you for the great lecture.

    • ezweb
      知識共有者

      Glad it helped. We hope for your continued support. ^^

  • skylove62557603님의 프로필 이미지
    skylove62557603

    受講レビュー 10

    平均評価 5.0

    5

    100% 受講後に作成

    It was a class where we did publishing based on Figma, and it seems like it was a useful experience to gain practical experience. It was helpful because I was able to learn how to deploy the site to GitHub at the end. They teach you the fundamentals thoroughly!

    • ezweb
      知識共有者

      Thank you for your valuable feedback. I'm glad it was helpful. Thank you!

  • pcdoomco8345님의 프로필 이미지
    pcdoomco8345

    受講レビュー 15

    平均評価 5.0

    5

    19% 受講後に作成

    I will listen carefully.

    • ezweb
      知識共有者

      Thank you. If you have any questions, please leave them in the comments. ^^

  • bonggyeong9225님의 프로필 이미지
    bonggyeong9225

    受講レビュー 1

    平均評価 4.0

    4

    38% 受講後に作成

    Your attention to even the smallest details truly shows that this is a lecture from a genuine designer.

    ¥6,526

    ezwebの他の講座

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

    似ている講座

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