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] UI/UXデザインで挫折しない学習方法を動画で公開中

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

記事を検索

関連するキーワード

関連する記事

優れたデザインを作るための社内コミュニケーション術とは

本稿は、Studio by UXPinのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はLaura Klein氏によって投稿されました。...
アプリデザイン

作る前にチェック！海外のiPhoneアプリのデザイン集サイト18選

スマートフォンの普及に伴って、Webサイトをスマートフォンサイト用に対応するのはもちろんのこと、スマートフォンのアプリのリリースを検討している方も多いのではない...
アプリデザイン

【デザインする前に知っておきたい！】よくあるUXのトラップを避ける方法とは

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

プロトタイプの作成に役立つ！デザインツールInVisionの使い方【初心者向け】

プロトタイプの作成でよく使われているInVisionというツールの使い方を解説している記事になります。 デザインツールとして便利な機能も多いのでぜひ利用してみ...
アプリデザイン

実際のアプリに学ぶ！モバイルデザインにおける配色の重要性

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、エンジニアのNick Babich氏によ...
アプリデザイン

【事例から学ぶ！】聞いたことはあるけど「UIデザイン」とは？

「UIデザインとは」何なのか、歴史などを踏まえて解説しています。 そして、UIデザイナーを目指す上で参考になる勉強サイト等も紹介しています。初心者の方でこ...
アプリデザイン

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

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

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。   プロトタイピングの概念そのものは、インターネットの成立以前から存在していました。典型的な例として、新しい製品を開発をする人々は最初に製品を組み立て、次に製品が期待した通りに作動するか試します。 最初のバージョンで特許を取得して、潜在的な投資家に製品を見せることもあるかもしれません。もし投資家が独自の生産ラインの設備を利用できるとしたら(例えば既存の会社で働いているなどの理由から)、製造可能なレベルのモデルが完成するまで、製品の開発が進められて、バグの修正も行われます。   昔のデモディスクを覚えていますか？ 機能の制限されたプログラムが入っていたり、ゲームの初歩レベルあるいはゲームが2つだけ入っているようなディスクのことです。プロトタイプはデモディスクと似ている点が多くありますが、よりシンプルでさえあります。 Webサイトやアプリのプロトタイプを作成するのは、期待した通りに作動するか確かめるためです。 プロトタイプの目的は、将来の顧客の獲得というよりも、より良い製品を作るのに役立てることです。 Webサイトやアプリのプロトタイプは、製品が期待通りに作動するか確かめるために作成します。またクライアントや潜在的な投資家に製品の作動を示すこともできます。   最近では、Webとモバイルアプリ用のプロトタイプ作成アプリが多数登場しています。 最近リリースされたデザインツールのAdobe Experience Designerは、Webとモバイルに対応したデザインアプリとしての機能と、プロトタイプ作成用のアプリとしての機能が融合されています。 Adobe社の知名度とプロ向け製品における市場シェアを考えれば、多くの人々が今まで以上にプロトタイプを実践し始めているのも当然かもしれません。   今回の記事は初心者向けのガイドです。デザイン業界でどのような経験を積んできたかにかかわらず(あるいは未経験でも)、プロトタイプを日常的に使い始めた方向けに書いています。 このガイドでは何よりもまず基本的な原則を説明します。もちろんその後に発展的な情報として、役立つツールやアプリをリンクとともにご案内します。   ワイヤーフレーム＆モックアップ VS. プロトタイプ デザイナーとしての経験が豊富な方は、すでにワイヤーフレームやモックアップを編集で利用しているかもしれません。ただ、これらは必ずしもプロトタイプとはいえません。 ワイヤーフレームやモックアップで問題なのは静的なことです。製品の機能についての多くの情報を伝えることができないのです。このため、製品の動作性についてクライアントやデベロッパーに誤解を与えるおそれもあります。こうした理由から、プロトタイプとは一般的に、何かインタラクティブな要素を持つものと定義できます。 ただし、例外的に静的なものにもプロトタイプと見なせるものもあります。 例えば、概念的なプロトタイプや、詳細に作成された設計書などです。重要なのは単にインタラクティブであることよりも、製品に期待される機能について情報を伝えられることだからです。 それでもやはり、ワイヤーフレームやモックアップは単にプロトタイプの作成によく使われているという理由だけで、誰も捨てようとはしません。   いつプロトタイプが必要になるのか？ 何かがどのように作動するかを示す必要があるときにはいつでも、プロトタイプが必要です。 わかりやすい例は、Webアプリやモバイルアプリです。アプリは、モックアップでは簡単に見たり予測したりできない機能を数多く持っている傾向があります。コンテンツ中心型の静的なWebサイトでさえプロトタイプを必要とするかもしれません。 1つの理由として例を挙げると、私は以前クライアントにシンプルなビジネスサイトのモックアップを見せたときに、クライアントから「トップページにある「概要」や「サービス」などをクリックしたら別のページに移行するのか？」、「コンタクトフォームでユーザーが「送信」をクリックしたら、私はメールを受信することになるのか？」と聞かれたことがあります。 シンプルなタスクでさえ不確実性を伴うことがあり、プロトタイプは当て推量を解消するのに役立ちます。 また、簡単なブラウジングの操作さえ、ユーザーやクライアントによってはわかりづらくて大変な作業となりえます。プロトタイプがあればネットワークからサインオフするときにも、当て推量する手間を省くことができます。 加えて、プロトタイプはユーザーテストに役立ちます。ユーザーテストを行うときには、初期段階からプロジェクトのシミュレーションを始めるのがベストです。作業がほとんど完了した後に大きな変更をしなければならない事態は避けたいところです。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中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デザイナーのサポートで学びたい場合はご参加ください。
アプリデザイン

作業を円滑に！エンジニアとデザイナーが衝突しない秘訣とは

本稿は、UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。記事は、エンジニア、Webデザイナー、ペンシルバニア州立大学の助教授であるJames Stone氏によって投稿されました。   プロジェクトをタイトなスケジュールで進めるときには、共同作業は困難を極めます。 デザイナーとエンジニアの意見を一致させるのは、非常に大変です。 もし彼らが同じプロジェクトで、Webサイトを公開しようとすれば、オフィスの中は戦争状態と化すかもしれません。   では、デザインを素早く完璧にこなし、かつ世界に通用するレベルのWebサイトを構築するにはどうしたらいいでしょうか？ この記事では、プロジェクトの共同作業における問題を解決するためのアドバイスを紹介します。すべてのアドバイスは、私が過去10年間にWebデザイナーおよびエンジニアとして経験してきた成功と問題から引き出したものです。   目次 グリッドシステムをレスポンシブデザインで設計する ピクセルパーフェクトなデザインを実現できるツールを使う Photoshopの代替ツールを考える 値を統一する プロトタイプを使った共同作業をする デスクトップファーストの手法を排除しないこと アセットの引き継ぎには十分注意を払う   1. グリッドシステムをレスポンシブデザインで設計する グリッドシステムはすでにご存知かもしれません。私がエンジニアとしてデザイナーと共同作業をしたときに直面した問題は、グリッドシステムをレスポンシブに設計するスキルが、デザイナーたちに不足していたことです。   グリッドの幅を具体的に設定する まず技術的な話から始めましょう。最初に、グリッドの幅は具体的な数値で設定し、各グリッドごとにガターのサイズも正確に把握します。こうしておくことで、デザインに統一感が生まれ、またくり返し微調整する手間も省けます。 開発チームへグリッドシステムを引き継ぐときにも、数値は正確に揃えておきましょう。もしパディング（padding）を15ピクセルで設定したら、厳密に15ピクセルになっていなければなりません。グリッド全体の幅を1000ピクセルで設定したときも、厳密に1000ピクセルです。 レスポンシブデザインとは、あらゆるデバイスやシステムにおいてWebデザインが柔軟に機能することを意味しますが、最初の数値設定は厳密に行う必要があります。   デザイナーは、モバイル端末上の表示もチェックすること モバイルビュー デザインを美しく仕上げても、それで完成ではありません。モバイルビュー（モバイル端末上の表示）も忘れずにチェックしてください！ もしデザイナーがモバイルビューをチェックしなければ、エンジニアはデザインの意図を汲みながら、モバイル端末上でも上手く作動するように、すべて一人で設計しなければなりません。私はエンジニアとして、こういう状況によく遭遇します。 デザイナーも、グリッドシステムをレスポンシブに設計する方法について、よく理解しておくべきです。 プロジェクトの共同作業を円滑に進めるためには、デザイナーは、デスクトップ版からモバイル版へ移植するときの各要素の並べ方（mobile stacking order）も考えておくといいでしょう。 また時間に余裕があれば、モバイルビューのモックアップを作成しておくと大いに役に立ちます。完成製品のデザインをイメージしやすくなります。   互換性の問題 デスクトップ上で作成したグリッドシステムは、モバイル端末上では上手く機能しないこともあります。たとえば、サイズの大きい要素は、モバイル版のサイズに上手く縮小されないことがよくあります。 デスクトップとモバイルのインターフェース間では、このようにデザインの互換性の問題が起こることがあり、タイムラインを示すUIの要素（timeline UI element）にも見られます。 デスクトップ上では問題なく表示され、時間軸上の各ポイントも見やすいデザインです。しかしモバイル端末上では表示が崩れることがあります。 デザイナーは、こうした問題を自力で解決する必要があります。そうでなければ、エンジニアにデザインの意図を誤解され、予想もしなかったようなおかしなデザインが生まれるおそれがあります。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中2.ピクセルパーフェクトなデザインを実現できるツールを使う ショックを受けてほしくないのですが、Photoshopは現代的なWebサイトを構築するのに適したツールとはいえません。 私はエンジニアとして、Photoshopで作成されたモックアップを渡されることがよくあります。残念なことに、Photoshopで作られたモックアップは、エンジニアがWebサイトを構築するときには問題となることがあります。Photoshopでは、エンジニアが必要とするレベルの精度と正確さを実現できないからです。   フォントの整合性 第一に、PhotoshopとWebの間で、フォントの整合性が保たれる保証はありません。 Photoshopのファイル形式でデザインされた文字は、Web上で表示が崩れてしまうこともよくあります。文字がより太くなったり、全く異なるデザインになっていたりするのです。オープンソースのフォントでさえ、Photoshopで編集すると、Web上で表示が変わることがあります。 デザイナーは、ウェイト（太さ単位）を基本にして、フォントの調整を行うべきです。 スクリーン上での表示を基本にしてフォントの調整を行うのは、良くありません。Webを構築したときに、デザインが歪んだり劣化する原因になるおそれがああるからです。   パフォーマンスの問題 ピクセルパーフェクト（px単位の正確な設計）が重要なのは、他にもデザイナーがWeb用に作成するPhotoshopのファイルには問題があるからということも理由の1つです。 その1つの例がドロップシャドウです。 Photoshopは高機能なドロップシャドウなどを備えています。デザイナーは、シャドウ、マスクなどのデザイン効果を柔軟に使いこなすことができます。しかし、エンジニアがこれらのデザインをWeb用にコーディングするときには、使える選択肢がかなり限られているのです。 また、エンジニアがWebサイトのフロントエンドの開発をするときには、パフォーマンスを非常に重視します。 スタイリッシュなUI要素を表現するために、24bitの半透過または透過のPNG形式のサイズの大きい画像などを使うとしたら、Webサイトの読み込みに時間がかかります。もしこのような要素が100個あれば、100倍の時間がかかり、Webサイトの動きは非常に鈍くなります。   解決策の1つは、ドロップシャドウを使う代わりに、CSSでコーディングすることです。 CSSを使うと、ドロップシャドウの他にも多くのデザイン効果を表現できます。もしエンジニアがCSSを使えるなら、Web上にPNG形式の画像を埋め込む代わりに、CSSを使うべきです。 軽量なデザインが可能となり、要素のサイズを小さくすることができるというメリットがあります。しかしデメリットもあり、CSSで作ったタイポグラフィやドロップシャドウは、元の画像と全く同じデザインに仕上げることはできません。 2つの画像のうち、上が透過のPNG形式の画像で、下がSVG形式の画像です。 見た目はほとんど同じですが、画像のサイズはPNG形式は12.3kもあるのに対して、SVG形式はわずか1.7kです。SVG形式の場合、シャドウをデザインするときには、ディテールの調整、ブレンドモードによる色の変更なども、完璧に行うことができます。 一方、透過のPNG形式だと、画像の背景色を変更するときに、背景色がアルファチャンネルのデータ領域ににじんでしまって、他の要素の周りに光の輪がついたように見えることがあるのです。   Photoshopの代替ツールを考える あなたがどのようなツールを選ぶとしても、PhotoshopがWebデザインのツールとしては最適な選択でないことは明らかです。たとえば私は、Bohemian Coding社の開発したSketch 3というデザインツールを使っています。 今のところSketchにはバグや問題もあるのですが、デザインの整合性を保つためには非常に優れたツールです。 まず、px単位で厳密に行う設計なデザインを素早く簡単に行うことができます。フォントやドロップシャドウも、CSSでコーディングするのと変わらない出来栄えです。 Sketchには、作成したデザインからCSSのコードを取得して、コピー&ペーストで利用できる機能もあります。そのため、一度デザインしたものを、最終的にHTMLやCSSでコーディングし直す必要もありません。   ピクセルパーフェクトなデザインを可能とする現代的なツールを使えば、デザインの意図を完成製品に反映することが可能です。プロジェクトのメンバーの仕事の負担軽減にも大いに役立ちます。 より詳しい活用方法をご紹介すると、私は各レイヤーのプロトタイプを作るために、Sketchで作成したモックアップをインポートして共有しています。こうすることで、同じチームのエンジニアはデザインの見た目だけではなくて、デザインの動作性も知ることができます。   3. 値を統一する マージン（margin）、フォント、行（line）の値を統一することで、プロジェクトを速いペースで進めるときにもフラストレーションの緩和に役立ちます。 良いデザインを生むためには、フォントのサイズやウェイト（太さ）、文字間隔、行の高さを制限することも大切です。具体的なアドバイスは、次に示しています。   マージン（margin） マージンについてのアドバイスはシンプルです。 マージンとパディングの幅のpx（ピクセル）の数値は、端数を切り捨てて、5の倍数に設定します。たとえば、13、17pxなどよりも、10、15、20pxなどを使いましょう。 デザインと開発の両方の観点から、5の倍数のpxを使うことには、統一感を生む効果があるといえます。   行（line）の高さ 行の高さを統一することで可読性が高まります。 もし行の高さを出力するときに、Photoshopなどのプログラムをデフォルトとして使っているとしたら、可読性に問題が生じるおそれがあります。また、行の高さを1.2（元のフォントの1.2倍の高さ）に設定するのは、現代的なWebデザインには適していません。エンジニアやエンドユーザーが問題を抱える可能性があります。 多くのWebサイトでは、可読性を最大限に高めるために、行の高さを1.5または1.6に設定しています。エンジニアが後で修正しなくてもいいように、本文（body）のテキストにはこれらの数値で統一しておくといいでしょう。もっとも、見出し（headline）のテキストは、1.2で設定しても見栄えの良いデザインになります。   ただし一貫性を保つのがルールです。たとえば完成製品のデザインにおいて、見出しの行の高さを1.2、本文の行の高さを1.5とすることが目標であれば、このデザインを実現できるように、モックアップやプロトタイプの作成においても、同じ数値を一貫して使うことが大切です。   フォントサイズと文字間隔 使用するフォントサイズは3または4種類、最大でも5種類までに止めましょう。 BootstrapやZURBのFoundationなどのレスポンシブデザインに使えるフレームワークでは、フォントサイズが規定値になっていることがあります。さらに、モバイル版を設計するときには、見出しのフォントサイズが一回り小さな規定値になります。デザインするときには、これらの規定値を解除しておきましょう。 見出しに使うフォントサイズは、端数のない数字で統一します。ページからページへ移行するときにも、デザインの統一感が保たれる効果があります。40pxと42px、または38pxと38.5pxなど不揃いな値を組み合わせて使うと、デザインの統一感が失われてしまいます。   文字間隔についても、値を統一することが大切です。文字間隔には、見出しを強調して、美しいタイポグラフィを生み出す効果があります。 また、もしあなたがデザイナーで、文字のデザインについてエンジニアより主導権を握りたければ、各要素ごとに文字間隔を統一して設定しておきましょう。   フォントのウェイト（太さ） エンジニアの観点からいうと、デザイナーがフォントのウェイトを増やすほど、フォントの読み込みに時間がかかります。 これは、Googleフォント、AdobeのTypekit、その他すべてのフォントについて当てはまります。どのくらいの時間になると思いますか？フォントのウェイトの数を2上げるごとに、ページの読み込みに2倍の時間がかかります。Webサイトの読み込み時間が長くなるほど、利用者もユーザーエクスペリエンスを遅く感じるはずです。   フォントのウェイト数はなるべく控えめにすることを、私はおすすめします。デザイナーは「このデザインのフォントはもっと軽いウェイトで実現できないか？」、「5ではなくて3のウェイトでも良いのではないか？」など自問してみるべきです。 ウェイトの数を小さめにすれば、プロジェクトを効率的に進めて、軽量なデザインを実現することができますし、結果としてモバイル端末や他のプラットフォーム上での読み込み時間も少なくなるので、ユーザーエクスペリエンスの質を高めることにもつながります。   4. プロトタイプを使った共同作業をする プロジェクトの共同作業を進めるときに、プロトタイプを利用しないとしたら、ミーティング、電話のやりとり、（コーヒーのしみのついた）手書きのメモなどが溢れかえり、コミュニケーションは収拾がつかなくなります。 言うまでもなく、文書は管理不可能になり、プロジェクトマネジャーやデザイナーたちはデザインのコンセプトを伝えるのに苦戦するでしょう。 画像：注釈を入れすぎたワイヤーフレームの悪い例 次に、文書を減らして、明確なコミュニケーションを図るのに役立つステップをご紹介します。 まずプロジェクトの開始時に、要件定義書などは、網羅的な文書というよりもナレッジハブ（情報の中央管理システム）として活用するよう、提案してみましょう。たとえば次の画像に示した要件定義書では、基本デザインと技術原則を定め、これにプログラムのバージョン管理のために使うツールへのリンク情報を加えただけのシンプルなものです。あとは、これらのツールを使ってデザインやバージョンをマークアップ言語で記述したときに、現場での必要性に応じて、追加の文書を作成すればいいのです。 画像：Autodesk社のソフトAutoCAD 360で作成した製品の要件定義書 プロジェクトの開始後には、システム全体のインタラクションを考えるために、ユーザーフローを作成します。次の画像で示すように、ユーザーエクスペリエンスにおいて重要な鍵となる部分には、コメントを追加しておきましょう。エンジニアとプロジェクトマネジャーが全体の流れを把握するのに役立ちます。 画像：Autodesk社のソフトAutoCAD 360で作成したユーザーフローの図 ユーザーフローについてディスカッションを重ね、イテレーションを実践したら、次はユーザーエクスペリエンスのデモを行います。ローファイのプロトタイプを作成し、エンジニアに説明するためのコメントを余白に加えておきます。   5. デスクトップファーストの手法を排除しないこと 私の携わったプロジェクトの約95%は、いわゆる「デスクトップファースト」の手法で開発が進められました。デスクトップファーストは、モバイル版より先にデスクトップ版から、インターフェース、デザイン、インタラクションなどの開発を進める手法です。 デスクトップファーストと対比される手法がモバイルファーストで、Web製品のモバイル版を開発するときには、とても優れた手法です。しかしながら実際に有効活用するのが難しいこともあり、デザイナーはデスクトップファーストの手法を排除するべきではありません。 デスクトップファーストで開発を進めるとして、すでに製品のユーザーがいるときには、Googleアナリティクスのトラフィック分析を利用すれば、ユーザーの使っているデバイスの「画像の解像度」を知ることができるので、最適なスクリーンサイズを決定できます。   プロジェクトによっては、13インチまたは15インチのMacBook Pro Retinaディスプレイモデルのスクリーンに合わせてデザインすることもあるかもしれません。おそらく、12インチの小型ノートPCなどのスクリーンに合わせてデザインすることが最も多いと思いますが。 Googleアナリティクスを利用することで、ユーザーがコンテンツをどのように見ているかを知ることも、コンテンツがスクリーン上で一番映えるにはどうデザインしたらいいかを知ることもできます。 またCSSのメディアクエリ（Media Queries）とブレイクポイント（Breakpoint）を、レスポンシブデザインに上手く活用する方法を知ることも大切です。ブレイクポイントのpxの数値は、デザインが良く見えるように適切に設定します。   6. アセットの引き継ぎには十分注意を払う デザインした要素などアセットをチームのメンバーに引き継ぐときには、渡すだけで済むこともあれば、デザインを改良するためにコミュニケーションを何度も重ねなければならないこともあります。 「画像はプログレッシブJPEG形式にするべきか？」、「どのくらい縮小するか？」、「SVG形式にするべきか？」、「SVG形式の画像を最適化する方法は？」、「SVG形式の画像をどのように作成するか？」などのやり取りが行ったり来たりすることもあります。 たとえば、デザイナーがサイズの不揃いなアイコン一式を作成したとします。 これらを引き継いだエンジニアは、SVG形式のファイルでアイコンを作成し直すことになります。SVG形式のファイルはパフォーマンスが高い一方で、そのままでは要素のサイズは不揃いなので、スクリーンの上（top）または下（bottom）に合わせて配置したたときには、統一感のないデザインになります。 その結果、エンジニアはすべてのアセットを最初から作り直すか、CSSでコーディングをしてサイズを統一しなければなりません。 仕事の無駄を避けるには、なるべく早い段階で、最適なファイル形式を選んでおくべきです。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
Webデザイン

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

Airbnbを事例に学ぶ！失敗しないWebサイトの作り方とは

本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。 また本記事はIndra Sofian氏によって投稿されました。 Webサイトの優れたデザインというと何を思い浮かべますか？ 私にとってはAirbnb（エアビーアンドビー）です。 トップページに人目を引く動画があったり、カラーパレットの構成が良いだけでなく、優れたユーザー体験を考えて設計されているように思います。   では、優れたユーザー体験の定義とは何でしょうか？ 1つの条件は、ナビゲーションや検索機能が優れていることです。ユーザーの求める情報を提供することが、ビジネスで使われるWebサイトの主な存在理由だからです。 もしユーザーが必要な情報を得られない（または情報がわかりにくい）としたら、そのサイトは失敗作です。 ユーザーが必要なときに必要な情報を得られるように、レイアウトとコンテンツを上手く組み合わせましょう。 他にも考えるべき事は多くあり、失敗も数多く経験するかもしれません。 最初は急がず、まず土台となるコンテンツから作り始めます。 ワイヤーフレームから始めて、次にイテレーション（反復型の短期の開発サイクル）を実践し、最後にインタラクティブなモックアップを作成します。   なぜワイヤーフレームを作るのか？ ワイヤーフレームを作るメリットは、デザインのアイデアを形にしたり、イテレーション（反復型の短期の開発サイクル）を行うのに役立つことです。 ワイヤーフレームはサイト完成時のコードを備えたものではなく、静的な試作デザインです。さらに動作性もテストできるインタラクティブなワイヤーフレームであれば、完璧です。 ワイヤーフレームを作るときには、重要なデザイン要素を改良するために、失敗や試行錯誤があってもいいでしょう。 またWebサイトにはそれぞれ目的があるものですが、ワイヤーフレームを使うことで、目的に最も合ったフレームワーク、コンテンツ、デザイン要素を作成できます。 たとえば、Airbnbは旅行サイトでは、ユーザーに良い旅先と良いホスト先の情報を提供することが目的です。ヘッダーからリスト構造に至るまで、この目的に最適なデザインが考えられています。 また、デザインの要はコンテンツです。ユーザーがWebサイトに訪れるのは、美しいデザインを見るためというよりも、情報を得るためです。   UIデザインの不変の原則 ワイヤーフレームやモックアップを使った練習に入る前に、もう一度Airbnbの優れた点を考えてみましょう。   1.質の高い画像で注目を集める 多くの人は旅行しようと考えるとき、おそらく詳細な計画やレンタカーの情報よりも、視覚的なイメージが先に思い浮かぶはずです。 こうした傾向を踏まえて、視覚的なイメージを活用しているのがAirbnbです。 ホスト先のリストなどすべてのコンテンツにおいて、画像がテキストより優先して使われています。レイアウトの大半は画像で占められていて、画像の隣に太文字の使われた要素やボタンを置いて、ユーザーがクリックしやすいようになっています。 ヘッダーには、Airbnbの利用者が世界の旅先で異文化や多様な環境を体験している動画を使っています。これこそまさにユーザーが旅行サイトで見たいと思っているものです！フォームに文字を入力してホスト先の予約をするだけではなく、実際の旅行を疑似体験できるのです。   2.コンテンツをシンプルにする 旅行の計画は、複雑で煩わしいものになりがちです。旅行先選び、行く場所の下調べ、滞在期間、ドライブの経路など考えるべきことが多くなります。 Airbnbのサイト上ではこうした情報を整理して、最も関連性の高い情報に的を絞って提供しているのです。 データ入力用フォームはシンプルで、ホストの使うボタンも見つけやすいです。 また、リスト構造もブラウジングが容易になるすっきりした設計です。 ページには要素がリスト構造で並べられ、両端には余白が設けられているだけで、広告など余計な情報もなくすっきりしています。 背景とフォントのコントラストが高く、コンテンツの文章もシンプルな語り口です。トップページで冗長な文章が続くこともなく、各コンテンツはシンプルな画像とその上の太文字のテキストから構成されています。   3.最も重要な機能を強調する Webサイトは、最もよく使われる機能へのアクセスが、最も容易になるようにデザインするべきです。 ユーザーがサイトを訪問する理由を考えましょう。 たとえばAirbnbでは、ユーザーはホスト先を探すためにサイトを訪問しています。そのため、次のようにCTA（コールトゥアクション）が上手く使われています。 トップページの中央には、ユーザーにホスト先を案内するためのボタンが、CTAとして配置されています。 また検索バーのボタン（「Search」）には、よく目立つピンクの色が使われています。検索バーの背景に、透過性のある黒い色を置くことで、検索バーをCTAとして一層目立たせています。 ヘッダー中央に動画再生ボタンが配置されていて、ユーザーがクリックすると、旅行体験の動画が再生されます。 また、Airbnbでは、ホストになることに興味のあるユーザー向けにも、「ホストになる」というボタンやホスト収入を示したブロック要素によって、わかりやすく情報を提供しています。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中AirbnbのWebサイトを作るためのステップ ではAirbnbのWebサイトを作ってみましょう。最初はワイヤーフレームです。 ワイヤーフレームを作るメリットは、レイアウトに必要な要素を組み立て、全体としてどのように機能するかを試せることです。 Airbnbのサイトをまず静的なワイヤーフレームから組み立ててみましょう。   1.基本のレイアウト 私の方法では、まずレイアウトの骨組みを作ることから始めます。「 コンテンツワイヤーフレーム」として知られるこれらのボックスは、サイトのページ上の各要素を表しています。 このステップでは、コンテンツ、視覚的な階層構造を主に考えましょう。 これらのボックスを使って、ナビゲーションバー、ヘッダーなど各要素の配置を試してみます。 この骨組みを作っておくことで、実際のデザインを詳細まで考えなくても、全体のレイアウトを考えることができます。 新規のデザインを作成するときには、ボックス型のワイヤーフレーム同士を矢印でつないで関係性を示し、コンテンツの全体構造を把握するのもいいでしょう。 既存のデザインに修正を加えるだけであれば、基本のデザインは完成しているので、最初からモックアップ作成のプロセスに進んでもいいでしょう。   2.ヘッドライン（見出し）とヘッダー 見出しとヘッダーは、重要な要素です。 見出しはユーザーの視線を瞬時に集められるような、はっきりとした表現力のあるデザインがいいでしょう。 たとえば、Airbnbでは「Live There（暮らしてみよう）」という見出しを使っています。Airbnbは旅行先のホストを紹介するサービスなので、「travel there（旅してみよう）」や「visit there（訪れてみよう）」ではなく、このキャッチコピーが合っているのです。   次に小見出しとして、「現地のホストのお家に宿泊して、191か国以上で暮らすように旅しよう 」を作ります。ユーザーに、Airbnbの体験やどこからでも使える利便性を伝えられます。 ヘッダー画像は、ユーザーが最初に目にするものです。ヘッドラインとのバランスが悪かったり、気を散らすような画像だとユーザーを失いかねません。ページにふさわしいヘッダー画像を使いましょう。 Airbnbでは、ユーザーが世界中で魅力的な旅をしている動画をヘッダーに使っています。   3.CTA（コールトゥアクション） CTA（コールトゥアクション）は、ユーザーを必要な動作へ上手く誘導できるデザインにすべきです。使う文言は、「続きの内容はコチラ」のような曖昧なものではなく、明快にすべきです。 デザインとしては、緊急性が高いことを上手く伝えられるものがいいでしょう。 AirbnbのCTAは明快かつ詳細です。検索バーでは、「場所」「日時」「宿泊人数」などの要素、ピンク色の「探す」という要素を使って、わかりやすく構成されています。 CTAをヘッドラインの下に配置するのはよくあるレイアウトですが、Airbnbのサイトではこれが特別な効果を発揮しています。つまり、ただ目立つだけではなく、ユーザーはヘッダーの魅力的な動画を見ながら、検索バーで旅行のプランを検討できるのです。   4.コンテンツのブロック 次にページのコンテンツを作ります。ここでは実験的に一部を作ります。 Webサイトの作成で、ページにヘッダー以外の要素も入れるときには、一番上のコンテンツに注目を集めるようなデザインにします。 このブロックは、ほとんどヘッダーと同一化した要素と見なせます。 Airbnbのユーザーには、「旅行者」と「ホスト」の2タイプいます。ここで作成したブロックは、「ホスト」向けのものです。ブロック内に小さなCTAの要素（see what you can earn：「収入を見る」）を配置しています。   5.ナビゲーションバー ナビゲーションバーは小さいながら、ユーザーの案内役として非常に役立ちます。ユーザーがサイト上で探している情報を見つけられない場合にも、最初に使うのはおそらくナビゲーションバーです。 ナビゲーションバーに使うアイコンの数は限定しましょう。ナビゲーションバーのスペースは限られているので、あまり多くのアイコンを詰め込みすぎると、ユーザーを疲れさせる原因となります。 それに見た目にもごちゃごちゃした感じになります。 ユーザーを案内するのに必要十分なアイテムだけでいいのです。 たとえばAirbnbでは、4つのアイコンに限定しています。 「ホストになる」は、ユーザーの約半数に向けて作られたものです。 「メッセージ」では、ユーザーに重要な通知を送ります。 「ヘルプ」は総合案内です。 「アカウント」はユーザーの情報管理のためのものです。   6.インタラクティブな設計にする インタラクティビティ（動作性）は、ユーザーエクスペリエンスの要です。 インタラクティブな設計にするには様々な方法がありますが、ここではページ上で最も重要な、CTAの要素に動作性を加えてみます。 モックアップの作成では、すべての要素にインタラクティビティを加える必要はありません。完成したサイトをイメージするのに十分な程度で構いません。また、少なくとも5人のユーザーに試用してもらいましょう。 ドロップダウンメニューを追加して、ページ上にポップアップウィンドウで表示されるようにして、ユーザーがボタンをクリックしたり、マウスのカーソルをボタンから移動した時に消えるようにしてみました。また、マウスが検索ボタンの上にホバーした時に、ボタンの色が変わるようにしています。 このような小さな工夫を加えることで、ユーザーにボタンに気づいてもらいやすくなります。 上の画像は、検索バーの「目的地」にドロップダウンメニューを加えてみたものです。   次のステップへ これですべてです！ 今回は、コンテンツのワイヤーフレームを作成し、イテレーションを実践し、動作性を備えたモックアップへと作り変えるステップを紹介しました。 Webサイトを作るときの、ワイヤーフレームとモックアップの作成スキルは、きっと他の場面でも応用できます。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
Webデザイン

デザイナーなら必見！どんな作業にも便利なSketch用プラグイン12選

本稿は、WebDesignerDepotのブログ記事を許可を得て日本語翻訳し掲載した記事になります。 本記事は、ライターでありUXデザイナーでもあるJake Rocheleau氏によって投稿されました。   Sketch44のベータ版終了に伴い、Sketchの最も優れた機能のひとつである豊富なオープンソースのプラグインを見ていきましょう。 Sketchのコミュニティはとても便利で、ワークフローを根本から改善させるすばらしいプラグインをたくさん見つけることができます。この記事では、デザイナーの皆さんが持つべき12のベストSketchプラグインについて説明します。 なお、初心者向けにSketchの使い方も解説しているので、詳しく操作方法を見たい方は参考にしてください。   1. Sketch Measure Sketch Measureは、デザイナーが開発者・プロジェクトマネージャー・および他のチームメンバーの作業を計画し、その要点を説明するのに役立ちます。 しかしこのプラグインは、自分でデザイン・コーディングすべてを行う一匹狼にとっても便利なものです。Measureプラグインを使用すると要素の幅・高さが表示され、ひと目で適切な測定を行うことができます。 ボタン・テキスト・アイコン・アートボードの主要部分など、ページ内のすべての要素を測ることが可能です。 Sketch Measureを使用すると、ページをそのままHTMLとCSSにエクスポートすることもできます。Adobeのツールでも同じことはできますが、Sketch内でこの機能がすべて備わっていることによって仕事がより簡単になります。   2. InVision Craft 以前にInVisionチームは新しいプラグインCraftを発表しました。これはどちらかというとプラグインのパッケージのようなもので、たくさんの機能とショートカットが追加されています。 ひとつの例として、デザイナーがWeb上のパブリックAPIからテキストとデータを直接取り出すことができるようになるDataプラグインというものがあります。これによって、実際のコンテンツと画像をその場で自動的にアプリに取り込むことが可能です。 CraftはInVisionの開発者によって常に新しい機能のプラグインが更新されており、デザイナーにとってとても価値のあるものになっています。 現在Craftには、6つの主要なプラグイン機能があり、そのすべてがデザインワークフローに追加すべきものです。 Freehand：リアルタイムでの共同作業 Prototype：動的で再現度の高いプロトタイピング Sync：InVisionのプロトタイプとSketchのインスタント同期 Data：Webにある実際のデータを、Sketchのモックアップ上で取得する Library：チーム全体で共有できる、クラウド上のデザインアセット Duplicate：軽快なUIクローニング Craftのホームページを見て、一度試してみると戻ってこれなくなるでしょう。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中3. Sketch Toolbox すべてのSketchユーザーはSketch Toolboxについて知っておく必要があります。プラグインのインストールとカスタマイズをとても簡単にする、優秀なプラグインマネージャーです。 Toolboxを使用すると、何百ものSketchプラグインを検索してそこからインストールするものを選ぶことができます。必要なものをクリックするだけで自動的にコンピュータにダウンロードされ、すぐに使用が可能です。 また、Sketch Toolboxはプラグインをスムーズに動作させるために自動的に更新を行います。 このプラグインはまだベータ版でありGitHubで常にアップデートされていますが、制作ワークフローで使用するのには充分です。実際、この素晴らしいプラグインマネージャーなしでは良いSketchのワークフローは完成しないと思います。   4. Export Assets デザイナーにとって最も詳細なタスクのひとつとして、リソースを割り当てて開発者と共有するということがあります。すべての小さなアイコンやグラフィック、背景パターンを(通常は手作業で)エクスポートしなければなりません。 Export Assetsプラグインを使うと、このプロセスが簡単になります。このプラグインは、デザイナーがAndroid・iOSインターフェイスのアセットをエクスポートしなければならないモバイルアプリに向けたものです。@2xと@3x画面サイズのRetinaアセットが含まれています。 Sketch Exporterプラグインもチェックするのもいいでしょう。現在ベータ版であり、元々のバージョンを改良したものです。   5. Content Generator 前述のCraftプラグインはコンテンツの生成に役立ちますが、Timur CarpeevによるこのContent Generatorのようなシンプルなものが必要なときもあります。 このプラグインをインストールすると、以下のような自動生成されたダミー素材を入れることができます。 ユーザーアバター ファーストネームとラストネーム ダミー段落テキスト カスタム文字列(位置情報・価格・CCカード番号など) すべてのコンテンツはUnsplashやUinamesのようなオープンソースのデータベースから取得されているため、商用プロジェクトでも利用することができます。   6. Looper Photoshopは独自のアクションパネルで繰り返しアクションを自動化することができます。Sketchにはこのようなパネルはありませんが、完全無料で使いやすいLooperプラグインがあります。 このプラグインはページ全体を占める繰り返しパターンを作成する場合に便利です。Webデザイナーよりもグラフィックデザイナーにとって便利なプラグインかもしれません。繰り返しの調整や複製のタスクによる時間を短縮してくれます。 Looperのホームページで機能を確認することができます。誰にでも必要であるというプラグインではないかもしれませんが、使いこなせる人にとっては時間の節約になるものだと思います。   7. Sketch Iconfont Webデザイナーはアイコンフォントを愛用しています。UIデザインがやりやすくなるだけでなく、フォントファイルは一般的に画像よりも容量が小さくなるというメリットもあります。 Sketch Iconfontプラグインはアイコンフォントを格納・ソート・取得するための完成された管理パッケージです。 デフォルトでは空の状態なのでプラグインを利用する際にはアイコンフォントをダウンロードする必要がありますが、それによってオンラインで見つけたアイコンフォントを使い作業するためのアクセスを完全に得ることができます。 アイコンフォントフォルダをすぐに充実させたい場合はこのプラグイン用に特別に作られたフォントバンドルパックを使うことができます。そしていつでもサイトを精錬することができるようになります。 私はこのパッケージを必ず持っておくことをおすすめします。アイコンフォントは普及しており、現在のWebサイトに欠かせないものです。   8. Style Inventory Sketchファイルを新規作成するときは最初からスタイルを作り直すか、以前のモックアップからスタイルをコピー＆ペーストする必要があります。 Style Inventoryプラグインを使うとこの余分な作業を回避することができます。数回のクリックで以前のすべてのスタイルが新しいSketchドキュメントにインポートされ、簡単にアクセスできるようになります。 これらのスタイルには色・テキストスタイル・シンボル・特定のレイヤースタイルが含まれます。 このプラグインはめったに更新されませんが、同種のモックアップをマージするために導入をおすすめします。カラースキームの保存とインポートのためにSketch Palettesプラグインを使用するのもいいかもしれません。   9. Pixel Perfecter デジタルデザイナーは誰もが、ピクセル・パーフェクトなモックアップを誇りとしています。この作業は難しいことではありませんが、すべてのデザイン要素が重なりや欠陥なくグリッドと完全に合わさっていなければなりません。 エクスポートの前に確認したい場合はPixel Perfecterを使用しましょう。この小さなプラグインはすべてのファイルアセットをチェックして、従来のX・Y座標からのピクセルのはみ出しがないか確認を行います。 このプラグインは、相殺するピクセルを自動で修正するものではありませんので注意してください。問題の原因となっているレイヤーがハイライトされるので、それを自分で直すことになります。それでも、各レイヤーを手動で確認するような時間を大いに短縮することができます。   10. Dynamic Button オリジナルの動的ボタンプラグインは2015年に廃止されましたが、新しいDynamic ButtonプラグインはSketch3.5+との互換性がさらに向上しました。 作成した任意のテキストレイヤーにパディングとボタンスタイルを自動的に追加します。またパディングは動的なので、テキストサイズに関係なく更新されます。これはモックアップを常に変更しているUIデザイナーにとってとても役立つものです。 このプラグインはボタンが一般的に固定のサイズ・比率に従うモバイルアプリケーションにも使用できます。Dynamic Buttonは最も魅力的なプラグインというわけではありませんが、そのタスクはよく機能しています。   11. Compo ボタンジェネレータといくつかの特別な機能が必要な場合は、Compoプラグインを試してみるといいでしょう。 Compoの製作者は、Dynamic Buttonをしばらく使用してアイデアを得ました。Compoは仕様に合わせて、適切なボタンサイズとテキストサイズを自動生成します。このプラグインを使うとワンクリックで自動的にサイズ調整・配置されたSketchコンポーネントを作成することができます。 通常はボタンを作成してからテキストを変更すると、テキストレイヤーにしか反映されず下のボタンはサイズが小さすぎる状態になります。Compoは、ボタンとテキストを自動的にひとつの要素としてサイズ変更を行います。 GitHubレポジトリには、初めて使用する人のためのいくつかのユーザーズガイドとたくさんのデモがあります。   12. CSSketch 最後にCSSketchプラグインを紹介します。これは作成している全てのスタイルのCSSコードに直接アクセスしたい、デザイナーと開発者の組み合わせにとって便利なものです。 デザインしたページのアセットを含むスタイルシートを丸ごとエクスポートすることができます。ただし、自動化されたものであるためA++品質のコードは期待できません。 私はまだ手作業でCSSをコーディングする方が好きですが、このプラグインは技術を持っていないデザイナーや、時間を節約したい開発者にとっての手助けとなるでしょう。 デザイナーにとって当たり前のツールとなりつつあるSketchですが、機能や使えるプラグインもどんどん増えています。 プラグインは状況によっては非常に作業時間を短縮するツールになり得ます。今は必要なくても必要になった時に知っておくとデザインの作業に役立つでしょう。   また、TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
アプリデザイン

デザインを実装する上で知っておきたい！9つの原理とは

本稿は、Smashing magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、UXディレクターでありデザイン本の執筆もしているTom Greever氏によって投稿されました。   先日、クライアントに向けたHTMLとCSSを使用してデザインを実装するための方法についての講習会で指導を行っていました。 そこでは、スタイルガイド駆動開発やOOCSS・SMACSSのような取り組み方、及びモジュール設計などの工程についての議論も行われました。最終日近く、ある人に「でも、どうやってそれが正しく行われていると判断したらいいんでしょうか？」という質問を受けました。 最初、私は混乱していました。それまで私は「正しく行う」ことだけを説明していましたが、その質問が何が主格の選択肢であるかを評価するためのより深いニーズに根ざしているのに気付きました。 例えば「他と共同して動作するクラスの数は最小限にする」というような特定のアドバイスは、モジュール性に関する幅広い認識がなければ役に立たないのです。 私たちの仕事がきちんとできているかを本当に知るために、デザイン実装の目安として使えるより高いレベルの原則が必要であると気付きました。 この溝を埋めるため、デザイン実装に関する9つの原則をまとめています。 CSSやコードを吟味するときの他にチームに志願している人への面接を行うときでも、これらの原理は特定の技術やデザインを実装する一般的な手段を超越した骨組みとして利用することができます。   1.構造化 文書はスタイルシート適用の有無に関わらず、意味があり論理的に書かれている。 2.効率的 デザイン実装に使われているマークアップとアセットは最小限である。 3.標準化 共通の規定があり、自由に使うことができる。 4.抽象化 ベースとなる要素は特定のコンテキストから切り離され、中心となるフレームワークを形成している。 5.モジュール化 共通して使える要素は、再利用ができるように分割されている。 6.設定が可能 ベースとなる要素を、任意のパラメータでカスタマイズできる。 7.拡張が可能 コードは簡単に拡張することができ、今後も追加されることが見込まれている。 8.文書化されている すべての要素は、それを使用して拡張できるように他の人に説明されている。 9.正確である 最終的なアウトプットは、予定された通りのデザインとして適切な表現がされている。   プロジェクトに各原則がどのように適用するかを確認するため、この記事の基準として私のプロジェクトのひとつのモックアップを使用します。 これは既存のECサイト中の、デイリーディールを宣伝する特別なランディングページです。スタイルの一部は既存のサイトから継承されますが、ほとんどの要素は新しいものであるということに注意してください。上記の原則を使って、この静止画像からHTMLとCSSを生成してみましょう。 この製品の「カード」レイアウトは、新しい要素です。   1.構造化 文書はスタイルシート適用の有無に関わらず、意味があり論理的に書かれている。 ここでの原則は、ドキュメント(HTML)の内容がスタイル(CSS)がなくても意味を持つということです。正しい見出しレベル(heading)や順序なしリスト(ul)などを設定し、<header>や<article>といった意味のあるタグを利用するということでもあります。 aria-labelやalt属性、その他のアクセシビリティに必要な可能性があるものをきちんと使用しましょう。 見た目的に変わらないアンカータグとボタンのどちらを使うかということは、大したことには思えないかもしれません。ですが視覚的に同じであっても、これらは違う意味を伝え違う動作を行います。セマンティックマークアップはその意味を検索エンジンや補助技術に伝え、他デバイスにおいての再利用もやりやすくします。それはプロジェクトの将来性に繋がります。   よく構造化された文書を作成するということは、セマンティックHTMLを書くことを学び、W3Cによる標準や他の専門家のベストプラクティスを習慣づけ、自分のコードが分かりやすくなるように時間をかけることです。 スタイルシートなしでブラウザで確認するのが、一番シンプルなHTMLのテスト方法になります。 そのHTMLはCSSがなくても使うことができるか 階層構造が一目で分かるかどうか HTML自体で意味を伝えることができるか しっかりした構造をもつ文書を作成するにはHTMLから始めるのがよいでしょう。ビジュアル的なスタイルを考える前に、構造とそれぞれの意味のためにプレーンなHTMLを書きます。divは避け、妥当なタグを考えます。この基本的なステップが、適切な構造を作るために役立つでしょう。 <section> <header> <h2>Daily Deals</h2> <strong>Sort</strong> <span class="caret"></span> <ul> <li><a href="#">by ending time</a></li> <li><a href="#">by price</a></li> <li><a href="#">by popularity</a></li> </ul> <hr />
Webデザイン

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

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

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