【厳選！】アプリ開発の参考に！おしゃれなアイコンやロゴまとめ10選

アプリ開発に役立つアイコンやロゴをまとめているサイトを紹介します！どのアプリにも使えるように珍しいアイコンも多くとてもおしゃれです。今回紹介しているものは、ほとんど無料で使えますので、ぜひ試してみましょう。

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

アプリを開発し、リリースさせるとなると必ず必要になってくるものが「アイコン」です。人に使ってもらうアプリであれば、見た目の心地よさは重要な要因になってきます。特にアイコンは、スマホのトップ画面に表示されるものです。

最近では、海外のデザイナーが作成したフリーで使えるアイコンの素材も多いので、ぜひチェックしておきましょう。

具体的にXcodeを使ってアイコンを編集する場合は、XcodeでiPhoneアプリのアイコン画像を変える方法をご覧ください。

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

1. Icon Drop

スクリーンショット 2016-04-06 16.47.20

iPhone/iPadアプリのおしゃれなアイコンをまとめているサイトです。普段から使っているアプリでもアイコンのデザインを細かく見る人は少ないでしょう。自分でアイコンを作成する上でも役に立つサイトなので、ぜひ参考にしてみてください。

Icon Drop

2. Instant Logo Search

スクリーンショット 2016-04-06 17.00.48

有名企業のロゴを検索、ダウンロードできる便利サイトです。ロゴは、アプリの中でどのページにも出てくるほど重要なものです。個人で開発するアプリであれば、ロゴを発注するほどお金はかけられません。とはいえ、初めてロゴを作る人からしたら難しいものです。

海外のサイトなので、海外のロゴが多いですがロゴ作成で勉強になりますね。

Instant Logo Search

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

3. 60 Vector Line Icons

スクリーンショット 2016-04-06 16.48.19

ここからはDribbbleなどに個人で挙げているものを紹介していきます。

天気や家具など日常的に使っているものを素材にしたアイコンが多くあります。

60 Vector Line Icons

4. Free Line Business Icon

スクリーンショット 2016-04-06 17.26.47

ビジネス向けのアプリに活用できるアイコンが多いです。シンプルなものが多いですが、ニュアンスは的を射てる感じがしますね。自分で一から作ろうとすると大変なので、参考にしてみてください。

Free Line Business Icon

5. Chic Female Icons

スクリーンショット 2016-04-06 16.50.24

女性のファッションに関するアイコンをまとめています。丸みを帯びたアイコンが多く柔らかい印象を与えるでしょう。こういった細かい部分に関しては女性の方が敏感です。よりアプリを使っていて心地よいと思ってもらうためには、機能や画面遷移だけでなくアイコンなどにも気を配ることが大事でしょう。

Chic Female Icons

6. Tourism Icon Pack

スクリーンショット 2016-04-06 16.50.53

こちらは旅行に関するアイコンをまとめています。訪日外国人も増えてきていて、外国人へのサービス提供も活発化しています。言葉で示すよりもこういったアイコンで表現した方がユーザーも分かりやすいでしょう。

数も多いので、旅行系のアプリを作ろうと思っている人はぜひ参考にしてみてください。

Tourism Icon Pack

7. 450 Simple Line Icons

スクリーンショット 2016-04-06 16.51.23

記号を表すようなシンプルなアイコンをまとめています。位置情報や電波のマークなどあまり目にはつかないものかもしれませんが、細部にまでこだわりたい人にはおすすめでしょう。

友達にも自慢できるアプリが完成するはずです！

450 Simple Line Icons

8. Hexagon Android Icon Set

スクリーンショット 2016-04-06 16.52.01

すでにあるアプリのアイコンをポリゴン風にしているサイトです。なかなか自分では作れないほどクオリティの高いものが揃っています。こういったのを参考に自分オリジナルのアイコンを作ってみても面白いと思います。

Hexagon Android Icon Set

9. Card Icons 2.0 Free

スクリーンショット 2016-04-06 16.52.20

クレジットカードに関するアイコンが並べられています。特におしゃれというものは無いかもしれませんが、アプリ内で決済システムを利用する場合はかならず必要になってくるでしょう。Webサイトでも利用できるので、とても実用的ですね。

Card Icons 2.0 Free

10. 3000 icons for iOS9

スクリーンショット 2016-04-06 16.52.44

このサイトのみ有料ですが、量・質ともにとてもクオリティが高いので紹介しています。

3000個という非常に多くのアイコンを利用することができます。また、iOS9と最新のバージョンに合わせて利用できるようになっているので、iPhoneアプリを開発したいという人はぜひ使ってみてください。

これ1つで十分と言えるほどアイコンの種類は揃っているでしょう。

3000 icons for iOS9

いかがだったでしょうか。

一部有料のサイトもありましたが、無料とは思えないクオリティのアイコンを使用することができます。アプリ開発する中で用意されているオブジェクトだけでは不十分に感じることがあるでしょう。

アプリ自体のアイコンもとても重要ですし、アプリ内で表示されているアイコンも気を配る必要があります。どこまで拘っても正解が出るものではありませんが、パッと見て「良い！」と思ってもらうために素敵なアイコンを選んでみてください。

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

近未来を感じる！インタラクションデザインとは

本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はCarrie Cousins氏によって投稿されました。 ...

アプリデザイン

【今さら聞けない！】UI/UXデザインの違いとその学習方法とは！

スマートフォンが普及してから、主にアプリの開発において「UI/UX」というキーワードが非常に重要視されています。UIデザイナーやUXデザイナーといった職も生まれ...

アプリデザイン

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

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

アプリデザイン

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

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

アプリデザイン

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

本稿は、WebDesignerDepotのブログ記事を許可を得て日本語翻訳し掲載した記事になります。本記事は、ライターでありUXデザイナーでもあるJak...

アプリデザイン

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

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

アプリデザイン

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

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

アプリデザイン

【あの有名アプリから学ぶ！】アプリのアイコンデザインを改善する3つの施策

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Nick Babich氏によって投稿されました。全てのアプリには、アプリストアとホーム画面の両方においてユーザーの注目を集めることができる、美しくて記憶に残りやすいアイコンが必要です。それと同時に、アイコンはユーザーにとって瞬時に識別しやすいデザインにするべきです。完璧な美しさを備えた、ユーザーにとって分かりやすいアイコンをデザインするために必要なことは何でしょうか？それほど難しいことではありません。本記事においては、そのための3つの施策をご紹介します。 1. 識別しやすいアイコンをデザインするアイコンは何よりもまず意味を伝えることができなければなりません。ユーザーにアイコンの意味を考えさせるデザインであってはならないのです。アイコンは、アプリの目的をユーザーに一見で理解してもらうことができる最初のチャンスとなります。アイコンをデザインするときには、次のことを心に留めておいてください。アイコンは、比喩による連想効果によってアイデアを伝える媒体であり、ユーザーはアイコンから特定の動作を連想するものです。ユーザーに意味を瞬時に伝えることができなければ、アイコンは上手く機能しているとはいえません。そのため、アイコンを分かりやすくて直感的なデザインにすることが不可欠なのです。抽象的なアイコンは上手く機能しないことがほとんどであるため、使うのは控えましょう。ユーザーは、抽象的なアイコンの意味を経験から推測することはできません。アプリ「The Game Center（ゲームセンター）」のアイコンはこの問題の一例です。カラフルで透明ガラスのようなデザインのアイコンは、デザイン自体は良いものの、アイコンの意味を伝えるのは難しいでしょう。アプリ「The Game Center」のアイコンは何を表しているように見えますか？ゲームに関連した意味があるように見えますか？ユーザーにとって識別しやすいアイコンを使用する方が確実です。またアイコンの中には、「家」、「印刷」、「ガラス用品」、「封筒」などほとんど世界共通で同じ意味を持つものもあります。たとえば、Gmailのアプリのアイコンには「封筒」が使われていますが、世界共通で「封筒」は「メール」の意味として伝わりやすいです。アイコンの「封筒」そのものが「メール」の意味を伝えています。 2. ミニマリズムを追求するアプリの本質をよく捉えていてそれをシンプルな形で表現できるアイコンをデザインしましょう。アイコンにとって本質的ではないその他の余分なディテールは全て省略します。ほとんどのデザイナーは、アプリのアイコンを立派に見せたいと思う傾向があります。しかし時としてアイコンのデザインに多くを詰め込み、その結果アイコンは詳細を作り込み過ぎたデザインとなることがあります。このような過度に詳細なデザインはかえってユーザーにとって理解の妨げとなり、UXにも影響します。アプリ名の繰り返し、「見る（Watch）」「プレイする（Play）」などのアプリの使い方についての指示、「無料」という文字だけのプロモーション情報など、アプリにとって本質的ではない言葉はアイコンに表示するべきではありません。アプリ名はホーム画面上でアプリのすぐ下に表示されるため、アイコンで繰り返して表示する必要はありません。詳細な画像は小さなサイズでは見にくいため、アイコンのデザインに含めないようにしましょう。写真の画像やスクリーンショットは使用しないこと透視投影による3Dデザインはアイコンに使用するべきではありません。透視投影による3Dデザイン、ドロップシャドウを加えるとアイコンは識別しづらくなります。アイコンを分かりやすく直感的なデザインにするためには、詳細のバランスを図ることも重要です。アイコンに具体的なオブジェクトを使うときには、その種のオブジェクト全てに共通する要素のみをデザインに反映して、その他の要素は省略します。瞬時にユーザーの注目を集めて、ユーザーがアプリを容易に識別できるような「中心点」をアイコンの中に作ります。良い例：アイコンが「天気」を意味することをユーザーに伝えるために必要な要素は、太陽と雲だけです。 [PR] Webデザインで副業する方法とは3. 異なる背景上でアイコンをテストするアイコンはホーム画面の背景上で見やすいデザインにしましょう。識別しやすくミニマリスズムを追求したアイコンをデザインしただけでは、全てのプロセスを完成したことにはなりません。他のUIと同様に、設計後のテストが必須です。ユーザーがホーム画面の壁紙にどのようなものを選択するかは予測不可能であるため、予め異なる背景上でアイコンをテストすることが必要です。アイコンが背景と混同するようなデザインにしてはいけません。次の例では「Stocks」というアイコンは暗い色の背景をバックにすると識別が困難です。ユーザーがアイコンを探すのに苦労するようなデザインにしないことアイコンが背景と同化するようなデザインにしてはいけません。――透明なアイコンを使用するのは避けて、不透明であることを確認しましょう。透明なアイコンを使用するのは避けましょう。また、端末の動きに合わせて背景が動く機能を備えたデバイス上でもアイコンをテストしてください。結論今、あなたのアプリを完璧に表現することができる美しく魅力的なアイコンをデザインするために時間をかけてください。 TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役のUI/UXデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でUI/UXデザインを習得することが可能です。

アプリデザイン

マネタイズ手法を徹底比較！モバイルアプリ市場の現在とこれからのトレンド

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、instinctools EE Labssのビジネス開発マネジャーのStacy Golmack氏によって投稿されました。モバイルアプリの市場は、ジャックの豆の木よりも急速に成長しています。業界の規模は大きく、毎日成長し、終わりは見えません。予測通り、iOS/Androidエンジニアの人口は急増し、市場に出回っているモバイルアプリの数も増え続けています。世界規模で見ても、モバイルアプリ業界の収益は急増しています。ハイブリッド型の収益モデル（アプリ内広告やアプリ内購入など）は、ビジネスの世界で急速に普及しています。多くの調査は、アプリ内広告が今後のモバイル成長の鍵となることを示しています。この記事では、以下の疑問について明らかにします。統計データと専門家の意見に裏付けされた、包括的な答えを導いています。平均的に、モバイルアプリはどれくらいの収益を生み出しますか？実際に平均収入は増えますか？今日、モバイルアプリ業界が直面している最大の課題は何ですか？今日、市場で最も一般的な収益モデルは何ですか？その中で、今後も成長が予測できるモデルは？どのモデルが生き残るでしょうか？モバイルアプリ市場には成長の見込みがあります App Annieが2015年に報告したレポートによると、モバイルアプリケーション業界は総年間収益が4.4兆円を突破し、5.5兆円まで増加すると予測されています。また、Statistaによると、年間総収入は2020年までに20兆円を超えると予測されています。リサーチ主体によって数字は多少異なりますが、全体像として、市場は決して飽和状態にはないということが示されています。 Forresterのレポートを参照したApp Annieの予測によると、2016年末までにスマートフォンを所有する人は、世界人口のわずか46％です。つまり今話題のモバイル革命は始まったばかりであることを示しています。消費者は企業よりも急速に進化しています。今日、モバイルインターネットは多くのユーザーにとって必要不可欠なものとなっています。アプリの人気に関しては、アグリゲータのアプリが、最上位に移行する可能性が高いです。アグリゲータとは、多数のオンラインリソースからコンテンツを引用して、それらをインターフェース上に見やすくまとめるツールです。コンテンツは、速報ニュースからユーザーの関心のあるニッチな分野に至るまで多岐にわたります。アグリゲータは、多数のWebサイトにアクセスしたり、多数のアプリをインストールする時間や余裕がないユーザーを対象としています。有名なアグリゲーターアプリは、Flipboard、News360、Feedly、IFTTTなどです。アグリゲータのアプリが、ショッピング体験を便利にするものである場合、ユーザーのお気に入りになる傾向があります。たとえば、Facebookはメッセンジャー（Messenger）によってこれを行いました。ユーザーは自分のニュースフィード広告を読んで、たとえばUberの配車を依頼できるのです。金持ちプラットフォーム、貧乏プラットフォームモバイルアプリの2大巨人、AndroidとiOSは、世界のスマートフォン市場を支配しています。 Gartnerの調査によると、2016年の第3四半期には、世界中で販売されているスマートフォンの87.8％がAndroidでした。この数字は、前年比で3.1％の増加です。一方、iOSの市場シェアは11.5％で、2015年比で2.5％の減少です。これらの成長は他の市場プレイヤーの地位を大幅に低下させました。スマートフォンデバイス市場の0.4％を占めていたWindowsは、モバイルプラットフォームの競争では3位となり、シェアは年率2.5％で減少しています。アップルとGoogleは、最大で最も人気の高いアプリストアを持っています。今のところ、アプリケーションやエンジニアの数において、他の競合他社がこれらのストアに対抗できる見込みはありません。 InMobiは、アプリの55％は、収益が10万円未満であると推定しています。さらに、世界中のアプリの3分の1が、製品の合計ダウンロード数が10,000に達していません。収益の格差はAndroidエンジニアの間で顕著であるのに対して、iOSデベロッパーの間ではより収益分配のバランスが取れています。2016年以降、iOSエンジニアの25％以上は毎月の収益が50万円を超えています。一方、Androidエンジニアで同様の収益を達成したのはわずか16％です。モバイルOSごとの月間平均収入を推定した興味深い統計があります。Forbesは、iOSは月平均で40万円を稼ぎ、2位のAndroidは12万円、3位のWindows Phoneは6万円程度を稼ぐと推定しています。しかし、Statistaの調べによると、この推定に反して2016年は、Windows Phoneアプリでは125万円、iOSアプリでは約90万円、Androidでは約50万円の月間平均収入が得られています。また、エンジニアの約75％は、Androidを最も好んでいます。彼らは、Androidベースの製品を開発することで収入を増やすことを考えています。 [PR] Webデザインで副業する方法とはモバイルアプリの概観高性能のモバイルCPUは、強力なグラフィック、高品質なディスプレイ、高速インターネット接続を備えることにより、スマートフォンをゲーム機に変えました。 App Annieのレポートによると、モバイルゲームは2011年にはモバイルアプリの収益全体の50％未満を占め、2015年にはモバイルアプリの市場収益の85％を生み出しました。この数字は、世界規模では約3.7兆円に相当します。しかし、ユーザーが他のカテゴリのアプリに費やす時間も急激に増加しています。ゲームアプリ以外のアプリは、アプリ使用時間において、ゲームアプリを追い抜いています。 Flurry Analytics Blogによると、2015年後半までにモバイルアプリの市場には、次のような変化が起きました。カスタマイズアプリ（ランチャー、アイコン、壁紙、ロック画面、デバイスカスタマイズアプリなど）が1位になり、セッションの使用率は332％上昇しました。新聞や雑誌のモバイル版アプリが2位で、135％の成長となりました。生産性向上ツールとアプリは使用率において3位で、125％の成長となりました。ライフスタイルとショッピングのソリューション関連のアプリは81％の成長で、4位となりました。メッセンジャー、ソーシャルアプリ、旅行、スポーツ、健康、フィットネス関連のアプリは、53％から54％に増加しました。ゲームは、ユーザーの使用時間が1％減少した唯一の例外です。収益モデル現在、収益モデルには主に6つのタイプがあります。ダイレクトセールス（直販）ユーザーが有料アプリをまだ購入していない場合、スクリーンショット、説明、動画を、画面上にプレビューします。これらを利用することで、ユーザーにアプリの購入を促し、製品のデモンストレーションを行うことができます。しかし、ダイレクトセールスによってユーザーに購入を決心させるのは困難です。このことは、収益性が最も高いアプリのリストに、有料アプリは入っていないという統計結果にも示されています。有料アプリは人気を失っている唯一のアプリですが、一部のケースではまだその価値が証明されています。たとえば、Minecraft Pocket Editionは、Google Playストアで最も利益を上げている有料アプリです。 2011年に正式にリリースされたMinecraftは、サンドボックスのビデオゲームで、ダウンロードごとに840円で販売されいます。フリーミアム（Freemium）フリーミアム（Freemium）の収益モデル（「無料」と「プレミアム」の組み合わせ）では、ユーザーは無償で基本機能を利用でき、1回限りまたはそれ以降は有料でプレミアム機能を利用できます。そのため、この収益モデルを利用するアプリは、可能な限り多くのダウンロード数を確保することに重点を置いています。フリーミアムモデルはその潜在的な搾取メカニズムについて強く批判されていますが、慎重に利用すれば優れた効果を発揮します。その例はClash of Clansです。サブスクリプション（月額課金）サブスクリプションの収益モデルは、フリーミアムと似ています。違いは、ユーザーは特定の機能だけでなく、アクセスするすべてのコンテンツについて料金を支払うことです。この収益モデルは、顧客ロイヤリティを高く保つことができれば、予測可能で長期的な収益フローを生み出します。この収益モデルを利用した優れたアプリの例は、認知心理学者が脳を訓練するために設計した、50以上の練習問題のあるLumosityです。 Lumosityは、月額（11.99ドル(約1,200円)）と年額（59.99ドル(約6,000円)）の定期購読のオプションを提供しています。 Lumosityは93,000人以上のユーザーから5つ星の平均評価を得ており、購読アプリ部門における驚異的な成功例といえます。アプリ内課金アプリ内課金は、モバイルゲーム、購入商品について料金を請求する商品カタログアプリで、特に一般的です。この収益モデルは柔軟性が高く、ゲームアプリの中にはユーザーに購入を促すものもあります。 2016年2月現在、Tech Timesによると、モバイルゲームのユーザーの約1.9％がアプリ内購入を行い、この数字は着実に増加しています。例として、ユーザーが特定の商品やサービスを購入できるソーシャルアプリであるMeetMeがあります。 MeetMeでは、料金を支払ってプロフィールのビューを増やすことができます。このアプリの開発者は、明確な収益モデルを持っていることで、相当な収入を得ることに成功しています。クラウドファンディングクラウドファンディングは、比較的新しい収益モデルです。アプリの開発者は、KickstarterやIndiegogoなど人気のあるオンライン上のプラットフォームで、アプリのアイデアを提示し、出資を募ります。興味深いプロジェクトであれば、当初募集した額より数倍高い資金を集めることもできます。スタートアップのShadowは理想的な例です。このプロジェクトでは、3,784人の支持者から82,577ドル(約900万円)の資金を集めています。 Shadowは、報酬とプロジェクトに対する独占権も提示して、睡眠と夢を記録するソフトウェアのクラウドファンディングに挑戦しました。 Shadow会員専用のカードを渡された人は、基本的にアプリを無料で利用できますが、利用価格が8ドルに上昇したときには、これを約2万ドルで売却できます。スポンサーシップスポンサーシップは、新しい収益モデルです。ユーザーは、報酬の見返りとして広告スポンサーになります。報酬は開発者にも分配されます。この収益モデルはまだ黎明期にあるため、マーケティング戦略を磨く必要があります。 RunKeeperは、4,500万人以上のユーザーからなるコミュニティを持ち、スポンサーシップを利用したビジネスモデルの素晴らしい例です。ユーザーは、一定の距離をランニングするか自転車で走ると、報酬を受け取ります。広告主がユーザーに支払います。開発者は、迷惑な広告を掲載していないことについて高く評価されるでしょう。広告による収益化これは最も一般的な収益モデルであり、詳しく検討する必要があります。人気の理由は明らかです。ユーザーには無料アプリをダウンロードしたいという需要があり、ダウンロード数が増加するほど開発者の収益も増加します。 IHS Markitのレポートによると、2020年までに、アプリ内広告は年間5.8兆円の市場規模に達すると予想されています。これはモバイルデバイス上の全広告収入の約63％に相当します。他のセクターと同様に、広告ベースのアプリを開発している少数の主要な開発者が、収益の大部分を生み出しています。他の大多数の開発者は、残りの取り分を分け合わなければなりません。 Klick Healthによると、首位はFacebookで、Facebookのアプリには全モバイル広告の44.3％が表示されています。ランキングにおける他の企業は、Alibaba、Google、Tencent、Twitter、Pandora、Yahooです。最高額の広告収入を得ている企業は、しばしば主要な広告スポンサーになります。この傾向は特にモバイルゲームのアプリにおいて顕著です。 Rovio、Gameloft、Disneyなどの最大のベンダーは、比較的人気の低い数百のインディーゲーム製品内で、自社のゲーム製品を宣伝しています。まとめすでに見たように、モバイルアプリ市場の急速な成長はすぐには止まらないと予測できます。競争は激化しているにもかかわらず、開発者は新しい収益モデルを活用して、ユーザーにとってより面白くより便利なソリューションを創造しています。少なくとも2つの新しい収益モデルは効果が高いことが明らかになり、ここ数年で人気が高まっています。上記の収益モデルはどれも効率的です。開発者や発行者は、ケースに応じてこれらの収益モデルを導入することに熟練しています。たとえば、購読モデルは特定のニッチでのみ機能しますが、最も収益性の高いモデルです。また、潜在的に悪意があると批判されているフリーミアムの収益モデルは、慎重に使用すれば優れた効果を発揮します。Clash of Clansがその完璧な例です。有料アプリは、急速に人気を失っている唯一のアプリですが、一部のケースではまだその価値が証明されています。ハイブリッド型の収益モデル（アプリ内広告やアプリ内購入など）は、ビジネス界で特に人気を集めています。多くの調査によって、アプリ内広告は今後のモバイル成長の鍵となることが示されています。今日、iOSとAndroidは主要なモバイルOSであり、大手のモバイルアプリストアを保有しています。時が経てば、モバイルアプリ市場がどのように発展するか明らかになるでしょう。市場の動向からは、市場は将来的にも、より高い収益を生み出し続けると予測できます。今話題のモバイルアプリ革命は始まったばかりです。 TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプ、Androidアプリ開発オンラインブートキャンプを開催しています。期間中は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。

スマートフォンアプリ開発

「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

アプリデザイン

これだけは覚えておきたい！基本的なUNIXコマンド20【初心者向け】

今回は、プログラミング初心者でも覚えておきたいUNIXコマンドを紹介します。プログラミングを学んでWeb開発する際に、WebサーバのOSとしてLinuxやUNIX系を利用することがあります。そのため、Web開発をするためにUNIXコマンドの知識が必要です。 Amazonが運営するAWSといったサービスやCloud9といったサービスでも、UbuntuやLinuxが利用されています。そのため、特定のOSで利用可能なコマンドです。また、Macのターミナルを扱う時も使用しますので、覚えておくと便利です。 WindowsでUNIXコマンドを利用できるので、コマンド操作に慣れることは実務においても技術的なレベルが上がります。そこでこの記事では、プログラミング初心者でも覚えておきたいUNIXコマンドを初心者向けに紹介します。目次1. Icon Drop2. Instant Logo Search3. 60 Vector Line Icons4. Free Line Business Icon5. Chic Female Icons6. Tourism Icon Pack7. 450 Simple Line Icons8. Hexagon Android Icon Set9. Card Icons 2.0 Free10. 3000 icons for iOS9 UNIXコマンドとは UNIXコマンドとは、LinuxやUNIX系OSのWeb開発で利用するコマンドです。ウィンドウやボタン、アイコンといった視覚的なオブジェクトをマウスで操作するインターフェイスをGUI（Graphical User Interface）と呼びます。一方、文字入力によってコンピュータに命令を与えて操作するインターフェイスをCLI（Command Line Interface）、あるいはCUI（Character User Interface）と呼びます。「コマンド」とはコンピュータに指示する命令であり、CLI上で用いるプログラム／アプリケーションのことを指します。 UNIXに由来するコマンドを「UNIXコマンド」と呼称します。現在ではGUIがコンピュータを操作する手法として主流ですが、ある操作の結果を別の操作に用いたり、自動的に複数の操作を行ったりする場合など、CLIの方が適している作業が多く存在します。 Windows10でUNIXコマンドを利用する方法 2021年3月現在の最新バージョンのWindows10では、WSL（Windows Subsystem for Linux）を有効化することでUNIXコマンドを利用できます。コントロールパネルプログラムプログラムと機能 Windowsの機能の有効化または無効化上記の順に選択をして、「Linux用 Windows サブシステム」をチェックしてください。コントロールパネルを開いてプログラムを選択する画面プログラムを選択してWindowsの機能の有効化または無効化を選択する画面 Linux用Windowsサブシステムを選択してOKを押してください。 Microsoft StoreでUbuntuをインストール Microsoft StoreをWindowsで起動します。 Ubuntuを検索して出てきた表示の入手をクリックしてUbuntuをインストールします。インストールにはしばらく時間が必要です。インストールが完了したら起動ボタンを押してください。 Windows上で初期設定を行うための起動が始まります。初回のみ起動時間が必要です。ユーザー名とパスワードを設定すると完了です。パスワードは設定用と入力用に同じものを2回入力する必要があります。設定が完了したら、UNIXコマンドの入力が可能になります。 [PR] Webデザインで副業する方法とは覚えておきたいUNIXコマンド20 ここからは主要なUNIXコマンド20選を紹介します。いずれもMacのターミナルで入力した例を画像で表示しているので、ぜひ自分のPCでも試してみてください。ディレクトリとファイルの確認、移動に使うコマンド pwd 現在の作業ディレクトリの絶対パスを表示します。なお絶対パスとは、最上位階層から目的のファイルやフォルダまでの道筋を省略なく記述する方式のことです。一方の相対パスは、起点となる現在位置から目的のファイルやフォルダまでの道筋を記述する方式です。入力例： pwd 現在どのディレクトリにいるのかを確認するときに使います。 cd 作業ディレクトリを変更するコマンドです（ディレクトリを移動します）。入力例： cd (ディレクトリ名) cdだけで実行するとホームディレクトリへ移動します。「cd -」とすると、直前にいたディレクトリへ移動します。「cd ..」とすると親ディレクトリへ移動します。 ls ディレクトリの内容をリスト表示するコマンドです。入力例： ls (ディレクトリ名) lsだけで実行すると、現在のディレクトリに含まれるファイル名をリスト表示します。ディレクトリを指定すると、そのディレクトリに含まれるファイル名をリスト表示します。また、「ls -l」でパーミッションや所有者などの関連情報を付加して表示、「ls

プログラミング

ビジョンを実際のアプリに落とし込むまでの9つのステップとは

本稿は、Codementorのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Android OSアプリ開発者のAbinash Neupane 氏によって投稿されました。あなたにも朝起きたときに、大ヒットして億万長者になれるような創造的なアイデアを思いついたことがあるでしょうか。未来を変えることができるようなアイデアを思くことは誰にでもあります。その中の多くのアイデアは空想に終わりますが、中には私たちの生活を大きく変えるような可能性を秘めたものもあります。ビジョンを実際のアプリとして実現し、未来を変えるためのステップを見てみましょう！ほとんどのアイデアが単なる「アイデア」で終わってしまうのは、適切なガイドがないためです。アプリ開発を大量のコードを書くだけの作業だと思っている人もいますが、コードを書くことはアプリ開発の中の1つのステップにすぎません。良いアプリを開発するには、その他にも大切なステップがあります。これら9つのステップを紹介していきます。目次最初のステップ要件工学技術的な指標の分析デザイン開発テストアプリの公開保守管理(メンテナンス) マーケティング 1. 最初のステップ最初のステップはビジョンを広げるのに役立ちます。最初のステップの前に、アプリのアイデアを考える必要があります。アイデアは整理されたものでなくても、ぼんやりとしたビジョンでも構いません。最初のステップでは、アプリを開発する目的やゴールを定め、ゴールを達成するための計画を詳細に立てます。また、すでに似たようなアプリが世の中に存在していないか、調べておきます。下の画像はプロジェクトの計画の一例で、プロジェクトに必要となるすべてのタスク、段階、マイルストーン（プロジェクトの進捗管理のための各節目）を設定したものです。プロジェクトによっては、チームのメンバー全員が最初のゴール、目的、価格などを把握できるように、長期的な製品ライフサイクルを見据えて「プロジェクト計画書」を作成することもあります。アプリについてのアイデアをデバイスのスクリーン上に描いておくのもいいでしょう。また、スケッチを描くのもビジョンを明確にするのに役立ちます。アプリの主な機能、およそのレイアウトや構造などを、スケッチに描いておけば、アプリのコンセプトを視覚的につかめます。 [PR] Webデザインで副業する方法とは2. 要件工学（RE：Requiment Engineering）アプリについて明確なビジョンやゴールを設定したら、次は要件工学です。このステップでは、アプリのゴールを拡張します。アプリによって実現できることや、ユーザーにとってのメリットを定義します。また、ターゲットとなるユーザーを設定することで、価格戦略や市場戦略に役立てましょう。プロジェクトが予算内に収まるかどうかもチェックします。アプリの開発が実行可能かどうか話し合うのもいいでしょう。要件工学で使える「5W」の問いは多数あります。アプリのゴールは何か？（What）このアプリはなぜ他とはちがうのか？（Why）誰がこのアプリを使うのか？（Who）ユーザーはいつアプリを使うか？（When）ユーザーがアプリから得られる最大のメリットは何だろう？（What）ユーザーはどんな場面でアプリを使うのか？（Where）収益アプリを開発するときには、収益を図る方法を考えておくことも必要です。例えば次のような方法があります。有料アプリ In-App Purchase（iOSにおいてアプリ内課金を可能とするAppleの組込みテクノロジー） Admob（アプリの収益を高めるためのGoogleの広告サービス） iAd（iOSのアプリ内に実装できる広告）マイルストーン（プロジェクトの進捗管理のための各節目）マイルストーンを設定するメリットは、タスク、開発にかかる時間などの管理が容易になることです。スケジュール管理を時間軸ベースで把握するのに役立ちます。平均すると、AndroidやiOSのアプリ開発には約18週間（約4ヵ月半）かかります。ワイヤーフレームとストーリーボード次のステップは、アプリの動作性を示すために、ワイヤーフレーム（レイアウト）やストーリーボード（ユーザーの利用体験を漫画のような一連の画像で表現したもの）を作成することです。最初のビジョンをよりクリアーに表現できます。ワイヤーフレームでは開発するアプリの、モックアップやプロトタイプを作成します。モックアップやプロトタイプを作成できるアプリには、Balsamiq、Moqups、HotGlooなどがあります。 3. 技術的な指標の分析次の技術的な指標について分析をします。スケーラビリティ（拡張性）：アプリの潜在的な成長可能性アベイラビリティ（可用性）：ダウンタイム（故障や停止などでシステムを使えない時間）を考慮した、システムの利用可能率メンテナビリティ（保守性）：保守管理のしやすさモジュラーアプローチパフォーマンスポータビリティ（移植性）：例えば、AndroidやWindows PhoneなどのOSに対応したマルチプラットフォームであることユーザビリティ：エンドユーザーを中心に考えた開発バージョン管理このステップにおいては、アプリを開発するために必要なテクノロジーについて話し合います。例えば、アプリに必要なバックエンドの処理を行う技術、データベースの決定などです。SQLiteのようなデータベースを使えば、起動中のアプリを閉じても、データを失うおそれはありません。次のようなテーマについても話し合います。アプリのデータを格納する必要はあるか？あるとしたら、どのように格納するか？どのようなタイプのデータベースを利用するか？アプリは静的なのか動的なのか？アプリに求められるセキュリティ要件は？アプリのセキュリティの欠陥にはどのように対処するか？サードパーティーの製品を統合するか？するとしたら何を選ぶか？将来的にアプリの開発をさらに進めるかどうか？分析を終えたら、次のような項目を含んだ「プロジェクト文書」を作成しましょう。導入問題の提示目的方法予算とスケジュールリファレンス（仕様や機能の解説） 4.デザインデザインのステップでは、ワイヤーフレームを、クリーンで魅力的なユーザーインターフェース（UI）に作り変えることで、グラフィカルユーザインタフェース（GUI）を作成します。 UXデザイナーはインタラクティビティの高いデザイン要素を設計できますし、アプリの外観や使いやすさに関することはUIデザイナーに頼むこともできます。アプリストアで目立たせるためには、使いやすく高品質なデザインのユーザーインターフェースにするべきです。デザインは、ブランド戦略を考慮したものにしましょう。また、モバイル端末のスクリーンサイズの違いに応じた解像度で設計します。 5. 開発この開発のステップは、主にプログラマーが分担します。開発に使うテクノロジーは、ステップ3の分析であらかじめ定めておきます。また、ステップ4で考えたデザインを取り入れて、実際のアプリへと実現します。また、開発と並行してテストも実施して、バグやエラーの早期発見と解決に努めましょう。プログラマーは、アプリのバックエンドの処理を定めるソースコードの記述と管理も行うことになります。 OS（プラットフォーム）ごとにそれぞれソフトウェア開発キット（SDK）があります。また、アプリをどのOS（プラットフォーム）向けに開発するかによって、ネイティブ言語が決まります。最後に、ステップ2の要件工学（RE）で作成した要件を基準にして結果を評価します。また、ステップ4のデザインの基準からも評価します。例えば、アプリケーションが実際にAndroid 2.3以降のバージョンのOSをサポートできているかを確認します。 6. テストここまで来たらアプリの基本は完成です！このステップでは、ターゲットとなるユーザーに試用してもらいます。このテストは、モバイルアプリの開発プロセスの中でも特に重要なものです。テストにおいては、アプリの機能性、ユーザビリティ、整合性（コンシステンシー）などを試して、もし問題があればアプリを公開する前に修正します。テストの手法にはいろいろなタイプがあります。例えば、Android Studioで提供されているテストツールなどを利用できます。ここではテストの一般的な手法について述べます。自動テスト自動テストはアプリの開発中に行われます。自動テストは、アプリがデバイス上で動くかどうか、またコードが機能するかどうかを確かめることが目的です。単体テスト（ユニットテスト）や統合テスト（インテグレーションテスト）も、自動テストの一部です。ユーザ受け入れテスト（UATテスト：User Acceptance Testing）ユーザ受け入れテストとは、開発したアプリをユーザーが利用できるか試すプロセスです。ターゲットとなるユーザーの何人かに実際にアプリを試用してもらいます。アプリがこのユーザー受け入れテストに合格したら、今までの設計が現実的に機能していると確かめられたことになります。ユーザー受け入れテストはアルファテストとベータテストから構成されます。それぞれ見ていきましょう。アルファテスト（Alpha Testing）アルファテストは、アプリの開発に関係したユーザーにアプリを試用してもらうことで行います。つまりこの場合のユーザーとは、アプリに使われているテクノロジーや、アプリの機能をあらかじめ知っている人物です。ベータテスト（Beta Testing）ベータテストは、アプリに使われているテクノロジーを知らない、いわば実際のユーザーにアプリを試用してもらうことで行います。ベータテストを実施する意味は、アプリが現実の利用環境で上手く機能するかを試すことです。 7. アプリの公開ここまで上手く行ったら、次のステップはいよいよアプリの公開です！このステップでは、アプリを各OSのストアに公開します。AndroidアプリはGoogle Play、iOSアプリはApp Storeの各ストアへアップロードします。 Google Playにアプリを公開するには、25米ドルの登録料が必要ですが、登録後はデベロッパーアカウントでアプリをいくつでも公開できます。App StoreにiOSアプリを公開するには、Apple Developer Program への参加料金として99米ドル支払う必要があります。 8. 保守管理（メンテナンス）アプリをストアに公開してユーザーがアプリを使い始めたら、次はアプリの保守管理（メンテナンス）を継続的に行います。ユーザーのニーズと期待に応えられるような保守管理をしましょう。ユーザーからのフィードバックは、ユーザーがどのようにアプリを使っているかをよく理解するために大切なもので、アプリ解析ツールのソフトウェアが役に立ちます。ダウンロード数だけでなく、どんなユーザーがいつ、どこで、どのようにアプリを使っているかが分かります。ユーザーのアクセス経路アクティブユーザー率（Activation percentage：利用頻度が高いユーザーの率）リテンション率（Retention percentage：ユーザーの再訪率）リファラル（Referral：ユーザーがアプリにアクセスするきっかけとなったリンク元）の有無などを知ることができます。アプリ解析ツールは、ステップ6のテストの段階から導入するのがいいでしょう。人気のある解析ソフトウェアです。※（）は主な対応OS、開発環境、言語など Apsalar (iOS、Android) Flurry (iOS、Android、Windows Phone、Blackberry、Java ME) Mixpanel (iOS、Android) Google Mobile Analytics：Googleモバイルアナリティクス (iOS、 Android) Localytics：ロカリティクス (iOS、Android、Windows Phone、Blackberry、HTML5) Countly (iOS、Android、Windows Phone、Blackberry) アプリのパフォーマンスを追跡することで、必要があれば修正を加えることができます。また追加のサポートが必要かどうか通知してくれるサービスもあります。解析によって、アプリの評価やユーザーのフィードバックもモニタリングできます。 9. マーケティングアプリの開発が完了したら、アプリを効果的に市場に売り出しましょう。アプリの開発と同時並行して段階に応じて、広告やマーケティングを行いましょう。広告とマーケティングの2つがこのステップの要です。あなたの開発したアプリを、ストアにあるその他無数のアプリから目立たせることが重要です。アプリのダウンロード数を増やす方法には、Googleアドセンスなどがあります。他のアプリ内の広告で、あなたの開発したアプリを宣伝することができます。結論今回はライフサイクルを考慮したアプリ開発の主なステップを紹介しました。これらの9つのステップについて正しい知識を備えれば、アプリの開発に成功できます。また、必要であればいつでもその道のエキスパートにアドバイスを求めるといいでしょう。 [お知らせ]TechAcademyでは初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。アプリ開発からWebサービスの開発、UI/UXデザインなどアイデアを形にしたいと思っている方は、ぜひご覧ください。

スマートフォンアプリ開発

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

【厳選！】アプリ開発の参考に！おしゃれなアイコンやロゴまとめ10選

1. Icon Drop

2. Instant Logo Search

3. 60 Vector Line Icons

4. Free Line Business Icon

5. Chic Female Icons

6. Tourism Icon Pack

7. 450 Simple Line Icons

8. Hexagon Android Icon Set

9. Card Icons 2.0 Free

10. 3000 icons for iOS9

関連するキーワード

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

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

【あの有名アプリから学ぶ！】アプリのアイコンデザインを改善する3つの施策

マネタイズ手法を徹底比較！モバイルアプリ市場の現在とこれからのトレンド

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

これだけは覚えておきたい！基本的なUNIXコマンド20【初心者向け】

ビジョンを実際のアプリに落とし込むまでの9つのステップとは

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

1. Icon Drop

2. Instant Logo Search

3. 60 Vector Line Icons

4. Free Line Business Icon

5. Chic Female Icons

6. Tourism Icon Pack

7. 450 Simple Line Icons

8. Hexagon Android Icon Set

9. Card Icons 2.0 Free

10. 3000 icons for iOS9

記事を検索

関連するキーワード

関連する記事

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

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

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