TechAcademy（テックアカデミー） プログラミング 【初心者向け】Web開発をするなら絶対入れておきたいChrome拡張機能11選
オーダーメイドコース
icon
icon
プログラミング

【初心者向け】Web開発をするなら絶対入れておきたいChrome拡張機能11選

Web開発に便利なChrome拡張機能を紹介しています。現役エンジニアはもちろん、非エンジニアでもWeb開発に興味がある人は入れておくと非常に便利に感じるはずです。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

これからエンジニアを目指す人や、普段はディレクターとして働いている人向けにWeb開発で便利なChrome拡張機能をまとめています。

エンジニアやデザイナーと一緒に仕事をしている人には、業務効率の上がるものが多いので、Chromeに追加しておくと良いでしょう。

 

また、オンラインのプログラミングスクールTechAcademyでは、未経験でもプログラミングを習得することが出来ます。

 

ato-ichinen

スクリーンショット 2016-03-16 14.05.57

Google検索の結果を1年以内に絞り込みすることができます。

プログラミング言語のバージョンが変わってからの結果だけ見たいという時に利用できます。デザインのトレンドやプログラミングの最新情報はよく変わっていきます。出来るだけ新しい情報を得るために役立ちそうですね。

ato-ichinen

 

smartphone simulator

スクリーンショット 2016-03-16 12.25.36

PCからスマホページを確認できる拡張機能です。

Chromeに追加後は、ワンクリックでスマートフォン表示にしてくれるので、デザイナーやWeb開発に関わる人は入れておいて損はないでしょう。

smartphone simulator

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

ColorPick Eyedropper

スクリーンショット 2016-03-16 12.26.01

マウスオーバーしている部分のカラーコードが分かる拡張機能です。

「このサイトを参考にしたい！」と思った時に一瞬でカラーコードを出力してくれるので非常に便利でしょう。デザイナーとディレクターとのやりとりもスムーズに進みそうです。

ColorPick Eyedropper

 

DevTools Theme: Zero Dark Matrix

スクリーンショット 2016-03-16 12.26.35

Google Chromeのデベロッパーツールをカスタマイズすることができる拡張機能です。

開発する上でChromeデベロッパーツールは毎日見るところでしょう。

普段使っているエディタはダークカラーだからChromeデベロッパーツールも色を合わせたい！という人は多いのではないでしょうか。背景がダークカラーであればクールな印象になりますし、目にも優しいでしょう。ぜひ自分用にカスタマイズしてみてください。

DevTools Theme: Zero Dark Matrix

 

Wappalyzer

スクリーンショット 2016-03-16 12.27.43

Wappalyzerでは、開いているサイトで使われいる言語やフレームワークを解析してくれます。

「このサービスはどの言語で作られているんだろうか」「JavaScriptのフレームワークは何を使っているんだろう」といった疑問を解決することができるでしょう。初めてWebサービスを開発するという人は特に参考になるツールになると思います。

Wappalyzer

 

YSlow

スクリーンショット 2016-03-16 12.32.10

YSlowでは、サイトのパフォーマンスを計測してくれます。

Webサイトの表示を高速化するためにあらゆる項目で判定してもらえます。「CSSは上に置きましょう」や「JavaScriptは下に置きましょう」など色々な項目でA~Fで判定をし、サイト改善を行うために役に立ちそうです。

YSlow

 

Awesome Screenshot

スクリーンショット 2016-03-16 12.25.15

サイトの一部をキャプチャすることができ、さらにそのキャプチャを加工することができる拡張機能です。

ページ全体のキャプチャ・選択したエリアのキャプチャを撮ることができ、丸で囲ったり文字を記載などできる便利ツールです。

ディレクターの人などエンジニアやデザイナーに何か依頼するときにキャプチャを撮ってメッセージを記載しているとより伝わりやすいでしょう。単純にキャプチャを撮るだけでも大変役にたつので、Chromeに追加しておくと良いでしょう。

Awesome Screenchot

 

One Tab

スクリーンショット 2016-03-16 12.32.56

One Tabは、開いているタブを一つにまとめてくれる機能を持っています。

タブを多く開いているとChromeが重くなってしまいますし、どこに何のタブがあるのか分からなくなることがあります。One Tabでは、開いているサイトの一覧を表示してくれるので、すぐに見つけることができるでしょう。

One Tab

 

Page Ruler

スクリーンショット 2016-03-16 12.33.19

サイト内のロゴなどサイズを簡単に数値化してくれる拡張機能です。

Googleロゴの幅や高さを一発で出すことができます。ロゴや画像のサイズを測るときに活躍しそうですね。

Page Ruler

 

Clear Cache

スクリーンショット 2016-03-16 12.33.46

Clear Cacheでは、Chromeにたまったキャッシュを削除することができます。

デザインなどを修正したにも関わらず更新しても反映されていないという場合は、キャッシュが残っている可能性大です。最新状態を表示してくれるので、いざという時便利でしょう。

Clear Cache

 

Pasty

スクリーンショット 2016-03-16 12.34.12

複数のURLをコピーしてPastyのアイコンをクリックすると、一度に全部のタブを開いてくれるという優れものです。

他の人から送られてきた参考サイトなども一つ一つ開くのでは面倒です。Pastyを使って業務効率をあげましょう！

Pasty

 

以上、Web開発において便利なChrome拡張機能を紹介しました。

今まで不便に思っていたこともワンクリックで解決できてしまうので、追加しておくとスムーズに仕事が進むはずです。

[お知らせ]TechAcademyでは初心者でも8週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。RubyでWebアプリを開発したい方はご参加ください。

記事を検索

関連するキーワード

関連する記事

【連載企画！】非エンジニアに送るWebサービスで起業するためのアドバイス！

本記事は、キャリアに特化したQ&Aサービス「JobQ」との連載企画になります。毎週月曜日に転職や起業など、様々なテーマに沿って紹介していくシリーズです。...
プログラミング

UNIXコマンドのcdでディレクトリを移動する方法【初心者向け】

プログラミングをする際に最低限知っておきたいこととして、UNIXコマンドがあります。 今回は基本的な、cdコマンドの使い方を初心者向けに紹介します。 &...
プログラミング

基礎を固める！プログラミング入門におすすめの書籍10冊【超初心者向け】

プログラミング関連の書籍は数多くありますが、初心者が勉強をはじめるときに、どこから読めばいいのかわからないということはないでしょうか。 そこで今回は、プロ...
プログラミング

Ruby on Railsで作る！Webアプリケーションをゼロから開発する手順とは

RubyのフレームワークRuby on Railsを使ってWebアプリケーションを作る手順について紹介しています。最近はRuby on Railsで書かれたWe...
Ruby

【連載企画】プログラミング未経験の文系学生でもエンジニアになれる！

本記事は、キャリアに特化したQ&Aサービス「JobQ」との連載企画になります。毎週月曜日に就職や転職など、あるテーマに沿って紹介していくシリーズです。前...
プログラミング

メルカリCTO 名村卓｜パソコン1台で、10億人の人生を変えられるかもしれない

「誰から、何を、学ぶべきなのか。」を業界トップの現役エンジニアから聞く「MASTER OF ENGINEER」。 今回は、日本を代表するインターネット企...
プログラミング

あわせてよく読まれている記事

Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】

Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 Chromeとは Chromeの開発者ツールでできること JavaScriptのデバッグを行う方法 まとめ   Chromeとは Chrome とは Google 社が開発したフリーソフトウェアのブラウザです。WindowsやMac、Linux、Android、 iOS など多くのOSで提供されています。全てのWebブラウザにおける Chrome のシェアは約64%と多くを占めています。 参考：statcounter  – Desktop Browser Market Share Worldwide   [PR] プログラミングで挫折しない学習方法を動画で公開中Chromeの開発者ツールでできること Chrome には「デベロッパーツール」と呼ばれる開発者ツールが添付されています。デベロッパーツールは Chrome の「その他のツール」メニューから起動できます。 デベロッパーツールは複数のタブで構成されています。初心者は以下の4つのタブを利用することが多いでしょう。 Elements ：Webページの要素に対応するHTMLやCSSの確認。動的なHTMLやCSSの変更と結果の確認 Console ：各種ログの閲覧、JavaScript コードの実行 Sources ：現在のWebページに関連して読み込まれているファイルと内容の確認 Network ：Webページと関連ファイルが読み込まれる速度の確認   JavaScriptのデバッグを行う方法 デベロッパーツールの主な使い方の1つがデバッグです。ここでは JavaScript のデバッグを行う代表的な方法を2つご紹介します。   console.log() 関数を使用する方法 console.log() 関数は Console にログを出力する関数です。この関数を使用することで、変数の値やプログラムが実行されていることなどを確認することができます。例で確認してみましょう。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> test <script language="javascript" type="text/javascript"> window.onload = () => { console.log('ページが読み込まれました'); } </script> </body> </html> 実行結果は以下のとおりです。デベロッパーツールの Console に結果が出力され、プログラムが実行されたことが確認できました。   ブレークポイントを使用する方法 ブレークポイントとは、プログラムの実行を一時停止する方法です。一時停止する場所のことをブレークポイントと呼びます。まずはデベロッパーツールの Sources
JavaScript

Pythonのseleniumにおけるブラウザ（chrome）自動操作について現役エンジニアが解説【初心者向け】

Pythonのseleniumにおけるブラウザ（chrome）自動操作について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 seleniumにおけるブラウザ（chrome）自動操作について詳しく説明していくね！ 大石ゆかり お願いします！ 目次 seleniumとは seleniumの使い方 seleniumを利用してchromeの自動操作をプログラムしてみよう まとめ   seleniumとは Selenium（セレニウム）とは、WEBブラウザの操作を自動化するフレームワークです。当初は、WEBアプリケーションでのUIテストを自動化する目的で作られました。現在は、当初の目的のWEBアプリケーションのテストのみならずスクレイピングというWEB上から情報を取得するなどの様々な用途で使用されています。 用意するのは、「ブラウザ」と「Selenium」と「WebDriver」の3つを用意します。「ブラウザ」は、今回は「Chrome」を使用します。「WebDriver」とは、SeleniumがChromeを操作するために必要なソフトです。 今回は、Chromeを対象として扱うので、「Chrome WebDriver」というソフトを使います。   [PR] プログラミングで挫折しない学習方法を動画で公開中seleniumの使い方 今回は、PythonでSeleniumの使い方を解説します。まずは、使っていく上で、以下の注意点を押さえておきましょう。 サーバに負荷を掛ける処理は行わない 対象のサイトでの利用規約で禁止されていないか確認   Pythonで手軽に使う方法としては、Pythonをインストールしたときに付いている、パッケージ管理ツール「pip」からインストールする方法です。「コマンドプロンプト（Windows）」または「ターミナル(Mac/Linux)」を開き、下記のコマンドを入力します。 $ pip install selenium $ pip install chromedriver-binary-auto これで、準備は完了です。次は実際にプログラムで自動操作を行います。   seleniumを利用してchromeの自動操作をプログラムしてみよう それでは、プログラミングしていきましょう。以下のようなコードを書いてみましょう。 import time from selenium import webdriver driver = webdriver.Chrome() driver.get('https://www.google.com/') time.sleep(5) search_box = driver.find_element_by_name("q") search_box.send_keys('りんご') search_box.submit() time.sleep(5) driver.quit() 実行すると Googleの検索画面が開いた後、「りんご」が検索欄に挿入され、検索結果画面が表示されると思います。   まとめ 今回は、PythonでSeleniumを使った自動操作について解説しました。ぜひ、使ったことない方や興味のある方がいれば、この機会に使ってみてはいかがでしょうか。   監修してくれたメンター 土井友裕（どいともひろ） 社内エンジニアとして、活動をしています。 扱えるプログラミング言語は、Python、Ruby、Dart(Flutter)、C# 、Java…他 など幅広く経験しております。開発実績としては、大手医療機器メーカーのWEBシステムの開発に従事しておりました。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
Python

ChromeでCSSが無効化される原因と対処法を現役エンジニアが解説【初心者向け】

ChromeでCSSが無効化される原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ChromeでCSSが無効化される原因と対処法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 Chromeのデベロッパツールの使い方 CSSが無効化される主な原因と対処法 Chromeを活用して改善してみよう まとめ   Chromeのデベロッパツールの使い方 フロントエンドの開発で必須とも言えるのがブラウザChromeのデベロッパーツールです。デベロッパーツールはブラウザ上でマウスを右クリックして検証を選択するか、その他のメニューから起動できます。   [PR] プログラミングで挫折しない学習方法を動画で公開中CSSが無効化される主な原因と対処法 CSSが思ったとおりに適用されない場合、まずは優先順位を確認しましょう。CSSで要素を指定するCSSセレクタでは、要素名＜クラス＜idの順に優先順位が高くなります。CSSの優先順位について、詳しくは以下の記事も参考にしてください。 MDN – 詳細度   Chromeを活用して改善してみよう 今回はCSSの適用状況をChromeのデベロッパーツールを使って確認する方法について説明します。まずは以下のHTMLファイルを作成します。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample</title> <style> .parent { background-color: lightblue; width: 200px; height: 150px; } .child {
CSS

今すぐ役立つ！Macユーザーが最初に入れておきたいおすすめアプリ10選

Macを購入したらまずインストールしておきたい便利アプリを紹介しています。 Windowsではあまり利用しなかったデスクトップアプリもMacユーザーはよく使っています。 ぜひインストールして使ってみてください。   なお本記事は、TechAcademyのオンラインブートキャンプの実績をもとにしています。   Chrome ブラウザSafariでもインターネット検索を行うことはできますが、あなたがスピードを求めるならば、新しいMacを起動した瞬間にChromeをまず最初にSafariの検索欄に入れてみましょう、そうすればChromeが手に入ります。 Mac以外でのブックマークも統一設定してくれるので、ブラウザとしてこれを選ばない手はないでしょう。さらにすごく便利な拡張機能がたくさん手に入るので日々の調べ物が楽しくなること間違い無しです、まず最初にいれておきたいアプリでしょう。 Chromeをダウンロード   Evernote 早速手にしたクロームで次にやることはEvernoteにいってアカウントを作ることです。そしてApp storeからEvernoteのネイティブアプリをダウンロードしましょう。基本的な使い方としては最初はメモ帳として使うので十分です。そしていつの間にかケータイや他のパソコンでも閲覧、編集可能なことに気づくでしょう。 一種のクラウドサービスなのですが、特に意識せずに同期してくれるので使うストレスが0です。全てのテキストをここでまとめてしまうのも一つの手でしょう、管理が非常に楽になります。 Webの内容をEvernoteにボタン一つで取り込めるWebクリップの機能も非常に便利なので抑えておきましょう。 Evernoteをダウンロード   [PR] プログラミングで挫折しない学習方法を動画で公開中Dropbox クラウドストレージといえばDropboxでしょう。これも入れておいて間違いはないです。Evernoteと同様使っているという実感なく、Dropboxのファイルに入れれば自動的に同期してオンライン常にアップしてくれます。 そしていつでもどこからでもファイルにアクセスできるので感激です。ファイルの共有も簡単でファイルをクリックしてメールアドレスを貼るだけ、ないと片手落ちみたいなツールです。 Dropboxをダウンロード   LINE 携帯でもちろんみなさんが使っているLINEですね。使っていない方を探す方が難しくなってきました。連絡手段として必須のツールLINEは無料通話、テキストで有名ですね。 それはMacでもできて同じです。人気のスタンプもMacで使えるので楽しめますね。携帯だけでなくPCも多様する人は入れておきましょう。 LINEをダウンロード   Twitter 超有名アプリであり、ソーシャルメディアの先駆けでもあるツイッターです。Mac版のネイティブアプリもあるので是非入れておきましょう。タイムラインの閲覧、リプライ、リツイート、DMなど全てできます。 むしろアプリ版の方が使いやすいという評判です。友達とのチャットに使うもよし、ひまつぶしにタイムラインを見るのもよし、情報収取にも使えるスーパーアプリです！ Twitterをダウンロード   Pocket 手にしたChromeでネットサーフィンしてる時読みたい記事があったとします。でも後で読みたい、という時Pocketが便利でしょう。読みたい記事を保管しておいてくれます。それこそChromeの拡張機能でこれのボタンを設置すればボタン一つで保管できちゃうんです。 Evernoteでもできますが併用して使うともっと便利に使えるということがわかってくると思います。もういろんなタブを開いてどこに何のサイトがあるのか混乱することはなくなるでしょう。 Pocketをダウンロード   Skitch 実はこれEvernote上でも使えてそれはそれで便利なのですが、単体でダウンロードするのもオススメです。 画像編集ソフトなのですが、Photoshopほど重くて複雑なことはしたくないけど、ちょっとモザイク入れたいとか、リサイズやトリミングしたいとか、文字書き加えたいなどの要望に応えてくれます。そしてサクサク動きます。 Skitchをダウンロード   Shupapan ファイルのリネーム、連番などは意外に面倒です。例えば写真のデータを取り込むとき、効率的に管理したいと思っても一個一個リネームするのは気が遠くなるときがあります。 これ自動化できないかな？とおもったとき、Shupapanが便利です。複数のファイルを一括でリネームしてくれます。痒いところに手が届く気の利くアプリです。 Shupapanをダウンロード   formatmatch 例えばテキストをコピペしたときそのままHTMLやCSSの情報もコピーしてしまうのでコピーした後とんでもなく醜く無残になってしまった経験ないでしょうか？それを防いでくれるのがこのformatmatchです。 コピー時の余分な情報を全て取り除きプレーンテキストとして貼り付けできます。地味に役立ちます。 formatmatchをダウンロード   Kopypasta コピペした文字の履歴を保存してくれるアプリです。特定の文章を書いていると同じ文字を使っていることが多いことに気づくのですがそんな方に最適なアプリです。文章を書くときの効率アップになります。 学生、ビジネスマン、ライターさん限らず皆さんにオススメですね。 Kopypastaをダウンロード   以上、Macの利用にあたってのおすすめアプリを紹介しました。 これからMacを初めて使うという人も使ったことがあるという人も便利で役立つアプリなので、ぜひ入れておきましょう。仕事でも利用する場合、作業効率が上がるはずです。 TechAcademyでは初心者でも最短4週間でプログラミングを習得できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
ツール系

ChromeでJavaScriptを無効／停止する方法を現役エンジニアが解説【初心者向け】

ChromeでJavaScriptを無効／停止する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。   JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ChromeでJavaScriptを無効／停止する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 Chromeを無効／停止にする理由 ChromeでJavaScriptを無効にする方法 ChromeでJavaScriptを有効に戻す方法   Chromeを無効／停止にする理由 普段、無効／停止を行う理由としては、JavaScriptの動きを止めてページをスムーズに見たり、セキュリティの観点で無効／停止を行うかと思います。 しかし、開発者が開発中にあえて無効／停止にするケースは少ないです。もちろんJavaScriptを利用しないサイトであれば、無効／停止にして動作確認するケースもありますが、あまり意味はありません。あるとしても、不具合の切り分けなどに利用する場合などです。   [PR] プログラミングで挫折しない学習方法を動画で公開中ChromeでJavaScriptを無効にする方法 設定はブラウザで作業します。残念ながらAPIなどでJavaScriptから制御することはできません。手順は下記のとおりです。※ブラウザーのバージョンによって手順に若干の違いがある場合があります。 ブラウザーの右上のハンバーガーメニューを開きます 「設定」を選択 「プライバシーとセキュリティ」→「サイトの設定」を選択します※「設定」の上の部分で【JavaScript】と入力して検索してもいいと思います 「JavaScript」を選択し、「許可」を外します。 以上で簡単に無効／停止を行うことができます。   ChromeでJavaScriptを有効に戻す方法 当然ながら、先ほどの手順で「許可」を設定すれば元に戻ります。   筆者プロフィール 小宮山晃史（こみやまこうじ) 現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

【入門編！】Webデザインをする上で役立つツールまとめ

Webサイトをゼロからデザインするのはなかなか大変なことです。配色やレイアウト、使用するフォントや画像など考えなければならないことがたくさんあります。 そこで今回はWebデザインするときに役立つツールをご紹介。うまく活用すればWebサイトの制作もぐっと楽になるので、ぜひ活用してみてください。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。    Heu/360   Heu/360 基本となる色を1色選ぶだけでメインカラーと調和する複数の色を自動的にピックアップしてくれるWebツールです。 色空間・色相・彩度、背景色の設定も変更でき、好みの色を探すのに役立ちます。選択した複数の色のカラーコードも取得できます。   2.5dButton Flat UI Elements   2.5dButton Flat UI Elements フラットデザインに適したボタンを簡単に作成できるサービスです。 スライダーを動かすことで円形や長方形、正方形のボタンが作成できます。テキストの大きさ、アイコンの大きさ、長さ、背景色など細かい部分も調整可能なので、好みに合ったボタンが作成できます。   [PR] プログラミングで挫折しない学習方法を動画で公開中Dynamic Dummy Image Generator Dynamic Dummy Image Generator ウェブサイトを作成する際に使うダミー画像が作れるサービスです。フォームに画像のサイズや背景色、テキストなどを入力するだけで、簡単にダミー画像が作れます。 写真やイラストなどがない状態でも、ウェブサイトの製作を進めていくことができるので非常に便利です。    Subtle Patterns Subtle Patterns ウェブサイトの背景などに使える背景テクスチャをダウンロードして使えるサービスです。約300種類あるテクスチャの中から好きなものを選んでダウンロードできます。背景素材として合うかどうか試しにプレビュー表示することもできます。    ColorZilla ColorZilla ウェブサイト上のカラーコードを取得できるChrome/Firefoxブラウザの拡張機能です。ネットサーフィン中に気になった色の情報をすばやく知ることができます。取得したい色の部分をクリックするだけでカラー情報が表示されます。   Whatfont Tool Whatfont Tool Webサイトのフォントサイズや種類、カラー情報などをチェックできるChromeブラウザの拡張機能です。ネットサーフィン中に気になったフォントの情報をすばやく知ることができます。 ウェブサイト上のテキストにカーソルを合わせるだけでフォント名が表示され、フォントのサイズなど詳細情報も確認できるようになっています。    Page Ruler Page Ruler ウェブサイト上にある画像やコンテンツのサイズを測定できるChrome/Firefoxブラウザの拡張機能です。ドラッグ＆ドロップで簡単にサムネイル画像の大きさやコンテンツの間隔などが測定できます。   PerfectPixel PerfectPixel ウェブサイト上で作成した画像を重ね合わせてチェックできるChrome（Firefox/Safari/IE）ブラウザの拡張機能です。画像をウェブサイト上で半透過で表示できるので、デザインのズレがはっきり分かります。 Chromeブラウザなどのデベロッパー・ツールと組み合わせて使用することで、スムーズにCSSを調整することが可能です。    Wirify Wirify ウェブサイトのレイアウトをワイヤーフレーム化するサービスです。閲覧しているウェブサイトの「レイアウト」情報だけを視覚化して表示することができます。 「Wirify」をブックマークツールバーに入れた後、ウェブサイトを開いてボタンを押すだけで利用できます。    XRAY XRAY ウェブサイト上にあるコンテンツのCSS情報を表示するブックマークレットです。サイト上にある特定の部分をクリックするだけで、プロパティや値の情報を知ることができます。Chromeブラウザなどのデベロッパー・ツールよりも見やすいので初心者におすすめです。   Sketch Sketchの使い方 Mac OS専用のベクタードローイングツールです。UIデザインやWebデザインに特化しているため、シンプルな機能で直感的に操作できます。 アイコンやUIテンプレート、画像など多くの素材とプラグインが用意されているのが魅力です。    Canva Canva ブラウザ上で簡単にバナーやSNS用の画像、ポスターなどが作成できるサービスです。豊富なテンプレートが用意され、文字や色を変えることでオリジナルの作品が作れます。 自分で用意した写真や画像を使用することもでき、テキストやフォントの種類、サイズ、色なども調整可能です。   今回はWebデザインするときに役立つツールをご紹介してきました。なるべく初心者でも使いやすいものを選んできたつもりですが、他にも使いやすく便利なツールはたくさんあります。ぜひ自分に合ったツールを見つけて、より効率的に作業できるように活用してみてください。 他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
Webデザイン

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） プログラミング 【初心者向け】Web開発をするなら絶対入れておきたいChrome拡張機能11選