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

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

シングルページのカフェサイト(6月18日)のデータ

single-pageに入れるjqueryプラグイン
・bxslider(fade)
Lightbox
使用するAPI
google form(自動返信機能付き)、twitterfacebook
自身で実装するjquery
・スムーススクロール、タブパネル、ajax
別途記載するもの
css変数を使用してカラーマネジメント
・ロゴデータをsvg形式で使用
・セクショニングを意識したマークアップ



<!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>シングルページのカフェサイト</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
</head>
<body>
<header>
<h1>ロゴ</h1>
<div class="main-visual">
<ul class="bxslider">
<li><img src="img/main01.jpg" alt=""></li>
<li><img src="img/main02.jpg" alt=""></li>
<li><img src="img/main03.jpg" alt=""></li>
</ul>
</div>
</header>
<nav id="g-nav">
<ul>
<li><a href="#">Top</a></li>
<li><a href="#video">Video</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#info">Info</a></li>
<li><a href="#form">Form</a></li>
</ul>
</nav>
<main>
<section>
<h2>News</h2>
<dl id="news-list">

</dl>
</section>

<section id="video">
<h2>Video</h2>
</section>

<section id="menu">
<h2>Menu</h2>
</section>

<section id="gallery">
<h2>Gallery</h2>
</section>

<section id="info">
<h2>Info</h2>
</section>

<section id="form">
<h2>Form</h2>
</section>
</main>
<footer>
</footer>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
$(document).ready(function(){
  $('.bxslider').bxSlider({
  mode:"fade",
  auto: true,
  pager: false,
  controls: false,
  speed: 3000,
  pause: 3000
  });
});
</script>

<script>
$('#news-list').load('list.txt');
</script>

</body>
</html>


style.css

@charset "utf-8";

:root{
--main-color:#AA1744;
}


html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}

header{
width: 100%;
height: calc(100vh - 50px);
position: relative;
}
h1{
width: 400px;
height: 300px;
background: url(../img/logo.svg)no-repeat center center/contain;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
position: absolute;
top: 50px;
right: 100px;
z-index: 3000;
}
.main-visual{
width: 100%;
height: 100%;
}
.main-visual li{
width: 100%;
height: calc(100vh - 50px);/* fadeの場合はimgの親要素に直接高さを指定する */
}
.main-visual img{
object-fit: cover;
width: 100%;
height: 100%;
}
#g-nav{
background-color: #FFF;
width: 100%;
height: 50px;
position: sticky;
top: 0;
}
#g-nav>ul{
display: flex;
justify-content: center;
height: 50px;
align-items: center;
}
#g-nav li{
margin: 0 30px;
}
#g-nav a{
color: var(--main-color);
padding: 4px 12px;
font-weight: bold;
}
section{
width: 100%;
padding-top: 100px;
height: 100vh;/* 必ず最後には消す */
}
section>h2{
color: var(--main-color);
text-align: center;
font-size: 30px;
margin-bottom: 50px;
}
/* news部分 */
#news-list{
max-width: 600px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
#news-list>dt{
width: 30%;
color: var(--main-color);
font-weight: bold;
margin-bottom: 30px;
border-bottom: 2px solid var(--main-color);
padding-bottom: 6px;
display: none;
}
#news-list>dd{
width: 70%;
margin-bottom: 30px;
border-bottom: 2px solid var(--main-color);
padding-bottom: 6px;
display: none;
}
#news-list>dt:nth-of-type(-n+3),#news-list>dd:nth-of-type(-n+3){
display: block;
}

ヒーローヘッダーを使ったサイト制作

f:id:yachin29:20170209004414j:plain






最近、よく見かける「1枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。
「ヒーローヘッダー」と呼ばれています。

ヒーローヘッダー(Hero Header)とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージで構成されたウェブサイトのことを指します。

2014年頃から海外のウェブデザインにてトレンド的にかなり増えてきている手法です。
巨大な画像により、イメージを強く植えつけることができる反面、写真のクオリティ次第でウェブサイト全体の印象を悪くすることも有りますので、フラットデザイン同様簡単そうでデザインセンスの問われるデザイン要素となっています。


参考サイト
racines-park.com




ferret-plus.com


こういったレイアウトを作る際の1番のポイントは、用意する画像の大きさです。
自分のPCでは綺麗にフルスクリーンで表示されるけど、別のPCでは写真が見切れてしまっていたり、逆に余白が出てしまったり、という事が起こります。

ビットマップのデータをすべてのディスプレイでピッタリの大きさに合わせるという事は基本的に無理なので、ある大きさで書き出した画像をCSSで拡大・縮小していきます。

img要素の場合は前回やったようにフルードイメージ化する事で画像を可変にしましたが、background画像の場合は「background-size」というプロパティを使って、拡大・縮小していきます。



今回のようにフルスクリーンで画像を表示したい場合、絶対的に決まった大きさはありませんが、一番シェアの多いモニターの解像度で作るのが無難です。
モニター解像度のシェア(2017年1月現在)
f:id:yachin29:20170512100245p:plain

画面のアスペクト比も、以前の「4 : 3」のスクエア型から「16:9」と「16:10」といったワイド型が大半を占めているのが解ります。
f:id:yachin29:20170512112150p:plain





background-sizeプロパティの指定方法

background-sizeプロパティは、背景画像のサイズを指定する際に使用します。これまで使ってきたようなピクセルやパーセンテージの他に「contain」「cover」といった値でも設定出来ます。



f:id:yachin29:20180803121533p:plain

「contain」

縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する

「cover」

縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する


background-sizeプロパティは、スマホサイト制作でよく使用されるプロパティなので、各値の違いをしっかり覚えて使えるようにしていきましょう。



ベクター形式のロゴデータであれば、文字などを自由に編集できるので、場合によってはフリー素材などを使って編集してみましょう。




photoshopvip.net



blog.spoongraphics.co.uk

cssプラグインを使ってハンバーガーメニューを作る

f:id:yachin29:20170417125330p:plain

プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。



jonsuh.com



アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。


<p class="hamburger " id="btn">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</p>

jQueryとCSS3を使ったアニメーション

HTML5 × CSS3 × jQueryのハイブリッドアニメーション

f:id:yachin29:20160427010604j:plain


最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。

jQueryの特徴の1つであるアニメーション機能を使うと、手軽にアニメーションを実装することができてとても便利です。しかし、jQueryによるアニメーションを多用すると処理がどうしても重くなります。
特にスマホなどでは、元々アニメーションがネイティブアプリのUIに多く使われているため、jQueryによるアニメーションがもっさりとした動きになる事が多いです。
jQueryのアニメーションは、通常CPUにより処理されています。CPUはアニメーションだけでなくコンピュータ全体の演算を担っているため、CPUでアニメーション処理を行うとどうしても処理が遅くなってしまいます。

CSS3の「transformプロパティ」を使用したアニメーションはGPUが処理を行います。GPU「 Graphcs Prosessing Unit」は画像の処理が得意なので、描画をGPUで行う事でCPUの負担が軽減され、結果としてページ全体の表示も早くなります。

jQueryとCSS3を上手く使うことで、滑らかで負荷のかからないアニメーションを制作しましょう。

jQueryとは

jQuery(ジェイクエリー)とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリのスタンダードと呼ぶ者もいる

f:id:yachin29:20160425030539j:plain
https://jquery.com/



jQueryの特徴

jQueryの使い方

jQueryを使用する際には、jQuery本体をダウンロード、もしくはCDN(Content Delivery Network)を使い、HTMLファイルにリンクさせる必要があります。

jQueryのバージョン

jQuery本体はバージョンが1系、2系、3系に分類されていて、新しいバージョンは古いブラウザーに対応させる記述を無くしている分、データが軽くなっています。



japanese.engadget.com


www.atmarkit.co.jp


本体をダウンロードして使う場合

上記のjQuery公式サイトからダウンロードしましょう。jQueryはバージョンにより動かないメソッドがあるのでバージョンコントロールが必要です。

古いjQueryのバージョンはこちらからダウンロード出来ます
code.jquery.com


また、公式サイトからダウンロードする際に「compressed」と「uncompressed」の2種類のファイルが用意されています。

  • compressed~……改行などを除去してファイルサイズを抑えたファイル
  • uncompressed~……圧縮前の元ファイル。構造が見やすいがファイルサイズは大きい

通常、jQuery本体の記述を触る事はほとんど無いので、ファイルにサイズの軽い「compressed」版を使用しましょう。

本体をCDNで使う場合

CDN(Content Delivery Network)とは、ネットワーク経由でコンテンツを提供するサービスで、jQuery本体をダウンロードする事無くネットワーク上にあるjQuery本体を使用する方法です。
CDNを使用する場合のメリットは、他のサイトでも同じCDNjQuery本体を使用している場合、ユーザーがそのサイトを先に閲覧してればブラウザにキャッシュされるのでjQueryを読み込む必要が無い。つまり、使うサイトが多いほど事前にキャッシュされてる可能性が上がります。
CDNの場合、一見メリットだらけのように見えますが、CDN元でシステムトラブルがあったり、ネットワークが不安定な所では動かないので注意が必要です。またCDNの場合は、Minified(改行が除かれた圧縮版)を使用しましょう。


CDNjQueryの公式サイト以外にもGoogleMicrosoftにも用意されています。


developers.google.com


www.asp.net



記述方法

HTMLファイルは上から順番に読み込まれるという原則から、jQueryを使用する際は必ずjQuery本体を最初に記述しましょう。

jQuery本体をダウンロードしている場合

<head>
 ・・・
<script src="js/jquery-3.4.1.min.js"></script>
</head>

もしくは

<body>
 ・・・
<script src="js/jquery-3.4.1.min.js"></script>
</body>
CDNの場合
<head>
 ・・・
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

基本形

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  //jQueryを利用したコード
</script>
</head>
<body>
</body>
</html>


CDNを使用する場合、万が一ネットワークが不安定になった時の事も考えて、バックアップ用にダウンロードしたjQueryと両方を記述する方法もあります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
window.jQuery || document.write('<script src="jquery-3.4.1min.js"><\/script>');</script>
</script>
</head>
<body>
</body>
</html>

EFO お問い合わせフォーム最適化

EFO(Entry Form Optimisation)は「入力フォーム最適化」の略で、入力フォームをユーザーにとって使いやすく入力しやすい形に最適化し、入力して内容を送信できるように改善を行う施策のことを指します。
対面でのサービスが難しくなった今日「お問い合わせフォーム」の価値はこれまで以上に重要になりました。
ユーザーにとって、ストレスのかからないフォームを作る事が求められます。


問い合わせ時に必要な項目のみに限定する

企業側は多くの情報を取りたがりますが、目標が達成出来る必要最低限の項目のみでOK

スマホでタップしやすいデザインに

スマートフォンで問い合わせするユーザーも多いです

入力内容に合わせてtype属性を指定する

適切なtype指定をする事で入力時のストレスが緩和されます


自動補完機能を使えるようにする

HTMLのautocomplete属性を指定する事で、ブラウザへ設定した情報を利用したオートコンプリート機能(入力内容の自動補完)が利用できるようになります。




pulpxstyle.com



ics.media




作例
https://codepen.io/yachin29/pen/ZEBNENN

タッチアイコンの作成

f:id:yachin29:20151111202701j:plain

スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。
なので、スマートフォンサイトを制作する場合には必ずスマートフォンのホーム画面に登録出来る「タッチアイコン」をPCサイトでのファビコンと同様に作っておく必要があります。
「タッチアイコン」を設定せずにスマホサイトをホーム画面に登録すると、サイト全体のキャプチャー画像が仮の「タッチアイコン」としてホーム画面に設置されてしまい、一見何のサイトか解らないので必ず「タッチアイコン」を設定しましょう。


ポイント

  • 作成するタッチアイコン画像の拡張子は「.png
  • 画像に角丸等の処理はせず正方形で作る(ホーム画面に登録する際に自動で角丸等の処理が行われます)
  • 画像サイズは192px X 192px で書き出し出す
IOSサファリの場合

タッチアイコンは各デバイス毎に大きさが細かく指定されています。
各デバイスのタッチアイコンの大きさ
f:id:yachin29:20151111205107j:plain


各デバイスに最適な大きなのタッチアイコンをそれぞれ用意する場合もありますが、

  • 各デバイスの推奨サイズに一致する大きさのアイコンがない場合は、推奨サイズよりも大きいアイコンの中で最小のアイコンが適用される。
  • 推奨サイズよりも大きいアイコンがない場合は記述してある最大のアイコンが適用される。

という仕様を踏まえると、IOSだけで考えるとタッチアイコンは1番大きい180px X 180pxサイズのみで問題ありません。

細かい仕様は以下の公式ガイドラインの通りです

developer.apple.com

Android標準ブラウザ

Android標準ブラウザの場合、仕様が携帯端末によってバラバラで「これでOK」という物が無いので、なんとなくで対応。


それぞれのブラウザーの仕様を見比べた結果、
192px X 192pxサイズのタッチアイコンを1つだけ
用意するのがベストです。



タッチアイコンの設定方法

192px X 192pxで書き出したpng画像をHTMLファイルで設定します。
タッチアイコンはファビコンの時と同様、index.htmlファイルと同じ階層に裸で置いて下さい。
古いブラウザーへの対応も考えると記述はもっと多くなってしますが、現状では「iOS Safari and Chrome」と「 Android標準ブラウザ(一部)」の2つで十分です。

全てのページでタッチアイコンを表示させたい場合、全てのページにタッチアイコンを表示させる為の記述が必要になります。また、一部のAndroidではタッチアイコン画像のパスを絶対パスにしなければ表示されない場合があります。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タッチアイコンを設定する</title>
<link rel="stylesheet" href="css/style.css">

<!-- iOS Safari and Chrome -->
<link rel="apple-touch-icon" sizes="192x192" href="touch-icon.png">

</head>

以上です。


参考ブログ
itexp.hateblo.jp




タッチアイコンに任意のタイトルを表示させる

「タッチアイコン」をホーム画面に登録すると、デフォルトの設定ではページタイトルの中身がタッチアイコンの下に表示されます。ただ文字数に制限(半角11文字{全角6文字}まで)があり場合によっては文字が見切れてしまうのでタッチアイコン用のタイトルをページタイトルとは別に設定しましょう。

<meta name="apple-mobile-web-app-title" content="タッチアイコン用のタイトル">

をタイトルタグの下に追加します。


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タッチアイコンを設定する</title>
<meta name="apple-mobile-web-app-title" content="タッチアイコン用のタイトル">
<link rel="stylesheet" href="css/style.css">

<!-- iOS Safari and Chrome -->
<link rel="apple-touch-icon" sizes="192x192" href="touch-icon.png">


</head>

タッチアイコンをホーム画面に追加する

IOS Safari」の場合

ブラウザーでWebサイトを表示し、「アクション」アイコンから「ホーム画面に追加」をタップします。

f:id:yachin29:20151112095231p:plain
「アクション」アイコンをタップ


f:id:yachin29:20151112095243p:plain
「ホーム画面に追加」をタップ


Androidの場合

Androidの場合、機種によって方法が全く違うので、以下のサイトを参考にして下さい。
http://promo.search.yahoo.co.jp/tips/2015/android_home_shortcut.htmlpromo.search.yahoo.co.jp