Figma｜第7章歯医者さんサイトのデザインをしてみよう

INDEX

前の章に戻る次の章に進む

☑️ サンプルデータはこちら

Figma

Created with Figma

使用素材

Figma 7章使用素材

【7-1】5章で作ったワイヤーフレームに、デザインを加えてみよう

■ デザイン用ページの準備

まずはFigmaで ”新しいページ” を作成して、ワイヤーフレームをコピーペーストしましょう。

新しいページを作るには、レイヤーパネル内にある ”+” アイコンをクリックすることでページを追加する事が出来ます。

Figma 7-1

この動画はデモンストレーション動画になります。音声は入っておりません。

【7-2】メインビジュアルや、サムネイル/アイコン等の画像を作成してみよう

■ 素材・パーツの準備

ロゴ / 写真は、素材画像を準備しています。ページの冒頭の画像素材.zipをダウンロードしてください。

【7-3】Figmaでデザインする際の便利技

■ 簡単な便利技をいくつかご紹介します。

☑️ コンポーネント（4-3でも紹介）は、使い回せるパーツ等にはとても便利。
　ヘッダーやフッターなど共通で使用するパーツがある場合は、コンポーネント化をおすすめします。

☑️ スタイル（4-5でも紹介）は、テキストのサイズや色を登録する機能です。
　統一したテキストを実装しやすくなり、全体的な統一感を保つことにも繋がります。

【7-4】準備した素材を配置したり色やテキストを調整してみよう

■ 素材・パーツの配置 / 色・テキストを調整

ワイヤーフレームで作成した部分に、デザインを加えていきます。

画像素材の配置	「画像/動画の配置」より、配置出来ます。 ※図形ツールを選択した状態で配置すると、その選択した図形の範囲のみ画像が表示されるようになります。
パーツの配置	コンポーネント化していれば、アセットパネルより容易にドラッグ＆ドロップで配置出来ます。
色やフォントの調整	スタイルガイドに登録していれば、直ぐに指定のスタイルを設定できます。

【7-5】デザインしたサイトを、共有してみよう

■「共有」機能でデザインを見てもらおう

前章（6-5）と同じ方法でOKです。

「リンクをコピー」を選択すると、作成しているFigmaのURLを取得できます。
このURLをメールやチャット等で見て貰いたい方に送ればOKです。
メールフォームに招待したい方のメールを入力し「招待」ボタンをクリックして招待する事で、共有メールを送る事が出来ます。
※無料プランの場合、ファイルごとに招待できる編集者の数には制限があります。チームでの共同編集など、より高度な機能が必要な場合は有料プランへの移行を検討しましょう。

模擬演習：第5章の模擬演習で作成したワイヤーフレームに、デザインを加えてみよう

5章の演習で作成したワイヤーフレームに、サンプルサイトのデザインを模写してみよう。

※ すでに学習しながらデザインを模写していた方は飛ばしていただいて構いません。これまで模写をせずに学習されてきた方は、5章のワイヤーフレームにデザインを加え、サンプルサイトと同じデザインを完成させましょう！

完成したらコーチに提出し、フィードバックをもらいましょう。

なお、フィードバックを待たずに次の章に進んでも問題ありません。