ホームページ制作・大阪インフォメーションメディアデザイン

06-6809-5021

Column
コラム

オンラインで相談する

2021年、デザイナーの強い味方!Webサイト公開前に使いたいChrome拡張機能(無料)。

  • Twitterでシェア
  • このエントリーをはてなブックマークに追加
  • Google+でシェア
  • follow us in feedly
2021年、デザイナーの強い味方!Webサイト公開前に使いたいChrome拡張機能(無料)。

作業効率をアップしてくれる便利なプラグインや
オンラインツールをたくさん見かけるようになりましたが、
その中でも、デザイナーの私が日頃からたくさん助けられているのがChromeの拡張機能。
PhotoshopやXDなどのデザインソフトと同じくらい、
Web制作の現場では欠かせないツールです。
今回は、Webサイト公開前のコーディングチェックや検証作業で使いたい
Chrome拡張機能を3つご紹介します。

MarkUp For Chrome(修正指示を直接Webページに書き込める)

これまで、スクリーンキャプチャなどの
静止画にコメントを書き込めるサービスはいくつかありましたが、
MarkUp For Chrome」がそれらのツールと大きく異なる点は、
公開されているサイトのWebページに直接コメントを残せるところ。
ページ遷移やデバイスを切り替えながら、リアルタイムに修正箇所をチームで共有できます。

【お気に入りポイント】
・無料で使える
・マルチデバイス(PC/タブレット/スマホ)に対応
・プロジェクト・コメントの追加数が無制限
・UI/UXが直感的で、画面操作がものすごく簡単

※会員登録(メールアドレス・氏名)が必要です
※チーム管理等の機能が追加された有料プランも近日公開予定

私としては今のところ、
ページ数がそんなに多くない小規模・中規模サイトのプロジェクト向きのツールかなと思ってます。

 

WARP ワープ(パソコンの画面操作録画をURLで共有できる)

ブラウザ検証やアニメーションなどの動作確認をしていると、
画面キャプチャや言葉だけではなかなか伝わらず、
チェックバックのやりとりが重なってしまうことが多々あります。
そんなモヤモヤを解消してくれる今どきツールが「WARP ワープ」です。

実際の画面操作録画を見てもらいながらコメントできたら、
コーダーさんやエンジニアさんにも、伝わりやすいですよね。

ツールバーのアイコンをクリックして「タブ録画」か「画面全体録画」どちらかを選択すると、
カウントダウンのあと、すぐに録画が始まります。
左下に表示される停止ボタンを押すと、すぐに編集画面に遷移してURLが発行される仕組みです。

【お気に入りポイント】
・無料で使える
・URL発行~共有までがスムーズ
・字幕機能で、挿入位置と表示秒数を指定できる
・mp4形式でデータダウンロードも可能

※会員登録または、Google、Facebook、Githubどれかひとつのアカウントでサインインが必要です
※動画編集は「字幕追加」「サムネ変更」のみ

細かい編集機能はないので、動画データとしての流用性は低めですが、
URL発行までの導線がスムーズで、面倒な設定もないので気軽に共有が可能です。

 

Responsive Viewer (1画面に複数サイズの画面を表示できる)

レシポンシブデザインのWebサイトをスマホやタブレットごとに表示チェックする時の、
便利なお助けツールが「Responsive Viewer」です。

このツールが公開されたのは少し前ですが、
Chrome拡張機能のチェックツールの中でもとくに操作性がよく、使いやすいのでおすすめです。
(無料で使えます)

デバイスの検証作業自体は実機で行いますが、
様々な画面サイズを一括で表示できるので、
このツールと合わせて検証作業を行うと動作確認もスムーズです。

【できること】
・表示させるデバイスサイズの追加・変更・削除
・クリック・スクロールの同期(全サイズ同時に動かしながら表示)
・画面の縦並び・横並びの変更
・スクリーンキャプチャ

機能はそれほど多くはないですが、単純明快なところがお気に入りです。

このツールとは異なりますが、似たUIの無料アプリも公開されています。
もう少し機能が充実してた方がよいかな?という方はこちらもおすすめ↓
●Responsively App: A Web Developer’s Browser
https://responsively.app/

 

今年さいごに

地味にすごくてかっこいい、Chrome拡張機能を3つご紹介しました。
最後までお読みいただき、ありがとうございます。

2020年は、何かと大変な年でしたね。

Web制作者のみなさん、

何はともあれ、2021年も色々なツールを組み合わせて

Webサイト公開作業をどうにか乗り越えましょう!

良いお年を~~~

この記事を共有する

その他の最新コラム記事

人気記事ランキング

コラムカテゴリ
  • このエントリーをはてなブックマークに追加
  • follow us in feedly
お問い合わせ