Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
NEW
Programming

/

Full-stack

Figmaガイドを利用したPWAネイティブアプリ制作 - Figma + HTML + CSS + Progressive Web APP (活用)

アプリは私たちの日常生活で重要な役割を果たしています。しかし、ネイティブアプリを開発し、維持・保守する過程は長く複雑で、多くのコストがかかることもあります。 本講義では、2024年9月現在注目されている代替案であるプログレッシブウェブアプリ(Progressive Web App、PWA)を紹介します。PWAはウェブ技術とネイティブアプリの長所を組み合わせた方式で、より速く効率的なアプリ開発と維持管理を可能にします。 実習と共にPWAの概念、長所、実装方法を段階的に学習し、実務にすぐに適用できる能力を身につけることができます。

2名 が受講中です。

  • usefulit
HTML/CSS
JavaScript

こんなことが学べます

  • PWA(Progressive Web App)の概念と実装方法を理解し、活用することができる。

  • PWA方式を適用して自分だけのWebアプリを企画・開発・配布することができる。

Figmaガイドを利用したPWAネイティブアプリ制作 - Figma + HTML + CSS + Progressive Web APP(活用)

アプリは私たちの日常生活で重要な役割を果たしています。しかし、ネイティブアプリを開発し、維持・保守する過程は長く複雑で、多くのコストがかかることもあります。

本講義では、2024年9月現在注目されている代替案であるプログレッシブウェブアプリ(Progressive Web App、PWA)を紹介します。PWAはウェブ技術とネイティブアプリの利点を組み合わせた方式で、より速く効率的なアプリ開発と保守管理を可能にします。

実習と共にPWAの概念、メリット、実装方法を段階的に学習し、実務にすぐ適用できる能力を身につけることができます。

講義内容

Figmaガイドを利用したPWAネイティブアプリ制作 - Figma + HTML + CSS + Progressive Web APP (活用) Part,1

  • Figmaを活用したUIデザイン実習

    • 基本スタイル設定:色、フォント、間隔などの基本デザイン要素の構成

    • スライダーUI制作:画像またはコンテンツがスライドする画面構成

    • レシピリストデザイン:リスト形式の情報配置とスタイリング

    • シェフのコツセクション制作:カードやバナー形式の情報エリア設計

    • 完成されたデザインを基にプロトタイプ制作およびユーザーフローシミュレーション

  • SwiperJS基本文法学習およびマルチスライダー実装

    • SwiperJSライブラリのインストールと初期設定方法の学習

    • 単一スライダー作成後、様々なオプション(自動再生、ナビゲーションボタンなど)適用

    • 複数のスライダーを一つのページで動作させるマルチスライダーの実装

  • Google Maps APIを活用した地図制作

    • Google Maps API キー発行と基本連携方法

    • ウェブページに地図を挿入し、位置マーカーを追加

    • 地図スタイル、ズームレベル、ユーザーインタラクションオプション設定

Figmaガイドを利用したPWAネイティブアプリ制作 - Figma + HTML + CSS + Progressive Web APP (活用) Part,2

  • HTMLでヘッダーと本文構造の作成

    • HTMLタグを使用してページの基本骨格構成

    • ヘッダー領域(ロゴ、メニュー、タイトルなど)と本文領域(コンテンツ、画像、テキストなど)の分離

    • セマンティックタグを活用した構造的で意味のあるマークアップの作成

  • CSSでヘッダーと本文のスタイリング実装

    • 色、フォント、背景、レイアウトなど視覚的デザインの適用

    • FlexboxまたはGridを使用したレイアウト配置

    • レスポンシブスタイリングを適用して様々な画面サイズに合うデザイン実装

  • JavaScriptでヘッダーと本文機能開発

    • メニューボタンのクリック、スクロール時のヘッダー変化など動的なUI機能追加

    • 本文コンテンツとのインタラクション(スライド、タブ、アニメーションなど)の実装

    • DOM操作とイベントハンドリング基本パターンの適用

  • GitHubを活用したWebページホスティング方法の学習

    • GitHub リポジトリの作成とプロジェクトのアップロード

    • GitHub Pagesの設定による無料ウェブページホスティング

    • デプロイ後にアクセス可能なURL生成及び共有方法

  • 完成されたWebページを基盤にしたPWAアプリ制作

    • PWA(Progressive Web App)の概念と利点の理解

    • Webページに Service Worker、manifest.json を追加

    • オフライン動作、ホーム画面アイコン追加、アプリのように実行される機能実装

受講前の参考事項

この講義では知識共有者による質問・回答は提供されません。

学習資料

part 1 - 講義活用ファイル(coding,layout,pwa)

part 2 - 講義活用ファイル(coding,layout,pwa)

こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTML、CSS、JavaScriptを使用するWebユーザー

  • ネイティブアプリを作ることができるアプリ開発者

  • 実務でデザイン能力を向上させたいパブリッシャー

こんにちは
です。

8,256,038

受講生

6,086

受講レビュー

4.6

講座評価

261

講座

유용한 IT 강의를 통해 여러분의 성장을 돕겠습니다.

カリキュラム

全体

20件 ∙ (7時間 55分)

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

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

受講レビュー

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

¥9,407

usefulitの他の講座

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

似ている講座

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