モバイルWeb制作入門：FigmaデザインをJavascriptで完全再現する

Figmaデザインを参照し、HTML/CSS、Javascriptを活用してモバイルウェブサイトを実装します。モバイルデザインを分析し、保守しやすいウェブサイトを実装してみましょう。

本講座は、HTML、CSS、Javascriptの基礎知識があると、よりスムーズに学習できます。

各パートごとの学習については、以下のリンクをご確認ください。

• HTML基礎: https://inf.run/DL3EM

• CSSの基礎：https://inf.run/doqvG

• Flexibleレイアウト：
  https://youtu.be/_PSy66fkQ7U
  https://youtu.be/N27SvfJMXMs

  
  

• JavaScript基礎：https://inf.run/yNXhi

📱 Figmaデザインを実際のモバイルウェブサイトとして完成させてみましょう！

デザインをコードに変える実践的なウェブパブリッシングプロジェクト

HTML、CSS、JavaScriptを学んだけれど、実際のウェブサイトを一から作った経験が不足していますか？

Figmaデザインを見てどこから作業を始めればよいのか、HTML構造をどのように設計し、CSSとJavaScriptをどの順番で書けばよいのか悩んでいませんでしたか？

この講義では、Figmaで制作されたモバイルファッションショッピングモールのデザインを分析し、実際のWebサイトとして実装する全工程を体験します。

デザイン分析から画像抽出、HTML構造設計、CSSスタイリング、JavaScriptインタラクションの実装まで、段階的に実践します。

単に画面を再現するだけでなく、実際のWebパブリッシング作業の流れを身につけ、ポートフォリオとして活用できる成果物を完成させるコースです。

📱 Figmaデザインを実際のモバイルウェブサイトとして完成させましょう！

デザインをコードに変える実践的なウェブパブリッシングプロジェクト

HTML、CSS、JavaScriptを学んだものの、実際のウェブサイトをゼロから作った経験が不足していませんか？

Figmaのデザインを見てどこから作業を始めればよいのか、HTMLの構造はどのように設計し、CSSとJavaScriptはどの順番で書けばよいのか悩んでいませんでしたか？

この講義では、Figmaで制作されたモバイルファッションショッピングモールのデザインを分析し、実際のWebサイトとして実装する全工程を体験します。

デザイン分析から画像の抽出、HTML構造の設計、CSSスタイリング、JavaScriptインタラクションの実装まで、段階的に実習します。

単に画面を再現するのではなく、実際のウェブパブリッシング作業の流れを身につけ、ポートフォリオとして活用できる成果物を完成させるプロセスです。

🎯 この講座で完成させるプロジェクト

モバイルファッションショッピングモール 'Geeta'

Figmaデザインをもとにモバイルショッピングモールの主要ページを制作し、JavaScriptを活用してさまざまなユーザーインタラクションを実装します。

全8画面を制作します。

1. イントロページ

2. ログイン・会員登録選択ページ

3. ログインページ

4. 会員登録ページ

5. 商品ホームページ

6. 商品詳細ページ

7. カートページ

8. マイページ

デザイン案に合わせてHTMLとCSSを作成し、実際のモバイルウェブサイトでよく使用されるさまざまなインタラクションを追加します。

特に完成したウェブサイトは、PCとモバイル環境を区別し、それぞれ異なる方法で表示します。

• PC接続：スマートフォンのモックアップ内にモバイルウェブサイトを表示

• モバイル接続：モックアップなしでモバイル端末に最適化された専用ページを表示

これにより、JavaScriptを活用したデバイス判別およびアダプティブなモバイルWeb実装方式を体験できます。

※ 実際の会員認証、商品データベースおよび決済システムを接続するプロセスではありません。Webパブリッシングに必要な画面の実装とフロントエンドインタラクションの制作に集中します。

💡 このような方におすすめです

1. HTML/CSS/JavaScriptを学んだものの、プロジェクト経験が不足している方

基礎文法を実際のウェブサイト制作に総合的に適用する経験を積むことができます。

2. Figmaデザインをコードとして実装したい方

デザインを分析し、必要な画像を抽出して実際のウェブページとして制作するプロセスを経験します。

3. Webパブリッシャーへの就職を準備している方

シンプルな例を超えて、複数のページとインタラクションで構成されたポートフォリオプロジェクトを完成させたい方に適しています。

4. モバイルWebパブリッシングのスキルを高めたい方

モバイル画面に適したレイアウトとインタラクション、デバイスごとの画面表示方法を学習できます。

🚀何を学びますか？

STEP 01. Figmaデザインの分析とプロジェクト準備

ウェブサイト制作に先立ち、Figmaデザインを確認し、必要なリソースを準備します。

• 完成プロジェクトのプレビュー

• Figmaデザイン分析

• 画像の抽出と必要な画像リソースの準備

• プロジェクトフォルダおよびファイル構成

デザインを確認しながら必要な作業を計画し、Webパブリッシングに活用できるようリソースを準備します。

STEP 02. モバイルWebの共通構造とスタイルの実装

モバイルウェブサイトの各ページで共通して使用する要素を実装します。

• CSSのリセットと共通スタイルの作成

• CSS変数の活用

• Webフォントの適用およびフォント階層の設定

• FlexboxとGridを活用したレイアウト構成

• Input、Checkbox、Radioなどのフォーム要素のスタイリング

共通要素を体系的に管理しながら、一貫性のあるWebサイトを制作する方法を学びます。

STEP 03. JavaScriptで完成させるモバイルインタラクション

静的なデザインにJavaScriptを適用し、実際に反応するモバイルUIを実装します。

イントロページ

Swiper.jsライブラリを活用して自動で切り替わるスライドを実装し、デザインに合わせてページ表示要素を修正します。

ログインおよび会員登録画面

背景画像とグラデーションを活用し、デフォルトのチェックボックスを好みのデザインに変更する方法を学びます。

商品ホームページ

カテゴリーを選択したときに移動するハイライトアニメーションと、商品グリッドビューの変更機能を実装します。

マイページを開閉するインタラクションも作成します。

商品詳細ページ

商品評価の表示、数量変更、サイズ選択などのユーザーインタラクションを実装します。

カートおよび決済画面

カート内の数量変更および削除のインタラクションを実装し、決済オプション画面を制作します。

各機能のHTML構造とCSSスタイルを記述した後、JavaScriptを追加しながら段階的に完成させます。

STEP 04. PCとモバイルを区別するアダプティブWebの実装

JavaScriptを活用して、アクセスするデバイスに応じてウェブページを異なる形で表示する方法を学びます。

• navigator.userAgentを活用したデバイス判別

• PCでスマートフォンのモックアップにモバイルページを表示する

• モバイル端末でモバイル専用ページを表示する

• デバイスに応じたページ遷移処理

1つのモバイルデザインを、異なるアクセス環境に合わせて表現する方法を体験します。

✅ 受講後には、こんなことができるようになります

• Figmaデザインを分析し、Webパブリッシングに必要なリソースを準備できます。

• HTMLとCSSでモバイルウェブサイトのレイアウトを制作できます。

• CSS変数と共通スタイルを活用し、一貫性のあるUIを実装できます。

• JavaScriptでメニュー、スライド、商品選択など、さまざまなインタラクションを実装できます。

• 接続する機器に応じて画面を切り替える、アダプティブなモバイルウェブを制作できます。

• 複数のページで構成されたモバイルWebパブリッシングの成果物を、ポートフォリオとして活用できます。

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

本講座では、モバイル専用ウェブサイトの制作方法を紹介します。

完成したウェブページにPCからアクセスした場合は、モバイルモックアップの中にページを収めて表示します。このとき、javacriptを利用して、アクセスした端末がモバイル端末かどうかを判別します。

。

実務ではこのようなモバイルモックアップは作らず、画面全体を活用するか、レスポンシブに実装します。レスポンシブウェブページの実装に興味がある場合は、https://inf.run/Gx3Tyの講義をご覧ください。

アクセスした端末がモバイルの場合、モックアップは消え、コンテンツのみを端末に合わせて最適化して表示する、適応型モバイルウェブサイトの実装方法を紹介します。

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

PCからアクセスするとルートフォルダのindex.htmlが開かれてモバイルモックアップに内容を表示し、モバイルからアクセスするとルートフォルダではなく、mobileフォルダ内のindex.htmlにアクセスされるように実装します。

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

  • オリジナル画像をエクスポート

  • Photoroom - AIと背景削除

  • Font Scanner

参照するFigmaデザイン

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

• イントロページ

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

• ログイン

• 会員登録

• 商品ホーム

• 商品詳細ページ

• ショッピングカート

• マイページ

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

📒イントロページ

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

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

Swiper JSパラメータの活用

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

📒ログイン・会員登録の区分ページ

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

📒ログイン、会員登録

linear-gradientを活用してページヘッダーの背景を指定します。デザインで背景属性を確認し、スタイルを記述します。

input要素のうちcheckboxは、ブラウザ固有のスタイルを変更できません。変更できない要素は画面から見えなくし、別の要素にスタイルを記述してデザインと一致するように実装します。

📒商品ホームページ

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

クリックするとハイライト線が移動するアニメーションをCSSとJavaScriptで実装します。

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

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

📒商品詳細ページ

星評価を変更すると画面に星評価が表示され、商品の数量を変更し、サイズを選択します。

📒カートページ

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

📒まとめ

本講座は実際のショッピングモールを実装するものではありません。Webパブリッシャーとしてデザインを参照し、最終画面の枠組みまでを作成する過程です。そのため、ログイン画面で内容を入力して送信ボタンを押した場合、実務では入力内容を検証し、データベースサーバーで照会して一致するかどうかを確認した後、本ページへ移動する処理として実装する必要がありますが、本講義ではaction属性の値を使って仮に接続しています。

HTML、CSS、Javascriptだけで実装する静的なページのため、ログイン、会員登録、カートへの追加、削除、決済の進行など、すべてページをつなぐ程度の内容として記述していますので、ご了承ください。

Webパブリッシャーの実務では、formへの入力時に連動する処理まで行う必要はありません。フロントエンド開発者またはバックエンド開発者が、Webパブリッシャーの作業した成果物にDB連携およびサーバー側のスクリプトを記述して完成させることになります。

Webパブリッシング->フロントエンド->バックエンドのプロセスについて知りたい方は、私のYouTubeチャンネルの掲示板や「ショッピングモールを実装する」動画をご覧ください。

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

受講生の皆さんは、新着情報欄で紹介されているGoogleアンケートと1:1オープンチャットを通じて、いつでもご意見やご質問をお寄せいただけます。