カテゴリー: デザイン

自分と他人の認知特性について

こんにちは、デザイナーのはなです。

最近小さい鳥を飼い始めました。かわいいです。

認知特性テストをやった

https://overpass.dokkoisho.com/cognitive/

こちらの本田35式認知テストというものが少し前に流行っていたので、やってみました。

写真(カメラアイ)タイプ 写真のように二次元で思考するタイプ

三次元映像タイプ 空間や時間軸を使って三次元で考えるタイプ

言語映像タイプ 文字や文章を映像化してから思考するタイプ

言語抽象タイプ 文字や文章を図式化してから思考するタイプ

聴覚言語タイプ 文字や文章を耳から入れる音として情報処理するタイプ

聴覚&音タイプ 音色や音階といった音楽的イメージを脳に入力するタイプ


カメラアイと聴覚&音の間が断崖絶壁みたいになっている…

聴覚に関する項目の点数が著しく低い、つまり音声での情報効率がもうむちゃくちゃ悪いということになります。

そう考えると、電話しながらTwitterを見ると、友達との会話の内容がわからなくなることもこれが原因だと言えます。

私の場合、情報入力(視覚)と情報入力(聴覚)を戦わせると、視覚からの情報が必ず勝ってしまうということです。

自分が聴覚情報の処理が苦手であるということは昔から正直若干自覚があったため、授業などで板書少なめで喋りまくる先生の授業では聞くのを途中で諦めて、要点の単語のみメモし、あとから教科書や資料集やネットなどで調べて自分の目で見たものを情報として補完していたこともありました。

また、私の学生時代のノートは、落書きもイラスト図解もめちゃくちゃ多いため、絵だらけでした。

それはあんまり今も変わってないですね。(ミーティング中のメモが絵だらけな人)

他人の認知特性をふわっと推し量る

他の人になにかの情報を渡したり、好きなものをおすすめしたりするときに、相手の認知特性がなんとなくわかっていると何かと便利です。

例えばですが、私の友人の一人に、一緒に映画を見に行ったあと「あのシーンよかったよね〜」など感想を話すとき、必ず「あのセリフの表現が…」と、文章としての表現について話す人がいます。

私が映画の感想を話すときは、印象的なシーンの構図や、光の当たり方などについて思い返すことが多いので、おそらく私と認知特性が違うんだろうな、と解るわけです。

なので理解してほしい事があるときは、文章で説明してくれているサイトを探してきたり、少し長文になったとしても文章で説明するように心がけています。

何かの記憶について話したり、何かを説明してもらったりしたときに、その人の得意な情報処理方法が滲んで出ていると感じることが多いです。

もちろん全然わからないときも同じぐらい多いので、その時は相手の顔色を見つつ、わかってなさそうなら説明方法を変え、色々試して結果的に同じことを3,4回繰り返して説明するようにしています。

また、なんとなく推し量った相手の認知特性は、絶対そうだ!ではなく、あくまでもなんとなく、もしかしたらそうかもな〜ぐらいの認識でいることが一番大切です。

まとめ

優位特性についてテストしてみて思ったことは、自分のパラメータで突出している部分や陥没している部分があるように、他人にだってそういう部分があるんだろうなということです。

私の聴覚&音が1点であるように、視覚が1点の人だってもちろんいるわけです。

私が、音声だけでばーっとたくさんの情報を渡されたときにほとんど理解できなくて涙目になることがあるように、私がわかりやすいからと言って絵や図だけで情報を渡してしまうと、理解できなくて涙目になる人がかならずどこかに存在しているわけです。

自分がわかりやすいからといって、他の人もわかりやすいとは限らないということは、デザイナーという職業だからこそ特に気をつけなければいけないことだな、と痛感しました。

また、聴覚情報しか用意されていない場合でも、少しでも多く情報を理解できるように、例えば目を閉じて視覚情報をシャットダウンしたり、グラフィックレコードのようなことをしてみたり、ゆっくり話してもらうようにお願いしてみたり…など、工夫する必要があるなと思いました。

https://blog.splout.co.jp/33/

優位特性についてはこちらの記事でも触れられています。


CSS animationを使ってみよう!

css animationについて、あまり使う機会はありませんよね?
あったとしても、ローディングなどごく一部でしか使わないので、下記の参考サイトなどからコピーや微調整して使うことは多いのではないでしょうか?
codepen
 
今回は、css animation の基本的なところを改めて確認しようと思います。
まずはシンプルに円を作成します。
<div class="circle"></div>
.circle {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background: #2196F3;
}
  
その円をゆっくり移動しましょう。
まずはキーフレームの作成から始めます。
@keyframes example {
  0% {
    transform:translateX(0);
  }

  100% {
    transform:translateX(200);
  }
}
キーフレームを作成しただけではまだ動きません。
次ように円が表示されたと思います。

 
最後に.circleにanimationのプロパティを追加します。
.circle {  
  animation-name: example;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
  animation-play-state: running;
}

次のように円がアニメーションしたと思います。

 

各animationプロパティについて

animation-name

要素にキーフレームアニメーションを適用するアニメーション名を指定します。
(今回は「example」です。)

animation-duration

アニメーション一回分の時間の長さを指定します。

animation-duration: 1s;



animation-duration: 3s;

animation-timing-function

アニメーションの動きの加減速(イージング)を設定します。
キーワード「ease-out」やcubic-bezierなどで指定します。
animation-timing-function: ease-out;



animation-timing-function: steps(3, end);



animation-timing-function: cubic-bezier(0.86, 0, .07, 1);



easingsについては下記が参考になると思います。
https://easings.net/ja

animation-delay

アニメーションの開始を遅らせる時間を指定します。

animation-delay:0;
Start
animation-delay:1s;(1秒後開始されます)
Start

animation-iteration-count

停止するまでにアニメーション周期が再生される回数を指定します

animation-count:infinite; (無制限に繰り返されます)
Start
animation-iteration-count:3; (3回繰り返されます)
Start

animation-direction

アニメーション再生の方向をしていします。

animation-direction:normal;(周期ごとに初回に戻ります)
Start
animation-direction:reverse;(逆方向に開始され、周期ごとに初回に戻ります)
Start
animation-direction:alternate;(毎回反転させます。初回は順方向になります。)
Start
animation-direction:alternate-reverse;(毎回反転させます。初回は逆方向になります。)
Start

animation-fill-mode

実行の前後にどう対象にスタイルを適用するかを設定します。

none
適用されているcssの初期値

forwards
最後の適切なキーフレームで定義された値を対象に適用されると同時に適用

backwards
最初の適切なキーフレームで定義された値を対象に適用されると同時に適用

both
forwardsとbackwardsの両方適用

animation-play-state

アニメーションが実行中か停止中かを設定します。

running
アニメーションが現在実行中になります

paused
アニメーションが現在停止します。

以上がCSS animationの基本的な使い方です!
このように分けて考えるとわかりやすのではないでしょうか?

次回はさらに詳しい内容をお伝えできればと思います。


スタイルガイドをFractalで作ってみよう!

「Fractal」とはスタイルガイドジェネレーターの一種です。複数人でwebサイトを作る際に一貫性を持ってデザインやコーディングができるようにまとめたものです。
スタイルガイドにはこの他に「sc5-styleguide」「Storybook」などがあります。

今回はFractalを使ってスタイルガイドを作成してみます。
すぐにデモを作成することができるので、比較的、簡単に導入ができるかと思います。


まずは任意の箇所にディレクトリを作成します。

mkdir fractal_test

作成したディレクトリに移動します。

cd fractal_test

プロジェクトを開始するためpackage.jsonを作成します。
「package name」などと聞かれますが、自由に入力して大丈夫です。

npm init

プロジェクトにFractalをインストールします。

npm install --save @frctl/fractal

グローバルにFractalCLIツールをインストールします。

npm i -g @frctl/fractal

Fractalのセットアップをします。
質問に答えていくと「fractal_test_01(または回答したプロジェクトタイトル名)」が表示されると思います。

fractal new fractal_test_01

「fractal_test_01」に移動し、Fractalを起動します。

cd fractal_test01/
fractal start --sync

「Fractal web UI server is running!」と表示されるので、Local URLをブラウザで表示します。

Local URL: http://localhost:3000

以下の画像のようにスタイルガイドが表示されたと思います。

これでスタイルガイドの準備ができました。
それでは、ボタンのコンポーネントを登録していきます。

「components」ディレクトリ内に「btn」ディレクトリを作成し、その中に「btn_default.hbs」を作成します。

「btn_default.hbs」の中に次のコードを記載します。

<a href="#" class="btn btn_default">Default</a>

左メニューが追加されたと思います。
btn
└Btn Default

同様に「btn_primary.hbs」「btn_success.hbs」を作成します。

btn_primary.hbs

<a href="#" class="btn btn_primary">Primary</a>

btn_success.hbs

<a href="#" class="btn btn_success">Primary</a>

同様に左メニューが追加されたと思います。
このままでは、cssが適用されてませんので、componentsディレクトリに「_preview.hbs」を作成し次のコードをコピーします。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link media="all" rel="stylesheet" href="{{ path '/css/style.css' }}">
<title>Preview Layout</title>
</head>
<body>
{{{ yield }}}
</body>
</html>

その後、「public」ディレクトリの中に「/css/style.css」を作成し、cssを記載します。

すると、スタイルが適用されたと思います。

これがFractalの基本的な使い方となります。
さらに便利な使い方がわかりましたら改めて記事にしようと思います。

公式ガイド
https://fractal.build/guide/


未来の自分のためのユニバーサルカラーデザイン

こんにちは、3年目デザイナーのはなです。

このブログで度々ユニバーサルカラーについての記事を書いていますが、今回はその中でも加齢に伴うの色の見え方の変化について書きたいと思います。

(前に書いたやつ:https://blog.splout.co.jp/2790/ https://blog.splout.co.jp/5932/

生きている限り加齢は誰でも避けられません。

つまり、高齢者に配慮したデザインづくりは回り回って未来の自分のために役に立つということですね。

水晶体の黄変

水晶体は人間の眼のレンズの部分です。

例えば、透明なスマホケースなどを使用していると、時間が立つにつれてだんだん黄ばんできますよね。

それと同じことが人間の眼でも起こります。

水晶体が黄ばんでくると、薄い黄色と白の判別がつきにくくなったり深緑のような暗い色と黒色の判別がつきにくくなります

感覚としては、黄色がかったサングラスで世界を見ている感じに近くなります。

黒地に紫の文字や、白地に黄色の文字などは避けたほうが良いでしょう。

この組み合わせは高齢者以外でもとても見分けづらいのでやらないのが無難です!

装飾としてなら使用しても大丈夫です。

白内障

歳を取ると白内障になりやすくなります。

白内障の原因には疾患や薬の影響、外傷などがありますが、最も多いのが加齢です。

白内障の発症率は、60歳代で66~83%、70歳代で84~97%、80歳以上ではほぼ100%と言われています。

長生きするならほぼ避けられないということですね。

白内障は水晶体が白く濁ってくる病気です。

水晶体が濁ってくると、光に対して眩しさを感じやすくなります

つまり、画面が明るい状態で真っ白なページを見たときに不快感を感じやすくなるということです。

高齢者がよく見る可能性のあるサイトなどは、背景に薄いグレーを敷くなどするとよいかもしれません。

ただ、文字色とのコントラストもしっかり確保しないといけないので、本当にうっすらぐらいが良いと思います。

また、背景色が暗いページから明るいページにいきなりパッと変わる、というのも避けたほうが良いでしょう。

まとめ

私は、この世のすべてのデザインにユニバーサルカラーがいつも必ず意識されている必要はないと考えています。

若い人向けに作られたページであれば、多少高齢者への配慮がなくても大丈夫だと思います。

ただ、ターゲティングを行ったときに、高齢者の人が含まれる可能性があるなら配慮が必要です。

業務での使用が義務付けられているツール」「不特定多数の人が見る情報の掲示」などには気を使ったほうが、より優しい世界になると思います。

ユニバーサルカラーというものが意識され始めたのはわりと最近の話ですが、未来ではもっとポピュラーな概念になっていると思います。

そういう未来になるように、私も微力ながら頑張っていきたいです!


画像最適化、してますか?


こんにちは。デザイナーのMです。

突然ですが、皆さんは画像最適化してますか?(唐突
私はしています。

弊社ではサイトの制作などをさせて頂く機会が多々ありまして、制作の最終段階であるサーバーアップの前に、サイト内で使用する画像を圧縮して最適化するというフローがあります。

Webサイトのスマホ閲覧の割合がPCと半々、場合によってはPCの閲覧比率を超えることも珍しくなくなってきたので、通信容量(いわゆる”ギガ”)を少なくして、サイトを高速に表示させることが必須となっています📱

そこで今回は、普段使用している画像最適化ツールを紹介したいと思います。

TinyPng


https://tinypng.com/

「パンダのやつ」と僕は呼んでいます🐼
けっこう昔からあるので、かなり有名なオンライン画像圧縮ツールだと思います。
サイトを見て頂く通り、パンダが画像を圧縮してくれます。
Chromeのブックマークバーに突っ込んでるので、ブラウザ上からサクッと圧縮できる手軽さが便利です。
一気に20枚、または上限5MBまでの画像ファイル(jpg/png)を圧縮可能です。
gifよりきれいなアニメーションができる、Animated PNG(APNG)にも対応しています。
ページの下の方でパンダがぬるぬる手を振っていますね👋

対応ファイル形式:jpg / png / APNG

jpeg.io


https://www.jpeg.io/

こちらのサービスは、単純に画像を圧縮するというわけではないのですが、様々な形式の拡張子のファイルを一括でjpgに変換して最適化してくれるツールです。
png形式の画像はjpg形式に比べてファイルサイズが大きくなることがあるので、こちらを利用してjpgに変換することにより容量の削減になることもあります。特に写真を利用している素材とかですね📷
他にもpsdでワイヤーやカンプを作成して画像として書き出す際にも、こちらを使えばpsdからそのままjpgを作成してくれるので便利です。

対応ファイル形式:jpg / png / gif / svg / bmp / eps / psd / tiff / WebP

Squoosh


https://squoosh.app/

Googleが開発したオンライン画像圧縮ツールです。
サイトにアクセスして、画像をドラッグ&ドロップするとプレビュー編集画面に遷移します。
この画面上で画質や圧縮形式などを設定することができます。
また、画面の左右で圧縮前と圧縮後のプレビューを見比べることもできるので保存後のイメージを目で確認しながら調整することができます。めっちゃ便利👀
ただ、現状では画像1枚ずつしか編集することができないので、一括で圧縮をしたい場合には向いていません🙅‍♂️
私の場合は、画質を極力落とさずに綺麗な見た目のまま写真の容量を圧縮したいときなどのシビアな圧縮条件が求められる場合に利用することが多いです(あまりないですがw
ちなみにリサイズも同時にできるので、さらに容量圧縮したい場合などにも使えます。

対応ファイル形式 : jpg / JPEG2000 / mozjpeg / png / gif / pdf / bmp / tiff / WebP

ImageOptim(Mac向けアプリ)


https://imageoptim.com/

ImageOptimは、Mac向けの画像圧縮専用アプリです。
ブラウザからいつでも圧縮はできませんが、いつも利用しているPCにインストールしておけばすぐに使うことができます。
私はいつもこのアプリを使って画像を最適化することが多いです。
アプリをインストールして、Finderで画像を右クリックすると「ImageOptimize」という項目が表示されます。
その項目をクリックすると自動でアプリが起動して、画像最適化を開始してくれます。便利!
容量制限なしで、複数選択もできるのでバシバシ使用することができます🤘

ファイル形式:jpg / png / gif

ReSizer(iOSアプリ)


https://apps.apple.com/jp/app/jp/id1388705112

弊社が開発したiOS向けの画像リサイズアプリです。
直感的なUIで画像を好きなサイズにリサイズ、画質を選択することで容量も最適化することができます。
カメラロールからの一括選択にも対応。画像に関するExif情報の確認や削除もこのアプリからできます。
スマホからブログを書く際や、ストレージの容量を確保したいときなどに大変重宝するアプリなのでぜひ一度インストールしてみてください✨



ぜひ今回ご紹介したツールを利用して画像の最適化をしてみましょう!
楽しく快適なインターネットライフを🥺