何かしょうもないサービスを作りたいのでご要望お待ちしてます

どうもお久しぶりです

最近、自分の技術力のなさを感じているので息抜きに自分が全く考えない分野のサービスを作ってみようかと思い立ちました

自分たちのクラスタでは欲しいけど、収益にならないし誰も作ってくれない……みたいなコアなサービスをいくつか作って練習しようかと思ってます

• 特定のトレーディングカードゲームのファンしか使わないサービス
• 特定のキャラが好きな人しか使わないサービス

わりと何でもOKですので気軽に応募下さい 応募が多かった場合は抽選で作ります

lobee.net

そういえばイラストSNSを作ってます

どうもせせりです:)

Twitterではちょいちょい書いていたのですが、最近イラストSNSを作っておりまして……

その名も　Raiot　テーマカラーは緑です

raiot.net

オープンは2月2日なのでなんだかんだ4ヶ月がたちました

さっきデータを確認したところ

• 会員数　1.5万人
• 投稿数 　3.5万件

ということで、最近は毎日1000件くらいのペースで投稿頂いているようです

良かったら使ってみてください

質問箱について取材を受けました

どうもせせりです:)

質問箱について取材を受けたのでこのブログでも紹介しておきます

www.itmedia.co.jp

すごくかっこよく書いて頂いたのですが本物はそんなにすごくないです

そこら辺に居るただのあほちんです

【2017】結局RailsユーザーがiPhone&Androidアプリを作る一番良い方法はなんなのか？→「Xamarin ハイブリッド」がいいと思います

※記事の内容があまりにも雑だったので大幅加筆修正しました。つっこみ下さった方ありがとうございますm( )m

どうもせせりです:)

この記事は「Railsしかやったことないけど、Android&iPhoneアプリでサイトの専用アプリをサクッと作りたい、push通知したい」という贅沢な人向けの記事です

※この記事で説明するのは「Xamarin.forms」です

前提

KotlinやSwiftで作るのが一番、と言うのは間違いないかと思います

でも、Webに慣れきった我々としては使い慣れたHTMLやCSSで解決したいしそんなネイティブガリガリに作り込みたいわけではなく、Webにpush通知を添えた程度のものをサクッと作れればそれでいいのです

ページ数だって20枚もない、そのくらいのアプリで良いのです

業務で作っている方からすれば「そんなしょぼいアプリ作る必要あるの？」と思うかもしれませんがpush通知したいんです

PWAがiOSでも標準搭載されて全デバイス対応したらそっちにすぐ移動すると思いますが残念ながら今はまだ未対応なので泣く泣くアプリを作ることになります

……と、この程度のめちゃくちゃ低いモチベーションでアプリ開発をはじめるのでそもそもあんまり手間暇コストをかけたくないのですがここらへんの情報がまとまっていないのでそこらへんをまとめて共有します

※アプリをクロスプラットフォームで作る方法として「ハイブリッドアプリ（Cordova）」と「Xamarin」が今は一番有名なのでその2点について解説します

1. Cordova（Monaca）でハイブリッドアプリ

許されるならこれが一番早いです

CordovaはHTMLとJSとCSSでアプリが作れる優秀なやつです

ただしネイティブアプリのような遷移をするために「OnsenUI」などの特別な書き方を覚える必要があります＆仮想ページなのでSPAと同じように変数などがリセットされないため普通のRailsと同じイメージで作ると失敗します

多少覚えることは多いけどHTMLで書けるならいいのでは？→ そう思っていました

Cordovaはアップデートペースがとても早くバージョン同士の組み合わせでPluginが動かない事がしょっちゅう起こり本当にもうそれはそれはすごく消耗します

Monacaのサンプルとして提供されているものすら（nifty push 通知）動かなかったりするので本当に泥沼です。さらにたちの悪いことに

「プラグインを入れてみる」→「エラーが出たからプラグインを削除する」→「削除してもエラーが発生してそれ以降一生コンパイルは通らない」

こういう罠があります。試しにプラグインを入れてみるなんて事をやっただけでそのプロジェクトは壊れるので新しいプロジェクトを作って0からファイルを設置しなおさないといけません

なんでかというと……MonacaでやるにしろVisualStudioでやるにしろ、表に見えているファイルだけでなく裏に隠れている設定ファイル類が沢山有ります

例えば上に書いたniftyのプラグインを一度入れてしまうとmonaca上やvisual studio上からはいじれない裏の設定ファイルにその情報が書き込まれ、pluginを削除しようとこの書き込まれた内容が消えることはないのでそれ以降一生エラーを吐き続けコンパイルできない壊れたプロジェクトへと変貌を遂げます

もちろんVisualStudioでやるなら後ろの方にある設定ファイルを探しに行って手動で修正も出来るのですが自動で変更されるファイル数が多すぎてcordova自体の学習コストがとてもかかります

他にも色々イマイチな点はあるのですがとりあえずまとめると　辛い　本質的じゃない所でつまりまくるので本当に辛い

知り合いにCordovaマスターが居るなら良いですがそうでないなら辞めておいたほうが良いと思います。ハゲるレベルで辛いです

※さらにさらに悲しいことにpush通知系のplugin（Cordova Firebaseプラグインがエラーで動かない）もエラーを吐くので一番使いたいpush通知が現在できません.AzureとかSESとか使うといけるかも

2.Xamarin（C#）でネイティブアプリ

最近Twitterで教えてもらってはじめてみました

複雑な事をしなければワンソースで両対応出来るのですが……ネイティブ辛い

プログラムの部分はまだ良いんですよ、基本コピペと組み合わせでどうにかできるので……問題はデザインの方

例えば水平線を引きたいと思ったら？

HTMLなら<hr>で終わりですが（区切り線だろ！というツッコミは置いといて）、ネイティブには水平線なんて便利なものはありません

じゃあどうするの？と言うと「Rect（四角形）の高さを1pxにして、横幅を100%にしたらそれは水平線だよね！HAHAHA！」って感じです

何年目だ！！！！アプリ開発の歴史はもう10年たってるのに線を引くことすらノウハウがいるのか！！！！

と突っ込むことになります

参考　Xamarinでラインを配置する方法 | Xamarin.Forms - ITブログ時々なんでもブログ

Xamarinでは「テキストに下線をつける」ことすら提供されていないので自分で書く必要があります

テキストに下線をつけるために3つもファイルを作って100行くらい書く必要があります

参考 Xamarin.FormsでLabelに下線を引きたい - かずきのBlog@hatena

何年目だ！！！！アプリ開発の歴史はもう10年たってるのに下線を引くことすらファイル作る必要があるのか！！！！

と再度突っ込むことになります

あとデザインについても「OSごとのデザインを使います！」というものなので、すぐに作るのには向いていてもそのアプリ独自のおしゃれなものは作れません

イメージとして勝手にTwitter BootStrap風のデザインが適用されると思ってください……え？変更したい？その道は泥沼ですよ

ネイティブアプリは独自デザインじゃなくてOSのデザインを遵守すべき

というツッコミもわかりますが、現実問題それ守ってるアプリがあるの？と言うと大手のアプリで守っているところなんて殆ど無いと思います

こんな感じで終始 デザインのめんどくささ に悩まされます。HTML入れてください、CSSで装飾させてください、辛いです

これに関してはJavaやSwiftで直接作っても悩まされるというか「よく世の中のアプリ開発者は暴動を起こさないな……」と思うレベルでwebに比べると非常に辛いです

※JavaやSwiftならビジュアルベースでデザイン組めたりするかもしれません。あまり詳しくないのでここへのツッコミお待ちしてます

3.Xamarinでオレオレハイブリッド

結果的にこうなりました

最初はデザイン要素が必要な部分だけWebViewで組んで、ボタンなどはネイティブで組んでいたのですが途中からもうこれ全部WebViewでよくない？となりました

だってネイティブではボタンのデザインすらまともに変更できないんですよ？？？ちょっとおしゃれに変更しようと思ったら100行（Android分、iOS分）必要です。頭がおかしくなります

例えばテキストリンクを作りたいとかでLabelにタップイベントを追加するとするじゃないですか？（ちなみにLabelにTapイベントはデフォルトでついていないのでまた200文字くらい書かないといけません）

このリンクをタップします、はい！動きません！

いや正確には動くのですがこのタップイベントというもの（体感）300ms以上押してしまうと遷移しないんですよ、タップじゃなくてドロップかなんかになってしまって

だから押しても中々動かない、すっごいストレス、一瞬でパッとやらないといけない……Webみたいにそこらへん吸収してくれないんです

.

え？「jQueryで mousedown と mouseup を追加するみたいな感じでtap と long tap 両方追加すればいいじゃん？」って？Xamarinにはタップイベントはあるけどそれ以外のイベント使いたかったら自分で書かないと追加できません（勘違いだったら申し訳ないのですが）もうちょっとこう……ね……辛い

ということで、オレオレハイブリッドをやるのが一番おすすめ！となりましたが……例えばInstagramのアプリで言うなら

こんな感じで

• ヘッダーweb view
• メインweb view
• フッター wev view

の3つをXamarinFormのGridで積みます

下のweb viewのメニューがクリックされたらC#側をコールしてメインのweb viewを書き換えます（そう、まるでページ遷移するかのように！）

WebViewからC#をコールする方法については

web viewのnavigation event（ページ遷移）にhookして、遷移先のURLをチェックすることでC#側で何かしらの対応が出来るようにするのがとりあえずiOS & Android共通で動く方法っぽいです（いくつか方法があるので今試してます）

これのメリットはいくつかあるのですが

• 使い慣れたHTML&CSSでデザイン出来る
• C#（ネイティブ）の機能を簡単に呼べる
• HTMLでデザインを組むからiOSでもAndroidでもデザインが変わらない
• Cordovaと違いネイティブプラグインをそのまま使えるから更新放置されたプラグイン（last updated 2 years ago）を使わずに済みます
• 全てWebViewで完結するCordovaと違ってweb viewのページ遷移＝リセット＆ネイテイブベースに見せ方をHTMLでやるのでSPAの知識がなくてもJSとかで詰まらない
• 前に戻るボタン付きのポップアップページなんかも特に難しい事を考えずにさっと作れる&管理しなくて良い
• ベースページがあるのでアプリの遷移が非常にシンプルになる
• JSの資産を使える
• ネイテイブと、HTMLの良い所を本当の意味でイイトコドリ出来る
• Xamarinを使うことでロジック部分をAndroid&iOSで共通化できる
• Visual Studioという鬼サジェストマン（個人の感想です）が使える（だたし重いです）
• 環境構築が簡単（Visual Studioをインストールするだけ！※16GBあります）

具体的な設計とかページ構築とかは各自で決めちゃっていいので、とりあえず「Viewは全てHTML（WebView）でやる」「ActionはWebViewからURLという形で投げて、それをC#で受け取ってネイテイブでやる」という点だけ共通化してやれば後は特につまるところはないかと思います

WebとのJson周りの通信とか、CookieとかそういうのもjQueryでやってもいいしC#でやってもいいしとかなりゆるい感じです

そうだこれを　Xamarin ハイブリッド　と名付けよう！

つっこみお待ちしてます

ということでRailsユーザーが辛さを感じずにiPhoneアプリ&Androidアプリをサクサク作る方法でした

最初にも書きましたがそれにさけるお金と時間があるならkotlinやswiftを学ぶのが結果的には一番良いので自分の中でのアプリの立ち位置などを考えて検討してみてください

備忘録というか色々試したその勢いで書いてるのでここらへん詳しい人からのつっこみお待ちしていますm( )m

【お知らせ】半日でwebサービス「Peing（質問箱）」を作ったら6日でTwitterトレンド1位（49000ツイート）になりました

どうもせせりです:)

タイトルがラノベみたいですね

blog.sesere.net

以前こんな記事を書きましてその時にそのうちサンプルアプリを作ると書いたのですがきっともう覚えている方は居ないでしょう

ちょうどよくサイクルが回るネタを見つけたので作ってみました

peing.net

サービス名はPeing（質問箱）呼び方は「ピング」ですが誰もこっちの方で覚えていないので「質問箱」で覚えてください:)

作り始めたのが11/21で出来て公開したのが11/22ということで今日で6日目になります

11/26　トレンド 4位5位

11/27　トレンド 1位

報告だけなの？

サービスについて解説しようと思ったのですがこのサービスについての解説は一番上にある以前の記事そのまんまです

そのサイクルをきちんと設計できればある程度使ってくれますよ！という例として作ったものなのでこちらで何か特殊な事をやっているわけではありません

「こうすればいい」と言うだけでは説得力も無かったので無事に使ってもらえてホッとしています:)

【後編】「怖くないキラキラしてないInstagram」を目指して写真投稿SNS「Culon」を作ってみるまでの流れとユーザー獲得戦略について

どうもwebサービスが好きすぎるせせりです:)

前回僕流のサービスを作るまでの流れを書いて

【前編】「怖くないキラキラしてないInstagram」を目指して写真投稿SNS「Culon」を作ってみるまでの流れとユーザー獲得戦略について - 考えすぎてしまう人のブログ

この記事では「どうやってユーザーを集めるの？」について説明しようと思ったのですが……書くことが多すぎる

あれもこれも説明したいとやっていたらあまりに長くなり、それも迷惑だと思うので説明する内容は1つに絞りました

これだけでも6000文字で短いとは言えませんがこれ以上短くできなかったので許してください

もしもっと細かく興味がある人は会ったときにでも直接聞いてください:)

突然ですが「サイトに人を集める」って具体的に何をすればいいか分かりますか？

• 広告
• 営業メール
• 宣伝
• プレスリリース

パッと思いついたのはこういう「どうやって人を連れてくるか」ばかりではないでしょうか？これらはもちろん大切なのですが逆に言うと「金さえあればどうにかなる」部分です

こういった札束で人を片っ端からかき集める方法を取れるならこの記事を読んでいないと思いますし、ここでは「どうやって人を帰さないか」について説明したいと思います

人を集める＝帰る人を減らす

はい、これ大切なので覚えておいてください。僕達サービス運営者がお金をかけずにできる集客というので一番大切なのはこれです

すごくシンプルな話ですが

サイトから去る人　＜　サイトに来る人

であれば、（時間はかかったとしても）人は少しずつ増えていきます

誰も来ないってことはない

実感はあると思いますが「サイトに誰一人来ない」ということはありません、なんだかんだで5人とか10人くらいはサイトに来てくれます（誰も来なかったらフォロワーさんにお願いして使ってもらおう

サイトに人を集めるために一番大切なのはこの「来てくれたユーザーにリピーターになってもらうこと」であり、「どういうサイトだとすぐに帰ってしまうのか」を考えてそれを潰していく事で自然とユーザーが居着くようになります

つまり、「どうしたら帰る人が減るのか？」について考えれば人を集める方法が分かるというわけですね！:)

1.自分に関係なさそうだとユーザーは帰ってしまう

これはちょっと説明が難しいのですが、例えば「犬好きな人が猫専用SNSに訪れてくれた」場合おそらく登録などせずにすぐに帰ってしまうでしょう

全く関係ないのでこれは仕方ありません。でも、ここで大事なのは「関係ない」ではなく「関係なさそう」でも帰ってしまうという事です

例えばこの猫専用SNSに「猫が好きだけど猫を飼っていない人が訪れた」とします

猫は好きだけどサイトに居るのは「猫を飼っている人ばかりに見えた」ので「ここは猫を飼っている人だけなんだな」と登録せずに帰ってしまった、などという事はあるでしょう

これは明らかに対象ユーザーにもかかわらずサイトの設計がまずいことで「帰ってしまう」という悪い例です

どうしたら関係ありそうと思ってもらえるのか？と言うのは沢山方法があるのですがそのうちの1つの方法として「ターゲットを絞る」というのがあります

範囲を狭めたほうがむしろ使いやすい

トップページに大きく書いてあるキャッチ文でイメージしてください

• 「猫専用SNS」
• 「猫が好きな人のSNS」
• 「猫が好き、猫を飼ってみたい人のSNS」
• 「猫が好きな人や猫を飼ってみたい人が写真と日記で猫を楽しむSNS」

これは極端な例ですが、下に行くほど範囲が狭まっているはずなのにむしろ「自分向けっぽいな」と感じて使う人が増えます

沢山の人に使ってもらいたいからふわっとしたコピーにするのは逆効果

というのを覚えておいてください

今回作ったCulonであればざっくり言うと「インスタグラムは実名だしリア友だしなんか怖いしリア充なものしかアップできないから使わないけど、ネットのフォロワーさんと使えるオタク系なものもアップできるインスタグラム的なものがあったらいいのに……と思ってた人へ」などというキャッチになるかと思います

この記事のタイトルにもなっている「キラキラしてないInstagram」に比べれば随分と幅が狭く感じますので、これを見て「これだとターゲットを絞りすぎてターゲット外の人は使わないんじゃないの？」と思うかもしれませんが、意外とそうでもありません

例えば「新橋のサラリーマンがランチに食べられるめちゃくちゃ美味しいラーメン屋20専」というタイトルを見た時に「今土曜日で銀座で買い物をしていて、夕方から美味しいごはんを食べたいOL」は「自分はターゲットではないな……」と離脱するでしょうか？条件だけ見れば全く当てはまっていませんが意外と人の心は許容範囲が広いので「ラーメン」くらいしか共通点がなくても勝手に心のなかで補完して気にせず読んでくれます

こういうのは「心に刺さる文章の書き方」みたいな本がすごい数出ているのでそういうのを参考にすれば良いと思いますが、大事なのはふわっとした大きな範囲ではなく、ある程度絞った範囲を示したほうがやりやすいということです

2.過疎に見えるとユーザーは帰ってしまう

これも実感あると思いますがじゃあ過疎に見えるって具体的には？と言うと難しいと思います

これまた非常に多くのポイントがあるのですがケースバイケースなのでとりあえず誰でもできる部分で一つだけ説明するなら

最初から大手の真似（データ数が多い前提）をしてデザインを組んではいけない

これも覚えておいてください。例えば

出典：ツイフィール http://twpf.jp/

こちら大手のプロフィールサイトのトップページですが、これを真似してサイトを作ったとするとこうなると思います

このようにデータ数が少ないのに大手のようなデザインを採用したり、リスト形式のデザインを使ってしまうとスカスカに感じてどうしても過疎だという印象を与えてしまいます

それだったらいっそ潔く

こういった形にしてしまった方が良いです、サンプルに使っている画像も自分でデータを埋めたので作った段階では投稿数はサイト全体で6件程度でした

確かにこのデザインだとサイト内のユーザー数などは検討がつきませんが1000人以下くらいの間は数字を出すほうがデメリットが大きいので色々不詳なくらいのほうがちょうどいいのです

スタート段階において少ない数字……例えば「サイト利用者12人！」などを素直に表示してしまうと「過疎っている」という印象を与えてしまい「面白そう」と思った人でも登録せずに帰ってしまいます

データ数が増えてきたらまた変更するのは良いとして、最初は数字を出さない事を意識した方がいいでしょう

URLに注意する

余談ですが、投稿した時に「/item/6」とかユーザーページを「/user/4」とか数字を出すと数が直結するのでTwitterのようにユーザーIDを使ったり、qiitaのように記事IDをハッシュにする事でこの不詳感を高めて過疎感をなくすことが可能です

3.やることがないとユーザーは帰ってしまう

上に書いてあるような作業を行っていくことで「人が来ても登録してくれない」という部分は少しずつ解消できると思います

そうなると次はユーザーが思ったように投稿してくれないが悩みになると思いますがこれも改善することが出来ます

純粋にやることがない

例えば自作ゲーム投稿サイトなどの場合はそんなにポンポン投稿できるわけではないので一度投稿すると「もうやることがない」となります

レビュー機能をつけるなり、イイねボタンを設置するなり、ブログのように新着記事を投稿できるようにするなり何かしら「やること」を用意してあげることでサイトの投稿が増えていきます

精神的にやりづらい

例えば「何を投稿すればいいかわからない」はよくある問題なのでCulonではこのように「よく使われるタグ」を投稿画面に設置しています

最初の段階から20個ほど並べておくことで2番目に登録した人であっても「あ、こんなのを投稿すればいいのか」とわかりやすい指標になりますし既に投稿されている（わけではないけど、そういう風に見える）安心感から投稿のハードルが下がります

他にも「人が少なそうだから投稿したら浮きそう」などもよくある問題ですがその点に関してもCulonでは「検索や新着一覧を設置しない」という対応を取っています

あるのはタグ検索のみですし、それも件数が出るわけではないのでハードルはかなり低くなります

2で述べたように登録したらトップに表示されるような仕組みだとどうしても人が少ないうちは晒し上げのようになってしまい心理ハードルが上がるのでいっそ表示しないくらいの潔さが必要です

また、将来的に設置したい場合は「新着一覧ページは現在開発中により、12月上旬に公開予定」としておけば極初期の数が少なすぎて投稿しづらいという部分はクリアできます

100件ほどデータが投稿されてしまえばそういったハードルを感じる事はかなり低くなるので本当に最初の段階だけ使う手法としてはとても使いやすいかと思います

4.（現実的）居場所が無いとユーザーは帰ってしまう

マイページ、タイムライン、なんでも良いのですが「とりあえず開いて放置してたまに更新する画面」がなければユーザーは居着いてくれません

何かを投稿する系のサービスを作る場合「投稿されたページや検索は力を入れている」けれど、マイページのようなものが無かったり殆ど情報を置くだけだったりする場合をよく見かけます

Twitterが流行ったことでタイムラインを用意するサービスは多くなりましたが、ニコニコ動画などはタイムラインがずっとありませんでしたYoutubeなどのように「主に検索から辿り着く」場合は気にしなくて良いのですが新興SNSであれば検索から人は来ないので重要になります

（もちろんサイトによりますが）ユーザーの行動の流れとして居場所となる基幹ページを用意してあげることでユーザーがサイトに訪れやすくなりこれもまた「帰る人を減らす」行為になることは大切なポイントです

Culonの場合はインスタグラムと同じようにフォローした人のタイムラインが見れます、これに関しては特に何も説明することはありませんが

上の項目で書いたように「たとえフォロワーに更新がなくても何かしら見に来る要素」を設置するという事で何かしらの変化をつけてやるような仕組みがあると良いかもしれません

例えばサイト内の新着投稿を帯で流すとか、Twitterのようにフォロワーのイイねを流すとか（ウザいかどうかは置いといて）

再訪のきっかけを作る

これは非常に色々な所で語られていると思うのですが再訪のきっかけを作ってやることは非常に大切です

例えばイイねされたら通知を送るとか、フォローされたら通知を送るとか、何かしら「サイトを見に行きたい」と思わせるきっかけが必要です

こういった面ではpush通知できるスマートフォンアプリが最強なので出来るだけ早い段階でスマートフォンアプリを作って公開してしまうことがユーザーのリピーター化には大切だと思っています

と言いつつ、僕は今までweb重視でアプリを殆ど作ってきませんでした。Culonではそれを反省して早い段階でアプリを公開したいと思っています:)

5.（心理的）居場所が無いとユーザーは帰ってしまう

最後にメンタル的な話ですが

既に出来上がっている輪には入りづらい

身内感で盛り上がっているチャットルームとか、掲示板とか、コメント欄一つとっても仲良さそうな人同士で話してたら入って行きづらいですよね

これはサイトの設計段階で考えておかないといけない問題で、出来る限り「輪を小さくする」のが大切だと思います

例えば20人いないと成立しないサービスであればその20人はお互いが居なくなると困るので結束します

だから新しく来た人からは排他的に見えるし入りづらいということになります

それが3人や5人、できれば1人で完結するような仕組みであればあぶれている人はいくらでも見つかりますし、なんならTwitter等で仲のいい人を一人誘って連れてくるだけで良いので充分楽しむことが出来ます

「サイト内で出会って交流する」ではなく「もともと出来ている交友関係をサイト上に持ってきてもらう」方が100倍楽だし手間も少ないのでそういう設計を目指しましょう

Culonの場合は宣伝ツイートにその旨を記載しており「仲のいいフォロワーさんを5人誘えば楽しめるサービスです」と書いています

ツイッターへ同時投稿機能なども設置していますし、（今実装中ですが）未ログインユーザーの場合は以下のようなテキストを出す予定です

と、ここまで読んでいてわかると思いますが「どれも大手サービスは普通にやっていること」だったりします

メンタルについての項目は話が長くなるので割愛しますがとりあえず「大手では何百人もの人間が考えて結果を出すために取り組んでいる」わけですし全てそのままとは行きませんが参考にできる部分はとても多いのでこの記事を読んだ後はぜひ色んなサービスを確認してみてください

まとめ

最初に書きましたが細かく書いていたらものすごい文量になったのでかなり削りました

消したら文章の流れが変な感じになってしまいましたが既に6時間かかってるのでこのあたりで諦めます

サービスによってケースバイケースですが出来るだけユーザー参加型のSNSであれば共通して使えるようなものに絞ったつもりです

大事なのは

その一つ一つに理由はある？

というところで、「なんとなくこうしました」が一番良くないパターンです。「開発速度重視だからシンプルにしました」でもいいし「サイトのテキスト量が少ないのでシンプルにしました」でもいいし、そのデザイン、仕様にした理由を自分の中で持っていると同じものを作っても全く違うものが出来上がっていきます

僕自身も完全完璧に出来ているわけではありませんが、少しでも気をつけていくだけで違うのかなと思っています

読んでいただきありがとうございました:)

【前編】「怖くないキラキラしてないInstagram」を目指して写真投稿SNS「Culon」を作ってみるまでの流れとユーザー獲得戦略について

どうもせせりです:)

「どうやって人を集めるの？」「実際に出来上がる流れを教えてほしい」「モチベーションの維持は？」というコメントを沢山貰ったのですが、作るサービスの種類や性質によってケースバイケースなので実際に一つサービスを作りそれを使って説明しようと思い立ちました

まず、僕がサービスを作る時にどういった流れで作り上げるのか6項目で説明しながら細かいところを解説し

次の記事で実際にどういうところに気をつけているのか書きます

1.サービスのアイデアを固めて「一言でイメージを説明する」

突然ですがみなさんInstagram好きですか？僕は好きです！ただ……

• Instagramの仕組みは面白い
• でも自撮りとかアップするのには抵抗があってご飯写真をひたすらアップするだけ or 見るだけ
• キラキラしてないものを投稿しづらい
• ゲームのスコアとか上手く行った動画とかサブカル系のものもアップしたい
• ネット上の友達とかとも使いたい

こういう風に思っていて、もしそういうInstagramがあったら気兼ねなく使えるなと

既にTwitterでやられていることなので、おそらく「Twitterで良くない？」と思う方が多いと思います。その意見はもっともなのですがInstagramの楽しさというのはズラッと並んだ写真にあり、あの気持ちよさやワクワク感はどうしても「写真だけ（+動画）」に特化しないと生み出せないと感じています

じゃあこういった事を解決したInstagramを作ればウケるのでは？

……と、こうやって上がってきたふわっとしたアイデアですが、このままでは他の人に説明できないためイメージを一言で共有できる「イラスト」もしくは「テーマ/スローガン」のようなものを用意します

キラキラしてない人向けのInstagram / Twitter寄りのInstagram

今回つけるとしたらこういうテーマになるでしょう、この記事タイトルでは「怖くないキラキラしてないInstagram」と書いていますがイメージを共有できるのであればなんでも良いと思います

テーマは機能、デザインの指標になるだけでなく、開発中の「やっぱり当たらない気がする」というネガティブ感情を減らす事にもなりますし、他の人に話した時にアドバイスが貰いやすいので確実に一番最初に決めておきましょう

あと、全く新規のサービスでない場合は実際のサービス名を入れることでお互いに誤解がなくなるのでサイト上に載せるかはともかく頭の中では実際のサービス名を入れた方が良いです

※イメージって意外とあてにならない

「天然で頭がいいし美人、活発でグイグイ来るタイプの女の子だけど基本的にはクール」よりも「涼宮ハルヒをクールにした感じ」の方が100倍伝わるのと一緒ですね

2.サイトに必要な機能を考える

今回はInstagramという参考元があるのでそれを参考に機能を考えますが……その前に覚えておいて欲しいことがあります

※真似することから逃げない

みんな真似をすることが不安なのか、どうにか真似と思われないようにサービスに独自色をつけようと頑張っているイメージがあります

「●●のパクリじゃん」と言われるのが不安なんだと思います

でも素人の考える独自色って田舎のラーメン屋のオリジナルラーメンくらい微妙なんです、色物なんです

mixiやfacebookがmyspaceのインスパイアであるように、世界は過去の偉大なシステムを真似て発展させることで進化してきました

Twitterなんて何千人が同じシステムを作っているかわかりません（最近流行りのMASTODONもそうですよね）

まずは全く同じサービスを作り、そこから＋αもしくは－αをどうするか考えるようにしましょう

大事なのは「誤認させないこと」と「本物ぶらないこと」でありシステムを真似するのは良いがInstagramの派生サービスのように振る舞うのはアウトでそこだけは線引しなければなりません

今回であれば「リア充向け、Facebook（実名）文化」という部分を変更して「それ以外向け、Twitter（匿名）文化」という風に世界観を変えます

世界観が変われば当然デザインも変わってくるのでその程度でも充分独自色はでます

想定するページの機能とURLを出来るだけ書き出す

というわけで、今回必要な機能を実際にInstagramを使ってみて書き出しましょう

参考までにInstagramのフッターを貼っておきますがこれがメイン機能です。URLをここで決めておけば後で悩まずに済みますので出来るだけ決めましょう（ちなみにRESTfulは重視してません）

◆メイン

• / タイムライン
• /search 検索
  • /search/category/:category
  • /search/tag/:tag
  • /search/keyword/:keyword
  • /search/user/:name
• /upload 投稿
• /alerts 通知
• /user/:id ユーザーページ
  • /user/:id/follow
  • /user/:id/follower
  • /user/:id/favorite

◆その他

• /access ログイン/ログアウト
• /settings 設定

◆ドキュメント

• /terms 利用規約
• /privacy プライバシーポリシー

◆それ以外の機能

• ユーザーをフォローできる
• 写真には☆favoriteできる
• 写真にはコメントできる
• Twitterでログインできる
• イイね、コメントされた時の通知はメールで送る
• プロフィールを編集できる

これくらいで良いと思います

完全にやろうと思うと疲れるので出来るだけで十分です

3.ワイヤーフレームを作る

色々なサイトを見て回りどういうサービスにするか考えます

大事なのはいきなり全て実装しようと思わず「出来る限りシンプルに」することです。サービスの特徴を一言で表した時に「写真（+ 動画）を共有するSNS」となるのでその機能を中心にしてそれ以外の機能は流行ってから実装すればいいという気持ちでとにかく見通しを良くしましょう

以下が完成したフレームワークです

見ての通り作ったのはメイン機能だけです、どうせ作っている間に色々気になって変わるのでざっくりで構いませんが

全く完成形がイメージ出来ていないのに作り出すのだけはNGです、よく「とりあえず仮置きしてあとでデザイン乗せれば良いや」という人が居ますが個人開発の場合それは非常に悪手です

完成形が見えていないとページごとにデザインがブレッブレになるのでTwitterBootstrapなどを使っていても全体的に「素人感」がすごく出ます

個人サービスのデザインは本当に「最低限不快にならないレベル」ならなんでもいいと思っていますがブレるとそれにひっかかります

4.ドメインを決めて必要なサイトに登録する

サービスを作る前にドメインを決めて取りましょう。やる気の維持に必須です

今回は「culon.net」というドメインにしました、意味はとくにありません響きの可愛さです

ドメインと機能が決まれば必要な外部サイトが決まるので作業のペースを落とさないように予め登録しておきます

• メール送信 sendgrid
• Twitterログイン twitter
• 画像などのデータ　Amazon S3
• サーバー類　Conoha
• パフォーマンス監視　Newrelic
• アクセス解析 Google Analytics

本番のサーバーの用意もこの段階でしてしまい出来る限り早くURLでアクセスできるようにする

他人に見せたり、外出時のちょっとした時間にテストしたり、モチベーションの維持だったり

とにかくすぐにサーバーにアクセスできるようにしています

「早く作らないとお金が無駄にかかる……」と言うのも自分の追い込みになります:)

5.作る

今回技術的な話には触れませんがRails+riot.jsを使って作ります

6.公開のタイミング

サイトの公開ですが僕はドメインをとった瞬間にツイートしてしまいます

まだ繋がらなくても、バグがあってもいいのでとにかく公開してしまいます

「完成度を高めてから見せたい」という気持ちはわかりますがそう考え出すときりがないですし自分がどれだけ良いものだと思っていてもユーザーさんから100倍良いアイデアがポロっともたらされたりします

普段はおおよそ1ヶ月程度を「αテスト期間」と称して公開しながら開発を行っています

不完全なサイトを垂れ流しているのはメンタルをゴリゴリ削るので追い込みにもなりますし、サイトを気に入ってくれた人や試しに使ってくれた人が少しでもいるだけでやる気がぐんぐん出てきます

まとめ

webサービスが出来上がるまではこんな感じの流れです

「事前準備がどれだけできるか」が非常に大切であり「作りながら考えれば良いや」はエターなる（一生出来ない）可能性が非常に高くなります

サービスができるまでの流れはわかったと思いますので次の記事では「どうやってユーザーを獲得するか？」について考えていることを書く予定です

土曜日くらいに公開するつもりなのでよかったら読んで下さい:)