webサイト制作の勉強|2019年3月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。

第5回実技試験:LPの作成

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

ゴール

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

  • 画像はこちらから支給。それ以外は各自で用意する
  • テキストは公式サイトから取ってくるか、自身で作成
  • カンプ・ワイヤーは各自の判断で作成
  • 提出日は8月16日金曜日の20:55分まで

採点基準

  1. AIDAの法則に沿ったストーリー性のあるコンテンツ内容(A部分)
  2. AIDAの法則に沿ったストーリー性のあるコンテンツ内容(I部分)
  3. AIDAの法則に沿ったストーリー性のあるコンテンツ内容(D部分)
  4. AIDAの法則に沿ったストーリー性のあるコンテンツ内容(A部分)
  5. CTAの設定(クリックされ易いボタンの作り)
  6. SNS(ツイッター)ボタンの設置
  7. 公式サイトのトンマナに合わせたデザイン
  8. キービジュアル画像をsrcsetを使って最適化させる
  9. ホバーアニメーションの導入(Hover.cssを使用)
  10. jQueryを一ヶ所以上で使用(プラグイン可)
  11. 可能であればレスポンシブ対応

LPのアウトライン

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

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

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


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


felica-web.hatenablog.jp


note.mu

cssの正規表現を使って要素を絞り込む

divなどの要素に複数のクラス名を付けてcssでコントロールする、という事自体は以前からやって来ましたが、クラス名が増え過ぎてしまうと、逆にコントロールし難くなってしまいます。
そういう場合に正規表現を上手に使う事でコントロールしたい要素を絞り込む事が出来ます。

<div class="box-a"></div>
<div class="box-b"></div>
<div class="box-c"></div>

クラス名の行頭を一致させる場合

div[class^="box"] {
 
}

クラス名の行末を一致させる場合

div[class$="◯◯"] {
 
}

クラス名の部分一致させる場合

div[class*="◯◯"] {
 
}

Sassのfor文を使ってループ処理する

@for $i from 1 through 8 {
    $width: percentage(1 / $i);
    .col#{$i} {
      width: $width;
    }
}

8の倍数デザイン論とそれに伴ったブレイクポイント

従来、divや余白の大きさはデザインやコンテンツのボリュームによってマチマチですが、その都度値を決めるのでは無く、ある指針(ガイドライン)に沿って決める場合がよくあります。
その中でも、
「8の倍数デザイン論」と呼ばれる、全ての物を8の倍数でデザインする手法があります。
その根拠として、

  • 多くのデバイスのディスプレイが8の倍数でできている
  • iPhoneのUIも8の倍数でできている

などです。



ameblo.jp



デザインを効率化する上で、ガイドラインは非常に重要ですが、必ずしも全ての要素にこの8の倍数理論を取り入れなければいけない訳でなく、divの大きさや余白に一定のルールを持たせ、デザイン的に共通性を持たせる事が重要です。余白を統一するというのはすべてのデザインにおける大前提的なテクニックですので、仕上がりが良くなります。また、細かい値を指定する際に迷いも少なくなる事から作業の効率化も図れるので、こういったガイドラインを持つ事は非常に大事です。



8の倍数でのブレイクポイント

これまでの授業では、
PC =960px以上
タブレット = 768~959px
SP = 767px以下

というある意味、一番シンプルかつ簡単なブレイクポイントで管理してきましたが、少し複雑なレイアウトになるとこの3点だけで全て解決するのはかなり無理があります。
さらに、デバイスサイズの多様化は日々進んでいる為、変化に対応出来る最適なブレイクポイントを自身でしっかりと把握出来る事が重要です。


最近のよくあるブレイクポイント

f:id:yachin29:20180802172114j:plain



大きいサイズのPC = 1280px以上
通常のPC = 1279~960px
タブレット = 959~600px
スマホ横・小さいタブレット = 599~480px
スマホ縦 = 479px以下





$point-pc:1279px;
$point-tablet:959px;
$point-lsp:599px;
$point-sp:479px;


@mixin pc {
    @media screen and (max-width:$point-pc) {
      @content;
    }
  }

  @mixin tablet {
    @media screen and (max-width:$point-tablet) {
      @content;
    }
  }
  @mixin lsp {
    @media screen and (max-width:$point-lsp) {
      @content;
    }
  }
  @mixin sp {
    @media screen and (max-width:$point-sp) {
      @content;
    }
  }


/*大きいPC用*/
body {
    background: #000;
    }

/*小さいPC用*/
 @include pc {
    body{
        background:#00F;
    }
 }

/*タブレット用*/
@include tablet {
    body{
        background:#0F0;
    }
 }
/*スマホ横用*/
@include lsp {
    body{
        background:rgb(255, 166, 0);
    }
 }
/*スマホ用*/
@include sp {
    body{
        background:rgb(255, 0, 119);
    }
 }

Sassを使ってレスポンシブサイトをコーディングしてみる

f:id:yachin29:20190815141115j:plain


素材
http://school.yachin29.com/0815test.zip


レスポンシブサイトを作る際にはメディアクエリーが必須ですが、これもSassのmixinを使う事で見通しの良い記述に変える事が出来ます。
またブレイクポイントやメインのカラーコードを変数化する事で効率化が図れます。

さらに、今回はmarginやpaddingの値を8pxの倍数に設定します。

変数の設定
$point-tablet: 959px;
$point-sp: 767px;
mixinの使い方
@mixin 名前 {
  @media (max-width:$point-tablet) {
    @content;
  }
}
@mixin sp {
  @media (max-width:$point-sp) {
    @content;
  }
}

body {
  background: #222;
  @include tablet {
      background: #f00;
  }
   @include sp {
      background: #df9e3d;
  }
}


index.html

<header>
<div class="header-inner">
<h1><img src="img/logo.png" alt=""></h1>
<nav class="g-nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">CONCEPT</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<div class="main">
<div class="key-visual">
<img src="img/main.jpg" alt="">
<h2>旬の素材を楽しむ</h2>
<p>THAI-NAMAはタイ風の家庭的な料理をご提供しているお店です。<br>
季節感を大切に、旬のものを使いつつ、楽しんで貰えるメニューを揃えています。</p>
</div>


<div class="wrapper">
<p class="food"><img src="img/sub1.jpg" alt=""></p>
<p class="food"><img src="img/sub2.jpg" alt=""></p>
<p class="food"><img src="img/sub3.jpg" alt=""></p>
</div>

<h3>NEWS</h3>
<dl class="news">
<dt>2019/08/15</dt>
<dd>夏季休暇のお知らせ。</dd>
<dt>2019/08/10</dt>
<dd>夏のカレー・フェアを開催中。</dd>
<dt>2019/07/12</dt>
<dd>夏のメニューを追加しました。</dd>
</dl>
</div>
<footer>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">CONCEPT</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<div class="footer-inner">
<div class="info">
<p class="tel">03-1234-4567</p>
<p class="mail">reservation@thai-nama.net</p>
</div>
<div class="address">
<p>〒150-0001 東京都渋谷区神宮前3-4-5 タイ生ビル1F</p>
<p>JR渋谷駅徒歩5分|JR原宿駅徒歩6分</p>
<p>副都心線、千代田線・明治神宮前徒歩7分</p>
</div>
</div>
<p class="copy"><small>Copyright 2019 THAI-NAMA</small></p>
</footer>


style.scss

@import "_reset.scss";
a {
  color: #222;
}
//変数セット
$main-color:#c94343;
$footer-color:#60911d;
$unit:8px;
$point-tablet: 959px;
$point-sp: 500px;


//mixinセット
@mixin tablet {
  @media (max-width:$point-tablet) {
    @content;
  }
}
@mixin sp {
  @media (max-width:$point-sp) {
    @content;
  }
}
//レイアウト
header {
  width: 100%;
  border-bottom:4px solid $main-color;
}
.header-inner {
  max-width: $unit*120;
  padding: $unit*2 0 $unit;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  @include tablet {
    display:block;
    h1 {
      text-align: center;
    }
  }
  img {
    max-width: 100%;
  }
}
.g-nav ul {
  display: flex;
  justify-content: space-between;
  li {
    margin: 0 $unit*2;
    @include sp{
      width: 25%;
      margin: 0;
    }
    a {
      display: block;
      font-weight: bold;
      padding: $unit*3;
      @include tablet {
        padding: $unit*1.5;
        font-size: 14px;
      }
      @include sp {
        padding:$unit*2 0;
        text-align: center;
      }
      &:hover {
        color:$main-color;
      }
    }
  }
}
.main {
  max-width: $unit*120;
  margin: 0 auto $unit*10;
  padding-top:$unit*3; 
  img {
    max-width: 100%;
  }
}

.key-visual{
  margin-bottom: $unit*6;
  text-align: center;
  h2 {
    font-size: 28px;
    margin:$unit*6 0 $unit*2;
  }
  p {
    padding: 0 $unit*5;
    line-height: 1.8;
    margin-bottom: $unit*3;
  }
}
.wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: $unit*8;
  @include sp {
    display:block;
    text-align: center;
  }
}
h3 {
  border-left: 20px solid $main-color;
  padding-left: $unit*3;
  margin-bottom: $unit*3;
  @include tablet{
    margin-left: $unit*2;
  }
}
dl {
  @include tablet{
    padding-left: $unit*2;
  }
}
.news dt {
  float: left;
  margin-bottom: $unit*1;
}
.news dd {
  padding-left: 8em;
  margin-bottom: $unit*1;
  text-decoration: underline;
  @include sp{
    padding:0 1em 0 7em;
  }
}
footer {
  background: $footer-color;
  color: #FFF;
  ul {
    padding-top:$unit*2;
    margin-bottom: $unit*4;
    display: flex;
    justify-content: center;
    li {
      border-right: 1px solid #FFF;
      @include sp{
        width: 25%;
        border-right:0;
        &:nth-of-type(-n+3) {
          border-right: 1px solid #FFF;
        }
      }
      &>a {
        display: block;
        text-align: center;
        font-weight: bold;
        padding: $unit*1 $unit*3;
        color: #FFF;
        @include sp{
          padding: $unit*1 0;
          font-size: 14px;
          font-weight: normal;
        }
        &:hover {
          text-decoration: underline;
        }
      }
    }
    li:first-of-type {
      border-left:1px solid #FFF;
      @include sp{
        border-left:0;
      }
    }
  }
}
.footer-inner {
  max-width: $unit*120;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  @include tablet{
    display:block;
    padding-left: $unit*2;
  }
  p {
    margin-bottom: $unit*1;
    i{
      font-size: $unit*3;
      margin-right: $unit*1; 
    }
  }
}
.copy {
    text-align: center;
    padding: $unit*3 0;
  }

sassを使ってみる

f:id:yachin29:20190813035820p:plain

Sassとは?

Sass(Syntactically Awesome Stylesheets)とはcssメタ言語で、簡単にいうとcssの機能を拡張した高機能版cssといった感じです。

Sassを使うメリット
  • 変数などプログラム的な使い方が可能
  • メンテナンス性が高い
  • 記述量を減らし、データの圧縮が可能

他にも挙げればキリが無いですが、特にcssが数千行〜1万行くらいになってしまう場合や、頻繁に更新が入るサイトなどには必須と言って良いと思います。
ただ、今までのcssを全てsassに打ち直すわけではなく、今までのcssプラスアルファsassの便利な機能を使っていく、という形で良いと思います。

Sassを使う準備

Sassはcssと違って、そのままではブラウザーが理解出来ないのでコンパイル(変換)する必要があります。rubyを使ってコンパイルするのが一般的ですが、授業では「VS Code」というIDE統合開発環境)を使って、その場でSassをcssコンパイルしながら使っていきます。

IDE統合開発環境)とは

IDE とは、従来、コンパイラテキストエディタ、デバッガなどがばらばらで利用していたものをひとつの対話型操作環境から利用できるようにしたもの。


以下からVS Codeをダウンロードします
code.visualstudio.com

VS Codeにダウンロードするプラグイン
  • Japanese Language Pack for Visual Studio Code
  • Live Sass Compiler
  • Live Server
  • Auto Close Tag
Live Sass Compilerの設定

設定ファイルをいじる事で、コンパイルするcssファイルの「記述形式」「cssファイルの拡張子」「cssファイルの保存場所」等を設定出来ます。


{
    "workbench.colorTheme": "Visual Studio Light",
    "git.ignoreMissingGitWarning": true,
    "window.zoomLevel": 0,
    "editor.fontSize": 26,
    "liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            "extensionName": ".css",
            "savePath": "/css"
            
        }
    ],
    "liveServer.settings.donotShowInfoMsg": true,
    "editor.minimap.enabled": false,
    "workbench.iconTheme": "simple-icons",
    "workbench.startupEditor": "newUntitledFile",
    "editor.renderWhitespace": "all"
}

記述形式は以下の4種類があり、

  • nested: ネストされた状態
  • expanded: 手書きに近い
  • compressed: スペース、改行、コメントを除いた形式に出力する
  • compact: 読みやすさをある程度保持しつつデータサイズが小さくなるような形で出力
 "liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            "extensionName": ".css",
            "savePath": "~/../css/"
            
        }
    ]
表示言語を日本語にする

VS Codeは基本的には日本語に対応しているので自動で日本語表示になりますが、アップデートをしたりすると英語表記に戻ってしまう事があるので、その場合の手動での設定方法を覚えましょう。

VSCode上で「Ctrl+Shift+P」を押してコマンドパレットを開き、

>Configure Language

と入力し、言語設定をjaに変えます。

f:id:yachin29:20190813134318p:plain


Sassの記述方法

SassにはSASS記法(style.sass)とSCSS記法(style.scss)という2つの書き方があります。どちらの記法を使用するかでファイルの拡張子が変わるので注意しましょう。
cssを習得している人にとってはSCSS記法(style.scss)の方が書きやすいので、授業ではSCSS記法(style.scss)で進めていきます。


HTML

<div class="box">
<p>初めての<span>Sass</span></p>
</div>
従来のcss記法
.box {
background: #000;
padding:50px;
}
.box>p {
  color: #F00;
}
.box>p>span {
  font-weight: bold;
}
SCSS記法
.box {
background: #000;
padding:50px;

  p {
    color: #F00;

    .box>p>span {
       font-weight: bold;
     }
  }
}

といったようにネスト状に書いていくのがSCSS記法の特徴です。

SASS記法
.box 
background: #000
padding:50px

  p 
    color: #F00

    .box>p>span 
       font-weight: bold

ちなみにSASS記法ではセミコロンと括弧が省略出来るためもっとシンプルな形になります。



scssフォルダーを作り、その中のstyle.scssに必要な記述をしたら保存し、「Watch Sass」というボタンを押しcssコンパイルさせます。
f:id:yachin29:20190814025512p:plain




設定ファイルの "savePath"のところを "~/../css/"というように設定していれば、scssフォルダーと同じ階層に「cssフォルダー」が作られ、その中に「style.css」が作成されます。なので、そのコンパイルされたcssファイルをいつものようにhtmlファイルにリンクさせます。


f:id:yachin29:20190814030142p:plain