【デザインをもとにHTML作成】FigmaでWebデザインをゼロから作り、そのデザインからHTML・CSSコーディング

デザインとコーディングツールの準備

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を別ファイルで一箇所で管理して、

各ページは、それを読み込ませます。

レスポンシブ対応

レスポンシブとは、画面サイズやデバイスに応じてウェブサイトのレイアウトを柔軟に変化させる手法です。

PC、スマホ、タブレットなど、どのデバイスでも快適に閲覧できるデザインとコーディングを学びます。