WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

htaccessを使った動的配信

.htaccessファイル」を使った動的配信

動的な配信  |  Google 検索セントラル  |  Google Developers



スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、サーバ側で自動振り分けする方法をやってみます。

まずは「.htaccessファイル」を作成します。この際、ローカルサイドで「.htaccessファイル」を作成すると、不可視ファイルの設定などで問題が起こりやすいので、一旦「htaccess.txtファイル」として作成し、サーバー側にアップロードしたのちに、「.htaccessファイル」にリネームする方法でやってみます。


今回の自動振り分けは

  1. ウェブサーバが「Apache
  2. 設定ファイル「.htaccess」の設置が許可されている
  3. mod_rewriteモジュールが利用可能

の条件が必要です。

.htaccessの記述内容

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /cat/sp/ [R,L]

Header set Vary User-Agent
</IfModule>

まずはmod_rewriteモジュールが有効な時のみに処理するように分岐させます。

<IfModule mod_rewrite.c>

</IfModule>


次にmod_rewriteモジュールを起動させます。

RewriteEngine On

次にRewriteCondを使って、どういう条件でリダイレクトの処理をするかを指定します。

RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]

HTTP_USER_AGENT」は、アクセス端末の種類を示します。
最後にある [NC] という記述は、「大文字・小文字を区別しない」という意味の指示です実際にユーザエージェント名に含まれる文字列が「android」でも「ANDROID」でも、同じだとみなされます。 つまり、"A-Z" と "a-z" は区別しない。


RewriteCond %{QUERY_STRING} !mode=pc

URLの末尾に「?mode=pc」という文字列が付いていた場合には、スマートフォン用ページに移動させない(リダイレクトしない)ようにする記述です。なお、「mode=pc」という文字列は何でも構いません。「pc-site」や「show-pc-edition」など、何でも好きな文字列を指定できます。


4行目
RewriteRule ^$ /cat/sp/ [R,L]

RewriteRuleを使うことで、指定した規則に沿ってURLを書き換えられます。ここでは、リダイレクトするために利用しています。フラグとして、[R,L] を指定しています。「R」は「リダイレクトする」という意味で、ここでは必ず必要です。「L」は書き換え規則の最終行であることを示しています(これ以降のRewriteRuleは無視されます。ここでは省略しても問題ありません)。



今回の場合は、この .htaccessファイルを設置した場所が http://www.example.com/pc/ だとすると、

スマートフォンでアクセスすると http://www.example.com/pc/sp/ へ移動。
スマートフォン以外でアクセスすると http://www.example.com/pc/ のまま。
スマートフォンでアクセスしても、URLが http://www.example.com/pc/?mode=pc であれば移動しない。




自分のドメインでトップページを表示させたい場合(http://www.example.com
4行目を以下のように直し、トップページ(PC用のindex.html)と同じ階層にアップロードする。

RewriteRule ^$ /sp/ [R,L]

スマートフォンでアクセスすると http://www.example.com/sp/ へ移動。
スマートフォン以外でアクセスすると http://www.example.com/ のまま。
スマートフォンでアクセスしても、URLが http://www.example.com/?mode=pc であれば移動しない



スマートフォンサイト用データの「index.htmlファイル」のhead内に貼り付ける

rel=”canonicalという属性を使用して、ページの評価やインデックスはデスクトップ用URLに統一するための正規化処理をしましょう。そうすることでミラーサイトのような重複コンテンツ扱いになることを防ぎます。

<link rel="canonical" href="http://○○○○○.com/pc/">
次にPCサイト用データの「index.htmlファイル」のhead内に貼り付ける

rel=”alternate”という属性を使用して、Googlebotにスマートフォン用ページが別で存在することを伝える処理をします。そうするとスマートフォン向けの代替コンテンツがGooglebotに認識され、スマートフォン用ページが別で存在することを伝えることができます。

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://○○○○○.com/cat/sp/">


最後にスマートフォンサイト用の「index.htmlファイル」に「PC版を表示」などのボタンを作り、「.htaccessファイル」が有効になっていても、スマートフォンでPCのデータを表示出来るようにしましょう。

<a href="http://○○○○○/pc/?mode=pc">PC版を表示</a>

最後に必ずモバイルフレンドリーテストを受けて合格するか確認しましょう。

モバイル フレンドリー テスト - Google Search Console




note.mu


受講生の作例
miyakojimanosuteki.com is Expired or Suspended.


スマートフォンサイトを意識したfont-family

font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Hiragino Kaku Gothic ProN,"Yu Gothic",YuGothic,Verdana,sans-serif;

LPの作成・実践編

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

ゴール

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




ポイント

  1. ユーザーの注意を引くようなコンテンツ内容がファーストビューに入っているか。
  2. 「オススメする3つの理由」が具体的に説明されているか
  3. ユーザーにとってのメリットや競合との差別化要因を伝えられているか
  4. ページ下部にユーザーがクリックし易いボタンが設置されているか
  5. ページの各所にCATボタンが設置されているか
  6. 公式サイトに合わせたデザインになっているか
  7. SNS(ツイッター)へのリンクが設置してあるか
  8. キービジュアル画像にsrcsetが設定されているか
  9. ホバーアニメーションを導入しているか
  10. jQueryを1箇所以上で使用しているか(プラグイン可)

LPのアウトライン例

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

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

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


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



参考サイト
www.felica.info




note.mu



作例
http://ciel.starfree.jp/web-works/test-05/


http://doors1011.starfree.jp/Yukiko.Sato_test05/index.html


http://hk1115.starfree.jp/test-05/index.html


http://bntncayo05.starfree.jp/lp-test/


http://kdportfolio5.starfree.jp/test05/

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

スクロール位置に応じてナジゲーションボタンにカレント表示をする

ある程度スクロールする必要がある縦長ページでは現在地を示すようにナジゲーションボタンにカレント表示をした方が良いでしょう。
各要素の「.offset().top」の位置を取得し、if文を使い、各要素の開始位置以上スクロールしたら、その要素にaddClassします。


参考サイト
www.e-creators.net


www.nagahama-kannon-house.jp


「offset().top」と「scrollTop()」の違い

offset().topとは特定のHTML要素が配置されている座標を取得するのに使われるメソッドで、scrollTop()はスクロールした量を取得するメソッド

scrollTop

「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置までのピクセル数を取得します。
{ scrollTop: 0 }であればtopから0ピクセルの位置で停止、{ scrollTop:100}であればtopから100pxの位置で停止します。

$(window).scroll(function() {
console.log($(this).scrollTop());
})
offsetメソッド

document内に配置した要素の位置を座標で取得できるメソッドになります。「top(Y座標)」と「left(X座標)」が取得出来ます

var Pos=$('#box').offset().top;
console.log(Pos);







HTML部分

<header>
<nav id="g-nav">
<ul>
<li id="list01" class="current"><a href="#content01">コンテンツ1</a></li>
<li id="list02"><a href="#content02">コンテンツ2</a></li>
<li id="list03"><a href="#content03">コンテンツ3</a></li>
<li id="list04"><a href="#content04">コンテンツ4</a></li>
</ul>
</nav>
</header>

<div id="content01" class="box">
コンテンツ1
</div>
<div id="content02" class="box">
コンテンツ2
</div>
<div id="content03" class="box">
コンテンツ3
</div>
<div id="content04" class="box">
コンテンツ4
</div>


jQuery部分

$(window).on('load resize',function(){
  var pos01 = 0;
  var pos02 = Math.round($("#content02").offset().top);
  var pos03 = Math.round($("#content03").offset().top);
  var pos04 = Math.round($("#content04").offset().top);

  $(window).on('load resize scroll',function(){
    var posScroll = $(window).scrollTop();
    if(pos01 <= posScroll && posScroll < pos02) {
      $("#list01").addClass('current').siblings('li').removeClass('current');
    } else if(pos02 <= posScroll && posScroll < pos03) {
     $("#list02").addClass('current').siblings('li').removeClass('current');
    } else if(pos03 <= posScroll && posScroll < pos04) {
     $("#list03").addClass('current').siblings('li').removeClass('current');
    } else if(pos04 <= posScroll && posScroll) {
     $("#list04").addClass('current').siblings('li').removeClass('current');
    }
  });
});



liginc.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を割り当てられるのです。

つまり検索エンジンにとってクロール・インデックスしやすくなります。

Googleの記事では、無限スクロールは次々にページを捲っていく事と同じとしている。そのため、無限スクロールで新しいコンテンツが表示される度にブラウザの履歴(URL)を更新しなければいけない。さらにスクロールでページを進んだり戻ったりする度にURLを更新させる必要があります。


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


www.suzukikenichi.com


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

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

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

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


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


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';
}

トップページ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SEOに適した無限スクロール</title>
<link rel="stylesheet" href="/infini-scroll/css/style.css">
</head>
<body>
<h1>SEOに適した無限スクロール</h1>
<div id="container">
<div class="wrapper">
<p class="main-photo"><img src="/infini-scroll/img/top.png" alt=""></p>
<p class="lead">yachin29が薦める「これだけは読んでおけ!」な5冊を紹介。 国民文学作家による、歴史大河小説から世界的に有名な海外SF作品まで、珠玉の5冊を紹介。きっとあなたの「これだけは読んでおけ!」な本が見つかるはず</p>
</div><!-- ./wrapper -->

<a id="next" href="/infini-scroll/book1/">次のページ</a>
</div><!-- /#container -->

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

下層ページ

<script>
setTimeout("redirect()", 0);
function redirect(){
location.href='../index.html';
}
</script>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新・平家物語</title>
<link rel="stylesheet" href="/infini-scroll/css/style.css">
</head>
<body>

<div id="container">
<div class="wrapper">
    
<h1 class="page-title">新・平家物語</h1>
<div class="page-inner">
<p class="page-photo"><img src="/infini-scroll/img/01b.jpg" alt=""></p>
<div class="page-txt-box">
<p class="page-txt"> 新・平家物語『新・平家物語』は、吉川英治の歴史小説の大作。1950年から1957年まで「週刊朝日」に連載された。現行版は吉川英治歴史時代文庫全16巻。題材は『平家物語』だけでなく、『保元物語』『平治物語』『義経記』『玉葉』など複数の古典をベースにしながら、より一貫した長いスパンで源平両氏や奥州藤原氏、公家などの盛衰を描いた長編作品。</p>
<p class="to-amazon"><a href="#">ご購入はこちら</a></p>
</div>
</div><!-- /.page-inner -->
</div><!-- ./wrapper -->

<a id="next" href="/infini-scroll/book2/">次のページ</a>
</div><!-- /#container -->

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




note.com

Illustratorの様々な機能を使用すればインパクトのある企画書を作成する事が出来ます。サイト制作のスケジュールにある程度余裕がある人はIllustratorで企画書の清書をしてみましょう。
さらに、完成後就活時を想定してPDF化してメール等で送れるようにしておきましょう。


helpx.adobe.com


データをPDF形式で書き出す際のポイント

ポートフォリオをPDF形式で面接先の会社にメールで送りたいのにPDFのデータが非常に大きく、困ってしまう。就職活動中によくある事です。
IllustratorからデータをPDFで書き出す場合、書き出す形式に気をつけないと、必要以上にデータ量が大きくなってしまうので、をPDFで書き出す場合は用途別に適切なプリセットを選ぶようにしましょう。

PDFで書き出す際のデフォルトのプリセットである「Illustrator 初期設定」は相手もIllustratorで見る事を前提としたプリセットなので、自然とデータサイズも大きくなってしまいます。
面接先への提出であれば、相手は表示して確認するだけなので、プリセットは「最小ファイルサイズ」形式で保存して大丈夫です。「最小ファイルサイズ」形式で書き出せば、データは非常にコンパクトになり、扱いやすくなるので、面接先への提出であればプリセットは「最小ファイルサイズ」で保存するようにしましょう。


また、aiファイルからPDFに保存する際も「複製を保存」で行う方が「別名で保存」よりもトラブルが起こり難いので、必ず「複製を保存」でPDF形式に保存しましょう。




www.dtp-transit.jp


tomoyukiarasuna.com

githubでreadmeファイルを作成する

READMEというのは、GitHub等で公開されるソフトウェア(リポジトリ)の説明書きのことです。
そのリポジトリーがどういった趣旨の物なのか、しっかりと説明しましょう。

readmeに記載する物

  • プロジェクトのタイトル
  • プロジェクトの概要説明
  • プロジェクトのURL
  • サイトのスクリーンショット画像
  • 使用言語
  • 使用している機能
  • 目次
  • 過去の経歴など

https://github.com/0918nobita/Portfolio




マークダウン記法(md)
githubのreadmeはmd記法なので、md記法を使って書いていきましょう。
qiita.com