webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

2カラムレイアウトの演習

演習1

f:id:yachin29:20160318175839p:plain


使用するテキスト

卵料理カフェ Cockeyolly

Home
ニュース
メニュー
今月のおすすめ
オリジナル雑貨
マップ
メール

今月のおすすめ

きのこのオムライス

ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。:800円


シーフードスパゲッティバルサミコ風味

エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。:900円

©2017  卵料理カフェ Cockeyolly


使用画像
http://yachin29.webcrow.jp/cockeyolly-img.zip



演習2

f:id:yachin29:20160319031856j:plain


使用するテキスト

薬玉文様(くすだまもんよう)

薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願する風習が、平安時代に日本へ伝わり貴族の間で行われるようになった。江戸初期以後は、薬玉が民間の女児の玩具として流行。小袖や帯に用いられるほか、吉祥柄のため七五三用などの祝着の文様としても好まれる。

© 2017 Historical Japan


使用画像
http://yachin29.webcrow.jp/japanese-img.zip

ボタン画像の変遷

グラデーションツールを使う前に、なぜわざわざグラデーションツールを使って色を塗るのかを理解しましょう。

グラデーション=光と影

ディスプレイという平面の世界に、立体感や質感を出すために光の当たっている部分とそうでない部分(影の部分)をグラデーションの濃淡を使って表現します。これはイラストや絵画を描く場合に、背景の奥行きを出す為に暗い色を乗せて、その部分が奥に向かっていることを表現したりするのと同じです。

しかし、強いグラデーションを付けると却って不自然に見えてしまうので、気をつけて使いましょう。

たまに作例である、違和感のあるボタン
f:id:yachin29:20160202025215p:plain

f:id:yachin29:20160202025210p:plain
上の例は光が当たっている箇所は光が100%=白、当たっていない箇所は0%=黒という極端なグラデーションを使っている例です。このような光の当たり方は実際にはあり得ないので、不自然なボタンに見えてしまいます。
グラデーションツールは使い方が比較的難しいツールなので、しっかりと使い方を覚えましょう。


ただ、現在ではタッチパネルが浸透し、ボタンにあえて立体感を出さなくてもユーザーはボタンを認識してくれる為、フラットデザインやゴーストボタンなどといった、あえて立体感の無いボタンデザインが主流です。

フラットデザインのボタン
f:id:yachin29:20140108104417j:plain

ゴーストボタン
f:id:yachin29:20160202031316p:plain


http://yachin29.webcrow.jp/ps_style.zip

広告を非表示にする

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

未経験者にとってポートフォリオをどうやって作れば良いか?
非常に悩むところです。

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

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

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



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

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

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

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

f:id:yachin29:20161020200618p:plain

CSSスプライト

CSSスプライトとは複数の画像を1つの画像にまとめる事でサイトの読み込み速度を速くする手法です。FacebookGoogleでも使われている手法です。background-positionを使用して背景画像を動かします。

f:id:yachin29:20160322014753p:plain

メリット
画像の読み込みが1回で済むので、サイトの読み込み速度が速くなる

デメリット
サイズやデザインの更新が面倒
background-positionの理解が必要

先日作成したカフェサイトのナビゲーションボタンにCSSスプライトを使ってみましょう

f:id:yachin29:20170803205854j:plain


index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>cafe de FELICA</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<h1></h1>
</header>
<nav>
<ul>
<li id="home"><a href="#">Home</a></li>
<li id="food"><a href="#">Food</a></li>
<li id="access"><a href="#">Access</a></li>
<li id="info"><a href="#">Info</a></li>
</ul>
</nav>
<div id="content">
<h2>子牛のステーキ アスパラガス添え</h2>
<p id="txt"><img src="img/content01.jpg" alt="">しっとりと柔らかで脂肪分の少ない仔牛のサーロイン(背肉)の芯をスジを取り除き100gのステーキにカットしました。とても柔らかく上品な風味があり、仔牛の美味しさを堪能いただける品!フランス最古の牛と言われるシャロレー牛は世界でも最高級といわれ、とっても貴重とされています。お肉の美味しさそのままに氷点熟成し、急速に液体凍結していますので解凍してそのままお使いいただけます。</p>

</div>
</div><!--/#container-->
<footer></footer>
</body>
</html>

style.css

@charset "utf-8";
html,body,header,nav,footer,div,h1,h2,p,ul,li,a {
	margin:0;
	padding:0;
	line-height:1.0;
}
ul {
	list-style:none;
}
a {
	text-decoration:none;
}
img {
	vertical-align:bottom;
}
body {
	background:#999;
}
#container {
	width:820px;
	margin:0 auto;
	background:#FFF;
	padding-top:10px;
}
header {
	width:800px;
	height:300px;
	background:url(img/header02.jpg) no-repeat;
	margin:0 auto 10px;
}
nav {
	width:800px;
	height:50px;
	background:#6699CC;
	margin:0 auto 10px;
}
ul {
	overflow:hidden;
}
li {
	width:200px;
	height:50px;
	float:left;
}
li a {
	display:block;
	width:100%;
	height:50px;
	background:url(img/nav.jpg) no-repeat left top;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
li#food a {
	background:url(img/nav.jpg) no-repeat -200px 0;
}
li#access a {
	background:url(img/nav.jpg) no-repeat -400px 0;
}
li#info a {
	background:url(img/nav.jpg) no-repeat -600px 0;
}
li a:hover {
	background:url(img/nav.jpg) no-repeat left -60px;
}
li#food a:hover {
	background:url(img/nav.jpg) no-repeat -200px -60px;
}
li#access a:hover {
	background:url(img/nav.jpg) no-repeat -400px -60px;
}
li#info a:hover {
	background:url(img/nav.jpg) no-repeat -600px -60px;
}
#content {
	width:800px;
	margin:0 auto ;
	overflow:hidden;
	padding-bottom:20px;
}
h2 {
	text-align:center;
	padding:40px 0 20px;
}
p#txt {
	width:600px;
	line-height:1.8;
	margin:0 auto;
}
p#txt img {
	float: left;
	margin-right:10px;
}
p#photo {
	width:400px;
	float:right;
	margin-right:20px;
}
footer {
	width:100%;
	height:200px;
	background:#505050;
}
広告を非表示にする