2016年2月26日金曜日

開発初心者がこれだけは知っておいた方が良いこと③

こんにちは開発者のSです!

今日はデータ分析について書こうと思います。
せっかくページを作ったらその反響も知りたいですよね♪

まずは分析に用いる指標について

■View数
ページが見られた回数。1人の人が10回見たらView数は10

■訪問数
何回訪問されたか。
1回の訪問で10ページ見られたとしたら、View数は10だけれど訪問数は1

■UU数
ユニークユーザー数。
何人の人が見たか。1人が何ページ見ても、何回訪問してもユニークユーザは1

■CVR
コンバージョンレート。
View数またはユニークユーザーの内、コンバージョン(商品購入や資料請求などの最終成果)に至った割合。
何をコンバージョンとするかはその人次第。

■回遊率
1人のユーザーがサイト内のページを何回閲覧したか

■離脱率/遷移率
ページに流入した人の内、どれだけ離脱したかが離脱率。
反対に離脱せず、他のページに遷移した割合が遷移率。

■直帰率
サイトに訪れたユーザーの内、最初の1ページだけ見てサイトから離れた人の割合。
一般的に40%前後なら良いとされている。



サイカタやGA(Google Analytics)を使えば、更に各デバイスのシェア率や流入、ユーザーの特徴なども見ることができます。
自分が作ったページについて、ぜひその反響を見てみてください!!

はじめまして。ふなばしです。

今日から開発ブログに参加させて頂くこととなりました。
デザイナーのふなばしです。
新米デザイナーです。



ひよっこの私がここで綴るのはずばり、 新米デザイナー奮闘記です。
多分にもれず、そんな形で日々気づいたこと、気になったこと、挫けたことなど
なよなよと書かせていただきます。

前説がくどくなりましたが、ここで自己紹介を。


名前 ふなばし
年齢 25
性別 女
2013年 武蔵野美術大学 基礎デザイン学科 卒業
→カメラマンを目指し撮影スタジオでスタジオマンとして勤務
→とあるベンチャー企業で何でもデザイナー兼総務として勤務
→現職 Webデザイナーとして奮闘中(半年経過)

です。

Webデザイナー歴は1年半となります。
扱う言語はHTMLCSSです。(JavascriptjQeryを使っています)

趣味は読書と映画とお散歩と愛猫と戯れることで、ライフワークは写真と机研究です。
基本田舎が好きなので、埼玉から東京へ毎日通勤しています。
最近密かに嬉しいことは、一部の方から「ふなちゃん」と呼ばれていることです。
なんだかソフトでかわいい感じが気に入っています。(今までは“ばし”でした

【オススメのサービス】


schoo」  https://schoo.jp/guest

無料の生放送授業で学べるオンライン動画学習サイト
使用歴そろそろ1年くらいになります。
通勤時間等、イヤホンとスマートフォンがあればどこでも授業が受けられちゃうという素晴らしいサービスです。
ここで私はUIUXの授業やアプリデザイン、英会話を受講しています。

【気になっている団体】


「HCD(人間中心設計推進機構) 」 http://www.hcdnet.org/

昨今UIUXと言われ続けていますが、
日本の第一人者として知られる黒須教授が会長を務めていた、HCD(人間中心設計推進機構)です。
その名の通り、人間が体験するすべてのデザインについて、より人に寄り添った実際的なデザインを推進していこうという考え方です。
専門家認定機構でもあるため、UIで有名なグッドパッチや、その他さまざまな企業の方が専門家として登録されています。

「SDN(サービスデザイン・ネットワーク)」 http://japan.service-design-network.org/author/japan/

先日この団体が年1で開く、「サービスデザイン・ジャパンカンファレンス」へ参加してまいりました。
名のごとく、日本におけるサービスデザインの今と未来というお話でした。
海外のスピーカーを招いた、刺激的な内容でした。
※その内容についてはおいおい書かせていただきます。


以上自己紹介でした!

今後ともどうぞよろしくお願いします!(ドキドキ)


2016年2月22日月曜日

UX JAM 6 -UX GIRLS Returns- に参加してきました!

どうも、ふみえです。

2016/02/17に"UX JAM 6 -UX GIRLS Returns-" というイベントに参加してきました。
本イベントですが、概要は以下になります。
UX JAMはUX MILK主催の、UXを題材にした「ゆるい」勉強会/交流会イベントです。学術的なUXのセミナーというより、参加者同士でより気軽にUXについて話し合えるような場です。レベル感的にはUX初心者~中級者向けで、LTやスピーチをただ聞くだけではなく、参加者の方も積極的に話したりできる雰囲気作りを心がけています。
とてもライトなイベントで昨年からちょこちょこ参加させていただいておりました。
やはり聴いているだけでは物足りず、以前ご登壇された方からの後押しもあり、今回登壇してまいりました。

前職で私が企画・運営したユーザさんを理解するための取り組みを紹介させていただきました。

UX に興味を持ったきっかけ

私はフロントエンド・エンジニアです。デザインの変更・機能追加/改善などは日々行います。しかし、会議で「この機能についてどう思いますか?」「この機能きっと回遊時間が伸びると思いませんか?」と問われた時に何も反応できないことが多々ありました。私が考えすぎてしまう性格故にそうなっていたのかと思っていました。しかし、UXについて調べてみると、どうやらそれは性格の問題ではなさそうであることがわかりました。

ユーザさんに会いたい!!

私は強く思いました。思い立ったら即実践!!ということで、色々素地のない所で手探り状態で座談会を開催するのに1ヶ月で準備をしました。一応「仮説 → 検証 → レポート → タスク化」というフローを踏みました。

そこで得られた結果や課題はチームの中で共感を呼ぶこともでき、チームの意識を自然と同じ方向に導いてくれます。開発していく時の自身やモチベーションの向上、サービスへの愛も増幅します♡


そんなこんなでこちらからは以上です。

2016年2月19日金曜日

C# 構造体とは

こんにちは山田です。

C#の基本構文でいまいち呑み込めなかった部分について
わからないなりに解説をしようと思います。

~良くわかっていない人による解説~
 
開発言語:C#

構造体というのは一見、「何かの構造概念なのか?」と思ってしまいそうなのですが、
(というか勘違いして覚えていたのですが、)
実はクラスに似ていました。
具体的には、メモリ空間における構造が異なるそうです。
なので、ちょっと変わったクラス、というとらえ方でよさそうだと思います。

■構造体の定義

構造体の定義は、クラスとほぼ同じで、structを用いて定義します。
struct Dog{
 public int price;
 public string name;
 public int getPrice(){
    return price
 }

※ちなみに構造体は初期化が出来ないです。
public int kazu =1; ×

クラスと同様に、状態(field)と振る舞い(method)をメンバにもつことが出来ます。

■クラスと構造体の違い
構造体とクラスは似ていますが、
大きな違いは、参照型か値型かの違いです。

●構造体(値型)
 ・構造体は列挙型と同様で、値型です。
  (変数に直接値が格納されているデータ型です。)
 ・他のクラスや構造体を継承したり、継承元になることはできません。
 ・インターフェイスを実装することは可能。
 ・new演算子を使わなくてもインスタンス化される。


●クラス(参照型)

  例:)文字列、配列、クラス、デリゲート、インターフェースが参照型   

■早い話、どういう時に構造体は使用する?

クラスと構造体のどちらを使うか: C# プログラミング 再入門
http://dotnetcsharptips.seesaa.net/article/417085715.html
 ↑
こちらを参考にさせていただきました。
-----------------------------------------------------------------------------
MSDNのプログラミングガイドから引用します。

構造体は軽量オブジェクトを表すのに適しています。参照型の機能が必要ないのなら、小さいクラスとして実装するよりは構造体として定義した方が、システムにより効率的に処理されることが期待できます。

実際に計測してみると(かなりハイスペックなマシンでデバッグビルド版で計測)、上のサンプルコードにあるクラスと構造体とを10万個づつインスタンス化 してもいづれも2msと差はなし。100万回でクラスが約100msに対し構造体が30msと約3倍の効率の良さは伺える。
これらを「参照型の機能」として、つまりBoxingされるようObject型にキャストする処理を介在させた場合、クラスも構造体も120msぐらいであった。

これって、実際の使用条件等を考えるとほとんど構造体を使う理由がないように思えます。
-----------------------------------------------------------------------------

う~んつまり、C#の構造体の場合は、あまり使う場面がないみたいですね。

■参考文献

クラス-構造体-
http://arc360.info/lecture/6/4.html

値型と参照型 - C# によるプログラミング入門 | ++C++; // 未確認飛行 C
http://ufcpp.net/study/csharp/oo_reference.html

2016年2月16日火曜日

開発初心者がこれだけは知っておいた方が良いこと②

こんにちは!Sです。
前回に引き続き「開発初心者がこれだけは知っておいた方が良いこと」について書いていきます。

今回のテーマは「おかしいところの見つけ方について」です。

ネットで調べて見よう見まねで書いてみたけれど上手く動かない。。。という時に
早くどこがおかしいのかを見つける方法について書いていきます。


<エラー画面が表示されている場合>

①ログを見る
 新規作成の場合は自分でログをはくように設定しないといけませんが、
 既存のファイルの修正であればおそらく既にエラーが起きた際にエラーログを出力するように
 設定されているはずです。
 なのでまずはソースからログの出力先を調べて、ログを見に行きましょう!


<エラー画面は表示されていないが、やりたいことが出来ていない場合>

①デバッグする
 ここがおかしいのかも。という怪しい場所付近にブレークポイントを設けて、
 デバッグして下さい。きっとヒントになるはずです。
 ▼最初にマスターしたいVisual Studioのデバッグ機能 -基本編-
 http://news.mynavi.jp/articles/2008/08/18/debug/

②Response.Writeを使う
複数の処理を連続して行っており、それらのどれが原因かを調べるのに便利です。
例えば...
aに対して処理B、C、Dを連続して行うのであれば一旦それらを分けてみましょう!

Response.Write(a);
Response.Write(b);  //bはaにBの処理をしたもの
Response.Write(c);  //cはbにCの処理をしたもの
Response.Write(d);  //dはcにDの処理をしたもの

これでブラウザにa,b,c,dが表示されるので、処理のどの段階でおかしなことになっているのかが一目瞭然です。


2016年2月12日金曜日

【Android】AppIndexingを設定してみた

こんにちは。エンジニアのKです。

【Android】AppIndexingを実装してみたの続きです。
前回までで最低限必要な実装は完了しましたが、
ディープリンクのテスト方法や、「Google Play Developer Console」、「Search Console」への登録方法でも
公式ドキュメントを読んだだけではピンと来ない部分があったので、補足できればと思います。

ディープリンクをテストする

実装したディープリンクがAppIndexingとして正常に動作するかテストします。
公式ドキュメント:App Indexing の実装をテストするの前半

方法としては、公式ドキュメントにあるADBでインテントを飛ばすやり方と、アプリがインストールされた端末のブラウザで、android-app://のリンクを踏んでみるやり方の2つがあります。

ADBでインテントを飛ばす

端末をUSBで接続し、コマンドラインから公式ドキュメントにあるドキュメントを実行すると、インテントが飛びます。
ディープリンクが正しく実装できていれば、アプリのコンテンツが立ち上がるはずです。
以下は、Android StudioのTerminalで実行した結果です。


実装が上手く行っていない、飛ばすインテントが誤っていると、「Error: Activity not started, unable to resolve Intent」といったエラーが表示されると思いますので、実装に誤りがないかを確認しましょう。

android-app://のリンクを踏む

webページを自由に変更できる環境があれば、aタグにテストURLを埋め込んでブラウザでアクセスします。
そういった環境がない場合は、公式ドキュメントにあるQRコード経由でアクセスすると便利だと思います。
前回の記事でも書きましたが、テストURLは

android-app://com.recipe-app/http/recipe/pierogi-poutine
android-app://com.recipe-app/recipe-app/recipe/pierogi-poutine

といったものになります。


AppIndexing APIをテストする

AppIndexing APIが正常に動作しているかも確認しておきます。
公式ドキュメント:App Indexing の実装をテストするの後半

これもアプリをインストールした端末をUSBでPCに接続し、ターミナルにコマンドを打ち込みます。
AppIndexing APIが起動する処理を通るようにアプリを操作すると、以下の様なログが出力されるはずです。
title, description, appUri, webUriが正しい値になっていればOKです。
マルチバイト文字を含めるとログ出力が文字化けしてしまいますが、URLエンコード処理は不要です。
試しにこのままリリースしてクロールさせたところ、検索結果に表示されるAppIndexingのリンクは文字化けしていませんでした。



Search Consoleにアプリを登録する

まずはSearch Consoleにアプリとしてプロパティを追加します。
公式ドキュメント:アプリの Search Console

Search Consoleにログインし、公式ドキュメントにあるようにandroid-app://のURLでプロパティを追加します。
すると、以下の画像のように、「Androidアプリ」のプロパティが追加されます。




Search Consoleでクロールテストをする

Search Consoleに登録すると、アプリに対しても「Fetch as Google」を行うことができます。(2016/02時点でアルファ版)
テスト対象のアプリは、基本的にはGoogle Playで配布されている最新版のapkですが、この場でapkファイルをアップロードして試す事もできるようです。
言語を選択するセレクトボックスは「日本語」にした方が良さそうです。「英語」のまま実行したらエラーになってしまいました。

広告SDK等が含まれていると、広告で読み込まれる一部リソースがブロックされ「一部完了」のステータスになりますが、
正常にレンダリングされていれば問題ないと思います。


アプリとWebサイトを紐付ける

ここまで確認できたら、あとはアプリとwebサイトを紐付けて、GoogleにAppIndexingしてもらいます。
公式ドキュメント:アプリをサイトに関連付ける
※前提として、ディープリンクに対応したアプリをGoogle Playで公開している必要があります。

紐付け方はGoogle Playから行う方法と、Search Consoleから行う方法があります。
今回はGoogle PlayのサービスとAPIからwebサイトのURLを入力する方法で行ってみました。
すると、Search Console側に「{googleアカウント} が Android アプリ {パッケージID} を {webサイトURL} と関連付ける権限をリクエストしています」といったタイトルのメッセージが届きますので、承認しましょう。

これで、必要な作業は全て完了となります。
ここから徐々にgooglebotのによるアプリクロールが開始され、3-5日程度でSearch Console上でクロールステータスを確認することができると思います。
以下が実際のクロールステータスの画面ですが、クロール開始直後はエラーが大量に発生してしまいました。
ですが、特に何もせず様子を見ていたところ、エラーは0件となり、インデックス数が増加していきました。



インデックス数が増え始めると、その更に数日後(5日程度かかった)、google検索結果にAppIndexingのリンクが表示されるようになると思います。

2016年2月9日火曜日

C# 列挙型 enum

こんにちは山田です。

開発言語:C#

C#の基本構文でいまいち呑み込めなかった部分について
わからないなりに解説をしようと思います。

~良くわかっていない人による解説~

■列挙型とは (enum)
特定の値しか取らないようなものに対して使用します。
たとえば曜日だったら 月~日までの7つのみになります。
この曜日を例に取り上げていこうと思います。

■基本構文

【定義の仕方】
列挙型の宣言はenumをはじめに記述し、つづいて列挙型の名前を記述します。
-------------------------------------------------
enum 列挙型名
{
  メンバー1, メンバー2, …, メンバーn    ←列挙定数
}
-------------------------------------------------

例1)
-------------------------------------------------
enum Week
{
Sun, Mon, Tue, Wed, Thu, Fri, Sat
}
-------------------------------------------------
そしてそれぞれの識別子には0から順番に1ずつ増える整数値が割り当てられます。

Sun:0
Mon:1
Tue:2
 :
Sun:6


例2)
-------------------------------------------------
enum Week
{
 Sun, Mon=100, Tue, Wed, Thu, Fri=200, Sat
}
-------------------------------------------------
もし任意の値を代入すると、そこから1ずつ増加します

Sun:0
Mon:100
Tue:101
Wed:102
Thu:103
Fri:200
Sat:201

例3)
列挙要素の基になる既定の型はintですが、
Int型以外で整数値を使いたい場合は以下ように記述します。
-------------------------------------------------
enum Week : byte
{
 Sun =1
 ,Mon =2
 ,Tue =3
 ,Wed =4
 ,Thu =5
 ,Fri =6
 ,Sat =7
}
-------------------------------------------------
他にはこんな型が使用できます。
byte、sbyte、short、ushort、int、uint、long、ulong


【利用する方法】

識別子を参照する時は以下のように記述します
----------------------------
列挙型名.メンバー名
----------------------------

例4)
using System;

class Sample
{
 protected enum Week : int
 {
 Sun =1
 ,Mon =20
 ,Tue =30
 ,Wed =40
 ,Thu =50
 ,Fri =60
 ,Sat =70
 }

 /// 
 /// 日本語の曜日をただ返すプログラム
 /// 
 protected void SampleProgram(Week[] _day){
  for (int i = 0; i < _day.Length; i++)
  {
   switch (_day[i])
   {
    case Week.Sun: Console.Write("日曜"); break;
    case Week.Mon: Console.Write("月曜"); break;
    case Week.Tue: Console.Write("火曜"); break;
    case Week.Wed: Console.Write("水曜"); break;
    case Week.Thu: Console.Write("木曜"); break;
    case Week.Fri: Console.Write("金曜"); break;
    case Week.Sat: Console.Write("土曜"); break;
   }
  } 
 }

 static void Main()
 {
  Week[] day = new Week[] { Week.Mon, Week.Tue, Week.Wed, Week.Thu, Week.Fri, Week.Sat, Week.Sun };
  SampleProgram(day);
    }
}

結果:月曜火曜水曜木曜金曜土曜日曜

すごく微妙なサンプルになったと思いました。


■ちなみに整数値の方を使用したいときは、
以下のように型変換すればOKです。
----------------------------
(整数型)列挙型名.メンバー名
----------------------------


■その他こわざ

参考になった応用の例です。
・enumの値を任意の文字列に変換する
・数値がenumで定義済みがどうかチェックする
・enumの値を列挙する
http://qiita.com/hugo-sb/items/38fe86a09e8e0865d471

2016年2月8日月曜日

フロントエンド・タスクランナー(2: Gulp インストール編)

お疲れ様です。
先日薬を貰うために薬局のソファでぼーっと待っていた所、目の前を通り過ぎたおばあさんのバッグから飛び出ていた先端の鋭い牛蒡が目に突き刺さりそうになるという、恐ろしい思いをしましたふみえです。

さて、今回は前回の続きということで、タスクランナー Gulp を実際にインストールしていきます。
構築環境は OS X El Capitan バージョン10.11.3です。

0. 前提条件

Xcode をインストールしていること

1. Homebrew インストール

OS X 用タスクマネージャー Home Brew をインストールします。
こちらのページに遷移後、表示されているコマンドをターミナルで実行します。
$ brew -v
でバージョンが表示されたらインストール成功です。

2. rbenv インストール

rbenv は Ruby のバージョン・マネージャーです。rvm の後発という安易な理由で、こちらをインストールしていきます。
$ brew install rbenv
※ もしかしたら sudo で実行したほうが良いかもしれないです。
パスを通します。
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile

$ rbenv -v
こちらでバージョンが表示されたら成功です!

3. nvm をインストール

nvm の github のページにて、curl で最新のバージョンのものを持ってきます。今回は v0.30.2 です。
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash
ここまで来たら、ターミナルを閉じて再度起動してください。
使用したい node のバージョンを下記のように指定します。
$ nvm install v4.2.6


4-1. Gulp をグローバルインストール

いよいよ Gulp をグローバルインストールします。
$ npm install -g gulp
次に任意のプロジェクト(ディレクトリ)を作成し、移動します。今回は gulp_test ディレクトリ(プロジェクト)を作成していきます。
$ mkdir gulp_test

$ cd gulp_test
ここで、プロジェクトのパッケージを管理するための package.json を下記のコマンドで自動作成させます。要するに npm の初期設定です。
この初期設定は対話形式で行われます。特別な設定が無いならずっと Return キー押下で問題ありません。最後に"Is this ok?"ときかれるので、yes とこたえましょう(^o^)
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install  --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (gulp_test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/toyooka/gulp_test/package.json:

{
  "name": "gulp_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) yes
この結果、package.json ファイルが作成されます。デフォルトの中身は以下のようになります。
  {
    "name": "gulp_test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "gulp": "^3.9.0"
    }
  }


4-2. カレントディレクトリ内で gulp に依存関係をもたせる

先ほど行ったのは gulp のグローバルインストールになりますが、これから行うのは、今いるプロジェクト用に gulp をインストールし、先ほどの package.json に 'devDependencies' を追記してくれるコマンドです。
  $ npm install gulp --save-dev
これで、package.json の中身を確認してみましょう。ファイル内に devDependencies が追記されました。
  "devDependencies": {
    "gulp": "^3.9.0"
  }
さらに、node_module というディレクトリができて、 gulp さんがいらっしゃるのが確認できます。

5. Gulp を設定する

このプロジェクト内で gulp を動かすためには gulpfile.js を作成しなければなりません。
  var gulp = require('gulp');


6. Sass を Gulp で動かしてみる

Gulp の動作確認のために、gulp で Sass を動かしてみましょう。その準備として、sass/style.scss ファイルにネストした適当なコードを書いて保存します。
  header {
    font-size: 15px;
    line-height: 1;

    span {
      font-weight: bold;
    }
  }
次に gulp で Sass をコンパイルできるように gulp-sass というパッケージをインストールします。
  $ npm install gulp-sass --save-dev
上記コマンド実行後に package.json ファイルを見てみてください。devDependencies に下記の行が追加されていることを確認しましょう。
  "gulp-sass": "^2.1.1"
次に、gulpfile.js に Sass の設定をしていきます。
  var gulp = require("gulp"); // gulp の読み込み
  var sass = require("gulp-sass"); // gulp-sass の読み込み

  // sass コンパイルのタスク処理
  gulp.task('sass', function(){
    gulp.src('sass/style.scss') // コンパイルしたいファイルを指定
        .pipe(sass())
        .pipe(gulp.dest('./css')); // css ディレクトリ以下にコンパイルしたファイルを置く
  });
.pipe() は src で指定したファイルに対してその中で指定した処理を施す命令です。チェーンで次々に処理をつなぐことができます。
これで、準備完了です!それでは、コンパイルさせてみましょう!
  $ gulp sass
css ディレクトリの中に style.css が生成されていると思います。では、その中身を確認してみましょう!
  header {
  font-size: 15px;
  line-height: 1; }
  header span {
    font-weight: bold; }
ドドン!!ちょっと括弧の位置やインデントが微妙ですが、Sass のファイルが CSS ファイルにコンパイルされました(^o^)

こんな感じでいろいろな処理を自動化させてしまいましょう!!

参考記事:

2016年2月5日金曜日

アプリのプロトタイピングツールを使い倒してみる② -お手軽プロト「POP」ー

おかだです。

前回の投稿に引き続き、アプリのプロトタイピングツールについて実際に使ってみた感じを合わせて、少しずつご紹介していきます!


プロトタイピングツールを使う前に

プロトタイピングツールを使う前に、気を付けたほうがいいなと思うことがあります。

実際、プロトタイピングはとっても楽しいです。

たのしさへの期待感のあまり、いきなりツールを使い始めてしまうこともしばしば、、、、

ある?かもしれませんが、それはダメです。時間の無駄です。


ツールを使ってプロトタイプを作る前に、まずお絵かきをしましょう。

アプリの画面や遷移の構成を考えるのが本筋です。




ですが今回は、プロトタイピングツールを使ってみることが本筋なので、簡単にうさちゃんアプリの絵をかいてみました。

何をするアプリなのかよくわかりませんが、これを使って、プロトタイピング、するぞー!(こんな雑な絵で大丈夫か、不安です)

うさちゃんアプリ

お手軽プロトタイピング「POP」

POPは、いままで試したプロトタイピングツールのなかでは1,2位を争うお手軽さが特徴です。

メールアドレスだけで、無料で使えます!

また、ブラウザ版だけでなく、専用のAndroidアプリもあり、プロジェクトを共有できるので
実際に端末で動きのイメージを確認することもできます。

詳しい使い方をご紹介されているページがありましたので、参照させていただきます。




「POP」のいいところ

実際にうさちゃんアプリを作ってみて、いいなと思ったのは

「めっちゃお手軽!」なところです。

さきほどのうさちゃんアプリの各画面のお絵かきを写メで撮影して

それをPOPアプリでそのまま使って、ボタンの遷移などを設定することができてしまいます。

かなりお手軽!!!そして日本語対応!!!!!!(とってもいいです)

また、自分のプロジェクトを作る前から、見本のプロジェクトが入っているので

アプリのディレクターさん以外の方やプロトタイプ初めてやってみる方も、使いやすいと思います。




「POP」のちょっと不便なところ

ちょっと不便なところは、画面内のこまか~いところを再現できないところです。

もしかしたらプロトタイピングツールあるあるなのかもしれませんが

・ヘッダー固定ができない
・リストビューのスクロールができない

など、ちょっとここはこう動いてほしいのになー!というところに手が届かない感じがしました。

お手軽な反面、できないこともある程度あるみたいです。



「POP」でこんなことできるよ!

大まかな画面遷移を再現するだけならとてもお手軽にできるので

アプリの構想段階で、ある程度の構成をプロトタイプしてアプリのイメージをメンバーに共有するのが

かなり簡単にできると思いました!




今日はおしまいです。TGIF!!