WEBデザインでよく出てくる箇条書きは、Photoshopの段落スタイルで終わらせよう

Photoshop2015

こんにちは!YOUKNOWです。

よく箇条書きで文章を入れて下さいとお願いされることがあります。
なかなか綺麗な箇条書きって面倒だと思っていました。

でもよーくウェブサイトとか見てみると、注釈とかの所は箇条書きで書く所が意外と多いんですよね

例えばmeijiのここさけ&あの花のキャンペーンサイト。

箇条書き

ここの応募概要とか箇条書きで作られていますよね。
この箇条書き一つとってもデザイナーだと、ついつい凝ってしまいます。

箇条書き

2行目の文字の頭の位置が、右の方の文字はわざわざ1文字ズラされてますね。

こういったこまかーいこだわりを繰り返してるから時間が辛くなっていくのがデザイナーだと思います。
完全にマゾですね!

こんなのただ半角スペース入れるだけやろ!って思ってる方も多いと思うんですが…自分もそうでしたが..
こういった注釈の所、何度も修正が入るのでその度にスペースの位置を調整していたら時間がいくらあっても足りません。

そう、デザイナーのお仕事の大半は修正(血涙)

なので今回はPhotoshopでこの箇条書きを楽にする方法をご紹介します。

Photoshopで箇条書きをラクに制作する方法

箇条書き

上記の画像の左側テキストは、そのまますーっと文章をタイプしただけの状態です。
右側のテキストは、段落スタイルを使用して整えた状態です。

そう..つまり…段落スタイルを使おうってお話なのです。今回は。

ちなみに上記の画像の右側にはこのようなスタイルを適用しています。

箇条書き

段落スタイルは画像の右側の方です。
微調整は必要ですが、この設定で箇条書きはうまくいきます。

フォント等によっても変化しますので、その場合は設定を微調整して下さい。

箇条書き

  • A. 整列とジャスティフィケーション
  • B. 左インデント
  • C. 最初の行の左インデント
  • D. 段落前のスペース
  • E. ハイフネーション
  • F. 右インデント
  • G.段落後のスペース

文字・段落についての詳しい説明はこちら