Help us understand the problem. What is going on with this article?

非デザイナーエンジニアが一人で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

okappy
アトラエ取締役CTO兼yenta開発責任者やってます。 エンジニアの横の繋がりを大事にしたいので、何かあればfacebookで気軽にメッセージください。Qiitaの投稿に関することとかしないこととか、なんでもOKです。 http://www.facebook.com/toshi.oka.831
https://yenta.talentbase.io/yenta/?cn=qiita
atrae
People Techカンパニーとして、転職サイトGreen, ビジネスマッチングアプリyenta, 組織改善プラットフォームwevoxなどのサービスを運営。全ての社員が誇りを持てる組織と事業の創造にこだわり、関わる人々がファンとして応援したくなるような魅力ある会社であり続けることを目指しています。
http://atrae.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした