inflearn logo
知識共有
inflearn logo

モバイルウェブ制作入門:Figmaデザインを完璧に実装する(Javascript付き)

ウェブ開発の第一歩を踏み出しましたか?HTML、CSS、JavaScriptを始めたばかりの方に特別なご提案です! モバイル時代に合わせてモバイルウェブサイトを作りたいけれど、どこから始めればいいか迷っていませんか?ご心配はいりません。 Figmaモバイルデザインを直接分析し実装しながら、自然にレスポンシブウェブ開発の核心を学んでみましょう。洗練されたモバイルデザインを基に、ユーザーの心を掴む繊細なインタラクションから、様々な画面サイズに完璧に適応する技術まで、全てを一緒に学んでいくことができます。 さあ、あなたのウェブサイトが全てのデバイスで輝くように、ノウハウを共有します。一緒に始めてみませんか?

難易度 初級

受講期間 無制限

Figma
Figma
HTML/CSS
HTML/CSS
JavaScript
JavaScript
Web Design
Web Design
Mobile App Design
Mobile App Design
Figma
Figma
HTML/CSS
HTML/CSS
JavaScript
JavaScript
Web Design
Web Design
Mobile App Design
Mobile App Design

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

5.0

5.0

박인정

33% 受講後に作成

本当に有益な講義ですね。ついていくのにも体力が必要です。前の講義は忘れてしまうのですが、機会があれば反復学習をしなければならないですね^^

受講後に得られること

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

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

  • CSS変数およびグローバルスタイルの作成

  • Webフォントの使用設定

  • レイアウト設計:GridとFlexboxを活用する

  • 適応型CSSを実装する

  • Swiper.jsを活用したメインスライドの作成

  • Javascriptを活用したAsideメニューナビゲーション

  • JavaScript を活用した商品数の修正

  • JavaScriptを活用してグリッドビューを変更する

Figma デザインを参照して HTML/CSS、Javascript を活用してモバイルウェブサイトを実装します。モバイルデザインを分析して、メンテナンスが容易なWebサイトを実装してください。

このコースは、HTML、CSS、Javascriptの基礎があれば、もっと望むように学ぶことができます。

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

本講義は就業用ポートフォリオ製作をコンセプトとしています。

このコースでは、モバイル専用のウェブサイトを作成するプロセスを紹介します。

完成したウェブページをパソコンで接続したときは、モバイルモックアップの中にページを閉じ込めて見せてくれます。このときjavacriptを利用して接続した機器がモバイル機器かどうかを把握します。

。

実務ではこのようにモバイルモックアップを作らずに画面全体を活用したり、レスポンシブに実装します。レスポンシブWebページの実装が気になる場合は、https: //inf.run/CZ1az講義を参照してください。

接続した機器がモバイルであれば、モックアップは消えてコンテンツのみ該当機器に合わせて最適化して見せる適応型モバイルウェブサイトの実装方法を紹介します。

完成本のファイル構造です。

PCで接続するとルートフォルダのindex.htmlがオープンしてモバイルモックアップに内容を見せ、モバイルで接続するとルートフォルダではなくmobileフォルダ内index.htmlで接続されるように実装します。

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

    • Export Original Images

    • Photoroom - AI and Background Remove

    • Font Scanner

参照する Figma デザイン

Figmaのデザインを参照して、以下のページを完成させます。

  • イントロページ

  • ログイン - 会員登録の選択ページ

  • ログイン

  • 会員登録

  • 商品ホーム

  • 商品詳細ページ

  • カート

  • マイページ

主な学習内容を紹介します。

📒イントロページ

モバイルデバイスを検出する

javasciptを活用してユーザーのデバイスを区別する方法を学び、デバイスに応じてモックアップまたはモバイル専用ページに移動します。このとき、ユーザーが使用しているブラウザの固有属性navigator.userAgent の値を確認して区別する方法を学習します。

Swiper JSパラメータの活用

最も広く使用されている代表的なjavascriptライブラリであるswiper.jsを活用して自動スライドを実装し、基本的に円形で提供されるページャーのスタイルを変更します。

フェイザースタイルを変更する

📒ログイン - 会員登録ページ

1つの要素に複数の背景画像を割り当て、それぞれの位置をデザインと同じように配置します。



📒ログイン、会員登録

linear-gradient を利用してページヘッダの背景を指定します。デザインの背景プロパティを確認してスタイルを作成します。


input要素のうち、チェックボックスはブラウザ固有のスタイルを変更できません。変更できない要素は画面から消え、他の要素にスタイルを作成してデザインに合わせて実装します。

スタイルを変更できないチェックボックス


チェックするとスタイルが変わるチェックボックス

📒商品ホームページ

ユーザー属性を活用して、通知ウィンドウ、カートアイコンの数値カウントを実装します。


クリック時にハイライト線が移動するアニメーションをcssとjavascriptとして実装します。

ハイライト移動アニメーション

グリッドビューボタンをクリックして商品の配置を変更し、蒸しボタンをクリックすると色が変わります。

商品の配置を変更します

右側のボタンをクリックするとマイページが表示されます

マイページアニメーション

📒商品詳細ページ

スターポイントを変更すると、画面にスターポイントが表示され、商品数量を変更してサイズを選択します。

スターポイントを表示し、数量を変更し、サイズを選択します

📒 カートのページ

カート商品の数量を変更して削除できます。最後に支払いボタンをクリックすると、支払いオプションが表示されます。

カート商品の数量を変更し、削除後にお支払いします

📒仕上げ

このプロセスは、実際のショッピングモールを実装するプロセスではありません。 Webパブリッシャーとしてデザインを参照し、最終画面の枠まで作成するプロセスです。そのため、ログインで内容を入力して転送ボタンを押したとき、実務では入力した内容を検証し、データベースサーバーに照会後一致かどうかを把握後、本ページに移動する過程で実装しなければなりませんが、本講義ではaction属性の値で一時的に連結しました。

HTML、CSS、Javascriptだけで実装する静的なページなので、ログイン、会員登録、カートに入れ、削除する、決済を進めるなど、すべてはページだけをリンクするレベルで作成したので参考にしてください。

パブリッシャー実務では、フォームから入力時に接続される作業までは行う必要はありません。フロントエンドデベロッパーまたはバックエンドデベロッパーが、Webパブリッシャーが作業した結果にDB連動スクリプトとサーバーステージスクリプトを作成して完成するようになります。

ウェブパブリッシング->フロントエンド->バックエンドのプロセスが気になる方は、私のYouTubeチャンネルの掲示板やモールを実装する映像をご覧ください。

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

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


こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTML、CSS、JavaScriptの基礎知識がある方

  • パブリッシング作業の経験は浅いけれど、実際のプロジェクトを完成させてみたい方

  • デザイン、デザイン参考、ウェブパブリッシングを学習したい方

  • パブリッシングの実務プロセスを学びたい方

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

  • ピュア JavaScript で全てのインタラクション効果を実装したい方

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

  • HTML

  • CSS

  • JavaScript

こんにちは
ezwebです。

キャリア認証

3,001

受講生

77

受講レビュー

4

回答

4.9

講座評価

15

講座

フロントエンドの実務教育から企業・機関への出張講義、オンライン講義の制作まで手がける、Webフロントエンド専門講師です。

■ フロントエンド専門講座
HTML/CSS、JavaScript、React、Firebase、Figma、AIを活用したWeb開発など
Webパブリッシングからフロントエンドの実務まで、段階的な教育を行います。

■ 企業・機関・教育機関への出張講義が可能
企業の実務担当者向け研修、KDT課程、大学・塾での特別講義など
受講対象者とレベルに合わせたカリキュラムの構成および出張講義が可能です。

■ オンライン教育課程の設計・制作が可能
オンライン講義のカリキュラム企画から教材・PPT・実習資料・サンプルコードの制作、
講義の撮影およびコンテンツの納品まで、オンライン教育コンテンツの全工程に対応できます。

■ オンライン・オフライン講義のいずれも可能
スクールでのオフライン講義だけでなく、リアルタイムのオンライン講義や録画型コンテンツの制作など
教育環境に合わせてさまざまな形式で実施します。


■ 主な活動

  • ESTSOFT KDTフロントエンド講義

  • グリーンコンピューターアカデミー ウェブパブリッシング・フロントエンド講義

  • WebパブリッシングのYouTubeチャンネル「Rock's Easyweb」を運営

  • Webパブリッシング・Webデザイン関連書籍の執筆


■ 書籍
2021.07 / Webデザイン&WebパブリッシングのためのFigma完全活用書 / ビジェイパブリック

2022.08 / コーディング初心者 with ウェブパブリッシング  / ヨンジン出版社

2023.10 / 2024 SDエデュ ユ・ソンベ ウェブデザイン技能士 実技対策ノート / 時代考試企画

2024.11 / 2025 SDエデュ ユ先生のウェブデザイン技能士実技個別指導ノート / 時代考試企画

2025.11 / 2026 SDエデュ ユ・ソンベ Webデザイン技能士 実技個別指導ノート / 時代考試企画

 

もっと見る

カリキュラム

全体

21件 ∙ (8時間 24分)

講座資料:

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

受講レビュー

全体

1件

5.0

1件の受講レビュー

  • injungcom12169821님의 프로필 이미지
    injungcom12169821

    受講レビュー 7

    ∙

    平均評価 5.0

    5

    33% 受講後に作成

    本当に有益な講義ですね。ついていくのにも体力が必要です。前の講義は忘れてしまうのですが、機会があれば反復学習をしなければならないですね^^

    ezwebの他の講座

    知識共有者の他の講座はこちら

    似ている講座

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

    新規会員登録で25%OFF

    ¥5,238

    25%

    ¥6,978