1. TOP
  2. WEBサイト制作
  3. 【即、実戦で使えるサイト制作】htmlタグは用途別にこう覚える!Part 3〜コンテンツ・SNS連携編〜

【即、実戦で使えるサイト制作】htmlタグは用途別にこう覚える!Part 3〜コンテンツ・SNS連携編〜

 2018/03/25 WEBサイト制作 コーディング コーディング(html5) Fumio Sakurai
この記事は約 7 分で読めます。 61 Views

コンテンツが果たす役割について

サイトの一番の目的は、情報を待っている人のところに届けることです。

では、どういう情報であればより伝わりやすいでしょうか?

サイト上での情報の伝え方は大きく3つです。

  1. 文章
  2. 画像
  3. 動画

1から3に向けて「情報量」が大きくなります。

情報量は通信量に直結するため、通信技術が未発達な時代は文書で全てを表現しなければなりませんでした。

それが、通信技術の進歩と共に、画像のサイズは高解像度化し、「画像」でユーザーの視覚に訴えることができるようになりました。

さらに、現代においてはより通信量が多い「動画」を用いて、「視覚」だけではなく「聴覚」にも訴えることができます。

なぜ動画コンテンツが重要なのか

動画を設置しているサイトは検索でひかかりやすいといわれています。

実際、Youtubeなどにアップしている動画をサイト内に設置することで検索でひかかりやすくなります。

FacebookなどのSNSでも、動画を配信するFacebookページや、facebook liveなどで動画配信するユーザーをより重視する傾向があります。

その背景には、文章より動画を好むユーザーの嗜好(好みの傾向)があります。

10代はスマホ動画を1日80分視聴 高校野球の視聴も約3割がスマホで(ジャストシステム調査:2017年8月度)

上記の表では、年代別に、スマホをどのような用途で使っているかの時間を記載しています。

横軸が時間(分)を表しており、

1番多い10代では平均81分。

1番少ない60代でも平均37分をスマホで動画を見ている時間に当てているそうです。

平均してみると51分ということで、およそ1時間、スマホで動画を見ているという統計が出ています。

なぜ、動画が文章より好まれるのかということには、脳の構造が影響しているといわれています。

  • 脳に伝わる情報の90%はビジュアルなものである
  • 視覚情報は文章よりも6万倍も速く脳に伝達される
  • 40%の人が文章よりもビジュアルコンテンツに好反応を示す
  • 人間のコミュニケーションの93%は非言語によるものである

以上、Market Domination Mediaのブログ記事「The Power of Visual Content [Infographic](ビジュアルコンテンツの力)」より

こういった脳の構造があるため、動画コンテンツには以下のような効果があると言われています。

【動画活用のメリット】

① 信頼性が高まる
情報氾濫社会において、オンライン上の文章は嘘が多く(真偽が不明確)、信憑性が低い

② 内省化効果がある(リフレクション)
人は自分の考えや行動を深く省みることにより、成長し、新たな考えを構築することが可能です。
動画は顧客が自身で決断し行動を起こすために、背中を押す効果が対面コミュニケーションより高いです。

③ 拡散されやすい
上記の表からもわかるように、若年層ほど動画をみる時間が長い傾向があり、
動画は文章よりもシェアされやすくなっています。
その理由としては、情報を伝える力が弱くても、動画なら伝わるためといわれています。
(文章より動画の方が伝えやすい)

動画活用のメリット

これらの効果があるため、近年のブランディング施策においては、動画の活用が注目されています。

では、ここからはこれらのコンテンツをhtmlタグを使って設置するための方法について解説していきましょう。

コンテンツ設置において重要なhtmlタグ3選

コンテンツ設置において重要なタグは大きく3つあります。

img 画像
video 動画
iframe コンテンツの埋め込み
・他のhtml
・Facebookなどのウィジェット
・GoogleMap

①imgタグについて

基本的な設置方法

imgタグは画像設置のために古くから使われてきたhtmlタグですが、CSSの登場により、その設置の仕方が大きく異なっています。

基本的な書き方は以下の通りです。

<img src=”画像設置アドレス” alt=”代替テキスト”>

  • 画像の設置アドレスは、相対パス・絶対パスどちらでも構いません。
  • 代替テキストは、画像が表示されない時に表示されるテキストです。SEOの観点からも設置しておいた方がいいです。

HiDPI(Retina)対応について

Apple販売するiPhoneやiPad、Macなどにはもはや標準搭載されている高画質ディスプレイ(HiDPI)。

最初に搭載されたのが、2010年発売のiPhone4だったので、もう8年前になるんですね。

Appleに追従する形で、Windows系やAndroid系のスマホ・PCも高解像度化が進みました。

Windowsにおいても、Windows8以降の開発においてはHiDPIを意識したソフト設計が進み、Windows10が主流となっている2018年現在では、HiDPI対応しているソフトが大半になっています。

このHiDPI対応が実はWeb制作においても大きなターニングポイントとなっています。

ブラウン管時代は気にならなかった映像が、今の4Kディスプレイで見たら、滲んで見えるように、HiDPI対応していないWebサイトは、画像部分が滲んで見えてしまいます。

それ故、サイト制作においてはHiDPI対応(Retina対応)が欠かせないのです。

また、横長なPCと違って、縦長なスマホの画面に最適化させるための方法として、PCには横長、スマホには縦長の画像を使うという方法を検討する必要もあります。(画面幅の問題により、PCで使う画像をそのまま縮小してしまうと、画像が小さくなりすぎてインパクトがないため)

スマホ最適化用を考えるべき理由

なんでもかんでも要素を使えばいいわけじゃない!レスポンシブ・イメージ実装の際の注意点 より

このHiDPI対応およびスマホ最適化ですが、3通りの実装方法があります。

  1. CSSを使った実装(メディアクエリ方式)
  2. HTML5による実装(レスポンシブ・イメージ方式)
  3. アートディレクション方式での実装

レスポンシブ・イメージについて

HTML5から実装されたpictureタグを使うことで、よりレスポンシブ・デザイン向けに画像を最適化しやすいのですが、IE11が非対応のため、この記事ではimgタグでレスポンシブ対応する、srcsetを基本に解説したいと思います。

アートディレクションについて

figureタグの活用について

また、HTML5から実装されたfigureタグを活用することで、Google画像検索でのヒット率が高くなると言われています。

videoタグの登場により、動画の設置は非常に簡単になり、動画の再生方法や、機種別の再生方式の指定など設置方法の幅も広がりました。

結果として、以前はflashという技術で行われていたことが、HTML5だけで実装されるようになりつつあります。

(以前は動きがあるサイト制作にAdobeのflashという技術がよく使われていましたが、現在はほとんど使われていません)

iframeタグについては「アイフレーム」という言葉の通りサイト内に他のhtmlを読み込んで表示するためのフレームとしての活用が本来の使い方でした。

近年では、facebookやtwitterを代表とするSNSのwidgetやGoogleMapを埋め込むためによく使われています。

以下個別に設置方法などを見ていきましょう。

(執筆中・・・)

\ SNSでシェアしよう! /

Stakeholder Successの注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

Stakeholder Successの人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

    この記事をSNSでシェア

ライター紹介 ライター一覧

Fumio Sakurai

Fumio Sakurai

株式会社NEXT Innovation 代表取締役
小3からプログラミング(Basic)を学び、法学部 → 財務系コンサル → 外資系生保営業 → ITスタートアップ起業という異色の経歴を持つ。
職種は「ビジネスデザイナー」
事業の戦略・戦術立案から実際の運営支援、マーケティング、ブランディング、社員育成、業務改善、システム制作を行う。

おそらくアスペルガー症候群であり、常にやりたいこと・アイデアが止まらなくなってしまうため、一社専属での会社員を勤められず、起業に至った。
現在5社の顧問を行いながら、コンサルティング・ブランディング指導を行なっている。

この人が書いた記事  記事一覧

  • リスクを恐れ、縛られて生きますか? ー 「自分の人生を自分でコントロールする生き方」

  • 「投資」していますか?継続的に売上を上げ続ける会社の特徴について

  • CSSトレーニング②「Flexboxを使い倒して、PC・スマホの表示切り替えを簡単に」

  • AdobeMUSEの開発終了にみるWEB制作の潮流

この記事もあわせて読みたい!

  • 【即、実戦で使えるサイト制作】htmlタグは用途別にこう覚える!Part 1 〜ライティング編〜

  • 【即、実戦で使えるサイト制作】htmlタグは用途別にこう覚える!Part 2〜レイアウト編〜

  • 自分の「トラックレコード」を積み上げよう

  • サイト制作における「断捨離」

  • 最短で「今どきの」サイト制作スキルを身につける手順(随時更新)

  • CSSトレーニング①「レスポンシブで崩れにくいレイアウトの基本」