こんな状況です：あなたは開発者で、素晴らしいアプリをコーディングするために必要なツールはすべて持っています。 しかし、デザインに関しては少し行き詰っています。 Adobe Photoshop のような業界標準のデザイン ツールに精通していない場合、あなたの内なる才能を反映したモバイル アプリをどのようにデザインすればよいのでしょうか。 視覚的に美しく、ユーザーが簡単に操作できるようなアプリを作るにはどうしたらよいのでしょうか。 UX/デザインの経験はあまり（あるいはまったく）ないかもしれませんが、視覚的に美しい最終プロジェクトを作成するために、必ずしも経験が必要なわけではありません。 これらのソリューションは、モバイル アプリをデザインする方法のプロセスであなたを支援します。
How to Design a Mobile App
Image credit: TubikStudio
ワイヤーフレームには、本質的にアプリのデザインのスケルトンとなる最低限のプロダクトを作成することを含みます。 アプリをスタートアップに例えるなら、この設計段階を最小限の製品 (書籍『リーン スタートアップ』によって広められた概念) と呼ぶことができます。
Wireframing は、モバイル アプリを設計する方法のプロセスを進める際に必須の段階ですが、これは、構造を最終設計要素とは別のものとして考えることができるようにするためです。 また、コラボレーション、デザイナー、投資家など、あらゆる関係者にコンセプトを効果的に伝えることが可能になり、これらのアイデアを正確に表現するためのデザイン経験を個人的に必要としません。
ペンと紙
お金をかけたくない人にとって、古き良き信頼できるペンと紙は、デザインのラフ案として最初のアプリのアイデアをスケッチするのに適した方法です。 Photoshop やプロトタイピング ツールに直接移行することを好む人もいますが、この方法は、アイデアを思いついたときにすばやく取り込むには理想的です。 追加ボーナスとして、このワイヤーフレーム作成方法を最大限に活用するために、特別なトレーニングやツールの習得は必要ありません。
Android や iOS のスケッチ用紙
モバイル アプリをデザインする方法を考えている人のために、特に念頭に置いた専門のワイヤーフレーム作成ツールが存在します。 iPhone や iPad が印刷されたドットグリッド紙を無料というリーズナブルな価格でダウンロードすることができます。 これは、紙とペンで描くよりも優れたビジュアルを必要とするデベロッパーにとって、理想的なデザインソリューションです。 この iOS のスケッチ用紙は、ストーリーボードや、アプリの使用時の見え方のさまざまな状態を示すのにも最適です。
この iOS スケッチ用紙には、前述の iOS 機器のすべてのデフォルト UI エレメントのグリッド線が含まれています。 Android 版のこのスケッチ用紙には、8 つの電話機モデルが印刷されています。 しかし、iOS のスケッチ用紙 (ドット グリッド) とは異なり、この用紙には線がまったくありません。
MockFlow
モバイル アプリケーションのワイヤーフレームを作成するための少しハイテクなツールを探している場合は、MockFlow などを検討してみてください。 Mockflow はオンラインのワイヤーフレーム作成ソリューションで、モバイルまたは Web アプリ (あるいはまったく別のもの) であるかどうかにかかわらず、あらゆるタイプのデザイン プロジェクトを処理できる柔軟性を備えています。 基本的な無料版があり、一度に1つのプロジェクト、最大1GBのストレージ、2人のチームメンバーで作業することが可能です。 1472>
WireframeApp は、MockFlow に似たウェブアプリベースのワイヤーフレーム作成ツールです。 すべてのプランは有料ですが、メールニュースやAppSumoに登録することで、手頃な価格の生涯契約（合計49ドル以下）を見つけることができます。 この次の段階の要点は、最終的なプロジェクトをどのように見せたいかに近い、実行可能なバージョンのデザインを作成することです。
Image credit: TubikStudio
以下のツールは、すべて 100% 無料で使用できるので、お金を払わずにモバイル アプリをデザインする方法の条件に合っています！
Marvel
Marvel は iOS と Android にも対応したウェブ アプリケーションです。 自分の使いやすいデバイスでデザインできることに加え、このツールを使えば、スケッチを実用的なプロトタイプにすることが簡単にできます。 基本的なデザイン要素を追加できるほか、デザインをつなげて流れを作ることもできます。 Marvelでは、インタラクティブなホットスポットやリアルなトランジションを作成でき、ホバー、クリック、スワイプ、ピンチなどのアクションを選択することができます。 多くのサード パーティの統合により、Marvel はすでに使用している他の多くのツールや、チームの共同作業者とうまく連携できます。
InVision
InVision は、無料の Web およびモバイル プロトタイピング ツールという点で Marvel と似ています。 シンプルなコメントとコラボレーションを可能にする機能により、チームでのプロトタイピングツールとして最適です。 多くの類似したタイプのツールと異なるのは、必要に応じて変更を以前のバージョンに戻すことができるバージョン管理機能です。
InVision は、Adobe、Zappos、AT&T、Dell、および Sony などの革新的な企業、ならびに Prezi、Soundcloud、Evernote など急成長中のスタートアップで使用されています。 InVision を使用したからといって、彼らの成功が保証されるわけではありませんが、関連性のメリットを否定することはできません！
Axure
お金をかけずにモバイル アプリをデザインする方法の選択肢として、長期的に使用すれば有料ですが、30日間のトライアルでは完全に無料で使用できるオプションを紹介します。 Axureは、高機能なデザイン（Marvelのトランジションに似ている）のおかげで、簡単にアプリのプロトタイプを作成することができる。 この記事の他のオプションと同様に、このツールは、簡単なチーム コラボレーションのための機能を提供します。
Proto.io
Proto.io は、「リアルに感じるプロトタイプ」の作成を支援できるツールとして自称しています。 現実的で機能的なプロトタイプを作成したいモバイルアプリ開発者にとって、これは耳に痛い話かもしれません。 複数のUIライブラリ、Dropboxなどのサードパーティとの統合、さらに発売時にシームレスなユーザー体験を保証するためのユーザーテストも提供されています。 無料トライアルでは、15日間アクセスでき、限られた機能を生涯利用できる。また、複数のプロジェクトと機能を備えたフル機能のアカウントにアップグレードすることも可能で、月額24ドルから利用できる。
完璧なワイヤーフレームやプロトタイピング ツールをまだ見つけていない場合、Developer Drive では、検討すべき追加の一般的なオプションをいくつか紹介しています。 しかし、基本的な計画を持って参加することは、時間と費用を節約する良い方法です。 デザイナーに自分のビジョンを伝えることができれば、それを実現することが容易になり、ビジョンに沿わないデザイン バージョンに費やすお金を節約することができます。
Image credit: TubikStudio
時には、ちょっとしたインスピレーションがクリエイティブ ブロックを取り除く助けになり、デザイン チュートリアルに没頭することが、プロジェクトを完全に自分自身で仕上げる方法を見出す手助けになることもあります。 テキストやその他の邪魔なものはなく、コメントなしで提示されるデザインのみです。
iOS について特に考えている間、Apple App Store の厳しい投稿ガイドラインを確認する時間も必要でしょう。 モバイル アプリをどのようにデザインするかを決定する際に、これらのガイドラインを念頭に置いておくと、最初に正しいことを行うことができ、長い目で見て時間とお金を節約できます。
Android パターン
Androidデバイス専用にデザインするか、モバイル アプリの2バージョンを作成するか（1つはApple App Store用）、Androidデバイス用のデザインのインとアウトについてよく知っておくとよいでしょう。 iOSアプリのデザイン基準とは明らかに異なる（そして、厳密性が著しく低い）ことを知ると、驚かれるかもしれません。 このローンチ チェックリストのような Google Play ストアの提出資料に目を通すと役に立ちます。
Android Patterns を Android デザインのクラッシュ コースとして使用することもできます。 この Web サイトは、デザインを作成するときに使用できる Android のインタラクション パターンのライブラリです。 インタラクション パターンは、アプリの種類ごとに分類されており、ナビゲーション、通知、画面のインタラクションなどのアクションが含まれています。 これらのパターンは新しいモバイル アプリのデザイナーにとって役立ちますが、絶対的なルールではなく、ガイドとして捉えるべきです。
Icons
ビジュアル要素にディメンションを追加すると、プロトタイプを最終出力にできるだけ近い外観にするのに役立ちます。 Icons8 は、53,800 以上のアイコンのライブラリを提供し、完全に無料で使用できます。 この巨大な無料リソースに加えて、モバイル アプリをデザインする方法を決定する際に、アイコンを検索して使用するさまざまな方法について、これらのユーザー インターフェイス デザイン ツールもチェックしてください。
Adobe Kuler
Adobeには、初心者から上級者まで、モバイル アプリをデザインしたい人向けのリソースがたくさんありますが、最もシンプルで役に立つものの1つに、この配色ツールがあります。 Kulerは、デザイナーも非デザイナーも同様に、カラーホイールや、単色、補色、三原色などのさまざまな色の規則に基づいて配色を選ぶことができます。 CSSWinner によると、Mobile Design Inspiration は、モバイル アプリ デザインのための最も密集したインスピレーション ギャラリーであり、iPhone、Android、Apple Watch、iPad 別にアプリ デザインのインスピレーションを提供し、整理されているそうです。 新しいデザインは毎週追加され、「Creative Fields」セクションは、アプリのロゴのデザインに取り組んでいる場合、さらなるインスピレーションを与えてくれます。 誰かを雇うよりも、自分でアプリをデザインする方法を学ぶほうが、お金を節約でき、後で収益化できる貴重なスキルを得ることができます。
How to Design a Mobile App Without Paying A Dime
特にワイヤーフレームやプロトタイプの初期段階では、モバイルアプリのデザインにデザイナーを雇う必要は本当にありません。 そうすれば、たとえデザイナーを雇うことになっても、プロジェクトはそれほど深く (そして高く) ならないでしょう。
これらのモバイル アプリ デザイン ツールを使用すれば、モバイル アプリを自分でデザインする方法を理解し、その過程でいくつかの新しいスキルを身につけることができます。 アプリの設計と開発の両方で能力を証明できる個人の雇用機会を想像してみてください！
お金をかけずにモバイル アプリを設計する方法について、このリストにどのようなヒントやツールを追加するでしょうか？ ぜひご意見をお聞かせください。 あなたの洞察を @icons8 でツイートしてください。 WordCamp Denver の運営に携わっていないときは、自身のブログ www.the-blogsmith.com でコンテンツ マーケティングと SEO のベスト ヒントを紹介しています。 彼女の最新記事は、Twitterでご覧いただけます。 MaddyOsman.
です。