Webサイトのスクリーンショットやデザイン確認を行うとき、ブラウザ右端のスクロールバーが気になることはありませんか？
とくにWindows版のChromeでは、スクロールバーが常時表示される仕様なので、レイアウトの印象を変えてしまうこともあります。
そこで便利なのが、スクロールバーを非表示にできる拡張機能「Hide Scrollbar」です。
「Hide Scrollbar」でできること
機能は至ってシンプルで、Hide Scrollbarを有効化すると、ブラウザのスクロールバーが非表示になります。
Windows版Chromeで、デモサイト（WordPressテーマ「AIDER」）を閲覧した際の見え方の違いです。
スクロールバー有り
スクロールバー無し
Windows版Chromeの場合、ページの表示領域まで変わってしまいますので、右端のスクロールバーが無い方が綺麗ですね。
※Mac版Chromeでは、スクロール時以外は自動で非表示になります。お使いのOSで気になるときだけ使えばOKです。
インストール
Chromeウェブストアの「Chromeに追加」から、Hide Scrollbarをインストールできます。
どんなときに使う？
やはりWeb制作の現場でもっとも重宝します。たとえば、こんなシーンですね。
- Webサイトのスクリーンショットを撮影するとき
- デザインレビューや第三者への共有するとき
- テストサイトやモックアップをブラウザ上で確認するとき
スクロールバーが表示されたままですと、視線を奪われやすいですし、静止画にスクロールバーは無い方がいいです。
とくに、ブログ記事に挿入する画像などに、スクロールバーが映り込んでいると美しくありません。
デザイン確認時のノイズ排除という点で、制作環境に忍ばせておくと便利です。
まとめ
スクロールバーは本来、ユーザーにとって必要なUI要素ですが、デザインやレイアウトの確認時には余計な存在になることがあります。
「Hide Scrollbar」は、そんなときにだけサッと使える、シンプルな拡張機能です。スクショも細部までこだわりたい方は、Chromeに追加しておくと便利です。
スクリーンショットに関するおすすめ記事
アプリやウェブサービスの使い方を記事で説明する時にパソコンやスマホの画面をスクリーンショット（キャプチャ）して、使うことが多々あります。マニュアルを作る際にもスクリーンショットは欠かせないスキルです。ただ、スクリーンショットはただ取得すればいいわけではなく、見せ方が重要になります。どこをどう見せるか...
スクリーンショットの共有時におすすめなツール「Gyazo」をご紹介いたします。 ワンタッチで画像URLを共有できて、手元に不要なファイルも残らず便利です。無料で使えてWebサイトやアプリの制作現場でも重宝します。 Gyazoでできること・便利な仕様 Gyazoでできること・便利な仕...
Webサイト（ホームページ）の見え方は、どのデバイス（PC・タブレット・スマホ）で見るかによって異なります。レスポンシブデザインのサイトであれば、デバイスに合わせて表示が最適化されるからです。 そのため、Webサイト制作時にはできるだけ多くのデバイスで見え方を確認する必要があります。 で...
コメント