inflearn logo
inflearn logo

本当!ウェブサイト制作! Step By Step! (「フォーメイン」_フルページサイト制作)

本番! ウェブサイト制作 Step By Step! フォーメイン(https://www.phomein.com/brand/main/main.do) 、実装してみる過程で複雑なレイアウトも簡単かつ迅速に制作する実務コアノウハウをそのままお知らせします^^

難易度 初級

受講期間 無制限

HTML/CSS
HTML/CSS
Interactive Web
Interactive Web
Clone Coding
Clone Coding
jQuery
jQuery
HTML/CSS
HTML/CSS
Interactive Web
Interactive Web
Clone Coding
Clone Coding
jQuery
jQuery
날개 달린 동전

講座 を紹介して、成長と収益を得ましょう!

날개 달린 동전

マーケティングパートナーズ

講座 を紹介して、成長と収益を得ましょう!

受講後に得られること

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

  • フルページスクロールレイアウトの作り方!

  • デプスのあるGNBナビゲーションの制作方法!

  • 数字カウントアップの作り方!

  • アニメーションが入ったイメージスライドの作り方!

  • 様々なスクロールアニメーションの作り方!

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

HTMLタグとCSSプロパティは知っていますが、
レイアウト制作は他人の話ですか?

発売されているウェブレイアウトをそのまま製作することで本番のウェブサイトレイアウトを製作できます!


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

  • このレッスンでは、HTMLとCSSに関する基本的な知識を持つ方を対象に、実際のWebページをそのまま実装して進行されます。
    • HTMLマークアップ、CSSデザインの基本的なカット!
    • 本当!レイアウト制作の様々な例を取り上げることで、レイアウト制作に自信と興味UP!
    • クローンコーディングレイアウトまで挑戦してみてください!


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

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

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

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

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


  1. 実務に適したhtmlとcssを用いた正確なレイアウト制作方法
  2. フルページスクロールレイアウトの作成方法
  3. Depth GNBネイトの作り方
  4. 数値カウントアップの作成方法
  5. さまざまなスクロール時に進行するアニメーション
  6. アニメーションが入った画像スライドの作り方

実際の例が気になったら?

フルページレイアウト
画像スライド
GNBナビゲーション
Fullpageナビゲーション

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

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

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

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

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

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

J.youngがお手伝いします!

また、学習していただきたいことがありましたら、コメントを残していただければ、お役に立てる答えをお寄せいただくよう最善を尽くします。

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

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

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

実務キャリア

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

講義やその他のキャリア

  • 元気なウェブディYouTubeの運営中
  • 仁川文芸専門学校(マルチメディアウェブ講義)
  • ソウル現代職業専門学校(スマートウェブ/アプリ講義)
  • ポリテック大学(デザイン講義)
  • 韓国IT専門学校(マルチメディアデザイン講義)
  • タップ職業専門学校(デザイン講義)
  • 光明市女性ビジョンセンター(ウェブデザイン講義)
  • 今コンピュータ学園講義のブンダン店(デザイン講義)
  • ザ・ジョウンは、コンピュータアカデミーの瑞草店([ウェブデザイン機能士]デジタルウェブ&アプリデザイン - コース評価型資格-A)
  • ハイメディアコンピュータ学院の序点(映像を活用したUI/UX Webデザイン&Webパブリッシング)

こんな方に
おすすめです

学習対象は
誰でしょう?

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

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

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

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

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

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

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

こんにちは
jyoungです。

9,110

受講生

367

受講レビュー

227

回答

4.8

講座評価

14

講座

「デザイン・開発ポートフォリオメンターのJ.Youngです。」

私は過去20年間にわたり、ウェブデザインおよびアプリ開発会社を運営しながら、現場の厳しさを身をもって経験してきました。その経験を活かし、現在は大学や専門教育機関でUI/UXデザインからフロントエンド開発まで、後進の専門家育成に邁進しています。

私の講義哲学は明確です。

  1. 基礎から実務まで 滞りのない繋がり

  2. 現場が求める核心技術の凝縮

  3. 就職成功を導く実務型ポートフォリオの完成

何から始めればいいか分からず途方に暮れている方、転職を夢見ているものの時間が足りない社会人の方、そしてコーディングが自分とは無縁の話に感じられる初心者の方まで。私が歩んできた20年の道のりを、皆さんの近道へと変えて差し上げます。堂々と実務家として立てるその日まで、皆さんの心強い教育係(サス)となり、最善を尽くしてサポートいたします。

J.youngがお手伝いいたします!!
また!!学習中にご不明な点がございましたら、コメントを残していただければ
お役に立てるよう最善を尽くして回答させていただきます。

実務経歴

- 2017~現在) Web開発ディレクター
- 2015年~2017年 (株)エリエゼル 総括理事
- 2003年~2015年 (株)アミュージングウェア 総括理事
- 2003年: ソウC&D デザイン室長


- 現)
- UIUXウェブ企画/デザイン/フロントエンド ブートキャンプ講師(Ezen DXアカデミー -瑞草店)
- デザイン・開発ポートフォリオ専門講義およびグループ・個人指導


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

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

- オープンチャット名:잘난웹디
- コード:jyoung

 

もっと見る

カリキュラム

全体

16件 ∙ (2時間 31分)

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

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

受講レビュー

全体

4件

3.5

4件の受講レビュー

  • joofeel00005834님의 프로필 이미지
    joofeel00005834

    受講レビュー 1

    平均評価 5.0

    5

    50% 受講後に作成

    いいですね。

    • jyoung
      知識共有者

      主必規の受講評価ありがとうございます。 熱いです。 インタラクティブなウェブ制作ができる実力を育ててくれて応援します。 ありがとうございます〜 J.youngドリーム

    • jyoung
      知識共有者

      ジュピルギュ様受講評価ありがとうございます。 フォーメインを完読していただければ、ミュージャインと対戦インタラクティブウェブを強調します。 レイアウトボックス構造の理解と レスポンシブウェブ、 インタラクティブWebを作成するのに役立ちます。 と思われます。 熱気です〜〜 ありがとうございます^^ J.youngドリーム

  • office1895님의 프로필 이미지
    office1895

    受講レビュー 1

    平均評価 3.0

    3

    100% 受講後に作成

    ライブラリの内容とダウンして適用する方法をもう少し説明していただければ幸いです。 (slick と fullpage)ライブラリの説明は添付されているファイルと少しの説明で終わりや残念がたくさん残ります。 講義は早くするために言うたびにタムを編集して速い感がありますが、倍速を遅くすればとても合うことができます。 それでも fullpage と transition の使用はコードがシンプルになっており、使いやすくなります。 そして、完成しているファイルではなく、ライブラリだけが追加されているファイルがあったら、コードをたどるのにはるかにきれいだったようです。 良い講義ありがとうございます。

    • gudghk07212222님의 프로필 이미지
      gudghk07212222

      受講レビュー 1

      平均評価 3.0

      3

      50% 受講後に作成

      スピードが速すぎてただフォローして忙しいです... ビデオをすばやく編集したかどうかわかりませんが、話が終わる前に別の言葉が続きます。プレイして.. 0.75倍速にしても早いです。 スリックスライダーやフルページの説明も少し不足しているようですが、よく理解できません。聞いてはいけないと思います。

      • hyeree19930226님의 프로필 이미지
        hyeree19930226

        受講レビュー 1

        平均評価 3.0

        3

        100% 受講後に作成

        講義はいいですね:) モバイル画面ではないのが少し残念です。そして講義は少し速いですㅠㅜ

        • jyoung
          知識共有者

          HYEREE AHNさん〜 本フォーメイン講座は、フルページ制作の方法と、カウントアップ、アクティブ時に行われるアニメーション、GNB MenuBarなどをお知らせするために制作された講義です。 反応型を勉強したい場合は、助けるアプリケーションやミューザイン講義を聞けばいいですし、そして映像は退屈をなくすためにわざわざ素早く編集しました。 今日も良い一日を過ごしてください〜J.young夢

      jyoungの他の講座

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

      似ている講座

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

      ¥3,849