無料でも使える!デザインツールFlintoの使い方【初心者向け】

初心者向けにプロトタイピングツールのFlintoの使い方を紹介しています。誰でも初月は無料で利用できますし、複数人で共有しながらプロトタイプを作成できるデザインツールなので、ぜひ使い方をマスターして作業してみましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

プロトタイプを作成するデザインツールFlintoの使い方を初心者向けに紹介しています。

最初の30日間は無料で使えるツールなので、プロトタイピングを行う際にとても便利です。ぜひ活用してみてください。

 

なお本記事は、TechAcademyのUI/UXデザインオンラインブートキャンプの内容をもとに紹介しています。

 

Flintoとは

Flintoは非常にシンプルな操作で多彩な効果の付いたプロトタイプを作成することが可能なデザインツールです。

有料のアプリケーションですが、30日間の無料の試用期間があります。

 

Flintoの使い方

まず、以下のリンクにアクセスします。

https://www.flinto.com/

FlintoはMacにダウンロードして使用するバージョンと、ブラウザ上で動作するバージョンのふたつがあります。今回はWebの方を使用します。

右上のメニューから「Sign Up」を選択します。

flinto_p_1

メールアドレスとパスワードを設定し、下のボタンをクリックします。

アカウントの登録が完了したら、次は「Log in」メニューから管理画面にログインします。

flinto_p_2

 

[PR] UI/UXデザインで挫折しない学習方法を動画で公開中

実際にFlintoでプロトタイプを作ってみる

プロジェクトの新規作成と画像のアップロード

「New Prototype」をクリックします。

flinto_p_3

プロトタイプ用の画像をアップロードします。
画面の解像度は「640px×1096px」が推奨されています。

flinto_p_4

画像はデスクトップ等から直接ドラッグ&ドロップすることでPCからFlintoへとアップロードすることができます。

flinto_p_5

画像がUPされました。

flinto_p_6

画像はいくつでも追加することが可能です。

flinto_p_7

 

リンクの作成とアニメーション

画像からリンクの形成を行います。
リンクを貼りたい箇所をドラッグで範囲選択します。

flinto_p_8

範囲を設定すると、自動で以下のような紐が表示されます。

flinto_p_9

この紐をリンク先に設定したい箇所に繋げるだけで、リンクを作成することができます。
今回は2番目にアップロードした画面へリンクさせてみました。

flinto_p_10

この時、左下メニューの「Transitions」メニューからアニメーション効果を選択することができます。

flinto_p_11

また、一度形成したリンクを削除したい場合は以下の部分から「Delete」の文字をクリックします。

flinto_p_12

 

プレビューを使う

左上メニューの「Preview」をクリックすると、現在の状態をプレビューすることができます。

flinto_p_13

プレビュー時は作成したリンクなどを実際に動作させて確認することが可能です。先ほどリンクを貼った箇所をクリックします。

flinto_p_14

リンク先に設定した画面が表示されました。また、画面推移の際に指定したアニメーション効果なども実際に反映されます。

flinto_p_15

 

共有機能を使う

「Connect Dropbox」メニューからDropboxとの連携が可能です。

flinto_p_16

「Share&Install」メニューからは、作成したプロトタイプを共有することができます。

flinto_p_17

指定のメールアドレスへ送信する他に、「Quick Link」に表示されているリンクを利用することでプロトタイプをシェアすることが可能です。

flinto_p_18r

 

以上、Flintoの使い方について解説しました。

共有機能で同じプロトタイプを複数人で作成することも可能なので、チームでもぜひ活用してみてください。

[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

独学に限界を感じたら…テックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 独学に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料で予約する