読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

Webデザイン、プログラミングの勉強ブログ。

【1日1つデザイン分析】イギリスの学生寮運営会社のサイト

1day1site(1日1つ、おすすめのサイトを紹介していきます。)

イギリスの学生寮運営会社のサイト(1day1site)

3/17

種類
コーポレートサイト
概要
イギリスにある学生寮運営会社のサイト
ターゲット
顧客
>新規顧客 >学生 >複数人数での暮らしを欲している人・地方から出てくる人
ページ構成
全5ページ
(TOP>・home ・location ・about us ・contact)
上部メニュー固定。homeボタンとロゴマークどちらを押してもhomeに遷移。
width/breakPoint
可変/750px
font
'GT Walsheim Regular', sans-serif, normal, 20px, 26px, #191937 Font, Style, Size, Leading, Colour
color

#191937

#ff0055

#32f0f0

感想・いいと思ったpoint

デザインのエレメントが統一されていて、フォントやアニメーションに一体感があります。

TOPページで「aparto」と言う文字を使ってタイポグラフィがアニメーションしていきます。言葉遊び的な面があり、紺色の紺色メインカラーとも相まって教育に関係するサイトに相応しい知的なイメージがあります。

2カラムのグリッドレイアウトになっていて、情報がスッキリと整理されています。

利用者の声をtopのすぐ下で一番優先度が高くなる形で紹介する事で、信頼感や共感を感じてもらえる様にしているのだと思います。

【HTML+CSS+JS】クリックでDOMを操作

DOMを追加する

ボタンを押すと🐼が現れ、ボタンが消えます。

Demo

html+css+javascript

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<style>
.box{
  font-size:50px;
  text-align:center;
  line-height:200px;
  background:#ffdddd;
  height:200px;
  width:200px;
  margin:0 auto;
}
#BTN{
  font-size:12px;
  font-weight:bold;
  border-bottom:1px solid #000;
  cursor:pointer;
  text-align:center;
  width:100px;
  margin:10px auto;
}
</style>
</head>
<body>
<div class="box">
<p id="OUTPUT"></p>
</div>
<div id="BTN" onClick="addNode();">
PUSH!
</div>
<script>
function addNode(){
  var CHILD=document.createElement("p");
  CHILD.setAttribute("id","CLD");
  CHILD.innerHTML="🐼";
  var PARNET=document.getElementById("OUTPUT");
  PARNET.appendChild(CHILD);
  var CLD=document.getElementById("CLD");
  CLD.style.fontSize="50px";
  document.getElementById("BTN").style.display="none"
}
</script>
</body>
</html>

消したり出現させたりする。

PANDAを押すと🐼が現れ、REMOVEを押すと消えます。

html+css+javascript

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<style>
.box{
  font-size:50px;
  text-align:center;
  line-height:200px;
  background:#ffdddd;
  height:200px;
  width:200px;
  margin:0 auto;
}
#BTN{
  font-size:12px;
  font-weight:bold;
  border-bottom:1px solid #000;
  cursor:pointer;
  text-align:center;
  width:100px;
  margin:10px auto;
}
</style>
</head>
<body>
<div class="box">
<span id="PANDA">🐼</span>
</div>
<p id="BTN" onClick="add();">
PANDA
</p>
<p id="BTN" onClick="remove();">
REMOVE
</p>
<script>
function add(){
  document.getElementById("PANDA").style.display="block"
}
function remove(){
  document.getElementById("PANDA").style.display="none"
}
</script>
</body>
</html>

1day1banner (1日1つバナー制作2日目)

30分以内でバナーを作っていきます。

柑橘系炭酸飲料のバナー

f:id:p_and_a_fam:20170316105443j:plain
ターゲット
10代~20代
概要
新発売の炭酸果汁飲料
素材
レモン:フリー 商品:既存のものを合成加工
tool
Photoshop
time
30min

反省

新発売としては本当に印象的なものになっているのか?(10代20代がこれを見てクリックするか?)

この見せ方で商品パッケージを覚えてもらえるのか?商品が埋もれていないか?

目線の流れ的に文字の入れ方は適しているのか?フォントの種類、加工はこれでいいのか?

時間を区切ると完成度の低さが目立ってきます。作業工程を明確にして必要最低限な物は何か等、手より頭を動かす部分が大事だと感じました。

【1日1つデザイン分析】Nike SB Dunkのブランディングページ

1day1site(1日1つ、おすすめのサイトを紹介していきます。)

NIKE SB DUNKのブランディングサイト(1day1site)

3/16

種類
ブランディングサイト
概要
NIKE SB DUNKの15周年記念ブランディングサイト
ターゲット
顧客
>既存顧客(どちらかと言えば) >従来からのブランドのファン、スケーター >若者・男性
ページ構成
全6ページ
(TOP>・Watch ・Archive ・Launch ・Share)
右上メニュー固定。メニュー内にsnsと通常のブランディングサイトへのリンクが含まれる。
width/breakPoint
可変/760px/650px/480px

感想・いいと思ったpoint

TOPページがマウスの動きに合わせたパララックスになっていて、奥行きと「靴」の躍動感を感じます。

スクロールするとページがその場で変わっていくんですが、画面が変形して奥に進んでいく感じで横でも縦でもないパースのある空間を錯覚します。スケボーで進むイメージとマッチしていてカッコイイです。

Archiveでは商品を2002年から一つ一つ見ていく事が出来ます。昔からのファンは思い出を振り返りながら見れるんじゃ無いでしょうか。新規顧客にとっても今までのデザインと歴史を通しで見る事ができブランドを好きになるキッカケになります。

背景はざらついたテクスチャがかかっていて、商品の写真ごとに色がアニメーションで移り変わっていきます。コンセプトと商品のブランディングが一貫して表現されていると感じます。

watchを押すとスケボーの魚眼でとったような映像が全画面で流れます。臨場感があり、解像度が荒くなってもセルフィー的な感じがして逆にうクールです。

【CSS】transformでボタンをアニメーションさせる(Todays code)

transformでボタンのアニメーションを作りました。

ハンバーガーメニューの変形

不要論もあるハンバーガーメニューですが、アニメーションの練習として製作してみました。

上下二本が傾いてXに変形

●Demo

html

<div class="button1">
<span></span>
<span></span>
<span></span>
</div>

css

/*button*/
.button1{
  position:relative;
  height:100px;
  width:100px;
  margin-bottom:30px;
  transition:transform  0.4s;
}
.button1 span{
  display:inline-block;
  position:absolute;
  background:#000;
  width:100%;
  height:4px;
  transition:transform  0.4s,opacity 0.2s;
}
.button1 span:first-of-type{
  top;:0;
}
.button1 span:nth-child(2){
  top:50px;
}
.button1 span:nth-child(3){
  bottom:0;
}
/*button:hover*/
.button1:hover span:first-of-type{
  position:absolute;
  transform:translateY(50px)rotate(45deg);
  top:;0
}
.button1:hover span:nth-of-type(2){
  opacity:0;
}
.button1:hover span:nth-of-type(3){
  position:absolute;
  transform:translateY(-50px)rotate(-45deg);
  bottom:0;
}

回転してXに変形

●Demo

html

<div class="button2">
<span></span>
<span></span>
<span></span>
</div>

css

/*button*/
/*button2*/
.button2{
  position:relative;
  height:100px;
  width:100px;
  margin-bottom:30px;
  transition:transform  0.4s,opacity 0.2s;
}
.button2 span{
  display:inline-block;
  position:absolute;
  background:#000;
  width:100%;
  height:4px;
  transition:transform  0.4s,opacity 0.2s;
}
.button2 span:first-of-type{
  top;:0;
}
.button2 span:nth-child(2){
  top:50px;
}
.button2 span:nth-child(3){
  bottom:0;
}
/*button2:hover*/
.button2:hover{
  transform: rotate(360deg);
}
.button2:hover span:first-of-type{
  position:absolute;
  transform:translateY(50px)rotate(45deg);
  top:;0
}
.button2:hover span:nth-of-type(2){
  opacity:0;
}
.button2:hover span:nth-of-type(3){
  position:absolute;
  transform:translateY(-50px)rotate(-45deg);
  bottom:0;
}

transformとperspectiveで3D的な動きのボタン

●Demo

html

<div class="button2">
<span></span>
<span></span>
<span></span>
</div>

css

/*全体の変化のスピード*/
.button3,.button3::after {
	transition: all .3s;
}
/*最初に見えているボタン*/
.button3 {
  color: #333;
  line-height: 54px;
  border: 2px solid #333;
  box-sizing: border-box;
  height: 54px;
  text-align: center;
  width: 200px;
	position: relative;
  /*デフォルトより前面に出している*/
	z-index: 2;
  /*3Dのパースを指定*/
	perspective: 300px;
  /*3D空間を指定*/
	transform-style: preserve-3d;
}
.button3::after {
  position: absolute;
  display: block;
  content: '';/*空のコンテンツを入れている*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  transform-origin: center top;
  /*X軸を中心に90度の位置
  (つまり垂直になっていて見えない)*/
  transform: rotateX(90deg);
  opacity: 0;
}
.button3:hover {
	color: #fff;
}
.button3:hover::after {
  /*背面へ下げる*/
  z-index: -1;
  /*X軸を中心に0度の位置
  (回転していない=デフォルトの位置)*/
	transform: rotateX(0);
	opacity: 1;
}

1day1banner (1日1つバナー制作1日目)

30分以内でバナーを作っていきます。

脱毛サロンのキャンペーンバナー

f:id:p_and_a_fam:20170315111205j:plain
ターゲット
10代~20代女性
目的
キャンペーンの認知、サイトへの誘導
素材
フリー
tool
Photoshop,illustlator
time
30min

反省

完全にこのバナーの模写になってしまったのが反省点です。

日頃からアイディアをストックして、瞬間的にアウトプット出来る様にしていきたいです。

【1日1つデザイン分析】福岡の耳鼻科のサイト(1day1site)

1day1site(1日1つ、おすすめのサイトを紹介していきます。)

福岡の耳鼻科のサイト(1day1site)

3/15

種類
個人病院サイト
概要
福岡の耳鼻咽頭
ターゲット
顧客
>新規顧客 >子供のいる家族・子供のかかりつけ耳鼻科を探す人
ページ構成
全6ページ
(TOP>・news ・about ・introduction ・greeting ・acces ・reserved)
メニューやフッターのデザインは固定でコンテンツ部分がページごとに変わる。
width/breakPoint
可変(最低幅:1100px)

感想・いいと思ったpoint

パンダのイラストと少し手書き風な柔らかいロゴタイポが印象的な耳鼻科のホームページです。

QRをパンダのイラスト(png)に持たせてアニメーションで出現させているのが面白いです。単純にQRを貼付けるだけより、格段に読み取ってもらいやすいと思います。

メニューを一番最初に大きく見えるように配置する事で情報を知りたい人がすぐにたどり着ける親切な作りになっています。

よく見る病院のHPは簡素なデザインだったり治療や設備についての説明がメインになる印象ですが、このサイトではファスビューを大きく取り、イラストや写真で病院の雰囲気がまず伝わってきます。

各ページのファースビューでもイメージを大きく載せています。病院施設内を魅力的に見せ、病院で出来る体験を感じさせる写真だと感じました。

「お知らせ」では高頻度で更新されていて、メディアの取材も積極的に受けている様です。全体を通して新規顧客に病院の魅力や存在を伝える事をよく考えられていると感じました。