webサイトデザインAI入門科授業用ブログ

池袋フェリカテクニカルアカデミーの求職者支援訓練の授業解説ブログです。

srcsetを使ってimg要素を切り替える

img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「srcset」を使う事で手間のかかるCSSJavaScriptを必要とせず、htmlのみでデバイスによって適切なimgが表示させられます。

srcsetとは

  • srcsetはHTML5で策定された新属性
  • この要素はブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができる
  • IEでは使うことが出来ない(http://caniuse.com/#search=srcset)

picture要素

picture要素を使うと、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分けることが可能です。
pictureタグは複数のsourceタグと一つのimgタグで構成されます。sourceタグには3つの属性を指定します。

  • media属性(メディアクエリ)
  • srcset属性
  • sizes属性
srcset属性

画像ファイルのパスと横幅は、imgタグのsrcset属性に記述します。「画像ファイルの横幅」は、「画像をウェブページ上で表示する際の横幅」では無く画像自体の横幅です。


sizes属性

表示する画像の横幅はsizes属性に記述します。メディアクエリーと組み合わせて複数の横幅を指定可能です。
例:ディスプレイ1200px以下の時は画面幅、それ以外では1200pxで画像を表示したい場合は次のように記述します。

sizes="(max-width:1280px) 100vw, 1280px"
レスポンシブイメージのソース

今回の仕様はPC画像とSP画像の2つを用意して

  • バイスの横幅が1200px以上の場合は1200px幅のpc用画像を画面中央に表示
  • バイスの横幅が1200px~641pxの間は1200px幅のpc用画像を画面画面一杯にフルードで表示。
  • バイスの横幅が640px以下の場合は640px幅のsp用画像を画面一杯にフルードで表示。

※imgにフルードイメージの設定を必ず指定

<body>
<picture>
<source media="(min-width:1200px)" srcset="img/pc.jpg 1200w" sizes="1200px">
<source media="(min-width:641px)" srcset="img/pc.jpg 1200w" sizes="100vw">
<source media="(max-width:640px)" srcset="img/sp.jpg 640w" sizes="100vw">
<img src="img/sp.jpg" alt="">
</picture>
</body>

レスポンシブイメージは便利な機能ですがIE11では非対応なので、IE対応必須という要件ではポリフィルを用います。


ics.media

LPの作成・実践編

フェリカテクニカルアカデミーwebサイト制作科の生徒募集用のランディングページの作成

コンバージョン

フェリカ公式サイトの見学会申し込みページへのリンクボタンをクリックしてもらう
URL:http://www.felica.info/kikin/web/web_form/index.shtml



LPのアウトライン(あくまでも一例)

Attention部分のコンテンツ
  • タイトル(ロゴ画像orフェリカテクニカルアカデミーwebサイト制作科)
  • キャッチーなコピーが入ったリード文(フェリカテクニカルアカデミーwebサイト制作科、生徒募集的な文言)
  • メインビジュアルの画像
  • 見学会申し込みページへのボタン(ファーストビュー内に入れる。ボタンのデザインは他のボタンを同じに)
Interest部分

フェリカがおすすめな「3つの理由」
フェリカの特徴を具体例を出して挙げていく。

Interest部分の下
  • フェリカ公式サイトの見学会募集ページへのボタンを入れる
Desire部分
  • 他の競合他社との差別化を図る為、具体的なベネフィットを伝える。
  • 卒業生の声と作品を入れ、ユーザーに自身の未来像を想像させる。
Action部分
  • フェリカ公式サイトの見学会募集ページへのボタンを入れる(ボタンのデザインは他のボタンを同じに)
  • 実際にボタンをクリックしてもらえるように、ボタンの近くに申し込みの期限などの背中を押すテキストを入れる


ツイッターのURL
https://twitter.com/felica_harotore



参考サイト
note.mu



作例
www.felica.info


masukana.com


rn23.moo.jp


syokugyoukunren-info.com

LP(ランディングページ)の作成

ランディングページ(Landing Page)とは本来、訪問者が最初に着地する(land)ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを指します。
LPでもっとも大事なのはいかに訪問者に目標となるアクションを行わせるか、です。


コンバージョン

コンバージョンとは、変換を意味する言葉です。Web マーケティングの分野に置いては、「顧客見込み」から「顧客」への変換を意味し、成約を意味する言葉で最終的な成果として使われます。主に購入・資料請求・お問い合わせ・会員登録などを コンバージョンにする場合が多いです。 コンバージョンを設定することで、Webにおける施策の効果測定が出来るようになります。
コンバージョンが起きた割合のことを コンバージョン率( CVR)といいます。コンバージョン率は、 コンバージョン数÷ 訪問数で算出することが出来ます。



ゴールの設定

ターゲットとなるユーザーにとってほしい行動を明確にします。商品購入をしてほしいのか、会員登録をしてほしいのか、お問い合わせをしてほしいのかなどです。場合によってはペルソナと呼ばれる、具体的なユーザーの人物像を想定し、その人物に向けて訴求力の高いLPを作る必要があります。


ストーリー性

「顧客見込み」から「顧客」へ変える為にはユーザーにストーリー性を持ったページを作り、ページ内でしっかりと説明をすることが大事です。


AIDAの法則

Attention:注意
まず、ユーザーの注意を引きます。問題解決をしたいユーザーに、なにそれ!と思わせることが重要です。


Interest:興味
興味を持ってくれそうな内容を書きます。詳細な説明を書いていきます。4つのポイント・3つの理由など、数を提示する事もあります。


Desire:欲求
ユーザーにとってのメリットや競合との差別化要因を伝えます。問題の解決ができる理由を示すことも有効です。


Action:行動
ユーザーが迷いなく申し込みや購買などのアクションをとれるよう、最後のひと押しをします。なぜ「今」「ここ」で買うのがいいのかを強調します。

CTA

CTAとは、Call To Action(コール トゥ アクション)の略で、「行動喚起」と訳される。 Webサイトの訪問者を具体的な行動に誘導すること。



f:id:yachin29:20180711031625p:plain



coliss.com



rdlp.jp


lp-web.com

lp-kanji.com


kataokadesignmarketing.net


twitter.com

インターネット広告について

Web広告とは、「インターネットの媒体上に掲載される広告」のことです。
広告枠を持つWebサイトや検索エンジンの検索結果ページ、メール、SNSなど、あらゆる媒体に掲載され、web広告やオンライン広告、デジタル広告と呼ばれることもあります。



dentsu-ho.com


上の記事にあるように2020年のインターネット広告費はマスメディア4媒体(テレビ、ラジオ、新聞、雑誌)とほぼ同じです。マスメディア4媒体の広告費は6年連続で減少していますが、インターネット広告費は年々増加しています。

インターネット広告の種類

ディスプレイ広告(ターゲット広告)

ディスプレイ広告とは、年齢や性別、地域、過去のWebサイト閲覧履歴などでターゲティングを行うことで、まだ自社のサービスや商品を知らない潜在層に適したWeb広告だと言えます。

リスティング広告

リスティング広告とは、ユーザーがGoogleYahoo!といった検索エンジンを使用して検索した際に表示されるページに、検索キーワードに応じて表示されるWeb広告です。ユーザーが広告をクリックして初めて料金が発生するクリック課金型であることも大きな特徴です。

純広告・バナー広告

純広告とは、特定のWebサイトの広告枠を買い取って掲載するWeb広告のことです。テキストや画像、動画での広告表示が可能で、バナー広告と呼ばれることもあります。

動画広告

動画広告とは、動画コンテンツを配信するWeb広告です。テキストや画像と比較して伝えられる情報量が多く、目を引きやすいため、効果の出やすい広告として多くの企業が取り組んでいます。特にYouTubeの動画に差し込まれるCMのような15秒程度の短い「TrueView広告」は今非常に需要が高くなっています。

digitalidentity.co.jp



バナーサイズについて

www.uniad.co.jp

pushStateとajaxを使ってSEOに強い無限スクロールページを作成する

SEOに適した無限スクロールの導入

FacebookTwitterPinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール(英: Infinite Scrolling)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富なギャラリー的なサイトではよく見かけます。
しかし、よく見られるjQueryを使ったシンプルな無限スクロールはコンテンツをすべて1つのHTMLファイル上に記述しておいて、スクロールするたびに「display:block」と「display:none」を使って表示させていく、というものです。人が見る分にはこの形でも良いでしょうが、Googlebot に対してとなると話が変わってきます。

ご自身のサイトのニュース フィードやピンボードで、ユーザーの利便性を考えて無限スクロール(英語)を使用している方もいらっしゃるでしょう。しかし、Googlebot に対してとなると話が変わってきます。無限スクロールでは、クローラーがユーザーの行動(スクロールやボタンを押してさらにアイテムを読み込むなど)を常にエミュレートできるとは限らないため、フィードやギャラリー内のすべてのアイテムにアクセスできないことがあります。クローラーがアクセスできないコンテンツは、検索結果に表示されることもないでしょう。

無限スクロール ページからリンクされている個別のアイテムを検索エンジンがクロールできるようにするには、無限スクロールを分割した一連のページ群を生成するようにしましょう。


f:id:yachin29:20160216192134p:plain

Google ウェブマスター向け公式ブログ [JA] : 検索エンジンとの相性を考慮した無限スクロールのベストプラクティス


pushStateによるブラウザの履歴の更新

pushStateとは?

pushStateとは、HTML5でサポートされるAPIです。
ページを遷移せずHTML(の一部)を変えた場合でもブラウザに履歴を残し、また一意のURLを割り当てることが可能です。
HTMLの中身が変わってもAjaxはページを遷移しないのでURLが同じままです(#以下が入れ替わるだけで一意のURLとして処理しない)。
ブラウザの戻るボタンを押しても前のコンテンツを再び表示させることはできません。本当に前のページに戻ってしまいます。なのでGoogleは、クロール・インデックスできるように特殊な仕様をサポートしてくれたわけです。しかしpushStateを使えば、Ajaxで変化させたそれぞれのコンテンツに対してユニークなURLを割り当てられるのです。
つまり検索エンジンにとってクロール・インデックスしやすくなります。



JavaScriptが切れている状態でも手動でページ遷移出来るような設定も取り入れ、検索エンジンとの相性を考慮した無限スクロールにカスタマイズしましょう。


www.suzukikenichi.com


さらに簡易的なリダイレクト機能を使って、下層ページから入った時にトップページに戻るよう設定しましょう。

<meta http-equiv="refresh" content="0;URL='index.html'" />

以上の内容を踏まえて、今回は検索エンジンが処理しやすい無限スクロールを作っていきましょう。

今回のポイント

  • ajaxを使ったシームレスなページ遷移
  • HTML5APIを使い、各ページにユニークなURLやタイトルを最適化する事が出来る
  • 無限スクロールページを、JavaScript が無効でもアクセス可能な形にする。
  • 各コンテンツページにはトップページに自動的に戻るリダイレクト機能を実装
  • 相対パスはNGなのでルートパス、もしくは絶対パスを使用すること
  • SPA(Single Page Application)の基本的な考え方を理解する

今回の注意点

  • パスは全てルートパス
  • トップページに「トップに戻るボタン」を設置
  • footerは最後のページに設置


特にページのタイトルの最適化は非常に大事です。通常の無限スクロールは1枚のhtmlファイルに無数のコンテンツが記述されていますが、今回のようにhtmlファイルを細分化する事で、コンテンツに応じたより細かいタイトルやURLの設定が可能になります。


API

APIとは「Application Programming Interface(アプリケーション・プログラミング・インターフェイス)」の略語であり、「ある1つの機能に特化したプログラムで共有可能なもの」や「ソフトウェアの機能を共有する仕組み」のことです。よく使う機能がAPIとして用意されていれば、わざわざ一からプログラムを組む必要はありません。必要に応じてAPIを利用し、効率的に開発を進められます。


SPA(Single Page Application)

ブラウザによるページ遷移を行うことなく、単一のWebページでコンテンツの切り替えを行うことで、ユーザーのUXが向上します。JavaScriptフレームワーク(Angular、Vue.js、Reactなど)で作成される事が多いです。



github.com

<script>
		$('#container').cleverInfiniteScroll({
			contentsWrapperSelector: '#container',
			contentSelector: '.wrapper',
			nextSelector: '#next',
		});
	</script>

デモページ
felica29.starfree.jp



Javascriptによるリダイレクト

Javascriptによるリダイレクトの方法もあるので、試してみましょう。

setTimeout("redirect()", 0);
function redirect(){
    location.href='../index.html';
}





digitalidentity.co.jp


note.com




面接について考える

note.com


note.com



felica29.starfree.jp

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>これだけは呼んでおけ!厳選6冊</title>
<link rel="stylesheet" href="/infini-2021-09/css/style.css">
</head>
<body><script type="text/javascript" src="https://ad.netowl.jp/js/star-php.js"></script>
<div id="container">
<div class="wrapper">
<h1>これだけは呼んでおけ!厳選6冊</h1>
<p class="lead">歴史大河小説から近未来SF作品まで網羅した、厳選6冊を紹介</p>
<p class="main-img"><img src="/infini-2021-09/img/main.jpg" alt=""></p>
</div><!-- /.wrapper -->
<a href="/infini-2021-09/book1/" id="next">次のページへ</a>
<p id="to-top"><a href="#"><img src="/infini-2021-09/img/chevron-up-solid.svg" alt=""></a></p>
</div><!-- /#container -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/infini-2021-09/js/jquery.clever-infinite-scroll.js"></script>
<script>
$('#container').cleverInfiniteScroll({
contentsWrapperSelector: '#container',
contentSelector: '.wrapper',
nextSelector: '#next'
});

//スムーススクロール
$('#to-top>a').on('click',function(){
$('html,body').animate({scrollTop:0},200);
});


</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="0;URL='/infini-2021-09/'" />
<title>新・平家物語</title>
<link rel="stylesheet" href="/infini-2021-09/css/style.css">
</head>
<body><script type="text/javascript" src="https://ad.netowl.jp/js/star-php.js"></script>
<div id="container">
<div class="wrapper">
<h2>新・平家物語</h2>
<div class="contents">
<p class="photo"><img src="/infini-2021-09/img/01b.jpg" alt=""></p>
<p class="txt">『新・平家物語』は、吉川英治の歴史小説の大作。1950年から1957年まで「週刊朝日」に連載された。現行版は吉川英治歴史時代文庫全16巻。<br>
題材は『平家物語』だけでなく、『保元物語』『平治物語』『義経記』『玉葉』など複数の古典をベースにしながら、より一貫した長いスパンで源平両氏や奥州藤原氏、公家などの盛衰を描いた長編作品。</p>
</div>

</div><!-- /.wrapper -->
<a href="/infini-2021-09/book2/" id="next">次のページへ</a>
</div><!-- /#container -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/infini-2021-09/js/jquery.clever-infinite-scroll.js"></script>
<script>
$('#container').cleverInfiniteScroll({
contentsWrapperSelector: '#container',
contentSelector: '.wrapper',
nextSelector: '#next'
});
</script>
</body>
</html>

CSS Scroll Snap

以前はjavascript等で制御していたスクロールスナップも現在ではcssのみで簡単に実装出来ます。またflexvw、vhを使う事でレスポンシブにも簡単に対応出来ます。

慣性スクロール

慣性スクロールとは、主にマルチタッチインターフェースで採用されている機能で、画面を素早くスクロールさせた際、指を画面から離しても急には止まらず、慣性が作用しているようにスクロールがある程度維持される機能のことである。 慣性スクロールが機能することで、スクロール操作の繰り返しが連続的な動作になる。

Y方向にスクロールスナップ


See the Pen
scroll-snap-y
by yachin29 (@yachin29)
on CodePen.

X方向にスクロールスナップ


See the Pen
scroll-snap-x
by yachin29 (@yachin29)
on CodePen.


スクロールの方向とスナップの種類

scroll-snap-type: y mandatory;

ある程度スナップしたら、次のコンテンツに自動でスナップさせる場合は「mandatory」
コンテンツ中間地点にいる場合はその位置で停止するのが「 proximity」
親要素に指定します

子要素の停止位置

scroll-snap-align:start;

「start」 エリアの開始位置
「end 」エリアの終わりの位置
「center 」親要素の中央で位置します


子要素のスキップ

scroll-snap-stop:normal;

スクロール速度が早い場合にアイテムをいくつか飛ばしてしまう事があります。その時に、
「normal」いくつかスキップしてしまう(デフォルト)
「always」1つ1つ止まるようになる


scroll-padding

scroll-paddingはショートハンドのプロパティで、paddingと同様に上下左右にスクロールのパディングを親要素に定義します。

scroll-margin

子要素間の余白を使いたい時に指定します。

gap

アイテム同士の横方向と縦方向の間隔をまとめて指定する際に使用します。


coliss.com



baigie.me

Canvasでパーティクルを表現する

Canvasとは

Canvasとは、ブラウザ上に図を描くために策定された仕様です。

これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashJavaアプレットが使われてきました。

Canvasは、FlashJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。
Canvasは、もともとはAppleが発祥で、当初、Mac OSでおなじみのDashboardで使われた技術仕様です。その後、AppleMozilla FoundationOpera Softwareといったブラウザベンダが立ち上げたWHATWGという団体にて策定作業が行われていた「Web Applications」と呼ばれる規格に採用されました。

github.com



vincentgarreau.com





See the Pen
Particle & Mouse stalker
by yachin29 (@yachin29)
on CodePen.



recruit.lifeones.jp


webdesignfacts.net



www.webopixel.net




stitch.co.jp



y-n10.com



blog.8bit.co.jp





note.com



ics.media