ねっとぱんだ-プログラミング勉強ブログ-

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

【1日1つデザイン分析】旅行者向けの総合ブランドサイト

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

旅行者向けの総合ブランドサイト

3/19

種類
EC・ブランディングサイト
概要
ターゲット
顧客
>新規顧客 >若者 >旅に興味のある若者(20~30)
ページ構成
TOP>・PRODUCT(>各商品ページ) ・ABOUT ・NEWS ・CONTACT)
width/breakPoint
786px(コンテンツ部分)/900px/700px
レイアウト
1column・gridlayout
配色
 

#F6F6F6
背景

 

#313638
文字色

 

#656C6E
footer

 

#939899
下部メニュー

 

#4871A9
button1

 

#70BDD3
button2

 

#2F9BCD
button3

font
Helvetica Neue",Helvetica,Arial,"游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif

感想・いいと思ったpoint

ファストビュー
彩度の高い、世界各地を想像させる写真が魅力的です。高さも1462pxと広めに取られていて開いたときに目が止まります。画像の下部は曲線になっていて、下へのスクロールを促ようになっています。
レイアウト
1カラムで、それぞれの段でグリッドに沿って要素が配置されています。PRODUCT部分のテキストは各見出しだけで、20pxの見やすいサイズになっていて余白も広めに取られています。文字間の空きも含めてページ全体が非常に見やすいと感じます。
配色
CSSでの配色はどちらかというと寒色系の落ち着いたもので、商品写真や旅の写真を引き立てています。
フォント
英数字はHelvetica、日本語は游ゴシックで見せたいようです。Helveticaはロゴとプロポーションが似ています。スタンダードかつ読みやすいフォントが選ばれていると思います。游フォントは個人的に印刷された活字のような印象があるので、白地に近い背景の時は特に合う気がします。
その他
PRODUCTの見出しの商品写真はそれぞれパスポートのような形になっています。コンセプトにも沿っていて、且つラウンドとドロップシャドウがあることで見易さや親しみやすさを感じます。各ページのボタンは細い罫線と線と塗りの色が反転する分かりやすいホバーアニメーションになっています。全体的に見やすくしっかりしたサイトだなという印象を受けました。

【1日1つデザイン分析】女性向けセレクトショップのブランディングサイト

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

女性向けセレクトショップブランディングサイト

3/18

種類
ブランディングサイト
概要
ストライプインターナショナルの新しいブランド
ターゲット
顧客
>新規顧客 >大人の女性
ページ構成
全7ページ
(TOP>・LOOK BOOK ・SHOPLIST ・ONLINESTORE ・NEW ・acces ・BRANDLIST ・INSTAGRAM)
メニューはfixed。
width/breakPoint
1034px/768px
レイアウト
free・white space
配色
 

#fff

 

#000

 

#FAED36
一部分のみ

font
din-2014,a-otf-midashi-go-mb31-pr6n

感想・いいと思ったpoint

ファストビュー
svgのアニメーションで書き出される大きめのブランド名とバックのモノクロの写真で、ファッション紙の見開きのような印象です。
レイアウト
下部のインスタグラムの写真は一件フリーレイアウトに見えるけど、コーディング上はグリッドレイアウトです。バラバラに組まれているように見えるので「GARAGE」にマッチした雰囲気があります。
ホワイトスペースが多く取られていて、大人向けの女性紙でよく見る雰囲気なのでターッゲットには馴染みのある見え方なのではないでしょうか。
配色
モノクロですが逆にファッション性の高さを感じます。海外のファッション系のサイトもモノクロが多い気がします。
写真はホバーでカラフルになりますが派手すぎない色味で、saleの文字も暗めの黄色が使われていて落ち着いた印象です。
フォント
adobe typekitのdinが主に使われています。din系のフォントはちょっと前からよく使われているみたいですが流行でしょうか。縦に長くモダンな雰囲気があります。

【japascript】1ページで内容が切り替わる動き


javascriptでコンテンツが切り替わる動きを作りました。

コンテンツが切り替わる

tabをクリックで内容が切り替わります。

Demo

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<link rel="stylesheet"href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="container">
<ul>
<li id="tab1" onClick="change(1);">tab1</li>
<li id="tab2" onClick="change(2);">tab2</li>
<li id="tab3" onClick="change(3);">tab3</li>
</ul>
<div id="content1">
<div class="img"></div>
<p>
コンテンツ1</p>
</div>
<div id="content2">
<div class="img"></div>
<p>
コンテンツ2</p>
</div>
<div id="content3">
<div class="img"></div>
<p>
コンテンツ3</p>
</div>
</div>
</body>
</html>

CSS

@charset "utf-8";
/*reset*/
ul{
  list-style:none;
}
/*body*/
body{
  font-size:16px;
}
/*container*/
.container{
  margin:5% 10%;
  min-width:315px;
}
/*tab*/
ul{
  overflow:hidden;
}
li{
  color:#fff;
  font-weight:bold;
  text-align:center;
  text-shadow:2px 2px 2px #000;
  float:left;
  cursor:pointer;
  border-radius:15px 15px 0 0;
  line-height:30px;
  height:30px;
  width:100px;
}
li#tab1{
  background:#eeee88;
}
li#tab2{
  background:#ee88ee;
}
li#tab3{
  background:#88eeee;
}
/*content*/
#content2,#content3{
  display:none;
}
#content1,#content2,#content3{
  border-radius:0 15px 15px 15px;
  background:#eeee88;
  height:300px;
  padding:50px;
  box-sizing:border-box;
}
.img{
  float:left;
  background:#fff;
  height:200px;
  width:45%;
  margin-right:20px;
}
#content>p{
  float:left;
  width:45%;
}

javascript

function change(x) {
if(x==1) {	document.getElementById("content1").style.backgroundColor = "#eeee88";
document.getElementById("content1").style.display="block";
document.getElementById("content2").style.display="none";
document.getElementById("content3").style.display="none";}

if(x==2) {	document.getElementById("content2").style.backgroundColor = "#ee88ee";
document.getElementById("content1").style.display="none";
document.getElementById("content2").style.display="block";
document.getElementById("content3").style.display="none";}

if(x==3) {	document.getElementById("content3").style.backgroundColor = "#88eeee";
document.getElementById("content1").style.display="none";
document.getElementById("content2").style.display="none";
document.getElementById("content3").style.display="block";}
}

【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>

【トライアル】バナー制作 2枚目

柑橘系炭酸飲料のバナー

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