Sharkhive

叡知

ロゴっぽいものをつくる③

 ロゴっぽいものをつくる記事の第三回です。

 

 前回は、「比較的カンタンにできる」文字の表現(加工)手法を挙げました。

 

 今回は、「前回より手間のかかる(またはむずかしい)」手法を挙げていきます。

 

 

 

 

#1.文字の一部の色を変える

 

 「一部の文字の色を変える」ではなく、「特定または全部の文字の一部の色を変える」です。

 

 最近とくに流行っているような気がします。

 

f:id:ViVi-shark:20210121124718p:plain


 「いろいろな文字のところどころを変える」と、「軽やか」「たのしげ」「親しみやすそう」みたいな雰囲気に寄りやすいとおもいます。

 

 「全部(または特定単語)の文字の一部を規則的に変える」と、もうちょっと落ち着いた雰囲気に寄りやすいとおもいます。

 

 

 

#2.複数行にする

 

 シンプルながら、効果の高い手法です。

 

 複数行にしたときにうまく収めるのがむずかしいタイトルというのもあるので、使いづらい場合もありますが、おおむね便利な方法です。

 

f:id:ViVi-shark:20210121125850p:plain


 複数行にすると、「ふつうの文」っぽさが減って、アイコン的な印象が生まれる=ロゴっぽく見えやすい、というやつだとおもいます。

 全体のシルエットが長方形にうまく収まるようにすると、それっぽさを生む効果がたかまりやすいようです。

 

 タイトルによっては、一部の文字のサイズを変更して、バランスをとる必要が生じることもあります。

 

 行ごとにことなる他の加工手法(色変更など)を適用するのもアリです。あんまりやるとかえって雑に見えそうですけど。

 

 

 

#3.文字の一部を伸ばす

 

 文字の一部を(なんかいい感じに)伸ばします。

 

 ふつうの文字ではなく、変化のある字形にすると、その作品固有のもの=タイトルロゴっぽさが感じられるような気がするやつです。

 

f:id:ViVi-shark:20210121124940p:plain


 どの文字のどこを伸ばしてもいいとおもいます。

 いちおうの傾向としては、全体的にやるのでなければ、横書きなら左側でやるほうが目を引きやすいんじゃないでしょうか。

 

 図の、下側の例「ルールブレイカー」の加工は、なんかよく見かけるやつです。きれいにやるのむずかしいですね。

 

 

 

#4.文字に装飾をつける

 

 文字になんらかの飾りをつける手法です。(文字の周りではなく、文字自体につける手法を指します)

 

 前述した、「3.文字の一部を伸ばす」に似たところもあります。

 

f:id:ViVi-shark:20210121125021p:plain


 傾向としては、文字の外縁部に飾りをつける場合が多いとおもいます。(飾りの内容とサイズにもよりますが、外縁部のほうが使える面積が大きいので)

 

 「すべて(または特定の単語部分すべて)の文字に同じように飾りをつける」場合と、「一部の文字(先頭・末尾・意味のつよい文字)にのみ飾りをつける」場合があります。

 前者は、「対象の文字すべてに同じようにつけられる飾り」を探す(かんがえる)必要があります。

 

 

 

#5.文字の一部を図形に置き換える

 

 一気にロゴっぽさが高まるかもしれない方法です。これがうまくキマったらだいたい勝ちです。

 

 一方で、挙げてきたほかの方法よりも、むずかしい場合がおおいです。うまくいかなさそうなときはすっぱりあきらめてもいいとおもいます。

 

f:id:ViVi-shark:20210121125146p:plain


 必要な観点はふたつです。

 

  1. そのタイトルの文面(または作品の内容)とかかわりのある図形を発想する
  2. 図形に置き換えられそうな部分を文字のなかから発見する

 

 前者は、タイトル(作品)によるところがおおきいのですが、「文字そのものに対応する図形(“星 → ★”など)」「作品内のアイテム(武器や小道具や動植物)」あたりが採用される例がおおい気はします。

 

 後者は、「線のかたまりひとつを置き換える」のが無難だとおもいます。

 漢字(とくに一般的な漢字)は、わりと強引に置き換えても判読しやすいので、狙い目です。

 逆に、かな(カナ)は、置き換えによっては似た字と区別できなくなるリスクがおおきいと感じます(「ン」と「ソ」など)。その点に注意しつつ試すのがよさそうです。

 

 

 

#次回予告

 

 次回は「メインの文字以外の要素を足す」話をするとおもいます。

 

ロゴっぽいものをつくる②

 ロゴっぽいものをつくる記事の第二回です。

 

 前回は、「通常のテキストとちがう、特別感のある文字がロゴに見える」という話をしました。

 

 今回は、「じゃあどうやって特別感を発生させるのか」という話をします。

 

 具体的には、以下に「比較的カンタンな文字表現の加工」を挙げていきます。

 それらのいずれか、または複数を、適当に(そのシナリオの雰囲気などに応じて)つかうと、「それっぽく」なります。なにが雰囲気に合うのかという点については、「とりあえず自分が違和感を感じなければOK」でいいとおもいます。

 

 

 

 

#1.フォントを変える

 

 真っ先に試すべきなのは、フォントの変更です。

 

 とくに装飾性の高いフォント(一般的な文書の本文に使われないような特殊な字形のフォント)をつかうと、雰囲気がおおきく変わります。

 

f:id:ViVi-shark:20210119221852p:plain

 

 場合によっては、これだけでロゴっぽさが十分に発生することもあります。(上図の例であれば、「Unlimited Blade Works」のほうは、このままでもいけるんじゃないでしょうか)

 

 オモシロそうなフォントを見つけたら、とりあえず入手しておくと、あとで役に立つこともおおいです。

 

 

 

#2.内側をくり抜く

 

 文字の内側をくり抜きます。「袋文字」「白抜き文字」「アウトライン文字」などと呼ばれたりするやつです(が、呼び方はどうでもいいです)。



f:id:ViVi-shark:20210119221942p:plain

 

 これ単体だとそこまで「それっぽく」はなりませんが、ほかの方法と組み合わせるとうまくまとまったりします。(塗りつぶしより白抜きのほうが、文字の存在感が減るので、画像(紙面)全体のバランスをかんがえた結果としてこれを使うことがままあります)

 

 傾向として、「線がそこそこ太くて、かつ太さがおおむね均一なフォント」だと適用しやすいです。

 

 (※「本来の字形の内側をくり抜く」であって、「本来の字形の外側を縁取る」ではありません。後者だと、字の形がくずれていまいちなことになりやすいです)

 

 

 

#3.くり抜き+ずらして塗りつぶし

 

 上で書いた「くり抜き」の派生です。

 

 くり抜き文字と、塗りつぶしの(=通常の・くり抜いていない)文字を、色を変えて重ねる方法です。


f:id:ViVi-shark:20210119222033p:plain

 

 あまり場合をえらばずにイイ感じに収まりやすい方法です。見栄えのいいフォントとこの方法の組み合わせだけでだいたい何とかなるとすら言えます。

 

 塗りつぶしは当然ながら判読しやすいので、背景画像がごちゃついてるときなどにも便利です。

 

 

 

#4.一部の文字のサイズを変える

 

 漢字かな混じりのタイトルの場合などに有効です。

 

f:id:ViVi-shark:20210119222156p:plain

 

 例の上側はサイズが均一(=ふつうのテキスト)で、下側はところどころサイズを変えています。

 

 傾向として、「漢字はおおきめ、かな(カナ)はちいさめにする」「最初か最後またはその両方をおおきめにする」「複雑な字よりは簡素な字をおおきめにする」「意味的に存在感のある漢字や語句をおおきめにする」「熟語内ではおおきさが均一のほうが読みやすいが、先頭1字をおおきくするくらいならイケる」などの点を踏まえておくと、「それっぽく」なりやすいです。

 

 

 

#5.文字ごとに位置をずらす

 

 文字ごとに位置をずらす方法です。

 

 ライトノベルのロゴでよくみる気がします。


f:id:ViVi-shark:20210119222305p:plain

 

 ずらしたついでに一部を重ねたりすると、それっぽくなったり読みづらくなったりします。

 

 あと、あんまり無節操にずらしまくると、かえって見栄えがわるくなってしまうので、一定の決まりごとは設けてやるほうがいいです。上の例だと、「か」「き」「郷」の下端が揃うようにしてあります。

 

 実際には、この方法は、ひとつ前で書いた「サイズを変える」方法と組み合わせて使うことがほとんどだと思います。

 

 

 

#6.一部の文字の色を変える

 

 一部の文字の色を、ほかの文字と変えます。

 

 変える文字は、「とくに象徴的な意味をもつ文字」や「色と関連付けやすい文字」がおすすめです。

 

f:id:ViVi-shark:20210119222402p:plain


 色を変える際、「色相」「彩度」「明度」のどれかひとつは元の(ほかの)色と一致するようにしておくと(――言い換えると、どれかひとつかふたつのみを変えるようにすると)、全体のバランスがととのっているように見えやすいです。

 (上の例では「死」の明度のみを変えていて、下の例では「紅薔薇」「黄薔薇」の色相と彩度のみを変えています)

 

 

 

#7.文字にテクスチャを貼る

 

 文字にテクスチャを貼ります。すべての文字に貼るのもアリですが、色変え同様に一部だけにするほうが、「それっぽく」なりやすいとおもいます。

 

 (ここでいうテクスチャとは、質感・色味・模様などを表現するための画像素材のことです)

 

f:id:ViVi-shark:20210119222509p:plain


 当然ながら、あるていど文字の面積がないとわかりづらいため、大きいまたは線が太い文字に適用するのが無難です。(ちいさい文字に適用すると、判読しづらくなってしまいます)

 

 

 

#8.文字の一部を削る

 

 文字の一部を削ると、なんかそれっぽくなります。

 

 りくつとしては、「くり抜き」と似たような「面積を減らして存在感を調整する」効果と、「単純な文字ではなく特殊な加工が施されたものであることがわかりやすい」点に依るんじゃないでしょうか。

 

f:id:ViVi-shark:20210119222542p:plain


 判読できるくらいであれば、わりと何をどう削ってもいいとおもいます。いやわりと本当に。

 

 「アンリミテッド・ブレイドワークス」の例では、各文字1箇所ずつ、テキトーに削っています。線が折れる・分岐する箇所のまわりを削ると、比較的それっぽさが高まります。

 

 「無限の剣製」の例では、ナナメ方向の削りを、テキトーに線4本分ほど入れてみました。雑もいいところですが、加工してる感はいくらかあるんじゃないでしょうか。

 

 「Unlimited Blade Works」の例は、文字の上側を細く、下側をやや太めに削っています。文字ごとにどこを削るかをかんがえずに、こういうやり方に逃げるのもアリです。たぶん。

 

 

 

#つづく

 

 「比較的カンタン」じゃない話は次回ちょっとだけします。たぶん。

 

ロゴっぽいものをつくる①

 (主にTRPGシナリオの)ロゴっぽいものをつくるノウハウを書きます。(といってもしばらくはTRPGシナリオにかぎらない話をします)

 

#ロゴっぽく見えない例

 

 まずは例をひとつ挙げます。


f:id:ViVi-shark:20210119005949p:plain

 

 文面は、『Fate』の「無限の剣製」のものです。今回の話において、文の内容は重要じゃないので、テキトーに持ってきました。

 

 で、上の例の「UNLIMITED BRADE WORKS」は、(個々人の感性にもよるところですが)あんまりロゴっぽく見えないとおもいます。

 これが話しの出発点です。

 

#ロゴとは特別な文字列である

 

f:id:ViVi-shark:20210119005949p:plain


 この例が、なぜロゴっぽく見えないかというと、【「UNLIMITED BRADE WORKS」の部分が、ほかの部分とほとんどおなじ文字の表現だから】です。

 漢字&かなとアルファベットという違いと、フォントサイズの違いこそありますが、それ以外は同じです。だから本文の延長か、そうでなくとも(ロゴほどには)重要度の高くない文字に見える、というりくつです。

 

 これを改善すべく、もっと特別な表現にしてみます。


f:id:ViVi-shark:20210119010041p:plain

 

 フォントと、色を変えて、同じ文字列をふたつ重ねてみました。

 

 (やはり個々人の感覚にはよりますが、)そこそこロゴっぽさが出たんじゃないでしょうか?

 すくなくともロゴ以外の部分と地続きには見えづらいとおもいます。

 

 ところで、同じ処置を全文に適用すると、

 

f:id:ViVi-shark:20210119010112p:plain

 

 ……こうなります。

 

 ロゴっぽさが減りましたね。全文がほとんど同じ調子にもどったからです。

 

#まとめ&つづく

 

 というわけで、ここまでを雑にまとめると、【ロゴっぽさは特別な文字表現によってうまれる】といえます。そして【特別さは、周囲の要素との比較によって増減する】ともいえます。

 

f:id:ViVi-shark:20210119005949p:plain

 

 ここまでは最低限度の話で、この例もロゴに見えるかというとややあやしいですよね。もっとそれっぽく見せるための話は、次回につづきます。