Webディレクター向けChromeアドオン10選（基本編）
目に青葉山ほととぎす初鰹。みなさまいかがお過ごしでしょうか。ディレクターをしているluckyと申します。ゴールデンウィークが終わり、早くも夏休みに思いを馳せている方々も多いかと思います。私もそのひとりですが… ここはひとつ気合を入れるべく、ビシッ！と業務改善に繋がるようなGoogle Chromeのアドオンをご紹介させていただきます。今回はディレクター業務を行う上で便利だと感じた、ごく基本的なものを10個チョイスしてみました。 目次 そもそもアドオンってなに？ Awesome Screenshot QRcode maker ColorZilla 文字数カウンタ Cache Killer Page Ruler ウェブタイムマシン Ghostery AdMatrix Analytics Evernote Web Clipper 結論 そもそもアドオンってなに？ ・ブラウザに新機能を追加できる簡
YouTubeはもっと楽しめる！ そう、Chrome拡張機能「Playjack」を入れればね | ライフハッカー・ジャパン
Google Chromeはブラウザそのものにも便利な機能がたくさん備えられていますが、それに加えて脅威的な数の拡張機能が用意されています。数ある拡張機能のなかでも、動画のストリーム再生関連の拡張機能をお探しであれば「Playjack」がおすすめです。 Playjackは無数にあるYouTubeチャンネルからの動画の検索、再生、共有、整理を可能にしてくれる拡張機能。無限ストリーミングモードをオンにすれば動画を次々に再生し続けることもでき、プレイリストにも対応しているので再生リストをカスタマイズすることも可能。作業用BGMのプレーヤーとしても最適なのです。 動画を見る、だけじゃない インストールするとアドレスバーの右側にPlayjackのボタンが表示されます。クリックするとアプリが起動。YouTubeチャンネルをブラウズする以外にも、特定のトピックに関する最新コンテンツを自動的に取得できるよ
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ こんにちは、デザイナーの王です。 今回の記事では、ChromeのDevTools（デベロッパーツール）について、「多分、周知されていないけど、使わないともったいない！」的な機能を紹介させて頂きたいと思います。 フロントエンジニアにも、デザイナーにも、きっと効率アップに繋がる小技が見つかるはずです。 開発者なら「Chrome Canary」を使おう！ みなさんはChrome Canaryを使っているんでしょうか？一般向けにリリースされている安定版であるChromeより、ほぼ毎日アップデートしている「Canary」ビルトを選ぶ理由があります。 それは、開発者向けの新機能がいち早く利用できるからです！リリースがノロノロしているChromeを使ってたら、いつまでも最新の便利な機能の恩恵が受けられ
ウェブサイトの制作に携わる全ての人に役立つスタイルガイドを簡単に作成できる -Style Guide Boilerplate
ウェブサイトのデザインや実装の一貫性を促進するために、制作に携わる全ての人に役立つスタイルガイドを簡単に作成できるテンプレートを紹介します。 現役時代、独自のテンプレートを使ってましたが、こういう便利なものがリリースされる時代なのですね（遠い目 Style Guide Boilerplate Style Guide Boilerplate -GitHub Style Guide Boilerplateの紹介の前に、スタイルガイド未体験の人用にどのように役立てるか簡単に説明します。 ウェブサイトのデザインや実装方法を定義し、一貫性を促進する。 モジュール形式の考え方を促進する。 ページを作成する際にパーツやエレメントで迷わないようにする。 ウェブサイトを効率的に管理する。 スタイルガイド制作のタイミングとしては、草案を制作中に作りつつ、納品時には定義が全て網羅されている状態がベストではないで
Anatomy of a Mashup: Definitive Daft Punk visualised
A mashup is a song created by blending two or more other songs. The more complex a mashup gets, the harder it is to distinguish the parts that are being used to create what you're hearing. This visualisation of the song "Definitive Daft Punk" by Cameron Adams dissects a mashup in realtime to show you how each of the 23 parts contributes to the greater whole. Better performance in Chrome or Safari
米Google社員が語った、作業が捗るGoogle Chromeテクニック20個！ – 和洋風KAI
和洋風KAIは、Apple・水樹奈々・食べ歩きが三本柱のブログです。モットーは「楽しく」「便利で」「端的に」。 ⇒ アバウト ⇒ 免責事項 1．テキストのみコピペする方法。 リッチテキストエディタなどを使っていると、ブラウザからテキストをコピペした場合、画像なども付いてくる場合があります。 そんな時は「Control+Shift+V（Macだとcommand + shift + V）」を使ってペーストすると、テキストのみ貼り付けることが出来ます。 2．最後に閉じたタブを復活させる方法。 誤ってタブを閉じてしまった時は、「Control+Shift+T（Macだとcommand+shift+T）」とショートカットキーを叩くと復活させることが出来ます。 3. タブにマウスを置くと、ウェブページのタイトルの全てが読める。 Google Chromeはタブを開きすぎるとタブがとても小さくなってタイ
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
要素内容に依存する幅の指定について
要素内容に依存する幅の指定についてのメモです。 これらは「CSS basic box model（草案）」に記載されており、MDNのページに分かりやすく説明されています。 本来、これらは幅だけでなく高さの指定にも使えるようなのですが、まだ実装されていませんので確認できません。 2013年4月現在、幅の指定として使えるブラウザはFirefoxとGoogle Chromeです。Safariでは動くんですかね。最新版ないから分かりません。 available or fill-available包含ブロックから該当要素のマージン、ボーダー、パディングのサイズを引いた幅。 現在、Firefoxは-moz-available、Chromeは-webkit-fill-availableで動作します。max-contentややこしい計算式があるんですが、とりあえずは該当要素が取りうる最大の幅として覚えてお
Wikipedia画像をクリック一発で自動検索するChrome拡張機能『Image Dictionary』 | ライフハッカー・ジャパン
Chrome：初めて聞く動物や食べ物、グラビアアイドルの名前を画像検索することが多いという方は、キーワードに関連するWikipedia画像をマウスクリックで自動表示してくれるChrome拡張機能『Image Dictionary』がオススメです。検索したい単語をハイライトしたらマウスを右クリック、または「Alt」キーを押しながら単語をダブルクリック。その単語のWikipediaエントリーの最初の画像がブラウザウィンドウに表示され、クリックすると画像を閉じることができます。また、Wikipediaページへのアクセスも可能です。 なかなか便利な拡張機能なのですが、Wikipediaページには複数の画像が使用されていることも多いので、もっと閲覧できるようになるとさらに便利に使えそうです。誰にでも便利！ というわけではありませんが、画像検索をしばしばする方ならば、試してみる価値はあるでしょう。 I
閲覧履歴を見た順にまとめてくれる拡張機能「ヒストリーマップ」 | ライフハッカー・ジャパン
「ヒストリーマップ」はGoogle Chromeの履歴をページ遷移順にまとめてくれる拡張機能です。ブラウザの履歴をみても、時系列で並んでいて、どのように自分が遷移してどんなページをみたかまで詳しくは把握できないですよね。この拡張機能をいれると、自分がどのページからどこに遷移したかがひと目でわかるようになります。過去のページをたどるときにとても便利ですよ。 以下に使ってみた様子を載せておきます。まずヒストリーマップへアクセスしましょう。Google Chromeにインストールします。 いくつかのページを開いたり閉じたりしてみましょう。その後、ヒストリーマップを開くと上記のような履歴が表示されます。どのページからどのページにアクセスしたかがひと目で分かりますね。ある意味自分の行動履歴が把握できるので、長時間ブラウジングしたあとに見てみると、なかなか楽しかったりします。 ヒストリーマップ （カメ
ワンステップで類似画像検索ができるChrome拡張機能「Fast Image Research」 : 二十歳街道まっしぐら
Fast Image Researchはワンステップで類似画像検索できる拡張機能です。 検索したい画像の上でメニューをひらき、「Research Image」を選択すれば、 その画像をもとに類似画像検索してくれますよ。 画像のURLをコピペしたりするの面倒なので、入れておくとはかどりますねっ！ 以下に使ってみた様子を載せておきます。 まず「Fast Image Research」にアクセスしましょう。 Chromeに拡張機能をインストールします。 類似画像検索をしたい画像の上で右クリックしてメニューを開きます。 「Research Image」から類似画像検索できますよ。 画像のURLをコピーして、Google画像検索にペーストしてといった作業がなくなります。 類似画像検索をよく利用する方はぜひ導入してみて下さい。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
“Gmail”や“Evernote”で“Markdown”記法を利用可能にする「Markdown Here」NOT SUPPORTED