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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,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] スマホアプリの開発で挫折しない学習方法を動画で公開中

実際に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デザイナーのサポートで学びたい場合はご参加ください。