本当!ウェブサイト制作! Step by Step! (「クルアラモード」_反応型ウェブ制作)

本当!ウェブサイト制作 Step By Step!クルアラモード(https://crewalamode.com/)メインページをそのまま製作してみる過程です。サイトに盛り込まれているカラフルなインタラクティブウェブをそのまま製作、実装してみる過程で、複雑なレイアウトも簡単かつ迅速に制作する実務コアノウハウをそのままお知らせします。

難易度 初級

受講期間 無制限

Responsive Web
Responsive Web
jQuery
jQuery
HTML/CSS
HTML/CSS
Interactive Web
Interactive Web
Responsive Web
Responsive Web
jQuery
jQuery
HTML/CSS
HTML/CSS
Interactive Web
Interactive Web

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

4.8

5.0

김가희

100% 受講後に作成

先生のクローンコーディング講座は、まずデザインがとても 멋있게 作れるので、ポートフォリオを作る際にとても役に立つと思います。 実務に活用するにも良いですし、講義もサクサク進むので、飽きずに楽しめました。フィードバックも早いですし。 新しい講義がもっと出てほしいです~~

5.0

초록

84% 受講後に作成

きちんとした進捗と詳細な説明に従うのは簡単です。 良い講義をよく聞いていきます!

5.0

Pslsk

100% 受講後に作成

jヤングの講義だけが2つ聞きましたが、2つすべてとても満足していました!講師様がじっくり教えてくれて簡単にフォローでき、学んだことを元にすぐに実戦に応用できてよかったです!おかげで実力が本当にたくさん増えました。

受講後に得られること

  • 実務に適したレイアウト制作方法!

  • フルサイズ動画が入ったレスポンシブウェブサイトの制作方法!

  • スクロールアニメーションの適用方法!

  • スクロール時にデザインが変更されるヘッダーとイメージアニメーション!

  • 文字ごとのテキストアニメーション!

  • GNBオープンメニューの製作方法!

自分で作って学ぶウェブサイト!
J. Youngと一緒にクローンコーディングに挑戦してください。

HTML/CSSだけを知っても
インタラクティブウェブ制作OK!

このレッスンは、HTMLとCSSに関する基本的な知識を持つ人々を対象に、実際のWebページをそのまま実装し、進行されます。


Step By Step!
今すぐ始めましょう。

Webページの制作に必要なjQueryの基礎から活用まで学ぶことができ、様々なライブラリやプラグインを活用して短時間で素敵でカラフルなWebページを制作できるよう、皆様をお手伝いいたします。

実務で必要なインタラクティブな要素で構成されたWebページ講義により、業務スキルと実務コアノウハウを一度に得ることができます。

実務は!スピード戦であり、スケーラビリティです。
作業時間内にすばやく、クオリティのプロジェクトを完了する方のみが実力あるデザイナー、パブリッシャーとして認められ、扱われます。

フォーメインサイトを一緒に作ってみながら、派手なウェブサイトも素早く制作していけるノウハウを身につけてみてください!


  1. HTML/CSSによる超簡易レイアウト作成法
  2. Transformを活用した様々なホバー効果
  3. スクロールによってデザインが変更されるヘッダー
  4. プラグインを活用したテキストアニメーション
  5. スクロールで進行するアニメーション
PC/Tablet/Mobile 機器別レスポンシブページビュー
開発者ツールの活用法


20年経歴の実務+講義ノウハウ
J.young

こんにちは? J.youngです。

20年間、Webデザイン&アプリ開発会社でデザインチーム総括でチームを運営しており、しっかり大学と学校および職業訓練機関でUIUXデザイン、ウェブデザイン、ウェブパブリッシャー、フロントエンド開発講義を行っています。デザインやコーディングの基礎が全くない学生を対象にウェブデザイナー/パブリッシャーなど専門家養成のため

  • 基礎から実務まで!
  • 実務で欲しい!
  • 実務ですぐに使えるポートフォリオ制作!

講義を進めて専門家として堂々と実務に進出できるよう指導しています。それだけ多くの弟子たちが現職デザイナーで、パブリッシャーでその力量を発揮しています。

  • Webデザイナーやパブリッシャーになりたいのにどこから始めるのか
  • 離職のための正規コース学園に通いたくても職場生活のために厳しくできない方
  • コーディングの「鼻」を知らない人
  • 学園やYouTubeなどでHTML/CSSの基礎は学んだが、導通ウェブサイト制作が他の話だった方々

オープンチャットルーム運営

よりスムーズな学習のために、J.youngが運営するよくあるウェブディーオープンチャットルームに加入すれば、
ピグマ、UI.UX、コーディング、ポートフォリオ製作関連の核蜂蜜チップと無料ウェビやリンクなどを共有いたします。

オープンチャットルーム:よく知られたウェブディ
コード:jyoung

実務キャリア

  • 2015~2017(株)エリエセル総括取締役
  • 2003~2015(株)アミュージングウェア総括取締役
  • 〜2003ソウ氏アンディデザイン実装

講義やその他のキャリア

  • 元気なウェブディYouTubeの運営中
  • 仁川文芸専門学校(マルチメディアウェブ講義)
  • ソウル現代職業専門学校(スマートウェブ/アプリ講義)
  • ポリテック大学(デザイン講義)
  • 韓国IT専門学校(マルチメディアデザイン講義)
  • タップ職業専門学校(デザイン講義)
  • 光明市女性ビジョンセンター(ウェブデザイン講義)
  • 今コンピュータ学園講義のブンダン店(デザイン講義)
  • ザ・ジョウンは、コンピュータアカデミーの瑞草店([ウェブデザイン機能士]デジタルウェブ&アプリデザイン - コース評価型資格-A)
  • 今DXアカデミー(江南店)(ピグマ、UIUX、フロントエンド講義)

こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTML / CSSの基礎はありますが、Webページの作成が恐れている人

  • Webデザイナー、パブリッシャーとして就職のために迅速にポートフォリオを制作したい人

  • Webで必要なjQueryソースを習得したい人

  • JavaScriptの基礎なしに実務で必要とするインタラクティブWebを簡単に実装したい人

  • 現在グラフィックデザイナーとしてフロントエンド開発者やパブリッシャーに転向したい方

  • ウェブデザイナーとして業務スキルを向上させたい方

  • スケーラビリティを考慮したインタラクティブWebを迅速に実装したい方

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

  • HTML/CSSの基礎

こんにちは
jyoungです。

9,798

受講生

427

受講レビュー

242

回答

4.8

講座評価

13

講座

こんにちは。

AI活用UIUXフルスタックデザインディレクターのJ.ヨンです。

私は20年以上にわたり、ウェブ・アプリサービスの企画、デザイン、開発の実務を経験しており、
現在はUIUXウェブ企画・デザイン・フロントエンドのブートキャンプ講師として活動しています。

実務経験を基に、これまで500人以上の受講生がデザインおよびIT分野へ就職できるようサポートしてきました。現在もAI時代に合わせた新しいポートフォリオ制作方法と実務スキルの教育に注力しています。



私の講義哲学は!

実務に即投入できるスキルの構築

単にツールの使い方を学ぶのではなく、企画からデザイン、開発、配布まで、実務と同じプロセスを経験しながら、現場ですぐに活用できる能力を身につけられるようサポートします。

現場が求める核心的なスキルの集中習得

急速に変化する採用市場で必要とされるAI活用能力、問題解決能力、協調性を中心に学習します。

就職につながるポートフォリオ制作

面接官が関心を持つようなプロジェクトとポートフォリオを作成することに集中します。


AI時代には、デザインだけでは不十分です。

これからは企画し、デザインし、実装し、デプロイまでできる
フルスタッククリエイター(Fullstack Creator)の能力が必要です。
デザインツールの基本活用能力 + Claude、Codex、Figmaを活用して実際のサービスを制作し、
AIと共に成果物を作る方法を経験していただきます。

- 何から始めればよいか分からず途方に暮れている方、
- ポートフォリオの競争力を高めたい方、
- AIを活用してより速く成長したい方であれば、私が皆さんの心強いガイドに
なります。

皆さんの成果物が完成する瞬間まで、共に歩んでまいります。

実務経歴

  • 2017~現在 | Digital Product Director & UX Consultant

  • 2015~2017 | Executive Director, EliEsel Inc.

  • 2003~2015 | Executive Director, Amusingware Inc.

  • 2003 | Head of Design, Seowoo C&D


講義経歴

  • 就職ポートフォリオ制作およびプロジェクトメンタリング

  • 企業出講および実務能力強化教育

  • 大学・企業・教育機関向けの実務講義

  • デザイン・開発ポートフォリオコンサルティングおよびグループメンタリング

  • 実務プロジェクトベースのチームコーチングおよびポートフォリオ指導

  • 企業在職者および就職準備生を対象とした実務教育

  • AIベースのUIUX・フロントエンド実務教育およびコンサルティング



    - 現) UIUX企画・デザイン・フロントエンド ブートキャンプ専任講師(Ezen DXアカデミー - 江南店)
    - デザイン・開発ポートフォリオ専門講義およびチームグループ講義


    * 運営中のYouTube(コーディングするデザイナー)

よりスムーズな学習のために、J.youngが運営する「チャルナンウェブディ」オープンチャットに参加していただければ、
講義に関する質問やポートフォリオに関するフィードバックを差し上げます。

- オープンチャット名:チャルナンウェブディ
- コード:jyoung

 

もっと見る

カリキュラム

全体

19件 ∙ (3時間 5分)

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

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

受講レビュー

全体

6件

4.8

6件の受講レビュー

  • hamto0net님의 프로필 이미지
    hamto0net

    受講レビュー 6

    平均評価 5.0

    5

    84% 受講後に作成

    きちんとした進捗と詳細な説明に従うのは簡単です。 良い講義をよく聞いていきます!

    • jyoung
      知識共有者

      chfhdvlclさん、ありがとうございます。本講義を活用してウェブサイトの制作に多くのお役に立てれば幸いです。大方サイトとミュージャインサイト講義も実務活用に多くの役に立つと思われます。もう一度応援いたします。ありがとうございます。 J.youngドリーム

  • skylove62557603님의 프로필 이미지
    skylove62557603

    受講レビュー 10

    平均評価 5.0

    5

    100% 受講後に作成

    先生のクローンコーディング講座は、まずデザインがとても 멋있게 作れるので、ポートフォリオを作る際にとても役に立つと思います。 実務に活用するにも良いですし、講義もサクサク進むので、飽きずに楽しめました。フィードバックも早いですし。 新しい講義がもっと出てほしいです~~

    • jyoung
      知識共有者

      カヒ様~~ 温かい受講レビューありがとうございます^^ 当面はオフライン授業のため、講義のアップロードが難しいかと思いますが、今年の後半からは 集中的に講義をアップロードする計画です。 その際もどうぞよろしくお願いいたします^^ ありがとうございます^^ ジェイ Youngより

  • pipinang145923님의 프로필 이미지
    pipinang145923

    受講レビュー 2

    平均評価 5.0

    5

    68% 受講後に作成

    説明も入念にしてくれてわかりやすく説明してくれて以上いいですよ~

    • jyoung
      知識共有者

      ルフィ様〜私はもっと感謝します。 絶えず良い講義でお会いしましょう。 ありがとうございます^^

  • 0alala님의 프로필 이미지
    0alala

    受講レビュー 4

    平均評価 5.0

    5

    100% 受講後に作成

    jヤングの講義だけが2つ聞きましたが、2つすべてとても満足していました!講師様がじっくり教えてくれて簡単にフォローでき、学んだことを元にすぐに実戦に応用できてよかったです!おかげで実力が本当にたくさん増えました。

    • jyoung
      知識共有者

      イェリ様受講評ありがとうございます。私の講義を2つも聞いてくれましたが、実力向上に多くの助けになってほしいです。本当にありがとうございます~~ いつも良い講義でお会いしましょう。 ありがとうございます^^ J.youngドリーム

  • ciel07272473님의 프로필 이미지
    ciel07272473

    受講レビュー 7

    平均評価 4.7

    5

    100% 受講後に作成

    ゆっくりとよく教えてください!

    • jyoung
      知識共有者

      ciel0727さん 受講評ありがとうございます~~ より良い講義でお会いしましょう〜 ありがとうございます^^ 継続的な熱工をお願いします〜 J.youngドリーム

jyoungの他の講座

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

似ている講座

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