BLOG

  1. HOME
  2. ブログ
  3. ネット広告・サイト運営
  4. サイト運営お役立ち情報
  5. ざっくりホームページ制作関連 用語辞典 その2:Webブラウザ編+おまけ
by かわさき かわさき

ざっくりホームページ制作関連 用語辞典 その2:Webブラウザ編+おまけ

ざっくりホームページ制作関連 用語辞典 その2:Webブラウザ編+おまけ

こんにちはデザイナーのかわさきです。

先日LINE ディズニーツムツムを友達が面白いって言ってたので試しにやってみたんですがびっくりするほど点が取れなくて才能の限界を感じました。だれかコツとか知ってたら教えてください…(´・ω・`)

さて、今回は用語辞典シリーズ第二弾。Webページとは切っても切れない縁がある(?)、Webブラウザについてをお届けします。

ただ、Webブラウザのお話のみですと(専門的なことを書くと本当はながーーくなのでしょうが)ちょっと味気ないので、おまけに「個人的にオススメなGoogle Chrome拡張機能まとめ」をつけました。

「拡張機能ってなんだ?」と思われた方はよろしければ順々にご覧頂けますと幸いです。「拡張機能」がわかる方はおまけだけ見てもらえればいいかも…。

【バックナンバー】

目次

Webブラウザとは?

IT用語辞典より引用します。

Webページを閲覧するためのアプリケーションソフト。インターネットからHTMLファイルや画像ファイル、音楽ファイルなどをダウンロードし、レイアウトを解析して表示・再生する。

このページを読んでいるあなたが今使っているアプリケーションがまさにWebブラウザですね。インターネットをするのに欠かせないものになります。

たいていのコンピューター、スマートフォン、タブレットには標準でWebブラウザがインストールされていますので、まずは誰でもそのブラウザを使用してインターネットを始めます。

主なWebブラウザ

各端末にデフォルトでインストールされている以外にも、無料・有料含めて世界中で多数のWebブラウザが公開されており、機能や使用できる端末、使い勝手など、それぞれに特徴があります。

自分にあったWebブラウザを使用することで、より快適にインターネットを活用することが可能です。

以下に主なWebブラウザをまとめてみました。

Internet Explorer – インターネットエクスプローラー(IE)

Internet Explorer - インターネットエクスプローラー(IE)

マイクロソフト社が開発。Windowsに標準でインストールされているブラウザで、日本でのシェアはNo.1となっています。Windowsでインターネットをしたことがある人は誰でも一度はお世話になっているかと思います。

シェアが高いゆえにブラウザの脆弱性(コンピュータやソフトウェア、ネットワークにおける安全上の欠陥)を利用した攻撃の標的にされやすいというあまりよろしくない特徴もあります。

PC版・現在の最新バージョンは11です。

インストール方法

  • Windows・・・標準でインストールされています
  • Mac・・・現在、Internet ExplorerはMacでは提供されていません
  • スマホ・タブレット・・・マイクロソフト社が開発しているSurfaceWindows Phone などに搭載されています

Mozilla Firefox – ファイヤーフォックス

02

Mozilla Foundation が開発。スマートフォン(Android)でも使用できる Firefox for Mobile もあります。

アドオンと呼ばれる拡張機能を入れることで、自分好みの機能を追加することが出来ます。例えば、Gmailと連動させて、新着メールの通知を受け取ったり、英語辞書の検索バーを追加したり…など、様々な機能が公開されています。

PC版・現在の最新バージョンは31.0です。

インストール方法

  • Windows・Mac・・・公式サイトからインストーラーをダウンロードし、インストーラーを実行
  • スマホ・タブレット・・・Android搭載の機種で使用可能です。Google Playからアプリをダウンロードできます

Google Chrome – グーグルクローム

Google Chrome - グーグルクローム

検索でおなじみのGoogleが開発。スマートフォン版もあります。Firefoxと同じく、アプリや拡張機能を追加することで、自分好みにカスタマイズすることが可能です。軽快な動作とカスタマイズ性でここ数年シェアを伸ばしています。

Googleアカウントと紐付けることで、他のPCや端末とブックマークなどを同期し易いのも魅力です。

PC版・現在の最新バージョンは36.0.1985.125です。

インストール方法

  • Windows・Mac・・・公式サイトからインストーラーをダウンロードし、インストーラーを実行
  • スマホ・タブレット・・・iOs(iPhoneなど)、Android搭載の機種で使用可能です。iOsはiTunes Store、AndroidはGoogle Playからアプリをダウンロードできます

Safari – サファリ

Safari - サファリ

アップルが開発。Macに標準でインストールされているブラウザです。またモバイル用としても、iPhone・iPod touch・iPadに標準でインストールされています。

文字の描画など非常に気を配ってあり、美しい見た目が特徴です。

Window版は2012年7月26日より最新版のリリースがストップしており、Windowsでの使用は推奨されてません。

PC版・現在の最新バージョンは7.0.5です。

インストール方法

  • Windows・・・上記の通り、現在は更新が止まっており、Windowsでの使用は推奨されていません
  • Mac・・・標準でインストールされています
  • スマホ・タブレット・・・iPhoneなど、iOs搭載の機種で標準ブラウザとしてインストールされています

Opera – オペラ

Opera - オペラ

ノルウェーのソフトウェア開発会社、オペラ・ソフトウェアが開発。スマートフォンやタブレット向けにも提供されており、またニンテンドーDSなどのゲーム機・ハイビジョンテレビなどのデジタル家電にも多数搭載されています。

非常に軽快な動作が特徴です。

PC版・現在の最新バージョンは23.0.1522.60です。

インストール方法

  • Windows・Mac・・・公式サイトからインストーラーをダウンロードし、インストーラーを実行
  • スマホ・タブレット・・・iOs(iPhoneなど)、Android搭載の機種で使用可能です。iOsはiTunes Store、AndroidはGoogle Playからアプリをダウンロードできます

どのWebブラウザを使ったらいいのか?

これはもう、完全に「個々人の好み」としか言いようがありません。

使いやすい拡張機能があるか、なども大事だと思いますが、インターネットを行う間ずっと使うものなので見た目が好きか・使い心地が自分にあっているか…なども気にしたほうが快適なブラウジングが出来ると思います。

また、普段使用するWebサービスなどが対応しているかも大事です。

ただし、古いバージョンやバージョンアップされないブラウザをずっと使用しているとセキュリティ上危険があったり、Webサイトの描画に不具合があったり…など、良くないことが沢山ありますので、特別な理由がない限り極力最新版を使用されることをオススメします。

おまけ:オススメGoogle Chrome拡張機能

で、そんな私がPCで普段仕事でもプライベートでも愛用しているブラウザはGoogle Chromeです。

動作が比較的軽快だったり、使い勝手が好みなのもあるのですが、様々な拡張機能を入れて仕事やブラウジングを快適にカスタマイズ出来る点がやはりお気に入りです。

ブラウザの解説だけでは終わるのはちょっとさみしいので、愛用している拡張機能の中で、ブログ・ホームページ運営に役立ちそうなものをピックアップしてご紹介します!(※私の業務がWebデザインなので、少しそちらに偏りがちかと思いますすみません…)

その前に、Google Chrome拡張機能とは?どうやって使うの?

これまで書いてきた内容とかぶりますが、ブラウザに簡単に機能を追加することが出来る機能です。SNSやGmailの通知を確認したり、簡単に記事をクリップしたり、少ない動作でブラウジング出来るようにしたり…などなど、様々な機能が公開されています。

Chrome ウェブストア から拡張機能を探すことが可能です。

インストール方法は、各アプリのページに行き、右上のダウンロードボタン(「無料」となっている箇所)をクリックするだけです。

拡張機能インストール

あ、もちろん、Google Chromeを使用していることが前提ですので、それ以外のブラウザを使用されている方はまずはGoogle Chromeをインストールされてください。

また、今回ご紹介するのはPC/Mac版で使用する拡張機能となります。

※今回はGoogle Chromeを例に取り上げていますが、他のブラウザでもいろんな拡張機能があります
※拡張機能はインストールし過ぎるとブラウザが重たくなったり、また、完全に安全とは言えない拡張機能も中には存在しますので、インストールする際は自己責任にてお願いいたします

それでは早速オススメの拡張機能をご紹介します。

Create Link(ページのタイトルとURLをコピー)

Create Link

その時見ているページのページタイトルとURLをコピーします。そのまま他の文章にペースト可能。

本当にそれだけなんですが、こういったブログ内でページを紹介するときや、メールや資料にタイトルとURLを貼り付けたいときに地味に便利です。

テキスト形式、html形式、Markdown形式などでコピーできます。

Full Page Screen Capture(ページのキャプチャを撮る)

Full Page Screen Capture

その時見ているページ全体のキャプチャを撮ります。キャプチャが撮れたらこーーーんなかんじで、

なっがーーーー!

別ウィンドウで画像が開きますので、後は上で右クリックして保存したりコピーしたりして他のソフトで開いて使用します。

ブログを書くときにも便利ですが、人に修正のお願いをする時、マニュアルを作るときなどにも便利です。

(余談ですが、キャプチャ拡張機能は多数公開されているのですが、Choromeのアップデートによって動かなくなることが多く、個人的にこれ!というのが安定しません…誰かオススメがあったら教えてください……)

MeasureIt!(Webページ上の長さを計測)

MeasureIt!

Web上の好きな箇所の縦横を計測することが出来ます。「あれ?このエリア何pxだっけ???」という時便利です。

MeasureIt!のアイコンを押すと画面が薄っすら白っぽくなります。で、測定したい箇所の左上から右下にドラッグすると、ドラッグした範囲のpx数が表示されます。もう一回アイコンを押すと解除されます。

Eye Dropper(Webページ上の色を調べる)

Eye Dropper

Web上の好きな箇所のカラーコードを調べることが出来ます。

Eye Dropperのアイコンをクリックすると表示される「Pick color from web page」とういボタンをクリックするとウィンドウ右下にカーソルが上に来ている要素の色が表示され、クリックすると保存されます。保存されてたカラーコードは再度、Eye Dropperのアイコンをクリックすると確認可能です。

Weblioポップアップ英和辞典(英和辞書拡張機能)

Weblioポップアップ英和辞典

ページ上の英単語や文章にマウスオーバーさせることで単語の意味を表示したり、文章を選択して翻訳結果を見ることが出来る拡張機能です。

単語の翻訳をポップアップで表示

また、アイコンから気になった単語を調べたり文章を翻訳したり出来ます。

公私ともに英語苦手で有名な私としては必須の拡張機能です…。

Facebook Like Button(見ているページにいいねする・いいね数を確認する)

Facebook Like Button

Likeボタンが設置されていないボタンにも、いいねすることが出来ます。

…が、その機能が本番ではなく、そのページの現在のいいね数がバッチで表示されるので、Facebook上でどのくらい話題になっているかの指標をざっくり確認できるので、そのために入れております。

FireMobileSimulator for Google Chrome™(携帯サイト・スマートフォンサイトの確認)

FireMobileSimulator for Google Chrome™

Webサイトにアクセスすると、自動でどういった端末から見ているのか(PC/スマホ/携帯電話…等)を判別して、自動で最適化されたページに表示を切り替えるのですが、これがPCで携帯版のページを見たいときに厄介だったりします。

FireMobileSimulator を使用すると、携帯端末から閲覧した場合の見た目や動きをシミュレートすることが出来ます。

例えば、毎日新聞のページを見ると、こんなかんじになりました。

FireMobileSimulatorで見た毎日新聞社のサイト

終わりに

なんだかおまけが本番みたいになってしまいましたが…。

私たちWeb制作会社のように一日中インターネットを行っている業種の方は少ないかと思いますが、仕事で、そしてプライベートでネットに触れる時間が皆無というかたは少ないのではないかと思います。

ブラウザのことを知って、もっと活用することで皆さんのインターネットがもっと楽しく・快適に・便利になればいいなぁ…ということで終わります。

それでは、素敵なインターネットライフを!

ページの先頭に戻る