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

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

Webサイトの構成表の作成

Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。
「サイト全体で何ページになるか?」「どのページにどんな内容のコンテツを入れるか?」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか?」
などは、必ずデザイン部分に入る前に決めてしまいましょう。もちろん作る過程で多少変更はありますが、基本的には入れるべきコンテンツの種類・内容・順番が決まった段階で、ワイヤー・カンプに入ります。
この構成表はサイトマップとは違い、自分自身のサイト制作作業をスムーズに進める為に用意する物です。

サイトマップとは?

サイトマップとは、サイト全体のページ構成や、「どの様なコンテンツが入るか?」などを示すためのもので、サイト制作を進める上で無くてはならない物です。
サイトマップは大きく分けると、ユーザー用と検索エンジン用の2種類があります。


構成表作成の手順

掲載させるコンテンツのグループ分け
いきなり、構成表を作るのでは無く、まずはそのWebサイトに必要なページを全て書き出してみましょう。この時は階層、カテゴリーなど関係なくとにかく思いつくままに。それが終わったらその中でグループ分けをします。


コンテンツの重要度をランク付け
コンテンツのグルーピングが終わったら、次はどの様な順番でページに載せていくかです。気をつけなければいけないのは、作る側やクライアントが「これは重要だ!」と思っているページでも、ユーザーにとって価値のあるコンテンツ・情報か、どうかをしっかりと見極めて、順番を決めましょう。また、コンテンツの順番はSEOとも関わってくるので、上位検索を考えている人はここで、必ず、「検索キーワード」を選定し、キーワードの内容も加味したランク付けを行いましょう。


ユーザーの利便性を考える
Webサイトの階層が深ければ深いほど、ユーザーは多くのリンクをクリックしなければなりません。要点をしぼってなるべく浅い階層(2〜3階層)を目指しましょう。また、ユーザーがどういう順番で情報を取得すると、ユーザーにとって便利なサイトになるか、などユーザー目線での導線作りを心がけましょう。





課題

自身で1つサイトを探して、自分なりに「サイトの構成表」を作ってみましょう。そしてクライアントワークのサイトの構成表も必ず作成しましょう。


f:id:yachin29:20171007194726p:plain

the-ringo.jp

上記のサイトの場合の例

コンテンツ構成表

ページ構成:5ページ

  1. Home:トップページ
  2. About
  3. Menu
  4. Party
  5. Contact
  6. Reservations(外部サイトへのリンク)
Homeページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. aboutの概要(aboutページへのリンクボタン)
  5. menuの概要(menuページのイメージ画像、Menuページへのリンクボタン)
  6. お店情報(お店情報のイメージ画像、Contactへのリンクボタン)
  7. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  8. 次ページ(aboutページ)へのリンク
  9. フッター(コピーライト、SNSリンク)
aboutページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンクボタン
  5. お店のコンセプト(店内などのイメージ画像)
  6. シェフの紹介(シェフの画像)
  7. SNSへのリンク
  8. 予約への誘導
  9. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  10. 次ページ(Menuページ)へのリンク
  11. フッター(コピーライト、SNSリンク)
Menuページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンクボタン
  5. シェフのご挨拶
  6. 料理5品の紹介・料理の画像付き
  7. シェフが料理しているイメージ画像
  8. 予約への誘導
  9. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  10. 次ページ(Partyページ)へのリンク
  11. フッター(コピーライト、SNSリンク)
Partyページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンク
  5. 貸切パーティーについて
  6. プランの内容例を4例(人数、予算、要望に応じて変更可、という事を明記)
  7. 貸切パーティーの場合の細かい情報
  8. パーティーのイメージ画像
  9. 予約への誘導
  10. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  11. 次ページ(Contactページ)へのリンク
  12. フッター(コピーライト、SNSリンク)
Contactページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンク
  5. アクセス(住所、最寄駅からの情報、マップ)
  6. 営業時間
  7. 予約への誘導
  8. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  9. 次ページ(Homeページ)へのリンク
  10. フッター(コピーライト、SNSリンク)

CSS3によるアニメーション・animation

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。

CSS3におけるトランジション(transition)とアニメーション(animation)の違い


「transition」

  • 動かすために:hoverなどのきっかけが必要
  • トランジションでは実行後に元のプロパティ値に戻る
  • 比較的簡単な記述で動かす事が可能


「animation」

  • transitionより細かい設定が可能
  • 記述が複雑
  • 「@keyframes」の記述が必要

http://caniuse.com/などのサイトでブラウザサポート状況を確認する。

animation関連プロパティ

animation-name 必須

@keyframes で定義した名前を指定します。これを指定していないとアニメーションは実行されません。

animation-duration 必須

一回分のアニメーションを実行する時間の長さを指定します。

animation-timing-function

アニメーションのタイミングや進め方を指定します。
ease(初期値)
ease-in
ease-out
ease-in-out
linear

weboook.blog22.fc2.com


animation-delay

要素が読み込まれてからアニメーションがいつ始まるかを指定します。初期値の 0 だとただちに実行されます。

animation-iteration-count (初期値は1)

アニメーションを繰り返す回数を数字で指定します。無限ループにするには infinite を指定。

animation-direction

アニメーションを繰り返す方向を指定します。

normal … 通常の方向で再生(初期値)
alternate … 奇数回で通常・偶数回で反対方向に再生(行って帰って行って帰って…という具合)
reverse … 逆方向に再生
alternate-reverse … alternate の逆方向に再生

animation-fill-mode

アニメーションの再生前後の状態を指定します。
none(初期値)
forwards … 再生後、最後のキーフレームの状態を保持
backwards … 再生前、最初のキーフレームの状態を適用
both … forwards と backwards の両方を適用



背景色が移り変わるアニメーション

body {
  background-color: #0CC;
  animation: bg-color 10s linear infinite;
  -webkit-animation: bg-color 10s linear infinite;
}
@-webkit-keyframes bg-color {
  0% { background-color: #0CC; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #0CC; }
}
@keyframes bg-color {
  0% { background-color: #0CC; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}

参考サイト

CSS3でアニメーション!transitionとanimationまとめ(サンプル付き) フラップイズム



CSS3アニメーションに挑戦!色が移り変わる背景を実装しよう | Webクリエイターボックス


www.nxworld.net




背景にグラデーションを掛けたアニメーション

f:id:yachin29:20151002002549j:plain


便利なジェネレーション

www.gradient-animator.com




SVGによるアニメーション

postd.cc

jakearchibald.com

クライアントへのヒアリング

いよいよサイト制作が始まります。
サイト制作のワークフローでまず最初にするべき事はクライアントへのヒアリングです。
ヒアリングで1番大事なのはしっかりと意思の疎通が出来ているか、につきます。こちらの状況や目的をしっかりとクライアントに伝え、それを踏まえてクライアントの要望もしっかりと聞く。
また、今の段階で出来る事、出来ない事もしっかりと伝える事も重要です。ヒアリングがスムーズに進めばその後の制作もスムーズに進むし、ヒアリングの段階で曖昧なまま制作を進めてしまうと、色々と躓くことが多くなってしまうので、ヒアリングに望む際にはしっかりと準備をしておきましょう。


ヒアリングの際に明確にしておきたいポイント

  • 新規のサイトか既にあるサイトのリニューアルか
  • Webサーバーの環境(自前・レンタル・有料・無料)
  • ドメイン名(有料・無料)
  • サイトの目的
  • コンテンツの中身
  • コンテンツ素材の有無
  • SNSとの連動
  • アップロード後の保守・管理
  • 参考になるサイトの有無
  • 公開希望予定日

などを出来る限り、細かくヒアリングしましょう。
必要であれば事前にヒアリング・シートなどを用意していきましょう。
ただ、ヒアリングシートに書いてある内容をうめただけでサイトを作る事は難しいので、しっかりとクライアントと話をしてなるべく多くの情報を聞くように心がけましょう。

ferret-plus.com


今回のクライアントワークはあくまでの授業の一環なので、現時点で出来る事と出来ない事をしっかりと把握し、クライアントに伝えましょう。

現時点で出来る事


現時点で出来ない事

  • データベースと連動したオリジナルデザインのお問い合わせフォーム
  • ECサイトの構築
  • クレジットカードによる決済機能の導入
  • Wordpressを使ったサイト制作


liginc.co.jp



http://itjobgate.jisa.or.jp/wisdom/itjobgate.jisa.or.jp



kakomon-quiz.com



blog.sixapart.jp



webyougo.wiki.fc2.com

クライアントワークの目標

いよいよクライアントワークが始まります。まずはクライアントワークを行う目標を明確にしましょう。

http://katoshun.com/blog/からの抜粋です。

未経験者のポートフォリオに載っている作品は、以下のようなものがほとんどです。

スクールの課題で作った架空の会社のサイト
スクールの課題で作った趣味のサイト
スクールの課題で作ったPhotoshopIllustratorの練習のためのイラスト
自分のブログ



一方、私が内定を出した未経験者(20代後半の方)のポートフォリオは以下のようなものでした。

スクールの課題で作った架空の会社のサイト
スクールの課題で作った趣味のサイト
スクールの課題で作ったPhotoshopIllustratorの練習のためのイラスト
自分のブログ
飛び込みをして作らせてもらった雑貨屋のサイト
知り合いのフリーランスデザイナーから請け負ったランディングページ(商品を案内するための1ページもののサイト)

ポートフォリオに自身の成果物を掲載する上で、架空サイトや授業で作った演習サイトだけではアピール不足です。特に未経験者であればなおさら、それだけで結果を出すのは至難の業と言えます。
なのでうちの学校では3ヶ月目に実際にクライアントを生徒自身で探してもらい、クライアントワークを含めた活きたサイト制作を行って貰っています。
さらに、自身のポートフォリオには制作したクライアントサイトのキャプチャーやアドレスを貼るだけでなく、クライアントワークの詳細や、どういう工程を経てサイトの完成に至ったかなどの内容もしっかりと入れてアピールしましょう。

サイト制作のワークフロー

f:id:yachin29:20161020200618p:plain

レスポンシブデザイン実践1

今までの内容を踏まえて実際にレスポンシブサイトを制作していきましょう。
まずはシンプルな2カラムレイアウトをレスポンシブ化してみましょう。


今回のブレイクポイントは



http://ascii.jp/elem/000/000/700/700611/ascii.jp


画像のダウンロード
http://ascii.jp/elem/000/000/699/699812/index-3.html


f:id:yachin29:20170330160832p:plain
f:id:yachin29:20170330160839j:plain
f:id:yachin29:20170330160844j:plain
f:id:yachin29:20170330160851j:plain


作例

PCレイアウト
f:id:yachin29:20160401010640j:plain


タブレットレイアウト
f:id:yachin29:20160401010715j:plain


スマホレイアウト
f:id:yachin29:20160401010740j:plain

テキスト

枝豆隊ロゴ
豆はカラダにイイ

ホーム
枝豆一覧
枝豆隊
アクセス

枝豆の栄養素はスゴい

枝豆は大豆が未成熟で収穫したものですが、たくさんの栄養がつまっています。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。
代表的な豆料理
枝豆
イラスト 枝豆

枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。
ずんだ
イラスト ずんだ

ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。
枝豆隊隊長
肖像 枝豆隊長

枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。

2004-2019©枝豆隊



index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>枝豆隊長</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<header>
<h1>枝豆隊ロゴ</h1>
<p>豆はカラダにイイ</p>
<nav class="g-nav">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">枝豆一覧</a></li>
<li><a href="#">枝豆隊</a></li>
<li><a href="#">アクセス</a></li>
</ul>
</nav>
</header>

<div class="wrapper">
<div class="main">
<h2>枝豆の栄養素はスゴい</h2>
<p class="main-txt">枝豆は大豆が未成熟で収穫したものですが、たくさんの栄養がつまっています。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。</p>

<h2>代表的な豆料理</h2>
<div class="food">
<h3>枝豆</h3>
<p class="photo"><img src="img/01.jpg" alt="枝豆"></p>
<p>枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p>
</div>

<div class="food">
<h3>ずんだ</h3>
<p class="photo"><img src="img/02.jpg" alt="ずんだ"></p>
<p>ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p>
</div>
</div><!--/.main-->
<div class="sub">
<h2>枝豆隊隊長</h2>
<p class="photo"><img src="img/03.jpg" alt="枝豆隊長"></p>
<p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
</div><!--/.sub-->
</div><!--/.wrapper-->
<footer>
<p><small>2004-2019 &copy; 枝豆隊</small></p>
</footer>
</body>
</html>


スタイルシート

@charset "utf-8";
/* CSS Document */

html,body,h1,h2,h3,p,ul,li,small {
margin:0;
padding:0;
}
ul {
list-style:none;
}
a {
text-decoration:none;
}
img {
vertical-align:bottom;
max-width:100%;/*フルードイメージ*/
}

/*PCレイアウト*/
header {
padding-top:20px;
}
h1 {
width:80px;
height:80px;
background:url(../img/logo.svg) no-repeat;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
margin:0 auto 20px;
}
header>p {
text-align:center;
font-size:32px;
font-weight:bold;
margin-bottom:20px;
}
.g-nav {
width:100%;
background:#093;
}
.g-nav ul {
max-width:960px;
margin:0 auto;
overflow:hidden;
}
.g-nav li {
width:25%;
height:50px;
float:left;
}
.g-nav li>a {
display:block;
text-align:center;
line-height:50px;
color:#FFFFFF;
background:#093;
border-right:1px solid #FFF;
}
.g-nav li:first-child>a {
border-left:1px solid #FFF;
}
.g-nav li>a:hover {
background:#3C6;
}
.wrapper {
max-width:960px;
margin:30px auto;
overflow:hidden;
}
.main {
width:630px;
float:left;
}
.main h2 {
margin-bottom:10px;
}
.main-txt {
margin-bottom:30px;
}
.food {
margin-bottom:40px;
}
.food h3{
margin-bottom:10px;
font-size:22px;
border-left:16px solid #FC6;
padding-left:10px;
}
.photo {
margin-bottom:10px;
}
.sub {
width:300px;
float:right;
}
footer {
width:100%;
height:100px;
background:#FC6;
}
footer p {
line-height:100px;
text-align:center;
}

@media (max-width:959px){
.g-nav li:first-child>a {
border-left:0;
}
.g-nav li:last-child>a {
border-right:0;
}
.wrapper {
overflow:visible;
}
.main,.sub {
width:100%;
float:none;
padding:0 10px;
box-sizing:border-box;
}
}
@media (max-width:640px){
.g-nav li {
width:50%;
}
.g-nav li:nth-child(2)>a {
border-right:0;
}
.g-nav li:nth-child(-n+2)>a {
border-bottom:1px solid #FFF;
line-height:49px;
}
}