こんにちは、読むだけでデザインを学べる!デザイン研究所です!
フォローするだけでデザインを学べるTwitterアカウントと
毎日デザインのポイントを解説するインスタアカウントを運営しております。
こちらのブログはインスタ投稿をより深く解説した記事になります!
2つのデザインサンプルを使って本文を中心とした左右を揃えたデザインの紹介。これらデザインは最近よくみる流行デザインでもあります。
デザインにはトレンドがあり、流行のデザインをキャッチできるとアイデアの引き出しは増えるのでチェックしていきましょう。
また左右揃えるの解説だけでなく作り方やショートカットの紹介などもしているので最後までご覧ください!
こちらの記事はクールなデザインまとめ記事にも含まれています!
こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 今回の記事ではそんなデザインをクールにするテクニッ[…]
タイトルも本文も左右を揃えて整列させたデザインサンプル
こちらが今回のデザインサンプルです。WEBデザインや広告デザインにも見られるデザインポイントです!
タイトルや本文は文字サイズが違いますが、左右を揃えています。
本文は全て同じサイズになってますが、一部の背景を赤くすることで本文の中でもポイントとなる部分を強調できています。
この形の文章を使うときはテキストボックスで入力するととても楽です。
またガイドを左右に引いてあげるとさらに整列させやすいですね。(作り方は次の章で解説しています)
こちらの記事ではさらに整列に関して詳しく解説しています!
こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]
ちなみにワンポイント解説ですが、!マークや?マーク、また句読点などは変な余白が空きやすいので1文字間で詰めてあげると綺麗になります!
文字の左右を揃えるにはサイズ、字間を整える!
これを意識するだけでどんな文章の左右も揃えることができます。ただサイズを大きく小さくするのはなんとなくではなく優先順位に応じて変更してください。
こちらの記事では文字について詳しく解説しています。
こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
左右が揃った文字デザインの効率の良い作り方を解説
2つ目のサンプルです。このデザインもタイトルと本文の左右を揃えてみました。
ここからはこれら揃える作り方を解説していきます。
ちなみにこちらの記事もかなり似ています!また違った解説をしているのでご覧ください。
こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
イラレとフォトショで長い文章の左右の揃え方を解説
ここからはイラレとフォトショで長い文章の左右の揃え方を解説します!
ちなみに解説する操作はイラレもフォトショも同じになります。
こちらはテキストボックスを使っています。
テキストを入力するときはテキストツールでクリックすることによって文字を入力すると思いますが、
このようにテキストツールでボックスを作ってそこに文字を流し込んでいきます。
作り方はテキストツールで長方形を作るようにクリックしながらドラッグすると作ることができます!
このようにあとはテキストボックスで作った図形を変更すると、その変形に応じて文章の縦横比は崩れることなく改行されます!
ただ完璧に揃えることはできないので、文字の間隔を1文字ごとに調節してあげると綺麗になります。
これはイラレもフォトショも同じです。
また左右を揃えるのにガイドも便利です。これは過去に作ったちょうどいい漫画があるのでこちらで解説させてください!
この漫画にあるように、command(ctrl)+Rで定規を出して、出てきた定規から引っ張るとガイドができます!
このようにガイドを使って視覚的に揃えると良い感じです!
整列とは余白の捉え方。
揃えるということは整った余白を作るということです。
文字を揃えるという感覚も大事なのですが、それ以上に余白を作っているという感覚が大事になります!
今回のデザインでもタイトルと本文を揃えてはいるんですが、同時に左右の整った余白を作っているのです。
ガイドの表示と非表示のショートカットキーはcommand(ctrl)+ : になります!
もっと全て左右揃えるのポイントを使ったデザインが見たい方!
この記事で解説した全て左右揃えるのデザインをもっと見たい方は、、、
デザイン研究所が運営する学べるギャラリーサイト「managary」へどうぞ!
タイトルも本文も左右を揃えて整列させるデザインまとめ
いかがでしたでしょうか?
2つのサンプルで本文を中心とした左右を揃えた流行のデザインを紹介しました!使いどころは少ないかもしれませんが選択肢にあると良いかと!
このデザインをそのまま使うというよりかは整列させる=整った余白を作るという意識が大事です!!
ちなみに今回の整列のようなデザインにおける基本の理論を学びたい方は、、、
デザイナーズブックが必読ですのでぜひ買ってみてください!自分はこれでめっちゃ変わりました。
またはこちらの本でも分かりやすく解説してあります。どちらも本当におすすめです!
こちらの記事はWEBデザインまとめ記事にも含まれています!WEBで使える32種類のテクニックをまとめました!
こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 WEBデザインには色々なテクニックが散りばめられて[…]
・揃えるというのは整った余白を作るということ
この投稿をInstagramで見る
全国対応で短期で習得するグラフィックのデザインレッスンをやっております、詳しくはこちらをどうぞ。