Inflearn brand logo image
Inflearn brand logo image
Programming

/

Front-end

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

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

15名 が受講中です。

Figma
HTML/CSS
JavaScript
Web 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,463

受講生

40

受講レビュー

3

回答

4.9

講座評価

8

講座

■ [현재] 그린컴퓨터아트학원 웹퍼블리싱, 프론트엔드 강의
■ [현재] 웹 퍼블리싱 유튜브 채널 'Rock's Easyweb' 운영
■ 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
■ 한빛 컴퓨터아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의


[ 도서 ]
2021.07.19 출간 / 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서 / 비제이퍼블릭

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分)

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

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

受講レビュー

まだ十分な評価を受けていない講座です。
みんなに役立つ受講レビューを書いてください!

ezwebの他の講座

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

似ている講座

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