カテゴリー: デザイン

Adobe Auditionを使って音源を伸ばす方法

動画を作成するときにBGMが必要なときがありますよね?フリーの素材で見つけた使いたいそのBGMが短ときはないでしょうか?そんなときはAdobe Auditionを使うと便利です。Adobe Auditionの使い方を紹介します。

動画を作成するときにBGMが必要なときがありますよね?
フリーの素材で見つけた使いたいそのBGMが短ときはないでしょうか?

そんなときはAdobe Auditionを使うと便利です。

Adobe Auditionを使うと簡単に音楽を伸ばすことができます。

音楽をループさせる方法

①音楽ファイルを開き、ファイルパネルで音源を選択して右クリックします。
「マルチトラックに挿入 > 新規マルチトラックセッション」をクリックします。

②「セッション名」や「フォルダーの場所」などを任意のものに設定しOKをクリックします。

③音源がマルチトラックになったので、その音源が選択された状態でエッセンシャルサウンドパネルから「ミュージック」を選択します。

④「デュレーション」にチェックを入れます。
保管方法を「リミックス」を選択し、「ターゲット」に必要な音源の長さを入力します。

⑤そうすると音源が自動で長くなり保管されます。白い波線部分が自動で調整された部分になります。

⑥後はお好きな方法で書き出すだけです。

いかがでしょうか?
やってみるまではややこしそうと思っていたのですが、試してみると意外と簡単にできました。
動画が必要な機会があったときにこの記事を思い出してAdobe Auditionを使ってみてください。

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

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

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

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

音読してみる

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

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

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

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

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

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

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

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

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

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

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

最後に

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

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

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

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

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

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

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