【デザインをもとに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、スマホ、タブレットなど、どのデバイスでも快適に閲覧できるデザインとコーディングを学びます。