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