Webデザイナーのみなさま、作業中に「この作業を効率的にできたら、もっと早く仕事がこなせるのに・・」というような悩み、一度は思ったことありますよね？悩んでいるあなたに、いくつかの便利ツールをご紹介します！
おすすめのブックマークレット
まずはWeb制作におすすめしたいブックマークレットをいくつかピックアップ。
ブックマークレットとは、通常、ブラウザでお気に入り（ブックマーク）を選ぶと指定のホームページに飛びます。ブックマークレットは、登録URLの代わりにJavaScriptで構成されたプログラムをブックマークすることで、選んだ時に指定のプログラムがページで実行され、早く、簡単に機能が実現できるのです。インストールもお手軽で、コードをブックマークするだけで行うことができます。
画像のalt属性を一発で確認出来るブックマークレット
web制作中に、画像を入れて、altが入っているか、最終チェックが必要ですよね。便利なのが、ご紹介するブックマークレット。
例えば、Yahooのトップのaltを確認しようとすると、画像のような表示になります。少し画面が崩れますが、画像のalt属性を全て検証モードで確認するよりは手軽に確認ができ、web制作の効率がアップしますね。
alt属性を確認するブックマークレット。｜trustworks
HTMLタグの閉じ忘れを教えてくれるブックマークレット
web制作中に、閉じタグ忘れ、よくありませんか？ご紹介するブックマークレットは、閉じタグが多かったり少なかったりするのを教えてくれます。急なページの崩れが起こったら、まずブックマークレットで確認してみましょう。
HTML内タグの閉じ忘れをチェックするツール[ブックマークレット]｜とっくりばー
フォントの名前を知らせてくれるブックマークレット
サイトでなんのフォントが使われてるんだろう？とweb制作中に気になった方におすすめのブックマークレットです。検証モードでcssを探さなくても、なんのWebフォントが使われているか教えてくれます。
レスポンシブWebサイトのデバイスサイズ別チェックできるブックマークレット
クロームなどは特に拡張機能でも同じようなものがありますが、よりデザイン的で、より視覚的で見やすいですね。デザインも整っているので、レスポンシブが楽しくなりそうです。
ただし、ブラウザ幅を取得し、viewport（ビューポート）でデバイスサイズ別に表示させているサイトでのみご使用頂けます。アクセス時にパソコンかスマートフォンかを取得して振り分けているサイトにはお使いいただけませんので、お気をつけて。
VIEWPORT RESIZER｜maltewassermann
画像や要素の幅や高さ、プロパティを表示できるブックマークレット
web制作をしている時に、画像や要素の幅・高さを、いつも検証モードで調べているのですが、パッと確認したい時にはオススメです。背景画像のサイズ取得までできれば最高なのですが、背景の時はブロック要素のプロパティを取得してしまうようなので、まだ検証モードが必要そうですね…。
XRAY: look beneath the skin｜westciv
META、短縮URLなどのページ情報を一括で表示できるブックマークレット
titleやdescriptionなどのMETA情報をはじめ、サムネイルなど、ページの基本情報を見ることが出来ます。個人的に一番オススメなのは、短縮URLを表示できることですね。長いページの短縮URL発行にいちいちGoogleのサービスページまで飛ばないのは結構便利な気がします。
Get URL Info | ウェブページのあらゆる情報を取得、解析する Get URL Info
最新情報をいち早くお届け!
無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます！
その他、更新情報・イベント情報を
お届けいたします。
おすすめのChrome拡張機能
最近だと、標準ブラウザに動作の早いGoogle Chromeをお使いのユーザーも多いのではないでしょうか？Chromeにはたくさんの便利な拡張機能があります。拡張機能のインストール自体はとても簡単で、
から、欲しい拡張機能を選択するだけ。クリックしてインストールすれば、もう使うことができます。web制作がちょっと早くなる、おすすめChrome拡張機能をご紹介します。
ブラウザにデザインを重ねてコーディングチェックできるChrome拡張機能
htmlページにファーストデザインなどの画像をうっすらとしたレイヤーで乗せることができるChrome拡張機能です。レイヤーの透明度を変更する箇所や、矢印キーで細かな位置調整ができる箇所もあるので、PSDが分かれていたりしてもパーツごとに重ねてチェックもできますね。デザイン通りにコーディングされているかのチェック以外にもブラウザ上で画像を横に置いて比較したい時にも便利です。
PerfectPixel by WellDoneCode｜Chrome拡張機能
増えすぎたブラウザタブを整理させるChrome拡張機能
個人的な意見ですが、だいぶ画期的です。よく調べ物をしていると、ブラウザにタブが増えすぎますよね？私もよくなります。よく迷子になりますが、下手にタブを消すと、せっかくの参考サイトがURLわからなくなったりするので迷子の中探し回ることがしょっちゅうです。（都度閉じればいいんですけどね）
拡張機能があれば、 OneTabのメニューを押すだけで、1 つのタブにサイトのタイトルとURLを一覧で見やすく表示してくれるのです！いつもタブ迷子になっている方、ぜひインストールしてみてください。
1クリックでキャッシュをクリアできるChrome拡張機能
構築中のサイトのキャッシュがきつくて、画像やcssを差し替えるたびにキャッシュをクリアしなくてはいけない・・。もしくは、軽微なサイト修正があり、差し替えたはずのバナー画像が切り替わらない・・。
画像のURLを変えるのがベストですが、ちょっと修正したいだけなのに！というときも根強いキャッシュ。
キャッシュをクリアする方法はご紹介する拡張機能がおすすめ！
最近Chromeのキャッシュクリアが設定から2、3クッションおかないとクリアできなくなって、非常に面倒だと感じていた私には、かなり便利な拡張機能。
一瞬ボタンを押すと、アイコンが緑にふわっと切り替わるのですが、無駄な数秒をコンマ数秒に省けて大変重宝しています。毎度毎度のキャッシュクリアに辟易しているあなたは、ぜひChrome拡張機能を使ってみてください。
初心者向けのツール
web制作者向けのおすすめツールをご紹介してきました。ホームページを作成したことがない、無料で手軽に作りたいという方にはホームページ作成ツールはいかがでしょうか。
写真などをドロップすることで配置することができるのでおすすめのツールです。コードを書く必要がないので、簡単にホームページを作成することができます。また、テンプレートも沢山ありますので、Webデザインに悩むことも少ないのではないでしょうか。
他にもテンプレートやテーマなどがあるホームページ作成サービスや紹介記事は沢山ありますので、自分にあったツールを見つけてみてください。
おすすめツールのまとめ
ご紹介したおすすめツールで、特に初心者の方は毎日の制作が少しでも早くなり、ストレスフリーな制作に近づけられるといいですね。ぜひお試しください。
マーケティングでお悩みでしたら、
Bigmacにお任せください。
