2022年10月5日SHAREツイートシェアはてブLINEPocketこんな方に向けて書いたよWebデザイン、UIデザインの作業をもっと楽にしたい!便利なツールや小ワザを教えてほしい!この記事の内容だよWebデザイン、UIデザインに役立つツールやWebサービスを紹介するよ。Webデザイン、UIデザインの作業をいくぶん効率化できるよ。詳しく見ていきましょう。PDF11.まとめ1.はじめにぼくWebデザインは時間がかかるし大変だなあ...Webサービスとか小ワザを知っていると、画像の切り抜きみたいな面倒な作業が楽になるよ!作業効率を上げて負担を減らそう!黒点ぼくおっ、そういうの教えて欲しいな!(黒点がしゃべってる...!)Webデザイン、UIデザインは時間と手間がめちゃかかります。効率化したい...!ということでこのページでは、WebデザインやUIデザインの作業を効率化する、ちょっとしたWebサービスやツール、小ワザなどを紹介します。ぼくが仕事で使って便利だと思ったものを紹介していきますので、よければ参考にしてみてください。2.デザインのインスピレーションを得るピンタレストhttps://www.pinterest.jp/デザインの参考用サイトとしては王道中の王道です。バナーやWebサイトだけでなく、写真とか名刺のデザインとか、いろいろ見ることができます。ピンタレストのいいところは、「似たテイストの画像」をレコメンドしてくれるのと、画像の保存と管理がめっちゃラクなところです。デザインを探して、見て、保存して、というのがかなり直感的にでき、つい楽しくなって長居してしまいます。ぼくアカウントは無料で作れます。Cliphttps://www.webdesignclip.com/Webサイトのギャラリーサイトです。掲載数はそこまで多くないですが、LPのギャラリー、スマホサイトのギャラリーと分けて表示できたり、日本語サイトと海外サイトを分けて表示できるのが便利です。ぼくはLPのデザインを作るときによく参考にしています。MUUUUU.ORGhttps://muuuuu.org/こちらもWebサイトのギャラリーサイトです。Clipとは若干異なっています。MUUUUU.ORGではECサイトを絞り込むことができるので、ぼくはECサイトの参考を探すときにたまに利用しています。将吾さんという方が運営しているWebデザインのギャラリーサイトです。どちらかというとアーティスティックなサイトが多い印象で、APIやFlashといった技術的な側面からサイトを絞り込みできるのも特徴です。3.キャプチャをとるグーグルのデベロッパーツールを使うグーグルのデベロッパーツールを使うと、サイト全体の縦長キャプチャをとることができます。以下、手順を説明します。1まずはグーグルクロームでキャプチャを撮りたいサイトを開き、「右クリック」⇀「検証」から検証画面を開きます。screenshot」をクリックすると、サイト全体のキャプチャが撮られ、ダウンロードされます。3デバイスサイズを変更すればスマホサイトのキャプチャも撮ることができます(デバイスサイズを選択してもスマホサイトにならない場合はリロードしてみてください)。screenshot」をクリックすればOKです。Paintを使ってサイズダウンさせるとなお良しです。toolWindowsに(たぶん)標準搭載されているキャプチャツールです。範囲を自由に指定して、撮りたいところだけキャプチャを撮ることができます。[4]でキャプチャモードにできます。toolですが、Windows10から「遅延機能」が加わり、かなり便利になりました。遅延機能は、たとえば5秒後にキャプチャできるように設定すると、キャプチャモードに入るまでの5秒間マウスを自由に動かせるので、マウスオーバーしたときのボタンのデザインとかをキャプチャすることができます。UIの備忘録としても使えますし、仕事でメールや資料でUIの説明をするときにめちゃくちゃ役に立ちます。4.画像素材を探す写真AChttps://www.photo-ac.com/ぼくがよく利用している、商用利用可のフリー写真素材をたくさん扱っているサイトです。無料の会員登録が必要ですが、写真以外にもイラストを扱っている「イラストAC」、シルエット画を扱っている「シルエットAC」なども運営しており、数多くの無料素材を探すことができます。ぼく写真ACは他では扱っていないようなニッチな素材も扱っている一方、個人的には「なんかあと一歩足りない...」という素材も多い印象です。写真AC」と調べればフツ―に出てくるので、ご安心を。ピクト缶https://pictkan.com/扱っている写真点数は少ないですが、写真ACよりもクオリティの高い写真が並んでいる印象です。1280の大きいサイズでダウンロードできるので、Webサイトのメインビジュアルとかにも使うことができるのがありがたいポイントです。使いどころが限られるかもしれませんが、ハマればかなり良いのではないでしょうか。こちらも商用利用可です。ぼく正直ぼくもまだピクト缶の利用回数は少なめです...フリー素材ドットコムhttps://free-materials.com/こちらも商用利用可能なフリーの写真素材が掲載されているサイトです。組み合わせのフリー素材が欲しいなーと思って探してたどり着いたのがこのサイトです。使い勝手が良さそうなので、これからフリー素材を探すときは写真ACと併用して使っていこうかなと思っています。DESIGNhttps://icooon-mono.com/http://flat-icon-design.com/ぼくが超愛用しているピクト素材、アイコン素材集サイトです。無料、商用可でありながらなかなかイイ感じのピクトグラムが揃っています。TopeconHeroesという団体?が運営元なのですが、この2つのサイト以外にも数多くのフリー素材サイトを運営していて、かなりありがたいサービスとなっています。icon-rainbowhttps://icon-rainbow.com/こちらもよく愛用しているピクト素材集サイトです。MONOよりも若干かわいらしいテイストになっています。MONOで見つけられなかったジャンルのものがicon-rainbowで見つかることがよくあります。Xiconhttps://xicons.co/こちらもなかなかいい感じのアイコンが手に入るサイトです。検索して探したりはできないみたいですが、全体的に素材のクオリティが高く、自分のPCにストックしておいて損はないかと思います。CCに契約しているユーザーなら無料で使うことのできるフォントライブラリです。ここで同期したフォントはAdobeのデザインアプリ(PhotoshopやIllustratorなど)で使うことができるようになります。CCのアカウントがあれば無料で使うことができるスマホアプリです。これを使うとテキストを写真で撮ってフォントを探すことができます。どんなかんじなのか、簡単に手順を説明します。Captureを開いてモードを「文字」にします。2写真を撮るか、画像フォルダから画像を選択します。今回はGoogleの検索窓にしてみました。3青い枠を調べたいテキストにあわせて✔をタップ。Fontsにない場合はニアピンのフォント)を自動で割り出してくれます。使いたいフォントを選択し保存すれば、そのまま同期され、IllustratorやPhotoshopで使えるようになります。Fontsが少ないですし...)。英文のフォントを探すときに活用してみてください。Fontshttps://fonts.google.com/グーグルが提供している無料のWebフォントライブラリです。ここからフォントをダウンロードして自分のPCで使うこともできますし、コードをコピペして自分の作ったWebサイトのheadタグ内に記載すればそのフォントをサイトに適用することもできます。ドラッグ&ドロップするだけで自動で背景を切り抜いてくれる優れものです。髪の毛まわりの繊細な部分もきれいに切り取ってくれます。切り抜き箇所はサイト側で自動判定されてしまうので、画像によっては思い通りに切り抜かれないことも多々あります。ぼくなるべく背景がスッキリしていて、コントラストのはっきりした画像だとうまくいく気がします。PDFhttps://www.ilovepdf.com/ja他部署の人このPDFをJPGに変換してクレメンスあ、わかりましたぼく仕事をしていると、こんな感じの依頼をよく受けます(ぼくだけかもしれませんが...)。PDF」というサイトを使って変換すると良さげです。ドラッグ&ドロップでサクサク変換できるので、作業がラクです。PDFですが、PDF⇀JPGの変換だけでなくJPG⇀PDFへの変換もできます。できるので、けっこう使い勝手が良いです。Paint(Windowsユーザー)Windowsに標準で入っているソフトです。このソフトを使うことで、Photoshopとかをいちいち立ち上げなくても簡単に画像サイズを変えることができます。簡単に手順を説明します。1JPGやPNGの画像データを右クリックし、「プログラムから開く」から「ペイント」を選択します。画像を右クリック⇀「編集」を選択でもいけるかもです。2「ファイル」の「サイズ変更」からサイズを変更することができます。Web制作だとピクセルで画像サイズを指定することが多いので、こちらを使います。サイズを変更したら、別名or上書き保存をして終了です。MEMO元のサイズから拡大させると画質が落ちてしまうので、基本的にサイズ変更は”縮小”のみにしておくとよいです。何度もデータを保存すると画質が低下してしまうので(特にJPG)、リサイズは1~2回までにしておくとよいでしょう。プレビュー(Macユーザー)Macユーザーの場合は、Macに標準搭載されている「プレビュー」アプリを使えば、画像のサイズを変えることができます。簡単に手順を説明します。1画像ファイルを「プレビュー」アプリで開きます。2右上にある「ツール」アイコンをクリックします。3サイズ変更のアイコンをクリックするとサイズを指定できるようになります。単位に気をつけてサイズを変更します(キャプチャでは単位がcmになっています)。4サイズが変更できたら、保存をして終了です。IMG」というものがあります。このサイトではJPGやPNGなどのサイズ変更、データ圧縮等ができるので、こちらで調整するのもアリです。1)」みたいなやつ)で色を指定します。IllustratorやPhotoshopを使っているとカラーコード(「#0E8E92」みたいなやつ)で色を管理している場合があり、カラーコードからRGBA値への変換が必要なことが多々あります。そんな時、このサイトでカラーコードを入力すればRGB値に変換してくれるので、あとはAの値(=不透明度)を自由に設定すればOKです。MEMOちなみに原色大辞典の「色検索」というやつでカラーコードを入力し色を検索すると、CMYKの値も確認することができます。ロゴを作ったときとかに印刷用でCMYKの値を求められる時があるので、そういうときに役に立ちます。PNGhttps://tinypng.com/ぼくがめちゃめちゃ愛用しているデータ圧縮サイトです。JPGとPNGの画像データをドラッグ&ドロップで簡単に圧縮することができます。5MB未満のデータであれば、最大20枚まで、一括で圧縮することができます。ぼくWebサイトは画像データの容量をなるべく小さくしサイト表示スピードを上げることが大切です。PDFを利用しています。11.まとめWebデザイン、UIデザインのお助けツールはいっぱいある。積極的に使って作業を効率化しよう(もちろん不審なサイトは使わないように...!)。以上でお助けツールのお話はおしまいです!ぼくお疲れ様でした。Posts文系卒で美大出てなくてもWebデザイナー、UI/UXデザイナーになれるの?Web・UI/UXデザイナーはコーディングができるべき?Web・UI/UXデザイナーとプログラマーの違いjQueryとは?未経験からWebデザイナー・UI/UXデザイナーを目指す方向けに解説Webデザイナー・UI/UXデザイナーはJavaScriptも習得すべき?ぼく(管理人)大学卒業後に新卒で入った会社で2年半営業として働く。飛び込みとテレアポの日々で心身共に疲れ切ってしまい、適職診断をしまくってWebデザイナーの道を知り、その面白さに魅了され独学でWebデザイナー、UI/UXデザイナーを目指した。現在は事業会社にてUI/UXデザイナー兼Webディレクターをやっています。