カテゴリー: デザイン

Sass の便利な機能「@mixin」の使い方

Sass の便利な機能「@mixin」の使い方について紹介します。

基本的な書き方

基本的な書き方は下記のようになります。

@mixin title_abc($color: #333, $fontSize: 22px) {
  color: $color;
  font-size: $fontSize;
}

.title {
  @include title_abc();
}

.title_light {
  @include title_abc(#777, 20px);
}

「@mixin」で名前と変数、スタイルを定義して、「@include」で呼び出します。

そのまま使いたい場合は、「@include title_abc();」のように引数を渡さずに使い、変更したい場合は「@include title_abc(#777, 20px);」のように引数を渡します。

cssに展開したあとは下記のようになります。

.title {
  color: #333;
  font-size: 22px;
}

.title_light {
  color: #777;
  font-size: 20px;
}

メディアクエリを管理

まず、ブレイクポイントを変数で定義します。
変数で定義しておくことで、あとでの変更が簡単にできます。

$sm: "600px";
$md: "900px";
$lg: "1200px";

@mixinを定義します。
「@content」はスタイルセットを@mixinに渡す機能です。
@includeで書いた内容がこの場所に展開されます。

@mixin media-max($size) {
  @media screen and (max-width: $size) {
    @content;//展開される場所。この場合「.class {color:red}」
  }
}

「@include」で定義した、@mixinを呼び出します。
$lgのところは変数ではなく、「1000px」などのように書くと個別での対応もできます。

@include media-max($lg) { 
  .class {color:red}
}

今回は「$lg: “1200px”」なので下記のように展開されました。

@media screen and (max-width: 1200px) {
  .class {
    color: red;
  }
}

擬似要素で三角形を作る

三角形を作りたい時に用意しておくと便利な@mixinです。
ジェネレータを使わずに作成することができるので、用意しておくと便利です。

@mixin triangle($direction, $width, $height, $color){
  content:"";
  width: 0;
  height: 0;
  border-style: solid;
  display: inline-block;
  $widthNum: $width / 2;
  $heightNum: $height / 2;
  @if ($direction == top) {
    border-width: 0 $widthNum $height $widthNum;
    border-color: transparent transparent $color transparent;
  } @else if ($direction == left) {
    border-width: $heightNum $width $heightNum 0;
    border-color: transparent $color transparent transparent;
  } @else if ($direction == right) {
    border-width: $heightNum 0 $heightNum $width;
    border-color: transparent transparent transparent $color;
  } @else if ($direction == bottom) {
    border-width: $height $widthNum 0 $widthNum;
    border-color: $color transparent transparent transparent;
  }
}

.arrow::after {
  // top:上向き bottom:下向き right:右向き left:左向き
  @include triangle(right, 6px, 10px, blue);
}

展開されるcssは下記のようになります。

.arrow::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  display: inline-block;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent blue;
}

remを使用した文字サイズわかりやすくする

フォントサイズをremで指定するときに、1.5remと書くと思うのですが、パッとどれぐらいのサイズかイメージしずらいです。
そのためあらかじめ@mixinを用意しておくとイメージしやすくなります。

@mixin rem($size) {
  font-size: $size + px;
  font-size: ($size / 16) + rem;//既定値を16pxに設定した時
}

h1{
  @include rem(24)
}

p{
  @include rem(16)
}

展開されるcssは下記のようになります。

h1 {
  font-size: 24px;
  font-size: 1.5rem;
}

p {
  font-size: 16px;
  font-size: 1rem;
}

今回はSassの便利な機能「@mixin」の使い方を簡単に紹介しました!
何かの参考になれば幸いです。


iPad版Adobe Illustrator使ってみた

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

大学入学の際に買った私用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は買わなくてよさそうです…


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

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

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

認知特性テストをやった

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/