こんにちは！
OP事業部のザキノンです。
2017年に新卒で入社し、この春でカヤック歴が丸6年となりました。
6年...小学生だったらもう卒業している年だと思うと月日の流れが恐ろしい。そうは言っても、いつまでもフレッシュな気持ちでありたいものですね…💪
さて、カヤックでは主にキャンペーンサイトなどのデザインを担当している私ですが、 その傍ら、自主制作で文字にまつわる作品をTwitter等で発信したりもしています。
こんなのとか
こんなのとか
単語や文章などを自由な形でグラフィカルに表現した、いわゆる「作字」というものです。
「作字メインの作品」という形ではなくとも、今このブログを読んでくださっている方の中には、ロゴを作る際などに作字の経験がある方も多いのではないでしょうか？
今回は、ズバリそんな皆さんに向けたブログです。
…突然ですが皆さん。
作字をしてはみたものの、クオリティが上がらない。思ったように作れない。そんな壁にぶち当たったことはありませんか？
ちなみに私は、めちゃくちゃあります。
特にデザインを始めたての頃は、見よう見まねで作るところまではいけても、その先どうすればクオリティを上げられるかが分からずに悩んだものです。
ということで今回は、すでに作字をしたことがある初級〜中級者の方向けに、作字のクオリティを上げるためのポイントをお伝えできればと思います！
今回調整していく文字はこちら
よりイメージが湧きやすいよう例を用意しました。こちらの文字を実際に調整しながら、順を追ってポイントをお伝えしていきますね。
それでは早速いってみましょう👇
その1：プロポーションを揃えよう
初めにこの例を見た時、皆さんはどのように感じましたか？
全体的にバランスが悪く、不安定な印象を受けた方が多いのではないでしょうか。 そう感じる要因の一つとして、プロポーションが揃っていないことが挙げられます。もちろんあえてアンバランスにして動きを出す場合もありますが、「揃っていない」ように見えてしまうとそれだけでクオリティが低く見えてしまいがち。
▼問題点が分かりやすいようにグリッドを入れてみました。
上下のラインが揃っていなかったり、文字によって縦横比がバラバラなのがよく分かります。 今回の例だと、「ク」は横に大きくどっしりとした印象、「テ」は縦に細長くスラッとした印象ですね。 このように、文字が持つ印象は縦横比によって大きく変わってきてしまうので、それらが混在することで、チグハグでなんとなく落ち着かない印象を与えてしまうのです。
▼簡単にバランスを調整してみました。縦横比が揃うだけでも全体に少し統一感が出ます。
続いて注目したいのが文字の重心バランスです。
他の文字と比べた時に、「オ」は少し下重心、「テ」は少し上重心気味になっているのが分かりますか？
上下のラインは合っていても、重心がバラバラだとバランスが悪く見えてしまいますね。
▼重心を調整したものがこちら。
いかがでしょうか。少しずつ不安感が少なくなってきた気がしませんか？
...そうでもないですか？
はい。まだまだ調整が必要ですね。
縦横比と重心を整えて、次に気になってくるのは線幅です。 今は文字によって線が太かったり細かったり…チグハグな印象を受けます。
▼線幅をある程度揃えるとこんな感じ。
今回は 縦線は太く、横線は細く、というルールで統一してみました。
ちなみに、画数が多い漢字＋ひらがな・カタカナの組み合わせなど、完全に同じ太さにするのが難しい場合もありますが、その場合もパッと見た時の太さの印象を揃えられるとよいでしょう。
その2：共通ルールを決めよう
その1ではベースとなる文字のバランスを調整してきましたが、その2ではもう少し細かい、文字の意匠に関わる部分を調整していきましょう。
「ク」「オ」「リ」「テ」「ィ」という文字には、それぞれはらいのパーツが含まれています。しかし、今回のデザインでは、はらいの角度や先端の処理などが全てバラバラになってしまっていますね。
くるんとしていたり、真っ直ぐだったり、丸かったり、尖っていたり…。全体に共通のルールがないことで、無秩序な印象を与えてしまいます。
特に今回のように似たパーツなのにあしらいが違うという状態だとなおさらです。
▼ざっくりと先端の角度や処理を揃えてみました。
ルールが定まったことにより、全体に統一感が生まれた気がしませんか？
その3：曲線の綺麗さに気を配ろう
皆さんそろそろ「クオリティ」がゲシュタルト崩壊してきた頃でしょうか。
基本的な形の調整を重ね、ある程度ベースが出来上がったあと、もう1ランククオリティを上げるために大事なのが曲線の綺麗さです。ここで細部にまで気を配れるかどうかが、完成度の高さを左右する分かれ道となるのです。
▼こちらの画像は先ほどその2で調整した「ク」と「オ」の拡大図です。よく見ると、ところどころ曲線がいびつになっている箇所がありますね。
作字をする際にはAdobe Illustratorなどのツールを使用される方が多いと思います。ベクターデータでこのようないびつな曲線が生まれる主な要因は以下の3つ。
・アンカーポイントの数が多い
・アンカーポイントの位置が適切でない
・ハンドルの向きや長さがカーブに合っていない
アンカーポイントは、数が増えるほどお互いに干渉し合ってしまい曲線がガタつきやすくなります。必要最低限の数で、適切な位置に打つことが重要になってくるのです。
ゆるやかなカーブの時は山の頂点、急カーブの時は山の両端の位置にアンカーポイントを打つイメージで。また、ハンドルの長さが左右で大体同じになるように調整すると綺麗な曲線が引きやすくなりますよ。
▼この要領で全ての文字の曲線を調整してみました。
いかがでしょうか。形自体が大きく変わったわけではないのに、曲線が綺麗になっただけで一気に印象が変わりますよね。 地味な作業ではありますが、曲線に気を配ることの大切さを感じてもらえたら嬉しいです！
一番最初の状態と比べるとその差は歴然。こうやって並べて見てみると、最初の状態ってこんなにひどかったんだ...とびっくりしますね。制作をするうえで喜びを感じる瞬間でもあります。
おまけ：応用編
ここからは、その1〜その3までのポイントをすべてクリアしたうえで、さらにクオリティを上げたい！オリジナリティを出したい！そんな方のために、応用例を4つほどご紹介します。
・頭文字を大きくする
頭文字を大きくすることでメリハリが生まれます。インパクトを出したいときなどに。
・文字の一部分を伸ばす
文字のパーツを伸ばしたりしてアクセントを加えています。優雅な印象にしたいときに◎。
・斜体をかける
文字全体に斜体をかけるとスタイリッシュな雰囲気に。また、少しレトロな雰囲気にしたい時にも使えます。
・文字にリズムをつける
文字を交互に配置しリズムをつけています。楽しげな雰囲気になるので、イベントロゴなどとも相性◎。
まとめ
さて、ここまでいかがでしたでしょうか？
今回のブログで挙げたのは、あくまでも私個人が作字する際に気をつけているポイントです。参考として、こんなやり方もあるんだな〜くらいに捉えていただけますと幸いです🙇♀️
このブログを読んでくださったどこかの誰かにとって少しでもヒントになることがあれば嬉しく思います。
基本的なポイントは抑えつつ、慣れてきたら是非自分なりのやり方を見つけて楽しく作字をしてみてくださいね！🙌
