読む人にも、書く人にも、
真に価値ある情報を。
wordpressの初心者向け情報サイト『webcode』
webデザイン

僕のWebデザインセンスを急成長させてくれたツール12選

tool

Webデザインのスキルは、ツールを上手く使うことで一気に引き上げることが出来ます。そして、嬉しいことにスキルが上がるにつれて、センスも磨かれていきます。

今回は、僕が仕事でよく使っているな―と思う12個のWebデザイン関連のツールを紹介させていただきます。

開発中のツール編

まずは、開発中に使っているツールです。

GoogleChromeデベロッパーツール

これについては、詳しく言う必要も無い気がしますね。

HTMLのチェック、CSSの編集・確認、JavaScriptの挙動チェックなどができます。

使われていないCSSの記述を特定したり、スマホ表示にさせたり、HTMLを編集したりもできます。

ローカル環境で開発している場合は、CSSを直接編集・保存できるのも作業が捗る要素ですね。

Page Ruler

Page Ruler - 僕のWebデザインセンスを急成長させてくれたツール12選

Page Ruler

これは、今表示しているWebサイト上で、pxの測定ができる定規みたいな機能がついたGoogleChromeの拡張機能です。

CSSで記述されていない余白などを測定する時に使っています。

余白のサイズがちょうどいいから綺麗に見えるのに、実際のpxがわからないといったことは多いのでそういう時に重宝します。

User-Agent Switcher for Chrome

useragent - 僕のWebデザインセンスを急成長させてくれたツール12選

User-Agent Switcher for Chrome

これは、GoogleChromeの拡張機能で、クリック一つでユーザーエージェントを切り替えられるツールです。

ユーザーエージェントというと分かりにくいので、ブラウザを切り替えられるというイメージを持ってください。

今のデザインがIEやOperaで対応しているのかなどを確認することができます。

(正確性は保証しません。どこかに書いてありますかね。)

画像編集ツール編

次は、画像編集ツールです。もう最近は、画像が命といって良いほど綺麗な画像が重要になるので、このツール選びは大事ですね。

Adobe Photoshop CC

photoshop - 僕のWebデザインセンスを急成長させてくれたツール12選

Adobe Photoshop CC

超有名なAdobeのツールですね。もはや説明が必要かどうかというくらい。

たまに「Webデザインをやるには、Photoshopを使ったほうが良いですか?」という質問をもらいます。

仕事場のメンバー・仕事相手にPhotoshopを使う方がいる時点で使ったほうがいいかなというのが結論です。

ただひとつ言えるのは、Photoshopにしたからといって画像が綺麗に成るわけでもないということです。結局は技量が必要です。

そのうち使う予定なら、技量を上げるために早く使いましょう。

GIPHY Capture

giphy - 僕のWebデザインセンスを急成長させてくれたツール12選

GIPHY Capture

これは、画面上でgif画像が撮影できるツールです。操作も非常に簡単なので、僕はよく使います。

例えば、CSSでのhoverアクションや、JavaScriptでの動きのあるコンテンツ、Canvasなどを使った際に、スクショだとイメージが伝えきれない時があります。

そういう時は、このgifで対応することが多いです。録りやすいからといって、調子にのるとgifファイルがアホみたいな容量になって使い物にならないので注意です。

Monosnap

monosnap - 僕のWebデザインセンスを急成長させてくれたツール12選

Monosnap

Mac専用(なのかな?)の画像編集ソフト。

簡単な画像編集をする時は、Photoshopよりもこっちを使うことが多いです。

ただ、仕事で使うような画像は基本的にPhotoshopで編集するかな…全体的にパーツが可愛らしいです。

色選択ツール編

色選択用のツールです。個人的には、このパートが一番重要だと思っています。

もともと色彩センスが無い僕にとって、これらのツールは神のような存在でしたし、今でも使っています。

色見本と配色サイト – color-sample.com

color sample - 僕のWebデザインセンスを急成長させてくれたツール12選

色見本と配色サイト – color-sample.com

このサイトは僕が一番使う色見本のサイトです。

一つの色を選ぶと、配色なども全てオススメを出してくれます。

さらに、選んだ色の色相別、明度別、彩度別で一覧を出してくれるので、非常に選びやすいです。

ColorPick Eyedropper

colorpick - 僕のWebデザインセンスを急成長させてくれたツール12選

ColorPick Eyedropper

これは、今見ているWebサイト上の特定の場所の色から、カラーコードを取り出せるツールです。

ほとんどの場合はCSSを見れば、カラーコードを取り出すことができるのですが、画像などの場合はそうもいきません。

画像だけどカラーコードが知りたいといったタイミングでこれを使うことが多いです。

Eye Dropper

eyedropper - 僕のWebデザインセンスを急成長させてくれたツール12選

Eye Dropper

これも一つ上のツールとほとんど機能は同じです。

個人的には、こちらのツールの方が使い勝手が良かったのですが、最近バグり始めたので乗り換えてしまいました。

(どこを選択しても黒、カラーコード#000が出てきたので…笑)

HUE/360

hue360 - 僕のWebデザインセンスを急成長させてくれたツール12選

[ HUE / 360 ] The Color Scheme Application

これは、一つの色を選択すると、それに色相・明度・彩度を考慮してオススメの色を自動で選抜してくれるツールです。

簡単にいうと「この中から色を選んでいれば、大外れしないよー」っていうツールです。

色彩に自信の無い方はこれを使うといいかもですね。

参考サイト保存ツール

最後に、普段ネットサーフィンをしていて「お!このサイトいい!」って思った時に、保存する時に役に立つツールです。

Full Page Screen Capture

fullpagecapture - 僕のWebデザインセンスを急成長させてくれたツール12選

Full Page Screen Capture

これは、今開いているサイトを上から下までスクリーンショットとして保存してくれるGoogleChromeの拡張機能です。

普通にパソコンで閲覧していると、どれだけ頑張っても高さ1000pxくらいしか表示できないので、こういう機能があると非常に助かります。

仕事仲間などに、このデザイン見て!って送るときや、クライアントにイメージを掴んでもらうために送る時に重宝しています。

SimilarWeb

similarweb - 僕のWebデザインセンスを急成長させてくれたツール12選

SimilarWeb

これは、今開いているサイトのおおよそのアクセス数を計測して表示してくれるツールです。

個人的には、Web周りに携わっていて、このツールを知らないのはやばいと思います。

僕が使うタイミングとしては、デザインはいいけれどアクセスが集まっていないサイトは参考から除外するので、そこの判断に使っています。

参考にしたいサイトは、「デザインがいいからユーザーが集まってきている」サイトなので、その判断基準に使っているという感じです。

まとめ

いかがでしたか?もしかしたら、まだ使っていないツールがあったかと思います。僕も全てを使う必要は無いと思っています。

ただ、僕の紹介したツールのおかげで、あなたの勉強スピードが上がるきっかけになればなと思って紹介していきました。参考程度に使ってみてください。

WordPressでおすすめのプログラミングスクール

オンラインマンツーマンならCodeCamp

bgt?aid=160728030173&wid=010&eno=01&mid=s00000016159001010000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
CodeCampは、完全オンラインで、現役エンジニア講師のマンツーマンレッスンを受けられるプログラミングスクールです。

CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。

プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。

プログラミングのオンラインスクールCodeCamp0 - Wordpressでおすすめのプログラミングスクール

CodeCampの口コミはこちら

オンラインテキストを自習形式ならTechAcademy

bgt?aid=160728030174&wid=010&eno=01&mid=s00000016188001104000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
TechAcademyは、1ヶ月の短期集中でWordpressについて学べる、完全オンラインのプログラミングスクールです。

基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。

TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。

TECH ACADEMYの無料体験はこちら0 - Wordpressでおすすめのプログラミングスクール

TECH ACADEMYの口コミはこちら