カテゴリー: デザイン

【Figma】Config2023で気になった機能を紹介

6月22日にFigmaのイベント「#Config2023」で新機能が発表されました。

便利でワクワクする機能が多く発表されたので、その中でも個人的に気になった機能を紹介しようと思います。

相変わらず紹介動画もおしゃれ。

開発者モードの追加

コーディングやアプリ開発する際に、Figmaからスムーズに作業を移行できる「開発者モード」が追加されました。
https://www.figma.com/ja/blog/introducing-dev-mode/

個人的にはコーディングする際にcssを確認する際に使わせてもらっています。
また、VS Codeとの連携も拡張機能として登場したので、こちらも入れて利用しています。
FigmaとVS Codeとの行き来をしなくて良くなるのでとても便利です。
https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension

バリアブル(Beta)の追加

変数を利用したデザインを作成することができるようになります。
まだ利用できていませんが、紹介動画を見るとめちゃくちゃワクワクする機能でした。

色、数値、文字列などの変数を設定できるようになるので、ワンクリックでさまざまなパターンのデザインを作成することが可能になるようです。

変数を用意するのが少し大変そうですが、少しずつ取り入れていきたいと思います。

オートレイアウトの折り返しの追加

個人的に一番望んでいた機能が追加されました!
オートレイアウトで折り返しが指定できるようになりました。

また、フレームの最小・最大値も合わせて設定することでレスポンシブのイメージなども柔軟に対応できるようになります。

フォントのプレビュー表示

これは地味にありがたい機能追加でした。
今まではプラグインでプレビュー表示することしかできませんでしたが、標準機能として提供されるようになりました。
わりと使用頻度が高いのでストレスフリーになってよかったです。

さいごに

今回紹介した新機能は一部ですが、それでも作業効率がアップすること間違いなし!な機能が沢山リリースされました。

高度な機能も増えてきたので、日々手を動かしながら使いこなせるように頑張ろうと思います💪


改めて確認したい印刷の用語

Webデザインをメインにやってこられた方は、印刷物に苦手意識を持っている方も多いのではないでしょうか?私自身、紙での仕事は苦手意識が強くあります。

苦手意識の一つとして専門用語を曖昧にしているのも一つの要因かもしれません。
なので、ここで改めて確認しようと思います。

見開き

書籍や雑誌などのページものを開いた時に対になる、左右ページのこと。

タイトル(大見出し)

新聞・雑誌などで、目立つように大きな活字を用いた見出し。
章全体を総括した見出し。

リード文

本文に入るまえのタイトルの下、近くにある、本編へ「誘導する、リードする」ための文章のこと。

本文(ほんぶん・ほんもん)

本編、コンテンツの中心となる文章のこと。
文字の大きさは、大体11Q~13Qくらい。

キャプション

写真・図版に添えられた説明文のこと。
(8Q、9Qなどの小さいQ数)

級(Q)

文字の大きさを示す日本独自の単位のこと。
(1Q = 0.25mm。4Qで1mm)

歯(H)

歯とは、文字と文字の間隔(字送り)や行と行の間隔(行送り)のサイズを表す日本独自の単位のこと。
(1H = 0.25mm。4Hで1mm)

ノンブル

ページ番号のこと。

小見出し

本文を区切るために入れる、短めの文章。新聞・雑誌・書籍などで用いられる記事の先頭に本文とは異なった目立つ体裁で組まれた見出しのこと。

柱(ショルダー)

ページの上下の余白部分に印刷される書籍名、章節などの見出しのこと。
1章、2章、などの章立てや、記事のタイトルを小さめに入れる。

キャッチ(中見出し、たらし)

文字組みにおいて画像や本文の間に入れるアイキャッチ的な文字のこと。
コンテンツの内容をひきたたせる文章のこと。

天、地

「天」は誌面の上側をのこと。
「地」は下側のこと。

ノド

本・雑誌などの折り込まれている、内側のこと。

小口

「ノド」の反対方向、本の外側のこと。

版面(はんずら)

書籍などのページ紙面において、余白を除いた印刷面のこと。

マージン

天地左右の余白。印刷物の版面の周囲の余白のこと。


いかがでしたでしょうか。
以上、参考になれば幸いです。


Visual Studio Codeのユーザースニペットの使い方

Visual Studio Code(VS Code) を使う上で便利な機能の一つに「ユーザースニペット」というものがあります。
コードを書く上で同じ内容を書くことがよくあると思います。
よく使うコードは「ユーザースニペット」に登録しておくとコーディングが楽になります。

「ユーザースニペット」とは、コードをあらかじめスニペットに登録することでコードを簡単に呼び出せる機能です。

VS Codeの「基本設定」をクリックします。

ユーザースニペットを開きます。

特定の拡張子のみ適応させたい場合は、「css.json」などのファイル選択します。
「css、scss」両方に適応させたいなど、複数ファイルに適応させたいの場合は、「新しいグローバルスニペットファイル」を選択します。
(ここでは「新しいグローバルスニペットファイル」の方法を紹介しますが、特定の拡張子を選択した場合も同様です。)

ファイル名の入力を求められるので、わかりやすい名前を入力します。
今回は「global」と入力し「Enter」を押しました。

そうすると新しく「global.code-snippets」というファイルができるのでそこにスニペットを登録していきます。サンプルとして下記のような内容を登録します。

{
	"bg": { // スニペット名
		"scope": "css,scss", // 対象言語
		"prefix": "+bg", // スニペットを呼び出すための単語
		"body": [
			"background: url('') transparent top left / auto auto  no-repeat;", // 出力内容
		]
	},
}

保存後に、cssまたはscssファイルを開き、「+bg」と入力すると、候補が現れ、選択すると登録内容が出力されます。
複数登録する場合は下記のように続けます。

{
	"bg": {
		"scope": "css,scss",
		"prefix": "+bg",
		"body": [
			"background: url('') transparent top left / auto auto  no-repeat;",
		]
	},
	"@media": {
		"scope": "css,scss",
		"prefix": "+@media",
		"body": [
			"@media screen and (max-width: 900px){}",
		]
	},
}

下記のようにbodyの中に「$1」「$2」と書くと初期のカーソル位置を設定できます。
Tabキーを押すことで「$1」→「$2」の順に移動します。
${1:900}のように書くことであらかじめ、値を入力することもできます。

{
	"bg": {
		"scope": "css,scss",
		"prefix": "+bg",
		"body": [
			"background: url('$1') transparent top left / auto auto  no-repeat;",
		]
	},
	"@media": {
		"scope": "css,scss",
		"prefix": "+@media",
		"body": [
			"@media screen and (max-width: ${1:900}px){$2}",
		]
	},
}

今回はVS codeのスニペット機能について紹介しました。
コーディングの効率化の参考になれば幸いです!


文章の書き方の基本について考えた

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

弊社でデザイナーとして働いていると、何かの説明文を考えることが多くあります。

お客様にわかりやすい表現ってなんだろう…?とその業務のたびに考えます。

私は文章を読むことにも書くことにも、あまり苦手意識を持っていません。

最近文章の書き方について後輩に説明することがあり、その際、実際に自分がノリでやっていることを言葉で説明することの難しさを痛感しました。

なので、「わかりすい文章」というものについての自分の解釈をメモ代わりとして残しておきたいと思います。

骨が何か考える

文章は基本的に「誰」が「何をするか」がはっきりしていれば意味が通らないということはありません。

主語・述語というやつです。

学校の国語の授業と違って、仕事で読んだり書いたりする文章は、主語が省略されていることも多いです。

ちゃんと書かれた文章なら、主語が省略されていても誰がした行動についての文なのかが自然に理解できるはずです。

誰が何をしたのか、誰が何をすべきなのかが一発でわからないなら、それは上手な文章ではないと私は考えています。

主語も述語も書いているのに意味が通りにくいとしたら、余計な要素が邪魔をしている可能性があります。

入れたい要素を最初から全部入れようとすると失敗するので、まずは骨である「誰が何をしたのか」を組み立て、他の要素は補助であるという意識で文章を作るといいと思います。

骨を組み立てるためには、まず書き手である自分が「誰目線の文なのか」がきちんとわかっていることが大切だと思います。

誤解が無い文を心がける

私が文を書く際に心がけているスローガンが、「5歳に見せてもわかる文」です。

読み手が不特定多数のユーザーの場合、読み手の読解力というものに期待をしてはいけないと思っています。

馬鹿にしているというわけではなく、その人の経験や境遇、精神状態が読解力にダイレクトに響いてくるわけです。

読んだ人の100%が誤解をしない文を書くというのは不可能ですが、違った解釈をする人間をできる限り0に近づけることは頑張り次第で可能です。

「5歳に見せてもわかる文」というスローガンは、専門的なことは何も知らず理解力もあまりなく、難しくて長い文を読んだらすぐに飽きてしまう五歳の子供に見せたときにちゃんと最後まで読んでくれるかという、自分の文に対する問いかけのことです。

別の解釈の余地がある文を読んだ頭の中の五歳児は、多分私の想定の動きをしてくれないでしょう。

私が文句を言うと、だってそう書いてあったもん!!と泣きながら駄々をこねると思います。

自分が書いた文にはそういうクレームの余地が一ミリもないかと考えることが大切だと私は考えています。

音読してみる

実際に音読をしてみると、黙読だけではわからなかった違和感に気が付きます。

ただ文字をなぞるように読むのではなく、文を塊として、人に話すようなテンションで読むのがいいと思います。

短い文なら覚えてしまってから空で口に出してみるとよいです。

オフィスで思いっきり音読をすれば結構目立ってしまいますが、脳内で音読しながら口パクするだけならまぁ大丈夫でしょう。

私は完全テレワークなので、このブログを書いている今も、思い切り音読しながら書いています。

悪い文章を反面教師にする

良い文章は、読んだときに引っかかりがないので、無意識のうちにスルッと読めてしまいます。

しかし、読みにくい・意味がよくわからない他人が書いた文章は、ん…?と引っ掛かりを覚えたり、どういう意味なのか他人に聞かなければなかったりします。

そういう文に出会ったときに、何が余計で何が足りないのか、じっくり読み返して添削をしてみるといいと思います。

これが誰目線の話なのかわからないからなのか〜とか、この表現が邪魔なんだな〜とか、自分が書いた文よりも気がつくところが多くあると思います。

それをメモっておいて自分が書くときにも気をつけるようにするだけで、大きく違いが出ると思います。

最後に

文章の練習は、「人の振り見て我がふり直せ」が一番いいです。

一回で理解しきれない文章に出会ってしまった場合、自分の読解力が低いのではなく、十中八九相手の書き方せいだと悪いと私は思っています。

半分逆ギレですが、その時に、じゃあどんな文なら自分でも一発でわかるんだろう?と思考することが文章を書く能力の向上につながっていると思います。

日本人というのはは特に、「違和感のある日本語」に不信感を覚えやすい国民だと思います。

ふわっとした日本語を見て、このお店ほんとに大丈夫かなぁ…?と思ってしまった経験を持っているのは私だけではないはずです。

文章を、正しく誤解なく伝えることで、お客様からの信頼感を得たり、無駄なクレームを防いだりすることができます。

たかが言葉ですが、されど言葉という気持ちで向き合うのがいいと私は思います。


スケッチアプリ「コンセプト」のUIが面白い

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

普段私がイラストを制作するときは主にiPad版のCLIPSTUDIO PAINTとAdobe Illustratorを使用しているのですが、他に面白いペイント系アプリがないか(ブログのネタ作りのために)色々インストールして試したりしています。

(前回試したアプリの記事はこちら

今回は「コンセプト」というアプリをインストールしてみました。

すごくいいUIだなと感じたのが、インストールしてから最初にキャンバスを開いたとき、初期設定がこのような形で自動で開かれることです!

これのおかげで設定のボタンが右上のこの場所にあることがすぐに理解できるし、逆に「設定をすべて完了しなければアプリが使えない」ということもありません。

左利きの私としては、利き手の設定が初期設定の一番最初にあるのが優しいなと感動しました!

他のアプリだと利き手の設定はわざわざ環境設定を開かないといけなかったり、そもそも利き手の設定がある事自体気が付かないことも多いので。

ここから色を選べるようです。

すごい…

「コピック」という文字がある通り、色塗りマーカーであるコピックの色番号が各色に書かれています。

コピックを普段から使っている人だと、実際のコピックで塗った色をデシタルでも使いたい!デジタルで塗った色をコピックでも塗りたい!と思ったときに楽ですね。

ブラシはここから増やすことができます。

レビューを見た感じだと建築関係のお仕事の方がよくこのアプリを使用しているようでした。

そのためか、「外壁」という有料のブラシセットが…!

パステルやエアブラシ、漫画のトーンのようなセットもありました。

この中にあった「Memphis模様」という、パターンが入れられるブラシセットを購入してみました。

このようなかわいい模様がすぐに入れられるブラシが20種類入っていました!

柄物が好きなので、こういうブラシがあるのはとてもいいなと感じました。

設定はこんな感じ。

機能が多すぎないからこそだと思いますが、ボタンが大きくてシンプルでわかりやすい。

キャンバスの背景が変えられたりグリッドに種類があるのも便利でいいですね!

アートボードのサイズ無限って初めて見ました。

ちなみにCLIPSTUDIO PAINTの設定はこんな感じ。

機能の数が違うので仕方がないですが、コンセプトの設定画面がわかりやすいのがわかりますね。

まとめ

たくさんの色を使ったりブラシを使い分けたり…といった本格的なイラスト作品を作るというよりは、ある程度決まったツールやカラーパレットでデザインラフを作るというのに向いていそうだなと思いました!

CLIPSTUDIO PAINTやフォトショやイラレなどのUIに慣れきっているせいで少し癖がつよいなと思ってしまいましたが、設定ページなどはシンプルで基本的に親切なUIだと感じました。

普段から、管理画面の設定周りのUIのデザインがごちゃつきがちになってしまうことに頭を悩ませているので、このあたりは色々と学ぶことが多いなと思いました…!