目指せ工数削減! オンラインサービスを使ってWEB制作を効率化しよう!

Pocket
LINEで送る

もちろん勉強も大事だけど、効率良くパパッと構築できるスキルも必要。というか要領よくやって工数を削減して、浮いた時間で勉強しよう!
世の中には便利は無料オンラインサービスが幾多もあるのです。あるのならば活用しよう!

Mergely – Diff online, merge documents

差分チェックツール


オンラインツールでもWinMargeみたいな差分チェクできたらいいですよね。WinMargeはMac版は無いし。
このサイトは使い勝手もよく、パパッと差分チェックできます。WinMargeと違って、文字単位での差分は拾えませんが、行単位で差分がある箇所が明示されます。
これでこっそり原稿が差し変わってても変更箇所を見つけられるね!!

SassMeister

Sacc→CSS変換ツール


他のコーダーが突然Sassを使ってきたり、渡されたソースがSassだったりしたときに、CSSで作業を進行する場合どうしましょう?
使い方は大体前述のMergelyを同じで、このサイトの左側に変換したSassをペーストすると、右側にCSSに変換されて表示されます。

Remove Image Background

画像切り抜きツール


こちらは画像編集のオンラインサービス。なんと簡単に写真の背景を切り抜けるのです。
ちょっくら自分のイラストで試してみました。画像を選択してちょっと待つだけで……、

……白目とTシャツも切り抜かれてしまいました。
が!Editボタンから自分でもっと切り抜きたい箇所、切り抜きたくない箇所を調整できる!!こんなに優秀で簡単に操作できるとは思ってなかったのでビックリ!
(下記は右上の鉛筆ボタンを選んで切り抜きたくない箇所を塗り塗りしている途中です。反対に切り抜きたい箇所は消しゴムボタンを選んで消し消しするだけです)

Photoshopも進化してるし、こんな無料のオンラインサービスも登場してるし、もう有料切り抜きサービス各社の出番無いんじゃ……と人ごとながら心配になります。

Flexy Boxes

Flexboxジェネレーター


慣れるまで混乱しがちなFlexBoxの配置ですが、ポチポチッとするだけで色々試すことができます。
もちろんジェネレーターでCSS(ベンダープレフィックス付き!)書き出しも有り。無くてもいいコードも丁寧に付いてきますが、そこは勉強して削りましょう〜!

Devices | Facebook Design

PC・タブレット・スマホ端末の無料モック


デザイン提出やWEBサービス系のLPデザインでPC・スマホ・タブレットのモックが使いたいときがありますよね。ストックフォトを探したり、無料素材を探したり。でもちょっと機種が古かったり、テイストがちょっと違ったり……と探すだけで意外と時間が潰れちゃう。
そんなときはこのサイト。Facebookでまさかモックを配布してるとは。しかも無料!しかも現行機種がほとんど揃ってる圧倒的物量!!

見てください、この量。

SchemeColor.com

配色色見本サイト


数多くある配色見本サイトですが、私的にここが一番利用しやすいです。

有名企業の配色パターンや有名キャラクターの配色パターンなどクスッとなるカラーパターンも混ぜつつも、色味ごとに絞れたり、詳細ページも使い勝手がいいです。

GradPad

グラデーションジェネレーター


グラデーションのジェネレーター。使用する色を設定し、角度や位置を直感的に調整した後はヘッダーメニューの「Get CSS for this Gradient」からCSSを吐き出してくれます。直感的に角度や色、位置を調整できるのがいいですね。
使いたい色がはっきりしてないときはgalleryから気に入ったグラデーションを選択して調整していくことができます。

icooon-mono

アイコン素材ダウンロードサイト


日本語検索できるのがうれしいフリー素材アイコン集サイトpart.1
皆さんご存知、「icooon-mono」! テイストが揃ったフリー素材のアイコンが多数取り揃えられています。ダウンロードもPNG、JPG、SVGと選べますし、サイズだけではなく色まで選択し調整できるのは細かい気配りですね。
日本のサービスなので、シチュエーション的に違和感が無いのもナイス。

ICON BOX

商用無料のアイコン素材集


日本語検索できるのがうれしいフリー素材アイコン集サイトpart.2
統一感のあるシュッとしたデザインのラインアイコンが揃っています。PNGとSVGとダウンロード形式を選べるので、編集も可能。
サイトのUIデザインも気持ちが良いですね。

OGPチェックブックマークレット

OGPチェックツール


これはオンラインサービスではなくブックマークレットになります。

ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである[注釈 1]。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。

このOGPチェックブックマークレットはJavascriptを使用したOGPのチェッカーです。詳しい解説は株式会社シナップさんの記事を読んでいただきたいのですが、ここではChromeでブックマークに追加する方法だけ解説します。

ブックマークレットをブックマークに追加する方法

上記サイトの中ほどのリンクを右クリックします。

「リンクのアドレスをコピー」を選択するとJavaScriptのコードがコピーできます。ブラウザの右上にある「その他のブックマーク」を右クリックで開きます。

厳密にはページじゃないのですが「ページを追加」を選択し、

開いた「ブックマークに編集」ウインドウのURLに先程コピーしたリンクを貼り付けます。
名前と保存場所は分かりやすいものにしてください。

Google Chromeの場合は、ブックマークバーを表示させたあと、リンクをドラッグしてブックマークバーに移動させるだけで追加できます。なんて簡単……!

あとは、OGPのチェックをしたいページを開いて、ブックマークから先程追加したブックマークを選ぶだけです。
ここでは私のブログをチェックしてみます。
このようにウインドウが開いて、チェックした内容が表示されます。

うん、何さ、そのOGPイメージ。ちゃんとしよう……。
というように簡単にチェックできるようになります。

html-highlighter

Hタグチェッカー


こちらもJavaScriptを使用したHタグチェッカーです。
ブックマークへの追加の仕方は上記「ブックマークレットをブックマークに追加する方法」をご参照ください。

このブログ記事をチェックしてみます。

Hタグの箇所にビビッドな背景色が付き、見出しテキストの後ろに「|h1」「|h2」などと表示されるようになります。

量産コーディングを任されたときなど、サイトの構造を理解するときや、Hタグの振り付けが間違ってないか確認するときに便利です。

Pocket
LINEで送る

back to top