ブロガーがモバイル表示を確認するのに超おすすめなブラウザ「Blisk」

Blisk（ブリスク）というのが何のことかわからないかもしれませんが、Webページを表示するWebブラウザの一つです。

モバイル（スマホやタブレット）とパソコンの表示を同時に確認できるのが大きな特徴になってます。しかもChromeのデベロッパーツールと同じ再現性で。

レンダリングエンジンがChromeと同じで表示が速く、Chrome拡張機能が使えるので互換性が高いのもポイント。

普段からChromeを使っている人なら同じ環境にするのも難しくないんじゃないでしょうか。

公式の動画が1分ちょっとでまとまってて、動く様子がわかりやすいと思います。

今まで自分のWebサイトのモバイル表示を確認するためにスマホ実機やデベロッパーツール使ってた人には非常におすすめできます。

なんつってもBliskでページ開くだけなので簡単です。それでいて表示が速くて精度も高いのでかなりのコスパになってます。

この記事ではBliskのインストールから使い方、参考サイトなどを紹介してます。

Bliskのインストール

↓Bliskのダウンロード・インストールはこちら

公式：Download Blisk – a browser for web developers

DOWNLOAD BLISKボタンをクリックするとOSの選択画面が出てきます。

Windows・Mac・Linuxの選択肢の中から使用しているOSを選択してDOWNLOAD BLISKをクリックするとダウンロードが開始されます。

ダウンロード開始と同時に「Bliskのアカウントを作成しますか？」と聞かれますが、モバイルを確認するだけならBliskのアカウントを作成する必要はありません。

↓この画面は閉じても大丈夫です。

※Bliskアカウントでログインした状態だとアナリティクス機能やスクリーンショット機能が使えるとのことですが今回はそこまでやってないので割愛してます。

Bliskの使い方

Bliskは特に初期設定に時間をかけなくても、とりあえずモバイルとパソコンの表示を同時に確認できるので最初から便利な状態です。

その他、Blisk特有の操作方法を少し覚えればすぐに快適に使えるはずです。ちょちょいと使いながら操作をまとめてみました。

モバイルとパソコンの表示を同時に確認できる

何と言ってもこれがBliskを購入した一番の目的で、特に設定することも無く、ページを開くだけでパソコンとモバイルを同時に確認することができます。

↓左側にモバイル、右側にパソコンの画面が表示されます。

このモバイル表示はウィンドウサイズをいじっただけの簡単な表示ではなくて、Chromeのデベロッパーツールと同じような見た目と操作感で表示の精度も申し分ないのがすごいところ。

今までChromeだったらモバイル表示を確認するために、

という手順を踏んでいたのでだいぶ時間短縮になります。

フルハイビジョン（横幅1920px）のモニターで、PCサイトの横幅が1000px程度ならスマホの表示を最大にしてもちょうど良いバランスで見ることができます。

モバイルとパソコンのスクロールが同期する

パソコン・モバイルどちらをスクロールしても、常に同じ部分が表示されるようにスクロールを調整してくれます。

画像・リンク・ソースコードなどがパソコンとモバイルどちらもちゃんと表示されているのか確認できるので非常に重宝してます。

ちなみにスクロールの同期は初期状態でオンになってますが、設定でオフにすることもできます。

↓オフにする場合は画面右上のボタンをクリックして、

↓scroll syncのスイッチをオフにすればスクロールが同期されなくなります。

モバイル端末の切り替え

モバイル表示はいろいろな端末にすることができて、左側にある一覧をクリックするだけで簡単に切り替えられます。

最初から用意されている端末は以下のとおりで、自分で自由なサイズに変更はできないみたいです。

でもとりあえず小さいスマホからタブレットまで一通り揃っているので一般的な動作確認なら不便になることはありません。

モバイル表示のオンオフ切り替え

右上のほうにあるボタンをクリックすると、モバイル表示をオフにすることができます。

モバイル表示をオフにすれば普通のWebブラウザになるので、Bliskをメインブラウザにして、モバイルを確認したい時だけオンにするといった使い方も可能です。

モバイル表示の回転

モバイル表示は初期状態は縦ですけど、横に回転もできます。タブレットの横向きを確認する時に使うことがありそうですね。

こういう表示切替がいちいちデベロッパーツール使わなくてもボタン一発でできるのは本当に便利。

モバイル画面の拡大縮小

これはBlisk特有の操作方法なので覚えたほうが良さそうです。

ChromeのつもりでCtrl+＋のショートカットキーを使って拡大しようとしてもパソコン表示だけ拡大されてしまいます。

モバイル画面を拡大縮小したい場合はShiftを押しながら上下にドラッグするとできるので覚えておきましょう。

モバイル表示領域の調節

モバイルとパソコンの境界線を左右にドラッグすると、それぞれの表示面積を調節することができます。

主にタブレットの表示確認で画面を大きくしたい時に使ってます。

デベロッパーツールを開く

BliskはChromeと同じようにデベロッパーツールを使うことができます。起動方法も一緒。

Bliskならではの注意点として、F12やCtrl+Shift+Iなどのショートカットキーを使ってデベロッパーツールを起動するとパソコン側のソースが表示されてしまいます。

モバイル側のデベロッパーツールを起動したい場合は、モバイルの画面を右クリックしてからInspect elementをクリックすると起動できます。

これもBlisk特有の操作だろうから覚えておいたほうが良さそうです。

Chrome拡張機能がBliskでもそのまま使える

なんと、BliskはChrome拡張機能がそのまま使えます。

インストールの仕方もChromeと同じようにクロームウェブストアから「Chromeに追加」ボタンをクリックするだけでOK。

※拡張機能によってはBliskで動かないものもあります。自分の使っているものでは1Passwordが動作しませんでした。

ただし、拡張機能をたくさん使っている人にとっては残念なことに、BliskにはGoogleアカウントでのログイン機能がないので、自動で拡張機能やブックマークを同期させることはできません。

ブックマークはChromeでエクスポートしてからBliskでインポートすれば一括移行が可能ですが、拡張機能はひとつひとつクロームウェブストアから追加していきました。

ローカル環境の編集内容を自動でBliskに反映できる

Bliskのもうひとつの目玉機能として、監視フォルダを設定しておけばローカルで編集した内容を自動でBliskに反映できる「Auto-refresh」という機能があります。

といっても自分はローカル環境を構築していないので実際に使っていません。Bliskのローカル環境については以下の記事で実際に動いている内容を見れるのでどうぞ。

参考：WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた｜寝ログ

寝ログではローカル環境構築について他の記事も充実しているので、「ローカル環境」などでサイト内検索もしてみると良いと思います。

まとめ

ガチでサイト制作を行っている人はもっと他に良い手段があるのかもしれませんが、Bliskの強みは何と言っても導入コストが低くてコスパが良いところなので、個人ブロガーにもおすすめできます。

完全に実機と同じかどうかはわからないので最終的なチェックは実機でするかもしれませんが、今まで何回も確認していた回数と時間はだいぶ減らせると思います。

公式：Blisk

＜関連＞
⇒おすすめのChrome拡張機能

⇒Chromeの拡張機能にショートカットキーを設定する方法