2021-06-01

EFO お問い合わせフォーム最適化

HTML+CSS

EFO（Entry Form Optimisation）は「入力フォーム最適化」の略で、入力フォームをユーザーにとって使いやすく入力しやすい形に最適化し、入力して内容を送信できるように改善を行う施策のことを指します。
対面でのサービスが難しくなった今日「お問い合わせフォーム」の価値はこれまで以上に重要になりました。
ユーザーにとって、ストレスのかからないフォームを作る事が求められます。

例

問い合わせ時に必要な項目のみに限定する

企業側は多くの情報を取りたがりますが、目標が達成出来る必要最低限の項目のみでOK

スマホでタップしやすいデザインに

スマートフォンで問い合わせするユーザーも多いです

入力内容に合わせてtype属性を指定する

適切なtype指定をする事で入力時のストレスが緩和されます

自動補完機能を使えるようにする

HTMLのautocomplete属性を指定する事で、ブラウザへ設定した情報を利用したオートコンプリート機能（入力内容の自動補完）が利用できるようになります。

pulpxstyle.com

ics.media

作例
https://codepen.io/yachin29/pen/ZEBNENN

2021-05-18

フルスクリーンナビゲーションの作成

PCレイアウト時にもナビゲーションを隠し、ハンバーガーメニューを付け、全画面で表現をする機会が増えてきました。サイトに合わせた構成をいくつか覚えておきましょう。

https://twitter.com/pulpxstyle/status/1321272801211211776

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>cssでclickイベントを設定する</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>サイトタイトル</h1>
<input type="checkbox" id="click">
<label for="click" id="ham-bar"><span></span></label>
<nav class="g-nav">
<ul>
<li><a href="#">ABOUT<span>私たちについて</span></a></li>
<li><a href="#">SERVICE<span>サービス紹介</span></a></li>
<li><a href="#">COMPANY<span>会社概要</span></a></li>
<li><a href="#">RECRUIT<span>採用情報</span></a></li>
<li><a href="#">NEWS<span>お知らせ</span></a></li>
<li><a href="#">CONTACT<span>お問い合わせ</span></a></li>
</ul>
</nav>
</header>
<main class="main-content">
<h2>メインコンテンツ</h2>
</main>
</body>
</html>

スタイルシート

@charset "utf-8";
html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}

header{
width: 100%;
height: 100px;
background-color: beige;
position: fixed;
top: 0;
left: 0;
}
h1{
text-align: center;
font-size: 40PX;
line-height: 100PX;
}
.main-content{
width: 100%;
height: 300vh;
}
h2{
text-align: center;
padding-top: 300px;
}

/* ハンバーガー部分 */
#ham-bar{
display: block;
width: 100px;
height: 100px;
background-color: #dfdfdf;
position: absolute;
top: 0;
right: 30px;
z-index: 200;
cursor: pointer;
}
#ham-bar>span{
display: block;
width: 60px;
height: 2px;
background-color: #222;
position: absolute;
top: 0;
right: 0;
bottom: 25px;
left: 0;
margin: auto;
transition: 0.2s;
}
#ham-bar>span::after{
display: block;
content: "";
width: 60px;
height: 2px;
background-color: #222;
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transition: 0.2s;
}
#click:checked+#ham-bar>span{
bottom: 0;
transform: rotate(45deg);
}
#click:checked+#ham-bar>span::after{
top: 0;
transform: rotate(-90deg);
}

/* ナビゲーション */
.g-nav{
width: 100%;
height: 100vh;
background-color: #377174;
position: fixed;
top: 0;
left: 0;
z-index: 100;
transform: translateX(0);
transition: 0.2s;
}
#click:checked~.g-nav{
transform: translateX(0);
}
.g-nav>ul{
padding: 10vh 20%;
display: flex;
flex-wrap: wrap;
}
.g-nav li{
width: 50%;
margin-bottom: 30px;
}
.g-nav a{
display: block;
color: #FFF;
font-size: 20px;
}
.g-nav a>span{
display: block;
font-size: 28px;
font-weight: bold;
}
.g-nav a:hover>span{
text-decoration-line: underline;/* 線の種類 */
text-decoration-thickness: 5px;/* 線の太さ */
text-decoration-color: coral;/* 線の色 */
text-underline-offset: 5px;/* 文字と線の間隔 */
}

2021-05-18

トンマナを合わせたバナー作り

バナー作成

トンマナとは、「トーン＆マナー」の略で、広告におけるデザインの一貫性を持たせることを指します。また、ブランドのイメージカラーとホームページのデザインカラーを合わせる必要があるなど、「トンマナ」は企業部ブランディングにおいても重要です。

仕事では既存のコーポレートサイトとは別に定期的にキャンペーンサイトやランディングページ、バナーなどを制作する事がよくあります。その場合、既存のコーポレートサイトとある程度デザインを合わせる事で、その「企業っぽさ」や「らしさ」などを判りやすくユーザーに伝える事が出来ます。

www.concentinc.jp

講演資料「クリエイターのためのトーン＆マナー設計について」（パソナテック主催セミナー） from Concent, Inc.

helpx.adobe.com

blogs.adobe.com

liginc.co.jp

2021-05-10

カーテンが開くアニメーション

jQuery

www.aolani-ohana.com

$(function(){
$(window).on('scroll resize',function(){
var elmHeight=$('.box').outerHeight();//対象要素の高さ

$('.box').each(function(){
var setElm=$(this).children('.box-inner');//addしたい要素
var elmTop=$(this).offset().top;//画面topから対象要素のtopまでの距離
var winHeight=$(window).height();//1画面分の高さ
var scrTop=$(window).scrollTop();//自分がスクロールした量
console.log(setElm);


//自分のスクロール量>対象要素の位置-1画面分+要素の高さ
if(scrTop > elmTop - winHeight + elmHeight){
setElm.addClass('curtain');
}else{
setElm.removeClass('curtain');
}
});
});
});

2021-05-10

jQueryでのeach()メソッド

jQuery

jQueryで複数のオブジェクトに対して繰り返し処理を行う場合は、each() メソッドを使用します。

まとめて処理されるパターン

<ul>
    <li>foo</li>
    <li>bar</li>
</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script>
$(function(){
alert($('li').text());
});
</script>

jQuery.each() の使い方

複数あるli要素に対して1回1回繰り返しを行う場合は、以下のように記述します。

<ul>
    <li>foo</li>
    <li>bar</li>
</ul>



<script>
$(function(){
 $('li').each(function(){
        alert($(this).text());
    }); 
});
</script>

2021-04-26

ワイヤーフレームの作成

Webサイト制作

ワイヤーフレームとは「サイトの設計図」です。
サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共有する場合にも必要になってきます。

f:id:yachin29:20180501132842p:plain

f:id:yachin29:20210125024359j:plain

各要素の高さ

アートボードの大きさ：1366x3500px
header:100px
nav:50px
content:600px
col-photo:260px
col-txt:340px
footer:280px
各要素の余白:10px

デザインルール

ワイヤーの段階で色を入れないのが通常です。この時点で色を入れてしまうと、ワイヤーフレーム本来の目的である「基本的な構造の確認」に余計な情報が入り、却って解り難くなってしまう恐れがあります。

cacoo.com

www.wirify.com

www.webcreatorbox.com

Photoshopでのアートボード

アートボード機能は、Illustratorでは以前からあった機能ですが、PhotoshopではPhotoshop CC2015から実装されました。webデザインなど複数のページのデザインを作成しなくてはいけない時に、ページ間を簡単に移動できるので大変便利です。

f:id:yachin29:20200110115012p:plain