2017年のデザイナー向けの7つの非常に有用なChrome拡張機能

7 Webデザイン効率を改善するためのChrome拡張機能

コアポイント：

• Chrome Extensions設計プロセスを簡素化し、ブラウザを離れることなくWeb要素をチェックおよび編集し、チェックをリンクし、複雑なCSSコードを生成するツールを提供します。
ページルーラー、WhatFont、CSS3ジェネレーター、私のリンク、Gravit Designer、Colorzilla、StyleBotなどの拡張機能は、カラーサンプリング、フォント認識、リアルタイムWebサイトのカスタマイズなどの機能を提供するデザイナーにとって特に役立ちます。
これらの拡張機能を使用すると、時間を節約し、他のソフトウェアの必要性を減らすことができ、デザイナーや開発者にとって貴重なリソースになります。

各デザイナーには、独自の働き方があります。ブラウザで直接デザインしている場合（コードを使用）、ブラウザのみを使用してリアルタイムでWebデザインをテストする場合でも、ワークフローを大幅に簡素化できる多くのChrome拡張機能があります。私が一番嫌いなのは何ですか？比較的小さなタスクを完了するために巨大なデスクトップアプリを開く必要があったので、一般的な設計上の問題を迅速に解決できるChrome拡張機能を探していました。

ここに私の7つの重要なChrome拡張機能と、Firefoxの6つのデザイナー拡張機能があります（Web開発者の場合、すべてのブラウザでクロステストする必要があるかもしれません！）。

1. ページルーラー

ページルーラーは、ブラウザ内の要素の場所やサイズを見つけるための有用なクロム拡張機能です。これは、Chromeコードインスペクター、またはさらに悪いことに、CSSファイルを横断する不器用なトラバースを使用するよりも速いです。まず、交差点を使用して、ターゲット要素の周りに選択ボックスを描画します。ブラウザの上部にあるバーには、要素の長さと幅、および画面の両側からの距離が表示されます（固定/絶対的な位置付けが適用されているようです）。

ヒント：矢印キーを使用して、最大限の精度を得るために選択を微調整します。

2. whatfont

フォントのサイズ、実際のフォント名、および特定のテキストブロックで使用されている色を確認するために、Webページのフォントをチェックする必要があることがよくあります。

任意のテキストセクションをクリックして、16進数/RGBA値、厚さ、ラインの高さ、フォントスタイル、フォントシリーズを見つけます。

ブラウザの下部にクロムチェックウィンドウを追加すると、作業中に干渉を引き起こす可能性がある場合があります。そのため、チェックウィンドウ全体を開かずにこのすべての情報を取得できると、物事が簡単になります。

3. css3ジェネレーター

CSS3ジェネレーターは、CSSコードスニペットを覚えるのが複雑または困難なものを生成するのに役立つChromeアプリケーションです。単純なことは必要ありませんが、それに直面してみましょう。一部のCSS値はゼロから書くのが困難です（クロスブラウザー互換勾配の作成やCSS変換が必要です）。わずか数回クリックするだけで、非常に便利なCSSを生成し、拡張機能のプレビューでプレビューし、CSSをコピーして実際のCSSファイルに貼り付けます。

以下は、サポートされているコンテンツのリストです：

• 複数のテキストシャドウ
• Hexadecimal/rgbaコード
• CSS変換
• 境界半径
• 複数のボックスシャドウ
• CSS列
• 矢印（ツールチップ用）
• gradial（線形、radial…さらにはストライプ）

4. 私のリンクをチェックしてください

urlタイピングエラー（またはそれらを完全に含めるのを忘れるが、それは別のことです）は非常に簡単です。したがって、顧客が既存のウェブサイトから助けを必要とするか、ゼロからウェブサイトを構築するかどうかにかかわらず、リンクをチェックしてくださいWebデザイナーにとって不可欠です。

私のリンクがWebページをスキャンして壊れたリンクを探していることを確認してください。それは簡単です。手動でチェックする手間からあなたを救います。 UIは非常に直感的です。私のリンクを確認してください無効なリンクはリストされていませんが、実際のWebページの破損したリンクを赤に変えるだけで、有効なリンクが緑色に表示されるため、確認する必要があるものを一目で確認できます。単純！

5. Gravit Designer

グラフィックを設計する必要があるが、リソース集約型のデザインアプリを開きたくない場合（または、購入したくない場合/希望しない場合）、Chrome用の無料Gravitデザイナー拡張機能をダウンロードしてください。

驚くべきことに、それは非常に速いです。ブログのグラフィックス、ソーシャルメディアグラフィックス、一般的に使用される印刷サイズのプリセットなど、一般的なアートボードサイズでデザインを開始するのは非常に簡単です。 Gravitはベクター設計アプリケーションであるため、スケーラブルな解像度に依存しない設計を非常に簡単に設計できます。

私は多くのオプションと機能に驚きました - Sketchのような高度な設計アプリケーションを使用することとそれほど違いはありませんが、Visual UIはアフィニティデザイナーのように感じられます。

形状、アライメント、フリップ、回転、ぼかし、投影、複合形状の作成など、明らかな要素が予想されます。また、PNG、JPG、SVG、PDFにエクスポートすることもできます。SketchやAdobe XDなどの象徴的な機能、BezierとBezierの曲線を備えた複雑なSVG編集ツール、さらにはフィルター、さらにはGravit Designerは、専門家にとって非常に魅力的なオプションです。マーケティンググラフィックを作成したいデザイナー、写真家、アマチュアデザイナー。

つまり、Photoshop、Illustrator、Sketch、またはAdobe XDを開かずにGoogle Chromeでデザインを作成できることを想像してください。実際、今すぐGravitデザイナーを無料でダウンロードできると想像する必要はありません！

6. colorzilla

ColorzillaはGoogle Chromeのストローツールです。これにより、数回クリックしてWebページの色をサンプリングできます。まず、ChromeのColorzilla Extensionアイコンをクリックし、サンプリングするエリアにカーソルをホバリングします。その色のHSL、16進数、およびRGBA値を取得します。通常、Webサイトのスクリーンショットを撮影してPhotoshopにインポートする必要がありますが、Colorzillaはより速いです。 Colorzillaは、あらゆるWebサイトに基づいてオンデマンドでカラーパレットを生成し、ColorPick Eyedropperなどの競合他社の間で際立っているカラー履歴機能を使用して、最近使用した色を保存することもできます。

7. stylebot

StyleBotは、ライブWebサイトでカスタムCSSをすばやく試してみたい人にとって便利なChrome拡張機能です。コードエディターとGoogle Chromeの間を行き来することなく、さまざまなフォント、さまざまな色、さまざまなスタイルなどを試すことができます。 StyleBotは、コードベースに実際にコミットする前に、リアルタイムWebサイトで小さな調整と変更をプロトタイプする方法として非常に便利であることがわかりました。

結論

これらの時間節約拡張機能を使用するタスクは通常、退屈であるか、数回クリックしてソフトウェアを開く/購入する必要があります。デザイナーと開発者は、これらのChrome拡張機能が非常に便利だと感じるでしょう。

Chrome拡張機能は、Webサイトを開発する人にとっては確かに便利ですが、ライブWebサイトから視覚情報を抽出してSketch、Adobe XD、またはPhotoshopで使用したいデザイナーは、明らかな時間節約のメリットも非常に迅速に表示されます。 。

（擬似オリジナルの目標と一致せず、長いため、FAQの部分は省略されています。必要に応じて、FAQの部分は個別に生成できます。

以上が2017年のデザイナー向けの7つの非常に有用なChrome拡張機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。