今回は、「スタイルガイド」の作成方法についてご紹介させて頂きます。

スタイルガイドを０からすべて自分で作成するのは、根気と努力と時間が必要になります。

Figmaではスタイルガイドを作成するためのプラグインやテンプレートが多数用意されていますので、これらを利用すれば、効率よくスタイルガイドを作成することが出来ます。

それでも、すべてのリストの作成方法について細かく説明すると、大変な量になってしまいますので、ここでは、リストの中でも特に重要な「カラーパレット」と「タイポグラフィ」の作成方法に焦点をあてて、ご紹介させて頂きます。

スタイルガイドとは

スタイルガイドとは、デザインの統一したルールのことを言います。

ウェブサイトのデザインをする時に、一からすべてを構築しても良いのですが、非常に時間がかかります。

またサイトの一貫性を維持する上でも事前にルールが決まっていたほうが保ちやすいというメリットもあります。

また現在ではウェブサイトの構築も一人で行うのではなく、チームで行うことが主流となっています。

スタイルガイドがあるだけで、デザイナーとエンジニアの意思疎通に間違いが起こりにくくなります。

各パーツを別々の人が作成しても、スタイルガイドがあれば、最後に一体感のあるサイトを作成するのも容易になります。

つまりスタイルガイドがあれば、一人でもチームでも非常に効率的に仕事を勧めていくことが可能になるのです。

スタイルガイドに含めるもの

スタイルガイドに含めるものに厳密な定義があるわけではありません。

作成するサイトによって必要なものは変わってくると思います。

ここでご紹介させて頂くものが正解というわけではありませんが、スタイルガイドを構成するのに不可欠な基本的要素となるものです。

• カラーパレット
• タイポグラフィ
• イメージ
• UI要素

スタイルガイドの作成

スタイルガイドを０から作成するのも良いですが、非常に手間と時間がかかります。

本格的なプロジェクト等で必要になる場合は別ですが、そうでない場合は、Figmaのプラグインやテンプレートを利用すると短時間でスタイルガイドを作成することが出来ます。

ここではテンプレートを利用して簡単なスタイルガイドを作成していきますので、必要に応じて変更を加えながら作業してみてください。

テンプレートの選択

Figmaのトップページの左側のメニューから、「コミュニティ」をクリックします。

コミュニティページが表示されますので、検索ボックスに「style guide」と入力して検索します。

検索結果が表示されました。

このまま探しても良いのですが、少し絞り込んでみます。

左側の「ファイル+テンプレート」をクリックして、すべての製品から「Figma」を選択します。

どのスタイルガイドを使用しても良いのですが、ご自身の好みのテンプレートを選んでください。

初めて利用される場合は、なるべく利用されている回数が多いもの選ぶと良いと思います。

ここでは、「Style Guidelines」を選択します。

テンプレートの詳細ページが表示されますので、内容を確認して、画面右上の「Figmaで開く」をクリックします。

別ウィンドウで編集画面が表示されました。

最初のページはカバー画面になります。

レイヤーの「Guidelines」をクリックすると全体を確認することが出来ます。

表示倍率は適時調整しながら全体を確認してみてください。

ここから編集を始めていきます。

テンプレートの編集

テンプレートを編集していきます。

編集したいページやパーツはレイヤー名の横をクリックすると選択することが出来ます。

画面内の編集したいパーツを直接ダブルクリックしても選択することが出来ます。

カラーパレットの作成

レイアウトの変更

すでにカラーパレットが作成されていますので、この状態でそれぞれの色を変更するだけでも構いません。

ここではもう少しカラーバリエーションを増やしていきます。

最初に「Colors」のフレームをコピー・アンド・ペーストしてフレームを増やします。

このような形になるようにしてください。

フレーム名も変更しておきましょう。

次に、カラーパレットのレイアウトを変更します。

どのようなレイアウトにするかは好みで決めてください。

少し見栄えが悪いですが、「Brand Colors」と「State Colors」を縦に配置してみました。

この横にそれぞれの色のバリエーションを追加していきます。

「Brand Colors」は他の色に変更しておきましょう。

プラグインの追加　Tints and Shades

カラーバリエーションを作成する前に、「Tints and Shades」というプラグインをインストールします。

このプラグインは、指定した色のティント（明るいバリエーション）とシェード（暗いバリエーション）を自動で作成してくれるプラグインになります。

プラグインの追加　Styler

「Styler」というプラグインも合わせてインストールしておきましょう。

作成したカラーバリエーションの各色を、スタイルに変更する時に使用します。

カラーバリエーションの作成

カラーバリエーションを作成したい色のフレームを選択して、右クリック→「プラグイン」→「Tints and Shades」をクリックします。

「Generate Colors」をクリックします。

カラーバリエーションが作成されましたが、フレームのみしか見えません。

これは、レイヤーが下の方に作成されてしまっているためですので、ドラッグして動かすとカラーが表示されるようになります。

カラーバリエーションが見えるようになりました。

あとは分かりやすいようにレイアウトをしていきます。

なお、カラーバリエーションは11個のフレームになっていますので、画面上の他の部分はクリックせずに、移動や変形をするようにしましょう。

配置場所が決まったら、複数のフレームを一つにまとめておきましょう。

Shift + Aを押すと、一つのフレームにまとめることが出来ます。

カラーコードを記述する場合は、インスペクターにある「選択範囲の色」をクリックするとカラーコードを確認することが出来ます。

このように間隔の空いたカラーバリエーションが作成された時は、オートレイアウトを使って間隔を調整してください。

スタイルに変換

カラーバリエーションで作成した色をスタイルに変換しておきましょう。

各フレームに分かりやすい名前を付けておきます。

同じ名前のフレームがあると上書きされてしまいますので注意してください。

名前を変更したすべてのフレームを選択します。

右クリックして、「プラグイン」→「Styler」→「Generate Styles」をクリックします。

インスペクターの選択範囲の色の部分に注目しておいてください。

すべてのカラーバリエーションがスタイルに変換されました。

インスペクター内のカラー名が変更されているのを確認してください。

「スタイルの編集」ボタンをクリックすると、カラーを変更したり、カラーコードを確認したりすることが出来ます。

カラーパレットの完成

「Brand Colors」のサイズも揃えた方が良かった気がしますが、とりあえずこのような形で作成してみました。

並べ方やサイズは好みで変更しておくと良いとでしょう。

カラーの詳細な「ティントとシェード」を知りたい場合は以下のサイトを利用すると簡単にカラーバリエーションを作成することが出来ます。

Tint & Shade Generator

Easily make tints and shades that match the output of Chrome DevTools, Sass, Less, and PostCSS.

maketintsandshades.com

タイポグラフィの作成

英語のテンプレートなので、英語の見出しと本文の2つが作成されています。

英語のサイトを作成する場合であれば、このままフォントを変更するだけで良いと思います。

しかし、このページをお読みの方は日本語でサイトを作成すると思いますので、2フレームをコピー・アンド・ペーストして、日本語フォント用のタイポグラフィも作成するようにしておきましょう。

プラグインの追加　Batch Styler

「フォントファミリー」をまとめて変更出来るプラグインが、「Batch Styler」です。

どのフォントファミリーを使うか迷っている時など、すぐに変更出来て、とても便利ですので、ぜひこの機会に追加しておいてください。

フォントファミリーの変更

フォントファミリーを変更したいフレームを選択します。

プラグイン「Batch Styler」をクリックします。

変更したい「スタイル」を選択します。

フォントファミリーを「Poppins」に変更しようとすると、「Weight」の部分に注意マークが表示されています。

このマークが表示されている場合は、実行しても一部のフォントファミリーが変更されない場合がありますので、注意してください。

最後に「Update styles」をクリックします。

フォントファミリーが「Poppins」に変更されました。

日本語のフォントファミリーも追加してみました。

なお、元になるフレームをコピー・アンド・ペーストするとスタイルも当然引き継がれています。

一度スタイルを解除して、新しいスタイルを作成した上で、フォントファミリーを変更してください。

アイコンリストの作成

アイコンリストの作成も非常に重要です。

「FontAwesome」が最も有名ですが、「Iconify」なども人気があるアイコンセットです。

その他にもFIgmaには様々なアイコンのプラグインが用意されていますので、色々と試してみましょう。

個人的には「Material Icons（Google Icon）」も定番ですがお勧めです。

アイコンを選択する時は、「Outline icon」と「Fill icon」の2種類を用意しておくのと、アイコンのサイズを一定にしておくことを忘れないようにしましょう。

その他のリストの作成

今回利用したテンプレート「Style Guidelines」には、その他にも用意しておくべきリストが作成されています。

• Grid Systems：レイアウトグリッドを指定します。パソコン用、モバイル用などそれぞれにグリッドを指定するようにします。
• Spacing：スペースのサイズを指定します。
• Textfields：テキストの入力フィールドを指定します。
• Selectors：チェックボックスやラジオボタン、ドロップダウンなどを指定します。
• Buttons：ボタンを指定します。
• Small Elements：アップロードエリアやタグなどを作成します。
• Big Elements：イメージやテーブルなどを指定します。
• Cards：イメージやカードを作成します。

ここで用意されているすべてのコンポーネントを作成する必要はありません。

サイト作成に必要なコンポーネントのみを作成すれば大丈夫です。

まとめ

その他のリストの作成方法については割愛させて頂きましたが、スタイルガイドの作成方法はご理解頂けたと思います。

一気にすべてを作成しようとするとかなり手間と時間がかかりますので、十分に余裕をもって作成することをお勧めします。

ご自身専用のスタイルガイドを作成しておくと、新しいプロジェクトごとに1からスタイルガイドを作成する必要がなくなりますので、ぜひお時間のある時に少しずつ完成させてみてください。

今回は無料でアニメーションを取り込むことが出来るウェブツール「LottieFiles」を、UI/UXデザインを作成するのに最適なウェブツール「Figma」で使用する方法についてご紹介させて頂きます。

LottieFilesには沢山のアニメーションがありますので、動きのあるサイトを作成するには必須のツールです。

しかし動的なサイトのレイアウトは意外と難しいので、なかなか思い通りのサイトを作成出来ない場合が多々あります。

そんな問題を解消するのがFigmaで、組み合わせて使用することで、バランスの良いモダンなサイトの作成が簡単に出来るようになると思います。

使用方法もとても簡単ですので、ぜひこの機会に取り入れてみてください。

LottieFilesの詳しい使い方については以下をご参照ください。

LottieFiles 最新版 無料で使えるアニメーション 使い方ガイド ワードプレス・Figma・HTMLに簡単に挿入出来る

今回は誰でも簡単に、ウェブサイトやアプリにアニメーションを挿入することが出来る「LottieFiles」の使い方についてご紹介させて頂きます。アニメーションの実装というと、複雑で手間がかかり、ファイルサイズを気にしなくてはならない作業でした...

aftercovid20.com

2023.10.08

Figmaの詳しい使い方については以下をご参照ください。

2024 Figma 日本語版 無料で使えるデザインツール 登録方法から簡単な使い方まで

今回は無料で使えるデザインツール「Figma」についてご紹介させて頂きます。（Figmaは「フィグマ」と読みます。）すでにご存知の方もいらっしゃると思いますが、ウェブブラウザをベースに設計されたデザインツールで、ウェブ上で利用できるのが特徴...

aftercovid20.com

2024.01.30

プラグインのインストール

「Figma」のトップページから新規ファイルを作成します。

メインメニューから「プラグイン」→「プラグインをさらに検索」をクリックします。

検索ボックスに「LottieFiles」と入力して検索します。

「LottieFiles」が表示されますのでクリックします。

「LottieFiles for Figma」が表示されますので、「実行」をクリックします。

ログイン画面が表示されますので、「Login via Browser」をクリックします。

アカウントの開設をされていない方は「Sign Up」をクリックしてアカウントを開設してください。

「Awesome, you’re logged in!」と表示されればログインは完了です。

「Figma」に戻ってください。

LottieFilesの画面にアニメーションが表示されていますので、使用したいアニメーションを選択します。

アニメーションの検索

アニメーションの検索方法は、「Discover」、「Workspaces」、「Import」がありますが、基本的には「Discover」を使用します。

検索ボックスにキーワードを入力して検索するとアニメーションを絞り込むことが出来ます。

「Workspaces」は、LottieFilesのサイトやこのプラグインで編集・保存しているアニメーションが表示されます。

アニメーションの挿入

背景色の変更

気になるアニメーションをクリックします。

アニメーションが拡大されました。

背景色を変更するには、「Background Color」をクリックします。

カラーパレットが表示されますので、お好きな色に変更してください。

アニメーションの編集

アニメーションにもう少し編集を加えたい場合は、「Customize」をクリックします。

赤い枠線の中で編集項目を指定します。

デフォルトでは「Color palettes」になっていますので、下にある色の組み合わせから好きなものを選んでください。

選んだ色の組み合わせは、プレビュー画面で確認することが出来ます。

背景を変更したい場合は、「Background」をクリックして、カラーパレットから好みの色を選択してください。

アニメーションのスピードを調整するには、「１x」の部分をクリックしてください。

最大「2.5x」まで変更することが出来ます。

編集が完了したら、「Save animation」をクリックします。

ポップアップが表示されますので、「Save as new animation」をクリックしてください。

保存する場所が表示されますので、フォルダを指定して、「Save」をクリックしてください。

新しいフォルダを作成する場合は、「New Folder」をクリックします。

編集前の画面に、編集されたアニメーションが表示されていれば編集は完了です。

アニメーションの挿入

アニメーションの挿入方法は2種類あります。

「Insert as SVG」をクリックすると、SVGとして挿入されます。

「Convert to GIF」をクリックすると、GIFアニメーションとして挿入されます。

どちらを選択してもFigmaで編集している時には違いがありませんが、プレゼンテーションやプロトタイプの実行時に違いがあります。

SVGの場合は、アニメーションは実行されず静止画として表示されます。

GIFの場合は、アニメーションの動きも確認することが出来ます。

GIFの方がメリットがあるような気がしますが、ファイルの変換に少し時間がかかります。

どちらを選択するかは、必要に応じて選んでください。

SVGとして挿入

挿入

アニメーションをSVGとして挿入しみます。

「Insert as SVG」をクリックします。

挿入されたアニメーションは新しいフレームとして挿入されます。

編集中のフレーム内に収めるには、レイヤーで移動させるか、ドラッグ・アンド・ドロップでフレーム内に移動させてください。

編集

SVGにはレイヤー機能があるため、Figmaでもレイヤーごとに編集することが可能です。

ここでは大きいフォルダの矢印を黒色に、上にあるチェックボックスの色を赤色に変えてみました。

各パーツのサイズ変更も簡単にすることが出来ます。

レイヤーになっているパーツであれば、どれも詳細な編集をすることが可能です。

編集中のフレーム内に移動させてみました。

アニメーションのフレームが編集中のフレーム内に移動しているのを確認してください。

アニメーションフレーム全体の編集は、インスペクター内の基本的な編集のみになります。

再生

実際の画面でどのように見えるのかは、ツールバーにある「プレゼンテーション実行」ボタンをクリックします。

SVGファイルとして挿入していますので、アニメーションが動くことはありません。

GIFとして挿入

挿入

今度はGIFとして挿入してみます。

「Convert to GIF」をクリックします。

コンバートが完了するまでに少し時間がかかります。

コントロールバーが最後まで到達すると読み込みが完了します。

読み込みが完了したら、「Add to Figma」をクリックします。

ファイルが挿入されました。

挿入されたファイルはSVGと同様に、「Rectangle」という名前で新しいフレームとして挿入されます。

編集中のフレーム内に収めるには、レイヤーで移動させるか、ドラッグ・アンド・ドロップでフレーム内に移動させてください。

編集中のフレーム内に移動が完了した画像です。

「Desktop-1」の中に、アニメーションのレイヤー「Rectangle」が入っているのを確認してください。

挿入したアニメーションの動作を確認するには、インスペクターの「塗り」にある「GIF」をクリックするか、挿入したアニメーションをダブルクリックしてください。

ポップアップが表示されますので、再生ボタンをクリックすればアニメーションが実行されます。

編集

GIFとして挿入した場合、編集出来ることは限らています。

インスペクター内にある「サイズ変更」や「塗り」、「線」、「エフェクト」など基本的な編集のみになります。

再生

実際の画面でアニメーションがどのように動いているのかを確認するには、ツールバーにある「プレゼンテーション実行」ボタンをクリックします。

新しいウィンドウで開きますので、こちらで実際のアニメーションを確認することが出来ます。

まとめ

LottieFilesをFigmaで使う方法についてご紹介させて頂きました。

アニメーションの挿入方法には2種類あり、「SVG」で挿入するのか、「GIF」で挿入するのかを選ぶことが出来ます。

「SVG」は気に入ったアニメーションをすぐに挿入することが出来て、細かいパーツまで編集することが出来るので、思い通りのイメージで編集することが出来ますが、実際のアニメーションを確認することは出来ません。

「GIF」は実際のアニメーションを確認することが出来ますが、パーツなどの細かい編集をすることが出来ません。

どちらを使用するのかは、それぞれメリットとデメリットがありますので、用途に合わせて使い分けてください。

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

今回は、「LottieFilesをワードプレスで使用する方法」についてご紹介させて頂きます。

LottieFilesのウェブサイトからHTMLをコピーして、カスタムHTMLとして貼り付けても良いのですが、プラグインを使うと少しだけ簡単にアニメーションを利用することが出来ます。

プラグインのインストール方法から、基本的な使い方、CSSでのカスタマイズまでご紹介させて頂きますので、ぜひ参考にして頂ければ幸いです。

プラグインのインストール

ワードプレスのプラグインを使って、アニメーションを利用してみましょう。

まずはプラグインの新規追加画面で、「LottieFiles」と検索します。

一番最初に「LottieFiles – Gutenberg の Lottie ブロック」という名前のプラグインが表示されますので、「今すぐインストール」をクリックします。

インストールが完了したら、「有効化」をクリックしてください。

セットアップ画面が表示されました。

最初のチェックボックスには、「アカウントを他のワードプレスユーザーと共有するかどうか」と聞かれていますので、チェックを外します。

2番目のチェックボックスは、「LottieFilesとデータを共有するかどうか」と聞かれていますので、好みでチェックをしてください。

内容を確認したら、「Log in with your LottieFiles account」をクリックします。

もしアカウントを持っていない場合は、「Create an account for free」をクリックしてアカウントを開設してください。

アカウントの開設方法は前回の記事で詳しくご紹介させて頂いております。

すでにブラウザでLottieFilesを使用していれば、自動でログインされると思います。

別ウィンドウでこのような画面が表示されればログイン完了です。

画面を閉じて、ワードプレスに戻ってください。

ログイン画面が表示された場合は、メールアドレスとパスワードを入力してログインしてください。

次に設定画面が表示されていますので内容を確認していきます。

最初のチェックボックスは、「アカウントを他のワードプレスユーザーと共有しますか」という先ほどと同じ内容ですので、チェックなしにしておきます。

次は、「LottieFilesのファイルをワードプレスのメディアライブラリにコピーするかどうか」という内容ですので、チェックは外したままで良いかと思います。

最後は、「Usage data sharing」という部分で「利用データを共有するかどうか」という内容ですので、好みでチェックをしてください。

設定が完了したら、「Save Change」をクリックします。

使い方

アニメーションの選択

使い方は幾つかあるのですが、一般的な使い方です。

まず「+」ボタンをクリックして、ブロックの「すべて表示」をクリックします。

左側の挿入バーにある「ウィジェット」内に「Lottie」のアイコンがありますので、こちらをクリックします。

「Lottie」のブロックが挿入されました。

「Discover animation」をクリックしてアニメーションを探します。

ポップアップ画面が表示されますので、アニメーションを探していきます。

検索の仕方は、「LottieFiles」のサイトで検索するのと同じ方法です。

赤い枠線の中で絞り込みます。

• Recent：最新のアニメーション
• Featured：お勧めのアニメーション
• Popular：人気のアニメーション

細かい絞り込み機能がありませんので、イメージするアニメーションがあれば、キーワードで検索したほうが速く見つかると思います。

「My Animations」をクリックすると、「LottieFiles」のサイトなどで保存したアニメーションが表示されます。

ここでは例として、「Featured」の中から選択してみます。

使いたいアイコンをクリックすると、「Insert animation」というボタンが表示されますので、こちらをクリックします。

編集

選択したアニメーションが挿入されました。

このまま何もしなくても保存すればウェブサイトに表示されますが、右側の設定画面で編集することが出来ます。

アクションの選択

「Play animation on」をクリックするとアニメーションをどのように動かすか指定することが出来ます。

• Page Load：ページを読み込んだ時
• Hover：マウスが乗った時
• Click：クリックした時
• Scroll：スクロールした時

デフォルトは「Page Load」になっていますので、好みで選択してください。

ループ・スピード・サイズの編集

• Loop：アニメーションの繰り返し設定です。デフォルトでは「オフ」になっています。
• Controls：コントロールバーの表示/非表示の設定です。デフォルトでは「オン」になっています。
• Speed：アニメーションのスピードを設定します。バーを動かすと最大「５」まで指定出来ますが、直接数値を入力すれば、「100」以上でも指定することが出来ます。
• Width：横幅です。ピクセルまたは%で指定します。
• Height：縦幅です。ピクセルまたは%で指定します。

背景の指定

「Background Color」では背景を選択することが出来ます。

下に表示されているカラーの中から好みの色を選択すれば、背景が変わります。

ボックスをクリックするとカラーパレットが表示されますので、詳細な色を指定することも出来ます。

カラーパレットにあるアイコンをクリックすると、カラーコードを直接入力することも出来ます。

「Hex」をクリックすると、「HSL」、「RGB」での入力も可能になります。

高度な設定

「高度な設定」をクリックすると、「Play mode」と「Direction」を指定することが出来ます。

Play mode

• Normal：一方方向のアニメーション
• Bounce：逆方向有りのアニメーション

Direction

• Forward：前向き
• Backward：後ろ向き

「追加CSSクラス」は、CSSで編集を加える場合のみ記入します。

配置

アニメーションのサイズにもよりますが、配置する場所はワードプレスのデフォルトの機能で、「左寄せ」、「中央寄せ」、「右寄せ」で指定します。

CSSで編集する

通常の段落にプラグインを使用して挿入すると画面幅いっぱいに配置されます。

これでも特に問題はないのですが、状況によっては背景のサイズを変更したりしたい場合もあると思います。

そのような時は、CSSを使って色々と編集することが可能です。

CSSの知識が全くない場合は面倒かもしれませんが、少しでも知識がある方であれば、簡単に編集が出来ると思います。

CSSでの編集方法は幾つかやり方があるのですが、最も簡単な方法をご紹介させて頂きます。

先程の「高度な設定」の「追加CSSクラス」に適当なクラス名を指定します。

後はページの下にある「カスタムCSS」エリアに、指定したいプロパティを記述すれば完成です。

ここでは単純にサイズ変更と中央揃え、ボックスに影を付けています。

あまり面倒な指定はする必要はありませんが、基本的なプロパティはすべて有効です。

また「id」を付与すれば当然「JS」を使用することも可能です。

まとめ

今回は「LottieFiles」をワードプレスのプラグインで使用する方法についてご紹介させて頂きました。

沢山の設定があるように感じた方もいらっしゃるかと思いますが、一度操作してしまえば時間はそれほどかかりません。

やはり面倒なのは、LottieFilesのサイトを利用するのと同じように、アニメーションを探すのが最も大変な作業です。

事前に使用したいアニメーションをLottieFilesのサイトで見つけておいて「My animation」に保存しておけば、効率よくアニメーションを利用できると思います。

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

LottieFilesの登録方法や基本的な使い方は以下の記事で詳しくご紹介させて頂いております。

LottieFiles 最新版 無料で使えるアニメーション 使い方ガイド ワードプレス・Figma・HTMLに簡単に挿入出来る

今回は誰でも簡単に、ウェブサイトやアプリにアニメーションを挿入することが出来る「LottieFiles」の使い方についてご紹介させて頂きます。アニメーションの実装というと、複雑で手間がかかり、ファイルサイズを気にしなくてはならない作業でした...

aftercovid20.com

2023.10.08

今回は誰でも簡単に、ウェブサイトやアプリにアニメーションを挿入することが出来る「LottieFiles」の使い方についてご紹介させて頂きます。

アニメーションの実装というと、複雑で手間がかかり、ファイルサイズを気にしなくてはならない作業でしたが、「Lottie」であれば簡単にかつ軽量化させて実装することが可能です。

また、「Figma」や「ワードプレス」には専用のプラグインが、コーディングするには「HTML」を利用することが出来ますので、幅広いニーズに対応しています。

ぜひ今回の記事を参考に、今まで以上にリッチなウェブサイトを作成してみてください。

LottieFilesとは

「LottieFiles」とは、様々なLottieファイル（アニメーション）を無料で使用できるストックサイトです。

そもそも「Lottie（ロッティー）」とは、何かというと、「AfterEffects」で作ったアニメーションをJSONを通して、簡単にウェブサイトやアプリに実装することが出来るようにするファイル形式のことを言います。

Lottieを使うことによる大きなメリットは、アニメーションの実装を簡単にすることが出来ることです。

また基本的には軽量になり、拡大縮小も解像度を気にせずに行うことが出来るのもメリットの一つです。

但しデメリットももちろんあり、あまり複雑な効果や、BGMなどの音楽をつけることは出来ません。

会員登録

LottieFiles公式サイト

まずは「会員登録」を行います。

公式サイトのトップページの右上にある「Sign up」をクリックするか、サイト内にある「Get Started – It’s Free」のどちらかをクリックします。

「Get Started – It’s Free」をクリックした場合は、ポップアップが表示されますので、「Sign Up」をクリックします。

「Create an account」の部分からアカウンを開設します。

Google やFacebookなどでログインする場合は、それぞれのアイコンをクリックしてください。

ここでは「名前」と「メールアドレス」、「パスワード」を入力してアカウントを開設していきます。

入力が完了したら、「Create an account」をクリックします。

簡単なアンケートが表示されますので、該当するものにチェックを入れて、「Let’ Go」をクリックしてください。

トップページの右上にアイコンが表示されれば、「Sign Up」は完了です。

登録したメールアドレスに、「Please verify your email address」というタイトルのメールが届きますので、忘れずに「Verify now」をクリックして認証を済ませておきましょう。

探し方

アニメーションの基本的な探し方について見ていきましょう。

まずツールバーにある「Products」をクリックして、「Free Animations」をクリックします。

Featured

アニメーションが表示されました。

とても沢山のアニメーションがあるので、一つ一つ確認していくのは大変です。

上部にテーマが記載されていますがあまり絞り込むことは出来ません。

トップページは「Featured」になっていて、お勧めのアニメーションが並んでいます。

Recent

「Recent」をクリックすると登録の新しい順にアニメーションが表示されます。

Popular

「Popular」をクリックすると、人気順にアニメーションが表示されます。

画面右上の部分で期間を絞り込むことが出来ます。

• Weekly：週間
• Monthly：月間
• All Time：全期間

Animators

「Animators」をクリックすると、アニメーターごとのアニメーションが表示されます。

但し、ここに表示されているアニメーションはこの画面では選択することが出来ません。

アニメーターの名前かプロフィールアイコンをクリックすると、別ウィンドウが開きますので、その画面で選択することになります。

アニメーターのすべての作品が表示されますので、こちらからアニメーションを選択します。

オリジナルのアニメーションをアニメーターに依頼したい場合は、「Hire me」をクリックして依頼してください。（もちろん有料になります）

Marketplace

「Marketplace」をクリックすると、別ウィンドウが開いてアニメーションが表示されます。

但しこちらのアニメーションを使用するには「有料プラン」への加入が必要となりますので、ご注意ください。

ご興味のある方は、「View All」をクリックすると他のアニメーションを見ることも出来ます。

Categories

「Categories」をクリックするとカテゴリーが表示されます。

カテゴリーと言ってもかなりの数のカテゴリーがありますので、カテゴリーを絞り込むのも大変です。

Countries

「Countries」をクリックすると、国ごとに絞り込むことが出来ます。

Collections

「Collections」をクリックすると、コミュニティーで選別されたコレクションが表示されます。

タイトルを見ると選びやすい気がしますが、沢山のコレクションがあるので、コレクションを探すのにかなり手間がかかると思います。

使い方

アニメーションを選択

基本的な使い方を見ていきます。

まず、気になるアニメーションがあれば画面上でクリックします。

クリックしたアニメーションの編集画面が表示されます。

上部にはプレビュー画面が表示され、赤い枠線の中の部分で編集していきます。

編集の項目は以下になります。

• Animation Speed
• Background Color
• Color Palette
• oEmbed URL：こちらの使い方は割愛させて頂きます。
• Use animation in…
• Interactivity：こちらの使い方は割愛させて頂きます。
• Edit Layer Colors
• Test animation for mobile：クリックするとQRコードが表示されますので、スマートフォンで読み取るとページが表示されます。

Animation Speed

「Animation Speed」をクリックすると、アニメーションの速度を変更することが出来ます。

1回クリックするごとに、「0.5」ずつ速くなります。

選択できる速度は、「1x」、「1.5x」、「2x」、「2.5x」の4種類になります。

Background Color

「Background Color」をクリックすると、背景を変更することが出来ます。

例として5色選択出来るようになっていますが、HEX（16進数）を直接入力することも可能です。

Color Palette

「Color Palette」では色の組み合わせを変更することが出来ます。

例として3パターンが表示されていますが、どれかをクリックすると左上にカラーパレットが表示されます。

この中からも別のパターンを選択することが出来ますので、好みのパターンを選んでください。

カラーパレットの色を選択したら、最後に「Upload to My Private Animation」をクリックします。

別ウィンドウが立ち上がりますのでそちらで編集・保存します。

Use animation in…

アニメーションをどうやって使用するか選択します。

ご自身で使用しているツールがあればそちらを利用することになると思います。

ツールによってはプラグインをインストールする必要がありますので、ご自身の環境に従ってください。

ここではほとんどの方が利用できる「HTML」での使い方についてご紹介させて頂きます。

ワードプレスのプラグインを利用する場合は以下の記事でご紹介させて頂いております。

LottieFiles 無料アニメーション ワードプレスのプラグインで利用する方法

今回は、「LottieFilesをワードプレスで使用する方法」についてご紹介させて頂きます。LottieFilesのウェブサイトからHTMLをコピーして、カスタムHTMLとして貼り付けても良いのですが、プラグインを使うと少しだけ簡単にアニメ...

aftercovid20.com

2022.08.18

Edit Layer Colors

「Edit Layer Colors」をクリックすると、別ウィンドウで「Lottie Editor」が立ち上がります。

アニメーションをレイヤーごとに編集することが出来ます。

とても便利なツールに思えますが、実際に操作してみた感想としてはあまりお勧めは出来ません。

デメリットとして挙げられるのは以下の点です。

• レイヤーがどの部分のものか分からない：一応レイヤー名はありますが、クリックしてもプレビュー画面にはどの部分を選択しているのか分からないので、手探りで操作していくことになります。
• パソコンのメモリを消費する：このエディターを使用しているとパソコンのメモリをあっという間に消費していきます。

ご参考までに、私のパソコンのスペックは、「intel i7 メモリ16G ストレージ512GB」ですが、それでも割りと早めに強制終了させられましたので、安心して使えるという感じではないような気がします。

このあたりはご自身で操作してみて体感してみてください。

HTMLでの挿入方法

「Use animation in…」にあるHTMLをクリックします。

別ウィンドウが開き、HTMLの編集画面が表示されます。

一番上には、このアニメーションのJSON URLが表示されています。

特にここは編集する必要はありません。

赤い枠線の中の部分を操作してアニメーションを編集していきます。

編集

「PLAY MODE」では、「Normal」と「Bounce」のどちらかを選択します。

• Normal：一方方向のアニメーション
• Bounce：逆方向有りのアニメーション

言葉だと少しわかりにくいですが、実際にプレビュー画面を見て頂くと分かると思います。

「DIRECTION」では、アニメーションの方向を選択します。

• Forward：前向き
• Backward：後ろ向き

「BACKGROUND」では背景色を指定します。

デフォルトは「transparent（透明）」になっています。

カラーパレットから好みの色を選択してください。

「WIDTH」、「HEIGHT」で横幅と高さを指定します。

ピクセル、またはパーセントで指定します。

「ANIMATION SPEED」でアニメーションのスピードを指定することが出来ます。

はっきりとした最大値は分かりませんが、「370」までは動いているような感じが見えました。

それ以上は設定出来ても動作を確認出来ないのではないかと思います。

• Controls：コントロールバーの表示/非表示設定
• Autoplay：自動再生設定
• Hover：マウスが乗った時の動作設定
• Loop：繰り返しの設定

挿入

編集が完了したら、画面一番下の「Copy Code」をクリックして、コードをコピーします。

後はHTMLファイルの中にペーストすれば、完成です。

この記事は「ワードプレス」で作成されていますので、「カスタムHTML」を選択してペーストすればこのように表示されます。

なお、「class」や「id」を付与することが出来ますので、「VSCode」のようなコードエディタであれば、CSSで編集したり、JSで何かしらのアクションを加えることも可能です。

コーディングが出来る方であれば、色々とアレンジを加えてみても良いかもしれません。

まとめ

今回は、LottieFilesの基本的な使い方についてご紹介させて頂きました。

アニメーションをサイトに取り込むこと自体は難しくないのですが、肝心のアニメーションを探すのに少し手間がかかるかもしれません。

また今回はご紹介出来ませんでしたが、ワードプレスを利用されている方であれば「プラグイン」を利用して挿入することも可能です。

こちらについては以下の記事でご紹介させて頂いておりますので、ぜひご覧になってみてください。

LottieFiles 無料アニメーション ワードプレスのプラグインで利用する方法

今回は、「LottieFilesをワードプレスで使用する方法」についてご紹介させて頂きます。LottieFilesのウェブサイトからHTMLをコピーして、カスタムHTMLとして貼り付けても良いのですが、プラグインを使うと少しだけ簡単にアニメ...

aftercovid20.com

2022.08.18

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

今回は「プロトタイプ」を作成して、今まで作成してきたデザインが実際にどのように動作するのかを確認してみましょう。

フレームに名前を付ける

今まで「iPhone 13 / 13 Pro -1」のような名前がついていたフレームですが、すべてのフレームに分かりやすい名前を付けておきましょう。

レイヤーにあるフレーム名をダブルクリックして変更してください。

プロトタイプの作成

プロトタイプとは

プロトタイプとは、「画面をクリック（タップ）したときなど、どの画面に移動したりするかなどを作成したデザイン上で再現できる機能」のことになります。

専門用語で言えば、「画面の遷移やインタラクションの挙動を再現出来る機能」のことを言います。

開始点の作成

開始するフレームを選択して、インスペクターの「プロトタイプ」をクリックします。

ここでは開始フレームは「Front-page」になります。

どこから始めても良いのですが、この画面では通常、「ログイン」ボタンをタップした時にイベントが発生すると思います。

そこで開始点を「ログイン」ボタンに設定しますので、「ログイン」ボタンを選択します。

「ログイン」ボタンに、円形のハンドルが表示されているのが分かると思います。

この円形のハンドルをドラッグして、次の画面につなげていきます。

フレームの接続

「ホットスポット」をドラッグすると矢印の付いた線が表示されますので、移動したい次のフレームに接続させます。

次のフレームの枠線が表示されれば、接続は完了です。

「インタラクション詳細」が表示されますので、ここで移動の際の挙動を設定します。

デフォルトであれば、「ログイン」ボタンをタップすれば、すぐに次のフレームが表示されるようになっています。

「インタラクション詳細」の「タップ」の部分をクリックすると、開始点での動作を指定することが出来ます。

アプリだと「タップ」が基本になると思いますが、PC画面を作成するときには、他の動作も必要になると思います。

状況に合わせて選択してください。

「インタラクション詳細」の「次に移動」の部分をクリックすると、どのような動作を行うか指定することが出来ます。

「インタラクション詳細」のアニメーション内にある「即時」の部分をクリックすると、アニメーションの設定を行うことが出来ます。

色々なアニメーションを試してみてください。

複数のフレームの接続

1枚目のフレームと2枚目のフレームがつながったので、次に2枚目のフレームと3枚目のフレームを接続します。

どのような接続の仕方でも良いのですが、ここでは、3枚目の拡大した画像と同じ画像をタップすると3枚目が表示されるようにしていきます。

まず拡大する画像をクリックします。

先程と同じようにホットスポットが表示されますので、ドラッグして3枚目のフレームと接続します。

これで、2枚目の画像をタップすると3枚目が表示されるようになりました。

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

3枚目の画像のハンバーガーメニューをタップすると、メニューが表示されるように、もう1枚フレームを作成していきましょう。

3枚目のフレームを選択して、Ctrl + D でコピーしたフレームを作成します。

タブバー以外のすべての部分を選択します。

選択した範囲の中で右クリックして、「選択範囲のグループ化」をクリックします。

または、Ctrl + G でグループ化してください。

グループ化した範囲を水平に左側に移動させます。

これで右側にメニューを作成するスペースを作ることが出来ました。

ここでは左側に移動しましたが、右側でも上でも、メニューを作成するスペースが作成出来ればどの方向でも構いません。

幾つかのメニューを作成してみました。

数や場所はどこでも構いません。

テキストの下に下線を引いてみました。

「鉛筆」またはCtrl + P で引くことが出来ます。

アイコンも追加してみました。

背景色をタブバーと合わせて一体感を出してみました。

せっかくですので、色々と試してみてください。

ハンバーガーメニューと接続

3枚目のフレームにあるハンバーガーメニューのホットスポットを、4枚目のフレームと接続します。

戻る接続の設定

今までは、「進む」接続の設定を行ってきましたので、「戻る」接続の設定も行っていきましょう。

全く同じにする必要はありませんので、必要に応じて設定してください。

ここでは、4枚目のハンバーガーメニューをタップすると3枚目に戻ります。

タブバーの戻るボタンをタップすると前のページに戻るように、すべてのページに設定します。

場所によってはこのように「戻る」ボタンが表示される場合があります。

すべてのフレームが、「進む」と「戻る」で繋がっていれば完成です。

プロトタイプのテスト

「プロトタイプのテスト」は簡単です。

ツールバーにある再生ボタンをクリックすると、別ウィンドウが表示されテストを行うことが出来ます。

インスペクター内で背景を変更することが出来ますので、好みに色に変更しておきましょう。

また「モデル」でフレームの色を選択することも出来ます。

別ウィンドウでプロトタイプのテストが表示されました。

設定したとおりに動くかどうか確認してみましょう。

まずは、「ログイン」ボタンをクリックしてみます。

2枚目のフレームが表示されました。

続いて、右下の画像をクリックしてみます。

3枚目が表示されました。

動作の確認と合わせて、表示の不具合も確認しておきましょう。

ここでは上部に配置した３つのアイコンが、２つしか表示されていないので後で編集しておく必要があります。

位置も修正する必要がありそうです。

続いてタブバーのハンバーガーメニューをクリックします。

無事に4枚目まで表示することが出来ました。

同じ手順で接続の設定したボタンをクリックしてみて、動作確認をしてください。

プロトタイプを共有する

リンクを知っているユーザー全員が閲覧出来るようにする

作成したプロトタイプを共有してみましょう。

ツールバーにある「プロトタイプを共有」ボタンをクリックします。

ポップアップウィンドウが表示されますので設定していきます。

デフォルトの状態でボックス内にメールアドレスを入力して「招待を送信」ボタンをクリックすると、メールを受信した相手は、メール内にあるリンクを表示するだけで、プロトタイプを閲覧することが可能です。

直接リンク先を伝えたい場合は、画面の右下にある「リンクをコピーする」をクリックして、コピーしたリンクを直接メール等で連絡してください。

招待されたユーザーのみが閲覧出来るようにする

特定の相手のみとプロトタイプを共有する場合は、画面一番下の「リンクを知っているユーザー全員」の部分をクリックすると、「このファイルに招待されたユーザーのみ」という項目が表示されますので、こちらを選択します。

この状態でメールアドレスを入力して「招待を送信」ボタンをクリックすると、招待された方のみが閲覧出来るようになります。

プロトタイプをページに埋め込む

プロトタイプをWebサイトなどに埋め込むことも可能です。

画面上部にある「埋め込み」タグをクリックすると、コードが表示されますので、画面下の「コードをコピー」ボタンをクリックして埋め込みます。

このような形でプロトタイプを埋め込むことも可能です。

まとめ

全3回に渡ってFigmaを使ったアプリデザインの作成方法についてご紹介させて頂きました。

操作の方法はあくまでも一つの例としてご紹介させて頂いておりますので、実際に色々な操作をしてみて、ご自身にあった使い方をマスターしてください。

初めてFigmaを使う方が迷わずにデザインを完成できるようにご説明させて頂いたつもりですが、きちんとお伝え出来ていない部分もあったと思いますが、最後までお読み頂き誠にありがとうございました。

第1回、第2回は以下になりますので、合わせてご参照ください。

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

今回は「Figma」を使って簡単な「アプリのデザインを作成」してみましょう。初めてFigmaを使う方でも迷わず作成出来ますので、ぜひ一緒に操作してみてください。第1回では、「フレームの作成方法」と「アイコンの作成方法」、「外部アイコンの取り...

aftercovid20.com

2022.08.12

第2回 Figma を使ってアプリのデザインを作成しよう ページの複製と画像の挿入

前回はフレームの作成やアイコンの作成方法などを中心にご紹介させて頂きましたが、今回は実際の画面となるフレームを作成していきます。「プラグインを使った画像の挿入方法」や「ページの複製方法」、「アイコンの挿入方法」などを学習しながら、インスタグ...

aftercovid20.com

2022.08.14

前回はフレームの作成やアイコンの作成方法などを中心にご紹介させて頂きましたが、今回は実際の画面となるフレームを作成していきます。

「プラグインを使った画像の挿入方法」や「ページの複製方法」、「アイコンの挿入方法」などを学習しながら、インスタグラムのような「写真投稿アプリ」をイメージして３つのフレームを完成させていきます。

新規フレームの作成

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

列は「2列」、余白は「15」、ガターは「10」に指定しました。

色は後で変更しますので、適当な色を選択してください。

タブバーの作成

画面の下部に、「タブバー」を配置します。

高さは「83px」に指定しました。

アイコンの配置

新規レイヤーとアイコンのレイヤーを並べて表示します。

アイコンに関しては、前回自作したものと、「FontAwesome」から取り込んだものを用意しています。

Width（ワイズ）を「32px」で統一しています。

カメラアイコンをクリックしたまま、Alt キーを押しつづけて、新規フレームにアイコンを移動させます。

必要なアイコンをタブバーの中へ移動させてください。

どのアイコンを使っても構いません。

高さや幅が揃っていないので、調整していきます。

タブバーと各アイコンをまとめて選択します。

インスペクターの一番上にある配置アイコンの中から、「垂直方向の中央揃え」をクリックします。

アイコンの間隔を調整するには、「均等配置」などを使用すると上手く揃えることが出来ます。

その他のアイコンなども使って好みの場所に配置してください。

画像の挿入

画像の挿入方法は幾つかのやり方があるのですが、ここではプラグインを利用してフリー画像から画像を挿入して行きたいと思います。

ご自身で用意した画像を使用する場合は、以下の手順で挿入します。

「メインメニュー」をクリックして、「ファイル」→「画像の配置」をクリックして、画像を選択して挿入してください。

プラグインを利用したフリー画像の挿入方法です。

「メインメニュー」から「プラグイン」→「プラグインをさらに検索」をクリックします。

「リソース」が表示され、プラグインの検索画面が表示されますので、「unsplash」と入力して検索します。

一番上に「Unsplash」と表示されますので、その上にマウスを移動します。

「実行」と表示されますので、このボタンをクリックします。

「Unsplash」のウィンドウが表示されれば、プラグインのインストールは完了です。

サンプルデザインの作成なので、最初に表示された画像を使用しても良いのですが、せっかくなのでテーマを絞って検索してみます。

メニューにある「サーチアイコン」をクリックすると、検索ボックスが表示されますので、キーワードを入力して「Search」ボタンをクリックしてください。

下によく検索されるタブがありますので、そちらをクリックしても構いません。

テーマに沿った画像が表示されますので、気になる画像をクリックしてください。

ここでは一番最初の画像をクリックしてみます。

キャンパスに画像がダウンロードされているのが分かると思います。

レイヤーにもダウンロードした画像が表示されています。

同じ手順で好きな画像を6枚ダウンロードしてください。

縦向きと横向きの画像が表示されていますが、基本的にはどれでも構いません。

ここでは、縦4枚、横2枚をダウンロードします。

6枚の画像のダウンロードが完了したら、「Unsplash」のウィンドウは閉じてください。

1枚ずつ挿入していきますので、挿入しない画像は表示をオフにしておいたほうが作業がしやすいと思います。

このあたりは好みで作業を進めてください。

編集する画像を選択して、画像のサイズを変更します。

画像サイズの変更はインスペクターのところで行います。

ここではWidthを「175px」に指定します。

右側の「縦横比を固定」ボタンをクリックするのを忘れないでください。

この状態でEnter キーを押すと画像サイズが変更されます。

今回は画像をかなり小さくしたので、キャンパスから消えてしまっています。

「手のひらツール」でキャンパスをずらして表示させるか、「ズーム/表示オプション」から「自動ズーム調整」を選択して、キャンパスに画像を表示させてください。

ここでは「自動ズーム調整」を使って表示させます。

縮小した画像がキャンパスに表示されました。

この画像を右下のキャンパスに配置していきます。

表示サイズは好みのサイズに適時変更して、作業を進めてください。

画像をドラッグ・アンド・ドロップで、2本あるグリーンの線のどちらかの上に移動させます。

ラインを合わせて配置してください。

同じ手順で残りの5枚もグリーンのライン上に配置してください。

すべての画像が挿入出来たら、位置を調整してください。

列の一番上の、画像の開始位置だけ揃えておけば、他の画像は好みの間隔で配置してください。

背景色の変更

背景色とレイアウトグリッドの色を調整していきましょう。

まずはレイアウトグリッドの色の「％」を「０」にします。

画像がはっきりと表示されますので、だいぶ印象が変わったのではないでしょうか。

あとは「塗り」をクリックして、好みの背景色を選択してください。

背景色はいつでも変更可能です。

フレームのコピーを作成

今度は、画像を拡大した時の新規フレームを作成してみましょう。

まずは作成したフレームを選択します。

この状態でCtrl + D を押すか、メインメニューから「編集」→「複製」をクリックします。

同じフレームが右側に複製されました。

このフレームを使って次の作業を進めていきます。

画像フレームの編集

画像の拡大配置

画像の中から１枚だけを残して、残りはすべて削除します。

どの画像を残しても構いません。

拡大した画像をこのように配置します。

レイアウトグリッドのカラーを表示させた方が作業がしやすいかもしれません。

このあたりは好みで作業を進めてください。

画像タイトル＆キャプションを挿入

タイトルとキャプションを挿入します。

アイコンの挿入

画像の上部と下部に、インスタグラム風にアイコンを配置してみました。

どこに何を配置するのかは、好みで決めてください。

アバターの挿入

アバターを挿入してみましょう。

「楕円ツール」を使って、正円を挿入します。

ここでは、「50px / 50px」の正円を作成してみます。

正円を選択したままの状態で、プラグインの「Unsplash」を起動します。

ご自身の画像を使用する場合は、「ファイル」→「画像の配置」を選択してください。

「Face」と検索すると沢山の顔写真が表示されます。

ここでは「OSPAN ALI」さんを選択してみます。

自動で写真が挿入されました。

せっかくなので名前も挿入してみます。

テキストの部分が少し窮屈になっているので、レイアウトを整えます。

画像フレームの完成です。

サイズや配置は色々と試してみてください。

トップページの編集

背景に画像を挿入

今回作成した２つのフレームと、トップページ用のフレームのイメージが違いすぎるので、変更を加えておきます。

特に気にならない方は読み飛ばして頂いても構いません。

まずは、背景を変更してみます。

フレームを選択したままた、「Unsplash」を起動します。

背景にしたい画像をダブルクリックします。

インスペクターの「塗り」の部分に「画像」が追加されて、背景に設定されました。

全体の調整

テキストやログインボックスなど、全体を調整して完成です。

まとめ

ようやく３枚のフレームが完成しました。

次回はこの３枚のフレームを使って、「プロトタイプ」と呼ばれるものを作成していきます。

実際に操作された時にどのように画面が動くのかを確認することが出来ますので、ぜひ次回も合わせてご参照ください。

第3回 Figma を使ってアプリのデザインを作成しよう プロトタイプの作成方法

今回は「プロトタイプ」を作成して、今まで作成してきたデザインが実際にどのように動作するのかを確認してみましょう。フレームに名前を付ける今まで「iPhone 13 / 13 Pro -1」のような名前がついていたフレームですが、すべてのフレー...

aftercovid20.com

2022.08.14

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

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

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

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

フレームの作成

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

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

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

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

レイアウトグリッド

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

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

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

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

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

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

タイトルの作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ログインボタンの作成

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

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

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

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

グラデーションの背景

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

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

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

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

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

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

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

新規フレームの作成

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

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

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

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

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

アイコンの作成

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

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

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

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

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

レンズアイコンの作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ホームアイコンの作成

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

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

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

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

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

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

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

メールアイコンの作成

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

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

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

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

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

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

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

戻るボタンの作成

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

まず正円を描きます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Font Awesome公式サイト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

第2回 Figma を使ってアプリのデザインを作成しよう ページの複製と画像の挿入

前回はフレームの作成やアイコンの作成方法などを中心にご紹介させて頂きましたが、今回は実際の画面となるフレームを作成していきます。「プラグインを使った画像の挿入方法」や「ページの複製方法」、「アイコンの挿入方法」などを学習しながら、インスタグ...

aftercovid20.com

2022.08.14

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

今回は無料で使えるデザインツール「Figma」についてご紹介させて頂きます。

（Figmaは「フィグマ」と読みます。）

すでにご存知の方もいらっしゃると思いますが、ウェブブラウザをベースに設計されたデザインツールで、ウェブ上で利用できるのが特徴です。

また、複数人と同時にファイルの編集を行えるのも、大きな魅力の一つです。

直感的に操作が出来るので、基本的な操作を覚えてしまえば、誰でもすぐに利用出来ます。

これからデザインツールを使ってみようと考えている方には、特にお勧めしたいツールですので、ぜひ一緒に学んでいきましょう。

Figmaで出来ること

ワイヤーフレームや、UIデザイン、UXデザインの制作を簡単に行うことが出来ます。

こう書いてしまうと、デザイナーだけのものなのかと思われてしまいますが、パワーポイントで資料作成をしていた一般のビジネスマンにも、有効に活用する事ができるツールです。

• UIデザイン：ウェブサイト、アプリを快適に使うための設計
• UXデザイン：ユーザー体験の設計
• ワイヤーフレーム：ウェブページのレイアウト
• グラフィックデザイン
• 図や表の作成
• ブレインストーミング：FigJam

一般的にはこれらが主な機能になりますが、どのように利用するかはアイデア次第です。

始め方

Figmaを利用するのはとても簡単です。

公式サイトにアクセスして、アカウントを登録すれば、誰でも今すぐに利用を始める事ができます。

アカウントの登録に必要なのは、「Googleのアカウント」、または「メールアドレス」のみになります。

以下でアカウントの登録の方法について、詳しくご紹介させて頂いております。

日本語化

figma公式サイト

従来は、拡張機能を追加したり、日本語フォントをインストールする必要がありましたが、2022年7月27日より正式に日本語に対応したので、特別な操作は必要なくなりました。

上記のリンクからアクセスすれば、自動で日本語のサイトが表示されます。

言語設定を変更する場合は、ページの最下部で変更してください。

アカウント登録

figma公式サイト

画面右上にある「サインアップ」、または画面右側にある「始める」をクリックします。

「Google」でログインするか、メールアドレスとパスワードを設定してアカウントを作成しましょう。

ここではメールアドレスを使用してアカウントを開設します。

名前と職業を入力します。

職業は該当するものを選択してください。

このあたりは適当で良いと思います。

使用目的を選択します。

選択が完了したら、「アカウントを作成」をクリックします。

「メールの確認」画面が表示されますので、先程入力したメールの受信フォルダを確認してください。

「メールアドレスを確認してください」というタイトルでメールが届きますので、「メールを確認する」をクリックします。

ブラウザの画面が、「Figmaへようこそ」という画面に切り替われば、メールの認証は完了です。

チーム名が決まっている方は入力しても良いですが、とりあえず画面下にある「後で」をクリックします。

料金プランが表示されますので、とりあえず「無料で利用開始」をクリックします。

すぐに作業を行いたい方は、テンプレートを選択して作業を開始しても良いですが、とりあえずここでは「テンプレートを使用しない」をクリックします。

スタート画面が表示されました。

以上でアカウントの登録手続きは完了です。

新規ファイルの作成

新規ファイルの作成方法になります。

最も簡単な方法は、画面に右上に表示されている「デザインファイル」をクリックします。

またはメニュー内の「下書き」の上にマウスを移動すると「+」マークが表示されますので、ここをクリックします。

一番上の「デザインファイルを新規作成」をクリックします。

新規ファイルが作成されました。

インターフェイス

画面構成は、概ね4つのエリアに分かれています。

• ツールバー：メニューやツールが用意されています。
• レイヤー：ファイル内の要素が表示されます。
• キャンパス：作業を行います。
• インスペクター：選択したオブジェクトなどの情報が表示されます。

ツールバー

メインメニュー

ツールバーの一番左側にあるのが、「メニューアイコン」になります。

新しくフレームを作成する時は、ここから作成します。

それぞれの詳細な使い方は、その都度ご紹介させて頂きます。

移動ツール

三角形の矢印アイコンの横にある下向きの矢印をクリックすると以下のツールを利用出来ます。

• 移動
• 拡大縮小

リージョンツール

左から3番目のアイコンは「リージョンツール」になります。

• フレーム
• セクション
• スライス

シェイプツール

4番目のアイコンは「シェイプツール」になります。

• 長方形
• 直線
• 矢印
• 楕円
• 多角形
• 星
• 画像/動画を配置

描画ツール

5番目のアイコンは、「描画ツール」になります。

• ペン
• 鉛筆

テキストツール

「T」のアイコンは、「テキストツール」になります。

テキストを入力します。

リソース

「リソース」になります。

手のひらツール

手の形をしたアイコンは、「手のひらツール」になります。

コメントの追加

吹き出しアイコンは「コメントの追加」になります。

下書き/無題

「下書き/無題」では、ファイルの名前の変更などを行うことが出来ます。

共有

ブルーの「共有」ボタンをクリックすると、ファイルを他の人と共有することが出来ます。

ズーム/表示オプション

一番右の「100％」アイコンをクリックすると、表示に関連するオプションを指定することが出来ます。

基本的な使い方

フレームの作成

まずは「フレーム」を作成します。

ツールバーのフレームボタンをクリックするか、キーボードの F をクリックします。

右側のインスペクターにフレームの種類が表示されますので、好みのフレームをクリックします。

ここでは「デスクトップ」をクリックしてみます。

フレームは「Macbook pro」など細かく分類されていますので、もう一度絞り込みます。

「デスクトップ」をクリックします。

「デスクトップ」のフレームが作成されました。

背景の作成

「背景」の作成方法は色々あるのですが、ここではツールを使用してみるために、デスクトップのフレームの上に、同じサイズの「長方形」を作成してみます。

まずツールバーの「長方形」をクリックして、デスクトップのフレームをなぞるようにドラッグ・アンド・ドロップしてください。

インスペクター内の「塗り」にあるカラーボックスをクリックすると、カラーパレットが表示されますので、お好きな色を選択してください。

カラーボックスを閉じるには、「X」ボタンをクリックしてください。

なお、左側のレイヤー部分に、「Desktop」の下に「Rectangle（長方形）」という名前の新しいレイヤーが作成されているのを確認してください。

背景色の指定が完了しました。

テキストの入力

ツールバーの「T」アイコンをクリックします。

キャンパス上の適当な場所をクリックして入力します。

インスペクターの「テキスト」でサイズやフォントを変更します。

• Roboto：フォントの変更
• Regular：フォントの幅の変更
• 128：フォントサイズの変更
• 自動：行間の指定
• 0%：文字間隔の指定

さらに詳しい設定をしたい場合は、左下にある「3点リーダー」をクリックします。

「タイプの設定」が表示されます。

ここでは、指定したい部分にマウスを乗せるとプレビュー画面が表示されますので、視覚的に詳細な設定を行うことが出来ます。

ここまでの手順を繰り返して、長方形とテキストのみの、簡単なレイアウトを完成させてみました。

ズームイン&ズームアウト

ツールバーの右側にある「ズーム/表示オプション」をクリックして、表示サイズを変更することが出来ますが、実際の作業中ではショートカットを利用した方が便利です。

• Ctrl + + ：拡大
• Ctrl + – ：縮小

拡大縮小は、50％ ⇔ 100% ⇔ 200% などクリックするたびに、「倍」または「半分」のサイズに変更されます。

レイヤーの配置

「レイヤーの配置」方法も学んでおきましょう。

ここでは「About us」というテキストの位置を変更してみます。

現在「About us」レイヤーは一番上に位置しています。

この位置を変更するには、2つの方法があります。

• マウスで移動したい場所までドラッグ・アンド・ドロップ
• ショートカットキーを使って移動

どちらを使うかは好みで選んで頂いて構いませんが、個人的にはショートカットキーを使うのが便利なような気がします。

試しに、Ctrl + Shift + [　を押すと、「About us」レイヤーが一番後ろに移動したのが分かると思います。

背景よりも後ろになってしまったために、作業画面上では表示されなくなっています。

ボタンの作成

今まで見てきた、「長方形の作成」と「レイヤーの配置」を利用して、「ボタン」を作成してみましょう。

まずは、5つの長方形を作成して、メニュー内のテキストの上に配置します。

次に、インスペクター内にある「コーナー半径」の数値を「35」と入力します。

すると画像のように長方形の角が丸くなります。

５つのレイヤーをまとめて選択したまま、Ctrl + [　を押し続けると、長方形がテキストの下に移動しました。

最後に長方形の色を変更して、テキストの位置を調整すれば完成です。

まとめ

Figmaの登録方法から、簡単な使い方についてご紹介させて頂きました。

今までフォトショップやイラストレーターなどの編集ソフトや、ウェブ作成のソフトなどを使用したことのある方は、すぐに慣れてしまうと思います。

もちろん、そういったソフトを使用したことのない方でも、Figmaは直感的に操作出来るような設計になっていますので、しばらくすれば使いこなせるようになります。

ぜひ今回の記事を参考に、一人でも多くの方が「Figma」を使い始めることになれば幸いです。

Figmaを使ったデザインの作成方法については、以下の記事で詳しくご紹介させて頂いております。

合わせてご参照ください。

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

今回は「Figma」を使って簡単な「アプリのデザインを作成」してみましょう。初めてFigmaを使う方でも迷わず作成出来ますので、ぜひ一緒に操作してみてください。第1回では、「フレームの作成方法」と「アイコンの作成方法」、「外部アイコンの取り...

aftercovid20.com

2022.08.12

第2回 Figma を使ってアプリのデザインを作成しよう ページの複製と画像の挿入

前回はフレームの作成やアイコンの作成方法などを中心にご紹介させて頂きましたが、今回は実際の画面となるフレームを作成していきます。「プラグインを使った画像の挿入方法」や「ページの複製方法」、「アイコンの挿入方法」などを学習しながら、インスタグ...

aftercovid20.com

2022.08.14

第3回 Figma を使ってアプリのデザインを作成しよう プロトタイプの作成方法

今回は「プロトタイプ」を作成して、今まで作成してきたデザインが実際にどのように動作するのかを確認してみましょう。フレームに名前を付ける今まで「iPhone 13 / 13 Pro -1」のような名前がついていたフレームですが、すべてのフレー...

aftercovid20.com

2022.08.14

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