WEB制作

WEB制作

Photoshopの文字間を調整する時の不思議「文字間を調整」という機能

Photoshopを使うようになってウン十年(いや20年くらい)と経つが、よく使う機能の割りに未だに不可解なのが、文字というかテキスト周りの調整。

具体的には、バナーを作ったり、画像に文字をそれなりの量を打ったりする時に、文字間に妙な違和感が出る場合がある。

Photoshopはフォトレタッチ系の作業はもちろん、プロのデザイナーが使う業務用のデファクトスタンダードなデザインツールなので、WordとかPowerPointとかより文字周りがショボイなんてこと有り得ないのだが、意外と文字周りの設定はややこしかったりする。

文字間を調整するには基本的に「トラッキング」

Photoshopの文字パネルには、何やら文字を調整するためのパラメーターが色々ある。文字間を調整するには調整したい文字列を選択した状態で、VAと書かれた「トラッキング」の値を調整する。

あくまで文字間(文字と文字の左右の隙間)を調整するので、行間(複数行の時の上下の隙間)を調整するには、VAの上にある「A」が上下に並んでいる所を使う。

トラッキングの罠!? どうやっても違和感が消えない場合がある

基本的にWordとかパワポで作るビジネス資料と違って、デザイン物というのは1ミリとか1ピクセルとかの非常に繊細な調整が重要になる場合が時としてある。プロの仕事の場合は、むしろそれが普通だ。

しかし、Photoshopというソフトは根本的問題としてアメリカのソフトのため、日本語の処理はそんなに得意ではない。あまりIllustratorやInDesignなどのDTP向けソフトを詳しく知らないけども、おそらくそれらのソフトよりPhotoshopの文字周りの処理はショボいはず。

下記のAdobe公式の解説を見てもトラッキングは日本語にも使えるけども、通常は英文向け・・・みたいな、お茶を濁した感じの説明となっている。そういったこともあり、Photoshopの日本語処理は違和感が出るものだと諦めていた。

試す価値あり、「文字間を調整」のオン/オフ

実をいうと、文字パネルにこのオプションがあるのは認識していなかった。

Adobe公式の解説を見るとバッチリ解説されているものの、どういった処理をしているという細かなことまでは説明されていない。だから、どういった理由かよくわからないが、オンにするとPhotoshopが自動的に何らかの基準で文字幅を調整してくれる。

標準では自動的にオンになっているが、特に小さめの文字サイズの場合はオフにした方が文字間のバランスが良い場合がある。

Photoshopで日本語の文字をデザインに組み込む時に、文字間が「どうもしっくりこないなぁ~」という時は、まずはこの設定を試してみよう。

最終手段はカーニングとかでチマチマ調整する

本文みたいな文字量だと無理だが、見出しやバナーなど文字量が少ない時は、トラッキングの左にあるV/Aという機能を使う。これはカーニングと言う機能で、隣り合った2文字の隙間を調整する。

チマチマした職人みたいな作業だが、文字量が少ない場合はこれを使って体育会的に直す方法になる。

どちらにしろ、Photoshopの日本語周りの機能はそれほど優秀ではないと思って良いだろう。かといって、Photoshopより優秀なバナーやWeb用画像を作るツールは存在しないのだが。

文字パネルのオプションも注意

Photoshopの文字パネルの右上あたりに、横線が並んだハンバーガーメニューのようなものがあるが、そこをクリックするとオプションが多量に出てくる。

タブが「文字」の時と「段落」の時でも出てくるオプションは違う。

この記事での検証のために初めて見た気がするが「段落」タブのオプションには「日本語基準の行送り」や「欧米基準の行送り」という重要そうなものがあった。この選択によって複数行のデザイン具合が大きく変わることから、重要なものなのだろう(焦)

それ以外にも「東アジアの言語」というのをチェック入れると、Illustratorとかみたいに禁則処理が使えたりする。禁則処理は「、」とか「。」だとか変な所で改行されるのを防いだりするDTP系ソフトでは一般的な機能。PhotoshopでLP的な長文をデザインに組み込んだりする場合は必須の機能だろう。

追伸:ここに書いてある方法より、もっと良いやり方や、根本解決できるような知識のある方がいたら、こっそり教えて下さい。紹介させて頂く?かもしれません。

WEB制作

Webデザインのスマホ実機検証に挑戦!! iPhone & Macは超簡単、Androidは難しい

Webデザインをやっているお友達のみんな! スマホサイトのデザイン検証ってサクサクやれているかな?

きっと、面倒臭いからChromeのF12(Windowsの場合)押してデベロッパーツールとか使ってるよね。実際、それで大体の場合は事足りるけど、たまにPCのシミュレートとスマホ実機ではデザインの解釈が違う時があって、本番環境に上げて公開してから、後で細かくみたら変な隙間ができていて、焦った経験も1度や2度あるんじゃないかな?

使ってるPCとかスマホの種類とかによるけど、実はiPhone & Macの組み合わせだと、ほぼUSBケーブルで繋ぐだけで、あっさりPCサイトみたいにデベロッパーツールで検証することができるんだ。

できる気はしたけど、つい最近まで試したことがなかったもんだから、メモがてらに紹介するよ。メモ書き程度だから、詳細な手順を知りたい人は、もっと詳しい人のサイトでも調べてね。

iPhone & Macの場合

これは驚くほど超簡単。機種とかバージョンにもよるだろうけど、ここ数年の機種なら大体できるはず。

基本、iPhoneとMacをUSBケーブルで繋いで、MacのSafariの開発メニューからデベロッパーツールを表示するだけ。それでiPoneのSafariで開いているページを検証できるようなメニューが出るから、あとはいつもデベロッパーツールでいじっている感じで検証できる。

簡単に文字とかもリアルタイムに差し替えできるから、こういうときだけ、Appleのパッケージングはすげえなと思うよ。普段はカスタマイズしづらくてガラケーなんだけどね、iPhomeって。多分、iPadもできるんじゃないかな。

Androidの場合

Androidはメーカーというか端末ごとにカスタマイズされていて、検証とか一般人が使わない部分はダークゾーンになっている場合がある。

古いものなど機種によっては、ある部分を7回タップするとか、Huaweiの端末は隠しコマンドみたいな電話番号を打ち込むとかしないとならない。他のエンジニアとかのページでは超簡単とか言ってる場合があるが、超難しい場合もあるから、どうしてもやる必要がなければ諦めた方がコスパいい場合もあると思うよ。

うまくいく機種であれば、WindowsやMacのChromeから、AndoidスマホのChromeで表示しているページを検証できる。これもPC側のChromeに隠しコマンドみたいなURLを打ち込む必要があるから、ちょっとややこしいな。機種によっては挙動がおかしかったりするし。

Huaweiの端末とかだと、メーカーのHisuiteとかいう専用のファイラーアプリをインストールしないと使えない模様。PC側のChromeがスマホとやりとりするのに、機種ごとのドライバーがいるみたいなんだ。オプション項目とかもちょっとややこしいね。

Webデザイナーの場合はガチの実機検証はそれほど必要ないかもしれないけど、いざという時にそういう方法もあるんだと知っているのは心強いよね。

WEB制作

「素人ラフ」から格好いいLPを作ることなどできるのかという愚問

「素人ラフ」を渡されたら本能的に逃げたくなる・・・

これは最近思ったテーマ。どういう状況かというと詳細には伝えられないのがアレだが、世の中には様々な組織で様々な方法でLPなどのデザインが作られるという前提がある。

おそらくデザイン会社やWeb制作会社では、きちんとした経験のあるディレクターなりデザイナーがクライアントからヒアリングして、それなりのレベルのラフが作られるのだと思う。世の中的には、こういう作られ方が多いのではないかと思う。

ラフの出来が悪ければ先輩なり、上司なりがサポートしたり、あるいは強引に制作が進められて、後で思ったように完成できなくてグダグダになる。

言葉のとおり「ラフ」に作ってはダメ

ラフというのは「粗い、大雑把な様子を表す、英語の形容詞(wikipedia)」だそうだが、ディレクターとか編集者とか職種を問わず、ベテランが作るラフと素人みたいな人が作るラフには泥沼の差がある。

ベテランというかプロが作るラフは例え手書きで一見「ラフ」に作られていたとしても完成形がイメージされているので、実際に制作に入った時に破綻することがない。

一方、素人が作ったラフは一見するとプロが作ったラフと同じように見えるのだが、完成系が正確にイメージされていないので、実際に作り始めると破綻が起きやすく、どこに着地したら良いかわからなくなる。

素人が作ったラフを受け取ったら、デザイナーだとか実作業する立場である貴方がやることは、本当にそのラフで完成形を作ることができるのかの検証作業。大きくラフを作り変える必要があるかもしれないし、ラフを作った人にあれこれヒアリングしないとならないかもしれない。

「素人ラフ」を信用してはいけない

前述のように世の中には様々な組織があり、制作物の作られ方のフローも様々。

社内的なインハウスのデザイナーなんかだと、どこかの部署の担当者とか、まともにデザイン物やサイトを作ったことが人が詳細なラフを作ってポン!と渡してくる場合がある。

大体、縦長のLPを作るのにパワーポイントとかでページごとに分かれたラフを持ってきた場合とかは地雷率が高いので注意。普通、Webサイトは紙みたいにA4サイズとかに別れていないので、手書きのラフとかの方がよっぽど信用できる。

これは本当にあるのだが、2019年のご時勢でもPC(向けのデザイン)のラフしかなくて、SP(向けのデザイン)はお任せなんてこともある。どっちかというと、普通はSPの方が閲覧が多いのだからSPメインであるべきだが、企業とかだとPCファーストの頭の担当者が多いのだ。

横長のPCの画面と縦長で操作が指のスマホでは、かなりデザインを変えないとならないので、PCだけでしか考えていないデザインだとSPを作るのが苦労する場合が多い。SPはSPでマージンの取り方や、セクションの分け方など、しっくりくるデザインを作るのがPCより難しい場合も経験上は多い。

コミュニケーションの質がデザインに反映される

デザインの仕事をしていて思うのは、制作に対するコミュニケーションの質が大事ということ。

自分のために自分で作るデザインならともかく、素人ラフをポンと渡されて作るデザインは、コミュにケーションの質が問われるのだ。

素人だろうと、クライアントファースト(社内的なものであろうと)で作られないとOKが出ない場合もあるし、忙しくて相手が捕まらない場合もあるだろうし、素人ラフを渡されて作るデザイナーは大変だろうと思う。社内的なものなら、苦労しても苦労しなくても「お金」が同じなのでモチベーションが沸きづらいというのもあるしね。