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

Pocket
LINEで送る

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

Mergely – Diff online, merge documents

差分チェックツール


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

SassMeister

Sacc→CSS変換ツール


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

MDN Web Docs – 開発者による開発者のためのリソース。

コーダーにとっての最強の教科書

MDN Web Docs サイトは、ウェブサイトやプログレッシブウェブアプリのための HTML、CSS、API を含むオープンウェブ技術に関する情報を提供しています。また、Firefox 開発ツールのような Mozilla 製品に関する開発者向けドキュメントもあります。

とディスクリプションに書いてますが、その通り!
『backgroundをまとめて記述するのって、どうすんだっけ?』
『transitionの指定ってどうだっけ?』
なときも、このサイトがあれば疑問解消。
プロパティの解説から記述方法、各ブラウザでの互換性までまとまっています。

イージング関数チートシート

イージングのことならこのページ


各イージングの名称とグラフ、hoverでそれに合わせた動きが確認できます。

さらに、該当イージングのパネルをclickすることで詳細ページに移動して、グラデーション、サイズ、位置、透明の変化が確認できる優れもの。

Flexy Boxes

Flexboxジェネレーター


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

Favicon Generator. For real.

各デバイス、ブラウザ対応のfaviconを一括生成!

特に説明がいらないくらい、簡単に各faviconやコードを生成してくれます。
ほぼほぼ使わないものも生成してくれるので、そこは削りましょう。favicon.icoapple-touch-icon.pngandroid-chrome-256x256.pngの3種があれば十分だと思います。
その場合、headに記述するコードも以下の通りになります。

<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/android-chrome-256x256.png">

CSS三角形作成ツール

三角のCSSを掃き出してくれるジェネレーター


三角形をCSSで記述するときも毎回ググってましたが、このサイトがあればもうググらなくてもOK!(直接行く)
香港の人が作って日本語対応までしてくれてるのね。ありがとう!謝謝啦!
つい最近このページの存在を知ったんですが、もっと早く知ってればどんだけ工数削減できてたか。。

OGP確認:facebook、twitter、LINE、はてなのシェア時の画像・文章を表示 | ラッコツールズ

タイトル通り!各SNSでのOGPイメージの見え方を一括確認できるサイト

GradPad

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


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

Remove Image Background

画像切り抜きツール


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

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

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

Devices | Facebook Design

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


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

見てください、この量。

SchemeColor.com

配色色見本サイト


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

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

カラー Archive – コピック公式サイト(日本語)

イラスト制作時に使える色見本


イラスト制作時にはもうちょっとニュアンスのある色を選びたい。そんな時はコピックのカラー Archiveを参考にしちゃうという手も。
グレートーンのニュアンスだけで4通り、WEB系のカラーパレットでは選択肢の少ないグリーンもこんなにバリエーションがあります。
実際に紙に塗ったものをパレットにしているので、スポイトツールで色を拾うときは若干調整しましょう。

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