강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Front-end

アップルのウェブサイトのインタラクションクローン!

アップルのウェブサイトによく登場する高度なインタラクション効果を最初から直接開発する方法を学ぶことができます。

  • studiomeal
Interactive Web
Clone Coding
JavaScript
SVG
HTML/CSS

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

こんなことが学べます

  • アップルのウェブサイトでよく使われる高度なインタラクション技術

  • 高解像度ビデオインタラクション

  • スクロールによるキーフレームと要素コントロール

  • 高解像度画像処理のためのキャンバス活用法

アップル製品紹介ページのように素晴らしいウェブインタラクション、
私の手で開発したいのなら? 🍎

Apple製品ページ
コア原理を直接実装 🏰

Appleの製品紹介ページは製品ごとにデザインと効果は少しずつ違いがありますが、インタラクションの核心原理は似ています。スクロールを細かく利用してさまざまなデザイン要素をコントロールしますが、まさにこんなアップル製品ページにあてはまるコアインタラクションの原理を理解し自分で作ってみる授業です。適用された効果を活用して、有機的にリンクされた完成したページを作成します。

Macbook Proの紹介ページ(クリック)

Airpods Proの紹介ページ(クリック)

最近、アップルで新製品が発売されると製品を見てみる味もありますが、今回の製品紹介ページはどれほど素敵か期待する楽しみがあるでしょう。特にウェブの方はみんな楽しんでいますか?


自分で実装した経験で
新しいものを作りましょう🧰

他の人が作ったものを持っていくことなく、コア原理を分析して直接一つ一つ実装する方法で進行するので、アップルとまったく異なる形やアイデアを実装するときにも大きな助けになると思います。
一生懸命頑張れば、難易度のある視覚実装に関わる開発にもっと自信を持てるはずです。

일분이

見ながら「こんなのはどうするの?」
「私も私のプロジェクトにこれを適用したい」
こういう考えをされる方のための授業です。


汗の汗

原理からちゃんと💡

学習内容

  • Webページスケルトンの作成
  • スクロールインタラクションの実装原理と実装実践
  • 高解像度ビデオインタラクションとスクロールアクションと連動
  • 位置とサイズ計算を用いたスクロールインタラクションの実施実習
  • よりスムーズに高画質ビデオを制御する
  • SVGアニメーションの作成

講義の特徴

👌原理を考え、標準のWeb技術だけを利用して床から一つずつ作ります。
👌 伸びないタイトなカット編集でも10時間以上、逃さず実習できるように細かく構成しました。
👌標準技術のみを使用しているため、時間が経っても変わらないしっかりした基本機を身につけることができます。


事前にお知らせします📌

  • CSSとJSの基本を知っていなければ、スムーズな学習が可能です。
  • CSSとJSの基礎整理が必要な場合は、私のYouTubeチャンネルの基礎整理画像で最初に勉強してください。
  • インタラクティブWeb開発の基礎知識をしっかり勉強できるインタラクティブWeb開発 適切に始める講義を先に受講してからこの授業を受けることをお勧めします。
  • EMCA 2015 (ES6) バージョンのスクリプトを使用します。
  • 完成したソースコードを提供します。

ボーナスコンテンツ追加ガイド

2020年9月に新しく発表したiPadエア紹介ページの新しいインタラクション効果を作るコードと講義映像が追加されました。

関連ロードマップ🚎

「Oh!」感嘆者が出てくるダイナミックなインタラクティブなウェブサイトを作りましょう。
1分コーディングのインタラクティブウェブサイトを作る
講義で構成されるロードマップです。
この講義を含む

こんな方に
おすすめです

学習対象は
誰でしょう?

  • アップルのウェブサイトのカラフルで素晴らしいインタラクションの実装方法が気になる方

  • クリエイティブあふれるインタラクティブウェブの実装に興味のある方

  • 特別なポートフォリオウェブサイトを作りたい方

  • ギャザイナー、デバルザへのロマンを持っている人

  • 普段1分コーディングの講義が良かった方

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

  • CSS、JavaScriptの基本知識

こんにちは
です。

19,374

受講生

1,236

受講レビュー

1,175

回答

5.0

講座評価

11

講座

서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.

カリキュラム

全体

60件 ∙ (11時間 55分)

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

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

受講レビュー

全体

223件

5.0

223件の受講レビュー

  • anminam님의 프로필 이미지
    anminam

    受講レビュー 8

    平均評価 5.0

    5

    93% 受講後に作成

    キョンガヌヌイの言葉をささげないでください、このAppleのウェブサイト川は韓国のイントレック川の中で簡潔ながらも素晴らしかったです。たとえアンツボンアニメーションとかケンバスとか早い難しいシューアップをこっそりと鎌湖邑、言い換えれば、律時間凌ぐ川沿いに揺れるというのが、これが簡単です。 私は舌のフログラマーであることはDOMを正しく知らず、シエシュエシュを脈動させるのにひどい困難があるが、1分コーディングは締め付けシナリョを通ってカンイクンチュロールをするのでシガニー銀製行ったのか分からない。 。ボッソはファンの方々もカン・イを通ってズ・ウンマルで一段階邑グレードをすることができる。イルケみことばをドリルシュがですよ。

    • studiomeal
      知識共有者

      ㅋㅋㅋㅋㅋㅋ minamさんはニックネームらしく膨らんでも真にふんだんに使っています…イルケみことばをドリルスイイですよ。 翻訳者でも絶対回すことはできませんが、どういう言葉なのかをすべて聞く魔法です。

  • andamirocll9612님의 프로필 이미지
    andamirocll9612

    受講レビュー 1

    平均評価 5.0

    5

    37% 受講後に作成

    ええと。 なんだ.. 面白い…

    • studiomeal
      知識共有者

      おもしろい。笑 初受講評、いい評価もありがとうございました^^

  • fortedev님의 프로필 이미지
    fortedev

    受講レビュー 1

    平均評価 3.0

    3

    35% 受講後に作成

    #ウェブデザインとインタラクションでは断然最高! #プログラマーの観点からは……? パブリッシャー業務を兼ねたいウェブデザイナーの方やデザインの方に近いパブリッシャーなら問題視されないかもしれませんが、 私のようにデザイン分野ではなく、フロントエンドからバックエンドにもっと親しみやすい優れたプログラマーを夢見ている方なら、コードを見ながら疑問を抱くことが多いです。私は個人的にこんな気がしました。 'コード構成がより簡潔になることはできないでしょうか' 'これは関数として扱うともっときれいになるでしょう...?' 'エン?これを数式で処理すると自動的に値が出ますが、1日が0.22と同じ数を入力する理由は何ですか? ##私のように変形しながらコーディングしないでください。 そのままコピーするのが精神健康に有利です。 1分コーディング様のコードをそのままコピーせずに少しずつ変形しながらコードを作成したところデバッグして死にそうです。 ㅠㅠ プログラミングに慣れていない学生を考慮しながらも十分に構造化されたコードを使っていたらどうだったかと思います。今のコードは読みやすさが落ちすぎてスパゲッティコードのようにちょっとひねっていて変形してコードチダがちょっと逃したら分析するのはかなり難しいコードだと思います。 しかし、誤解はしないでください。欠点はこれしかありません。残りはすべて良いです。傷つけることはありません。 概念を詳細にそして繊細に教えてくれます。絵で細かく教えてくれる点もいいですよ。理解も良くなり、講義の編集も思いやりにしてくれて退屈さも少なくなります。数多くの学生の中で、私と似たような学生もいるので、助けてくれと受講評を残します。コードを完全にコピーすると思い、私のように無駄なことを避けてください。

    • bucheongosok9525님의 프로필 이미지
      bucheongosok9525

      受講レビュー 1

      平均評価 5.0

      5

      93% 受講後に作成

      関数の動作原理、値を求め、その値を活用する方法、中途中のスクリプトマソードや変数作成時などの初心者が分からない部分をコックコック集めて教えてくれました。正直理解しにくい部分も多かったですが、自分でこれらのコーディングを継続的に繰り返し作成してみると、いつか私のものにすることができるような自信ができました! 非専攻者なのにこの講義をもとに私だけのポポールを作って就職準備をしてみます!ありがとう

      • studiomeal
        知識共有者

        うわー、詳しく役に立った部分を書いてくださると私にも助けがたくさんありますね^^ 本当に頑張って勉強しましたが受講坪まで素敵に書いてくださって本当にありがとうございます チャンギ様。素敵なポートフォリオを作って欲しいところに入社してほしい!

    • zxho251786님의 프로필 이미지
      zxho251786

      受講レビュー 3

      平均評価 4.7

      5

      95% 受講後に作成

      コーディングだけでなく、絵や材料を活用した不演説明まで! 単純なコードではなく、そのプログラミングを進める概念と設計を教えてくれる非常に有益な講義です!

      • studiomeal
        知識共有者

        難易度が少しある講義なので、できるだけ理解しやすく努力してみましたが、その部分を知っていただき、良い受講評も残していただきありがとうございます^^

    ¥9,036

    studiomealの他の講座

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

    似ている講座

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