スプリット=分割するデザインレイアウトのことです。画面を縦2つに分割して見せることで左右の対比が生まれます。
「スプリットレイアウト」の中でも、デザイン上のスプリットレイアウトのみのスクロール一体タイプと、CSSで画面半分を固定表示にして、残りの半分のみスクロールさせるスクロール分割タイプに大別されます。
さらには画面を4分割や5分割など、色々なパターンがあります。
レスポンシブサイトの制作
今回のレスポンシブサイトの制作ポイント
1、cssファイルは外部リンクでリンクさせ、適切なリセットをかける事
2、webアイコン(Google Fonts)(Font Awesome)を使う事
3、3つあるコンテンツ部分のホバーにアニメーションを追加
使用するテキスト
Ristorante Felica Home Concept Menu Access Ristorante Felicaは、 食とアートと音楽が交差する空間を創造します。 シェフ・矢島が提供するのは、イタリア料理に「東京」の エッセンスを取り入れたモダンイタリアン。 店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。 心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。 Concept 画像 仮テキスト Menu 画像 仮テキスト Access 画像 仮テキスト ©️ Ristorante Felica
2月4日作業分
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>レスポンシブサイトの作成</title> <meta name="viewport" content="width=device-width"> <link href="https://fonts.googleapis.com/css?family=Cinzel&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <div class="header-inner"> <h1>Ristorante Felica</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="#">Access</a></li> </ul> </nav> </div> </header> <div class="main-visual"> <img src="img/main.jpg" alt=""> </div> <div class="lead"> <h2>Ristorante Felicaは、 食とアートと音楽が交差する空間を創造します。</h2> <p>シェフ・矢島が提供するのは、イタリア料理に「東京」のエッセンスを取り入れたモダンイタリアン。<br> 店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。<br> 心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。</p> </div> <div class="wrapper"> <div class="block"> <a href="#"> <h3>Concept</h3> <p class="block-photo"><img src="img/01.jpg" alt=""></p> <p class="block-txt">つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐる</p> </a> </div> <div class="block"> <a href="#"> <h3>Menu</h3> <p class="block-photo"><img src="img/02.jpg" alt=""></p> <p class="block-txt">つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐる</p> </a> </div> <div class="block"> <a href="#"> <h3>Access</h3> <p class="block-photo"><img src="img/03.jpg" alt=""></p> <p class="block-txt">つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐる</p> </a> </div> </div><!--/.wrapper--> <footer> <p><small>© Ristorante Felica</small></p> </footer> </body> </html>
@charset "utf-8"; /* ress.css • v1.2.2 * MIT License * github.com/filipelinhares/ress */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;box-sizing:border-box}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{ border-bottom: 4px solid #de7330; padding-top: 20px; } .header-inner{ max-width: 1260px; margin: 0 auto; display: flex; justify-content: space-between; } h1{ color: #de7330;/*メインカラー*/ font-family: 'Cinzel', serif; font-size: 40px; } .g-nav>ul{ display: flex; } .g-nav li{ margin: 0 20px; } .g-nav a{ display: block; padding: 20px; text-align: center; color: #de7330; font-weight: bold; font-size: 18px; font-family: 'Cinzel', serif; } .g-nav a:hover{ text-decoration: underline; } /*メインビジュアル部分*/ .main-visual{ max-width: 1260px; margin: 40px auto 60px; } .main-visual>img{ max-width: 100%;/*フルードイメージの設定*/ } /*リード文部分*/ h2{ text-align: center; } .lead>p{ max-width: 800px; margin: 20px auto 80px; } /*block部分*/ .wrapper{ max-width: 1260px; margin: 0 auto 80px; display: flex; justify-content: space-around; padding: 20px 0; } .block{ width:30%; padding: 20px; box-sizing: border-box; transition: 0.2s; } .block:hover{ box-shadow: 0 0 15px #aaa; } .block h3{ color: #de7330; font-family: 'Cinzel', serif; font-size: 30px; margin-bottom: 10px; } .block-photo{ overflow: hidden; margin-bottom: 10px; } .block-photo>img{ max-width: 100%; transition: 0.5s; } .block:hover img{ transform: scale(1.2); } .block-txt{ color: #222; } footer{ width: 100%; height: 100px; background: #de7330; color: #FFF; } footer>p{ text-align: center; padding-top: 20px; }
CSS演習問題
今回の制作の仕様
- header要素の幅960px高さは350px
- header画像は自身で制作し、「CAFE de FELICA」の文字を画像に入れる
- ボタンは5つを均等の幅で設置し、高さは50px
- コンテント要素の幅650px 高さ500px
- フッター要素の高さ50px
- コンテント要素内の文章は回り込みをさせる
- 各要素の空き・色は適宜
- ナビゲーションボタンをホバーした際に文字色と背景色が変わるように
使用するテキスト
CAFE de FELICA 毎日食べたい、おうちみたいなごはんやおやつ CAFE de FELICAは、あなたのもうひとつの「おうち」になりたいごはんやさんです。 毎日食べたくなるような、どこかホッとするごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えします。 気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、 「ただいま」を心よりお待ちしています。ただいま、夏限定のメニューを多数ご用意しております。 ぜひお越しください。 コピーライトマーク CAFE de FELICA
使用する画像
※header画像は自身で用意する事(サイズ960px X 350px)
ブロックレベル要素とインライン要素の違い
HTMLには色々な要素(h1とかp)がありますが、その要素は大きく分けて「ブロックレベル要素」と「インライン要素」の2つに分かれます。
この「ブロックレベル要素」と「インライン要素」の違いと特性をしっかりと理解する事で、実際に制作する際によく生じてしまう、意図しないズレや空きを無くす事が出来ます。
インライン要素
インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、p要素の中のspan要素のように、段落のなかの一部を修飾・強調するような使われ方をする要素です。 一般的なブラウザでは改行されず、横に並びます。
<a>、<abbr>、<br>、<em>、<img>、<input>、<label>、<select>、 <small>、<span>、<strong> など
ブロックレベル要素
ブロックレベル要素は、見出し・段落・表など、HTMLを構成する基本となる要素で、一つのブロック(かたまり)として認識されます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは改行されます。
<div>、<h1>-<h6>、<ol>、<ul>、<li>、<p>、<table> など
配置ルール
ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。 一方、インライン要素の中には、他のインライン要素を配置することができますが、 インライン要素の中にブロックレベル要素を配置することはできません。
正しい配置方法
<p><span>段落となります。</span></p>
間違った配置方法
<span><p>段落となります。</p></span>
インライン要素の特性
width – 効かない
height – 効かない
margin – 左右は効くけど、上下は効きません。
padding – 一応上下左右効くけど、上下は不安定 …。
特別なインライン要素 img、input、textarea
同じインライン要素でも img タグ、input タグ、textarea タグ などは特別です。インライン要素なので、他のインライン要素と同じように、続けて書くと横に並びます。
しかし、他のインライン要素との大きな違いは、margin や padding、width や height も指定できるところです。
width – 効く
height – 効く
margin – 効く
padding – 効く
インライン要素をブロックレベル化する「display: block 」
width や heightを指定できないインライン要素に対し、
「display: block 」を指定する事でa要素などをブロックレベル化する事が出来、width や heightを指定する事が出来ます。
a { display: block; }
githubでissue管理をする
基本的にサイト制作はチームで行うのですが、未経験者であっても「githubのissue」機能を使って、チーム開発を見据えたサイト制作をしてみましょう。
- githubでissueを作る
- issueに対応する作業ブランチを作る
- ローカルで作業が終わったらcommitして、リモートリポジトリにpushする。コミットする際にコミットメッセージをissue番号にすることでcommitがgithub上のissueと結びつく
- githubでプルリクエストを作る
- githubでプルリクをマージする。コンフリクトがないことを確認してボタンを押す。本来なら責任者が再鑑してからマージする。
- githubでissueをクローズし、いらないブランチを削除
- マスターブランチにチェックアウトしリモートリポジトリからpullして最新状況を取得する
- 1に戻って次のissue(作業)を作る
Gitを使うーGitHubとSourceTreeの導入
Gitとは?
Git(ギット)とは、バージョン管理を行うためのツールのことです。複数人でプログラミングやコーディングを行う場合、ソースコードを効率的に管理・運用する必要があります。「誰がどのファイルのどの部分を修正したのか?」や「リリース予定の機能追加で更新するのは、どれとどれか?」といったことです。
例えば、Aさんがトップページの修正を行っている間に、Bさんがトップページの他の部分の修正を行っていたとします。お互いに修正が終わり修正内容をアップロードした場合、もちろんAさんがアップロードしたデータにはBさんが修正した内容分は反映されていないので、アップした内容はAさんの作業分しかアップロードされていない事になります。さらに、その後Bさんがデータをアップロードしてしまうと、今度はBさんが修正した分のみが反映されて、Aさんが修正した分は消えてしまいます。なので、このような事が起こらないように、事前にローカル上で互いのデータを見比べて、AさんとBさんのデータの差分をお互いにチェックしてからアップロードをする必要があります。
Gitはこういった場合に作業をより円滑に進められるようにつくられたツールで、システム開発の現場では一般的に使われているツールの一つです。
GitHubとは
Gitは通常、リモート上とローカル上を使い分けて作業を行います。GitHub(ギットハブ)とは、このリモートにあたる部分を提供しているサービスのことです。複数人での開発をサポートしてくれる便利な機能が備わっていて、現在ではエンジニアにとって欠かせないツールの一つになりました。無料でも使用する事が出来ますが、プライベート(非公開)リポジトリを利用したい場合は、有料プランに登録する必要があります。
SourceTree
Gitのクライアントツールと呼ばれ、Gitの操作を簡単にするものです。通常Gitのコマンドはターミナル上で打ち込みますが、SourceTreeを使う事でより視覚的に、簡単に作業を行う事が出来ます。
Gitで使う用語
初めてGitを触る人にとって、解り辛さの原因の1つに用語の解り辛さが挙げられます。意味をしっかりと理解出来れば作業自体は難しくないので、まずはよく使うワードとその意味をしっかりと理解しましょう。
リポジトリ
リポジトリとは、ファイルやディレクトリの状態を保存する場所です。変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。Dreamweaverで作業する時に設定する「サイトの管理」と同じような物です。
リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2箇所にあります。基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。GitHubはこの「リモートリポジトリ」の場所を提供してくれるサービスです。
コミットとプッシュ
コミット(commit) :ファイルの追加や変更の履歴をリポジトリに保存すること。GitHubではこの際に作業者が「どこどこを変更しました」など他の人に解るようにメモを残せるような機能もついています。
プッシュ(push) :ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作です。
基本的な作業の手順としては
といった感じです。
ブランチ
ソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ(branch)という機能があります。
ブランチは履歴の流れを分岐して記録していくものです。分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。
GitHubとSourceTreeの導入方法
GitHubでの作業
GitHub上での作業は非常に簡単で単純ですが、基本的にインターフェイスが英語なので、ある程度慣れが必要になります。
まずはGitHubのアカウントを作りましょう。
続いて、プランを選択します。有料のプランもありますが、無料で使えるFreeプランがあります。Freeプランはソースがオープンになってしまいますが、今回はFreeプランで登録するので、「Free」を選んでから「Finish sign up」ボタンをクリックします。
リポジトリの作成
アカウントを作った後に、そのプロジェクトのマスターがリポジトリを作成します。
GitHubにログインした状態で、「New Repository」ボタンを押します。
次に表示される画面では、「Repository name」の入力のあと、必要に応じて「Description」も入力します。
また、リポジトリの種類を「Public」か「Private」を選択します。この「Private」リポジトリは、有料会員のみ作成することが可能なので、ここでは「Public」を選びましょう。
最後に、リポジトリの中にあらかじめREADMEファイルを作成しておく場合は「Initialize this repository with a README」にチェックを入れます。.gitignoreやlicenseについては後で追加や変更ができますので、Noneを選択します。
必要項目の入力が終わり「Create repository」ボタンをクリックするとリポジトリの作成は完了です。
次の画面で、リモートリポジトリのアドレスが表示されますので、控えておいてください。また、このリモートリポジトリのアドレスはプロジェクトチームの他のメンバーがGitHubとSourceTreeを紐付ける時に必要になるので、他のメンバーにも教える必要があります。
SourceTreeのインストール
次に以下のサイトからSourceTreeをインストールします。
ja.atlassian.com
SourceTreeでの作業
GitHub上に作った「リモートリポジトリ」をローカル上にコピー(クローン)します。
「リモートリポジトリ」のURLをコピーし、SourceTreeの「新規リポジトリ」→「URLからクローン」を押し、先程コピーしたURLとクローン先(ローカル上)のディレクトリを指定します。
(ローカル上に「リモートリポジトリ」のクローンである「ローカルリポジトリ」を作る際には中身が空のディレクトリを用意してあげる必要があります。)
そしてクローンすると、新しくローカルリポジトリが作成されます。
作業開始直後はまだ何も表示されませんが、その後更新作業などを進めていくと、このようにグラフが伸びていき、作業の進捗状況なども可視化でき、解りやすくなります。
作業を進めるとこんな感じになります。
複数人でブランチを分けていった場合
以上で、GitHubとSourceTreeの導入部分は終了です。
次回は実際の作業やよく起こる問題の対処法などを説明します。とにかくこういうのは慣れなので、実際の現場仕事で致命的なミスを犯してしまう前に友人同士で練習してみる事をオススメします。
LP(ランディングページ)の作成
ランディングページ(Landing Page)とは本来、訪問者が最初に着地する(land)ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを指します。
LPでもっとも大事なのはいかに訪問者に目標となるアクションを行わせるか、です。
コンバージョン
コンバージョンとは、変換を意味する言葉です。Web マーケティングの分野に置いては、「顧客見込み」から「顧客」への変換を意味し、成約を意味する言葉で最終的な成果として使われます。主に購入・資料請求・お問い合わせ・会員登録などを コンバージョンにする場合が多いです。 コンバージョンを設定することで、Webにおける施策の効果測定が出来るようになります。
コンバージョンが起きた割合のことを コンバージョン率( CVR)といいます。コンバージョン率は、 コンバージョン数÷ 訪問数で算出することが出来ます。
ゴールの設定
ターゲットとなるユーザーにとってほしい行動を明確にします。商品購入をしてほしいのか、会員登録をしてほしいのか、お問い合わせをしてほしいのかなどです。場合によってはペルソナと呼ばれる、具体的なユーザーの人物像を想定し、その人物に向けて訴求力の高いLPを作る必要があります。
ストーリー性
「顧客見込み」から「顧客」へ変える為にはユーザーにストーリー性を持ったページを作り、ページ内でしっかりと説明をすることが大事です。
AIDAの法則
Attention:注意
まず、ユーザーの注意を引きます。問題解決をしたいユーザーに、なにそれ!と思わせることが重要です。
Interest:興味
興味を持ってくれそうな内容を書きます。詳細な説明を書いていきます。4つのポイント・3つの理由など、数を提示する事もあります。
Desire:欲求
ユーザーにとってのメリットや競合との差別化要因を伝えます。問題の解決ができる理由を示すことも有効です。
Action:行動
ユーザーが迷いなく申し込みや購買などのアクションをとれるよう、最後のひと押しをします。なぜ「今」「ここ」で買うのがいいのかを強調します。
CTA
CTAとは、Call To Action(コール トゥ アクション)の略で、「行動喚起」と訳される。 Webサイトの訪問者を具体的な行動に誘導すること。
フェリカテクニカルアカデミーwebサイト制作科の生徒募集用のランディングページの作成
ゴール
フェリカ公式サイトの見学会申し込みページへのリンクボタンをクリックしてもらう
URL:http://www.felica.info/kikin/web/web_form/index.shtml
- AIDAの法則に沿ったストーリー性のあるコンテンツ内容(A部分)
- AIDAの法則に沿ったストーリー性のあるコンテンツ内容(I部分)
- AIDAの法則に沿ったストーリー性のあるコンテンツ内容(D部分)
- AIDAの法則に沿ったストーリー性のあるコンテンツ内容(A部分)
- CTAの設定(クリックされ易いボタンの作り)
- SNS(ツイッター)ボタンの設置
- 公式サイトのトンマナに合わせたデザイン
- キービジュアル画像をsrcsetを使って最適化させる
- ホバーアニメーションの導入(Hover.cssを使用)
- jQueryを一ヶ所以上で使用(プラグイン可)
- 画像はこちらから支給。それ以外は各自で用意する
- テキストは公式サイトから取ってくるか、自身で作成
LPのアウトラインの一例
Attention部分のコンテンツ
Interest部分の下
- フェリカ公式サイトの見学会募集ページへのボタンを入れる(ボタンのデザインは他のボタンを同じに)
Desire部分
- 他の競合他社との差別化を図る為、具体的なベネフィットを伝える。
- 卒業生の声と作品を入れ、ユーザーに自身の未来像を想像させる。
Action部分
- フェリカ公式サイトの見学会募集ページへのボタンを入れる(ボタンのデザインは他のボタンを同じに)
- 実際にボタンをクリックしてもらえるように、ボタンの近くに申し込みの期限などの背中を押すテキストを入れる
ツイッターのURL
https://twitter.com/felica_harotore
生徒の作品
フェリカテクニカルアカデミーwebサイト制作科の生徒募集