非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選


***

非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。

まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、
重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。

__Reminderr：http://www.reminderr.me/__

要するに、私自身のPocketとかRSSがカオスになっているので、
その中で重要なものだけ教えてほしかったので、
自分で作っちゃえ！って思って作りました。

***

そのときに使った便利ツールたちをまとめておいたら便利そうだったので、
今回使ったもの＋αを全てまとめてみました。

紹介するツールたちを駆使すれば、
非デザイナー＆デザインセンス0の私が、
1週間程度でこれくらいのアプリをリリースできるので、
他のエンジニアにも便利なツールがいっぱいあると思います。


##Bootstrap系

__Bootstrap(最新：フラットデザイン)__
http://getbootstrap.com/

__Free Design Template__
http://startbootstrap.com/ (おすすめ)
http://www.templatemag.com/free-bootstrap-templates/
http://www.blacktie.co/

有料でもよければ、
https://wrapbootstrap.com/

__Material Design Lite（NEW）
http://www.getmdl.io/index.html
マテリアルデザイン版Bootstrapのようなフレームワーク

##CSSアニメーション
__Animate.css (おすすめ)__
http://daneden.github.io/animate.css/
軽量でめちゃくちゃ使いやすい！

##ロゴ作成
__Squarespace (おすすめ)__
http://www.squarespace.com/logo#

__LOGASTER__
https://www.logaster.com/

##いろんなHTMLパーツジェネレーター
__coveloping (おすすめ)__
http://coveloping.com/
Priceページとか、色々なパーツを簡単に生成できるツールが集まっている

__TeamPage.io__
http://www.teampage.io/
簡単にチームメンバーページが作れるツール

__FRAME__
http://frame.lab25.co.uk/
それっぽいトップページ生成

__UICloud__
http://ui-cloud.com/
UIの参考パーツを検索できるgoogleみたいなサービス


##画像サイズ圧縮
二つとも画質をほとんど落とさずにファイルサイズを半分以下くらいまで落としてくれる最強無料ツール

__JPEGmini (おすすめ)__
http://www.jpegmini.com/

__TinyPNG (おすすめ)__
https://tinypng.com/


##画像加工
__GIMP__
http://www.gimp.org/

__SeaShore(Mac)__
http://seashore.sourceforge.net/The_Seashore_Project/About.html


##Webサービス名ジェネレータ
__Dislexicon: The English Language Extender__
http://www.robobunny.com/cgi-bin/dislexicon
keyとなる英単語を入れると、それにまつわるイケテルサービス名を教えてくれる
Androidアプリも出てるので、気に入った名前を保存とかしておいてもいいかも

__Webサービスネーミングアイデアツール__
http://c.hrgrweb.com/naming/
DNSに登録されている英単語を繋ぎ合わせてサービス名っぽいものをランダムに表示してくれる
シンプルだけど地味に便利

##かっこいいフリー画像

__Free high-resolution photos.10 new photos every 10 days.__
https://unsplash.com/
検索とかはできないけど、めちゃくちゃクオリティの高い画像が使い放題！！

__MEDIUMのブログにいい感じのリストがある__
https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b

##かっこいいフリー動画
__背景動画に使えるクールな動画集(※しかも個人商用利用可)__
http://mazwai.com/#index
ちょ〜クールな動画がたくさん

__VIDE 背景画像をすぐに実装できるjQueryプラグイン__
https://github.com/VodkaBears/Vide#readme
マジで簡単！

##アイコン
__ICONFINDER__
https://www.iconfinder.com/

##SNSの顔写真素材ジェネレーター
__uiFaces__
http://uifaces.com/
SNSの顔写真を並べたいときとか、Demoで使いたいときに使えるサービス
APIもあるから結構使える！

##多言語対応
__Wovn.io__
http://wovn.io/
ソースコードに1行足すだけで、全てのページを多言語化できる！

##カラーパターン選定
__Adobe Kuler (高機能)__
https://kuler.adobe.com/create/color-wheel/

__HUE/360 (シンプル)__
http://hue360.herokuapp.com/

__Web Colour Data__
http://webcolourdata.com/
既存の有名Webサービスのカラーコード集

##サービス紹介動画
__Wideo__
http://www.wideo.co/
パワーポイントみたいなイメージで紹介動画を作れるサービス

##ソーシャルプラグイン
SNSのシェアボタンを簡単にまとめて生成できるツール

__AddThis__
http://www.addthis.com/

__忍者おまとめボタン__
http://www.ninja.co.jp/omatome/

##サーバー
__Heroku__
https://www.heroku.com/
言わずと知れた無料でも使えるクラウドサーバー
プロトタイプを作ったりするのには最高

__New Relic(Heroku:add-on)__
https://devcenter.heroku.com/articles/newrelic
すごい簡単＆無料でHerokuに導入できるサーバー監視ツール
これを入れておけば、サーバーの負荷の詳細やエラー通知などを教えてくれる

##メール配信
__SendGrid__
http://sendgrid.com/
Herokuのaddonで使うとより便利

##HTMLメール

BeeFree(一番おすすめ)
http://web-cre.info/beefree/
ドラッグ＆ドロップでHTMLメールを簡単に作る事が出来る。しかも無料！
よく使われるレイアウトは既にテンプレート化もされているので、テンプレート選んで、
パワポとかkeynoteとかの容量でHTMLメールをデザインして、あとはエクスポートした後にちょっとカスタマイズすればいい。
テストメールも簡単に配信できるます。

MailChimp
http://mailchimp.com/
HTMLメールを簡単に作れて、ステップメールの設定とかまでできてしまう神ツール

Zurb
http://zurb.com/ink/
レスポンシブ対応のHTMLメールを簡単に作れるテンプレートが充実
パーツごとのコーディング方法とかもドキュメントであるので便利

Antwort
http://internations.github.io/antwort/
自分でカスタマイズしたHTMLメールを作るときにはシンプルでいいと思うツール

##ファビコン系
__Favicon Generator__
http://favicon-generator.org/
画像をアップするとfavicon.icoを生成してくれる無料ツール


__Tinycon - ファビコンに数字のアラートを出せるjsライブラリ__
https://github.com/tommoor/tinycon
jsを読み込んで1行書くだけで、PCのファビコンに数字とか文字のアラートを出せるsmall js library
<br>
---

<br>

自分のメモとしても結構便利なので、是非うまく活用してみてください。

※他にもRails系便利ツールやHeroku系便利ツール、APIの使い方などの
技術よりのもありますが、今回は敢えて技術ではないツールをまとめてみました。
技術よりは、また今度まとめます！

ちなみに、技術よりのアジェンダはこんな感じです。

##Rails系
###サインアップ・サインイン管理系
__Devise__
https://github.com/plataformatec/devise

__facebookログイン__
https://github.com/plataformatec/devise/wiki/OmniAuth:-Overview

###非同期処理系
__DelayedJob__
https://devcenter.heroku.com/articles/delayed-job

__Redis&Resque__
https://devcenter.heroku.com/articles/queuing-ruby-resque

##Heroku系
###バッチ処理系
__Scheduler__
https://addons.heroku.com/scheduler

###メール系
__MailChimp__
https://devcenter.heroku.com/articles/mandrill

__SendGrid__
https://addons.heroku.com/sendgrid