TechAcademy（テックアカデミー） UX/UIデザインコース スマートフォンアプリ開発 アプリデザイン 【誰でも簡単に！】モックアップを作成できるおすすめツール5選
オーダーメイドコース
icon
icon
アプリデザイン

【誰でも簡単に！】モックアップを作成できるおすすめツール5選

ここではモックアップの作成を簡単な操作で行うことができる便利なツールを紹介していきます。Webデザインの作成時に外観・レイアウト等を確認するためにぜひご利用ください。誰でも簡単に使える便利なツールです。

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

モックアップとは、Webデザインの作成時に外観・レイアウト等を確認するためのものです。ここではモックアップの作成を簡単な操作で行うことができる便利なツールを紹介していきます。

 

draw.io

mu5_1

web上で操作するモックアップ作成ツールで、無料で使用可能です。

左のメニューからパーツを選び画面上へ配置し、右のメニューで色やテキストなどを編集します。

ローカルから画像ファイルをドラッグ＆ドロップしてアップロードすることも可能です。

チュートリアル動画もあるためいつでも使い方を確認することができます。

作成したxmlファイルはその場でダウンロードできる他、GoogleDrive・OneDrive・Dropboxなどのクラウドストレージに保存可能です。

draw.io

 

Mockingbird

mu5_2

draw.ioと同じくweb上で操作が可能なツールです。

「Add element」メニューから素材を配置し、大きさやテキストを編集することでモックアップを作成します。

ステンシルにGoogleマップやSNSアイコンなど実用的なものが多く、イメージしやすい仕様になっています。

無料会員でも画面内への画像ファイルのインポートや、作成したモックアップのpdf・png形式でのエクスポートが可能です。

Mockingbirdの使い方

 

[PR] Webデザインで副業する方法とは

gliffy

mu5_3

こちらもweb上で作成可能なモックアップ作成ツールです。

メニューバーのカスタマイズがある程度可能になっており、自分の作業しやすい環境にできるのが特徴です。

ユーザー登録をしている場合は画像のアップロードも可能になっています。

無料版ではgliffy専用のファイル形式でのみファイルのエクスポートができる仕様です。

gliffyの使い方

 

moqups

mu5_4

web上でモックアップの作成が可能なツールで、ステンシルやアイコンが豊富 に用意されています。

ユーザー登録をしている場合は画像ファイルのアップロードも可能です。(無料会員でも可)

作成したファイルをpdf・pngでエクスポートする場合は有料会員登録が必要になっています。

moqups

 

Flinto

mu5_5

スマートフォン向けのモックアップ作成ツールで、ダウンロードして使用します。

macとiOSでの作業が可能で、どちらも有料ですが無料の試用期間があります。

画像をアップロードし、それらを繋げて画面遷移の設定を行うことができます。また、この時ページ遷移時のエフェクトも複数から選べるようになっています。

Dropboxとの連携やシェア機能も充実しているのが特徴です。

Flinto

 

以上、モックアップを作成するツールを紹介しました。

会議やプレゼンでも利用できますし、個人でWebサービスを作る上でも役立つツールなのでぜひ利用してみてください。

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

記事を検索

関連するキーワード

関連する記事

意味のあるデザインを！自然なアニメーションの作り方

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、ソフトウェアデベロッパーのNick Babich氏によ...
アプリデザイン

【初心者でも分かる！】デザインツールJustinmindの使い方

初心者の方でも分かるようにJustinmindの使い方について解説している記事です。 サイトのワイヤーフレームやプロトタイプを作成する上で非常に便利なツー...
アプリデザイン

UIデザインの作成ツール！誰でも分かるSketchの使い方【初心者向け】

アプリのUIデザインなどを作る上で有名なツール「Sketch」 デザイナーの方でSketchを使っている人は多いでしょう。元からあるツールや機能が多くUI...
アプリデザイン

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。 &...
アプリデザイン

目的を見失わないために！プロトタイピングの間違った手法とは

本稿は、Studio by UXPinのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はUXPinのUXデザイナーであるMarcin T...
アプリデザイン

なぜ社会現象にまでなったのか！ポケモンGOに学ぶARアプリの最適なUXとは

本稿は、UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 また本記事は、以前はAT&Tで開発に携わり、現在はUXPinのコン...
アプリデザイン

あわせてよく読まれている記事

JavaScriptでCSVファイルを読み込む方法を現役エンジニアが解説【初心者向け】

JavaScriptでファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次draw.ioMockingbirdgliffymoqupsFlinto そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   JavaScriptによるファイルの読み込み Webサイトでは、ファイルをアップロードすることでアプリケーションの機能を利用することがよくあります。 例えばマイページがあるようなサイトで、自身のプロフィール画像を登録するために画像ファイルを登録する時には、ファイルをアップロードすることになります。 本記事では、ファイルの読み込み方法と、読み込んだ後の処理の方法について、ファイルの種類別に解説していきます。   実際にファイルを読み込んでみよう ファイルを読み込んで、JavaScriptで取得するまでの一連の手順を紹介します。   1．input要素をHTMLに記述する ファイルを読み込むには、まずHTMLに要素を追加する必要があります。 追加する要素はinput要素で、type属性に”file”を指定します。 また、あとでJavaScriptで取得できるよう、任意のidをつけておきましょう。 <input id="upload-file" type="file">   ブラウザで確認してみると、ファイルを選択できるボタンが設置されています。 「ファイルを選択」より任意のファイルを選ぶと、ブラウザ内に自動的にファイルが読み込まれます。   2．input要素をJavaScript側で取得する 1で指定したid属性の値によって、input要素を取得します。 idによる要素の取得には、document.getElementByIdを用います。 const input = document.getElementById('upload-file');   3．ファイルの読み込みを検知する ファイルを取得するには、「input要素にファイルが指定された」というイベントを検知する必要があります。 ファイルのアップロードは、changeというイベント名で取得できます。 changeイベントを取得するには、addEventListenerを用いて以下のように書きます。 input.addEventListener('change', (e) => { console.log('ファイルが検知された！'); }); 1行目の後半から始まる関数は、イベントリスナの「コールバック関数」と呼ばれ、指定したイベントが発生したタイミングで実行されます。 コールバック関数の関数の引数として、 e という変数が指定されていますね。 引数 e は、ファイルの情報を取得するための重要な引数です。 eについて、次の項目で詳しく説明します。   4．読み込まれたファイルを取得する 3では、「ファイルが読み込まれた」という状態を検知しましたが、まだファイルの中身は取得できていません。 アップロードされたファイルの情報を得るには、イベントリスナのコールバック関数の引数を利用します。 input.addEventListener('change', (e) => { console.log(e.target.files[0]); }); コールバック関数の引数（ここではe）には、発生したイベントに関する情報が入っています。 そのなかで、e.target.filesは、アップロードされたファイルが配列になっています。 アップロードされたファイルが1つならば、e.target.files[0]でそのファイルを取得できます。 ※複数ファイルのアップロードについては本記事の最後に紹介します。   一連の処理を行ってみよう それでは、解説した1〜4の処理を実際に行ってみましょう。 完成形のコードは以下の通りです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input id="upload-file" type="file"> <script> //JavaScriptの記述
JavaScript

今さら聞けない！GitHubの使い方【超初心者向け】

開発者にとってなくてはならないサービスとしてGitHubがあります。 エンジニアにとっては当たり前のサービスですが、これからプログラミングの勉強を始める初心者にとってはよくわからないかもしれません。 そこで今回は、GitHubの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもGitHubとは何なのか、どんな時に使うツールなのかを知っていきながら、実際の使い方を紹介しています。 本格的に使おうと思ったらもっと多くのことを知る必要がありますが、業務で使うということでなければ十分でしょう。 目次draw.ioMockingbirdgliffymoqupsFlinto Gitについてそもそもよく分からないという方は、GitHubとは何なのか解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。     大石ゆかり 田島メンター！！GitHubってなんですか〜？ 田島悠介 GitHubはね、Gitをオンライン上で管理するサービスだよ。 大石ゆかり もう少し詳しく教えてもらえますか〜？   GitHubとは GitHubとは、ソフトウェア開発プロジェクトのためのソースコード管理サービスです。 ソースコードを更新したバージョンの管理や閲覧、バグ追跡機能、SNSの機能を備えており、開発者にとってなくてはならないサービスです。 また、GitHubを使ってソースコードの管理を行っている企業も多数あります。   GitHubが人気な理由と類似サービスとの違い GitHub は、Git を使用したソフトウェア開発とバージョン管理のための人気のあるプラットフォームおよびクラウドベースのサービスです。コードを効率的に保存、管理、共同作業するために必要なツールを開発者に提供します。ユーザーフレンドリーなインターフェースと豊富な機能を備えた GitHub は、世界中の開発者にとって不可欠なツールとなっています。 GitHub はテクノロジー業界では有名な名前かもしれませんが、ライブカジノへのユニークなアプローチを持つオンラインカジノ市場も多くの日本人プレイヤーに人気を集めています 。その一例が、プレイヤーに没入型でインタラクティブなゲーム体験を提供する日本の市場志向のオンラインカジノ、ライブカジノハウスです。 オンラインカジノブランドレビュー関連ページで調べる通り、ライブカジノハウスは、日本の文化と技術の要素を取り入れることで、ライブカジノの伝統的なコンセプトを次のレベルに引き上げます。伝統的な日本の衣装を着たライブディーラーから高度なバーチャルリアリティテクノロジーまで、ライブカジノハウスはプレイヤーにユニークなゲーム体験を提供します。 イノベーションと顧客満足に重点を置いているライブカジノハウスは、日本市場で大きな支持を得ています。その成功は、日本のオンラインカジノ業界の可能性を浮き彫りにし、多様な興味や好みに応えるために継続的に進化している様子を示しています。より多くの日本のプレーヤーがエンターテインメントのニーズのためにオンラインカジノに目を向けるにつれて, ライブカジノハウスや他の日本の市場志向のオンラインカジノが、伝統的なカジノ体験の限界を押し広げ続ける様子を見るのはエキサイティングです。 GitHubと同じようなソースコード管理サービスとしては、BitbucketやGitLabなどがあります。 それぞれのサービスとの違いをもとに、GitHubが人気な理由を見ていきましょう。 理由1：無料のプライベートリポジトリ ソースコードを管理する単位をリポジトリと呼びます。 リポジトリは格納場所という意味で、他の利用者にも公開されるパブリックリポジトリと、公開が関係者だけに限定できるプライベートリポジトリがあります。 ソースコードを公開したくない場合は、プライベートリポジトリを選択する必要がありますが、以前はGitHubは有料、BitbucketやGitLabでは無料という状況でした。 しかし2020年4月から、GitHubでも無料のプライベートリポジトリを無制限に作成可能になりました。 これによりGitHubを使いたかったがソースコードは公開したくない個人や企業の利用が大幅に増え、さらにGitHubの人気が高まる状態となりました。   理由2：オープンソースコミュニティに育まれたSNS機能 オープンソースとはソースコードが公開されており、誰でも無料で利用できるソフトウェアのことを指します。 また、オープンソースコミュニティとは、オープンソースの開発者同士の集まり、結びつきのことです。 GitHubでは以前から多くのオープンソースが管理されており、たくさんのオープンソースコミュニティが形成されています。 このオープンソースコミュニティに育まれる形で、GitHubには以下のような機能が充実しており、コミュニティが開発を行いやすくなっています。 コミュニティの中で誰がどのぐらい貢献しているかを可視化する機能（スター、貢献度） 開発メンバーの知見を共有する機能（Wiki、GitHub Pages） ソースコードの更新などに関する議論をやりとりする機能（Issues、Codeとの連動） 単にソースコード管理サービスとしての機能だけを捉えると、実はGitHub、Bitbucket、GitLabとも大きな違いはありません。 しかしこのような開発しやすい環境を支援する機能という点では、GitHubが頭一つ抜けている印象を持ちます。   理由3：先進的な機能の拡充 GitHubは2018年にMicrosoft社に買収され、傘下の一企業となりました。 Microsoft社は買収後もGitHubを独立企業として維持する意向を示しており、両社はオープンソースコミュニティにとっても良好な関係となっています。 このような環境の中から、以下のような先進的な機能が次々と誕生しています。 世界中のエンジニアに人気のあるMicrosoft社のフリーのソースコード編集ソフト「Visual Studio Code」をオンラインで利用できる「Codespaces」 オープンソースコミュニティに開発者としてではなく、資金提供者として参加できる「Sponsors」機能 ソフトウェアの開発から公開までの一連の流れをサポートする「GitHub Actions」 これら先進的な機能は類似のソースコード管理サービスにはないものであり、開発者にとってGitHubを選ぶ理由の1つとなっています。   GitHubのアカウント登録 それではさっそくGitHubに登録してみましょう。 まずは、GitHubのトップページにアクセスします。 ここでメールアドレスを入力し、緑色の「Sign up for GitHub」ボタンをクリックします。   次の画面でUsername（ユーザー名）やPassword（パスワード）を入力します。 下の方にある「Pick the spiral galaxy」は、不正なユーザー登録を防ぐための仕組みです。 クイズになっており渦巻状の銀河の絵を数回選択します。 なお、このクイズは定期的に変わるようです。   決められた回数、クイズに正解すると「Create account」ボタンを押せるようになります。 ボタンを押して次に進みましょう。   このような画面になります。   登録したメールアドレスに認証のメールが届きます。 メールの内容に従いユーザー認証を行ってください。 以上でGitHubのアカウント登録は完了です。   大石ゆかり GitHubの登録はできました♪それで、どうやって使うんですか〜？ 田島悠介 その前にいくつか知っておいたほうがいいことがあるから、教えておくね。 大石ゆかり はい、お願いします♪   [PR] Webデザインで副業する方法とはGitHubを使う上で知っておきたい事前知識 早速GitHubを使っていきたいところですが、使い始める前に知っておきたい事前知識を3つ紹介します。 ここで紹介する言葉がまったくわからない場合は、理解しておきましょう。 事前知識1：ローカルリポジトリとリモートリポジトリ 事前知識2：コミットとプッシュとは 事前知識3：ブランチ（branch）とは 事前知識4：インデックス（index）とは   事前知識1：ローカルリポジトリとリモートリポジトリ リポジトリとは、ファイルやディレクトリの状態を保存する場所です。 変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。 リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2カ所にあります。 基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。   事前知識2：コミットとプッシュとは 最低限この2つは知っておきましょう。 コミット(commit) ファイルの追加や変更の履歴をリポジトリに保存すること プッシュ(push) ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作   事前知識3：ブランチ（branch）とは ソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。 このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ（branch）という機能があります。 ブランチは履歴の流れを分岐して記録していくものです。 分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。   事前知識4：インデックス（index）とは リポジトリ管理下にあるディレクトリの中には、一時的に使うファイルなど、Git管理が不要なものもあります。 そこでGitでは、バージョン管理する対象のファイルやフォルダを「インデックス」と呼ばれる台帳に登録することで、必要なもののみバージョン管理が行えるようになっています。 逆に言えば、新たにフォルダやファイルを作成した場合、コミットする前にインデックスに登録する必要があります。 忘れないようにしましょう。   GitHubの使い方 それでは使い方を覚えていきましょう。 基本的なGitの作業は下記のような流れとなるので、GitHubを使って順番に紹介します。 なお、「1」の作成は初回のみ行い、「2」から「5」を繰り返します。 基本的に小さい作業の単位でコミットを行い、ある程度作業がひと段落した時にプッシュをするのが一般的です。 コミットの作業がわかりやすいように、コミットメッセージを残しておくと、ログを追っていく時に役立ちますので覚えておきましょう。 Githubでリポジトリを作成（git init） ファイルの作成、編集を行う ファイルの作成/変更/削除をgitのインデックスに追加する（git add） 変更結果をローカルリポジトリにコミットする（git commit） ローカルリポジトリをプッシュしてリモートリポジトリへ反映させる（git push）   GitHubでリポジトリを作成（git init） まずはリポジトリを作成します。 GitHubにログインした状態で以下にアクセスします。 https://github.com/new   次に表示される画面では、「Repository name」の入力のあと、必要に応じて「Description」も入力します。 また、リポジトリの種類を「Public」か「Private」を選択します。 ソースコードを公開したくない場合は「Private」を選択すると良いでしょう。 最後に、リポジトリの中にあらかじめREADMEファイルを作成しておく場合は「Initialize this repository with a README」にチェックを入れます。 .gitignoreやlicenseについては後で追加や変更ができるので、Noneを選択します。 必要項目の入力が終わり「Create repository」ボタンをクリックするとリポジトリの作成は完了です。 次の画面で、リモートリポジトリのアドレスが表示されますので、控えておいてください。   ファイルの作成、編集を行う はじめに、ローカルのPC上にローカルリポジトリを作成します。 今回は「awesome」というディレクトリを作成することにします。   以下の操作はWindowsであればPowerShell、Macであればターミナルで行います。 コマンドは1行ずつ、最後にEnterキーを押して入力しましょう。 mkdir awesome cd awesome git init 「mkdir」は新しくディレクトリを作成するコマンドで、「cd」はディレクトリを移動するコマンドです。 awesomeというディレクトリを作成し、そのディレクトリに移動してから作業が始まります。 そして、この「git init」コマンドはGitリポジトリを新たに作成するコマンドです。 バージョン管理を行っていない既存のプロジェクトをGitリポジトリに変換する場合や、空の新規リポジトリを作成して初期化する場合に使用します。 git initコマンドを実行するとカレントディレクトリをGitリポジトリに変換します。   次に、テキストエディタなどで以下のHTMLファイルを作り、先ほどのawesomeフォルダに「hello.html」という名前で保存しましょう。   現在の状態を確認しましょう。 git status   結果は以下のようになります。 hello.htmlが「Untracked files」、つまりインデックスに登録されていないファイルとして表示されています。 On branch master Untracked files: (use "git add <file>..." to include in what will be committed) hello.html   ファイルの作成/変更/削除をgitのインデックスに追加する（git
Git

NotebookLMとは？動画付きで使い方・活用事例・機密情報を解説

田島悠介 今話題のAIツール、NoteBookLMについて解説していくね。 大石ゆかり Googleが提供する精度の高い回答を返してくれるAIですね、気になっていました！ 田島悠介 動画や画像、デモを使って説明するのでどの記事よりも理解しやすいと思います。 大石ゆかり ワクワクします！よろしくお願いします！ 田島悠介 先にこの記事を選んでくれたお礼にちょっぴりオトクな情報です。 NotebookLMについて30分でじっくり理解できる動画講義をプレゼント中です。 受取方法は『GAIナレッジベース』という無料のサイトに登録するだけです。 今すぐ動画を見る ＞ さて、それでは解説を始めます。 本記事は、NotebookLM（ノートブックエルエム）について、テックアカデミーや国立大学で講師を勤める現役の生成AI専門家からの知見をベースにテックアカデミーマガジン編集部がご紹介します。   早く分は一見にしかず、まずNotebookLMで何ができそうかを30秒の動画でざっくり把握しましょう。 今日の残業を少しでも減らしたい人は今すぐNotebookLMを使ってみて。こんなふうに資料を読み込ませるとその内容について教えてくれる。要約もできるから、もう調査レポートとか議事録をまとめるのにうんうん迷うあの世界一焦る時間がなくなりそう。ちなみに提供してるのはGoogleだから、Pixel9に入ると… pic.twitter.com/3FbFjuz961 — GAIナレッジベース from テックアカデミー (@gaikbase) August 26, 2024   結論から言うと、生産性と成果の向上を目指すビジネスパーソンやチームにとって、NotebookLM（ノートブックエルエム）は強力な味方となります。 今回は、NotebookLMを業務で活用できる具体的な方法をご紹介します。 特に、他職種でも応用しやすく、労働人口の多い営業（セールス）職にフォーカスして解説します。 他の職種でもすぐにイメージできる点が多くあるので、マーケティング・人事・経営企画などの職種の方もぜひご参考ください。 最後まで読んだ後のあなたの姿： NotebookLMの自分の業務における使い方、活用事例がイメージできる NotebookLMを自分で使えるようになる NotebookLMを使う際の注意点、リスクを理解して人に説明できる   NotebookLMとは NotebookLMは、Googleが提供する生成AIを活用したツールです。 ユーザーがアップロードした文書や資料を元に情報を検索し、回答を生成してくれます。 NotebookLMはアップロードされた資料を活用できるため、業務に特化したナレッジベースを構築できます。 NotebookLMの公式サイトはこちら：https://notebooklm.google.com/ ※2024年8月13日時点では、法人用のGoogleアカウントは管理者の許諾が必要です。個人のGoogleアカウントであればすぐに利用できます。   NotebookLMの特徴 NotebookLMの特徴を、下記の順に説明していきます。 NotebookLMの活用メリット アップロードできるファイル・データの種類 アップロードしたファイル・データの活用方法、ユースケース ChatGPT、GeminiとNotebookLMの違い なぜNotebookLMの回答は正確なのか NotebookLMの活用メリット NotebookLMの活用メリットは以下の通りです： 情報の効率的な管理ができる: 製品資料や市場調査レポート、メモ書き、議事録など、あらゆる文書をアップロードして一元管理できます。 瞬時の情報検索ができる: 必要な情報を素早く見つけ出し、的確な回答を提供します。 AIによる回答生成ができる: Googleの生成AIツールGemini（ジェミニ）を使って、質問に対する回答を自動生成します。 業務特化型のナレッジベースを作れる: 営業活動に必要な情報を蓄積し、いつでもアクセスできる知識の宝庫を作り上げます。 アップロードできるファイル・データの種類 PDFファイル 製品資料、営業資料、提案書、見積もり書、ホワイトペーパー、財務諸表などをアップロードできます。 コピーして貼り付けたテキスト 議事録、メモ、チャット、メールなどを貼り付けてアップロードできます。 WebサイトのURL 特定のサイトの情報を情報源として扱えます。 マークダウンファイル マークダウンで保存しているファイルをアップロードできます。 Googleドキュメント・Googleスライド 自身のGoogle Driveに保存されているファイルをアップロードできます。 スプレッドシートは2024年8月13日時点では対応していません。 ファイルの管理にGoogleを使っている企業に所属していれば、さらに便利に活用できそうですね。   アップロードしたファイル・データの活用方法、ユースケース ファイルの利用用途について、Googleの親会社であるAlphabetの2024年2Q（4-6月）の決算資料をアップロードして、実際の画面を見てみましょう。 NotebookLMの活用事例の参考にしてください。 ※アップロードしたPDFファイルの言語は英語ですが、NotebookLMの回答は日本語で出力されています。すごいですね！ アップロードしたデータ・ファイルへの質問 アップロードしたデータやファイルについて、質問ができます。 質問はサジェストもされます。 よくある質問の作成 よくある質問（FAQ）を自動で生成することもできます。 学習ガイドの作成 小テストと、その回答も自動で生成してくれます。 新人メンバーの育成にかなり使えそうですね。 目次の作成 アップロードした資料の目次を作成してくれます。 今回はあらかじめ整った資料をアップロードしているので見応えがあまりないですが、バラバラとしたメモをアップロードしたときに一番力を発揮しそうです。 ブリーフィング・ドキュメント アップロードした資料を簡潔にまとめてくれます。 タイムライン こちらは、人物と時系列をまとめるのに適しています。 決算資料では出力できなかったため、テックアカデミーの受講生インタビューをアップロードしてみました。   ChatGPT、GeminiとNotebookLMの違い ChatGPTとNotebookLMの最大の違いは、情報源と精度にあります。 ChatGPTが幅広い一般知識を持つ汎用AIであるのに対し、NotebookLMは蓄積したデータから正確な情報を提供するのが得意なAIツールです。 主な違いは以下のとおりです： 情報源 NotebookLM：ユーザーがアップロードした信頼できる資料のみを使用します。 ChatGPT：インターネット上の幅広い情報を学習ソースとして使用しています。 情報の正確性と最新性 NotebookLM：アップロードされた資料に基づくため、高い正確性と最新性を保証します。 ChatGPT：情報の正確性にばらつきがあり、最新情報の反映に時間がかかることもあります。 専門性 NotebookLM：アップロードする書類やデータによって、自身の業務に直結する情報に特化させられます。 ChatGPT：幅広い話題に対応可能ですが、特定業務の詳細情報は不足しがちです。 カスタマイズ性 NotebookLM：ユーザーが必要な資料をアップロードし、カスタマイズできます。 ChatGPT：ユーザー側での情報のカスタマイズは困難です。 これらの違いにより、NotebookLMはビジネスにおいて、より信頼性の高い情報を提供できるツールとなります。 一方、ChatGPTは幅広い話題に対応できる汎用的なAIアシスタントとしての強みを持っています。 この違いを理解し適切に使い分けることで、より効果的な情報活用が可能になるでしょう。 特に、製品詳細や最新の営業戦略、社内のナレッジやマニュアルに関する正確性の高い情報が必要な場面では、NotebookLMの方が適していると言えます。   なぜNotebookLMの回答は正確なのか なぜNotebookLMはハルシネーションが起きづらいのでしょうか？ それは、RAG（ラグ）という技術を利用しているからです。 RAG（Retrieval-Augmented Generation）は、文書やデータベースから情報を検索し、その情報を基に新たな回答を生成する技術です。 ChatGPTやGemini、CoPilot（コパイロット）などでも活用されており、検索先をどのように設定するかによって、生成AIを利用するサービスの特性が変わります。 NotebookLMはこのRAG技術のような仕組みをアップロードした資料に対して活用しており、ユーザーがアップロードした資料を基にして、質問に対する正確な回答を提供します。 ただし重要なのは、ハルシネーションが起きづらいという点です。 NotebookLMはまだβ版なので、回答が不正確な場合がゼロではありません。 信頼度は高いですが、必ず自分の目でファクトチェックするようにしましょう。 実際にNotebookLMのUIにもこのような記載があります。 NotebookLM はまだ不正確な回答をすることがあるため、ご自身で事実確認されることをおすすめします。 引用：NotebookLMのUI内 実務におけるNotebookLMの活用事例 実務、特に営業（セールス）職でNotebookLMをどう使えるか、具体的に見てみましょう。 製品仕様書の管理と即時参照 複数の製品仕様書をアップロード: 営業担当者が扱う全製品の仕様書をNotebookLMにアップロードします。例えば、複数の冷蔵庫の仕様書をアップロードすれば、消費電力、容量、メーカー推奨価格などの比較表を作ることも可能です。 顧客との商談中の即時検索: 商談中に「この冷蔵庫の消費電力は？」と聞かれても、NotebookLMを使えばすぐに正確な情報を提供できます。 市場調査レポートの分析 大量の市場データの要約: 業界レポートや競合分析をNotebookLMにアップロードし、重要ポイントを素早く抽出します。例えば、100ページの市場レポートも要点をすぐに知りたいときに便利です。Web検索型のRAGとは異なり、指定した前提情報を基に検索できる点が強みです。 トレンド分析: AIが市場動向を分析し、営業戦略立案に役立つインサイトを提供します。新しい製品カテゴリーの成長を発見して、新しい提案を考えるのにも使えます。 営業トレーニングと知識共有 ベストプラクティスの蓄積: 成功事例や効果的な営業テクニックをNotebookLMに記録し、チーム全体で共有します。成功した商談の内容を記録し、他のメンバーが参考にできるようにします。 新人教育の効率化: トレーニング資料をアップロードし、新人営業担当者が自己学習できる環境を整えます。新入社員が製品について学ぶための資料をまとめておけば、必要な情報を自分で簡単に見つけられます。 商談準備の効率化 事前調査の自動化: 顧客企業の公開情報をNotebookLMに入力し、AIが重要ポイントを抽出して商談準備を支援します。顧客企業の最新ニュースや財務情報を事前に調べておき、商談で活用できます。 質問予測と回答準備: 過去の商談データを基に、AIが想定される質問とその回答案を提示します。以前の商談でよく出た質問に対する準備をしておけば、スムーズに対応できます。 プレゼンテーション資料の作成支援 カスタマイズされたスライド作成: 顧客情報と製品データを基に、AIがターゲットに最適化されたプレゼンテーション資料の作成を支援します。特定の顧客向けにカスタマイズされた提案資料を短時間で作成できます。 説得力のある資料作り: 業界データや成功事例を活用し、より説得力のある提案資料を作成できます。市場動向を示すグラフや成功事例を含めたスライドを簡単に作成できます。 [PR] Webデザインで副業する方法とはNotebookLMの使い方・利用手順 NotebookLMを効果的に利用するための基本的な手順は以下の通りです。 資料のアップロード: 製品仕様書、業界レポート、トレーニング資料などをNotebookLMにアップロードします。これで、NotebookLMがこれらの資料を基に情報を検索し、回答を生成できるようになります。アップロード可能な資料として、PDF、テキストファイル、Webページ（URL）、マークダウンファイル（構造化テキスト）などがあります。 検索と情報提供: 資料をアップロードした後、必要な情報を検索する際に質問を入力します。例えば大量の市場情報等をアップロードしたのであれば、「最新の市場動向は？」と入力すると、NotebookLMがアップロードされたレポートから関連情報を抽出し、要約を提供します。Geminiなどと異なり、NotebookLMはアップロードされた資料に関連する質問をすることを目的としています。 自動生成された回答の利用: NotebookLMが提供する回答を使って、顧客からの質問に即座に答えたり、プレゼンテーション資料を作成したりできます。回答には出典が添えられており、数字をクリックするとその根拠となる資料が示されます。回答をそのまま使うのではなく、回答を加工し使いやすく変更することも可能です。もしほしい形式があるのであれば質問段階で指定しておくのも効果的でしょう。 データの更新: 定期的に資料を更新し、新しい情報をアップロードすることで、常に最新の情報を基にした回答を得られるようにします。ファイルの差し替えだけで参照情報を変更することができるので新しい資料が出たら更新するというルールにしておくといいでしょう。   NotebookLMを使う際の注意点 発展途上であることを理解する 「なぜNotebookLMの回答は正確なのか」でも説明したとおり、NotebookLMはまだβ版なので、回答が不正確な場合がゼロではありません。 繰り返しになりますが、必ず自分の目でファクトチェックするようにしましょう。 機密情報や個人情報の入力に注意する 結論、個人情報など機密性の高い情報の入力は避けましょう。 企業に所属していて自分で判断ができない場合は、NotebookLMの特徴を整理した上で上長や情報セキュリティの部署へ確認してから使うことをおすすめします。 個人情報の扱いについては、Googleのヘルプページで、下記のように説明されています。 「ユーザーの個人データが NotebookLM のトレーニングに使用されることはありません。人間のレビュアーは、トラブルシューティング、不正使用への対応、フィードバックに基づく改善を行うために、クエリ、アップロード、モデルの回答を確認することがあります。人間のレビュアーに見られたくない情報は送信しないでください。」 Googleヘルプページ：https://support.google.com/notebooklm/answer/14275965 AIの学習に使われることはないけれど、例えばGoogleの社員が見ることは考えられます。   まとめ 営業活動において、NotebookLMは情報へのアクセスを容易にし、効率的かつ効果的な営業活動をサポートします。複数の資料を同時に分析し、正確な情報を即座に提供できる点が他のAIツールと比較してNotebookLMの強みです。これにより、顧客対応の質が向上し、成約率の向上が期待できます。営業チームは、NotebookLMを活用して、最新の情報に基づく高品質な提案や資料を作成し、競争力を高めることができます。 NotebookLMの使い方に関する簡単なセミナーを開催予定です。興味のある方はぜひご参加ください。日々の業務がもっとスムーズになり、結果もついてくるはずです。最新の情報を手に入れ、顧客への対応をより一層強化し、営業活動の新しい可能性を広げてみましょう。   生成AIの実務活用で悩んでいる方へ 田島悠介 ゆかりちゃん、ChatGPTを開いて固まっちゃってどうしたの？ 大石ゆかり あ、田島メンター！実はイマイチ生成AIがうまく使えないんですよね。周りに聞きたくても知ってる人は少ないし、知ってる人はレベルが高すぎて聞きづらいというか、、、 ChatGPTなどの生成AIを業務に取り入れてみたものの、思うような結果が得られない。あるいは、ビジネスでの活用に限界を感じている。そんな方々にお勧めしたいのが、『テックアカデミーGAIナレッジベース』です。 このコミュニティは、生成AIの実務活用に特化した知識と経験の宝庫です。以下のような特徴があります。 500件以上の実務で即活用できるプロンプト集 プロのエンジニアに生成AIについて直接質問可能 同じ関心を持つビジネスパーソンとの交流の場 通常、このレベルの生成AIコミュニティには10万円程度の費用がかかります。しかし、『テックアカデミーGAIナレッジベース』は完全無料でご利用いただけます。 生成AIの可能性を最大限に引き出し、ビジネスの競争力を高めたい方にとって、このチャンスを逃す手はありません。今すぐ登録して、生成AIの実務活用スキルを飛躍的に向上させましょう。 今すぐ無料登録
生成AI・ChatGPT

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。   プロトタイピングの概念そのものは、インターネットの成立以前から存在していました。典型的な例として、新しい製品を開発をする人々は最初に製品を組み立て、次に製品が期待した通りに作動するか試します。 最初のバージョンで特許を取得して、潜在的な投資家に製品を見せることもあるかもしれません。もし投資家が独自の生産ラインの設備を利用できるとしたら(例えば既存の会社で働いているなどの理由から)、製造可能なレベルのモデルが完成するまで、製品の開発が進められて、バグの修正も行われます。   昔のデモディスクを覚えていますか？ 機能の制限されたプログラムが入っていたり、ゲームの初歩レベルあるいはゲームが2つだけ入っているようなディスクのことです。プロトタイプはデモディスクと似ている点が多くありますが、よりシンプルでさえあります。 Webサイトやアプリのプロトタイプを作成するのは、期待した通りに作動するか確かめるためです。 プロトタイプの目的は、将来の顧客の獲得というよりも、より良い製品を作るのに役立てることです。 Webサイトやアプリのプロトタイプは、製品が期待通りに作動するか確かめるために作成します。またクライアントや潜在的な投資家に製品の作動を示すこともできます。   最近では、Webとモバイルアプリ用のプロトタイプ作成アプリが多数登場しています。 最近リリースされたデザインツールのAdobe Experience Designerは、Webとモバイルに対応したデザインアプリとしての機能と、プロトタイプ作成用のアプリとしての機能が融合されています。 Adobe社の知名度とプロ向け製品における市場シェアを考えれば、多くの人々が今まで以上にプロトタイプを実践し始めているのも当然かもしれません。   今回の記事は初心者向けのガイドです。デザイン業界でどのような経験を積んできたかにかかわらず(あるいは未経験でも)、プロトタイプを日常的に使い始めた方向けに書いています。 このガイドでは何よりもまず基本的な原則を説明します。もちろんその後に発展的な情報として、役立つツールやアプリをリンクとともにご案内します。   ワイヤーフレーム＆モックアップ VS. プロトタイプ デザイナーとしての経験が豊富な方は、すでにワイヤーフレームやモックアップを編集で利用しているかもしれません。ただ、これらは必ずしもプロトタイプとはいえません。 ワイヤーフレームやモックアップで問題なのは静的なことです。製品の機能についての多くの情報を伝えることができないのです。このため、製品の動作性についてクライアントやデベロッパーに誤解を与えるおそれもあります。こうした理由から、プロトタイプとは一般的に、何かインタラクティブな要素を持つものと定義できます。 ただし、例外的に静的なものにもプロトタイプと見なせるものもあります。 例えば、概念的なプロトタイプや、詳細に作成された設計書などです。重要なのは単にインタラクティブであることよりも、製品に期待される機能について情報を伝えられることだからです。 それでもやはり、ワイヤーフレームやモックアップは単にプロトタイプの作成によく使われているという理由だけで、誰も捨てようとはしません。   いつプロトタイプが必要になるのか？ 何かがどのように作動するかを示す必要があるときにはいつでも、プロトタイプが必要です。 わかりやすい例は、Webアプリやモバイルアプリです。アプリは、モックアップでは簡単に見たり予測したりできない機能を数多く持っている傾向があります。コンテンツ中心型の静的なWebサイトでさえプロトタイプを必要とするかもしれません。 1つの理由として例を挙げると、私は以前クライアントにシンプルなビジネスサイトのモックアップを見せたときに、クライアントから「トップページにある「概要」や「サービス」などをクリックしたら別のページに移行するのか？」、「コンタクトフォームでユーザーが「送信」をクリックしたら、私はメールを受信することになるのか？」と聞かれたことがあります。 シンプルなタスクでさえ不確実性を伴うことがあり、プロトタイプは当て推量を解消するのに役立ちます。 また、簡単なブラウジングの操作さえ、ユーザーやクライアントによってはわかりづらくて大変な作業となりえます。プロトタイプがあればネットワークからサインオフするときにも、当て推量する手間を省くことができます。 加えて、プロトタイプはユーザーテストに役立ちます。ユーザーテストを行うときには、初期段階からプロジェクトのシミュレーションを始めるのがベストです。作業がほとんど完了した後に大きな変更をしなければならない事態は避けたいところです。   [PR] Webデザインで副業する方法とは4種類のプロトタイプ プロトタイピングを始める前に、どの種類を使うか決めます。ほとんどのデザイナーたちが実践しているように、どのようなプロジェクトでも複数の種類を組み合わせて使うことができます。   1. 概念的プロトタイプ このプロトタイプは、形の上では完成した製品と全く似ていません。ここでインターフェースのディテールとレイアウトは重要ではありません。インタラクションとプロセスだけに集中します。 全てのプロトタイプの目的は製品の動作性を示すことです。その意味で、このプロトタイピングは原始的な形だといえます。機能性だけがテーマであり、形は問題となりません。 この段階では、フローチャート、ポストイットのメモ、PowerPointのプレゼンテーション、アイコンでプロセスを説明するビデオを使ったり、身振り手振りを加えてカメラに向かって録音してもいいでしょう。要点を伝えることができれば何でもいいのです。 概念的プロトタイプはプロジェクトの初期段階で使われます。プロジェクトにはまだ名前がないかもしれません。アプリやWebサイトもアイデアの段階なので、「こんな感じで作動すると思う。」と話しているかもしれません。   2. ローファイプロトタイプ ローファイプロトタイプでは、レイアウトやスクリーンのサイズなど具体的な対象を扱うようになります。このプロトタイプは、作られるのも破棄されるのもサイクルが速いです。 ローファイプロトタイプの目的は、あなたとクライアントが基本的な部分に満足できるまで、試行錯誤を最速で繰り返すためのものです。だからプロトタイプに愛着を持つべきではありません。ほとんどのプロトタイプは使い捨てであり、それこそが長所です。 「ローファイプロトタイプ」は「ワイヤーフレーム」とよく置き換えることができます。この段階では紙に書いて行うこともよくあります。 アプリでローファイプロトタイプを作成するときには、他のスクリーンへのリンクやコメントの機能など、基本的なプロトタイピングの機能を備えているものを使うことがおすすめです。ワイヤーフレームのアプリはインターネットとの連携が容易であるというメリットがありますが、やや動きが遅いことも多いです。 概念的プロトタイプと同じくプロジェクトの初期段階で使われますが、ビジネスモデルやプロジェクト名はすでに存在している段階でしょう。上手くいくと確信できるものが持てるまで、頭の中で思いつく無数のアイデアをえり分ける時です。   3. ミディアムファイプロトタイプ 段階によっては、ローファイプロトタイプでは要点を把握しにくい一方、ハイファイプロトタイプでは十分過ぎることがあります。スタイルガイドを完全には作成していなかったり、まだグラフィカルアセットを全て作り終えていない段階です。 ミディアムファイプロトタイプは、このようなデザインの初期～中間の段階で使うことができます。インタラクションのシミュレーション機能を持つプロトタイピング作成アプリによって作られることも多いです。CSSのフレームワークを利用して、HTMLとCSSによって構築することもできます。 BootstrapとFoundationが、現在存在しているプロトタイピングのツールの中ではおそらく主流です。 有名ブランドのイメージがあればそれを使うべきですが、ストックイメージでも足りるでしょう。ストックタイプのUIエレメントは、模作のインターフェイスをより速く構築するために使われます。プロトタイピング作成アプリの多くは、これらのUIエレメントのライブラリを持つことが多く、作業の高速化に役立ちます。 ミディアムファイプロトタイプは、リテラル思考型(Literal thinker:全体的なイメージよりも、具体的なステップや言葉の定義から考えるような人)で外観や動作の近似を見たいと思うような人に向いています。彼らにとっては、「未完成」のヘッダーの方が、Webサイトのヘッダーに全く見えないようなスケッチ風の代物よりも、まだ耐えられます。 リテラル思考のクライアントには、ワイヤーフレームで素早く考えた初期のアイデアを見せる必要はないでしょう。ミディアムファイプロトタイプの段階で見せる方が、彼らに方向性を分かってもらいやすいです。   4. ハイファイプロトタイプ この段階までプロジェクトが進むと、全てのスクリーンのモックアップが完成していて、全てが立派なものになっているでしょう。製品をバックエンドのコードと統合して、人々に製品の動作性を見てもらう時です。 ハイファイプロトタイプは通常、デザインに関する最終的な合意をクライアントと結ぶために使われます。ただのPSDファイルを送るだけれはなく、インタラクティブなものを提示しなければなりません。 2つの方法のうちいずれかによって行われます。1つの方法では、静的なHTMLとCSSを利用して、一部をインタラクティブな外観に仕上げます。もう1つの方法では、画像やPSDのファイル形式をインポートできるアプリを利用して、擬似インタラクティブな特性を加えることで完成品のアプリ（製品）の機能を模倣します。 アプリによっては、プロトタイプのデモをWeb上(またはモバイルデバイス上)で行うことも可能です。   プロトタイピングのメソッド プロトタイプの主な種類を見たところで、次にプロトタイプを実際に作るためのツールをご紹介します。基本的な使い方も含めてすでにほとんどご紹介していますが、さらに詳細を見てみましょう。 あなた自身とクライアント双方にとって適合するメソッドを選びましょう。   ビデオまたはプレゼンテーションのプロトタイプ これらは具体的な作業がなされる前に、アイデアを売るためによく使われます。そのため通常は、潜在的な投資家を意識したものです。 クライアント向けにも使えますが、他の代替手段の方が効率的なコミュニケーションを図るには優れていることも多いです。アドバンテージは人によって異なるでしょう。 ビデオとプレゼンテーションのプロトタイプで、利益率を上げるために作られたものは商業型の公式に従います。 聴き手が共感できる問題を提示する。 あなたの製品によってその問題がどのように解決されるかデモを示す。 (オプションとして)会社のマスコットをデジタル形式で表現して、キャッチフレーズを叫ばせながら楽しそうにダンスさせる。 これらのプロトタイプの中にはアイコン、テキスト、イラストレーションを使うだけで完成するものもあります。他にはアニメーションを利用して、要点を説明するのに動きを使うこともあるでしょう。あなたのアイデアを売ることができれば、正しく使いこなせているといえます。 ビデオのプロトタイプと紙のプロトタイピングを組み合わせた良い例をご紹介します。Video Prototype for Mobile Cooking App : Youtube動画より   ワイヤーフレーム ワイヤーフレームは紙面上かアプリにおいて作成できます。ワイヤーフレームは通常ローファイプロトタイプと見なされていますが、時間をかければミディアムファイプロトタイプにアップグレードすることも可能です。もっとも労力をかけるだけの価値はほとんどありませんが。 ワイヤーフレームは、作成されるのも破棄されるのも速いです。紙面上でワイヤーフレームを作成することが魅力的である理由の1つです。アプリでワイヤーフレームを作ると、より正確なデザインが可能となり、既存のワイヤーフレームから簡単に編集することもできます。しかし、あなた自身以外には誰も見ないであろうスケッチを速く作成できるという点が、やはりワイヤーフレームの長所として一番優れています。 しかし、すで述べたようにアプリでワイヤーフレームを作成すると、より簡単にインターフェースの機能を模倣できるというメリットもあります。紙面上に作成したワイヤーフレームをタップしたところでトントン音が鳴るだけですから、面白いかもしれませんが、あなたの意図するところを伝えることはできません。   紙のプロトタイプ これはただのスケッチではないという点で、紙面上のワイヤーフレームとは異なります。紙を利用するのは、物理的でフラットな素材でインターフェースのモデルを作るためです。先にご紹介したビデオのプロトタイプにもその例を見ることができます。 インターフェースの要素は、紙にスケッチして、カットして作ります。コピーして予備を作ることもあります。そして作ったピースを他の紙の上に集めます。 ある要素のサイズが間違っていれば、他の要素の並びを変えたり、新しいサイズの要素を紙をカットして作るなどの方法があります。 またワイヤーフレームより「本物」らしいといえます。特に面白さはないとしても、クライアントは紙のモデルを触ることができます。この触覚に訴える方法はクライアントに多くを説明できるので、他のどんな方法より優れていることもあります。 誰でも対象をより深く理解するためには、物理的なコンタクトが必要です。UXデザインの半分は、物理的なインタラクションの使い心地を、デジタルのインターフェースで作り直す作業であるといえます。   アプリで作成するミディアムファイおよびハイファイプロトタイプ これらは紙のプロトタイプとの共通点が多いです。以下でご紹介するInvisionなどのアプリで作成するプロトタイプは、あらかじめデザインしたインターフェースの要素をもとに作り始め、これらのピースを集めて完成品を模倣します。 異なる点は、全ての作業がスクリーン上でなされることです。完成製品のグラフィック作成やブランド化も可能であり、プロトタイプであっても完成製品のように作成することができます。その次はすでに述べたことですが、アプリによって製品のデモをブラウザやモバイルデバイス上で行うこともできます。 また手で触れて感じることも可能になります。クライアントの触覚に訴えることで、もし気に入ってもらえれば、最終的な承認を得たも同然です。   コード もちろんインタラクションを必要とする場合には、インターフェースのプロトタイプをコードで作るのがいい方法です。その理由もご紹介します。 あなたのワークフローによく合う(とにかくブラウザ上でデザインするような場合)。 作成するサイトやアプリに、ボタンなどのインタラクティブな要素が多数存在している。 製品作成の最終段階でプロトタイプのコードを利用すると、時間の節約になる。 インターフェースの機能性のデモを、アプリを使わずにブラウザ上で実行したい。 あなたがキーを押すのが好きで、クリックするのは嫌いである。 ブラウザ上でプロトタイピングを行うと、特に修正版を作成中はやや時間がかかります。製品の初期段階ではおすすめしません。ミディアム～ハイファイプロトタイプで使うのがベストです。 すでにHTMLやCSSで作業を進める方法を好んでいるとしたら、完成間近のプロジェクトを提示するには最良の方法の1つです。   フレームワークによるプロトタイピング フレームワークを利用すると、コードを使ったプロトタイピングのスピードを相当上げてくれます。さらに、完成製品用のフレームワークを利用するとしたら、コーディングの量も少なくて済みます。 補足として、BootstrapやFoundationのような人気の高いフレームワークを利用して構築された、ドラッグ＆ドロップ形式のWebページ用エディタもあります。これらを使うことで、ローファイプロトタイプからコードを加えた完成製品まで全て作ることができます。 または、これらをプロトタイプを速く作る目的だけに使い、プロジェクトの最終段階ではカスタマイズしたコードを使う方法もあります。どちらの方法でも上手くいくでしょう。   プロトタイピングのツールとアプリ 理論を理解したところで、プロトタイプの作成に進みましょう。紙のプロトタイプやコードだけに限定せず、アプリをどこかで使うと仮定します。 良くも悪くも、多数の優良なアプリから選ぶことになります。 繰り返しになりますが、結局はあなたに合うものを選ぶことが大切です。モバイルアプリのデモを実行する機能が必要か？Google DriveやDropboxなどのサービスとファイルの同期が必要か？Githubと統合させるか？ローファイ、ミディアムファイ、ハイファイのどのタイプか？アドバンストスクリプト言語(Advanced scripting)か？などから考えましょう。 以下にリストアップするアプリは、これらのニーズに対応しています。何に着目すべきか分かりやすいように、アプリごとに最も関連性の高い機能をご紹介します。 これらアプリの多くは主にワイヤーフレームのためのツールとして知られています。ワイヤーフレームのソフトウェアは、インタラクティブなプロトタイプに必要な機能を備えていることが一般的です。人によってこれらのアプリを使うことで得られるアドバンテージも異なります。   AdobeのExperience Design CC 現時点では最新のアプリです。このアプリの登場により、今まで飽和状態だった市場に競争を巻き起こすことになりそうです。単にワイヤーフレームのアプリまたはプロトタイピングのアプリというよりも、デザインアプリです。Sketchや開発終了したFireworksと似ていますが、デザインした全てのものからプロトタイプを作り出すことが可能な点が斬新です。 今のところMacのプレビューにのみ対応していますが、2016年末までにはWindows版もリリースされる予定です。 プレリリース版は無料ですが、完成版のリリース後にはAdobe Creative Cloudのプランに組み込まれます。   プレゼンテーションのソフトウェア MicrosoftのPowerPoint、AppleのKeynote、LibreOfficeのImpress、GoogleのSlidesは全てプロトタイプの作成に使えます。プロトタイプについてのコンセプトはそれぞれ異なっています。スライドにリンク機能を加えるだけで、インタラクティビティを模倣できます。 コンテンツ中心型のWebサイト用のプロトタイプにも向いています。またこの中のソフトの少なくとも1つは使った経験のある人も多いでしょう。もし使ったことがなければ、ImpressとSlidesは無料で使えます。   InVision InVisionも有名なアプリの1つで、ハイファイプロトタイピング向きです。バージョン管理を特色としていて、リアルタイムの連携機能やフィードバック機能を売りとしています。Marvelのアプリのように、アニメーション、プロトタイプの組込み、デバイス上でのデモ、などの機能もあります。 無料プランではプロトタイプ1つまで作成できますが、それ以降は有料プランで月額15USドルかかります。 InVision   Justinmind Justinmindはアプリケーションのハイファイプロトタイプを作成するのに向いているように思えます。JustinmindのサイトではレスポンシブデザインのWebサイトのプロトタイプについても言及されています。アプリ上でのデモ機能もあります。 今のところ1年間の有料契約(月額換算で19USドル)からスタートできます。 Justinmind   Marvel Marvel Appは有名なプロトタイプのアプリです。基本的に無料プランで、アップデートの価格も全てリーズナブルです。注目の機能は、PhotoShipとSketchのサポート、DriveとDropboxとの同期、Webページ上での組込み型プロトタイプです。これらの機能によって、プロトタイプをアニメーション付きのプレゼンテーションに仕上げることもできます。ハイファイプロトタイプの作成に向いています。 Marvel   Proto.io Proto.ioはハイファイプロトタイプ向きのアプリです。複合的なインタラクション、アニメーション、ファイル形式のエクスポート、印刷、組込み、デバイスのデモンストレーションなどの機能が全てビルトインされています。15日の無料お試し期間と、月額24USドルのプランから始められます。 Proto.io   POP POPが他のアプリと異なっているのは、ワイヤーフレームのスケッチとデジタル形式のプロトタイプのハイブリッドを作成できる点です。 iPhone、Androidフォン、Windowsフォンなどのカメラでスケッチの画像を取り込み、これらをインタラクティブなプロトタイプに変換します。 主に紙で作業を進めるタイプの人には、データを共有するのにいいアプリです。プロジェクト2つまでは無料で利用可能で、以降は月額10USドルの有料プランになります。 POP   Flairbuilder Flairbuilderはデスクトップアプリですが、プロジェクトにオンラインのビューア(閲覧用ソフトウェア)機能を利用できます。ミディアムファイのワイヤーフレームとプロトタイプに向いています。インタラクションを追加したり、デバイス上でのデモを行うことが可能で、グリッドベースのデザインにも特色があります。 ワンタイム料金で99USドルと高額ですが、Axureよりも安いです。 Flairbuilder   Flinto Flintoには、Macアプリ版とWeb用ライト版の2つのバージョンがあります。違いはというと、Macのバージョンの方がより複雑なアニメーション、インタラクションなどの機能をテーブル(表)に加えることができます。またSketchからファイル形式をインポートできるのも、Web用ライト版にはない機能です。 ワンタイムの購入価格で99USドルかかります。ライト版(月額20USドル)だとデスクトップバージョンのライセンスも含まれるので、両方の良い部分を利用できます。 Flinto   [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
アプリデザイン

「Sketch vs. Figma」デザインツールとして優れているのはどちらか

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、WebデザイナーであるChristian Krammer氏によって投稿されました。   UIデザインツールはこれまでにおいてかなりの人気を集めてきました。Affinity Designerや、Gravit、Sketch等の素晴らしいアプリケーションが大きく進化した一方でAdobe XD （Adobe Experience Designの略）やFigma のようなプレイヤーもこのフィールドに参入してきました。 個人的には後者に最も魅力を感じます。Sketchとの類似性から、Figmaも最初の段階から簡単に正しく理解できました。更にFigmaは簡単なファイルの共有やvector networks、「constraints」(レスポンシブデザイン向け）、リアルタイムコラボレーションのような他の使い易い競合相手とは明確に違う独自の個性があります。 この記事ではSketchとFigma 両方のアプリケーションを細部に渡り比較し、それぞれの長所がどのような点かに焦点を当てていきます。   Sketchの最大の弱点は常にAppleのエコシステムにロックインされている事です。設計するだけではなく、ファイルを開きチェックするのにもMacが必要です。WindowsやLinux上では全く機能しません。 その為しばらく経つとSketchファイルのスペックを持つ有料のサービスが現れた訳ですが、それにしても厄介で余分な手順です。 上：Sketch  下：Figma   これが恐らくFigmaが最初の段階から一線を画す理由の1つです。 すなわち、世界中基本的にどのデバイスでもFigmaはWebブラウザで使うことができます。どのインストールも一切不要です。ただChrome（又はFirefox）を開いてアカウントを作成して設計を開始するだけでいいのです。 私は以前からずっとブラウザベースのツールを躊躇していましたが、Figmaは一瞬で私の懸念を仏拭しました。Figmaは多数の要素を含みながらもSketchと同様高性能です（もし同様でなければFigmaの方がより高性能です）。 WindowsやMac用のFigmaのスタンドアローンデスクトップアプリも入手可能ですが、基本的にそれらはただのブラウザバージョンのラッパーにすぎません。それらはキーボードショートカットにより優れた一方で、常にオンライン上にいなければなりません。 勝者：Figma 理由：プラットフォームに依存しないため   ユーザビリティ（特徴的機能とユーザーインターフェース） 基本的に、FigmaはSketchのインブラウザ版と呼ぶのが最も相応しいでしょう。機能はほぼ同じ、インターフェースも似ている、キーボードショートカットでさえもほぼSketchから受け継いでいる。 もし既にSketchを知っていれば、Figmaが2016年の始めにリリースされた時にすぐに簡単に使いこなせるようになったでしょう。   Figmaはリリース当初から様々な点において改善され、いくつかの部分ではSketchを上回ってきました。 しかし、プラグインやサードパーティ・ツールとの統合、リアルデータを利用できる機能（Craft Pluginも使用して）など、欠けている機能が未だにいくつかあります。それにも関わらず、この調子で改善が進むとFigmaがSketchに肩を並べるのはもはや時間の問題でしょう。 勝者：引き分け 理由：現時点では大差はありません。しかしSketchの方があなたの仕事を効率化させる要素を持ち合わせています。   価格 Sketchは元々新しいバージョーンごとに約99USドルの初回手数料のみで発売されました。しかしやがてこのビジネスモデルは維持不可能だと判明されます。Bohemian Coding社は最近価格を定期購入が必要なモデルに変更しました。99USドルで1年間の無料アップデートが入手できます。 その後はそのまま使い続けることができるか、更に同額を支払うことでまた別の1年アップデートが行えます。 この値上がりは当初不適切なように見受けられましたが、デザイナーとしてあなたのメインツールへの99ドルの価値とは何でしょうか？そうです、大した額ではありません。 Adobe’s Creative Cloud の定期購入よりはまだ安いのです。（又、Sketchは何の問題もなく使い続けることができる一方、Creative Cloud の定期購入を辞めたらどのAdobe CC アプリも使い続けることができなくなります。）   当分の間は、Figmaは全ての人が無料で使えるようになっていますが、今年後半には変わってくるでしょう。 きっと定期購入制になり、月額10~15USドルになるでしょう（あくまで私個人の見解ですが）。確かな事は1つあります。それは、Figmaは学生に対して常に無料でしょう。（Sketchが教師と学生に対しリーズナブルなディスカウントを提供しているのと似ています。） 勝者：引き分け 理由：Figmaの価格に関する発表はまだない為   [PR] Webデザインで副業する方法とはコラボレーション機能 Figmaの主な差別化要因は恐らく「マルチプレイヤー」と呼ばれるリアルタイムコラボレーション機能でしょう。その機能を使って他のユーザーと同時に1つのファイルを編集することができるだけでなく、他のユーザーがデザインをいじっているのを見たり、内蔵型のコメント機能を使って変更を知らせることができます。 1つの例として、この同時編集はプレゼンテーションやリモートチームにとって素晴らしく、また関わっている全てユーザーが同じ状態を確認し、意図していなかった上書きを防ぐことができます。   Sketchには（プラグインを使用してですら）そのようなコラボレーション機能はありませんし、多分そのような機能がない方がSketchにとってはよいのかもしれません。 なぜなら「このボタンをもっと大きくしよう。ちょっと待てよ、勝手にやっちゃえ！」というような結末をもたらすかもしれないからです。もちろんこれは少し大げさな例です。この機能は多少価値はありますが、事前に特定のルールを決めておかないとリスクがあります。 勝者：Figma 理由：同時に同じファイルを複数の人で共同編集できる為   ファイル共有とスペック リアルタイムコラボレーション機能に幾らか関連しているのは設計ファイルの共有です。なぜならFigmaではすべての事がブラウザで行われるため、全てのファイルが必然的にURLを持っていて、それを同僚や上司に送ることができます（閲覧専用モードでも可能です）。 このブラウザベースのアプローチの別の大きな利点は、開発者をはじめ全ての人がサードパーティツールの必要性なしにすぐにデザインを開き検証できることです。 Figmaでは簡単に他のユーザーとデザインを共有できます。   これはまさに、1つのファイルにおいて必要不可欠な全ての情報（例えばフォントサイズや色、寸法、アセットなど）を他の共同制作者に提供するためにSketchに求められているものです。 しかしながら、前にも述べたように、ここであなたを手助けするZeplinやSimpli、InVisionの Inspect、Avocode、Marklyなどの有料のツールが必要です。公平な立場からみて、最初の3つは1つのプロジェクトでは無料ですが、より複雑なものに取り組む際にはそれだけでは十分ではないでしょう。   更に何らかのツールを必要としている場合や、そのような（正直なところ基本的な）機能にお金をかけたくないというのであれば、MarketchやSketch Measureという無料のプラグインもあります。多くの有料のアプリではコメントを追加したり自動的にスタイルガイドを作成することができます。 あるいは、FigmaはSketchのファイルフォーマットをサポートしているので、SketchのファイルをFigmaにインポートしてチェックすることさえできます。 左上から右下順に:Avocode、Zeplin、Simpli、Markly。これら全てにおいて様々な方法でSketchのデザインの閲覧、共有可能。   もし共同編集者とデザインをちょっと見たいだけであれば、内蔵されているSketch Cloudが正にその役割を果たしてくれます。iOSデバイスでデザインを見るには、Sketch MirrorやFigma Mirrorを使って、Androidのデバイスであれば、MiraやCrystalを使用することができます。 FigmaはAndroidベースのアプリを提供しないのですが、（デスクトップコンピューター上で）フレームかコンポーネントを選択後、デバイス上で「www.figma.com/mobile-app」を開くと、1種のプレビューが見れるでしょう。 勝者：Figma 理由：サードパーティツールの必要性なしにブラウザ上で簡単にファイルの共有が可能な為   ファイルの整理 Sketchには、ページを提供するという組織能力があるため1つのファイルでアプリやWebサイト全体を作ることができ、ページ同士のスイッチも即座に可能です。Figmaはこの点において後れをとっています。 Figmaはページを提供しませんが少なくとも複数のファイルを1つのプロジェクトに結合することは可能です。 左：Sketchでは1つのファイルを複数のページに整理でき簡単にスイッチ可能 右：Figmaのプロジェクトは未発達   アートボードというSketchのもう1つ重要なコンセプトも適応され強化されました。Figmaでは塗りつぶしやボーダー、エフェクトを簡単にアートボードに適用でき、またそれらをネストしたりグループから簡単に作成することもできます。1つの例として、これにより組み合わされた範囲より大きな要素のコンテナも許容され、「constraints」機能の手助けになりうるでしょう。 更には、各アートボードには独自のネストされたレイアウトグリッドがあり、それによりレスポンシブデザインに役立つのです。 Sketchでもアートボードをネストすることが可能ですがそのインプリメンテーションはFigmaと比べると全く有効的ではありません。 勝者：引き分け 理由：Sketchにはページがあるが、Figmaのアートボード（フレーム）はより有効的な為   レスポンシブデザイン Figmaが導入した（Sketchにも何ヶ月か経ってから導入された）機能はレスポンシブデザイン、すなわち、どのように要素が異なるアートボードやデバイスのサイズに対応するかを設定した機能です。 Sketchでそのような機能を提供するプラグインが以前からありますが、ちょっと使いにくい感じがありました。「group resizing」という特有の機能だけはFigmaの「Constrains」機能に匹敵して簡単に使用できます。 左：Sketchの「group resizing」機能は1つのドロップダウンメニューで設定され慣れるまで少し時間がかかります。 右：Figmaの「constraints」機能はより目で見てわかるようになっています。   両者とも基本的に同じような動作ですがその見栄えは一目瞭然。Sketchでは4つのオプション付きのドロップダウンメニューしかなく、操作中に一体どんなふうになるなるのかがイメージしずらいです。Figmaはよりビジュアル化した方法でこれらのプロパティを明確にします。 例えば、ある要素をアートボードの端に固定するか、それと均一にリサイズする事などができます。 Figmaの大きな利点はこれらの制約がレイアウトグリッドと一緒に組み合わせることで機能することです。要素は、例えばある列（又は行）に固定されるか、それらの幅に一致します。更には、各軸にこれらの設定を個別に変更することができ、グループだけではなくアートボードにも機能します。Sketchではあり得ない機能です。 勝者：Figma 理由：その制約機能は遥かに進化していてより多くのオプションがある為   ベクトル　マニピュレーション Figmaが発売された時の1つの大きな特徴は「vector networks」でした。もはやベクトルはただ一連の繋がった点（ノード）ではありません。今や、新しい線でどのノードからも分岐する事ができます。例えば、矢印を作るのなんて朝飯前です。 Figmaのvector networksはベクトルのどの点にもセグメントを追加することができます。 しかしそれよりも遥かに勝っているものがあります。ベクトルのパーツはPaint Bucketツールで簡単に塗りつぶされる（又は削除される）事ができます。ベンドツールを使ってセグメント全体を動かす（又は曲げる）事も可能です。そして1つのベクトルから別のベクトルへ線点も同様に）をコピーするのは一瞬でできます。 Figmaのvector networksでセグメントを簡単に動かしたり曲げたりする事ができます。   この特殊な機能1つでFigmaはSketchと一線を画しており、アイコンデザインに適したものになっています。 それに比べ、Sketchで利用可能なツールはほぼ時代遅れな感じを受けます。Sketchではベクトルオブジェクトを作成し操作するために必要なすべてのものが揃っているかもしれませんが、より複雑なベクトル操作が必要になってくるとすぐに扱いにくくなるでしょう。 はじめの図：Figmaでは、ペイント塗りつぶしツールを使って2つの重複した円の塗りつぶされた部分を削除し1つの輪をつくる。 2番目の図：Sketchではブール演算を用い従来の手法を使っている。(ちなみにこの方法はFigmaでも可能)   ほとんどの場合、Sketchではある特定のタイプの形を作るのにブール演算を使用しなければいけませんが、その多くはFigmaのvector networksではより簡単に作成可能です。Sketchでは2つのベクトルオブジェクトを繋げたり、またはブール演算が適用された後に形を平らにすることさえしばしば難しいという事実がさらに物事を悪化させます。このアプリはこの点において問題が山積みなのは確かです。 勝者：Figma 理由：vector networksは全く新しい次元をベクトルマニピュレーションにもたらします。Sketchにおいてはまだそれと匹敵するものはありません。   サポートされているファイルの種類 新しいアプリケーションが出るたびに、もしプロジェクトを移行したければ全てをやり直さなければいけないという問題によく直面するでしょう。Figmaではそうではないのです。見事なほどに正確な方法でSketchのファイルを開くことができ、この時点で既にFigmaが優位です。 残念なことに逆パターンでは機能しません。1度Figmaでデザインをスタートしたらもうそれを使い続けるしかないのです。SketchにエクスポートすることもPDFファイルを作成すること（またはインポートすること）もできません。SVGにエクスポートするオプションもありますが、デザインアプリケーション間で複雑なファイルをエクスチェンジするのに理想的なフォーマットではありません。 エクスポートオプションは一見似ていますがSketchにはより多くのオプションがあります。 左：Sketch 右：Fiigma   もう1つの制限要因はJPG画像をFigmaでエクスポートしたときにその品質水準を設定できないことです。なので画像を最適化する他のアプリケーションが必要になるかもしれません。Sketchの最新版ではさらにもっとエクスポートのオプションが改善しています。 現在ではファイル名に接頭辞と接尾辞の両方を設定できると同様、Androidへのエクスポートをはるかに簡単にさせるエクスポートプリセット機能があります。 各アプリケーションがサポートするエクスポートファイル形式を見てみましょう。 Sketch PNG JPG TIFF WebP PDF EPS SVG   Figma PNG JPG SVG 勝者：Sketch 理由：より多くのファイル形式とより良い保存、エクスポートのオプションがある為   アクセシビリティ FigmaにはSketchで使用できる多くのショートカットキーがありますが、そのアクセシビリティのレベルは同じではありません。Sketchではほぼ全ての事がキープレスで行うことができます。 もし気に入らないショートカットキーの組み合わせがあればあなた独自のやり方をシステム環境設定で登録することが可能です（デフォルトによって割り当てられないショートカットコマンドが主になる傾向があります）。 macOSのシステム環境設定でSketchのあなた独自のショートカットキー設定が可能   Figmaはブラウザ上に存在しているためそのようなことは一切不可能です。デスクトップアプリでその点を補うことができますが、特定のメニューバーコマンドが無いせいである特定の機能を単純にキーボードに割り当てることは不可能です。 勝者：Sketch 理由：そのアプリケーションのほぼ全ての機能がショートカットキーでアクセスすることができ、更にはカスタマイズできる為   シンボル（コンポーネント） 1つの重要な機能がちょうどFigmaに導入されました。それはシンボル、又はここではコンポーネントと呼びます。コンポーネントを使用すると、「instances」の形式で簡単に再利用できる1つの複合オブジェクトにいくつかの要素をを組み合わせることができます。主要なコンポーネントが変更されるとすぐに、全てのインスタンスがその変更点を受け継ぎます。（しかしながら、その同じコンポーネントのバリエーションを考慮して特定のプロパティは個別に修正されます。） 最近では、Figmaではファイル間や複数のユーザーと一緒に共有できるコンポーネントのライブラリを作成することさえ可能です。これは確固たるデザインシステムへの大きなステップです。 Sketchでは、個々のインスタンスの修正がインスペクタパネル上でオーバーライドの形で処理されるので、各インスタンスごとにテキスト値や画像の塗りつぶし、ネストされたシンボルの変更が可能です。 Figmaでは、塗りつぶし、ボーダー、効果（影やぼかし）を含め、キャンバスで直に1つの要素のプロパティをアップデートすることができます。 上：Sketchではインスペクタパネル上でオーバーライドを使用してシンボルインスタンスの内容を変更します。 下：Figmaではテキストの色を含め直接キャンバスキャンバスでコンポーネントのインスタンスをカスタマイズできます。   シンボル（コンポーネント）の真の強みはレスポンシブデザインで発揮されます。どちらのアプリでも、親のサイズが変更された時にどの様に要素がシンボル内で反応するか定義することができ、異なる場所や画面のサイズでシンボルを使うこともできます。 Figmaが未だに後れを取っている領域はレイヤーやテキストスタイルです。形やテキストレイヤーのスタイリングを保存することができなく、他の要素と同期することも不可能です。しかしながら、1つの要素から別の要素にスタイリングをコピーして貼り付けることはできます。 勝者：引き分け 理由：インプリメンテーションは極めて同じレベルですが、Figmaはその共有可能なコンポーネントでわずかに有利です。   プラグイン Sketchは並外れて素晴らしい機能を兼ね備えていますが、それを決定打にしているのはSketchを強化させたり足りない機能を補うサードパーティプラグインの存在でしょう。 1度に複数のレイヤーの名前を変更したり、ダイナミックボタンを作成したり、カラーパレットを保存し読み込んだり、Unsplashから簡単に画像を挿入したり、Git機能を有効化したり、Sketchの中でアニメーションを創り出すことができたりなど、使用目的は様々です。プラグインの全リストは公式ディレクトリやGitHub上で見ることができます。 公式WebサイトとGitHubの両方で、Sketchの膨大なプラグインのセレクションを閲覧可能です。 では、Figmaですが、現段階では全くそのような機能はありません。公平に言うと、Sketchは恐らく開発の初期段階ではこれらの多くの機能はありませんでした。そして将来的にはFigmaにもプラグインエコシステムが導入されるのは確実でしょう。 注意したいこと：プラグインがSketchに大きな利点を与えた一方で、それらが何かしらの落とし穴にもなりえます。それらは新しいリリースの度に正常に機能しない傾向があり、Sketchチームは将来の開発者たちを遠ざけないためにも細心の注意を払う必要があります。 勝者：Sketch 理由：単純に、Figmaにはプラグインが全くない為   プロトタイピング AdobeXDと違ってSketchもFigmaもプロトタイピング機能が備わっていません。今のところFigmaには導入される予定はありませんが、Sketchには少なくとも基本的なプロトタイピング機能をもたらすCraft Pluginがあります。更にその人気でSketchは他のプロトタイピングツールとの幅広く統合することが可能です。 例をいくつか挙げると、InVision、 Marvel、Proto.io、Flinto、Framerなどがあります。これらを一緒に使うことによって簡単にデザインをインポートしてアプリを同期することができます。   現時点でFigmaと動作する唯一のアプリケーションはFramerです。似たようなツールのサポートが将来どのようになっているか述べるのは難しいですが、そのようなインターフェースが既に製作段階かもしれません。 勝者：Sketch 理由：Craft Pluginには説得力のあるプロトタイピング機能がありませんが、Sketchは多くのプロトタイピングサービスと統合している為   実データでの作成 Sketchが提供する数あるプラグインの中でいわゆる「content generators」というものを見つけるでしょう。その一例として、ダミーコンテンツでデザインを埋めることができます。 しかし、より興味深いことはこれらのちょっとした機能が様々な情報源から実データを引き出すことを可能にし、またJSONファイルの形で内容を挿入することさえ可能です。 これにより設計の初期段階でより情報に基づいた判断ができ、エッジケースも明らかにできます。   このカテゴリーで最も優れているのはInVisionのCraft Pluginです。 それを使ってある要素に内容を追加するとすぐに、1つのステップで簡単にその内容を複製・変更する事ができます。Craftではデザインのアセットを保存し、チーム内で共有したり又は自動的にスタイルガイドの作成も可能です。 他の機能やオプションの中でも、SketchのCraft Pluginでは要素を複製し、同時に他の内容を追加することができます。   Craftよりは優れてはいませんが、似たような機能を持つプラグインがもう数個あります。Sketch Data Populator、Content Generator 、 Day Playerがそうです。 Figmaにはまだそのような機能はありませんが、時間の問題だと思います。Adobe XDが少し前に適応したようにアプリにその機能を統合するのか、もしくはプラグインシステムに依存するのか、どちらの手段をとるか興味深いところです。 勝者：Sketch 理由：Sketchでは様々なプラグインで備え付きの機能の不足を補い、簡単に実データを使用できる為   バージョニング 私がいつも行っていることの1つは、始めの頃のデザインがどのような感じだったか見るためにCommand+Zを使って変更点を1つ1つ元に戻すことです。評価の基準を持つか、新しいイテレーションをベースとして複製するかのどちらかです。Figmaはブラウザ上の限られたリソースのためここで行止まりと思うかもしれませんが、実際はSketchに劣ってはなんかいません。 どちらのアプリでも古いバージョンをブラウズして復元する事ができ、自動的に保存されます。しかしながら、Sketchのインプリメンテーションは理想とはかけ離れていて、どこから始めるかもわかりません。何といっても時間がかかるのです。   実際に閲覧できる前にバージョンを復元しなければいけなかったり、ハードドライブ上でスペースを無駄にする結果になるかもしれません。さらに言えば、クラウド上で(Dropboxを介してなど)複数の人が同じファイルで作業している時に簡単にダメになってしまう可能性があります。 Figmaでは瞬時に前のバージョンを復元する事ができ、複数の人が同じファイルを編集している時はそれぞれの人の変更を分離できるので役に立ちます。それから前の状態に戻ったり、新しいアイデアの出発点としてバージョンを復元することができます。 勝者：Figma 理由：Sketchのバージョニングは不完全過ぎて勝敗は明らかです。   テキスト機能 他の点と同様に、どちらのアプリケーションでもテキスト操作はかなり似ていますが、いくつかの違いは言及する価値があります。デフォルトによってFigmaではGoogle Fontsからでしか選択できないのですが、単純にインストーラーでシステムォントにもアクセスできます。 私が常にSketchに物足りなさを感じる部分はテキストレイヤーのボーダーの位置の変更機能です。ここでは「中心」だけが唯一の選択しです。Figmaにはその他にもシェイプレイヤー用であるかのごとく「内側」と「外側」が選択できます。 左：Figmaでは、テキスト枠内の垂直の位置（上）が設定でき、さらにボーダーの位置のオプションがある（下） 右：SketchではOpenType機能が適用される   さらにFigmaではテキストを垂直に配列する設定ができる為、枠内で垂直に中央揃えすることが容易です。対照的にSketchではより多くのタイポグラフィのオプションがあり、スモールキャップス、古い形式の図形、スタイルの選択肢や合字（フォントでサポートされていれば）等のOpenType機能が適用できます。 勝者：引き分け 理由：どちらのアプリケーションもそれぞれ違った利点があります。Sketchの方がその進化したタイポグラフィオプションで少しリードしていますが、完全な勝利にはまだ不十分です。   結論 簡単に各アプリの長所をおさらいしましょう。 Sketchの良い点 キーボードのアクセシビリティがより良くサポートされている プラグインとプラグインエコシステムがある サードパーティツールとサービスを統合可能 ファイルタイプとエクスポートオプションが豊富 複雑なプロジェクトを1つのファイル（ページ付き）にまとめることが可能 Sketchでは簡単に実データを使える より洗練されている   Figmaの良い点 ブラウザベースなので、世界中どの場所からどのプラットフォームでも使用可能 リアルタイムで共同作業できる ファイルの共有が簡単 ベクトルマニピュレーションが優秀（vector networksを介して） レスポンシブデザインオプションがより優れている（constraint機能により） コンポーネントのライブラリを作成しチームのメンバーと共有可能 アートボードがより強力   今後の展望 2013年のAdobe Fireworksの廃止はUIデザインツール界に大きな空白を残しましたが、Sketchがすぐにその空白を埋めてくれました。 Sketchが大成功を収め、その人気は主なライバルであるPhotoshopに徐々に迫り、ついには昨年インターフェースデザイナーのユーザー間における調査「the tool of choice」でトップの座に輝きました。 Sketchは恐らくWindows版があればより成功したでしょうが、他のツールにも問題はあります。Affinity
アプリデザイン

無限スクロールの課題とは！スクロールが長いサイトのデザイン手法

本稿は、Smashing magazineのブログ記事を許可を得て日本語翻訳し掲載した記事になります。 本記事は、UXデザイナーのNick Babich氏によって投稿されました。   縦長で無限にスクロールするWebサイトが最近一般的になってきています。ロングスクロールを使うと、ユーザーはページをスクロールするだけで大量のコンテンツを閲覧することができるようになります。 無限スクロールはFacebook・Twitterなどのフィードで見られる、エンドレスなスクロールの手法です。 ロングスクロールには次のような利点があります。 ユーザーをより引き込むことができます。スクロールを利用することで、目的のために必要な操作を最小限に抑えることができます。「次へ」をクリックする必要がないというメリットによって、ユーザーは次のページに移動する変化を気にすることなくコンテンツに没頭することができます。 モバイルデバイスにうまく変換されます。ロングスクロール技術の普及の背景には、モバイル画面がよく使われるようになったということが大きく関わっています。画面が小さいほどスクロールの頻度は増えます。モバイルデバイスのジェスチャーコントロールによって、スクロールは直感的で楽しいものになります。 しかし、このやり方には欠点がないわけではありません。デザイナーはコンテンツとナビゲーションにしっかりと注意を払う必要があります。 この記事ではロングスクロールにおいてのいくつかの利点、考慮すべき点、それと簡単なヒントについて解説します。   どのようなときにロングスクロールを利用するか ロングスクロールはすべてのWebサイトに使われるわけではありません。次のような場合にふさわしいでしょう。 ストーリーテリング(ストーリーテラーのために線型構造を作り出す) 長い記事や複数のステップによるチュートリアルなど、連続した長いコンテンツ(複数のページに分割するよりもユーザーエクスペリエンスが向上する) コンテンツを別々のパーツに分割できず、全体として提示する必要がある場合(インフォグラフィックなど) 製品の機能・品質・特質を物語形式で見せたいとき   どのようにロングスクロールを実装するか 次の10のルールが、ロングスクロールによいユーザーエクスペリエンスをもたらすのに役立ちます。 1. ユーザーにスクロールを促す ページが表示されるとすぐにユーザーはスクロールを開始しますが、サイト上部のコンテンツは依然として重要です。 訪問者の最初の印象と品質に関する予想は、ページ上部の内容で決まります。ユーザーがページをスクロールするのは、サイトの上部に表示されているのが期待できるものである場合だけです。なので、最も魅力的なコンテンツを置きましょう。 良い導入部・前書きを提示しましょう。(コンテンツの状況をはっきりさせて、ユーザーに「このページがどういうものであるか」ということを分かってもらうことができます) 魅力的な画像を使いましょう。(そのサイトに関連する情報を含む画像は、ユーザーの注意を引きつけます)   2. ナビゲーションオプションを常に保持する ロングスクロールのWebサイトを作成する場合、ユーザーは現在の位置とナビゲーションを把握したいと思っていることを忘れないでください。ロングスクロールではナビゲーションに関する問題が起こることがあります。 ページをスクロールしたときにナビゲーションバーが表示されなくなった場合、下の方までスクロールしていたのに一番上まで戻らなければいけなくなったりします。 こういう問題に対しての解決策として、常に一貫した場所に表示され続けるメニューがあります。 モバイルデバイスの場合：モバイル画面は他のデバイスよりも小さいため、ナビゲーションバーが画面の大部分を占めることがあります。ユーザーがコンテンツを見るためにスクロールしているときはナビゲーションバーを隠して、トップに戻るために画面を引き下げたときに表示させるとよいでしょう。 ヒント：追加のナビゲーションを使用して、ページ内の各セクションの間をジャンプさせることもできます。 以下のアニメーションの場合、ユーザーは自分の進行状況を確認することができると同時に特定のセクションへのショートカットとしてこれを利用することができます。   3.「戻る」ボタンが適切に動作することを確認する ロングスクロールのサイトでは、ユーザーが自分のページ上の位置を見失うことがよくあります。ロングスクロールのリストからクリックして該当のページに行ったあと「戻る」ボタンを押したとき、元いた場所でなくページの一番上に戻ってしまうというような形です。 そうすると、一度見たコンテンツをまたスクロールしなければいけなくなります。適切な場所に戻れないことで、当然ユーザーは不満を感じるでしょう。 フィード内の要素をアクティブにしたあと、元いたところにきちんと戻れるようにしておく必要があります。Flickrの「戻る」ボタンはこのような機能についての良い例です。スクロール位置が記憶されており、「戻る」ボタンを押すと元の場所に戻ることができます。   4. スクロール位置に基づいてURLを変更する ロングスクロールの一般的な問題のひとつとして、ページ上の特定の場所へのURLによる共有ができないという点があります。スクロール位置はURLに反映されず、そのページの先頭に繋がります。 URLが現在の位置を捉えないので、ユーザーは画面を簡単に切り替えることができなくなり苛立つことになります。 HTML5からは、history.pushState()関数を使うことで、ページをリロードすることなくブラウザに表示されるURLを変更することが可能になっています。   5. ページ内ジャンプ機能を使用する ロングスクロールのもうひとつの共通の問題は、方向感覚がなくなることです。ユーザーは前に見たものを探すときに苦労します。長いチュートリアルなど、コンテンツが複数の重要なセクションに分かれている場合に特に深刻な問題になります。 「セクションへジャンプ」オプションをつけることでこの現象を解決することができます。 例えばTumblrでは、ページ内で迷子になったときのためにページの下や上にジャンプすることができるようになっています。ページ上のコンテンツはいくつかのはっきりしたブロックに分けられており、大きなインジケーターのドットが画面の左に固定されています。 ヒント：「セクションへジャンプ」機能では、インジケーターのドットを使いやすくする必要があります。 ドットがクリックやタップがしにくい状態だとユーザーを苛立たせることになります。そのため、ドットの大きさが適切であるかどうか確認してください。   6. コンテンツを読み込むときに、視覚的なフィードバックを表示する ヤコブ・ニールセンのユーザビリティ10原則のひとつによると、システム状態の視認性はUIデザインにおいて重要な原理です。ユーザーはシステム上の現在の状態をいつでも知りたいと思っており、Webサイトは閲覧者を不安にさせてはいけません。 適切な視覚的フィードバックを通して、ユーザーに今何が起きているのかを伝える必要があります。Webサイトがコンテンツを動的に読み込む場合は、ローディングが行われていることをはっきりと示さなければいけません。 進行状況を示すインジケーターを使用して、新しいコンテンツが読み込まれていることを表現しましょう。 読み込み時間は2秒～10秒の短い時間であるはずですので、システムが動作していることをループアニメーションで表すことができます。   7. スクロールハイジャックを行わない スクロールハイジャックのWebサイトでは、スクロールが制御され基本的なWebブラウザの機能を無効にされてしまいます。ユーザーがページをコントロールできない上に動作の予測ができなくなってしまうため、スクロールハイジャックは好ましくありません。 この問題はAppleのMac Proのページで見ることができます。ユーザーがどれだけ早くスクロールしても、レイアウトはあらかじめ決められた速度で移動します。 このページの全てのコンテンツはスクロールに関連付けられているため、訪問者はページを遅い速度でブラウズすることを強いられてしまいます。   8. ページの読み込み時間を最適化する ロングスクロールのページでは、読み込みの長さの問題も発生します。これはWebサイトにおいて致命的な問題です。 実際に、ユーザーの47％が2秒以内のWebページの読み込みを求めています。ページが3秒以内に読み込まれない場合、57％のユーザーが去ってしまいます。 ロングスクロールの読み込み時間の問題は解決することができます。レイジーローディングなどの読み込み技術を利用し、ページの読み込み時間を最適化することで基本的なコンテンツにすぐにアクセスできるようにします。   9. リソース消費を考慮する ロングスクロールを使用する場合は、ページが消費するリソース(CPUとメモリ)を常に考慮に入れてください。 ページをリロードせずに複数のページの写真・アニメーションGIF・動画をスクロールすると、システムリソースが大幅に浪費される可能性があります。リソースが限られているデバイス(iPhoneなど)では大量のアセットの読み込みによる遅延が起きる可能性があります。 そのため、さまざまなデバイスでWebサイトをテストし、該当の場所を通り過ぎたときにはアニメーションや動画を一時停止するなどの手法を利用します。   10. ユーザーの行動を考える ロングスクロールがどう効果的であるかを判断するために、ユーザーがどのように操作しているかを調査してください。アナリティクスデータが有効です。 例えば、Googleアナリティクスではページ解析によって何人のユーザーが折りたたまれた部分の下をクリックしているか確認することができます。そのデータに応じてデザインを調整することが可能です。   [PR] Webデザインで副業する方法とはECサイトでのロングスクロール ECサイトではロングスクロールは頻繁に使用されます。ユーザーは製品のリストや検索結果を、中断することなくスクロールして閲覧し続けることができます。 ただしユーザー満足度を向上させるためには、いくつかの一般的な問題に対処する必要があります。 ナビゲーションとフィルタをスティッキーに フィルタリングが適切に行われていると、ユーザーは何千ものWebサイト内の選択肢をニーズに合った数少ない項目に絞り込むことができます。ナビゲーションメニューとフィルタオプションを持続的に表示することで、ユーザーがコンテンツをうまく管理することができます。   それぞれのアイテムをブックマークできるようにする 後々参照できるように気になったアイテムを簡単にブックマークしておける機能は、ユーザーにとって強力なツールです。   条件に一致したアイテムの数を表示する 利用できるアイテムの数を表示することで、ユーザーはフィルタリングによる結果内容のスクロールにかかる時間を判断することができます。   フッターにアクセスできるようにする ユーザーはフッターの概念を理解しており、そこにWebサイトの大事な情報があると思っています。 しかし、ロングスクロールではフッターの閲覧が困難なことがあります。ページの下に行くと新しいアイテムが継続的に読み込まれ、フッターは見えないところに押し込まれます。この問題は深刻なもののように思われますが、「もっと見る」ボタンを利用することで解決できます。 この手法では、コンテンツはオンデマンドで読み込まれることになります。新しいコンテンツは、ユーザーが「もっと見る」ボタンをクリックするまでは自動でロードされません。これによってフッターに簡単にアクセスできるようになります。   ロングスクロールと視差効果 インタラクションデザインはロングスクロールを使ったWebサイトの基礎であり、アニメーションはその中でも欠かせない部分です。 Web上でのユーザーの注目のスパンが約8秒であることを考えると、楽しいスクロールは注意を引きつける時間を引き伸ばすことができると言えます。閲覧者を喜ばせるアニメーションのひとつに視差効果があります。 視差スクロールでは背景画像は手前のコンテンツよりもゆっくりと動き、深みと没頭の錯覚を作り出します。この効果によって画面の立体感が増します。   パララックススクロールをどんなときに使うか 視差は大きな印象を与え、訪問者がもっとスクロールしたくなるなる面白い視覚効果です。ユーザーをあっと言わせたいときに便利な手法になります。 パララックススクロールは、ガイド付きの物語形式で効果を発揮します。 ストーリーをスムーズに直線的に伝えたい場合、視差効果とロングスクロールを組み合わせることによってユーザーは閲覧を実体験のように夢中になって楽しむことができます。 The Boatでは、画面がスクロールされると次のコンテンツのパスを作成しながらアニメーションによって閲覧者を次の場面に導きます。スクロールの動作はより楽しいものになり、ユーザーは「次はどうなるんだろう？」とワクワクするでしょう。   パララックススクロールを使うべきではないケース 多くのユーザーがはっきりしたタスク(製品の購入など)を目的としている場合は、パララックススクロールは使用しないでください。もし製品を購入するたびに視差効果を見せられるAmazonがあったら、どれだけフラストレーションがたまるか想像してみましょう。   パララックスとページパフォーマンス 視差効果を使用するWebサイトの多くは、スクロールのパフォーマンスに苦しんでいます。iPhoneのような高画素のデバイスでは特に害のあることです。 すべてのパフォーマンスの問題を完全に解決することはできませんが、簡単な手法でスクロールのパフォーマンスを向上させることができます。 ブラウザのアニメーションにはtranslate3d・scale・rotation・opacityといった手軽なプロパティのみを使用してください。 大量の画像をアニメートしたり、劇的にサイズを変更させたりしてはいけません。ブラウザに画像(特に巨大なもの)をリサイズさせると、コストがかかる可能性があります。 一度にたくさんのものをアニメートしないようにしましょう。   パララックスとアクセシビリティ 前庭機能障害を持つユーザーが、そのWebサイトを使用したとき視覚的にどのようになるかを考慮しましょう。アニメーションによって目まいが起きる可能性があります。 Val Headはより安全なアニメーションをデザインする方法として、もしWebサイトに大量の動きがある場合はモーションをオフにするオプションをつけることを推奨しています。 ボタンあるいはトグルスイッチを使用して、Webサイト上のアニメーションを減らしたり消したりできるようにします。このアイデアの研究のために、Nat TarnoffはどのWebサイトでも使用できるトグルスイッチのプロトタイプを開発しました。   最後に ロングスクロールによって、没入感のあるブラウジングを生み出すことができます。 ユーザーが直感的なUIが好きであれば、スクロールの長さは気にならないでしょう。閲覧者の目的が達成され、かつ便利だと感じさせるものにしてください。   また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。 現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサイトを開発することが可能です。 独学に限界を感じている場合はご検討ください。
Webデザイン

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） UX/UIデザインコース スマートフォンアプリ開発 アプリデザイン 【誰でも簡単に！】モックアップを作成できるおすすめツール5選