モバイルアプリのモックアップ作成に便利なツールを紹介!開発期間の短縮をしようMac、iPhone、グルメ情報、医療関連、Fintech関連の覚え書き。LabホームMac関連iPhone関連アプリ開発関連iOSアプリ開発に関連した記事です。LabホームMac関連iPhone関連アプリ開発関連iOSアプリ開発に関連した記事です。6分18秒GuttyoFacebookTwitterはてブPocketFeedlyモックアップという言葉をご存知でしょうか。この記事では始めからアプリのコードを書き始めるのではなく、まずはモックアップを作ることで完成後のアプリの動作イメージを作ってからコードに落とし込むために便利なツールの紹介をします。目次スポンサーリンクモックアップとはモックアップとはmock-upと書く名詞で、手元の辞書には『実物と同じ大きさに作った模型』と載っています。XDおよびSketchはiPhoneアプリの全体的な模型を作成することができます。最後のに紹介するPaintCodeはUI(ユーザーインターフェイス)のパーツを自由に作ることができ、さらに出力されたコードは実際のiOSプロジェクトで動かすことが出来ます。スポンサーリンクなぜモックアップを作るのかこれは人によって様々だと思いますが、モックアップの本質は「見て解ること」だと思います。自分が見て解るのか、それとも他の人に見せて解ってもらうのか。コミュニケーションツールの一つとしてアイディアを実体化(具現化)することは無駄では無いと思います。動きのイメージをべらべら語るよりも、同じ時間をかけてモックアップを作って見てもらう方が相手には伝わるのではないでしょうか。スポンサーリンクモックアップ作成が可能な主なツール2つこれらのツールで扱う画像はベクターで作成する事ができるため、解像度の異なるデバイス向けに最適な解像度で書き出すことができます。XDはAdobe社が提供しているWebサイトやモバイルアプリ(iOS,Android,Windows)のプロトタイプ作成ツール(モックアップツールと呼んでも同義でしょう)で2016年3月に公開されました。他のPhotoshop等のアプリと異なり、ゼロからmac向けに作成されており非常にシンプルなUIを特徴としています。2016年9月現在はPreview版となっており、どなたでも無料で自由にダウンロードして使用することが出来ます。Cloudでの販売、提供となると考えられています。Mac版のみ提供されています。Windows版の公開は2016年後半に予定されています。http://www.adobe.com/jp/products/experience-design.htmlSketchSketchはより自由度が高いWebおよびiOSアプリ向けのモックアップ作成ツールです。XDとは異なり、プラグインで自分の必要な機能を追加することが出来ます。iOS、watchOS向けアプリアイコンのデザインもできます。XDよりも古く、2015年の10月頃に公開されました。プラグインを始めとした柔軟な機能やすぐに使えるiOSのUIが準備されているなど非常にユーザーのことを考えられたツールとなっています。Sketch用のUIテンプレートなども幅広く出回っており、その多くが無料で利用できる環境が整っています。iPhone用のアプリケーションを用いることで実際にiPhoneでモックアップを動かすことも可能です。99ドルの有料アプリですが、14日間の無料体験版もあります。この無料体験期間の14日間は実使用日数をカウントしているようで、インストールから14日間ではないところが嬉しいですね。自分のペースでアプリを試すことが出来ます。こちらもMac版のみ提供されています。Storeも用意されています。https://backend.bohemiancoding.com/store/edu/画面推移などはこのSkitchとPrincipleなどとの組み合わせがオススメです。http://principleformac.com/iOSのUIパーツの作成(コード生成)ができるツールPaintcode上記2つのツールでもパーツ生成は可能なのですが、Paintcodeは画面にパーツを描画するためのコードの生成が可能なツールです。図形をPaintcodeで描くと、それを描画するために必要なコード(Objective-C,Swift,C#)が自動的に生成されます。SketchにはPaintcode用のプラグインもあり、Sketchで画像を作り、Paintcodeでコードを生成することもできるようになります。アプリケーション内に画像ファイルを埋め込むとファイルサイズが大きくなりがちです。コードにしておくことでアプリケーションのサイズを減らすことができるため、サイズを削減する必要がある場合には有用な選択肢として考えられます。XDおよびSketchとその外部サービスとの連携、パーツの作成とコード化にPaintcodeをご紹介しました。有名なツールですので情報も豊富ですし、UX(使いやすさ)も考えられています。私はPhotoshopからSketch+Paintcodeに移行しました。試してみてはいかがでしょうか。そのうちこれらツールの使い方について解説する記事を書きたいなと思っています。「もっと凄いこんなツールあるで!!」「この組み合わせもいいで!」という方がいらっしゃったらぜひ教えてくださいね。最後までお読みいただきありがとうございました。FacebookTwitterはてブPocketFeedlyこの記事を書いた人Guttyo病院薬剤師として働きながら、iOSプログラミングやWEBコンテンツ制作・コンサルティングを行なっています。医療×ITでより効率の良い仕事、便利な社会の一旦を担うことが夢の一つです。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。■JRタワー札幌展望台に行ってきた。某企画の取材と称してふら〜っとJRタワーに登ってきました。日の入り時刻だったのでいろいろと面白い写真が撮れたなぁと。Late2006を蘇生。SAM56GM25Sを購入しました。Analyticsを表示しよう。清正井とかいて「きよまさいど」とよみます。数年前に眞鍋かをりのブログでパワースポットだーと取り上げられていたので行ってみました。病院薬剤師の傍ら、iPhoneやiPad向けのアプリ開発をしています。twitterのフォローをしていただくと本ブログの更新情報を受け取ることができます。