copyright © Taniweb
   Contact us
   Blog

Blog

Wp-PageNavi デザイン変更 CSS 一覧

公開日： 最終更新日：

前回の記事で紹介した、Wp-PageNavi デザイン変更用CSSです。全17種類あります。カスタマイズも自由です。気に入ったデザインを元に、さらに自分好みに調整してご活用ください。
ここで紹介しているデザインのCSSの解説はこちら

全17タイプ　CSS一覧

Type01　

サンプルHTMLはこちら

01

/*wp-pagenavi 01*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #795A3C;
	background-color: #FFF1DA;
	border: 1px solid #DBC9AA;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #A09D71;
	border-color: #999;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background-color: #FC872E;
	border-color: #FC872E;
	font-weight: bold;
    }

Type02

サンプルHTMLはこちら
02

/*wp-pagenavi 02*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background-color: #3CB4E5;
	border: 1px solid #3CB4E5;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #FFC500;
	border-color: #FFC500;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background-color: #36C21C;
	border-color: #36C21C;
	font-weight: bold;
    }

Type03

サンプルHTMLはこちら
03

/*wp-pagenavi 03*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background-color: #FF74C7;
	border: 1px solid #FF74C7;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #00FFDD;
	border-color: #00FFDD;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background-color: #62B1EF;
	border-color: #62B1EF;
	font-weight: bold;
    }

Type04

サンプルHTMLはこちら

04

/*wp-pagenavi 04*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #66852F;
	background-color: #E5DE56;
	border: 1px dashed #E9C436;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #FFB500;
	border: 1px dashed #E9C436;
    }
.wp-pagenavi span.current{
	color: #fff;
	background-color: #A0C364;
	border: 1px dashed #E9C436;
	font-weight: bold;
    }

Type05　

サンプルHTMLはこちら

05

/*wp-pagenavi 05*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background-color: #1C181A;
	border: 1px solid #1C181A;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #FF0037;
	border-color: #FF0037;
    }
.wp-pagenavi span.current{
	color: #777;
	background-color: #CFD5DA;
	border-color: #CFD5D;
	font-weight: bold;
    }

Type06

サンプルHTMLはこちら

06

/*wp-pagenavi 06*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #777;
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
	background-color:#ededed;
	border:1px solid #dcdcdc;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration:none;
}
.wp-pagenavi a:hover{
    color:#e4685d; 
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background-color:#dfdfdf;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background:-moz-linear-gradient( center top, #fc8d83 5%, #e4685d 100% );
	background:-ms-linear-gradient( top, #fc8d83 5%, #e4685d 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fc8d83', endColorstr='#e4685d');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fc8d83), color-stop(100%, #e4685d) );
	background-color:#fc8d83;
	border-color: #e4685d;
	font-weight: bold;
    }

Type07

サンプルHTMLはこちら
07

/*wp-pagenavi 07*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
	background:-ms-linear-gradient( top, #3d94f6 5%, #1e62d0 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #3d94f6), color-stop(100%, #1e62d0) );
	background-color:#3d94f6;
	border:1px solid #3d94f6;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration:none;
}
.wp-pagenavi a:hover{
    color:#3d94f6; 
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background-color:#dfdfdf;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background:-moz-linear-gradient( center top, #1e62d0 5%, #3d94f6 100% );
	background:-ms-linear-gradient( top, #1e62d0 5%, #3d94f6 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #1e62d0), color-stop(100%, #3d94f6) );
	background-color:#1e62d0;
	border-color: #3d94f6;
	font-weight: bold;
    }

Type08

サンプルHTMLはこちら
08

/*wp-pagenavi 08*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
    	background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
	background:-ms-linear-gradient( top, #89c403 5%, #77a809 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #89c403), color-stop(100%, #77a809) );
	background-color:#89c403;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #74b807;
	padding:9px 18px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	text-shadow:1px 1px 0px #528009;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #a4e271;
 	-moz-box-shadow:inset 1px 1px 0px 0px #a4e271;
 	box-shadow:inset 1px 1px 0px 0px #a4e271;
	text-align: center;
	text-decoration:none;
}
.wp-pagenavi a:hover{
	color: #fff;
	background: -moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
	background: -ms-linear-gradient( top, #ffab23 5%, #ffec64 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffab23), color-stop(100%, #ffec64) );
	background-color: #ffab23;
	border-color: #ffab23;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background: -moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
	background: -ms-linear-gradient( top, #ffab23 5%, #ffec64 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffab23), color-stop(100%, #ffec64) );
	background-color: #ffab23;
	border-color: #ffab23;
	font-weight: bold;
    }

Type09　

サンプルHTMLはこちら
09

/*wp-pagenavi 09*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background:-moz-linear-gradient( center top, #fa665a 5%, #d34639 100% );
	background:-ms-linear-gradient( top, #fa665a 5%, #d34639 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa665a', endColorstr='#d34639');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fa665a), color-stop(100%, #d34639) );
	background-color:#fa665a;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #d83526;
	padding:9px 18px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	text-shadow:1px 1px 0px #98231a;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #fab3ad;
 	-moz-box-shadow:inset 1px 1px 0px 0px #fab3ad;
 	box-shadow:inset 1px 1px 0px 0px #fab3ad;
	text-align: center;
	text-decoration:none;
}
.wp-pagenavi a:hover{
	color: #fff;
	background:-moz-linear-gradient( center top, #d34639 5%, #fa665a 100% );
	background:-ms-linear-gradient( top, #d34639 5%, #fa665a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d34639', endColorstr='#fa665a');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #d34639), color-stop(100%, #fa665a) );
	background-color:#d34639;
	border-color: #d34639;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background:-moz-linear-gradient( center top, #F2B3AD 5%, #e4685d 100% );
	background:-ms-linear-gradient( top, #F2B3AD 5%, #e4685d 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2B3AD', endColorstr='#e4685d');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fc8d83), color-stop(100%, #e4685d) );
	background-color:#F2B3AD;
	border-color:#F2B3AD;
	font-weight: bold;
    }

Type10

サンプルHTMLはこちら
10

/*wp-pagenavi 10*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background: 
	linear-gradient(63deg, #999 23%, transparent 23%) 7px 0, 
	linear-gradient(63deg, transparent 74%, #999 78%), 
	linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%), 
	#444;
	background-size: 16px 48px;
	border: 1px solid #DBC9AA;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #FFD100;
	border-color: #999;
    }
.wp-pagenavi span.current{
	color: #red;
	background: 
	linear-gradient(63deg, #F339C5 23%, transparent 23%) 7px 0, 
	linear-gradient(63deg, transparent 74%, #F339C5 78%), 
	linear-gradient(63deg, transparent 34%, #F339C5 38%, #F339C5 58%, transparent 62%), 
	#444;
	background-size: 16px 48px;
	border-color: #red;
	font-weight: bold;
    }

Type11　

サンプルHTMLはこちら
11

/*wp-pagenavi 11*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background: #36c;
	background-color:#269;
	background-image: linear-gradient(white 1px, transparent 1px),
	linear-gradient(90deg, white 1px, transparent 1px),
	linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
	linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
	background-size:100px 100px, 100px 100px, 10px 10px, 10px 10px;
	background-position:-1px -1px, -1px -1px, -1px -1px, -1px -1px
	border: 1px solid #fff;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 8px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #269;
	background-color: #FFD100;
	border-color: #999;
    }
.wp-pagenavi span.current{
	color: #269;
	background-color: #FFD100;
	border-color: #999;
    }

Type12

サンプルHTMLはこちら
12

/*wp-pagenavi 12*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background: #36c;
	background-color: #A51847;
	background-size: 88px 88px;
	background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px,
	0px 36px, 4px 2px, 29px 6px, 33px 30px;
	background-image: 
	linear-gradient(335deg, #C90032 23px, transparent 23px),
	linear-gradient(155deg, #C90032 23px, transparent 23px),
	linear-gradient(335deg, #C90032 23px, transparent 23px),
	linear-gradient(155deg, #C90032 23px, transparent 23px),
	linear-gradient(335deg, #C90032 10px, transparent 10px),
	linear-gradient(155deg, #C90032 10px, transparent 10px),
	linear-gradient(335deg, #C90032 10px, transparent 10px),
	linear-gradient(155deg, #C90032 10px, transparent 10px);
	border: 1px solid #C90032;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 8px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #E17599;
	border-color: #999;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background-color: #E17599;
	border-color: #999;
    }

Type13　

サンプルHTMLはこちら
13

/*wp-pagenavi 13*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #FFF600;
	background: #36c;
	background-color: #001;
	background-image: radial-gradient(gray 15%, transparent 16%),
	radial-gradient(white 15%, transparent 16%);
	background-size: 10px 10px;
	background-position: 0 0, 30px 30px;
	border: 1px solid #001;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 8px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #000;
	background-color: #E17599;
	border-color: #999;
    }
.wp-pagenavi span.current{
	color: #000;
	background-color: #E17599;
	border-color: #999;
    }

Type14　

サンプルHTMLはこちら
14

/*wp-pagenavi 14*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #FFF600;
	background: #36c;
	border: 1px solid #fff;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #fff;
	background-color: #FF0000;
	border-color: #FF0000;
    }
.wp-pagenavi span.current{
	color: #fff;
	background-color: #FF0000;
	border-color: #FF0000;
    }

Type15　

サンプルHTMLはこちら
15

/*wp-pagenavi 15*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #A044AD;
	background-color: #E2BFEE;
	border-right-style: solid;
	border-bottom: 3px solid #A044AD;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
	border-right-color: #A044AD;
}
.wp-pagenavi a:hover{
	color: #fff;
	background-color: #A15AD3;
	border-color: #A15AD3;
    }
.wp-pagenavi span.current{
	color: #fff;
	background-color: #A15AD3;
	border-bottom-color: #A044AD;
	border-right-color: #A044AD;
    }

Type16　

サンプルHTMLはこちら
16

/*wp-pagenavi 16*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #A4EB8C;
	background-color: #26B8AA;
	border-right-style: solid;
	border-bottom: 3px solid #98D184;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #fff;
	background-color: #268EB8;
	border-color: #268EB8;
    }
.wp-pagenavi span.current{
	color: #fff;
	background-color: #268EB8;
	border-color: #268EB8 #287C9E #287C9E #268EB8;
    }

Type17

サンプルHTMLはこちら
17

/*wp-pagenavi 17*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #4DD0D5;
	background-color: #FFFFFF;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
	border: thin dotted #4DD0D5;
}
.wp-pagenavi a:hover{
	color: #fff;
	background-color: #4DD0D5;
    }
.wp-pagenavi span.current{
	color: #fff;
	background-color: #4DD0D5;
    }

デザインする前に知っておいて欲しい知識の話

デザイン講座、デザイナーじゃない方へ
デザイン講座、デザイナーじゃない方へ。資料作成やSNS投稿に役立つ、デザインの基礎を動画で学べるコースです。色の選び方、文字の配置、レイアウトの原則は流行に左右されません、非デザイナー職の方ならこのコースで十分です！
Let's talk

まずは無料で
相談してみませんか

初回ZOOM相談は無料です。制作の発注は不要です。
あなたの現状をお聞きした上で、最適な進め方をご提案します。

ZOOMお試し体験を予約する お問い合わせフォーム

《Instagram》公式Instagram

《可愛いデザイン事例集》KawaiiDB

企画と制作の流れ

制作は リサーチとデザインと実装。リサーチや企画といった 情報を取り扱う工程。 そして、それを元にデザインする工程。デザインしたものを実装する工程。 中でも企画検討といった部分は上流工程と呼ばれ、独立して扱われることもあります。WEBサイトを作る際の思考法やブランディングのために必要なこと。知っておいて欲しい制作の知識や受発注の心得などをまとめました。

future

  1. 《1》現状の分析
  2. 《2》コンセプトメイク
  3. 《3》ターゲット設定・競合分析
  4. 《4》デザインコンセプト
  5. 《5》コンテンツ構成・デザイン企画
  6. 《6》制作
  7. 《7》SNS・集客
  8. 《8》更新・運用

パーソナルブランディング

自分を知り伝え方を整えることは、AI時代を生きる個人やクリエイターにとって必携の技術。 「自分の見せ方」を学ぶことは、自己理解でもあり、未来の選択肢を広げる行動でもあります。 この研究会では、ノウハウを学ぶだけでなく、仲間と一緒に試行錯誤しながら、自分らしいブランディングを育てていきます。

Branding

  1. 【1】自己理解（Self Awareness）
  2. 【2】目的・ビジョン（Purpose / Vision）
  3. 【3】提供価値（Value Proposition）
  4. 【4】ターゲット・ファン設定（Audience / Persona）
  5. 【5】メッセージ・ストーリー（Message / Storytelling）
  6. 【6】ビジュアル・トーン（Visual Identity）
  7. 【7】発信・コミュニケーション（Expression / Presence）
  8. 【8】信頼・継続性（Reputation / Consistency）