伝わりやすくするにはどうすればいいの?文字を詰めるカーニング(文字詰め)のやり方デフォルト調整後おまけ文字詰めについて文字を詰める!いつもフリー素材を使ってくだらない画像加工をして楽しんでおります、とっつぁんです。「今更聞けないデザインテクニック」と題しまして、基礎的なデザインテクニックをまとめていく予定です。今回は「文字を見やすく整える」という事。デザインって感性の問題で「正解がない」と言えばないのでしょうけどね...伝えたい事を伝わりやすく!「文字を見やすく整える」と言っても「ただ何となく見やすければ良い。」という事ではありません。「伝えたい事を伝わりやすく」という事を考えて調整します。例を挙げて説明してみます。「文字を詰める」という文章をphotoshopで書いてみました。フォントってやつは何もしていないとこんな感じです...どうですか?読みやすいですか?あ、読みやすい?そうですか...まぁ実際これが読みにくいかどうかと言われたら「別に読みやすいけど?」って感じですよね、わかります(笑)なので、普通に仕事してるWEBデザイナーさんとかでも、フォントを入力してそのままバナーのサイズに会うように拡大縮小、色を変えたりドロップシャドウや境界線入れたら完成!という人も結構いらっしゃいます。言う私もデザイン会社に就職してしばらくは気にした事もありませんでした。伝わりやすくするにはどうすればいいの?さて、文章の意味を伝わりやすくデザインするとは具体的にどういうことなのか?っと言いますと...「メリハリをつけて伝えたい部分を強調する」ということになります。デザイナーさんじゃなくても、「要点だけは色を変える」なんて事はやってたりしますよね?ただし、たまーに「要点だらけじゃねーか!」みたいな文章も見ますけど...色を変えるのも立派な強調ですが、以下のように、ひらがなの部分のみ小さめにして、漢字の意味を伝わりやすくする、という方法もあります。要点のみ若干大きくする訳です。文字を詰めるさて散々「文字を詰める」と書いてきましたが、文字を詰めるとはどういう事か?先に例を挙げるとこういうことです。字と字の間の空白が狭くなっていますね?フォントってカーニング(文字と文字の隙間)は一定ではない為、デフォルトだと不自然な間隔で並んでるんですよね。「あ」も「、」も空白を含めて大きさは同じだからこういう事が起こるのですが、実際に人間が見るとこの空白部分は不自然な訳です。句読点は文字の区切りに使うものなので実際はそれほど違和感は無いかもしれませんが、フォントによっては「あれ?なんかここだけ妙に離れてね?」とかなる事もよくあります。逆にくっつきすぎている文字を離すこともあります。英文などはnとかmがくっつきすぎると逆に読み難い場合も大いにあるでしょう。この辺りは数をこなして感性を磨き、カーニングに慣れるしかないですね。Typeというカーニングの練習が出来るサイトもあります。文字を詰める作業は、デザイン作業の中でもかなり素早く見た目を微調整出来なくてはいけません。文字と文字との間をクリックして...文字パレットを出して...数値を弄って...というような事を気になる部分に全て施していくのはちょっと現実的ではないです。普通はショートカットキーを使います。←、→、でフォーカスを移動して文字を調整...また他の気になる部分にフォーカスを移動して文字を調整...って漢字の作業です。今までの内容のまとめとして、とりあえず作ってみた例です。デフォルトどうでしょう?このフリー素材の子、可愛いですよね?うん。はい、文字の色はカラフルに変えていますが、大きさや、文字詰めは行っていない状態です。調整後では文字の大きさと文字詰めを調整してみましょう。?見やすくなりましたか?「基本的に文字を詰め、単語と単語の間は若干余白を取る」というような雰囲気ですね。文字を調整したおかげで可愛い女の子を前面に持ってくるくらいのスペースができちゃいましたね!いや~、でもまだちょっと「!」の位置とかおかしくね~?とか思った人は、割と既にセンスがあるんじゃないですかね~?おまけ以前に所属していた組織で新人の女の子にこんな感じで適当に教えていたときのお話。「先輩、フォトショは良いんですけど、イラレだと小さくした文字が真ん中に寄っちゃうんですよね...」イラレの場合小さい文字は真ん中に寄る「あ、それね...」その女の子は仕方なく文字ツールを小分けにしてベースラインを下に揃えていましたが、もちろん下に寄せる方法はありますよ。欧文ベースライン」イラレの文字揃えフォトショップも同じように設定できます。byとっつぁんとっつぁんです。昼間はバイク便のメッセンジャーでピニャコラーダです。ジョンという名前の犬に飼われています。その他2015年12月13日とっつぁん元気な女性に元気玉を作ってもらってみた。