生産性爆上がり時短術！Webデザインにおすすめの便利ツール15選

Alfred

こちらのアプリはMacのランチャーアプリです。

Mac内にある、あらゆるアプリケーション、フォルダ、ファイルなどを素早く呼び出せるアプリです。
自由にカスタマイズができるので、自分の使いやすい設定にすることが可能です。

これぞ生産性爆上がりツールです。

使用シーン

Yoink（有料）

こちらは有料アプリになりますが、価格以上の価値がありますので買って損はありません。

一言で言うとファイルを一時的に保管する場所です。

こういった経験はありませんか？

・ファイルを一旦デスクトップに置く
・そして、目的のフォルダを探して開く
・フォルダが重ならないように縮める
・ファイルを目的のフォルダに入れて閉じる

これだと元々デスクトップにファイルがたくさんある中にさらにファイルを置くとファイル同士が重なったり、どこにあるか探したり、見た目が悪いです。

そんな小さなストレスをなくしてくれるのが、Yoinkです。
Yoinkにファイルを一時的に保管し、目的のフォルダにドラッグ&ドロップするだけです。

実際に使ってみるとわかりますが、かなりの時短になります。

使用シーン

flex layout Generator

こちらはcssのレイアウト技法のひとつである「フレックスボックス」を自動生成してくれるcssジェネレーターサイトです。

Webサイト制作でよく使うcssプロパティーはジェネレーターサイトを活用しましょう。

font-awesome

誰でも簡単にWebアイコンフォントを使えるサイトです。

無料プランでも1000種類以上のアイコンが用意されているので、わざわざPhotoshopやIllustratorでアイコンを作成しなくても、font-awesomeを使えばあっという間にアイコンを用意できます。

使い方も超簡単なので、ぜひ試してみてください。

storyset

無料で人物やあらゆるシーンのイラストをダウンロードできる便利なサイトです。

ひとつひとつのイラストが無料とは思えないくらいクオリティーが高いです。

イラスト自体もシンプルで汎用性が高いのもおすすめする理由の一つです。

ColorPick Eyedropper

Webサイトを構成しているあらゆるパーツのカラーコードを瞬時に教えてくれる拡張機能です。

【使い方】
・ツールバーにあるアイコンをクリック
・対象の色の上にカーソルを合わせる

使用シーン

Google 翻訳

閲覧しているWebサイトを簡単に翻訳できる拡張機能です。

【使い方】
・対象テキストをマウス選択
・右クリックで「Google 翻訳」をクリック

Image Downloader

閲覧しているWebサイトの画像を一括ダウンロードすることができる拡張機能です。

【使い方】
・ツールバーにあるアイコンをクリック
・ダウンロードしたい画像を選択
・Downloadボタンをクリック

使用シーン

The QR Code Extension

閲覧のWebサイトのQRコードを生成してくれる拡張機能です。

【使い方】
・ツールバーにあるアイコンをクリックのみ

私は主にWeb制作中のサイトをスマホで確認したい時に使っています。

使用シーン

WhatFont

閲覧しているWebサイトのフォント詳細を瞬時に表示してくれる拡張機能です。
注意）画像化されているテキストは取得できません。

【使い方】
・ツールバーにあるアイコンをクリック
・対象のテキストの上にカーソルを合わせる

私は参考にしているWebサイトのfont-sizeやfont-familyなどを確認しています。

使用シーン

CSS Peeper

Webサイトのあらゆる要素がどのcssプロパティーで構成せれているのか把握できる拡張機能です。

【使い方】
・ツールバーにあるアイコンをクリック
・対象の要素の上にカーソルを合わせる

直感的な操作で使うことができるので超おすすめです。

使用シーン

PCスタンド

普段からノートPCを使用している人は必須アイテムです。

単純に高ければいいってものではありませんので、高さ調整が可能なPCスタンドがおすすめです。
PCを平面に置くより斜めにして置くのがおすすめの使い方です。

おすすめのPCスタンドはこちらです。

楽天1位 zenlo ノートパソコンスタンド PCスタンド ノートpcスタンド … 価格：4280円（税込、送料無料) (2022/7/10時点)