##思いつきでWebアプリをつくる。
はじめまして、趣味でWebデザインとか、いろいろしてます。やひろと申します。Twitter : @Yahimotto
僕は趣味程度にプログラムとかのことをやってるので、情報はインプットすることばっかりでアウトプットすることはほっとんどなかったんですが、最近、Qiita上で中学生エンジニアとかの記事を見るようになってから、敷居が下がってきた感じがして、この記事を書くことにしてみました。
自分のやってることは全然最先端でも何でもないので、プログラミングをお仕事としてやっているという方からしたらクソみたいな記事だと思いますが、情報を自分から出すってことから自分の技能を高めていってみたいという思いが強くなったので、一度書いてみることにします。
##どんなアプリなのか。
サービス名 : CloudStudy
こちらから実際にお試しいただけます。
開発言語 : PHP(フレームワークなし)
運用環境 : 普通のレンタルサーバー
開発期間 : 20日ぐらい?
こだわったところ : デザイン、配色、見た目、猫
##サーバー構成
超ローコストで運営できてます。
月250円ぐらいでまかなえてるので、コレぐらいなら学生でも大丈夫ですね。
##なぜ作ったのか。
自分、実は先日まで受験生でした。そこで、塾へ通っていたわけですがそこで「英単語リストを作れ。」とタバコ臭い塾の先生が話されておりまして、極度のめんどくさがり屋の僕は思ったわけです。
「あ、コレ、プログラム組めば簡単になるんじゃね？」
受験生なのに全く受験に関係ない、プログラムに手を出してしまう、というなんとも常人ではしないようなことをし始めます。まあ、だいぶストレス溜まってたので、ここで発散するのもいいかなと思い、開発をはじめました。
一応、サービスを誰でも使用できるようにした段階で、ターゲットを「中高生」と定めました。そうすることで、サイトのデザインを絞りながら作成することができるからです。
##使ったソフト。
Dreamweaver CC
開発全部コレでやりました。「なんでこんなエディタ使うの？」って言う人もいると思いますが、まあ、自分がCreativeCloudにどっぷり浸かってるからですね。Adobeの沼は異常です。他のソフト買うのがめんどくさい。それ一言です。
GitもFTPも全部できるので、便利ですよね。他のエディタでももう普通なのかもしれないけど。
Illustrator CC
もちろん、ロゴのデザインもサイトのデザインも全部自分で作っているのでデザインはコレ一つでやりました。
自分、デザインとかロゴを作ったりするのが好きなんですよ。頭の中を再現できると本当に楽しい。ですが画力は0なので、シェイプとかで表せるコヤツは本当にいいです。
まあUI/UXデザインなら有名な奴ありますが、HTMLとCSSでサイトを作るときに、自分はサイトのデザインを紙とかに書いたりしません。開発フローについては以下で説明しますが全部独学なので参考にしないでください。
##使ったライブラリ
・Material Design for Bootstrap
フレームとかは自分で作るとめんどくさいので、基本のコヤツを使いました。
Materialのデザインはほぼほぼないに等しいですが、PCでみるとアニメーションが付いて見た目は良くなりました。
・Twitteroauth
ツイッターログイン用です。
初めて使ったとき、かんたんすぎて泣きそうになりました。
##【番外編】イかすデザインをつくるためには？
Webサイトを作る上で、デザインは絶対的に重要です。Webデザイナーでなくても、ここに気をつければいいよってことをちょっと書きます。
自分はデザインをガッチガチに固めてから制作するわけではないのですが、自分の中でいくつか決めていることがあるんですが、それをちょっとご紹介したいなと思います。
1. サービスのターゲットを決める
とりあえず、これがないと製作すら始まらないと思いますが、ターゲットを決めます。
ここさえしっかりしておけば、デザインで失敗することはないんじゃないのかな...?
2. 主体となる色を決める
1で決めたターゲットから連想できるのはどんな色ですか？
中高生であれば、明るい色。シニアであれば、落ち着いた色など、そのレベルの発想でいいです。
このサービスでは、ターゲットを「中高生」と定めているわけなので、当然暗めないろよりは明るめないろのほうが、目に留まる可能性は高まるわけです。ターゲットを決めてカラーリングをしましょう。
このサービスでは、明るい水色と決めました。
それと類似する色（薄かったり、濃かったり）を使って配色するとだいたい決まります。
または、その対になる色を使いましょう。カラーパレットを検索して使うのもいいかもしれません。
Adobe Color CC（ログインしなくても誰でも使えます）
3. ロゴは必ず「サービス名と絡める」
当サービスでは、「CloudStudy」という名前を使用していますが、コレはクラウドサービスを意味する「Cloud」「雲」と勉強を意味する「Study」からなっているわけです。そこで、「発想力がない」、「ロゴを最初からつくるなんて...」という人は、サービス名の要素を入れるだけで大丈夫です。
このロゴでは、「雲」と、勉強の要素を追加するために「三角定規」を入れています。
考え方はシンプルでいいです。
私が絶対におすすめしないのは、テキストロゴです。
今後そのロゴブランドを活かした活動をしたいなら、テキストロゴはハードルが高いです。なぜか。
センスがない人がテキストロゴをつくるとクソダサくなるからです。ファビコンやスマホ向けのアイコン作ろうとしても、テキストロゴだとムリがありますよね。**シンボルは必ず作ってください。**デザインがまとまり、ブランド力が付きます。
この記事の4章がめちゃ参考になるので、印象付けるロゴを作りたい方はこちらも見てみたらいかがでしょうか。
コスメレビューは「語彙力がない」ほうが良い。コスメアプリで「評論より感動」を重視する20代女子の話と、可愛くないアイコンは「まとめる」の隠された意味。
4. ワンポイントにグラデーションを使おう！
ちょっとした色の変化があると、見てて楽しいサイトになります。
WebGradientsというグラデーション専用のカラーパレットもあり、クリックひとつでCSSのコードをくれるとっても優秀なサイトなので、使ってみてはいかがでしょうか。
デザインでコレ以上話すと、本が1冊できそうな気がするので、やめておきます。
##開発フロー
開発フローとか言う立派なもんでもありませんが、さっき話したようにこのアプリは完全な思いつきのみでできている、しかも私はMySQLとかPHPの知識がほぼゼロの状態でした。しかも学校に通っているため時間が深夜しか取れない上、本当に時間がありません。だからプログラムの技術書やデザインの本を読んでいるなら時間があるなら自力でプログラムを書いてアプリを完成させようと考えました。（受験生ながら、やめようという考えはありませんでした笑）
私は技術書など到底買ったことありませんし、Adobeのソフトとかもそんな理論で使っていました。
そこで一番頼りになったサイトがここ、Qiitaでした。今の知識の70%ぐらいはここから何じゃないでしょうか。自分の経験から言ったら完全独学なんてそんな難しいことでもありません。
話めっちゃ脱線してしまったので開発フローについてお話しますね。
####2017年12月01日 : フォルダーを作成。
多分ここで現在の「英単語リスト」なるものの原型ができてました。
完全自分のためだけのサービスだったので当然ログイン機能もついていません。
（開発から3日目のスクリーンショット）
プログラミングを日頃やっている方ならこんなもんすぐ作れると思います。
当時の僕は、ここの「新規単語追加」をMySQLなしで作りました。
どうやったかって言うとPHPでTXTファイルにテーブルの欄のHTMLごと全部書き込んでそれをそのまま表示させるという荒業でした。(こっちのほうがMySQLより遥かにめんどい)
という感じで、今見返してみると3日でデザイン一応きれいに出来てるなーって自分で作っておいて思いますね。
もともと凝り性なのもあって、きれいに見えるまで作り変えちゃうんですよ。
そんなこんなで基本機能は開発できました。
その後、このアプリは自分だけで使うつもりだったのですが、自慢したくて友達に見せたところ、「自分も使いたい！」と言ってもらえたので、妙にやる気出ちゃって、ほぼ作り直す作業が始まります。
####作り変えたポイント
・MySQLでデータ管理
まあ、普通ですよね。
・Twitter連携でログイン可能に
気軽にログインしてもらうなら、絶対Twitterです。他のSNSもありますが絶対にツイッターのほうが利点が多いです。
それはなぜか。拡散までの動線をすべて確保できるからです。Googleアカウントでは拡散できる動線がありません。ターゲットとしている年齢層は中高生なので、圧倒的に使用されているツイッターがいいんじゃないかと思います。
インスタグラムはライブラリがなかったのでやめました。
・他の機能追加
やること（課題、宿題、買い物など）を管理するためのTodo機能をつけました。また、勉強時間を記録して、公開できる勉強タイマーなる機能をつけました。ネーミングセンスはゼロです。すいません。
・SNS向けに自分の記録を公開できるように。
このアプリは中高生から拡散されて広まっていってくれたらいいなあと思っているので、自分のページを公開できる機能をつけました。
こんな感じです。
自分的には、もう十分なところへきてしまったので開発は一旦ここでストップとしました。
使用していただければわかりますが、使用できるレベルに達することができました。
##このサービスの問題点
このサービスを日数としては3ヶ月運用したのですが、いくつか問題点が出てきました。
・ユーザー収集がうまくいかない
サービスの性質上、学生をターゲットにしているのですが、うまくマーケティングができません。
お金もない上で、広告も出せないとなると、ユーザーの口コミが主体となってくれるのが理想です。ですが利用者の統計を見てみても、サービスを継続して使っていただくことができていません。コレはWebサービスならではの悩みです。
アプリであれば、ホーム画面という毎日見る部屋においていただけるので、思いついたら使っていただけると思うのですが、それができてないので、今後このような勉強を絡めたサービスを発展させていくには**「アプリ化」**が絶対に必要だなと思います…。
・Webサービスを完全に1人で動かすのは難しい。
マーケティングも含めたサービスの運営は一人でできたもんじゃありません。
SNSの運営と全部やろうとすると、ムリです。少なくとも自分の性格ではムリでした。
ということで、SNS担当の必要性がとってもわかった気がします。（バーチャルユーチューバーの戦略は凄い！）
##まとめ
自分はPHPとMySQLの知識がほぼゼロの時点から初めたのですが、なんとなくこのアプリを作ったことで、本当に前とは違う場所に行けたきがします。本当に新しく知ることが豊富で楽しく作業することができました。あと、このアプリ、なんととある賞を受賞することができました！😆
ということで、学生がどこまで本気になれば、ウェブアプリをつくる事ができるのか、という個人的な実験でもありましたが、案外気合があれば何でもできます。たとえ中学生でも。
##最近作ったアニメ情報サイト
完全自動で更新するウェブサイトです。
アニメデイズ!
