Inflearn brand logo image
Inflearn brand logo image

N

Inflearn brand logo image
Programming

/

Web Development

映画前売りサイトを作る：デザイン編

ウェブ標準とレスポンシブサイト作り講義によく従ってきたら今は実戦練習番！映画前売サイト制作をデザイン編とコーディング編に分けて学習します。

（4.9）受講レビュー 7件

受講生 1,125名

  • webs
example
Photoshop
Responsive Web
Thumbnail

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

こんなことが学べます

  • Photoshopを活用してサイトをデザインする

  • レスポンシブウェブサイトの作成

  • プラグインを活用して画像スライドを作成する

  • APIをインポートしてビデオを表示する

  • JavaScriptで機能を実装する

模倣とするパブリッシング実習！
デザインを通じてサイト構造を身につけます🎨

Webパブリッシャーの夢の木のための講義✏️

実際のウェブサイトに沿って見るパブリッシング実習、1編！

この講義は、映画前売りサイトをデザイン編、コーディング編に分けて進める授業です。メガボックスの旧バージョンページに従って作ってみます。本編ではPhotoshopでメガボックスサイトをデザインし、コーディング編でパブリッシングする手順です。自分でデザインをしてみると、サイトの構造がどのようになっているのかを把握しやすくなります。デザイン講義をしたくない方はコーディング編から受講しても関係ありません。

頑強に向かって！皆さんの熱工を応援します。

📢受講時の参考資料のご案内

Webパブリッシャードリームロードマップ🌲

*各画像をクリックすると、その講義ページに移動します。

1. [Webパブリッシング実習] Web標準サイトの作成

サイトの作り方についての感覚を捉えることができる講義です。

2. [ウェブパブリッシング実習] レスポンシブサイトの作成

Web環境に応じて自由自在にスクリーンサイズを変更するレスポンシブWebを製作します。

3. 映画前売りサイト作り: デザイン編現在講義

今は本番だ！映画前売サイト制作第1弾、デザイン編です。

4. 映画前売りサイトの作成: コーディング編

今は本番だ！映画前売サイト制作第2弾、コーディング編です。

予想される質問 Q&A 💬

Q.非専攻者も聞ける講義ですか？

はい！基礎的な内容を扱う講義なので、初めて学ぶ方も十分に聞くことができます。

Q.講義を聞く前に準備すべきことはありますか？

Photoshopとあなたの情熱だけを準備してください。^^

Q.授業内容をどのレベルまで扱いますか？

本編はデザインレッスンでPhotoshopを全く知らなくてもフォローできるレベルです。^^

こんな方に
おすすめです

学習対象は
誰でしょう？

  • グリッドやヘッダー、フッター、バナーまで様々なレイアウトを反応型で制作したい方

  • 実際にあるサイトに沿って作ってみて、Web UI/UXのデザイン感を身につけたい方

  • Webパブリッシャー職務を希望する方

  • ウェブサイトを最初から一つ一つフォローして作りたい方

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

  • Web標準サイトの作成(オプション)

  • レスポンシブウェブサイトの作成(オプション)

こんにちは
です。

7,299

受講生

95

受講レビュー

1

回答

4.9

講座評価

4

講座

안녕하세요! 🧑🏻‍💻

웹에 관심이 많고, 강의를 하고있는 
웹 스토리보이입니다.

유튜브 채널 Webstoryboy에서 
여러가지 강의를 제작합니다.

포기하지 않고 마지막 강의 까지 저와 함께 하나 하나씩 잘 따라와주면
웹 퍼블리셔에 한 발짝 더 다가가실 수 있을 거예요. 꼭 직접 해보셔야 실력이 늘 것입니다.

어렵거나 틀려서 잘 안 된다고, 모르겠다고 포기하시면 다른 사이트 만들 때도 힘이 들겠죠?
따라하시다가 틀리거나 안 되는게 있으시면 본인이 코딩한 것과 제 강의 소스를 비교하시면서

스스로 어디가 틀렸는지 찾아보세요. 그것 또한 공부가 될 거랍니다 🧚🏻‍♀️
오늘도 여러분의 열공을 응원하며, 화이팅입니다!

カリキュラム

全体

24件 ∙ (8時間 13分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

7件

4.9

7件の受講レビュー

  • jjhgwx님의 프로필 이미지
    jjhgwx

    受講レビュー 495

    ∙

    平均評価 4.8

    5

    13% 受講後に作成

    Cảm ơn vì bài giảng hay!

    • camorra0421님의 프로필 이미지
      camorra0421

      受講レビュー 24

      ∙

      平均評価 4.5

      4

      100% 受講後に作成

      Phải mất thời gian để học bằng cách làm theo từng cái một, nhưng tôi đã học được rất nhiều.

      • hyongsu44님의 프로필 이미지
        hyongsu44

        受講レビュー 868

        ∙

        平均評価 5.0

        5

        100% 受講後に作成

        Cảm ơn bạn vì bài giảng. Nhờ có bạn mà tôi nghĩ mình đã có được rất nhiều kiến ​​thức để phát triển front-end. Tôi vẫn còn nhiều điều phải học và cần tích lũy kinh nghiệm, nhưng nó đã giúp ích cho tôi rất nhiều. Hãy luôn chăm sóc sức khỏe của bạn.

        • sunburst773181님의 프로필 이미지
          sunburst773181

          受講レビュー 11

          ∙

          平均評価 5.0

          5

          100% 受講後に作成

          Cảm ơn Nó rất hữu ích trong việc tìm ra cách thiết kế theo kích thước!

          • capybara님의 프로필 이미지
            capybara

            受講レビュー 8

            ∙

            平均評価 5.0

            5

            8% 受講後に作成

            Tôi đã có một thời gian vui vẻ.

            無料

            websの他の講座

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

            Tạo trang web bán vé xem phim: Lập trình강의 썸네일

            Tạo trang web bán vé xem phim: Lập trình

            webs

            Nếu bạn đã theo dõi các bài giảng về tiêu chuẩn web và cách tạo trang web đáp ứng, thì giờ là lúc thực hành thực tế! Chúng ta sẽ tìm hiểu cách tạo một trang web đặt trước phim bằng cách chia nó thành phần thiết kế và phần mã hóa.

            초급

            초급

            Responsive Web

            Tạo trang web bán vé xem phim: Lập trình강의 썸네일

            Tạo trang web bán vé xem phim: Lập trình

            webs

            [Thực hành xuất bản web] Tạo một trang web phản hồi강의 썸네일

            [Thực hành xuất bản web] Tạo một trang web phản hồi

            webs

            Hãy tạo một trang web đáp ứng có thể tự do thay đổi kích thước màn hình tùy thuộc vào môi trường thiết bị di động, máy tính bảng và web.

            초급

            초급

            Responsive Web

            [Thực hành xuất bản web] Tạo một trang web phản hồi강의 썸네일

            [Thực hành xuất bản web] Tạo một trang web phản hồi

            webs

            [Thực hành xuất bản web] Tạo một trang web chuẩn강의 썸네일

            [Thực hành xuất bản web] Tạo một trang web chuẩn

            webs

            Nếu bạn định làm được thì hãy làm cho đúng! Đây là khóa học xuất bản được tạo tuân thủ các tiêu chuẩn web chính thức🧑🏻‍💻

            입문

            입문

            HTML/CSS

            [Thực hành xuất bản web] Tạo một trang web chuẩn강의 썸네일

            [Thực hành xuất bản web] Tạo một trang web chuẩn

            webs

            似ている講座

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

            Tạo trang web bán vé xem phim: Lập trình강의 썸네일

            Tạo trang web bán vé xem phim: Lập trình

            webs

            Nếu bạn đã theo dõi các bài giảng về tiêu chuẩn web và cách tạo trang web đáp ứng, thì giờ là lúc thực hành thực tế! Chúng ta sẽ tìm hiểu cách tạo một trang web đặt trước phim bằng cách chia nó thành phần thiết kế và phần mã hóa.

            초급

            초급

            Responsive Web

            Tạo trang web bán vé xem phim: Lập trình강의 썸네일

            Tạo trang web bán vé xem phim: Lập trình

            webs

            Keyshot nhập môn • sơ cấp : Keyshot rendering & hậu kỳ cho hình ảnh sản phẩm cực kỳ chân thực Part.1강의 썸네일

            Keyshot nhập môn • sơ cấp : Keyshot rendering & hậu kỳ cho hình ảnh sản phẩm cực kỳ chân thực Part.1

            soos

            Nói KHÔNG với những hình ảnh phi thực tế, trông như đồ chơi! Tôi sẽ tận tình chia sẻ bí quyết cao cấp về render sản phẩm siêu thực!

            입문

            입문

            KeyShot, 3d-modelling, 3d-rendering

            Keyshot nhập môn • sơ cấp : Keyshot rendering & hậu kỳ cho hình ảnh sản phẩm cực kỳ chân thực Part.1강의 썸네일

            Keyshot nhập môn • sơ cấp : Keyshot rendering & hậu kỳ cho hình ảnh sản phẩm cực kỳ chân thực Part.1

            soos

            [Chân lợn ảo] Từ thiết kế đến viết mã강의 썸네일

            [Chân lợn ảo] Từ thiết kế đến viết mã

            dunopi

            Chân lợn ngon thật đấy~ Chân lợn thời nay không đùa được đâu...nuốt nước miếng

            초급

            초급

            Photoshop, HTML/CSS, Clone Coding

            [Chân lợn ảo] Từ thiết kế đến viết mã강의 썸네일

            [Chân lợn ảo] Từ thiết kế đến viết mã

            dunopi

            Tạo trang web phản hồi bằng BOOTSTRAP3강의 썸네일

            Tạo trang web phản hồi bằng BOOTSTRAP3

            usefulit

            Đây là bài giảng về cách sử dụng Bootstrap để tạo một trang web phản hồi có bố cục thay đổi tùy theo thiết bị.

            초급

            초급

            Bootstrap, Responsive Web

            Tạo trang web phản hồi bằng BOOTSTRAP3강의 썸네일

            Tạo trang web phản hồi bằng BOOTSTRAP3

            usefulit

            Photoshop CC 2021 Đào tạo các chức năng thực tế quan trọng từ cơ bản mà ngay cả người mới bắt đầu cũng có thể dễ dàng học강의 썸네일

            Photoshop CC 2021 Đào tạo các chức năng thực tế quan trọng từ cơ bản mà ngay cả người mới bắt đầu cũng có thể dễ dàng học

            comt

            Tìm hiểu lý do tại sao bạn cần học Photoshop và tìm hiểu chi tiết các chức năng khác nhau cần thiết để chỉnh sửa hình ảnh, chẳng hạn như menu, công cụ, bảng, bảng màu và bộ lọc.

            입문

            입문

            Photoshop

            Photoshop CC 2021 Đào tạo các chức năng thực tế quan trọng từ cơ bản mà ngay cả người mới bắt đầu cũng có thể dễ dàng học강의 썸네일

            Photoshop CC 2021 Đào tạo các chức năng thực tế quan trọng từ cơ bản mà ngay cả người mới bắt đầu cũng có thể dễ dàng học

            comt

            Đào tạo thực hành kỹ thuật viên thiết kế web (phiên bản thiết kế)강의 썸네일

            Đào tạo thực hành kỹ thuật viên thiết kế web (phiên bản thiết kế)

            dunopi

            Đây là lớp dành cho kỹ thuật viên thiết kế web (design). Nếu bạn thử nó một vài lần, bạn sẽ có thể làm theo nó mà không gặp khó khăn gì. Tuy nhiên, bạn phải biết sử dụng Photoshop.

            초급

            초급

            Photoshop

            Đào tạo thực hành kỹ thuật viên thiết kế web (phiên bản thiết kế)강의 썸네일

            Đào tạo thực hành kỹ thuật viên thiết kế web (phiên bản thiết kế)

            dunopi

            Bài học Photoshop cơ bản trong 2 giờ강의 썸네일

            Bài học Photoshop cơ bản trong 2 giờ

            hclass

            Khóa học này giúp bạn trở nên hứng thú với việc học thiết kế bằng cách học các công cụ cơ bản của Photoshop và một số bài tập ví dụ.

            입문

            입문

            Photoshop

            Bài học Photoshop cơ bản trong 2 giờ강의 썸네일

            Bài học Photoshop cơ bản trong 2 giờ

            hclass

            [Thực hành xuất bản web] Tạo một trang web phản hồi강의 썸네일

            [Thực hành xuất bản web] Tạo một trang web phản hồi

            webs

            Hãy tạo một trang web đáp ứng có thể tự do thay đổi kích thước màn hình tùy thuộc vào môi trường thiết bị di động, máy tính bảng và web.

            초급

            초급

            Responsive Web

            [Thực hành xuất bản web] Tạo một trang web phản hồi강의 썸네일

            [Thực hành xuất bản web] Tạo một trang web phản hồi

            webs

            KeyShot Trung cấp/Nâng cao: Kết xuất KeyShot & Xử lý hậu kỳ cho hình ảnh sản phẩm siêu thực Phần 2강의 썸네일

            KeyShot Trung cấp/Nâng cao: Kết xuất KeyShot & Xử lý hậu kỳ cho hình ảnh sản phẩm siêu thực Phần 2

            soos

            Quá trình kết xuất siêu thực để cải thiện kỹ năng thực tế! Kisat & Ứng viên Bí quyết Trung cấp/Nâng cao! Tôi sẽ vui lòng cho bạn biết 😀

            중급이상

            중급이상

            KeyShot, 3d-modelling, 3d-rendering

            KeyShot Trung cấp/Nâng cao: Kết xuất KeyShot & Xử lý hậu kỳ cho hình ảnh sản phẩm siêu thực Phần 2강의 썸네일

            KeyShot Trung cấp/Nâng cao: Kết xuất KeyShot & Xử lý hậu kỳ cho hình ảnh sản phẩm siêu thực Phần 2

            soos

            Lớp học chuyên sâu Midjourney, thực hành thiết kế AI từ tạo bằng Midjourney đến hoàn thiện bằng Photoshop강의 썸네일

            Lớp học chuyên sâu Midjourney, thực hành thiết kế AI từ tạo bằng Midjourney đến hoàn thiện bằng Photoshop

            masocampus

            Lớp học về bí quyết thiết kế AI để tạo ra những tác phẩm có độ hoàn thiện cao Bắt đầu thiết kế ngay với Midjourney & Photoshop mà ai cũng có thể sử dụng

            초급

            초급

            Photoshop, Midjourney

            Lớp học chuyên sâu Midjourney, thực hành thiết kế AI từ tạo bằng Midjourney đến hoàn thiện bằng Photoshop강의 썸네일

            Lớp học chuyên sâu Midjourney, thực hành thiết kế AI từ tạo bằng Midjourney đến hoàn thiện bằng Photoshop

            masocampus

            Xây dựng web responsive chỉ với html/css/js thuần túy [Phần thực hành] Bootcamp강의 썸네일

            Xây dựng web responsive chỉ với html/css/js thuần túy [Phần thực hành] Bootcamp

            youngcodikimssam

            Đây là buổi học thực hành của khóa học tạo trang web responsive có thể triển khai nhiều layout khác nhau cho từng thiết bị chỉ bằng html/css/js thuần túy mà không cần sử dụng BOOTSTRAP (phiên bản mới nhất năm 2024).

            초급

            초급

            HTML/CSS, Responsive Web, Interactive Web

            Xây dựng web responsive chỉ với html/css/js thuần túy [Phần thực hành] Bootcamp강의 썸네일

            Xây dựng web responsive chỉ với html/css/js thuần túy [Phần thực hành] Bootcamp

            youngcodikimssam

            Sử dụng Bootstrap để tạo trang web phản hồi [Phần khái niệm cơ bản] Bootcamp강의 썸네일

            Sử dụng Bootstrap để tạo trang web phản hồi [Phần khái niệm cơ bản] Bootcamp

            youngcodikimssam

            Đây là bài giảng về cách sử dụng Bootstrap để tạo trang web phản hồi, tức là trang web có bố cục thay đổi tùy theo thiết bị. [Phiên bản sửa đổi]

            초급

            초급

            Bootstrap, Responsive Web, Web Design

            Sử dụng Bootstrap để tạo trang web phản hồi [Phần khái niệm cơ bản] Bootcamp강의 썸네일

            Sử dụng Bootstrap để tạo trang web phản hồi [Phần khái niệm cơ bản] Bootcamp

            youngcodikimssam

            Lớp học thiết kế UI Figma từ cơ bản đến thực tế - Học đúng cách từ nền tảng강의 썸네일

            Lớp học thiết kế UI Figma từ cơ bản đến thực tế - Học đúng cách từ nền tảng

            boldux

            Từ cơ bản đến thực tế, lớp học UI Design toàn diện hoàn thành mọi thứ chỉ với Figma! Từ các tính năng cốt lõi như Auto Layout·Component đến thiết kế responsive, handoff hiệu quả, và cả collaboration - bạn sẽ hoàn toàn thành thạo các kỹ năng thực tế. Hãy bắt đầu ngay bây giờ và nâng cấp năng lực thiết kế của bạn lên một tầm cao mới!

            입문

            입문

            Web Design, Prototyping, Figma

            Lớp học thiết kế UI Figma từ cơ bản đến thực tế - Học đúng cách từ nền tảng강의 썸네일

            Lớp học thiết kế UI Figma từ cơ bản đến thực tế - Học đúng cách từ nền tảng

            boldux

            Khóa học thiết kế biểu tượng cảm xúc Kakao강의 썸네일

            Khóa học thiết kế biểu tượng cảm xúc Kakao

            softcampus

            Giảng viên Kim Young-sam, người đang hoạt động với tư cách là người viết biểu tượng cảm xúc tại Kakao và Line, đã tổng hợp tất cả kinh nghiệm của mình từ việc thiết kế biểu tượng cảm xúc đến tạo biểu tượng cảm xúc cho KakaoTalk và Line và kiếm lợi nhuận thông qua các bài giảng của mình.

            초급

            초급

            emoticon, Photoshop, Character Design

            Khóa học thiết kế biểu tượng cảm xúc Kakao강의 썸네일

            Khóa học thiết kế biểu tượng cảm xúc Kakao

            softcampus

            Tailwind CSS tạo ra phong cách UI web tuyệt đẹp강의 썸네일

            Tailwind CSS tạo ra phong cách UI web tuyệt đẹp

            codingworks

            [Kiểu dáng UI web tuyệt đẹp bằng Tailwind CSS] khóa học hiện đang trình bày đầy đủ Tailwind CSS v3.4.1, một trong những framework hot nhất hiện nay, từ lý thuyết đến trang web phản hồi thực tế trong 19 giờ. Khóa học không phải là tốt chỉ vì thời lượng dài. Nhưng chúng tôi tự tin rằng khóa học này là khóa học dài nhưng vẫn tuyệt vời. Đặc biệt, khóa học trình bày chi tiết tất cả lý thuyết của Tailwind CSS trong 8 giờ 30 phút, vì vậy những người thiếu lý thuyết CSS có thể học lý thuyết CSS một cách đầy đủ. Khóa học này được thiết kế tập trung vào kiểu dáng Tailwind CSS do các nhà phát triển và nhà xuất bản tạo ra.

            초급

            초급

            TailwindCSS, Responsive Web, HTML/CSS

            Tailwind CSS tạo ra phong cách UI web tuyệt đẹp강의 썸네일

            Tailwind CSS tạo ra phong cách UI web tuyệt đẹp

            codingworks

            Thiết kế biểu tượng cảm xúc ai cũng có thể làm được Phần 1강의 썸네일

            Thiết kế biểu tượng cảm xúc ai cũng có thể làm được Phần 1

            usefulit

            Cách tạo biểu tượng cảm xúc có thể giúp ngay cả người mới bắt đầu cũng trở thành chuyên gia

            입문

            입문

            emoticon, Photoshop, Character Design

            Thiết kế biểu tượng cảm xúc ai cũng có thể làm được Phần 1강의 썸네일

            Thiết kế biểu tượng cảm xúc ai cũng có thể làm được Phần 1

            usefulit

            Học Photoshop 2025 mới nhất cho người mới bắt đầu trong 1 giờ강의 썸네일

            Học Photoshop 2025 mới nhất cho người mới bắt đầu trong 1 giờ

            yeseong0412

            Tôi sẽ hướng dẫn bạn cách sử dụng cơ bản Photoshop trong 1 giờ

            입문

            입문

            Photoshop, Photography, adobe

            Học Photoshop 2025 mới nhất cho người mới bắt đầu trong 1 giờ강의 썸네일

            Học Photoshop 2025 mới nhất cho người mới bắt đầu trong 1 giờ

            yeseong0412

            Photoshop thiết kế để quản lý kênh YouTube của Woody강의 썸네일

            Photoshop thiết kế để quản lý kênh YouTube của Woody

            rollstory

            Bạn muốn học thiết kế? “Tại sao phải đi học thêm? Hãy tự học cùng Woody!” Bạn có thấy hữu ích không? Vậy thì hãy ủng hộ Woody bằng cách đăng ký, thích và nhấn nút thông báo nhé 😍 Cho đến ngày bạn trở thành một nhà thiết kế thực thụ, Rolls Story Design Institute sẽ luôn đồng hành cùng bạn :)

            입문

            입문

            Photoshop, Youtube Creator

            Photoshop thiết kế để quản lý kênh YouTube của Woody강의 썸네일

            Photoshop thiết kế để quản lý kênh YouTube của Woody

            rollstory

            Trong thực tế! Tạo trang web! Từng bước một! ('Chế độ Cruala'_Sản xuất web đáp ứng)

            jyoung

            Trong thực tế! Tạo trang web từng bước! Đây là quá trình tạo trang chính của Crew Alamode (https://crewalamode.com/). Thông qua quá trình tạo và triển khai trang web tương tác tuyệt đẹp có trong trang web, chúng tôi sẽ dạy cho bạn bí quyết thực tế cốt lõi để tạo các bố cục phức tạp một cách dễ dàng và nhanh chóng.

            초급

            초급

            Responsive Web, jQuery, HTML/CSS

            Trong thực tế! Tạo trang web! Từng bước một! ('Chế độ Cruala'_Sản xuất web đáp ứng)

            jyoung

            Web đáp ứng giúp bạn dễ dàng tìm hiểu và tạo danh mục đầu tư! #Sulwhasoo강의 썸네일

            Web đáp ứng giúp bạn dễ dàng tìm hiểu và tạo danh mục đầu tư! #Sulwhasoo

            lizb

            Danh mục thực hành web đáp ứng được thực hiện dễ dàng! Danh mục #Sulwhasoo

            초급

            초급

            HTML/CSS, Responsive Web, Clone Coding

            Web đáp ứng giúp bạn dễ dàng tìm hiểu và tạo danh mục đầu tư! #Sulwhasoo강의 썸네일

            Web đáp ứng giúp bạn dễ dàng tìm hiểu và tạo danh mục đầu tư! #Sulwhasoo

            lizb