POPなデザインをCodeと共に学ぼう。
WEBデザイナーのともです。
僕は大学卒業してから８年間教育現場で小学生や中学生に理系科目を教えていました。ただ、デザインを作っていくより、僕のようにWEBデザイナーになる人の役に立てたら幸いです。
前置きはここまでとしまして
デザインとコードをセッション毎に公開していきます。
デザイン
今回作成したデザインはPOPな感じを全面に出しました。
余白を広く取り、20代〜30代をターゲットにしています。
ペルソナ設定
デザイナーになると良く聞く言葉「ペルソナシート」というものがあります。ペルソナシートとは、「そのページを利用する顧客を細かく設定し、デザインにズレが出ないように書き記しておくシート」のことです。
今回のデザインのペルソナ設定は以下の通りです。
ターゲット年齢：20代後半〜30代前半まで
ターゲット性別：女性（独身）
ターゲット者の利用目的：健康に気を遣うキャリアウーマン
ターゲット者の年数：300万円〜400万円
行動パターン：土日はショッピング、平日は仕事（日勤）
このようにそのページを見て興味を持つ人物像をより明確にします。
色合い
今回のターゲットは20代〜30代の独身の女性です。
よって、余白を多めに取って、きれいに見せていきます。
若い世代に向けたWEBページを作成するときは、余白を多く取ります。
逆に40代〜高齢層向けのページは、余白を多く取り過ぎない方がいいです。
今回使用した色は、
ベースカラー：白
メインカラー：赤
アクセントカラーはありません。
字体について
英語の部分は「Noto Sans Hebrew」
日本語の部分は「Noto Sans JP」
を使用しています。
この字体を使用した理由は、読みやすくしたいと言うことが第一の理由。
第二の理由としては、余白を多く取ることで物足りないと言う印象を出さず、より清楚なイメージで作りたかったからです。
ボタンについて
ボタンにはアニメーションを採用しました。
赤色を使うと、色合いが強すぎて画像やその他の情報が見にくくなったり、目が疲れてしまいます。
よって、カーソルを合わせた時だけ、ボタンの色を白→赤にしました。
ボタンのアニメーションは以下の通りです！
SP版のデザイン
SP版を作るときは、画像も小さくなるので字の大きさも小さくしています。ただ、ボタンの部分は極力小さくせず、目立つように配置しています。
コード
HTML & CSS
今回作成したコードを記載します。
勉強用に役立てていただければと思っています。
html
<body>
<div class="menu">
<p>FEATURE</p>
</div>
<div class="top_content">
<h2>サービスの特徴</h2>
<p>私たちが栄養バランスを徹底的に管理、<br>サポートします。</p>
</div>
<div class="middle_content">
<div>
<div class="image"><img src="./img/Frame1.jpg" width:="100%" height="100%"></div>
<div class="number">01</div>
<div class="title">栄養バランス</div>
<div class="content">栄養管理士がオーダーメイドで献立を作成します。</div>
</div>
<div>
<div class="image"><img src="./img/Frame2.jpg" width:="100%" height="100%"></div>
<div class="number">02</div>
<div class="title">消費カロリー</div>
<div class="content">アプリをインストールするだけで歩数から消費カロリーを計算します。</div>
</div>
<div>
<div class="image"><img src="./img/Frame3.jpg" width:="100%" height="100%"></div>
<div class="number">03</div>
<div class="title">オンライン</div>
<div class="content">毎週40分間、専属アドバイザーとオンライン指導を行います。</div>
</div>
</div>
<div class="bottom_content">
<div class="button">サービスの詳しい内容</div>
</div>
</body>css
* {
font-family: "Noto Sans JP", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.body {
width: 100%;
}
.menu {
font-family: 'Noto Sans Hebrew', sans-serif;
width: 100%;
text-align: center;
color: #F13054;
margin-top: 80px;
margin-bottom: 16px;
letter-spacing: 0.19em;
}
.top_content {
width: 100%;
text-align: center;
margin-bottom: 44px;
letter-spacing: 0.02em;
}
.top_content h2 {
margin-bottom: 16px;
font-size: 32px;
}
.top_content p {
font-size: 20px;
}
.middle_content {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 56px 24px;
text-align: center;
margin-bottom: 48px;
letter-spacing: 0.02em;
}
.middle_content > div {
flex: 0 0 390px;
}
.middle_content .image {
margin-bottom: 16px;
width: 100%;
}
.middle_content .image img {
width: 100%;
height: auto;
}
.middle_content .number {
font-family: 'Noto Sans Hebrew', sans-serif;
font-size: 40px;
color: #F13054;
}
.middle_content .title {
font-size: 24px;
font-weight: bold;
margin-bottom: 16px;
}
.middle_content .content {
width: calc(100% - 104px);
font-size: 16px;
font-weight: bold;
margin: 0 auto;
}
.bottom_content {
width: 100%;
margin-bottom: 72px;
letter-spacing: 0.02em;
}
.bottom_content .button {
width: 314px;
height: 65px;
margin: 0 auto;
color: #F13054;
border: 1px solid #F13054;
border-radius: 53px;
text-align: center;
font-size: 18px;
line-height: 63px;
}
.bottom_content .button:hover {
transition: all 0.5s;
color: #FFFFFF;
background-color: #F13054;
cursor: pointer;
}
@media (max-width: 500px) {
.menu {
font-size: 14px;
}
.top_content h2 {
font-size: 24px;
}
.top_content p {
font-size: 16px;
}
.middle_content > div {
flex: 0 1 calc(100% - 55px);
}
.middle_content .title {
font-size: 20px;
}
.middle_content .content {
width: calc(100% - 72px);
font-size: 14px;
}
}まとめ
今回は、POPな感じを前面に出したデザインでした。
デザインもそうですが、コーディング担当の方にお願いする場合は、「余白」と「文字と文字の間」の区別を伝わるように話すように心がけた方が良いかもしれません。
コードの使用については、あくまで勉強用になります。
それ以外の使用はやめてくださいね！
次回はコーポレートサイトのTOPを作成していきます。
この記事が気に入ったらサポートをしてみませんか？