Webデザイン、UIデザインがはかどる便利ツール

Webデザイン、UIデザインがはかどる便利ツール_メイン画像

こんな方に向けて書いたよ
  • Webデザイン、UIデザインの作業をもっと楽にしたい!
  • 便利なツールや小ワザを教えてほしい!
この記事の内容だよ
  • Webデザイン、UIデザインに役立つツールやWebサービスを紹介するよ。
  • Webデザイン、UIデザインの作業をいくぶん効率化できるよ。

詳しく見ていきましょう。

めがね

1.はじめに

ぼく

Webデザインは時間がかかるし大変だなあ…
Webサービスとか小ワザを知っていると、画像の切り抜きみたいな面倒な作業が楽になるよ!作業効率を上げて負担を減らそう!

黒点

ぼく

おっ、そういうの教えて欲しいな!(黒点がしゃべってる…!)

Webデザイン、UIデザインは時間と手間がめちゃかかります。なるべく効率化したい…!

ということでこのページでは、WebデザインやUIデザインの作業を効率化する、
ちょっとしたWebサービスやツール、小ワザなどを紹介します。

ぼくが仕事で使って便利だと思ったものを紹介していきますので、
よければ参考にしてみてください。

2.デザインのインスピレーションを得る

ピンタレスト

ピンタレストの画面イメージ

https://www.pinterest.jp/

デザインの参考用サイトとしては王道中の王道です。バナーやWebサイトだけでなく、写真とか名刺のデザインとか、いろいろ見ることができます。

ピンタレストのいいところは、「似たテイストの画像」をレコメンドしてくれるのと、画像の保存と管理がめっちゃラクなところです。
デザインを探して、見て、保存して、というのがかなり直感的にでき、つい楽しくなって長居してしまいます。

ぼく

アカウントは無料で作れます。

Web Design Clip

Web Design Clipの画面イメージ

https://www.webdesignclip.com/

Webサイトのギャラリーサイトです。

掲載数はそこまで多くないですが、LPのギャラリー、スマホサイトのギャラリーと分けて表示できたり、日本語サイトと海外サイトを分けて表示できるのが便利です。
ぼくはLPのデザインを作るときによく参考にしています。

MUUUUU.ORG

MUUUUU.ORGの画面イメージ

https://muuuuu.org/

こちらもWebサイトのギャラリーサイトです。

Web Design Clipよりも掲載数が多く、サイトのカテゴリー分けもWeb Design Clipとは若干異なっています。
MUUUUU.ORGではECサイトを絞り込むことができるので、ぼくはECサイトの参考を探すときにたまに利用しています。

S5-Style

S5-Styleの画面イメージ

https://bm.s5-style.com/

日本の田渕 将吾さんという方が運営しているWebデザインのギャラリーサイトです。

どちらかというとアーティスティックなサイトが多い印象で、APIやFlashといった技術的な側面からサイトを絞り込みできるのも特徴です。

3.キャプチャをとる

グーグルのデベロッパーツールを使う

グーグルのデベロッパーツールを使うと、サイト全体の縦長キャプチャをとることができます。

以下、手順を説明します。

googleの検証モードの開き方
①まずはグーグルクロームでキャプチャを撮りたいサイトを開き、「右クリック」⇀「検証」から検証画面を開きます。
googleの検証モードの使い方
②検証画面の「・・・」をクリックし、「Capture full size screenshot」をクリックすると、サイト全体のキャプチャが撮られ、ダウンロードされます。
googleの検証モードの使い方
③デバイスサイズを変更すればスマホサイトのキャプチャも撮ることができます(デバイスサイズを選択してもスマホサイトにならない場合はリロードしてみてください)。

手順は以上です。

ちなみに画面に映っている部分だけをキャプチャしたい場合は、同様の手順で「Capture screenshot」をクリックすればOKです。

ぼく

全体のキャプチャはデータ容量が大きくなりがちなので、後述するTinyPNGMicrosoft Paintを使ってサイズダウンさせるとなお良しです。

Snipping tool

Snipping Toolのアイコンイメージ

Windowsに(たぶん)標準搭載されているキャプチャツールです。範囲を自由に指定して、撮りたいところだけキャプチャを撮ることができます。

ぼく

ちなみにMacでは[command] + [shift] + [4]でキャプチャモードにできます。
MEMO

このSnipping toolですが、Windows10から「遅延機能」が加わり、かなり便利になりました。

遅延機能は、たとえば5秒後にキャプチャできるように設定すると、キャプチャモードに入るまでの5秒間マウスを自由に動かせるので、マウスオーバーしたときのボタンのデザインとかをキャプチャすることができます。UIの備忘録としても使えますし、仕事でメールや資料でUIの説明をするときにめちゃくちゃ役に立ちます。

4.画像素材を探す

写真AC

Photo ACの画面イメージ

https://www.photo-ac.com/

ぼくがよく利用している、商用利用可のフリー写真素材をたくさん扱っているサイトです。

無料の会員登録が必要ですが、写真以外にもイラストを扱っている「イラストAC」、シルエット画を扱っている「シルエットAC」なども運営しており、数多くの無料素材を探すことができます。

ぼく

ただ個人的には、「なんかあと一歩足りない…」という素材が多い印象…。無料素材なので、まあそこは仕方のないところでしょうか。
MEMO

写真ACはいろいろと制限が多く、サイト内のキーワード検索1日5回までとなっていますが(2020年2月現在)、グーグルの画像検索で「○○ 写真AC」と調べればフツ―に出てくるので、ご安心を。

ピクト缶

ピクト缶の画面イメージ

https://pictkan.com/

扱っている写真点数は少ないですが、写真ACよりもクオリティの高い写真が並んでいる印象です。1920 x 1280の大きいサイズでダウンロードできるので、Webサイトのメインビジュアルとかにも使うことができるのがありがたいポイントです。

使いどころが限られるかもしれませんが、ハマればかなり良いのではないでしょうか。こちらも商用利用可です。

ぼく

正直ぼくもまだピクト缶の利用回数は少なめです…

フリー素材ドットコム

フリー素材.com1イメージ

https://free-materials.com/

こちらも商用利用可能なフリーの写真素材が掲載されているサイトです。

当サイトを作っているときに、

ぼく

PCと ネコチャン の組み合わせのフリー素材が欲しいなー

と思って探してたどり着いたのがこのサイトです。

けっこう使い勝手が良さそうなので、これからフリー素材を探すときは写真ACと併用して使っていこうかなと思っています。

ICOOON MONO & FLAT ICON DESIGN

ICOOON MONOの画面イメージ
こっちがICOOON MONO
FLAT ICON DESIGNの画面イメージ
こっちがFLAT ICON DESIGN

https://icooon-mono.com/

http://flat-icon-design.com/

ぼくが超愛用しているピクト素材、アイコン素材集サイトです。無料、商用可でありながらなかなかイイ感じのピクトグラムが揃っています

TopeconHeroesという団体?が運営元なのですが、この2つのサイト以外にも数多くのフリー素材サイトを運営していて、かなりありがたいサービスとなっています。

icon-rainbow

icon-rainbowの画面イメージ

https://icon-rainbow.com/

こちらもよく愛用しているピクト素材集サイトです。ICOOON MONOよりも若干かわいらしいテイストになっています。

ICOOON MONOで見つけられなかったジャンルのものがicon-rainbowで見つかることがよくあります。

Xicon

Xiconの画面イメージ

https://xicons.co/

こちらもなかなかいい感じのアイコンが手に入るサイトです。

検索して探したりはできないみたいですが、全体的に素材のクオリティが高く、自分のPCにストックしておいて損はないかと思います。

5.フォントを探す

Adobe Fonts

Adobe Fontsの画面イメージ

https://fonts.adobe.com/?locale=ja-JP

Adobe CCに契約しているユーザーなら無料で使うことのできるフォントライブラリです。

ここで同期したフォントはAdobeのデザインアプリ(PhotoshopやIllustratorなど)で使うことができるようになります。

Adobe Capture

Adobe Captureアプリ

https://apps.apple.com/jp/app/adobe-capture/id1040200189

Adobe CCのアカウントがあれば無料で使うことができるスマホアプリです。これを使うとテキストを写真で撮ってフォントを探すことができます。

どんなかんじなのか、簡単に手順を説明します。

Adobe Captureの使い方
①まずはAdobe Captureを開いてモードを「文字」にします。
googleの検索画面
②写真を撮るか、画像フォルダから画像を選択します。今回はGoogleの検索窓にしてみました。
Adobe Captureの使い方
③青い枠を調べたいテキストにあわせて✔をタップ。
Adobe Captureの使い方
④検索完了!さすがに一緒のフォントはありませんでしたが、わりと近いものを発見!

こんなふうに、Adobe Fontsの中から該当するフォント(Adobe Fontsにない場合はニアピンのフォント)を自動で割り出してくれます。

使いたいフォントを選択し保存すれば、そのまま同期され、IllustratorやPhotoshopで使えるようになります。

MEMO

英文であればわりとニアピンで判別してくれますが、和文はあまり対応できていません(そもそも日本語のAdobe Fontsが少ないですし…)。あくまでも英文のフォントを探すときに活用してみてください。

Google Fonts

google fontsの画面イメージ

https://fonts.google.com/

グーグルが提供している無料のWebフォントライブラリです。

ここからフォントをダウンロードして自分のPCで使うこともできますし、コードをコピペして自分の作ったWebサイトのheadタグ内に記載すればそのフォントをサイトに適用することもできます。

6.画像を切り抜く

Remove bg

Remove bgの画面イメージ

https://www.remove.bg/ja

デザイナーたるもの、フォトショップでの画像切り抜きは基本中の基本!とはいえ、大量の画像をひとつひとつ切り抜くのは手間ですし面倒…

そこで役に立つのがこのRemove bgです。ドラッグ&ドロップするだけで自動で背景を切り抜いてくれる優れものです。髪の毛まわりの繊細な部分もきれいに切り取ってくれます。

ただ、切り抜き箇所はサイト側で自動判定されてしまうので、画像によっては思い通りに切り抜かれないことも多々あります。

ぼく

なるべく背景がスッキリしていて、コントラストのはっきりした画像だとうまくいく気がします。

I ♡ PDF

I Love PDFの画面イメージ

https://www.ilovepdf.com/ja

他部署の人

このPDFをJPGに変換してクレメンス
あ、わかりました

ぼく

仕事をしていると、こんな感じの依頼をよく受けます(ぼくだけかもしれませんが…)。

Adobe Acrobatとかを使ってもPDFからJPGへの変換はできるのですが、Adobe Acrobatを持っていない方は「I ♡ PDF」というサイトを使って変換すると良さげです。ドラッグ&ドロップでサクサク変換できるので、作業がラクです。

このI ♡ PDFですが、PDF⇀JPGの変換だけでなくJPG⇀PDFへの変換もできます。また、PDFのデータ圧縮、結合、分割保存もできるので、けっこう使い勝手が良いです。

8.画像のサイズを変える

Windowsに標準で入っているソフトです。
このソフトを使うことで、Photoshopとかをいちいち立ち上げなくても簡単に画像サイズを変えることができます。

簡単に手順を説明します。

Microsoft Paintの開き方
①JPGやPNGの画像データを右クリックし、「プログラムから開く」から「ペイント」を選択します。もしくは画像を右クリック⇀「編集」を選択でもいけるかもです。
Microsoft Paintでサイズを変更する方法
②「ファイル」の「サイズ変更」からサイズを変更することができます。 Web制作だとピクセルで画像サイズを指定することが多いので、こちらを使います。

これでOKです。サイズを変更したら、別名or上書き保存をして終了です。

MEMO

元のサイズから拡大させると画質が落ちてしまうので、基本的にサイズ変更は”縮小”のみにしておくとよいです。

また、何度もデータを保存すると画質が低下してしまうので(特にJPG)、リサイズは1~2回までにしておくとよいでしょう。

Macユーザーの場合は、Macに標準搭載されている「プレビュー」アプリを使えば、画像のサイズを変えることができます。

簡単に手順を説明します。

「プレビュー」での画像サイズ変更手順その1
①画像ファイルを「プレビュー」アプリで開きます。
「プレビュー」での画像サイズ変更手順その2
②右上にある「ツール」アイコンをクリックします。
「プレビュー」での画像サイズ変更手順その3
③サイズ変更のアイコンをクリックするとサイズを指定できるようになります。単位に気をつけてサイズを変更します(キャプチャでは単位がcmになっています)。
「プレビュー」での画像サイズ変更手順その4
④サイズが変更できたら、保存をして終了です。

I ♡ IMG

I Love IMGの画面イメージ

https://www.iloveimg.com/ja

データ形式を変換する」で紹介した「I ♡ PDF」の関連サイトで、「I ♡ IMG」というものがあります。

このサイトではJPGやPNGなどのサイズ変更、データ圧縮等ができるので、こちらで調整するのもアリです。

9.カラーコードを変換する

原色大辞典のカラーピッカー

カラーピッカーの画面イメージ

https://www.colordic.org/picker

CSSで色を指定するとき、特に背景色を半透明にしたいときは、RGBA値(「rgba(14, 142, 142, 1)」みたいなやつ)で色を指定します。

ただ、IllustratorやPhotoshopを使っているとカラーコード(「#0E8E92」みたいなやつ)で色を管理している場合があり、カラーコードからRGBA値への変換が必要なことが多々あります。

そんな時、このサイトでカラーコードを入力すればRGB値に変換してくれるので、あとはAの値(=不透明度)を自由に設定すればOKです。

MEMO

ちなみに原色大辞典の「色検索」というやつでカラーコードを入力し色を検索すると、CMYKの値も確認することができます。ロゴを作ったときとかに印刷用でCMYKの値を求められる時があるので、そういうときに役に立ちます。

10.画像のデータサイズを下げる

Tiny Pngの画面イメージ

https://tinypng.com/

ぼくがめちゃめちゃ愛用しているデータ圧縮サイトです。

JPGとPNGの画像データをドラッグ&ドロップで簡単に圧縮することができます。
5MB未満のデータであれば、最大20枚まで、一括で圧縮することができます。

ぼく

Webサイトは画像データの容量をなるべく小さくしサイト表示スピードを上げることが大切です。

I ♡ PDF

I Love PDFの画面イメージ

https://www.ilovepdf.com/ja

データ形式を変換する」でも紹介したI ♡ PDFです。
Tiny PNGではPDFのデータ圧縮ができないので、PDFのデータを圧縮したいときにはこちらのI ♡ PDFを利用しています。

11.まとめ

  • Webデザイン、UIデザインのお助けツールはいっぱいある。
  • 積極的に使って作業を効率化しよう(もちろん不審なサイトは使わないように…!)。

以上でお助けツールのお話はおしまいです!

ぼく

お疲れ様でした。どうもありがとさん