WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

WEBデザインを始めたばかりの方にとって、「何から設定すればいいのか分からない」と感じることは多いと思います。

この記事では、デザインツールの Figma を使ってまず最初にやっておきたい、

• フォントの設定
• 色の設定

この2つに絞って解説します。

細かい機能は一旦置いておいて、「まずは見た目を整えるための最低限」だけを一緒に設定していきましょう。

作業スペースの背景色

まずはその前に背景色を作業しやすい色へ変えましょう。白背景を使う場合、初期設定だとコントラストが弱いため作業しづらいからです。

フォントの設定

フォントを選んで設定する

とりあえず文字データを配置しました。ここからフォントの設定をします。

初期設定のフォントを確認します。「Inter」というフォントですね。

「Inter」という部分をクリックすると選択できるようになります。ここでは大まかな種類が表示されますが、今回は「Googleフォント」を選びます。

「Zen Kaku Gothic Antique」にしたいので検索画面に「Zen」と入力して検索しました。

「文字の太さ」「文字のサイズ」「行間」「文字の間隔」をそれぞれ設定しました。

文字を登録する

右端にある四角が4つあるボタン「スタイルを適用」を選んで「テキストスタイル」を表示し「+」を押して「新しいテキストのスタイルを作成」を開きます。

「名前」にフォント名を「説明」は任意の情報を入力します。終わったら「×」で閉じます。

フォント名の欄に「Ag」が追加されていたら成功です。

フォントを何も選択されていない状態だとこのように表示されます。

登録したフォントを変える

登録したフォントを変更してみましょう。「スタイルを編集」を選びます。

先ほどのフォントを登録した手順で、情報を変えていきます。最後に「×」で閉じてください。

「Zen Kaku Gothic Antique」から「Noto Sans」に変更されました。

色の設定

色を登録する

続いて色を登録します。テキストや図形などを何も選択していない状態で「色スタイルを作成」をクリックしましょう。

そのままフォントと同じように「新しい色スタイルを作成」を選び「ライブラリ」のとなりの「カスタム」を選択すると色が変えられます。この時「名前」と「プロパティ」の情報を色コードでそろえると最初は管理しやすいです。

設定ができたら「×」で閉じます。

今回は鮮やかな赤を登録します。

登録されると「色スタイル」の欄に円で表示されます。

一度登録すると編集中のデータから変更が可能です。色のコード部分をクリックして「ライブラリ」から先ほど登録した色を選択すればOKです。

登録した色の設定を変える

一度登録した色の設定を変えてみましょう。何も選択していない状態で、「色スタイル」から変えたい色を選択し右端にある「スタイルを編集」を選びます。

プロパティの赤い色部分をクリックすると色が変えられます。今回は「FF6666」にしました。忘れずに「名前」も「FF6666」に変更しておきましょう。

同じ色が設定された箇所が一度で変わりました。

デザインを進めていくうえで思ったよりこの色使わなかったから、もっと存在感あったほうが全体がひきしまるかも？と言った場合は、アクセントカラーの色味をより刺激的にしたり、背景色を渋い色から彩度を高めて淡くしたりと微調整が可能です。

まとめ

今回はFigmaの初心者に向けたフォントと色の登録をご紹介しました。

デザイン系のツールはどれか一つでも触れたことがあれば、触っていくうちに体で覚えていく感じがありますが、本当に最初から始める場合は本当にわからないことが多いです。

使い慣れたら「こんなことだったのか」と思うものですが、操作でつまずく部分は人それぞれだったります。

この記事が「Figmaに興味があるけど何から始めればいいの？」という貴方のお役に立てていたらうれしいです。