Ruby
CSS
Rails
Heroku
Bootstrap

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

More than 3 years have passed since last update.


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