【デザインをもとにHTML作成】FigmaでWebデザインをゼロから作り、そのデザインからHTML・CSSコーディング
Figmaは軽快で使いやすい業界標準ツール。ブラウザ上で簡単に共有＆開発が可能でデザインを作成。その後、そのデザインを元にHTML・CSSコーディング。Webデザイナー、エンジニア双方の仕事を体験し、Web作成のマネジメントにも最適です。
4.29 (7 reviews)
121
students
2.5 hours
content
Feb 2025
last update
$13.99
regular price
What you will learn
デザインとコーディングツールの準備：WebデザインツールとしてFigmaがあります。また、コーディングツールはVSCodeがあります。 今回は、この両ツールの準備と使い方を学びます。 (両ツールは、デザインとコーディングで最もメジャーなツールです)
Webサイトのスタイル：色や文字のフォントに統一性のあるWebサイトは綺麗ですね。 デザインの段階で、それらの色や文字フォントを登録して使う。 何かおかしいと思ったら、その登録を見直して一斉変更する。 綺麗さと効率的なデザインとコーディングを学べます。
デザインの自動調整：Figmaには、デザインの自動調整(オートレイアウト)があります。 この機能を使えば、余白や間隔調整をマウス震えてする必要ありません。 余白や間隔の整った美しいデザインを作りましょう。
デザインの親子関係を作る：Webサイトを作る時、例えば、ヘッダーは何ページも同様のものが出てきます。 仮に修正が入った場合、何ページも修正するのは非常に面倒です。 その時に、デザイン上で親子関係を作っておくと、親を修正すれば子供達に反映します。 この機能を覚えて、変化に強いデザイン作りができます。
プレゼンテーション：Figmaではプロトタイプを作った後、リンクを貼ることができます。 つまり、今まで紙芝居だったものが、動的にプレゼンテーションすることができます。
コーディング事始め：html･css･JSを全く書いたことが無くても大丈夫です。 VSCodeの起動から、ファイルの作り方、配置、書き方をゼロから伝えます。
Figmaから画像取得：Figmaでデザインしたオブジェクト群は、全てWebサイトで使う画像になります。 そのエクスポートを覚え、実際にWebサイトで利用します。
デザインで使った色や文字をcssに反映：Figmaで使った色や文字は、cssとして出力されます。 従って、それをコピペすれば、簡単にWebサイトに反映できます。
デザイン通りの配置と余白をcssに反映：Figmaでは、デザイン上のオブジェクトの配置場所や余白が数字ででています。 その数字をcssに使って、デザイン通りの配置と余白を作ります。 デザイン通りになるって、とても気持ちがいいですよ。
ハンバーガーメニューのJavaScript：ハンバーガーメニューとは、ヘッダーの3本線のアイコン。 このアイコンをクリックすると、メニューが出てきますね。 今回は、この動作をJavaScriptで作成します(意外と簡単ですよ)。
ヘッダーの共通化コーディング：ヘッダーは複数のページで共通しています。 共通のhtmlを別ファイルで一箇所で管理して、 各ページは、それを読み込ませます。
Loading charts...
6158095
udemy ID
31/08/2024
course created date
08/01/2025
course indexed date
Bot
course submited by