外国人にもわかりやすいWebサイトデザイン

f:id:BOEL:20171117124847j:plain


こんにちは、デザイナーの野中です。
秋もすっかり深まり、紅葉シーズンで観光には絶好の時期ですね。
みなさんも街中で外国人観光客の姿を見かける機会が多いのではないでしょうか。

日本政府観光局(JNTO)によると、2017年8月の訪日外国人数247万8千人に登り、2016年の同月に比べて20.9%増加しています。
日本から海外に訪れるアウトバウンドの数を、海外から日本へ訪れるインバウンドの数が上回ったのは2015年。それ以来、訪日外国人の数は増加し続けています。
2020年の東京オリンピック開催に向けて、今後もますます外国人観光客の増加が予想されています。

 

JNTO 訪日外客統計の集計・発表
https://www.jnto.go.jp/jpn/statistics/data_info_listing/index.html

 

そうした訪日外国人観光客は、どこから情報を得ているのでしょうか。
観光庁が発表している「訪日外国人の消費動向 平成28年10-12月期報告書」よると、知人からの口コミやガイドブック以外だと、個人ブログや旅行会社のホームページなど情報の多くがweb上で収集されていることがわかります。

 

観光庁 訪日外国人消費動向調査
http://www.mlit.go.jp/kankocho/siryou/toukei/syouhityousa.html

 

また、日本に居住している外国人も年々増加しています。そうした生活者にとってもわかりやすいサイトづくりがますます求められています。

そこで今回は、外国人を対象にしたWebサイトやコンテンツを制作する時に注意したい項目を6つ取り上げます。

 

色彩感覚

特定の色に対するイメージは、文化によって異なります。
みなさんは「オレンジ」の色からどんなイメージを連想しますか。明るい、元気、活発な印象を持つ人が多いのではないでしょうか。
しかし、メキシコでは「オレンジ」はお葬式を連想させる色です。メキシコの有名な死者の日と呼ばれる期間には、祭壇にオレンジ色のマリーゴールドの花がたくさん掲げられています。
日本ではお葬式と言えば黒のイメージですから、メキシコとはだいぶ異なった色のイメージを持っていると言えます。
外国人向けコンテンツを制作する際にはこのような色彩感覚の違いを考慮して、使用する色が適切な印象を与えられるか検討する必要があります。

 

記号が与えるイメージ

同じ記号から連想するイメージには、文化によって違いが生じることがあります。
例えば、「観光案内所」を示すピクトグラムとしてガイドマップに「?」のマークが置かれているのをよく目にすることがあります。
「?」のマークはJIS規格で観光案内所のピクトグラムとして採用されており、日本人にはなじみのあるマークです。しかし、外国人によってはこれが宝の地図のお宝マークのように感じられ、観光案内所だと分からなかった、という声もあります。

アイコンやピクトグラムを使用する際には、文化的背景が違う人であっても理解できるか配慮する必要があります。
意味の取り違いを未然に防ぐため、誤解が生じる可能性があるピクトグラムは使用しない方が良いでしょう。

 

セリフ体とサンセリフ体のイメージの違い

日本語でゴシック体と明朝体から感じる文字の印象が異なるように、欧文フォントのセリフ体とサンセリフ体では与える印象が異なります。
みなさんも、セリフ体は伝統的でクラシカルなイメージ、サンセリフ体はシンプルで現代的なイメージ、と感じるのではないでしょうか。しかし、それぞれのフォントがどういった印象を与えるかまでは、日本語をメインの言語として生活している日本人にとっては掴みづらいものです。
使用するフォントがデザインイメージに最適かどうか検討する際には、フォントが実際に使用されているシーンの検証や、欧文フォントに見慣れた外国人に意見を求めたりすることが必要となります。

 

アルファベットの大文字表記

アルファベットは、大文字と小文字で与える印象が変わります。
タイトルや見出しで英文を使用する際、大文字のみで文を表記する場合がありますが、大文字のみの表記には注意が必要です。
一般に、大文字表記が用いられるのは以下のような場合です。
・タイトル
・注意書き
・文章中で特定の箇所のみ強調したい時
・人名、地名など固有名詞
上記以外の箇所で不必要に大文字を使用すると、「叫んでいるような感じ」や、「主張・誇張が過ぎる」といった印象を持たれてしまうことがあります。
また、大文字だけの長い文章は読みにくいため可読性も低くなります。目立たせたい箇所のみに適切に使用する必要があります。

 

翻訳できるサイトづくり

メインビジュアルや見出しの文字を画像として切り出すと、テキストとして認識されないため自動で翻訳することができません。
外国語のサイトを訪れた時、日本語のページがなかったらページ自体を翻訳にかけて読む、という人は多いのではないでしょうか。
しっかりと多言語対応したページがあればいうことはないのですが、様々な言語への対応や、クオリティの高い外国語ページの作成・維持は困難です。
そんな時はむやみに外国語ページを設けるより、翻訳されやすいページ作りを心がけると良いかもしれません。
例えばタイトルや見出しは画像で作成せず、コードでテキストを反映した方が翻訳にかけることができ理解が深まります。 また、一つ一つの文を短く簡潔にすることで自動翻訳の精度も上がります。

 

やさしい日本語


日本語のWebサイトを閲覧する外国人には、観光客だけでなく日本で生活している生活者も含まれます。
生活者向けの災害情報や日本で生活する上で必要な情報の表記には、「やさしい日本語」が用いられています。
「やさしい日本語」とは、日本語能力検定のN4,N5レベル(初級レベル)に相当する文法・表現を用いて簡潔に表記する方法です。多くの市町村のサイトでは、「やさしい日本語」表記への切り替え機能や、「やさしい日本語」で書かれたページが備わっています。

訪日観光客を対象にした観光サイト「MATCHA」では、使用言語に「やさしい日本語」を選ぶことができます。簡単な単語が使われているのはもちろん、文を理解しやすいよう文節で区切ったり、漢字にはルビが振られています。

 

MATCHA
https://matcha-jp.com/easy


英語は世界中の国際交流の場で使用されていますが、必ずしも全ての人が理解できるわけではありません。
日本に在住している生活者の方向けのサイトを制作する際には、むしろ生活者が一般的に理解できる範囲の「やさしい日本語」を用いた方が理解しやすいサイトになるかもしれません。英語は世界中の国際交流の場で使用されていますが、必ずしも全ての人が理解できるわけではありません。
日本に在住している生活者の方向けのサイトを制作する際には、むしろ生活者が一般的に理解できる範囲の「やさしい日本語」を用いた方が理解しやすいサイトになるかもしれません。

 

まとめ

いかがでしたでしょうか。 外国人と一言でいっても、持っている文化的背景や感じる印象はひとそれぞれです。
全てのユーザーにとってフレンドリーなサイト制作は困難ですが、具体的に誰に向けて情報を発信したいのか、まずターゲットを明確にする必要があります。
その上で、誤解のないようアイコンやピクトグラムの形状を検討したり、英語や中国語などのに対応していないターゲットでもわかりやすい「やさしい日本語」を取り入れたりすると、より新設なサイトになるのではないでしょうか。
ますます増えていく訪日外国人観光客や日本在住の外国人のみなさんにとって、必要な情報が正確に伝わるサイト作りを心がけたいですね。

 

 

 

 

クリスマスに取り入れたいデザインのポイント

f:id:BOEL:20171109115003j:plain

 

こんにちは。デザイナーの箱石です。
ハロウィンが終わり、街はクリスマスの色合いになってきました。 今回は、これから増えてくる「クリスマスのデザイン」の要素を、実例と共にご紹介します。

※紹介する事例の引用元サイトは、季節性のあるキャンペーンサイトも含まれており、一定の期間を過ぎるとクローズする可能性がありますので、ご了承ください。


フォント

クリスマス向けのデザインでは、高級感やラグジュアリーさの演出のため、ゴシックではなく明朝体のフォントを用いることが多いです。
ビアードパパ明朝体のフォントを使い、クリスマスケーキの特別感を見せています。

一方、スターバックスのサイトではゴシック体のフォントに枠を付けることで手書き感を演出しています。また毎年クリスマスになると限定商品が出てweb もクリスマス仕様になります。
スターバックスの広告では手書き感を演出したフォントがよく用いられるため、他の広告に合わせてゴシック体を使うことで、ブランドとしての統一感を出しています。

 

ビアードパパの作りたて工房 Christmas cake2017

http://www.muginoho.com/xmas/

f:id:BOEL:20171109115046j:plain

 

スターバックス クリスマスサイト2017 Christmas cake2017

http://www.starbucks.co.jp/cafe/raspberry/index.html?nid=tbn_01_pc

 

配色

クリスマスといったら「赤と緑」をイメージしますが、毎年開催される、横浜赤レンガ倉庫のクリスマスマーケットサイトは赤を使わず、夜空の青をメインにして背景には星をイメージする黄色を使い、高級感を出しています。色を多く使わずまとめているため落ち着いた印象です。

 

横浜赤レンガ倉庫 クリスマスマーケット

https://www.yokohama-akarenga.jp/christmas2017/

f:id:BOEL:20171109115329j:plain


モチーフ

クリスマスのモチーフには、プレゼント・木・靴下・サンタクロース・星などが多いです。例えば「夜空・星・街」や「木・靴下・プレゼント」などを組み合わせてみると、よりクリスマスのイメージがしやすいですね。
またパーティ料理にもこのモチーフを入れることができます。例えばパスタの盛付けをツリーに見立ててみるとテーブルがより可愛くなります。

 

f:id:BOEL:20171109115436j:plain

 

素材

クリスマスの素材として多く使われているのが、イルミネーションや星空をイメージする「スパンコール」や「ラメ」といったキラキラしたもの。また雪をイメージする「綿」があります。
このような素材を使ったクリスカードはよく店頭で見かけますが、Webサイトデザインにもこうした素材感が用いることができます。
目黒川のイルミネーションを案内するweb サイトでは、夜をイメージする背景に星の光を散らすことで、幻想的なイルミネーションをイメージするデザインになっています。コピーの文字がバラバラと現れるアニメーションも、キラキラした光のイメージに合っています。
アフタヌーンティーリビングは雪の降る web サイトを公開しています。しばらくすると空にサンタクロースが現れるアニメーションも、クリスマスらしい遊び心があります。イラストを使っているため優しく親しみのあるデザインですね。

 

目黒川のイルミネーション案内

http://jewel-dome.com

f:id:BOEL:20171109115548j:plain

 

アフタヌーンティーリビング クリスマスサイト

https://www.afternoon-tea.net/merry-apple-christmas-2017/

 

パッケージ

この時期になると各ショップでクリスマス限定のパッケージやショップバッグが出ます。パッケージにも先ほど紹介したモチーフが使われるなど、それぞれのブランドに合わせたデザインを展開しています。
洋菓子店「AUDREY」はクリスマスの派手な印象とは違い、グレーをベースにしたシンプルなパッケージデザインです。
また D-BROS のラッピングシールは、赤と黒の素朴なイラストです。クリスマスを全面的に出すのではなく、モチーフがある事で少し嬉しくなるラッピングシールです。

 

洋菓子店 AUDREY パッケージ

f:id:BOEL:20171109115642j:plain

 

D-BROS クリスマスラッピング

http://db-shop.jp/magazine/2016/11/4133

f:id:BOEL:20171109115728j:plain

 

まとめ

いかがでしたでしょうか。
今年のクリスマスは、プレゼントの包装紙やパーティの案内を自分で作ってみるのも楽しいかもしれませんね。クリスマスや冬を連想するモチーフや素材を使って、オリジナルのクリスマスカードをデザインしてプレゼントするのもいいかもしれません。

 

 

 

 

新しくなったGithub Desktopを使ってみよう

f:id:BOEL:20171027115311j:plain

 

Github Desktopのアプリが新しくなりました。
Github Desktopはソースやファイルのバージョン管理を行うGithubの機能を、コマンドを使わずグラフィカルユーザインターフェースで行える公式に配布されているアプリケーションです。
以前TIPSでも紹介しています。こちらも合わせてご覧ください。

GitHub Desktopを使ってみよう | TIPS | BOEL Inc. ボエル

 UIが一新され、要素配置やボタンの名前変更など従来に比べ変更されています。
今回の更新で使い勝手の違いや変更点、使用感をお伝えします。
また、100MB以上の大きなファイルを扱うことができるGit LTSの使い方、導入方法について紹介します。

 

アプリUIの変更

f:id:BOEL:20171027115514j:plain

UIの変更を見ていきます。
大きく変わったのは以前のバージョンまでは画面上部にあったhistoryの横軸ツリーがなくなっていることです。
代わりにボタンが大きくなり、画面が整理されました。

 

リポジトリリスト

f:id:BOEL:20171027115600j:plain

以前は左側にアコーディオンで表示していたプルダウンメニュー形式に変更になりました。
プルダウンを開くと現在の画面の上にリストを開く形となります。常に表示はできないようです。

 

◯changesとhistoryのボタン移動

changesとhistoryのボタンが画面上部からリポジトリーリストの下に移動しました。
より構造的な配置になっています。

 

◯Syncボタンの変更

今までの「Sync」ボタンが「Fetch origin」や「Push origin」等に変更されました。
こちらのほうがよりGit的な表記になりました。
今まで「Sync」一括りになっていたものが、状況に応じて表記が変わるようになりました。

 

挙動の変更

使っていて従来版と大きく変わったのが、「Fetch origin」する時の挙動です。
運用方法として1つのアカウントを複数PCからログインし、使用する形をとっています。
使い方による可能性も否めませんが、今まではコンフリクトが起こらない限り、Fetch origin(Sync)が出来ないことはなかったのですが、新しくなってからはリモートで更新があったファイルと同じものを編集していた場合、必ずローカルリポジトリにコミットしてからでないと、Fetch originでリモートリポジトリの内容がローカルに反映されません。
また、反映された後、他人の変更点を含んだ変更を自分の作業として「Merge branch ‘リポジトリ名’ of…」(コミット名(Summary)は変更可能)といった形でもう一度コミットしなければならなくなりました。
今までの上記を挟まない手順で慣れていたたため、運用方法も含め、検討が必要な箇所にもなります。

 

その他の変更点

f:id:BOEL:20171027115734j:plain

新しいアプリはElectronベースで開発されています。
メニュー内に項目があるため、Chromeおなじみのデベロッパーツールを開くことができます。(何に使えるか、と言うのはまだ未検証です)

 

ElectronとはHTML、CSSJavascriptをベースにアプリケーションが作成できるエンジンです。
ChromiumがランタイムとなっているためデベロッパーツールもChromeで見るものとそっくりになります。
Node.jsも同様にランタイムになっています。
(今回本題ではないためElectron詳しい説明は割愛させて頂きます。)

 

Git LFS

Githubでは基本的に100MB以上のサイズの大きいファイルをリモートリポジトリにPushすることができません。


そこでGit LFSという機能を使うことで100MB以上のデータを扱えるようになります。

GithubLFSをどうやって使うのか、使用後にデスクトップアプリでどのような表示、挙動になるのかを試してみます。

 

Git LFS(Git Large File Storage)は名前の通り大きいファイルを扱うための機能です。
利用するにはDesktopアプリだけでは完結できず、ターミナルからコマンドを入れる必要があります。
ただ、Desktopアプリもコマンドを扱うように作られているので、GUI上である程度操作を進めることも可能です。

 

準備

セットアップはMacでを進めていきます。
macOS 10.12.6 Sierra

 

まず、git lfsをインストールします。
インストールにはhomebrewを使います。
(使うにはXcode及びCommand Line Toolsのインストールが必要です。)
homebrewが使えない場合はHomebrewをまずインストールしましょう。

 

Xcode

XcodeApp storeからインストールが可能です。
少々ファイルサイズが重たく、インストールに時間がかかる場合があります。
App Storeで検索し、ダウンロード、インストールしましょう。

 

◯Command Line Tools

インストールしたXcodeを起動し、ライセンス使用許諾契約に同意します。
同意した後下記コマンドを入れます。

 

xcode-select --install

 

◯homebrewインストール

上記の準備ができたらhomebrewインストールを進めていきます。
下記コマンドを入れます。

 

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

git lfsをインストールします。

 

brew install git-lfs

 

リポジトリlfsの反映

リポジトリディレクトリに移動し、lfsを反映させます。
cdコマンドで移動してもいいですが、アプリケーション上でもターミナルを開くことができます。
アプリケーションのリポジトリ選択で右クリックするといくつか選択肢が出てきます。
「Open in Terminal」を押すと、リポジトリディレクトリに移動した状態でターミナルを開くことができます。
リポジトリに移動したらコマンドを入れます。

 

git lfs install

 

反映したら下記コマンドを入れます。large_file.psdのファイル名は任意です。

 

git lfs track large_file.psd
git add .gitattributes

 

◯コミットとリモートへの反映

後は通常の手順でコミットとpushをします。
※large_file.psdのファイル名は任意
LFSテスト」の部分はSummaryになります。任意のものを入れて大丈夫です。

 

git add track large_file.psd

 

git commit -m 'LFSテスト'
git push origin master

 

これで完了です。
Github Desktopにもコミット内容が反映されているはずです。

 

まとめ

今回は新しくなったGithub Desktopの紹介とGit LTSの使い方を紹介しました。
開発やコードに関連するもの以外でも、Githubでは扱えるためデザイナーの方などエンジニアやコードを専門で扱わない方でも操作方法や仕組みがわかれば十分活用できます。
基本的にはDesktopアプリケーションで操作し、必要なときにコマンドラインを使う事ができれば、運用の幅が大きく広がると思います。
ひとつひとつはそれほど難しくないものも多いので苦手意識を持たず目的に沿ってどんな機能を使うか更に模索していきたいです。

高齢の方向けウェブサイトデザイン 8つのポイント

f:id:BOEL:20171004171556j:plain


こんにちは。デザイナーの那須です。
最近は、ご高齢でもパソコンやスマートフォンでインターネット(※)を利用する方が増えていますね。
総務省によると、2016年には60歳以上の方の約60%、60~64歳の方に限定すると80%以上が、インターネットを利用しています。
(※)パソコン、スマートフォンタブレット型端末、携帯電話・PHSスマートフォンを除く)、インターネット対応型家庭用ゲーム機、インターネット対応型テレビ受信機の合計

これからさらに増える高齢の利用者の方にも、快適にウェブサイトを見ていただきたいですね。
そこで、高齢の方にとって利用しやすいウェブサイトデザインのポイントをまとめました。

 

アルファベット・片仮名は使わない

表記は「ログイン」→「会員の方はこちら」、「Access」→「交通案内」など、漢字や平仮名にしましょう。
アルファベットや片仮名表記で示される外来語に馴染みがない方にも言葉の意味が伝わりやすいよう、配慮が必要です。

 

フォントは大きく

一般的に、高齢の方が読みやすいフォントサイズは16px以上です。文字の読みやすさは書かれている情報の理解度に直結するため、対象となるユーザーに応じた適切な設定が必要です。

 

行間は広めに

フォントサイズ同様気をつけたいのが、行間です。
line-heightが160~180%が読みやすいです。
行間が狭すぎると、行を移るときに次に読む行を見失いますし、反対に広すぎると、視線の移動距離が大きくなり疲れてしまいます。
フォントサイズはブラウザの表示設定などで変更できますが、行間はユーザー側での調整ができません。作る側がしっかり配慮しましょう。

 

色のコントラストに注意

テキストと背景は、しっかり色のコントラストをつけましょう。
日本工業規格「JIS X 8341-3:2010」では、テキストと背景のコントラスト比を4.5対1以上とするよう推奨しています。
白内障などにより視界がかすみ黄色味を帯びてくると、パステルカラーなどのペールトーンや彩度の低いカラーが識別しにくくなります。
特に黄色と白は識別しづらいので注意が必要です。

また、表示する色合いを変えられる機能を入れると更に利用しやすくなります。

参照:東京都 http://www.metro.tokyo.jp/moji.html

f:id:BOEL:20171004172352p:plain


無料のコントラスト確認ツールもあるので活用しましょう。

miChecker Ver.2.0
http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker.html

ColorTester
https://alfasado.net/apps/colortester-ja.html

 

ボタンは大きく、立体感を

ボタンやテキストリンクは大きくしましょう。主要なボタンは、幅が32px以上あるとよいです。
入力フォームなどにあるチェックボックスやプルダウンも、適切な大きさに設定する必要があります。
カーソルを数ミリ動かしたり、小さなボタンをタップしたりするなどの細かい動作が必要ないよう、手先が不自由な方の利用も前提とした設計が必要です。

また、フラットデザインのボタンは、単に背景が塗りつぶされたテキストに見えてしまいます。
薄い影を入れるなどして立体感を出し、心理的に「押したくなる」ボタンにしましょう。

参照:資生堂 プリオール https://www.shiseido.co.jp/pr/question/

 

f:id:BOEL:20171004172428p:plain

 

アイコンにはテキストを添える

アイコンがなにを意味するか、テキストで補足を入れましょう。
アイコンは文字分のスペースを節約でき便利ですが、普段からWebサイトを利用していない場合、アイコンの意味がわかりにくく感じられる方や、アイコンをクリックすると詳細な情報が表示されることが理解しにくい方もいます。

参照:近畿日本ツーリスト http://www.knt.co.jp/

f:id:BOEL:20171004172645p:plain


「表」で比較しやすく

ウェブサイト上で数種類の商品やサービスを比較したいとき、主要な情報をまとめた一覧表があると便利です。
ページの行き来が多いと、今いるページや元のページへの戻り方がわかりにくくなるため、同じページで複数の情報を比較できると親切です。

「LIFULL介護」のページでは、違いのわかりにくい老人ホーム・介護施設が一目で比較できる表が掲載されています。

参照:LIFULL介護 https://kaigo.homes.co.jp/manual/facilities_comment/list/

f:id:BOEL:20171004172619p:plain


問い合わせ電話番号はファーストビューに

問い合わせ対応用の電話番号がある場合、ファーストビューの範囲内に設置しましょう。
高齢の方にとって「困った時にすぐ電話で直接相談ができる」ことは心強いものです。メールや問い合わせフォームの利用に不慣れな方にとっても、電話番号はすぐ見える場所に入れると親切です。

 

まとめ

いかがでしたでしょうか。
ウェブサイトを作る時、自分では見やすいと思っても、様々な方に見ていただくことを十分考慮してデザインしたいですね。
先に挙げたような小さな工夫をすることで、幅広い年代の方にとってわかりやすい、快適なウェブサイトを増やしていきましょう。

 

参考サイト

総務省「平成29年版 情報通信白書」
http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h29/html/nc262120.html

Web担当者Forum

「シニアフレンドリー最適化=SFO」の背景と重要性を認識しよう(全6回の1)」
http://web-tan.forum.impressrd.jp/e/2015/10/02/20679

「ネットはまだアヤしい場所? シニアの心理的ハードルを下げ安心してもらう6つの方法(全6回の2)」
http://web-tan.forum.impressrd.jp/e/2015/11/06/20680

「シニアの認知能力でも快適にサイトを使えるようにする7つの“技”(全6回の3)」
 http://web-tan.forum.impressrd.jp/e/2015/12/01/20681

「文字サイズだけでは不十分! 老いた眼や手でも使いやすいサイト作り7つのポイント(全6回の4)」
http://web-tan.forum.impressrd.jp/e/2016/01/21/21867

hi-posi Front-End blog「50代以降をターゲットにしたWebサイトのUI事例」
http://hi-posi.co.jp/tech/?p=330

WebA11y.jp「各チェックツール」
https://weba11y.jp/tools/testing_index/

LIG「デザイン上達の秘訣は「文字の扱い方」!テキストを読みやすくする5つのポイント」
https://liginc.co.jp/225369

長野県建築士会諏訪支部青年委員会「高齢者にやさしい色彩計画」(PDF)
http://www.arcsuwa.com/committee/seinen/koureisyaniyasasii.pdf

UI向上に必須。マイクロインタラクション10選

f:id:BOEL:20170928121452j:plain

こんにちは。デザイナーの寺田です。
TIPS vol.59で「WebライティングでUIデザインの品質を高める」をご紹介しました。
今回は、ライティングとともにWebサイトの品質を高めるために、ぜひこだわりたい、
マイクロインタラクションについてご紹介します。
Googleが薦めるマテリアルデザインの出現から、マイクロインタラクションを用いたWebサイトがほとんどです。

マイクロインタラクションをWebサイトに取り入れることでUIの向上につながります。
ただ、単純に動きを入れたらUIが向上するということではないので、 マイクロインタラクションの実装のポイントや実例をこれからみていきましょう。

 

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

ハンバーガーボタンをクリックした時のアニメーションなど、 ユーザーの行動に対して起こるアクションのこと。
以下の内容は、UIを高めるに当たって必要なアニメーションです。
また、PANTONEが2017年秋におすすめの10色を発表しました。いずれも落ち着いた素敵な色なので、デザインに取り入れてみてはいかがでしょうか。
・状況を伝え、フィードバックを提供する
・ユーザーに、より直接的な操作を行っていると感じられるようにする
・ユーザー自身が行ったアクションの結果を分かりやすくする

 

使ってみたいインタラクション例10選

Webサイトの状況を伝える

Webサイトの状況を伝えるとは、Webサイトで今何が起きているかをユーザーに発信し続けるということです。 ユーザーは早いレスポンスを期待しますが、ユーザーの環境などでWebサイトが反応を返すまでに時間がかかる場合があります。 その際には、ローディングを表示させましょう。状況を伝えることでユーザーのストレスは軽減します。
普通であれば、ストレスとなる状況でもアニメーションを使って ユーザーにWebサイトの体験を良いものにしていけたらベストですね。

f:id:BOEL:20170928122354j:plain

参考サイト
https://codepen.io/khadkamhn/pen/ORVNrW

 

CTA(Call To Action)/コールトゥアクション

CTAとは日本語では行動喚起とされています。
魅力的なアニメーションを実装することで、ユーザーの興味を引き、次のアクションへと誘導することが可能になります。

f:id:BOEL:20170928122513j:plain

参考サイト
https://codepen.io/Schlipak/pen/vXkYpp?q=micro%20interaction&limit=all&order=popularity&depth=everything&show_forks=false
https://codepen.io/aarongrieve/pen/KqxRWY?depth=everything&limit=all&order=popularity&page=5&q=micro+interaction&show_forks=false

 

強調する部分を伝える

CTAとは日本語では行動喚起とされています。
スペースを節約するために、必要に応じてアプリ内のボタンを別のものに置き換えることがあります。
その際にアニメーションはユーザーを引きつけ、伝えたい情報を見落とさないようにします。

f:id:BOEL:20170928122823j:plain

 

参考サイト
https://bootsnipp.com/snippets/featured/material-toggle-button
https://codepen.io/andreasstorm/pen/OmBdpO

 

インタラクションのルールを統一する

スマホやスマートウォッチという小さい画面において、たくさんの情報を表示させることは難しい場合があります。インタラクションでユーザーが今いる場所を把握でき、ユーザーの行きたいページへすぐに行くことができます。

f:id:BOEL:20170928122945j:plain

参考サイト
http://significa.pt/labs/css-only-slider/
https://codyhouse.co/demo/stretchy-navigation/index.htmlhttps://tympanus.net/Blueprints/PageStackNavigation/

 

データ入力を視覚的にする

データ入力のクオリティーを高めることで、Webサイトの質はグッと高まります。
ユーザーにとってデータ入力はめんどくさい作業ですが、マイクロインタラクションを取り入れることで、ユーザー体験が向上します。

f:id:BOEL:20170928123043j:plain

参考サイト
https://codepen.io/wicek3d/pen/xRyrmP?depth=everything&limit=all&order=popularity&page=3&q=micro+interaction&show_forks=false
https://tympanus.net/Development/TextInputEffects/

 

まとめ

いかがでしたでしょうか。
UIの向上のためにインタラクションは今では、必須の項目となっています。 サンプルのソースも探せば、たくさん出てきますので 試したりアレンジしたり、インタラクションを使うことの自分なりの答えを出してみてください。

参考サイト
http://uxmilk.jp/3553
http://www.seleqt.net/design/micro-interactions/

https://www.webprofessional.jp/animations-using-easings-to-craft-smarter-interactions/
https://webnaut.jp/design/1134.html 

https://techacademy.jp/magazine/11670

gulpを使って ファイルの徹底効率化をはかる

f:id:BOEL:20170919122430j:plain

HTMLでサイトを構築するとき、デザインや見栄え等をチェックすることはもちろんですが、
成果物をより良くするために、ソースやファイルにチューニングを加えることがあります。
HTML、CSSソースコード見直しや、整理、画像のファイル圧縮やHTMLのバリデーションチェック。 また、作る過程で要素が多くなったり、ページが増えたり、ヘッダーやフッターなど共通部分が何ページにも渡るケースがでてきます。
調整の過程で共通部分に修正が入ったとき、その部分に該当する全てのHTMLを編集して調整…などと言ったケースが発生することも稀ではありません。
テキストエディタで一括変換ができる場合もありますが、構造そのものに変更が入ったり、変更箇所が多岐に渡ると置換では要件を満たせないこともあります。
CMSフレームワークを入れるほどではないけど、柔軟なソース管理ができてかつ、面倒な手間を省きたいとき、gulpが役に立ちます。

 

gulpとは

Node.jsをベースとしたビルドツールです。
sassやcoffeescriptコンパイルなどを自動化するなどさまざまな手間を省いてくれるツールです。
ビルドの設定が簡単にカスタマイズできるため、いろんなプロジェクトに応じて臨機応変な対応できます。
設定のためのサンプルも、npm公式サイト(https://www.npmjs.com/)などを始め、第三者のデベロッパーが記事を載せているため、情報は比較的充実しています。

設定をJS構文で書くことになるため、多少難しいイメージがありますが、自分の目的さえはっきりしていればサンプルが見つかるため、すぐに設定することができます。
今回はWEB上の情報を集め、BOELで行う開発フローに当てはめて、
少々カスタマイズを加えながら設定をまとめていきます。

gulpをインストール

今回はmacの環境をベースに行っていきます。
macOS Sierra 10.12.6

node.jsをインストール

gulpを使うにはnode.jsのインストールが必要です。
下記サイトから実行ファイルがダウンロードできます。

https://nodejs.org/en/

アプリケーションをインストールする感覚で行えます。dmgを開き、手順に従ってインストールしてください。
node.jsをインストールした後、npmコマンドが実行できることを確認します。


npm -v
5.3.0

 

バージョンが出てくればインストールに問題ありません。

またnode.jsについては、TIPS「node.jsアプリをLinuxサーバーで公開してみよう」でも紹介しています。

そちらもぜひご覧ください。

 

グローバルインストール

gulpはグローバルインストール、ローカルインストール二通りが必要です。まずグローバルインストールを実行します。

 

sudo npm install gulp -g
 

プロジェクトフォルダ内にpackage.jsonが生成されているのを確認してください。

プロジェクトフォルダ内でgulpのローカルインストールを行います。

 

npm install --save-dev gulp

 

インストールが完了したらgulpが実行できるか確認しましょう。

ざっくりGulp.js入門(Mac向け)

http://qiita.com/kazukichi/items/884a1379eea5918689ed

gulpとかnpmのこととか

https://protean.cc/getting-started-with-gulp-and-npm

 

gulpの実行

gulpを実行するためにはgulpfile.jsというファイルが必要になります。
プロジェクトフォルダに作成しましょう。

 

gulpでプロジェクトの設定

設定を進めていきます。

基本的には下記サイトを参考にさせていただいています。これを軸に、プロジェクトの特性に合わせ調整を加えていきます。

 

EJSの基本 – EJSでサイト制作効率化

https://www.to-r.net/media/ejs-01/

gulp-ejsHTMLの共通部分を分割化

gulp-sassscssコンパイル

gulp-plumbergulp-notifyでエラー強制停止の防止を行う。リアルタイム通知

gulp-autoprefixerでベンダープレフィックスを自動で付与

gulp-webserverでローカルサーバーを立ち上げ。

 

※gulp-webserver

gulp-webserverで開発用Webサーバーを立ち上げる

http://labs.septeni.co.jp/entry/2015/10/26/233737

 

※gulp-plumbergulp-notify

これからはじめるGulp6):gulp-plumbergulp-notifyを使ったデスクトップ通知

https://whiskers.nukos.kitchen/2014/12/06/gulp-notify.html

 

追加で下記にも対応します。

imagemin-pngquantgulp-imageminで画像圧縮

gulp-html-validatorHTMLバリデーションする

 

参考サイトのサンプルとあわせて下記のようなコードになります。

 

//package.json
{
  "name": "ejs-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-ejs": "^2.2.1",
    "gulp-html-validator": "^0.0.5",
    "gulp-imagemin": "^3.3.0",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^3.0.0",
    "gulp-webserver": "^0.9.1",
    "imagemin-pngquant": "^5.0.1"
  }
}

-------------------------------------------

//gulpfile.js
const gulp = require('gulp');
const ejs = require('gulp-ejs');
const sass = require('gulp-sass');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const autoprefixer = require('gulp-autoprefixer');
const webserver = require('gulp-webserver');
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const htmlValidation = require('gulp-html-validator');


gulp.task('ejs',()=>{
return gulp.src("./src/ejs/*.ejs")
.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
.pipe(ejs('', {"ext": ".html"}))
.pipe(gulp.dest("./dist"));
});

// sass
gulp.task('sass',()=>{
return gulp.src("./src/scss/*.scss")
.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest("./dist/css"));
});

// localhost
gulp.task('webserver', ()=>{
gulp.src("./dist")
.pipe(webserver({
host: 'localhost',
port: 8000,
livereload: true
}));
});


const imagePath = {
src: './src/images/',
dist: './dist/images/'
};

gulp.task('optimizeImage', ()=> {
return gulp.src(imagePath.src + '**/*').pipe(imagemin({
use: [
pngquant({
quality: 60 - 80,
speed: 1
})
]
})).pipe(gulp.dest(imagePath.dist));
});

gulp.task('valid', () =>{
return gulp.src("./dist/*.html")
.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
.pipe(htmlValidation())
.pipe(gulp.dest('./validout'));
});

gulp.task('watch', ()=>{
gulp.watch('./src/scss/**/*.scss', ['sass']);
gulp.watch('./src/ejs/**/*.ejs', ['ejs']);
});

gulp.task('default',['watch','webserver','optimizeImage','valid']);

 

パッケージをインストールします。package.jsonを編集したら下記コマンドを実行します。

npm install

 

必要なパッケージが追加され、gulpfile.jsに書いた内容が実行できるようになります。
実際にどんなことができるか見ていきましょう。

 

ejsを軸にHTMLをテンプレート化

ejsではHTMLをテンプレート、分割化できます。
srcフォルダを作成し、パーツを作っていきます。

 

ejsフォルダを作成

index.ejs(コアファイル)を作成します。

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>構築のテスト</title>
</head>
<body>
<% include _partial/header %>
<main>
<p>テキストエリア</p>
</main>
<% include _partial/footer %>
</body>
</html>

 

ヘッダーとフッターを外部化

<% include _partial/header %>
<% include _partial/footer %>
これらはHTMLでは見覚えのない書き方です。 これはヘッダーとフッターのテンプレートを読み込む記述になります。
実際に_partialフォルダを作成し、header.ejsとfooter.ejsを作成します。

 

<!- header.ejs ->
<header>
外部化したヘッダーパーツ
</header>

-------------------------------------------

<!- footer.ejs ->
<footer>
外部化したフッターパーツ
</footer>

 

これでHTMLとなるファイルの準備はOKです。

scssのコンパイル

scssをコンパイルし、cssファイルにすることができます。
srcににscssのフォルダを用意し、scssのファイルを作成します。
下記のようにscssの形式で書いてみます。

 

/*common.scss*/
body{margin: 0;
p{margin: 0;}
}

 

画像の圧縮

gulpfile.jsには画像を圧縮する設定を行っています。
srcにimagesフォルダを作成し、画像を用意しておきます。

HTMLのバリデーション

生成されたHTMLのバリデーションを行った結果をファイルに書き出す設定をしています。
結果はvalidoutフォルダが自動生成され、その中に結果が表示されます。

gulpを実行してみる

上記の準備ができた段階でgulpを実行してみましょう。

 

gulp

 

distフォルダが自動生成され、成果物ファイルが構築されます。

 

<!- index.html ->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>構築のテスト</title>
</head>
<body>
<header>
外部化したヘッダーパーツ
</header>

<main>
<p>テキストエリア</p>
</main>
<footer>
外部化したフッターパーツ
</footer>

</body>
</html>

 

-------------------------------------------

/*common.css*/
body {
margin: 0; }
body p {
margin: 0; }

 

画像も生成されていることを確認します。
元の画像とファイルサイズを比較してみてください。
HTMLのプレビューを下記URLから確認することができます。
http://localhost:8000/

gulp実行中は上記URLからプレビュー閲覧すると、HTML、CSSを変更したときにブラウザがリフレッシュされ、リアルタイムで更新確認できます。

 

まとめ

以上gulpの基本的な使い方を実務ベースで構築してみました。
HTMLの外部分割化、scssの自動コンパイル、画像の圧縮、変更のリアルタイムプレビューなどひとつひとつ見ると細かい部分ではありますが試行、プレビューは制作の際に何度も繰り返す処理です。
小さいことでも積み重なれば、時間と労力を大きく節約することができます。
また、これらの設定はほんの一部の機能に過ぎず、他にもカスタマイズ方法は多々あります。
今度はプロジェクトにjsファイルもインクルードした想定でより使いやすくカスタマイズしていけたらと思います。

参考サイト
HTMLバリデーション

https://www.npmjs.com/package/gulp-html-validator

画像圧縮

http://blog.tsumikiinc.com/article/20150226_gulp-imagemin.html

秋を感じさせるデザインのポイント

f:id:BOEL:20170919110134j:plain

 こんにちは。デザイナーの那須です。 9月に入り、秋を感じる涼しい日も増えました。 今回は、これから増えてくる「秋らしいデザイン」の要素を、実例と共にご紹介します。
※紹介する事例の引用元サイトは、季節性のあるキャンペーンサイトも含まれており、一定の期間を過ぎるとクローズする可能性がありますので、ご了承ください。


カラー

秋には、オレンジ・赤・黄色・茶色などの紅葉をイメージさせる色や、さつまいもの赤紫など秋が旬の食べ物を連想する色を用いたデザインをよく見かけます。深緑やマスタードなど、暗いトーンの色も多く見られますね。 ハーゲンダッツのサイトでは、かぼちゃの背景に深緑や暗い赤を使って秋らしさを強調しています。
また、PANTONEが2017年秋におすすめの10色を発表しました。いずれも落ち着いた素敵な色なので、デザインに取り入れてみてはいかがでしょうか。


参照:PANTONE Fashion Color Report, Fall 2017 

http://www.pantone.com/fashion-color-report-fall-2017

ハーゲンダッツ パンプキンプディング&パンプキン

http://www.haagen-dazs.co.jp/pumpkinpudding_pumpkin/

f:id:BOEL:20170919110214p:plain

 

モチーフ

紅葉や楓の葉を秋を代表するモチーフとして思い浮かべる人も多いのではないでしょうか。 他にもどんぐりやコスモス、りんご・栗・かぼちゃ・ぶどうなどの秋の食材、リス・鹿などの動物が、秋のモチーフとしてよく用いられています。

このKITTEの広告では、柿・きのこなどの秋の味覚のイラストが使われ、色合いも手伝って秋らしさが演出されています。 

KITTE 秋のメッセージフェスタ

http://jptower-kitte.jp/topics/413.html

f:id:BOEL:20170919110233j:plain

 

イベント

秋に催されるイベントに関連したデザインも、季節感を出すのに効果的です。 ほろ酔いのサイトは、ハロウィンをテーマにデザインがされています。 背景にかぼちゃやお城、コウモリのシルエットを入れて少し不気味な雰囲気を出しつ、季節感を表現しています。
サントリーほろよい ほろよいエリカのほろット占い

http://www.horoyoi-cp.com/horotto/?_ga=2.84744857.1896721724.1505358504-1728864343.1505358504&__utma=198440237.1728864343.1505358504.1505358504.1505358508.2&__utmb=198440237.16.7.1505376419305&__utmc=198440237&__utmx=-&__utmz=198440237.1505358504.1.1.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=(not%20provided)&__utmv=198440237.|25=FOID=RGAIztkf514SOWQvpS7lY4uH60c=1^26=FOSG=%2210323%22%2C%2212448%22%2C%2213095%22%2C%2230250%22%2C%2230293%22%2C%2247646%22%2C%2261855%22%2C%2263470%22%2C%2263482%22%2C%2263603%22%2C%2263648%22%2C%2263730%22%2C%2271121%22%2C%2298771%22%2C%2299056%22%2C%22165=1&__utmk=98355679

f:id:BOEL:20170919110251p:plain

 

日本文化

日本ならではの文化、お月見も秋を感じさせます。 マクドナルドの広告では、満月とうさぎ、ススキのモチーフを使って、秋の行事のお月見を表現しています。

マクドナルド 月見バーガー

http://www.mcdonalds.co.jp/campaign/tsukimi2017/

f:id:BOEL:20170919110440p:plain

 

テクスチャ

清涼感のあるデザインが多い夏とは反対に、表情のあるテクスチャでデザインに暖かみを出すことで、秋らしさを表現する方法もあります。

伊藤園のサイトでは、和紙風のテクスチャを背景に用い、紅葉のイラストと組み合わせて秋らしい暖かみを演出しています。

伊藤園「TEA SHOP ITOEN」 御予約限定まろやか熟成秋旬新茶

http://teashop.itoen.co.jp/shop/e/eyoyaku/

f:id:BOEL:20170919110532p:plain

 

加工・処理

文字・イラストの線を鉛筆やクレヨンで描いたような質感にすると、枯葉のカサカサした質感や秋らしい暖かみを出すのに効果的です。

「秋のグリーティング」切手は、手書き風の質感の文字や女の子のイラストが落ち葉などの柔らかなテイストと合わさって、秋らしさを感じるデザインになっています。

日本郵政 グリーティング切手「秋のグリーティング」の発行

https://www.post.japanpost.jp/kitte_hagaki/stamp/tokusyu/2017/h290823_t.html

f:id:BOEL:20170919110629j:plain

 

フォント

元気いっぱいなイメージの夏に比べ、秋は落ち着いた、大人っぽさを押し出した広告も多い気がします。フォントも、カジュアルなゴシック体より上品な印象の明朝体や筆文字を選ぶと、落ち着いた雰囲気になります。

キリン「秋味」のサイトでは、全体を通して明朝体を用いており、「おとなの秋」にふさわしい品のあるビジュアルになっています。

キリン 秋味な旅プレゼントキャンペーン

http://www.kirin.co.jp/products/beer/akiaji/campaign/index.html

f:id:BOEL:20170919110731p:plain

 

まとめ

いかがでしたでしょうか。 これから秋をテーマにした広告や商品などを見かける機会が増えると思います。 「これは秋らしいな」と思ったら、なにを見て秋を感じたのか、またその広告などには、どんな秋を感じさせる工夫がされているのか、考えてみると楽しいかもしれません。