初心者のためのWEBデザイナーの教科書

Webサイトとブラウザ

ブラウザとは

あなたは、ブラウザの種類をいくつ知っていますか?

ウェブサイトを見るためのソフトを「ブラウザ」といいます。ブラウザを介さないと、Webサイトを閲覧できません。ブラウザには、幾つかの種類がありOSの種類によっても異なっています。現在のブラウザには「タブブラウズ機能」があり、タブを切り替えて1つのウィンドウで複数のサイトを見ることができます。新しいウィンドウを立ち上げて別サイトを見る、タブを切り替えてみるなど、タブブラウザの操作と特性を知っておきましょう。

ブラウザには、いくつかの種類があります。Google Chrome(グーグルクローム)、Internet Explorer(インターネットエクスプローラー)、Firefox(ファイヤーフォックス)、Safari(サファリ)、Microsoft Edge(マイクロソフトエッジ)などが国内では、最も利用率の高い代表的なブラウザです。

Webブラウザシェア2018年調査を見ると、圧倒的にGoogle Chromeのシェアが強いデータが出ています。日本におけるPCシェアはまだまだInternet Explorerが多いようです。Microsoftは、Windows10より「Microsoft Edge」というブラウザを標準で搭載し、デフォルトブラウザとしてリリースしました。

1位 Chrome 43.09%
2位 Internet Explorer 26.55%
3位 Firefox 15.4%
4位 Safari 6.85%
5位 Edge 5.61%
6位 Other 2.49%

ブラウザによって表示が異なる


同じWebサイトでも、ブラウザによって表示が異なります。フォントの種類が違って見えたり、文字の大きさが変わったりすることがあります。また、ブラウザにはそれぞれ「バージョン」というものが存在するため、同じブラウザでも、古いバージョンと最新バージョンでは表示が異なって見えることがよくあります。同じchromeでも、OS(MacやWindows)によってもその表示は異なります。

さらに近年では、スマートフォンやタブレットの普及により、Webサイトを閲覧する端末はパソコンだけではありません。同じパソコンでも、ブラウザの種類やバージョンにより、異なる見え方をしていることがよくあります。世の中すべてのブラウザをチェックすることは不可能ですが、Webサイトは、ブラウザやデバイスの環境の差異により、「表示の違い」が発生することを知っておきましょう。

更新や検索の特性と操作


今時「検索をしたことがない!」という人はいないかもしれません。
インターネットでは、調べたり検索をする行動を「Search(サーチ)する」と言います。また、Webデザイナーは、Webを制作する際に、必ず「Research(リサーチ)」をします。誰でも最初から知っている人はいないので、調べ探して情報を収集します。このようなアイコンを見かけませんか?サーチアイコンです。

  • Search (サーチ)=捜索・検索・探す
  • Research (リサーチ)=調査・研究・調べる

ブラウザにおける操作ボタンの位置を確認しておきましょう。それぞれのアイコンの形状は、ユーザーが直感的に操作できるようにある程度、規則があります。例えば、「各種設定」においては、歯車のようなアイコン、「ブラウザ更新(ページを再読み込みする)」には回転した矢印の形状になっています。OSによって、若干の形状に違いはあるものの、ある程度、統一されています。Webを制作する中で、特に更新ボタン・タブ切り替え操作は頻繁に行うため、馴染んでおきましょう。

Webブラウザは、左矢印が「もどる」右側矢印が、「進む」になります。
「更新」においては、頻繁に行うためショートカットを覚えておくと便利です。
command⌘(Ctrl)キーを押しながら「R」のキーを同時に押します。

command⌘ +R (mac)

Ctrl +R(Windows)


ブラウザに「キャッシュデータ」が残っていると「更新」をしても、反映されない場合があります。「キャッシュ」とは、パソコンが一時的に保持しているデータのことで、現金ではありません(笑)。その場合は、キャッシュをクリア(リロード)・履歴をクリア(削除する)するなどの方法で再読み込みを試みます。


検索窓に調べたいキーワード(単語)を入れます。例えば、「パソコン」と検索してみます。「パソコン」といっても種類が色々あります。ノート型・デスクトップ型・Windows・Mac・・・検索結果がたくさんヒットしてしまい、自分が探している情報をなかなか見つけることができません。

「パソコン デスクトップ」と二つのキーワードを入れてみます。「パソコン」と一つ入れたら、スペースを入れさらに「デスクトップ」とキーワードを入れます。「パソコン(スペース)デスクトップ」。どうですか?検索結果が変わります。それでもなかなか見つからなければまたスペースを入れて三つ目のキーワードを入れてみます。このように、キーワードは一つではなく、複数の語句を入れて検索をすることができます。

また、「パソコン」というキーワードも、「PC」と短縮して表現したり「デスクトップ型パソコン」など様々な表現が考えられます。調べたいキーワードは、一つではなくあらゆる語句と関連しており、都度検索結果が変わります。検索結果の動向については、将来のWeb制作においても様々なリサーチが不可欠です。まずは、「検索上手」になることが技術上達の一歩です。

キーワード遊び

私は、日頃からよく関連するキーワードをたくさん思い浮かべています。皆さんは、幼い頃、「しりとり」をした経験はありませんか?キーワードや単語をたくさん集めてみましょう。例えば、「あ」が付く言葉をたくさん集めます。「あじさい・あめ・秋・・・」たくさんあるでしょう。デザイナーは、アイディアを出す仕事でもあります。常にいろんなことを思い浮かべたり探したりする習慣を身につけるとアイディアが出やすくなります。