マイクロインタラクションについて

マイクロインタラクションとは

マイクロインタラクションとは、機能に存在する小さな振る舞いや、挙動のデザインをいいます。

具体的な役割としては下記になります。

  • フィードバックや操作の結果をユーザーに伝える
  • 操作が正常に完了したことをユーザーに伝える
  • 直感的に操作できるという感覚を生み出す
  • ユーザーの操作の結果を可視化して、エラーや失敗を防ぐ

実例を二つ挙げます。

一つ目はTwitterのいいねボタンです。
f:id:namotasam14:20181126232551p:plainf:id:namotasam14:20181126232613p:plain

いいねボタンは、最初は灰色ですが、クリックされると上記の様に赤色に変わります。この時、単純に色が変更されるだけでなく、ハートマークが弾けるようなアニメーションによる演出が採用されています。1秒未満のかなり短いアニメーションですが、ユーザーに「いいねをした」というフィードバックと一瞬の快適さを返すことができます。これによって、ユーザーに特別な体験を提供することができます。
二つ目はアプリケーションなどの進捗を視覚的に表現するプログレスバーです。ロード中画面など、ユーザーが待っている間にストレスを軽減するために、アニメーションを用いています。

四つの定義

  1. トリガー(Trigger)
  2. ルール(Rules)
  3. フィードバック(Feedback)
  4. ループとモード(Loops & Modes)

トリガー(Trigger)

マイクロインタラクションを開始させる要素。ユーザーにアクションを促し、気づきを与えることができます。トリガーにはユーザーの動作によって引き起こされる「手動トリガー」と、
システムが一定の条件を満たしたときに引き起こされる「システムトリガー」があります。

ルール(Rules)

トリガーからマイクロインタラクションが開始されると、一連の動作が行われます。
また、単発か、繰り返し発生させるか、その状況において最適なインタラクションを検討すべきです。最終的にはインタラクションを通して、ユーザーが自然にゴールへと導かれることが好まれます。

フィードバック(Feedback)

ユーザーに何が起きているのかを知らせる反応のことをいいます。
さりげないフィードバックが好ましいとされています。

ループとモード(Loops & Modes)

ループは「定期的に通知を表示」などの経過に応じた変化や繰り返す回数を定義します。モードは「通知をすべて既読にする」などのループから外れた重要なルールを定義します。長期的なインタラクションのため、ユーザーの邪魔にならないように、さりげないものでないといけません。

最後に

WEB業界に身を置いているものとしては恥ずかしいことですが、マイクロインタラクションという言葉をこれまで知りませんでした。けれども、小さな挙動やアニメーションなどが最近増えてきていることは認識していました。そして、それに対しての快適さや心地よさを実感していました。利用しているユーザーの感情も配慮されたコミュニケーションは、ユーザーとの距離を縮めてくれる重要な要素になっていると思います。今後WEB制作を行ううえでしっかりと意識していきたいです。

JQueryでタブ切り替えを実装

はじめに

今回はタブをクリックして、各コンテンツの表示切り替えをさせる処理を、jQueryを利用して実装しました。

実装方法

f:id:namotasam14:20181104222409p:plain

html

まずは今回はタブを3つ用意します。それらのタブに関連したコンテンツも同じく3つ用意しますが、初期表示されるものは1つだけにします。
下記がhtmlのコードになります。
※記事内容に関係のある箇所だけを抜粋しています。

<body>
  <div class="content-header">
    <div class="header-tab">
      タブ1
    </div>
    <div class="header-tab">
      タブ2
    </div>
    <div class="header-tab">
      タブ3
    </div>
  </div>
  <div class="content-body">
    <div class="body-item">
      これはタブ1のコンテンツです。
    </div>
    <div class="body-item">
      これはタブ2のコンテンツです。
    </div>
    <div class="body-item">
      これはタブ3のコンテンツです。
    </div>
  </div>

CSS

続いてCSSのコードは下記になります。
※こちらはほとんど体裁を整えるためのものですが、カレント表示を実装するためのクラス「is-active」は基本的に必須ではないかと思います。他のクラスはお好きなように変更加えてください。

.content-header {
	display: flex;
	border: 1px solid #ec5d01;
	justify-content: space-between;
}
.header-tab {
	width: 33.33%;
	padding: 25px 0;
	text-align: center;
	background-color: #f1d06b;
	border-right: 1px solid #ec5d01;
}
.header-tab:last-child {
	border-right: none;
}
.is-active {
	background-color: #f16b6b;
	color: #fff;
}
.content-body {
	font-size: 20px;
	font-weight: bold;
}
.body-item {
	text-align: center;
	margin-top: 100px;
}

jQuery

今回の内容の主役、jQueryのコードなります。

/* 初期表示 */
$(function() {
  //メニュー1のコンテンツのみ表示
  $('.body-item').hide();
  $('.body-item').eq(0).show();
  $('.header-tab').eq(0).addClass('is-active');

  $('.header-tab').each(function() {
    $(this).on('click', function() {
      var tabIndex = $('.header-tab').index(this);
      $('.header-tab').removeClass('is-active');
      $(this).addClass('is-active');
      $('.body-item').hide();
      $('.body-item').eq(tabIndex).show();
    });
  });
});
解説

$('.body-item').hide();
まず、各コンテンツを非表示にします。

$('.body-item').eq(0).show();
最初から数えて、順番が1つ目のコンテンツのみを表示させます。
※eq()メソッドでは、0(ゼロ)番目の要素のみに処理を行わせています。

$('.header-tab').eq(0).addClass('is-active');
そして、0(ゼロ)番目のタブに「is-active」クラスを付与することで、カレント表示になります。

var tabIndex = $('.header-tab').index(this);
クリックされたメニュータブのインデックスを取得し、変数に代入します。

$('.header-tab').removeClass('is-active');
すべてのタブから「is-active」クラスを外します。

$(this).addClass('is-active');
クリックされたタブのみに「is-active」クラスを付与し、カレント表示の状態にします。

$('.body-item').hide();
すべてのコンテンツを非表示します。

$('.body-item').eq(tabIndex).show();
先ほどの変数「tabIndex」を使うことで、クリックされたタブと同じ順番のコンテンツのみが表示されます。

最後に

今回はシンプルな実装方法にはなりましたが、カレント表示機能もあるので今後いろいろな場面で利用できる内容ではないかと思います。今回の内容をベースに、さらにcssなどで動きを加えたものを作成し、よりよい、デザイン性があるものを実務の中に取り入れていけたらと思います。

Glupについて

はじめに

近年はWEBサイト制作作業において「タスクランナー」というツールが注目されているそうなので、実際に導入してみました。

スクランナーとは

ウェブ制作における様々な処理のことを「タスク」といいます。
例えば、WEBサイト制作作業では、コーディングの前に使用する画像を圧縮したり、Sassファイルをコンパイルしたりと、手動でおこなうと細かなルーチンワークが生じます。これらを自動化してくれるのが「タスクランナー」です。タスクランナーを使用することで、開発工数の短縮につなげることができます。また、開発者間で共有することもできます。チーム内で一定の品質を維持しながら開発できるようになります。

Glup(ガルプ)はいくつかあるタスクランナーのうちの一つです。ほかにもGrunt(グラント)というツールもあります。下記が二つの違いになります。

  • Glup
    • 記述型式:JavaScript形式
    • 処理方法:非同期処理
  • Grunt
    • 記述型式:JSON形式
    • 処理方法:同期処理

Gulpの導入手順(Windows向け)

Node.jsのインストール

公式サイトから「推奨版」または「最新版」を選択しダウンロードします。

『公式サイトのURL:https://nodejs.org/ja/

コマンドプロンプトを起動し、Node.jsのバージョンを下記コマンドを入力し、確認します。

コマンドライン
「node -v」
そして、「v8.12.0」のようにバージョンが表示されればNode.jsは無事にインストール完了です。

package.jsonファイルの作成

今回作業するフォルダ(以下、プロジェクトフォルダ)を任意の場所に作成し、その場所に下記コマンドを入力して移動します。
※今回は「my-project」がプロジェクトフォルダという前提で解説します。
コマンドライン
「cd C:\Project\●●●\my-project」
上記の様に入力し、コマンドを実行させるフォルダへの移動が完了したら、下記のコマンドを入力し、「package.json」ファイルを生成します。
コマンドライン
「npm init -y」

下記の様に出力されたら、「package.json」ファイルの生成が完了です。
※環境によっては違う内容 (ディレクトリ名やディレクトリ構造) の場合もあります。

Wrote to C:\Project\htdocs\my-project\package.json:

{
"name": "my-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

Glupのインストール

Gulp本体をローカル環境に(プロジェクトフォルダ以下で使えるように)インストールします。
コマンドライン
「npm install -D gulp」
※ package.jsonファイルを開くと、devDependenciesというキーに、インストールしたプラグイン名とバージョンが記載されていることを確認できます。これでGulpのインストールは完了になります。

最後に

今回は主に環境構築の内容になりました。
あとは、実際にタスク(処理内容)のファイルを作成等をすることで、Gulpの便利さを実感することができると思います。
タスクの作成方法や実行方法については次回以降でご紹介したいと思います。

【今回参考にさせていただいたサイト】
ics.media

配色について-2

はじめに

色は人に印象を与えます。しかし、閲覧環境によって色の差が認識しづらかったり、ディスプレイの性能によって細かな色の差を表現できない場合もあります。また、WEBサイトを利用する方が目に疾患があれば見え方も変わってきます。
また、WEBサイトの配色を検討するうえで、リンクやボタンの配色は操作性にも大きく関わってきます。ユーザーがストレスを感じずに目的を達成するためには適切な配色の知識を身につけることが非常に重要になります。

利用者の視点に立った配色

上記でも述べたように、WEBサイトは誰にでも同じように見えるとは限りません。ここで大切になることは、様々な環境と見え方があることを理解し、多くの人に情報が伝えられように、ユーザーの視点に立って配色を選んでいくことになります。

コントラストを意識した配色

コントラストは、色相、明度、彩度の対比のことをいいます。WEBサイトでコントラストが大きく影響してくるのは文字や図形などの配色です。前景色(文字など)と後景色のコントラスト比が高いほど可読性が上がり、見やすくなります。
また、コントラスト比が高いほど野外などの環境でも差がわかり、多くの人にも見やすくなります。
【※参考:コントラスト比を調べるツール】
「WCAG Contrast Checker」https://contrastchecker.com/

色だけの情報伝達と注意点

色を用いた情報伝達だけでは、色の見え方が一般の人と異なる人にとっては、リンクの色による情報の差が伝わらず、同じ色に見えてしまいます。
多様な色覚に配慮して、情報が的確に伝わるようにリンクにアンダーラインを引くようにするなど、色以外の視覚情報で伝える手段も取り入れるべきです。

WEBサイトの目的に合った配色と比率

配色

WEBサイトには、コーポレートサイトやEコマースサイト、ポータルサイトの種類があり、それぞれに役割やコンセプトを持っています。そして、色はWEBサイトのコンセプトを引き出すために重要な要素をもっていて、配色を変更するだけでWebサイトのイメージを大きく変化させることができます。
目的に合わせて配色を決める方法は大きく分けると2種類あります。

  1. 一つの色から配色を選ぶ
  2. 写真から配色を選ぶ

一つ目は一つの色から配色を選ぶ方法です。
まず、サイトのコンセプトとなるメインカラーを決め、それを基準にして、ベースカラーとアクセントカラーを決めます。
ベースカラーは背景色やホワイトスペースに使用し、アクセントカラーはリンクテキストや重要なボタンなどに使用します。
下記のANAのサイトでは、機体やロゴマークに使われている青色をメインカラーにして、白色をベースカラーとしています。そして、アクセントカラーは、重要なポイントでユーザーの視線が向くように、補色の黄色を採用しています。
≪例1≫
ANAのサイト:https://www.ana.co.jp/
f:id:namotasam14:20181014133854p:plain

二つ目は、写真から配色を選ぶ方法です。
こちらの場合はWEBアプリケーションである「Adobe Color CC」を使うと便利です。
【※参考「Adobe Color CC」:https://color.adobe.com/ja/create/color-wheel/
このツールは画像をアップロードするだけで、配色を自動で抽出してくれる機能があります。

比率

WEBサイトの配色でよく使われるのは「70:25:5」の比率です。
70%はベースカラー、25%はメインカラー、5%はアクセントカラーの配色の割合が、美しい配色になりやすい傾向があります。

リンクの配色

リンクはWEBページを結びつける要素であり、未訪問リンクと訪問済みリンクなどで色を分けます。ブラウザによっては微妙な色の違いはあるものの、デフォルトの未訪問リンク色は「青」、訪問済リンクは「柴」が採用されています。
デザイン的に青が合わない場合は、メインカラーを採用されている傾向があります。
メインカラーであれば、違和感を感じずにリンクの存在を主張できます。

最後に

WEBサイトを作る際には、前提として、様々な環境と見え方があることを理解し、ユーザーの立場に立ってデザインしていくことが非常に重要になってくることを学びました。配色を決める方法も、これまでは感覚的に選んだ時もありました。でもそれは、自分が良いと思った配色であって、ユーザーの視点に立てていなかったことになります。
今後はサイトのコンセプトを基準に比率を意識して、サイトの配色をしていこうと思います。

【参考書籍】

配色について-1

はじめに

広告やWEBサイトなどを製作するうえで、配色によってデザインの印象が変わってきます。たとえ同じデザインでも、明るくにぎやかな印象もあれば、逆に落ち着いた印象を与えることもあります。色はデザイン要素としても人の心を動かす情報が大きく、下記で紹介する色の仕組みを理解することは、WEBサイトを製作するために非常に重要なものとなります。

マンセル表色系

アメリカの画家アルバート・マンセルが、連続する色を目に見える変化として体系的に表現したルールです。

【参考サイト:Wikipedia

https://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%B3%E3%82%BB%E3%83%AB%E3%83%BB%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%BB%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0

このマンセル表色系では「色の三属性」として色相・明度・彩度の3つの属性が用いられます。

  • 色相:赤、黄、緑、青、柴といった色の様相の表した色味のことをいいます。
  • 明度:色の明暗のことをいいます。
  • 彩度:色の鮮やかさのことをいいます。

色相

上記のマンセル表色系(5色)に中間色を追加した色を円環に並べたものを「色相環」といいます。また、色相環の正反対側に位置する色は「補色」といい、お互いの色を引き立てあう性質があります。

明度

色味のない黒・灰・白の色を「無彩色」、色味を持つものを「有彩色」といいます。色の三原色の中で一番視認性に直結しているものが明度です。自分が制作したものが、見やすいデザインであるか判断する際には、デザインをグレースケール化や、カンプをモノクロコピーしてみることで、色の三原色が明度だけになり、人の目にわかりやすく差が生じます。

 彩度

色のない無彩色を0として、色の鮮やかさの度合いにより数字が大きくなっていきます。マンセル表色系の彩度は、色相と明度によって最大値が異なりますが、どの色も彩度が高い色は派手な印象となり、彩度の低い色は、地味な印象の色となる傾向があります。

物理補色

上記で説明した補色は物理補色といいます。マンセル色相環の反対に位置する色のことで、お互いの色を引き立て合う性質があります。また、補色同士の色を混ぜ合わせると無彩色になる性質があります。

下記のサイトは物理補色を利用したサイトの例です。このサイトでは「無料会員登録」ボタンに、アクセントカラーのレッド系の色を使用しています。

サイト全体の調和を崩さないように補色を上手に使っています。

f:id:namotasam14:20181008103333p:plain

サイトURL:http://miraitonya.com/

類似色

色相環で指定したい色から近い色を「類似色」といいます。類似色の特徴は色の調和がとりやすいというメリットがあります。色の調和といのは、配色に色の衝突が起こらないように組み合わせることです。類似色の調和は、自然界によく見られる色の組み合わせであり、「色相の自然連鎖」といいます。

類似色を取り入れたサイトは下記が参考になると思います。水やプールを連想させる青色と水色を使用しています。二つの色は色相が近いため、配色しても色の印象を変えずにサイトのイメージをユーザーに伝えることができます。

f:id:namotasam14:20181008174403p:plain

参考サイトURL:https://www.theralux.com.au/

 最後に

私自身も、デザインを専門的に学習してきたわけではないので、今回の内容は、今後のサイト制作でとても参考になるものだと思います。ユーザーに「文字が見づらい」「眼がチカチカする」などのストレスを与えないように配色しなくてはなりません。今回紹介した内容を踏まえ、サイト訪問者が得たい情報を瞬時に取得、またはサイト内での商品購入など、目的達成をしやすいサイト設計を意識していきたいと思います。

 

【参考書籍】

いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA)

いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA)

 

 

CSS設計について

絶対値を多用しない

はじめに

コーデイングをしていく際にデザインカンプのフォントサイズと行間の値を測った後に、制作中のサイトに対してCSSで適応していく流れになると思います。その際に絶対値を無意識に使うことはないでしょうか。
今回はフォントサイズと行間における、絶対値指定ではなく、相対値指定をするメリットをご紹介します。

今回のポイントを最初にまとめます。

  1. lline-heightは相対値にすることで、フォントサイズが変更された場合でも同じ倍率を保持する。
  2. line-heightは親要素の値を子要素に継承するため、line-heightを再度設定する必要がない。
  3. 相対値で設定されたline-heightプロパティ値の単位は、極力省くようにする。

今回の例はdivの中に二つの段落があり、比較しやすいように最初の段落はリード文として扱います。
※注1 リード文にはclassが追加されています。
※注2 文章(Pタグ)にはわかりやすいように背景色を追加しています。

では、上記で挙げたポイント1、2の例を説明します
下記【例1】は、リード文と通常の文章の行間が、両者とも1.5倍に設定されているのですが、行間の設定が絶対値指定になっています。

【例1】
f:id:namotasam14:20180929233025p:plain

 <div class="introduction">
  <p class="lead">こちらはリード文です。</p>
  <p>この文章サンプルです。</p>
 </div>
 .introduction {
  line-height: 27px;
  font-size: 18px;
 }
 .lead {
  font-size: 36px;
  line-height: 54px;
 }

こちらを下記【例2】のようにコードをリファクタリングすることで、コード量が減るだけでなく、仮にフォントサイズが変更された場合でも倍率が保持されます。
また、line-heightが継承されることをうまく利用できています。

 ※他にも親要素から子要素へ継承されるプロパティはあります。
 下記サイトが参考になります。
 参考サイト:https://www.webprofessional.jp/css-inheritance-introduction/
【例2】

 <div class="introduction">
  <p class="lead">こちらはリード文です。</p>
  <p>この文章サンプルです。</p>
 </div>
 .introduction {
  line-height: 1.5;
  font-size: 18px;
 }
 .lead {
  font-size: 36px;
 }

そして最後のポイント3を悪い例を使って説明します
絶対値や単位を必要としない限り、極力単位はつけない方が好ましいです。絶対値および絶対単位でなく、「em」や「%」といった相対単位も存在するためです。
下記の例3では意図通りの行間の設定にはなりません。なぜならリード文に、親要素で設定されている相対単位の「1.5em」が継承されているためです。その結果、行間27pxが反映されています。
【例3】
f:id:namotasam14:20180930001050p:plain

 <div class="introduction">
  <p class="lead">こちらはリード文です。</p>
  <p>この文章サンプルです。</p>
 </div>
 .introduction {
  /* 計算後のline-height: 27px; が継承されてしまう */
  line-height: 1.5em;
  font-size: 18px;
 }
 .lead {
  font-size: 36px;
 }

最後に

今回取り上げた例もかなり極端ではありますが、階層が深くなるにつれて複雑なコードになっていきます。そのため、ちょっとした修正をするだけであっても体裁崩れが生じてしまい、どこが原因になっているのか特定することに多くの時間を取られてしまいます。こうなるのことを防ぐために、今回紹介したことをふまえ、修正しやすいCSSを書くことを常に意識してコーディングしていきたいと思います。

【参考書籍】

CSS設計について

より良いCSSのゴール

予測しやすい

「イメージ通りの体裁になるか」ということです。
他のルールが影響してイメージ通りの体裁にならない、追記したルールが影響して他の箇所の体裁が崩れてしまうなどを防ぐことです。

再利用しやすい

「抽象的で機能ごとに分離されたこと」をいいます。
例えば、アラート表示の種類を「注意」と「警告」二つに分けた場合、重複(共通)するパーツを一つ用意し、そのうえで各アラートの種類ごとに色を付けるなど、同じコードが重複しないようにすることです。

保守しやすい

新しいルールを追加・更新する際に、既存のルールを壊さずに変更を加えることが可能な状態で、修正を容易に行えることをいいます。

拡張しやすい

プロジェクト関係者全員がメンテナンス・管理が容易に行えることをいいます。
サイトの規模が大きくなっていく場合でも、拡張しやすい設計になっていることが重要になります。

HTML構造に依存している

多くのサイトはデザインが変わることで、HTMLのマークアップも変わるため、HTMLの構造に依存しているJavaScriptCSSも修正する必要があります。

【例】
f:id:namotasam14:20180924204517p:plain
『悪い例』
▼HTML

<article>
  <h1>ブログのタイトル</h1>
  <div>
    <p>
     ブログの本文
    </p>
  </div>
</article>

CSS

  article h1 {
    border-bottom: 2px solid #000;
    margin-bottom: 1em;
    padding: 10px;
    font-size: 24px;
    font-weight: bold;
}

この場合、仮にHTMLのマークアップが、articleがdivに、h1がh2に変更された時にはCSSのコードに下記のように変更しなくてはなりせん。
CSS

  div h2 {
    border-bottom: 2px solid #000;
    margin-bottom: 1em;
    padding: 10px;
    font-size: 24px;
    font-weight: bold;
}

あらかじめ下記のようにclassを使ったマークアップにしていれば、仮に上記のようなマークアップに変更が生じてもCSS側に変更を加える必要がなくなります。

  <article>
    <h1 class="entry-title">ブログのタイトル</h1>
    <div>
      <p>
        ブログの本文
      </p>
    </div>
  </article>
  .entry-title {
    border-bottom: 2px solid #000;
    margin-bottom: 1em;
    padding: 10px;
    font-size: 24px;
    font-weight: bold;
  }

上記の例は極端な例になるとは思いますが、この例よりもさらに深いセレクタを書くこともあると思います。
classを使わないシンプルなマークアップは、決して間違いではないと思いますが、長期運用のプロジェクトでは、これが修正範囲を広めてしまうことの要因になることも考えられます。
今後サイト制作する際には、今回の内容を踏まえながらCSSの設計を行ない、コーディングしていこうと思います。

【引用元書籍】