本文を中心とし左右を揃える流行デザイン。作り方やショートカットキーも解説

タイトルも本文も左右を揃えて整列

こんにちは、読むだけでデザインを学べる!デザイン研究所です!

フォローするだけでデザインを学べるTwitterアカウント
毎日デザインのポイントを解説するインスタアカウントを運営しております。

こちらのブログはインスタ投稿をより深く解説した記事になります!

 

今日のテーマ:全て左右揃える

2つのデザインサンプルを使って本文を中心とした左右を揃えたデザインの紹介。これらデザインは最近よくみる流行デザインでもあります。

デザインにはトレンドがあり、流行のデザインをキャッチできるとアイデアの引き出しは増えるのでチェックしていきましょう。

また左右揃えるの解説だけでなく作り方やショートカットの紹介などもしているので最後までご覧ください!

タイトルも本文も左右を揃えて整列させたデザインサンプル

タイトルも本文も左右を揃えて整列させたデザインサンプル

こちらが今回のデザインサンプルです。WEBデザインや広告デザインにも見られるデザインポイントです!

タイトルや本文は文字サイズが違いますが、左右を揃えています。

タイトルも本文も左右を揃えて整列させたデザイン解説

本文は全て同じサイズになってますが、一部の背景を赤くすることで本文の中でもポイントとなる部分を強調できています。

この形の文章を使うときはテキストボックスで入力するととても楽です。

またガイドを左右に引いてあげるとさらに整列させやすいですね。(作り方は次の章で解説しています)

こちらの記事ではさらに整列に関して詳しく解説しています!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

 

ちなみにワンポイント解説ですが、!マークや?マーク、また句読点などは変な余白が空きやすいので1文字間で詰めてあげると綺麗になります!

!マークや?マーク、句読点や「」や【】などは変な余白が空きやすいため字間を詰めてあげる

 

文字の左右を揃えるにはサイズ、字間を整える!

これを意識するだけでどんな文章の左右も揃えることができます。ただサイズを大きく小さくするのはなんとなくではなく優先順位に応じて変更してください。

こちらの記事では文字について詳しく解説しています。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

デザケン
素材は無料でダウンロードできる素晴らしき時代!!

 

左右が揃った文字デザインの効率の良い作り方を解説

こんな左右が揃った文章を見た事ないですか?

2つ目のサンプルです。このデザインもタイトルと本文の左右を揃えてみました。

ここからはこれら揃える作り方を解説していきます。

ちなみにこちらの記事もかなり似ています!また違った解説をしているのでご覧ください。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

イラレとフォトショで長い文章の左右の揃え方を解説

ここからはイラレとフォトショで長い文章の左右の揃え方を解説します!

ちなみに解説する操作はイラレもフォトショも同じになります。

こちらはテキストボックスを使っています。

テキストを入力するときはテキストツールでクリックすることによって文字を入力すると思いますが、

このようにテキストツールでボックスを作ってそこに文字を流し込んでいきます。

作り方はテキストツールで長方形を作るようにクリックしながらドラッグすると作ることができます!

このようにあとはテキストボックスで作った図形を変更すると、その変形に応じて文章の縦横比は崩れることなく改行されます!

ただ完璧に揃えることはできないので、文字の間隔を1文字ごとに調節してあげると綺麗になります。

これはイラレもフォトショも同じです。

 

デザ研
同じことをやろうとしてもイラレとフォトショでは同じ操作と違う操作があるので注意!

 

また左右を揃えるのにガイドも便利です。これは過去に作ったちょうどいい漫画があるのでこちらで解説させてください!

左右を揃えるためガイドをだすショートカットキー

この漫画にあるように、command(ctrl)+Rで定規を出して、出てきた定規から引っ張るとガイドができます!

このようにガイドを使って視覚的に揃えると良い感じです!

 

整列とは余白の捉え方。

揃えるということは整った余白を作るということです。

揃えるとは整った余白を作るということ

文字を揃えるという感覚も大事なのですが、それ以上に余白を作っているという感覚が大事になります!

今回のデザインでもタイトルと本文を揃えてはいるんですが、同時に左右の整った余白を作っているのです。

ガイドの表示非表示のショートカットキーは?▼
ガイドの表示と非表示のショートカットキーはcommand(ctrl)+ : になります!

 

もっと全て左右揃えるのポイントを使ったデザインが見たい方!

この記事で解説した全て左右揃えるのデザインをもっと見たい方は、、、

デザイン研究所が運営する学べるギャラリーサイト「managary」へどうぞ!

 

デザ研
クリックすると全て左右揃えるを使ったデザイン”だけ”が表示されます!

タイトルも本文も左右を揃えて整列させるデザインまとめ

いかがでしたでしょうか?

2つのサンプルで本文を中心とした左右を揃えた流行のデザインを紹介しました!使いどころは少ないかもしれませんが選択肢にあると良いかと!

このデザインをそのまま使うというよりかは整列させる=整った余白を作るという意識が大事です!!

もっと頻繁に使える文字に関してのデザインポイントはこちらの記事をどうぞ。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

・文字の左右を揃えるにはサイズ・字間を整える
・揃えるというのは整った余白を作るということ

 

 

この投稿をInstagramで見る

 

デザイン研究所(デザ研)(@designkenkyujo)がシェアした投稿

全国対応で短期で習得するグラフィックのデザインレッスンをやっております、詳しくはこちらをどうぞ。

>インスタでデザインを学ぶ

インスタでデザインを学ぶ

デザインの見る目を養うインスタアカウントを運営中!初心者から脱するデザインのポイントを解説しています。だいたい毎日更新です!

CTR IMG