レスポンシブWEBデザインコメントを書く最近、BLISKというブラウザが話題になっているのをご存知でしょうか?WEBサイトを閲覧するための一般的なブラウザ(Edge、Firefox、Chrome、Safariなど)というよりも、WEB制作をする開発者にとって便利なブラウザであることを目指して作られたブラウザです。WEBサイトの制作の効率化には間違いなくオススメまずは「BLISK」をダウンロードして、インストール!BLISKをブラウザで開きます。以下のようなサイトが開きますので、右上の「DOWNLOAD」をクリックしてください。BLISKを使用するOSを選択する画面になります。今回はWindowsを選択しています。(Mac版、Linux版もあります。)ダウンロードしたファイルをクリックしてインストールをします。「インストールしますか?」的な質問は全くないのはβ版だからでしょうか?インストールが終わると勝手にBLISKが開きます。※最初はインストールしないタイプのアプリケーションかと勘違いしてしまいました。最初はチュートリアルが開きますので、NEXTをポチポチ数回押すと、設定画面が開きます。設定しなくてOKです。Windowsのスタート画面にもしっかり登録されてますので、インストールが完了したらスタート画面から起動させればOKです。WEBサイトを表示するとスマホとパソコンの両方が同時表示ここまでで無事にインストールが完了したと思いますので、BLISKでWEBサイトを開いてみましょう。新しいタブを開いて、URLを書いてみてください。弊社のURLを入れてみました。URLを入力して、ENTERキーを押すと・・・なんということでしょう!スマホで見た時の画面とパソコンで見た時の画面が同時に表示されてるではありませんか!!しかも、スマホ側でも、パソコン側でもどちらかを選んでスクロールさせると、スマホの画面とパソコンの画面が同時にスクロールしていきます。最近のWEB制作はレスポンシブWEBデザインが主流ということもあり、常にパソコンの画面とスマホの画面とを行き来しながら開発を進めていくわけですが、パソコンだけにCSSを適用した時にスマホの画面ではデザインが崩れてたりすることがあったりするので、常に両方の確認をしていたのですが、これが1つの画面で同時に完了するというのは相当な効率化です。デベロッパーツールももちろん使えますBLISKはChromeと同じBlinkエンジンを利用しているということもあり、デベロッパーツールもChromeを使っている方なら見たことある画面で何ら問題なく使うことができます。Chromeのデベロッパーツールの使い方に関してはこんな記事も書いてます。ChromeのデベロッパーツールでJavaScriptのデバッグを行う方法2モバイルデバイスの種類も豊富レスポンシブWEBデザインでよく問題になるのが、iPhone5だと問題ないのに、iPhone6だとデザインが崩れていたりすることです。iPhoneの種類だけに留まらず、他のAndroidだったり、タブレットだったりと画面サイズが異なるモバイルデバイスを切り替えながら表示確認していかないと思わぬところで表示崩れが出てしまうこともしばしば・・。Chromeのデベロッパーツールもいくつかの機種がプリセットされていて便利なのですが、BLINKも同様にデバイスのプリセットがあるので便利です!一番左側のスマホ一覧から選ぶだけで表示が変わります。(左がiPhone4、右がiPhone6)横にした時の表示にも対応しています。横画面表示になります!この他にも便利な機能がこの他にも便利な機能があります。(詳細はBLINKの公式WEBサイトをご覧ください。Refreshローカルで開発している場合、プロジェクトフォルダを指定しておけば変更した瞬間にBLINKの画面も更新されます。F5を押してCSSを読み込み直す必要がないということです。Shot(現在未実装)現在表示されいてる画面のスクリーンショットを撮ることができます。Analytics(現在未実装)JavaScriptのエラー、表示速度のチェック、クロスブラウザ対応などが行えます。WEBサイトの制作の効率化には間違いなくオススメ今回、BLISKを使ってみて便利だと思ったことをまとめます。Analyticsが実装されるなど今後の開発に期待大です。WEB制作現場の方にオススメの開発用ブラウザ「BLISK」です。この記事であなたの課題を解決することができましたか?疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。サミットにおけるマルチワンセグメントサービスの実証実験用端末の開発、京セラ初のHEMSとなる「ハウスマイルナビィ」の企画・ソフトウェア開発を経て、現在ではインターネット時代におけるWEBサイトの活用・運用に関する企画・提案、セミナー等においてこれまで培ってきたノウハウの提供に力を入れている。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。現代のマーケティング課題を解決する資格セミナーを行っているマーケティングリテラシー協会様のLPを作成いたしました。Animateを利用したアニメーションを作ってみる。2020年2月13日AD最近の実績/おすすめ記事2018-4-13プロゴルファー大城さつき様のHPを制作しました2016-7-29日本から発信する次世代の企業の在り方を提案するGHソリューションズ様のHPを制作させていただきました2016-7-18お祭りやイベントにぴったり!お祭り用象の耳のチラシ&WEBサイトを制作しました!2016-11-21イベント集客にタウン誌は効果的?相模原の大・手づくり市!アートフェスティバルinさがみはらが開催されました!2019-2-4昔の味たまごさんの昔の味たまごプリンのランディングページを作成いたしました。ホームページ制作、WEBマーケティングページ上部へ戻る。