非デザイナーエンジニア(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

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

※他にも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