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

大学入学の際に買った私用PCがもうだいぶ古くなって来ており、いつ突然死してもおかしくないなと怯えています。

ですが、現在趣味のイラスト制作はほぼすべてiPad版CLIP STUDIO PAINTを使っており、まれにロゴなどが必要になったときにイラレで制作する用途ぐらいにしか私用PCは使っていません。

正直ヘビーに使っているのはiPadだし、新しいPCを買うお金があるならiPadProの12インチのやつがほしいけど、PCが完全に死んでイラレが使えなくなるのも困る…

そんな葛藤をしていた折、そのうち出るらしいとうわさに聞いていたiPad版Illustratorがリリースされたので、試しに使ってみました。

タッチショートカット機能

起動して、最初になんだこれは？と思ったのが、左側に置かれている白い丸です。

これはタッチショートカットという名前だそうです。

特に説明や詳しいチュートリアルはありません。Adobeって感じですね。

さわってみると割とすぐに気が付きますが、この白い丸は、だいたいshiftキーとcommandキーの役割を持っています。

わかりやすい例を出すと、四角形を描画する際、長方形ツールを使うと縦横比自由な長方形が作成できますが、この白い丸を押しながら長方形ツールを使うと、はじめから縦横比が固定された正方形を作ることができます。

一回押すとshiftキー、押した状態で丸の外側に指を若干スライドさせるとcommandキーのような働きをするようです。

（どのツールでどんな働きをするかは、アプロケーション設定の「タッチショートカット機能をすべて表示」で確認できます）

PC版Illustratorを使ったことのある人なら、どのツールでどういう風にタッチショートカットを使えばいいかはすぐ理解出来ると思いました。

ただ、Illustratorを全く使ったことのない人だと、そもそもこの白い丸が何のために存在しているのか理解するのが慣れるまで少し大変そうだなと感じました。

また、この丸は好きな場所に移動させることができます。

私は左利きなので、空いた右手でこの機能を使うため、右側に設置しています。

下の方に置いたり上の方に置いたり、自分の使いやすい場所にこのボタンを設置できるのはかなり便利だなと思いました。

また、UNDO機能は二本指で画面タップ、REDO機能は三本指で画面をタップすると使用できました。

こちらも特に説明はありませんでしたが、CLIP STUDIO PAINTと同じだったのですぐ使うことができました。

タッチショートカット機能があれば左手デバイスなしでも十分使いやすいと感じました。

ツール

細かいですが何気に感動したのが、重ね順入れ替え機能です。

画面の狭さ的にレイヤーを常に表示させて置くのが難しいため、重ね順をレイヤーの方で気軽に入れ替えるのが難しいのですが、レイヤーを表示させずともかんたんに重ね順を入れ替える事ができます。

このバー上の丸を左端に一回動かすと、重ね順が一つ下がり、右端に動かすと一つ上がります。

（よく考えるとここのUIバー状にする必要あったのか…？とも思わないでもないですが…）

また、ロックや線幅変更、オブジェクト複製も各オブジェクトを選択してアイコンをタップするだけで簡単に使用できます。

私はPC版Illustratorでも最低限のもの以外はショートカットがなかなか覚えられず、特に重ね順変更などは毎回このへんだったかな？と勘でショートカットを押して最終的にレイヤーの方で動かしているので、アイコンを覚えたら使えるこちらのほうが使いやすくて助かります…

ブラシ機能

マウスで頑張って描くかペンタブを繋がないとほぼ使えなかったブラシ機能ですが、ApplePencilで直接描画できることにより、大幅に使いやすくなっています。

このようにクマの半分ぐらいを塗って一旦ペンを離しても…

続きを塗ると一つのオブジェクトになります。

これにより、かなり直感的に色面を作成することができるなと感じました。

総合的な所感

大体10分ぐらいで描いた絵

・PC版Illustratorよりも、お絵かきソフトとして直感的につかいやすくなっていると感じた

・左手デバイスはなくても全然使えそう

・ショートカット覚えられない人間はだいぶ助かる

・Illustrator初心者ならもしかしたらiPad版から入ったほうが早く使いこなせるようになるかもしれない

・スポイトツール押したときにアイコンの方も変化あってほしいなとか、画面右上のツールも設定で左側に移動させられたらいいのにとか細かい不便さはちょいちょいあるものの、致命的に不便なところは特に無いように感じた

正直iPad版Illustratorにはあまり期待していなかったのですが、私の期待度を大幅に超えて、なんならPC版より好きまであるなと思えるほどでした。

しばらく新しいPCは買わなくてよさそうです…

Tweet

<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-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

animation-duration

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

animation-duration: 1s;

animation-duration: 3s;

animation-timing-function

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

animation-delay

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

animation-iteration-count

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

animation-direction

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

animation-fill-mode

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

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

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

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

both
forwardsとbackwardsの両方適用

animation-play-state

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

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

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

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

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

Tweet

「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/

Tweet

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

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

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

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

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

水晶体の黄変

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

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

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

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

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

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

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

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

白内障

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

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

Tweet