HOMEPAGE TIPS BLOG

ホームページ制作TOP > Web技術Tips > WEB制作に役立つかもしれないWEBサービス 10選
[期間限定] 標準クオリティープラン  WEBサイト制作20%OFF
失敗しないWeb制作会社の選び方
面白いサービス

WEB制作に役立つかもしれないWEBサービス 10選

面白いサービス2016.12.16

どうもこんにちは。
今回は、WEB制作に使い道があるかもしれないWEBサービスを紹介したいと思います。

順不同です。

人工知能が自動作曲『Jukedeck』

Jukedeck – Create unique, royalty-free soundtracks for your videos.

omoshiro-web-service-img09

人工知能が全自動で曲を作ってくれるサービスです。

ジャンル・曲の雰囲気・曲の長さを指定して [Create a track] ボタンを押して10秒くらい待つと曲が出来上がります。

まったく同じ条件で再度試しても違う曲が出来上がります。

曲の作成だけなら何度でも試すことが出来ますが、曲をダウンロードして商用で使うには有料のプランにしなければいけないようです。

料金

オプション名 料金

(1曲)

商用利用
INDIVIDUAL OR SMALL BUSINESS 無料 従業員数が10人未満の企業、もしくは非商用の場合。
使用箇所にJukedeckのクレジットを入れなければならない。
$0.99 従業員数が10人未満の企業、もしくは非商用の場合。
LARGE BUSINESS $21.99 10人位上の企業が商用はこのオプションを選択する。
COPYRIGHT $199.00 著作権を買い取る場合はこのオプションを選択する。

今見てるサイトのワイヤーフレーム作成『Wirify』

Wirify – The web as wireframes

omoshiro-web-service-img10

既存サイトのワイヤーフレームを表示して確認できるツールです。

使い方は、Wirifyのサイトの『Wirify by Volkside』というリンクをブックマークバーにドラッグします。

omoshiro-web-service-img16

そして、ワイヤーフレームを作りたいサイトでブックマーク内にある『Wirify by Volkside』をクリックします。

ワイヤーフレームの作成は無料でOKですが、データのエクスポートは有料です。(1データ $7.00)

優れたUIを集めた『Inspiration UI』

Inspiration UI – Find design inspiration from real live projects

omoshiro-web-service-img11

一見するとWEBサイトまとめ系のサイトですが、テーブルやエラーページなどWEBサイトを構成するUIごとにカテゴリでまとめてあります。

[All Patterns] からカテゴリ一覧を見れるので『404 error』を表示してみました。

カテゴリは他にこんなものがあります。

404 error about accordion
animation badge blockquot
breadcrumb button calendar
call to action cards career
carousel chooser clients
comments contact dropdown
events faqs features
filters footer form
gallery header hover
legal lists loading
login map media player
navigation notification pagination
popup post pricing
profile projects search
share shopping cart sidebar
sign up slider statistics
subscribe table tabs
tags team testimonials
timelines tooltips typography
validation wizard

まだストックは少ないようですが、これから数が増えてきたら面白くなりそうなサイトです。

画像を有名画家風に加工『deepart.io』

deepart.io – become a digital artist

omoshiro-web-service-img12

アップロードした画像を有名画家風に加工してくれます。

使い方

ヘッダーメニューの [CREATE YOUR OWN] で画像作成ページに行きます。

[PHOTO]パネルで画像をアップロードして、[STYLE]パネルでベースとなるスタイルを選択します。

omoshiro-web-service-img14

完成画像はメールで届くので、メールアドレスを入力して [Submit] ボタンをクリックします。

数分~数十分待つと完成画像が添付されたメールが届きます。

omoshiro-web-service-img15

このように驚きの精度で加工してくれます。

加工を待ちたくない場合

また、高速で加工ができるターボ版もあります。

数秒で加工が終わります。

料金

オプション名 値段 画像サイズ Deepartロゴ
STANDARD 無料 0.25 million pixels (500 × 500) あり
HD 19ユーロ 1.7 million pixels (1300 × 1300) なし
ULTRA HD 59ユーロ 9 million pixels (3000 × 3000) なし

ちなみに…

Googleもこの人工知能を使った画像加工、Googleが使っている言葉を借りると『A Learned Representation For Artistic Style』分野の開発をしているようです。

英語なので内容はよく分かりませんでしたが、現時点で動画を再生しながらリアルタイムにタッチを変える、みたいなことをしてるので、これは今後すごいことになりそうです。

omoshiro-web-service-img26

記事はこちら

商品画像の切り抜きを自動化『ZenFotomatic』

画像の切り抜き、白抜き、白背景画像の自動加工ツールなら ZenFotomatic

omoshiro-web-service-img17

画像の切り抜き作業ってWEBに関わる人ならだいたい一度はやったことがありますよね。

ZenFotomatic』というサービスは、画像の切り抜きを自動でやってくれます。

使い方

まずアカウント登録をします。

そしてトップイメージの『今すぐ無料で試す』というボタンなどをクリックすると編集画面になるので、切り抜きたい画像をドラッグ&ドロップします。

今回はたまたま手元にあったタンブラーの写真を切り抜きます。

境界線ははっきりしたほうがいいので、背景が白になるように撮影しました。

omoshiro-web-service-img02

omoshiro-web-service-img04

[加工] ボタンをクリックします。

omoshiro-web-service-img03

こんな感じで切り抜かれます。

ダウンロードは [加工]ボタンの隣の [ダウンロード]ボタンをクリックします。

形式はjpgとpngから選べます。

omoshiro-web-service-img18

ダウンロードした画像はこんな感じです。

品質は及第点ではないでしょうか。

料金

トライアル版では画像10枚まで無料でダウンロードできます。

それ以降は購入したZenポイントを使ってのダウンロードとなります。

Zenポイントは1ポイントあたり\10~\25で購入します。

画像によくわからないエフェクトをつける『Mosh』

Mosh

omoshiro-web-service-img05

アップロードした画像を、古いアナログテレビような『グリッチ』フィルターで加工できるWEBアプリケーションです。

サイドメニューから指定できるほか、下の [Mosh]ボタンでランダムに効果が変化します。

[Mosh]ボタンの右側の [Snap]ボタンもしくは [Record]ボタンでキャプチャーの保存ができます。

omoshiro-web-service-img19

同じ作者の作品のRutt-Etra-Izerも面白くておすすめです。

Squarespace Logo — Squarespace Logo

omoshiro-web-service-img06

ロゴ + 名前の簡単なロゴマークを作れるジェネレータで、編集ソフトを持っていなくても簡単に作れます。

ロゴは、検索した候補から選ぶか、自分でSVGデータを用意するか選びます。

本当に何も思いつかないときは [Ctrl] + [.] を押すとランダムに配置されるので、一期一会と思って決めても良いのではないでしょうか。

左下の [SAVE LOGO] をクリックすると、2種類の方法でロゴのダウンロードが出来ます。

サンプル

omoshiro-web-service-img25

このようにクレジットが入ります。

料金

もともとこのサービスはSquarespaceというCMSで使うことを想定しているので、Squarespaceで使用する場合は無料です。

名称 値段 商用利用
DOWNLOAD LOW RES 無料 不可
DOWNLOAD HIGH RES $10

ただし、Squarespaceで使用するなら無料

可能

白黒画像を復元する『Automatic Image Colorization』

Automatic Image Colorization・白黒画像の自動色付け

元画像 白黒に加工してcolorizationで復元した画像
omoshiro-web-service-img24 omoshiro-web-service-img21

グレースケール画像をカラー画像に復元してくれます。

人工知能がディープラーニングを使って色を推定して着色しているそうです。

ですが、うまく復元できませんでした。

再チャレンジ

制作者の話だと、ライカで撮影したモノクロ写真だとうまくいくそうなので、もう一度試してみます。

白黒画像 COLORIZATIONで復元した画像
omoshiro-web-service-img22 omoshiro-web-service-img23

うまくいきました。

確かにたこ焼きのクオリティとはだいぶ差があります。

商用利用

非営利目的のみに使用可能です。

ドメインからメールアドレスを探し出す『Email Hunter』

Find email addresses in seconds • Hunter (Email Hunter)

omoshiro-web-service-img01

入力したドメインのメールアドレスを探し出すWEBサービスです。

基本的に企業サイトのみが対象なので、すべてのドメインの検索結果がでるわけではないようです。

また、企業サイトであっても引っかかるドメインと引っかからないドメインがあるようで、DOEのドメインでは検索できませんでした。

画像は『TechCrunch.com』で検索した結果ですが、メールアドレスにモヤがかっています。

ログインするとモヤが消えます。

また、Email Hunterにはchrome拡張機能版もあります。

omoshiro-web-service-img07

ミニマルなテキストエディター『Writebox』

Writebox

omoshiro-web-service-img08

画像のような、ブラウザ上で動く限りなくシンプルなテキストエディターです。

マークダウン記法にも対応しているので、ブログのライティングなど、一気にテキストを書き上げるとき役に立ちます。

全画面表示にすれば集中して記事の執筆ができるのではないでしょうか。

ほかには以下の特徴があります。

  • Dropbox、Google Driveと連携可能、それに伴って履歴の復元などの機能
  • 行数、単語数、文字数のカウント
  • エディターの背景色や文字色の変更
  • 使用フォントの変更
  • マークダウン記法を補完するショートカット

まとめ

以上、面白いWEBサービスを10個紹介しました。

どれもユニークなものばかりなので、なにかしら使い道を見つけてくれると嬉しいです。

良いサービスを見つけるには、インターネットでも世の中でもそうですが、やはり使ってみるしかないと思いました。

あと今回の記事では、人工知能のディープラーニングを使ったWEBサービスやアプリケーションが何度か出てきましたが、この分野は今後ますます盛んになっていく気がします。

PAGE TOP