creatersnest59

【Webデザイナー向け】あまり知られてないけど超便利なWebサービスまとめ



こんちには、YasuhiroYamamotoです。

Webデザインに役立つ便利なアプリケーションはたくさんありますが、
ダウンロードやインストール、毎回立ち上げたり…というのは、
意外と煩わしいものですよね。

そんな方にオススメなのが、
インストール不要でブラウザ上から利用ができるWebサイトです。

今回はその中でも、あまり知られてはいないけれど、
Webデザインにとても役立つ便利なWebサイトを厳選してご紹介します。

1.TinyPNG/TinyJPG 〜画像サイズ(容量)圧縮〜

TinyPNG

TinyPNGは、PNGファイルをドラッグ&ドロップするだけで、
目立つ画質の劣化も無く、70〜80%以上の容量を圧縮できるサイトです。
また、会員登録も不要です。

画像のサイズはWebサイトの表示速度にも関わりますので、
大きな画質劣化もなく容量だけを手軽に圧縮できる事から非常に重宝できます。
なお、PNGファイルのみならず、JPEG用のTinyJPGも用意されています。

ドラッグ&ドロップだけで簡単に70%以上圧縮!

TinyPNG2

beaf
Webデザインにおいては画像を多用する場面も多いことから、
サイトの容量節約・高速化のどちらの観点でもオススメできるサイトです。

TinyPNG – https://tinypng.com
TinyJPG  – https://tinyjpg.com

 

2.browserling 〜ブラウザ毎の表示をチェック〜

browserling

Webサイトを閲覧するのに、
どのユーザーも同じブラウザを利用するとは限りません。

そのため、サイトのデザインを行ううえで、どんなブラウザでサイトを閲覧しても、
同じデザインで表示されるように都度確認できる環境が必要になります。

そんな時、わざわざ端末やブラウザを用意しなくても、
browserlingにアクセスすれば簡単にチェックすることが可能です。

Internet Explorer、Google Chrome、Firefox、
Safari、Operaの5つのブラウザからバージョンも選択できるので、
幅広い環境を想定してデザイン崩れなどが無いかを確認できます。

以下、使い方の手順をご説明します。

チェックしたいサイトのアドレス、ブラウザ、バージョンを選択

browserling2
ブラウザ内にブラウザが立ち上がるようにサイトが表示

browserling3

表示した画面は実際にブラウザで立ち上げているのと同じように、
画面内のリンクなどもクリック可能です。

ブラウザを立ち上げなおしたり、たくさんインストールせずに、
普段利用しているブラウザで各表示がチェックできるので、
チェック環境の構築に手間をかけずに済みます。

browserling – https://www.browserling.com

 

3.iPiccy 〜オンライン画像編集〜

ipiccy

登録が必要ではありますが、無料で強力な画像編集を行えるiPiccy
非常に頼もしいWebデザインの味方です。

多数用意されたフィルタや加工処理を画像にかけることができ、
選択した加工の度合いもパーセンテージで指定することができます。
また、適用したフィルタが気に入らない場合は元に戻す事も可能です。

無料とは思えない本格的なフィルタや加工処理が多数

ipiccy2

piccy

上記のようにインスタグラム風の加工も可能で、
無料とは思えない本格的な画像処理が可能です。
是非色々なフィルタを試してみてください。

iPiccy – http://ipiccy.com

 

4.Material UI Colors 〜カラーコード〜

material

昨今のテクノロジーデザインにおいて、
マテリアルデザインを採用することはトレンドになっています。

Material UI Colorsはセンスの有るマテリアルデザインの配色を
簡単に自身のサイトに導入することが可能となるツールです。

数ある配色の中で気に入った色をクリックするだけ

material2

利用は非常に簡単です。
気に入った色をクリックするとクリップボードに
カラーコードがコピーされます。

画像ではHEXになっていますが、
他にもRGB・RGBAも選択できます。

デザインにおいて配色は悩ましくも非常に重要な要素ですので、
是非、サイト構築の一助としてお役立てください。

なお、Material UI Colorsには遊び心満載のページも用意されています。
例えば404…、続きは是非あなたの目と耳で感じてください。

Material UI Colors – http://www.materialui.co/colors

 

5.Minifier 〜CSS/JavaScript 圧縮〜

minify

あなたが遅いサイトよりも速いサイトが好きな人であれば、
Minifyの良さはすぐに感じていただけると思います。

Webを構成するのに今やCSSもJavaScriptも欠くことはできませんが、
サイトスピードへの影響を気に病んだことはありませんか。

CSS/JavaScriptを貼り付けるだけ

minify2

あなたが作り上げたCSS/JavaScriptを貼り付ければ、
Minifyはすぐに容量を圧縮しサイトのスピードを上げてくれます。

また、圧縮後は難解なコードになっていますが、
必要があれば元通りデコードすることも可能なので安心です。

サイトの速度は重要な指標ですので、
Webデザインにおいて必須のツールになります。

Minifier – http://minify.avivo.si/#results

 

6.HTML Instant 〜HTMLツール〜

html

HTMLコードを書く時というのは、
常に大掛かりで本格的なサイトを作りたいとは限りません。

時には手軽にコードを書いてみたくなりますが、
わざわざ重たいソフトウェアを立ち上げるのは億劫(おっくう)になりまよね。

いつでもどこでもブラウザさえあれば書ける

html2

スマホでもタブレットでも利用可能なHTML Instantは、
そんな手軽にコードを書きたいときにぴったりなWebツールです。

また、リンクやリスト、いくつかのコードは上のツールメニュー上から、
簡単に挿入することが可能になっています。

HTMLのコードを書く必要があるけど、
簡単にコードを試したいだけなので手軽さがほしいというシーンには
是非Instantな本ツールをご利用ください。

HTML Instant – http://www.htmlinstant.com/

 

7.Moqups 〜モックアップエディタ〜

moq1

Webデザイン制作を進めるにあたり、
コードを組む前にやらなければいけないことがあります。

それは、デザインのゴールを決めること。
つまり、モックアップを作っておくことです。

オンラインであることを忘れるほど手軽で簡単

moq2

予め用意されたパーツを好きなように配置することができ、
まるでローカル環境のようにさくさくモックアップ制作を進められます。

アカウント登録なしで利用可能ですが、
アカウントを登録することで画像のアップロードや、
作成したモックアップをダウンロードすることも可能となります。

漠然としたイメージだけでコードを書くより、
予め簡単にでもモックアップを作っておいて制作を進めるほうが
はるかに作業は効率よく進みますよね。

簡単に始められるモックアップ制作、
非常にオススメです。

Moqups – https://moqups.com

 

8.Font Comparer 〜Web Font 比較〜

webfont

 

美しいWebデザインを目指すのであれば、
フォントを妥協することはあってはなりません。

情報を彩る文章を最大限にデザインの1つにするために、
昨今ではWebフォントという選択肢をとるサイトも増えてきましたよね。

各種フォントを一覧できる比較ツール

webfont2

Google Font DirectoryとTypeKitのAPIで作成されたフォントの中から、
気に入ったフォントをクリックすれば、導入に必要なコードが表示します。

導入にあたっての障壁も無く簡単で手軽に、
自身のサイトのイメージにあったWebフォントが手に入ります。

デザイナーが思い描くデザインと、
ユーザーの環境に導入されているフォントの相違により
イメージ通りのサイトデザインをユーザーに届ける事は難しいですよね。

特にフォントにおいては顕著でしたが、
そんな問題を解決してくれるWebフォントを導入するにあたり、
事前に比較しながら選択できるのは便利ですね。

Font Comparer – http://www.fontcomparer.com

 

9.PicSVG 〜SVG画像へ変換〜

svg

モバイル端末も普及し、レスポンシブデザインを採用するサイトも増え、
サイトを拡大して見る機会がユーザーにとっても増えています。

拡大してもギザギザした画像にならないように、
JPEG/PNG/GIFをハイクオリティなSVGファイルにしてはいかがでしょうか。

アップロードしてカラーを選択するだけ

pic

手軽さはもとより、無料で登録不要と思えないクオリティで、
上記画像のように写真をSVGのベクターに変換してくれます。

カラーもカラーマップからお好きな色を選択できます。
細かなクオリティの積み重ねにどうぞ。

PicSVG- http://picsvg.com

 

10.MOTHEREFFING ANIMATED GIF 〜GIFアニメ〜

gif

この頃、GIFアニメが注目を集めていますが、
従来は対応ソフトを用意する必要がありました。

そんな障害を取り除いてくれる簡単なWEBツールが
MOTHEREFFING ANIMATED GIFです。

画像をアップするだけで繋がる

gif2

使い方は非常に単純で、
繋げたい画像を画面にドラッグアンドドロップするだけで作成できます。

幅のサイズや時間間隔も設定可能です。
無料で登録不要、ブラウザと画像があればいつでもGIFアニメが作成できます。

動的な画像があるだけでサイトのインパクトにもなりますし、
アクセントに必携のツールになりますよ。

MOTHEREFFING ANIMATED GIF- http://mothereffinganimatedgif.com

 

最後に

PCにアプリケーションをインストールすればするほど、
容量を圧迫し動作も重くなりますよね。
今回ご紹介したサイトはどれもブラウザとインターネット環境さえあれば
手軽にご利用いただけますので、是非お試しください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Articleワイヤーフレームを簡単に作れるWebサービス10選