FigmaでWebサイトの設計やデザインを行うとき、「テキスト」の出番は非常に多くなります。そこで、ここでは図のようなシンプルなテキストサイトを設計しながら、テキストツールの詳しい使い方を紹介していきましょう。

[ad]

なお、Figmaの基本的な使い方は前回の記事をご参照ください。

Figma UI3でボタンを作ろう

大見出しを立ててタイポグラフィーを調整しよう

それでは、新しいフレームを作成して作業を始めていきましょう。ツールバーの「フレーム」をクリックし、ここでは「スマホ」の「iPhone 14 & 15 Pro」を選びました。スマホサイズであればどれでも問題ありません。

まずは、大見出しを立てましょう。ツールバーから「テキスト」を選択します。なお、キーボードショートカットの「T」が割り当てられているので、これを押すだけでも切り替えられます。

フレーム内の、適当な場所をクリックします。テキストカーソルに変わったら「利用規約」と入力しましょう。

フレームの白紙の部分をクリックして、入力を終了します。自動的に選択状態になるので、このまま設定を変更しましょう。右側の「デザイン」パネルが「テキスト」になっていることを確認して、真ん中の「タイポグラフィー」でさまざまな調整を行います。

ここでは、次のように調整しましょう。

フォント： Noto Sans JP
太さ： Bold
サイズ： 24

また、少し文字間にゆとりを持たせたいので、右下の「文字間隔」という設定項目を「20%」に設定しましょう。入力する場合は「20」だけ入力すれば良いでしょう。

すると、文字同士の間隔が空いて、ゆったりとした配置になります。

これで準備完了です。ページの真ん中に配置しましょう。ガイドラインを見ながら配置すると良いでしょう。

また、縦位置は「30」とします。「位置」の「Y」を変更しましょう。

中央揃えにしよう

さて、これで正しく配置できたように思えますが、例えばここで見出しが変わってしまったとしましょう。「サービス利用規約」などと打ち替えてみます。

すると、中央からずれてしまいました。これは、テキスト自体の配置が「左揃え」になっているため、左端を基準に伸びていってしまうのです。そこでここでは、タイポグラフィーの「中央揃え」ボタンをクリックして、テキスト自体を中央揃えにしておきましょう。

これで、文字数が増減しても中央を基準に伸び縮みするようになります。

[ad]

英文を配置しよう

続いて、タイトルの下に英文を配置してみましょう。同じく、テキストツールで適当な場所をクリックしたら、「Terms of service」と入力します。

なおこの時、見本がすべて大文字だからと言って、すべて大文字では入力しないようにしましょう。後で合わせます。また、「中央揃え」を選んでおきましょう。

そして、デザインパネルのタイポグラフィーで次のように設定します。

フォント： Helvetica Neue
太さ： Regular
大きさ： 12
文字間隔： 0%

とします。

そしたら、すべて大文字に変えましょう。右下の「タイプの設定」ボタンをクリックしましょう。より、詳細な設定画面が表示されます。

ここでは、「大/小文字」という設定項目で、英文をすべて大文字で表現してみましょう。「大文字にする」ボタンをクリックします。

間隔を設定しよう

ここで入力した英文ですが、日本語の見出しと5pxの余白で配置したいと思います。しかし、マウス操作で行うのは大変ですし、デザインパネルで行うにも計算が面倒です。そこでここではキーボード操作を使って、位置を調整しましょう。

まずは、大体の位置に移動します。ガイドラインに沿って左右は中央に、上下は一度ぴったりくっつけてしまっても良いでしょう。

そしたら、移動ツールで選択した状態でキーボードの下矢印キーを押します。すると、1pxだけ下にずれます。

このまま、5回押せば5pxの移動が簡単に行えます。

なお、現在の間隔は「Option(Alt)」キーを押すと分かります。英文が選択された状態で、Option(Alt）キーを押し、そのままカーソルを日本語見出しに合わせてみましょう。すると、間隔が数字で表示されます。これを頼りに、5px余白を空けましょう。これで見出しの完成です。

小見出しを設定しよう

続いて、小見出しを立てましょう。テキストツールをクリックして適当な場所をクリックしたら、「はじめに」と入力します。タイポグラフィーの設定は、それぞれ以下に設定しましょう。

フォント： Noto Sans JP
太さ： Bold
大きさ： 16
位置揃え： 左揃えに

長い見出しを入れてみよう

さて、ここで見出しの内容を変更して「はじめに」を何度もコピーペーストするなどして、長い見出しを入れてみましょう。フレームからはみ出て表示されてしまいます。

これは、テキストの「レイアウト」が「幅の自動調整」に設定されているため。テキストツールは、「幅の自動調整」「高さの自動調整」「固定サイズ」という3種類から選ぶことができます。標準は「幅の自動調整」になっているため、入力された文字数に従って横に伸びてしまうのです。

そこでここでは、デザインパネルの「レイアウト」で「高さの自動調整」に変更してみましょう。

すると、それ以降入力した文字列は、自動改行されて下に表示されるようになります。

先にレイアウトを変更しよう

このように、文字数が決まっていない要素を挿入する場合は、あらかじめ「高さの自動調整」に変更しておくと良いでしょう。この時、簡単に変更する方法があります。

テキストツールでフレーム内をクリックすると、まずは「幅の自動調整」に設定されます。ここで、まずは数文字入力しましょう。そしたら、移動ツールで作られたテキストエリアをクリックし、長方形などと同じように大きさ（幅）を調整します。すると、自動的に「高さの自動調整」に変更されます。

なおこの時、縦も変更してしまうと「固定サイズ」になってしまいます。

ルール（ルーラー）を表示しよう

さて、ここで見出しの位置や幅を設定したいのですが、画面の両端に少し余白を取りたいとします。これを、数字を見ながら調整するのは大変なので、フレームにガイド線を引くと良いでしょう。

フレームをクリックしたら、ツールバーの一番右端「アクション」ボタンをクリックしましょう。「共通設定」に「ルールの表示」メニューがあるので、これをクリックします。すると、画面の左側と上側にメモリ（ルーラー）が表示されます。

ガイドを引こう

そしたら、右端のルーラーにカーソルを合わせて、そのまま右にドラッグします。

すると、赤いガイド線が付いてきます。これを、フレームの左端まで移動すると、上部の数字が「0」になります。

もしこの時、0にならない場合はフレームが正しく選択されていないので、再度選択してからガイドを引き直しましょう。間違えたガイドは右クリックで、削除することができます。

そのままガイドを移動して、「20」になったら離します。

これで、左端から20pxの余白を取ることができました。今挿入した見出しをドラッグすると、ガイドのところで吸着するので、そのまま離しましょう。

続いて、右端にも余白を設定します。同じ操作でガイドをもう一本引いたら、フレームの右端に移動します。「393」など、フレームの幅に合わせて数字が表示されるので、そこから20を引いた数（ここでは、373）に合わせてガイドを引きましょう。右端にも余白が生まれました。

これで、画面の両端に余白が生まれたので、小見出しの幅をガイドに沿って決めましょう。これで、何文字の見出しが入ってもきれいにレイアウトされるようになります。

上下位置は、上のタイトルと「40px」離して配置しましょう。この時、「位置」の「Y」には計算式を入れることができます。上のタイトルとぴったりくっつけたら、その値に「+40」と入力することで、40pxの余白を作ることができます。

[ad]

本文をダミーデータで挿入しよう

続いて、本文を挿入します。再度テキストツールを選んだら、今回はドラッグで挿入します。すると、あらかじめ「固定サイズ」で挿入することができます。

そしたらここに、本文を挿入しましょう。本文は、入力したり、何かからコピーペーストをしても構いませんが、例えばまだ原稿が決まっていないといった場合、ひとまず「ダミーデータ」を使って、何かの文字が入った様子を元にデザインすることがよくあります。

Figmaでは「プラグイン」という機能を使うことで、他の方が作成した機能を使うことができ、ダミーデータを挿入する拡張機能もあります。ここでは、例としてKiteさんが開発した「Japanese Dummy Text」を利用してみましょう。

拡張機能を利用しよう

ツールバーの右下の「アクション」ボタンをクリックし、「プラグインとウィジェット」をクリックします。

そして、上部の検索窓に「dummy」などと入力すると、「Japanese Dummy Text」が見つかります。クリックして、「実行」ボタンをクリックしましょう。

図のようなウィンドウが表示されるので、先ほど作成したテキストエリアをクリックし、下の「自動生成」ボタンをクリックします。

すると、テキストエリアいっぱいにダミーのテキストが挿入されます。意味が分からない文章ですが、ここでは日本語の字の大きさや太さ、表示の様子さえ分かれば良いので問題ありません。逆に、実際の原稿と差し替えるときに、間違えなくて済むようになります。

そしたら、設定を整えましょう。ここでは、タイポグラフィーを次のように設定します。

フォント： Noto Sans JP
太さ： Regular
大きさ： 16

またここでは、行間に少しゆとりを持たせるため「行間」を変更しましょう。最初は「自動」と表示されていますが、クリックすると数字が薄く表示されます。これが現在の設定になるので、これを参考に少し増やしましょう。ここでは、「25」と設定します。

箇条書きを作ろう

続いて、本文として作成したテキストエリアをコピーしましょう。コピーは、エリアをクリックして「Cmd(Ctrl)+C」でコピーし、「Cmd(Ctrl)+V」で貼り付けることができます。この時、まったく同じ場所に張り付いてしまい、一見すると分かりにくいので気をつけましょう。ドラッグすれば、二重になっている事が分かります。

また、「Cmd(Ctrl)+D」を押すと、これを一度に行うことができます。さらに例えば、コピー元のパーツを「Option(Alt)」キーを押しながらドラッグすることでも複製できます。真下にコピーしましょう。

そしたらここでは、「箇条書き」を作ってみましょう。ダブルクリックすると、すべての文字列が選択できるので、次のように入力します。

1. 住所

この時、「1.」の後に半角空白を入れましょう。すると、少しだけ右にずれることが分かります。

そのまま、改行してみましょう。次の行には「2. 」と自動的に挿入されます。これは、「箇条書きモード」になったことを表します。

すべて入力が終わったら、2回改行をするか、「Esc」キーを押します。すると、箇条書きモードが解除されます。こうして、簡単に箇条書きを作ることができます。

箇条書きを調整しよう

箇条書きの細かい調整は、タイポグラフィーの「タイプの設定」をクリックします。「リストスタイル」という所で、数字あり、行頭文字などに切り替えることができ、またリスト間隔などもここで調整ができます。

ここでは、「リスト間隔」を「2」に設定しておきましょう。

箇条書きを解除しよう

ここで、小見出しにも番号を振りたいとしましょう。先の見出しの先頭に「1. 」と追加してみましょう。

すると、全体が右にずれてしまいました。先の通り、箇条書きモードになると、行頭に少し余白が生まれます。ただ、この見出しの場合は箇条書きにしたいわけではなく、番号を振りたいだけでした。

そこで、このような場合では「Cmd(Ctrl)+Z」を押しましょう。元に戻すことができます。こうして、箇条書きにするかどうかを制御することができます。

[ad]

項目を追加しよう

もうひとつ項目を追加しておきましょう。ここでは、今作成した内容をコピーします。

見出しと本文、箇条書きをすべて選択したら、「Option(Alt）」キーを押しながら、ドラッグしてみましょう。これでも複製ができます。そのまま、下にずらして前の項目と40px離して配置します。ガイドが表示されるので、これに沿っておくと良いでしょう。

アンダーラインを引こう

最後に、図のようなリンク要素を配置します。

テキストをクリックしたら、適当な場所をクリックし、「トップページへ戻る」と入力します。

デザインパネルで「塗り」の色を青（6361FF）などに設定し、またタイポグラフィーの「タイプの設定」ボタンをクリックして、「装飾」のアンダーラインボタンをクリックします。これで、アンダーラインの引かれたテキストが作れました。

後は、ページの中央、そして一番下のコンテンツから40px離したところに設定すれば完成です。

こうして、テキストベースのページデザインを作成することができます。

[ad]