• 株式会社MDパートナーズ
  • 取締役 システム開発部長
  • 高橋 昌臣

コーディング不要!「本物と間違えられる」アプリのモックアップが作れるデザインツール

  • -
  • このエントリーをはてなブックマークに追加
    -
  • tweet

今回のソリューション:【Flinto/フリント】

現在創業7期目の株式会社MDパートナーズでは、インターネットサービスの受託開発を事業のひとつとして展開している。同社取締役の高橋 昌臣さんは、開発業務の中では一部デザイナー領域までカバーしながら、ディレクターの役割を務めている。

高橋さんが過去に抱えていた問題として、アプリ等のモックアップを作成するのにかかる手間があった。クライアントが実物のイメージを持つためにモックアップは必要不可欠だが、本番ではない環境でクオリティの高いものを用意する工数が課題になる。そこで導入したのが、コーディングなしで、実機で動くWEBサイトのモックアップを簡単に作成できるツール「Flinto(フリント)」だ。高橋さんの活用法を聞いた。

アプリ等の受託開発と、自社サービスを展開する会社を起業

もともとはデザイン学校出身で、前職でもWEBデザイナーをしていました。その後株式会社MDパートナーズを立ち上げて、WEB開発のディレクター業務をしています。受託開発の他に、Petit Gift(プチギフト)というスマホやタブレットで受け取ったデジタルクーポンを使って、コンビニ等で商品を受け取れるOtoOの総合サービスの運営もしています。

個人的に新しいITツールが好きなので、情報収集はかなりしています。ニュースアプリはもうほとんど見ていなくて、自分で作ったRSSフィードを使っていますね。気になったものをどんどん追加しているので今300サイトくらい入っています。Flintoを1番始めに知ったのは、Tech系のポッドキャストで紹介されていたんですね。いつも割とタイムリーな情報が上がってくるのでチェックしていて。それで検索してみたんです。

アプリのモックアップ作成に手間と時間がかかっていた

元々アプリのモックアップを作るのには、まずフォトショップで簡単にアウトラインを作って、Macのプロトタイプというソフトウェアに落としていました。僕はけっこうこだわって細かくやってしまうタイプなので時間がかかっていて。しかもプロトタイプがだんだんバージョンアップしなくなっていって、もっと良いのないかなと悶々としていたんです。

プロトタイプでは画面の遷移や構成をきちんと説明できないので、それはエクセルやパワーポイントで作っていたんです。「ここを押すと、このページにいきます」というのが説明されている資料ですね。これだとリアリティが全然ないし、そもそも作るのが手間だという課題もありました。

まずは個人アカウントで使い始めた、Flinto

それでFlintoを調べてみたら、画像をWEBにアップロードしてリンクを貼って、簡単にモックアップが作れるツールだと。当時、その単純な機能だけを持っているシンプルなツールが全然なくて、もっと手間のかかるものばかりだったんですね。良さそうだったので、2013年の5月から最初は個人的にお金払って使い始めました。完全に個人のアカウントで作って、会社の案件に使ってたんです。使ってみたらすごく手軽だし、無駄なものがなくて、しかもなんかオシャレ(笑)。

それで1年ちょっと、自分のアカウントで使ってから去年の9月から会社単位で使うようになりました。チームでの開発がかなり効率化しましたね。プログラミングに入る前にある程度のことができるようになったというのが一番大きいです。

クライアントに「本物」と間違われるモックアップが作れる

現状の使い方としては、デザイナーにまず素材を作ってもらって、それをFlinto上に上げて僕がどんどんリンクを貼っていきます。すごく単純で、ドラッグするだけなんですよ。コーディングとか何もいらないです。裏側のリンクだけ繋げるので、サーバーサイドの業務は何もいらないわけです。

結果として仕様書のボリュームが減って、例えば画面の遷移図がいらなくなります。イメージで見せられるので言葉での説明がいらなくなるんです。実際にFlintoでモックアップを作ってクライアントさんに実機で見せることもあるんですが、本物と勘違いする人がいるくらい(笑)ちゃんと動くので。「あれ、もうできるんじゃないの」って言われるくらいのものが最初の提案段階でお見せ出来るのが大きいです。デザインだけ完了していれば、2、3日でクライアントに実機上で実物に近いものが見せられる。これは大きいですよ。

ディレクターがよりクリエイティブになれるツール

モックアップを作るのに使っていた工数を、今はよりクリエイティブな方だったり、頭を違う所に使っています。例えばUI/UXも、モックアップ上でいろいろ試すことで改善が早くなるんですよね。ディレクター向きのツールだと思います。「あれ、この画面がない」とかも気がつきやすいですし(笑)。今まで作ったものも貯まっていくので、振り返りにもいいですね。

本当に満足していて、すごく好きなツールなんですよね。シンプルな機能を求めるならこれで十分だと思います。アプリ開発を行っていて、まだ遷移図の作成に時間をかけている企業さんには本当に使い勝手のいいツールだと思っています。

  • -
  • このエントリーをはてなブックマークに追加
    -
  • tweet