강의

멘토링

커뮤니티

Programming

/

Front-end

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

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

難易度 初級

受講期間 無制限

  • ezweb
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

受講後に得られること

  • 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

こんにちは
です。

2,706

受講生

58

受講レビュー

4

回答

4.9

講座評価

11

講座

■ [現在] グリーンコンピュータアート学院 ウェブパブリッシング、フロントエンド講義
■ [現在] ウェブパブリッシングYouTubeチャンネル「Rock's Easyweb」運営
■ ザ・ジョウンコンピュータアカデミー ウェブパブリッシング講師
■ ハンビッコンピュータアカデミー ウェブパブリッシング講師
■ フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
■ UI/UXウェブデザインポートフォリオ講義


[ 書籍 ]
2021.07.19 刊行 / Webデザイン&WebパブリッシングのためのFigma完全活用書 / BJ Public

2022.08.25 出刊 / コーディングは初めて with ウェブパブリッシング / ヨンジン出版社

2023.10 出刊 /2024 SDエデュ ユ先生のウェブデザイン技能士実技家庭教師ノート / 時代考試企画

2024.11 重版 /2025 SDエデュ ユーソンベ ウェブデザイン技能士 実技 家庭教師ノート / 時代考試企画

[ 受賞歴 ]
2022.08 グリーンコンピューターアート学院 鍾路支店 - 優秀講師 2021.06 グリーンコンピューターアート学院 鍾路支店 - 優秀講師 2018.06 グリーンコンピューターアカデミー 新村支店 - 優秀講師 2017.05 グリーンコンピューターアカデミー 新村支店 - 優秀講師 2016.05 グリーンコンピューターアカデミー 新村支店 - 優秀講師 2015.10 グリーンコンピューターアカデミー 新村支店 - 優秀講師

カリキュラム

全体

21件 ∙ (8時間 24分)

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

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

受講レビュー

全体

1件

5.0

1件の受講レビュー

  • injungcom12169821님의 프로필 이미지
    injungcom12169821

    受講レビュー 7

    平均評価 5.0

    5

    33% 受講後に作成

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

    ¥6,801

    ezwebの他の講座

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

    似ている講座

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