第1回 Figma を使ってアプリのデザインを作成しよう フレームの作成とアイコンの作成方法

アプリの作成方法 figma
記事内に広告が含まれています。
スポンサーリンク

今回は「Figma」を使って簡単な「アプリのデザインを作成」してみましょう。

初めてFigmaを使う方でも迷わず作成出来ますので、ぜひ一緒に操作してみてください。

第1回では、「フレームの作成方法」と「アイコンの作成方法」、「外部アイコンの取り込み方法」を中心にご紹介させて頂きます。

スポンサーリンク

フレームの作成

インスペクターの「iPhone13/13 Pro」をクリックします。

ツールバーの「フレーム」をクリックして、「インスペクター」から「iPhone13/13 Pro」をクリックします。

背景色を指定します。

フレームに背景色を指定しましょう。

インスペクターの「塗り」から適当な色を選択してください。

次回以降、色やデザインは修正しますので、気にせず作業を進めていきましょう。

スポンサーリンク

レイアウトグリッド

レイアウトグリッドをクリックして、ウィンドウのグリッドをクリックします。

インスペクターの「レイアウトグリッド」をクリックして、「グリッドアイコン」をクリックします。

ウィンドウが表示されますので、「グリッド」と書かれた部分をクリックします。

「列数」を選択します。

「グリッド」、「列数」、「行数」が表示されますので、「列数」を選択します。

「数」、「余白」、「ガター」を指定します。

「数」、「余白」、「ガター」を指定します。

数値はすべてピクセルになります。

  • 数:列の数になります
  • 余白:フレームの端のスペース
  • ガター:列の間のスペース

タイトルの作成

「T」をクリックして、タイトルを入力します。

アプリのタイトルを入力します。

ツールバーの「T」をクリックして、好きなタイトルを入力してください。

インスペクターでサイズやカラー、フォントなどの指定を行ってください。

中央のグリッドが表示されます。

テキストをクリックしたままドラッグすると、赤い線で中央の位置を示すグリッドが表示されます。

ログインフィールドの作成

ログインボックスを作成します。

「ログインフィールド」を作成していきましょう。

ツールバーの長方形を選択して、幅260px、高さ35pxのボックスを作成します。

ボックスのサイズはドラッグしながら調整することも出来ますし、インスペクター内で直接数値を入力することも出来ます。

ボックスが完成したら、「白」で塗りつぶして、不透明度を30%に指定します。

不透明度はカラーの脇のボックスに数値のみ入力してください。

ボックス内にテキストを配置します。

ツールバーの「T」ボタンをクリックして、テキストを入力してください。

サイズとカラーを調整して、先程作成したボックス内に配置してください。

テキストのカラーによっては不透明度を指定しても良いかもしれません。

ボックスをコピー・アンド・ペーストします。

作成したボックスをコピーして貼り付けます。

方法は、レイヤー部分のボックスとテキストを選択してコピー・アンド・ペーストするか、画像のように、ボックスを覆うようにドラッグすれば、2つのレイヤーをまとめて選択することが出来ます。

テキストを変更してログインフィールドを完成させます。

テキストを変更すれば、ログインフィールドは完成です。

ログインボタンの作成

角の丸いボタンを作成します。

ログイン」ボタンを作成します。

長方形ツールから角の丸いボタンを作成します。

「ログイン」というテキストを配置します。

作成したボタンの上に、「ログイン」というテキストを配置します。

タイトル、ログインフィールドが完成しました。

全体的な配置が完了しました。

グラデーションの背景

画面全体にレイヤーを作成します。

背景にグラデーションをかけてみましょう。

ツールバーの長方形ボタンをクリックして、画面全体にレイヤーを作成します。

レイヤーを一番下に移動します。

作成したレイヤーを一番下に移動します。

Ctrl + Shift + [ で移動します。

カーラーウィンドウの単形を線形に変更します。

カラーウィンドウを表示して、「単形」をクリックして、「線形」に変更します。

カラーを選択します。

プレビューを見ながら色を選択してください。

グラデーションの背景が完成しました。

背景がグラデーションになった画面が完成しました。

新規フレームの作成

新規フレームを作成します。

新規フレームを作成します。

ツールバーの「フレーム」をクリックして、「インスペクター」から「iPhone13/13 Pro」を選択します。

キーボードのN を2回押して、新規フレームを中央に配置します。

「目」のアイコンをクリックします。

最初のフレームが目に入って気になるので、レイーヤーにある「鍵」アイコンをクリックしてロックをかけて、「目」のアイコンをクリックして、非表示にします。

「鍵」アイコンにロックをかけると、そのレイヤーは編集することが出来なくなります。

他の作業をしている時に、誤って削除や編集してしまわないように、変更を加えたくないレイヤーにはいつでもロックをかけることが出来ます。

解除するにはもう一度クリックするだけでOKです。

新規フレームのみ表示されるようになりました。

新規フレームのみ表示されるようになりました。

スポンサーリンク

アイコンの作成

レイアウトグリッドの表示

レイアウトグリッドを表示します。

新しいフレームに「レイアウトグリッド」を表示させます。

インスペクターにある「レイアウトグリッド」をクリックします。

グリッドは「10px」に指定します。

グリッドのサイズや色を変更します。

サイズや色は、ナインドットアイコンをクリックして変更します。

レンズアイコンの作成

長方形ツールを使って、60px / 60pxの正方形を作成します。

まずは「レンズアイコン」を作成してみましょう。

長方形ツールを使って、60px / 60pxの正方形を作成します。

表示を大きくした方が作業はしやすいと思いますので、ここでは画面右上の「ズーム」を900%にします。

お使いのパソコンの画面に合わせて調整してください。

「角の半径」を10pxに指定します。

正方形の角を丸くします。

角の半径」を10pxに指定します。

25px / 25pxの円を作成します。

25px / 25pxの円を作成します。

ツールバーから「楕円」を選択するか、「O」を押して画面上でドラッグします。

正円を作成するには、Shift キーを押しながらドラッグします。

サイズをピッタリ合わせるのが面倒な時は、適当なサイズで作成して、インスペクターのサイズボックスに直接数値を入力します。

先程の正方形の上に重ねますので、適当な色で塗りつぶしておいてください。

円を正方形の上に移動します。

作成した円を、正方形の右下に移動します。

右から2px、下から3pxの位置に移動します。

メモリの表示の仕方は、Alt キーを押しながらポインターを円と正方形の間に移動させます。

クリックしたままポインターを移動させると円がコピーされてしまいますので、注意してください。

円を2つにします。

円をもう一つ作成します。

先程の円を今度はクリックしたまま、Alt キーを押し続けて円を移動させてください。

(または、円をコピー・アンド・ペーストしても構いません。)

円の大きさを30px / 30px に変更します。

円のサイズが少し小さかったので、30px / 30px に変更します。

同じ手順で、右上に10px / 10pxの円を、左下に4px / 4pxの円を作成します。

同じ手順で、右上に10px / 10pxの円を、左下に4px / 4pxの円を作成します。

すべての図形を選択します。

移動ツールを使って、作成したすべての図形を選択します。

「選択範囲の型抜き」をクリックします。

ツールバーにある「ブーリアングループ」から、「選択範囲の型抜き」をクリックします。

これを選択することで、4つの円の場所が型抜きされることになります。

円に特定の色を付けていて、型抜きの必要がなければ、「選択範囲の結合」をクリックしてください。

型抜きが完成しました。

わかりやすいように、背景に色を付けてみました。

円の部分が切り抜かれているのが分かると思います。

また、先程まであった5つのレイヤーが一つにまとめられています。

スポンサーリンク

ホームアイコンの作成

ペンツールでホームアイコンを作成します。

ホームアイコンを作成します。

ツールバーの「ペン」ツールを使って線を引いていってください。

デザインはどんなデザインでも構いません。

ホームアイコンの枠が出来たら、適当な色で塗りつぶしてください。

最後に右上の「完了」ボタンをクリックしたら完成です。

サイズを60px/60pxに指定しておきます。

先程のカメラアイコンが、60px / 60pxだったので、幅か高さのどちらかを合わせておけば、管理がしやすいかもしれません。

サイズはいつでも変更出来ますので、気にならない方は、どんなサイズで作成して頂いても構いません。

メールアイコンの作成

封筒のようなアイコンを作成します。

ペンツールで、封筒のようなアイコンを作成します。

角を少し丸めて、封筒の中を適当な色で塗りつぶしてみましょう。

角を丸めて塗りつぶします。

角を5px丸くして、適当な色で塗りつぶしました。

線を2pxに変更しています。

色は何でも良いですが、ここでは例としてもう少し、一般的なアイコンに変化させてみます。

メールアイコンの完成です。

黒色で塗りつぶして、線を白色に変更してみました。

ベーシックなメールアイコンの完成です。

戻るボタンの作成

戻るボタンを作成します。

戻るボタン」を作成してみます。

まず正円を描きます。

背景は黒で塗りつぶします。

次にペンツールで、矢印を描きます。

先の太さを適当に調整してアイコンを完成させてください。

2つのレイヤーを結合、または型抜きします。

最後に2つのレイヤーを、「結合」または「型抜き」するのを忘れないでください。

ここでは「型抜き」を選択します。

ハンバーガーメニューの作成

線を3本引きます。

同じ長さの線を3本作成します。

「移動ツール」で線をすべて選択します。

「線」にあるプルダウンメニューをクリックします。

赤い線で囲った部分にあるプルダウンメニューをクリックします。

線の形を丸型にします。

「線」の種類が選べますので、「丸形」を選択します。

レイヤーを結合させて完成です。

最後にレイヤーを結合させて完成です。

幾つかのアイコンを例として作成してきました。

「シェイプツール」と「ペンツール」を使うと簡単にアイコンが作成出来るのがご理解して頂けたと思います。

しかし「Figma」には、外部から簡単にアイコンを取り込む方法が幾つかあります。

その中の一つを次にご紹介させて頂きます。

Font Awesome のアイコンを取り込む

Font Awesome公式サイトにアクセスします。

Font Awesome公式サイト

オリジナルのアイコンを作るのはとても楽しい作業ですが、通常は外部のアイコンを取り込んだ方が良い場合がほとんどです。

そんな時は、多くの方がご存知だと思いますが、「Font Awesome」のアイコンを取り込むのが最もお勧めの方法です。

プラグインを使用してアイコンを取り込んだ方が便利だと思いますが、こちらについては別の機会にご紹介させて頂きます。

例として、「bell」アイコンをクリックします。

ツールバーの虫眼鏡アイコンをクリックして、「alert」と検索します。

例として、「bell」アイコンをクリックします。

「Copy Graph」と表示されたベル型のアイコンをクリックします。

「bell」アイコンが拡大されますので、画面左上にある「Copy Graph」と表示されたベル型のアイコンをクリックします。

この操作で「bell」アイコンがコピーされます。

Figmaの画面に貼り付けます。フォントを選択します。

画面上の適当な場所でペーストします。

ショートカットキー、Ctrl + V を使うのが簡単です。

このままだと枠線のみが表示されていて、肝心のアイコンが見えませんのでインスペクターで編集します。

テキストの下にある「フォント」をクリックします。

「Font Awesome 6 Free」を選択します。

沢山のフォントが表示されますので、その中から「Font Awesome 6 Free」を選択します。

「Font Awesome 5」を使用している場合は、そちらを選択してください。

ベルマークが表示されたら、サイズを調整しておきます。

無事にベルマークが表示されました。

サイズや色の変更をしておいてください。

その他にも気になるアイコンがあれば取り込んでおきましょう。

サイズ変更をする時は、テキストサイズを変更してください。

アイコンによってはフォントを変更しただけでは表示されない場合があります。

その時は、「Regular」を「Solid」に変更してください。

レイヤーの位置を調節します。

なお、貼り付けの仕方によってはアイコンのレイヤーがフレームの外になっている場合があります。

その時は、ドラッグ・アンド・ドロップで場所を変更しておいてください。

アイコンフレームの中に移動させます。

このようにアイコンフレームの中に移動させておきましょう。

スポンサーリンク

まとめ

今回は、フレームの作成とアイコンの作成方法についてご紹介させて頂きました。

各アイテムを使いこなすのが目的ですので、あまり細かい設定は気にせずに学習を進めてください。

次回は新しいフレームに、アイコンを挿入したり、画像を挿入したりする方法について見ていきます。

今回も最後までお読み頂き誠にありがとうございました。

figma
スポンサーリンク
シェアする
JIROをフォローする

コメント