Chrome拡張機能にはWeb制作に便利なものが多く、私もよく利用しています。特に1〜2クリックでさっとチェックできるものは頻繁に使い制作の中で馴染んだものであるため、これらがないと手間どってしまうくらい依存性の高いものばかり。今回は私がよく利用しているChrome拡張機能を12個紹介します。初見のものがありましたら、ぜひ試してみてください。 Eagle – 効率的に画像を保存する Eagle サイト上にある画像をドラッグ＆ドロップだけで保存できるChrome拡張機能。あとで見返したい画像を効率的に保存できるのは嬉しい。ページ全体のスクリーンショットの撮影も可能。撮影後は専用のアプリに保存されます。この手のものは他にもあったのですがサービス終了してしまい、他を探してようやく見つけたのがEagleでした。重宝しています。 Eagle – 効率的に画像を保存する 専用アプリのダウンロードはこち

Webサイトの画像を編集してダウンロードできるChrome拡張機能「Download & Edit All Images」 ◆ Download & Edit All Images https://download-and-edit-all-images.pop9.io/ 紹介 「Download & Edit All Images」は、開いたWebサイトの画像を編集したりダウンロードできるChrome拡張機能です。 Webサイトを開いて拡張ボタンをクリックすると、サイト上にある全ての画像がリストアップされます。 あとは編集したい画像を選ぶと このような画像編集画面が開きます。 画像を切り取ったり エフェクトをかけることも可能。 DOWNLOADボタンから編集した画像をダウンロードすることもできます。 簡単な修正のためだけにphotoshopを起動する必要がなくなるので、非常に重宝しそうな

VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。

色盲や色弱の人がどのように見えているかシミュレートできるオンラインサービスはいつかありますが、テストサーバーやローカルで利用できないのが残念なところです。 色盲・色弱の人の見え方をシミュレートできるChromeの機能拡張を紹介します。

Google Chromeの拡張機能をひたすら試して、おすすめのものを32個厳選しました。目的に応じて、使えそうなものを探して頂ければと思います。 最後のセクションでは、ブログなどでよく取り上げられているものの「これはいらないんじゃないか」という拡張機能をまとめています。参考になれば幸いです。

[レベル: 中級] セキュリティに関する Chrome ブラウザの UI 変更を Google はアナウンスしました。 HTTPS および HTTP ページのインジケータが将来のバージョンの Chrome で変わります。 鍵アイコンと「保護された通信」ラベルの削除 HTTPS で配信されるページに対して表示されるラベルとアイコンが削除されます。 現在は、HTTPS ページにアクセスしていると鍵アイコン🔒と「保護された通信」ラベルがアドレスバーの先頭に表示されます。 2018年9月にリリースされる Chrome 69 ではラベル表示がなくなり、鍵アイコンだけになります。 「https://」のスキームもなくなります。 最終的には鍵アイコンも表示しなくなる予定とのことです。 HTTPS 通信であることがわからなくなりますが、セキュリティが守られていることがウェブでは当たり前だとユーザーは想定

. 同内容で画面キャプチャ付きの記事はこちらにあります。 . 長ったらしい業務メールや、読んでおきたいけど分量に及び腰になっちゃうBlog記事を、読み上げてもらって文章を眺めながら聞くというやり方で、集中力が低下している時にもとりあえず処理できるようにして生産性を上げたい（上がる？）。 ちょっとググるとなかなか良いサービスがある。 http://imtranslator.net/translate-and-speak/speak/japanese/ 読み上げも我慢して使えるレベル。一昔前と比べるとかなり良くなった 読み上げのスピードを選べるところがGood ちんたら読まれたらイラつくからね フォームにテキストをコピーして[Speak Japanese]をクリックすると、音声ファイルが生成されて画面上で再生可能となる ちょっと面倒臭い （無料では）文字数制限がある。自動的に可能な範囲で良い上

こんにちは、佐々木です！ title,description,keyword等を確認する拡張機能が前々から欲しいと思っていたので、少し前に作成してみました！ 試しに非公開で社内用に使っていたのですが、今回Chrome拡張機能として一般公開しましたので、ご紹介させて頂ければと思います。 tdk (Chrome拡張) ダウンロードは上記から。 使い方は簡単！ ※ダウンロード前に開いているページで利用する場合には更新を行ってから利用してください。 Macの場合：control+shift+command+tで利用できます。 Winの場合：control+shift+alt+tで利用できます。 なんでこんなに指がつりそうなレイアウトかというと、元々ブラウザで持っている機能と被ったりという声が社内からあったので、絶対になさそうなショートカットキーに変更しました・・・。 （社内ではマウス等にショートカ

ページをどのくらいスクロールし、どこをクリックするのか、マウスやキーボードをどのように操作し、コンテンツを見るのか、ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張を紹介します。 ユーザビリティテストに利用するだけでなく、操作を編集・再生することもできるので、プレゼンなどでページの操作を再現することも可能です。 Wildfire Wildfireの特徴 Wildfireのインストール Wildfireの使い方 Wildfireの特徴 Wildfireはユーザーがページをどのように操作するのか、どのように見るのか、手軽にユーザビリティテストができるChromeの機能拡張です。また、アクションをシミュレーションし、新しいデザインの確認にも利用できます。 ブラウザで表示したページのアクションを記録します。 記録したアクションは、すべて再生可能。 アクションを編集し、シミ

作成：2016/07/11 更新：2017/04/16 Web制作 > 使い方 初めてデベロッパーツールを触る人でも分かるように、簡潔・シンプルに書きました。画像付きのチートシートのようなものですね。今回は初心者の方向けということでChromeデベロッパーツールの入門編。Chromeは最新版です。 エンジニア速報は Twitter の@commteで配信しています。 設定 背景色を黒にする タブの幅を変える エディタ エディタとして使う ローカルファイルのコードを整形する コンソール ログの閲覧・JavaScriptの入力や練習 エレメント 編集 CSS内の画像サイズと大きさを知る カラーフォーマットの変更 Breakpoints / クリックされた時のコードを見つける モバイル 回線速度のエミュレート 通信環境を選択 Androidデバッグ モバイルデバックの実機を増やす ネットワーク

リモートワークに最適なスクリーンレコーダーとスクリーンキャプチャおよび注釈ツール。 技術的な問題の報告、製品のデモや、ハウツーチュートリアルの作成などで画面を共有したいことはありませんか？ Awesome Screen Recorder＆Screenshotを使うべき🔟の理由は次のとおりです 1️⃣ 10年以上安定したサービスを提供 2️⃣ さまざまなプラットフォームで300万人以上のユーザーに愛されています 👍 3️⃣ ローカルスクリーンレコーダーとクラウドスクリーンレコーダー2in 1 4️⃣ スクリーンショット/スクリーンキャプチャ＆スクリーンレコーダー2 in 1 5️⃣ 素早いカスタマーサポート 6️⃣ 仕事や教育のシナリオ向けに特別に設計された強力な機能 7️⃣ 広告なしであなたのプライバシーを尊重します 8️⃣ 簡単に使用可能 9️⃣ スクリーンショットと画面記録を即座に

みなさんはChromeの拡張機能を活用していますか？　拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ

GoogleChrome拡張機能は、ブラウザ上で手軽に追加できる便利なツールの一つとして多種多様な機能が存在し、あまりの多さに迷ってしまうほどです。 弊社エンジニアの間でもChrome拡張機能は活用されていますので、その中から実際に使っているオススメ拡張機能を厳選してご紹介します。 中には、エンジニアの方に限らず、Webサイトに携わる方であればインストールして欲しい拡張機能もありますので、ぜひ参考にしてみてください。 ※執筆時(2015年9月24日)時点では、どれも無料で使用することができます。 エンジニアにオススメのChrome拡張機能まとめ 1.JSONView https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc JSONデータを自動で整形してくれるChrome拡張機能で

ドキュメント、スプレッドシート、スライドで Officeファイルを編集 [Chromeアプリ] https://goo.gl/sk2CaS 複数ユーザーによって同時にファイルの編集が可能で、その履歴を全て保存することができるGoogleドライブ。便利そうだなーと思いながらも、「まだ導入できないんだよねー」という方も多いのでは？ というわけで、まずはこれを気楽に導入してみることが可能な『ドキュメント、スプレッドシート、スライドで Officeファイルを編集』というそのまんま過ぎる名前のChrome拡張機能から。 Chromeに追加するだけで、既存のWord、Excel、PowerPoint などのOfficeファイルを Google ドキュメント、スプレッドシート、スライドで表示・編集することが可能になります。 編集後は元のフォーマットで保存もできるし、Googleドライブのファイルとしても

Google Chromeのデベロッパーツール（別名：検証モード）は、Web開発者にとって非常に便利なツールです。 特に便利なのが、スマートフォン向けの開発を行っている時の表示エミュレーション機能で、PC画面にも関わらず擬似的にスマホ画面にして表示してくれます。 Google Chromeデベロッパーツールを知っておくことで、HTML/CSSの編集やデバッグ、スマートフォンでの表示チェックが容易にできるようになります。 今回は、Google Chromeデベロッパーツールの基本的な機能と使い方をまとめました。 Chromeデベロッパーツールの使い方 1.起動方法 デベロッパーツールは、Google Chromeブラウザを使っている方であれば、誰でも無料で利用することができます。 利用方法は、調べたいページを右クリックし、「検証」の項目がありますので、それをクリックします。 ショートカットキ

業務を効率的に遂行することは、ビジネスにおける基本と言えます。 それは、記事を執筆するライターやブロガーであっても同じことです。 今回はライターやブロガーにオススメしたいChromeの拡張機能をまとめました。特に、記事の執筆における情報収集など、時間が必要とする行程を少しでも効率よく進めたい方にオススメします。 便利なクロームの拡張機能15選 1.Buffer TwitterやFacebookなどのSNSへの投稿が同時予約できる機能です。 BufferのChrome拡張機能をインストール後、SNSの投稿ページを見ると、新しいBufferボタンが出てきます。これのボタンを使って投稿すると、時間指定ができるというシステムです。 無料で利用できるのは10回までで、以降は有料となります。 参考： 連携できるSNSはTwitterやFacebookを含めて6種類！自動投稿ツール「Buffer」とは？

ビジネスにおいて、情報収集は欠かすことができません。 そのためには、日々、少しでも多くの情報に触れ、効率よく短時間で情報を得ることが重要になります。 今回は、情報収集をする際に有効活用できる、Google Chromeの拡張機能20選をご紹介します。 どの拡張機能も、インストールするだけで直感的に使用できる便利な機能ばかりなので、気に入ったものがあれば活用してみてください。 オススメのChrome拡張機能20選 1.情報収集編 ●Black Menu https://chrome.google.com/webstore/detail/black-menu-for-google/eignhdfgaldabilaaegmdfbajngjmoke?hl=ja Googleの各種サービスにすぐにアクセスできるChrome拡張機能です。 ツールバーに配置されているボタンをクリックするだけでメニューが