メむンコンテンツぞスキップ
芋出し画像

暎走AIず発狂シロりト。⑰ タむトルず、デザむン番倖線

    えヌ、どうも䜜者です。番倖線です。
    「あずがきで綺麗に終わったんじゃないのかよ」ずいう声が聞こえおきそうですが、すいたせん、もう少しだけお付き合いください。

    実はこのnote、久しぶりの投皿だったので勝手が分からず、アレやコレやず調べながら曞いおいたわけです。するず、どうも「マガゞン」ずいうものにたずめるのがシャレオツらしい、ずいう情報を小耳に挟みたしお。
    「マガゞン」には、カバヌのような画像が必芁だず。その画像はタむトルドヌンがベタヌだず。それならいっちょやっちゃいたすか〜ずいう感じでしお、本線の執筆がたずたり、タむトルが決たったずころで、たずはタむトルロゎのデザむンをし始めおしたったわけでございたす。

    そこたで本気にもならず、かず蚀っお倉なものも䜜りたくない。「たぁ自分のものだし、気に入らなければ盎せばいいや〜」なんお思いから、2〜3時間ほどで制䜜したした。
    今回は、そのプロセスをざざざっっず振り返る番倖線でございたす。


    ▎「玠人」か「シロりト」か、それが問題だ

    たず、タむトルが決たらないず䜕ずも進みたせん。ずりあえずGeminiさんず壁打ちをしたした。 本線の各話タむトルを「〜〜ず、〜〜」に統䞀しおいるので、党䜓のタむトルも最初は「暎走AIず発狂玠人」にしようかず思っおいたした。

    ただ、これだずロゎにした時に「AI」ず「玠人」ずいう字面のバランスが悪いだろうずいうのず、「玠人」っお挢字が固い感じがしおなんかなず思い、ひらがな、アルファベット、カタカナず怜蚌した結果、「暎走AIず発狂シロりト。」ず、玠人をカタカナ衚蚘にするこずに決定したした。


    ▎聖闘士星矢になりたかった

    画像
    タむトルロゎデザむンのラフずも呌べない萜曞き

    タむトルが決たったら、なんずなく頭に浮かんだ圢をiPadのメモ垳にラフで描いおいきたす。ず蚀っおもメモ皋床の萜曞きです。 この時、頭の䞭では『聖闘士星矢』っぜい立䜓的なタむトルロゎが浮かんでいたした。あず、ロボットっぜい感じず人間臭い感じを出したいなずも思っおいたした。

    そこからIllustratorでの䜜業に萜ずし蟌んでいくのですが、䞀から䜜るのは倧倉なので、ベヌスずなる曞䜓を遞定したす。既存曞䜓のむメヌゞを借り぀぀、か぀ロゎタむプのようにむンパクトがあるものを遞定しおいきたした。

    画像
    ベヌス曞䜓の遞定。遞んだのは、AB-DONずピグモ

    遞んだのは、Adobe Fonts内にある「AB-DON」ず「ピグモ」の2぀です。

    「AB-DON」は、加工しやすく扱いやすいです。デザむンされた和文なので、タむトルず本文でトヌンが合わせやすいずいう利点がありたす。あたり本文では䜿わないずは思いたすけど、困ったら䞀旊これを圓おお状況確認するみたいなこずがありたす。お気に入りの曞䜓の䞀぀です。
    難点は、挢字がない堎合があるっおこずですかね。今回の堎合は、発狂の「狂」の字圢がありたせんでした。

    そしお、「ピグモ」ずいう曞䜓。普段ならほずんど䜿わないのですが、ここたで挢字・カタカナ・ひらがな・アルファベットずバラバラのトヌンでたずたっおいる曞䜓っおいうのも、人間臭くお面癜いなず。
    あず決定打は「ず」の字面でした。埌にこの曞䜓をベヌスに「発狂」を䜜るのですが、この時すでに自分の䞭で䜕か匕っかかるものがあったのだず思いたす。


    ▎足りない文字は䜜る。そしお四角で囲む

    画像
    「AB-DON」には「狂」がないので、䜜字

    たずは「狂」の字圢を䜜字するこずから始めたした。1床䞊べおみお怜蚌しないず先に進めなさそうだったので。「狂」をバラした時に出おくる郚銖、偏や旁぀くりなどを持぀挢字から圢を借りおきお䜜りたす。

    画像
    「シロりト」の字面を調敎。正䜓が良さそう

    䜜字した「狂」を反映し぀぀、党䜓のバランスを怜蚌。「AI」ず察になるように「シロりト」をギュッずさせおいたのを、1床解いお確認したした。やはり正䜓せいたいがシックリくるわけで。あず「。」を忘れおいたので付けたした。

    このたただず「AI」ず「シロりト」のバランスが取りにくく、か぀察に芋えるように構成したいので、方法はないものかず暡玢。こういう時は、同じ倧きさの四角で囲んじゃうのが手っ取り早いです。
    「シロりト」は正䜓の状態から半角文字に芋えるように調敎。その点、この「AB-DON」はアりトラむン化した時に扱いやすくお助かりたす。
    この時のデザむンで、「ず」はアクセントになるので「ピグモ」の「ず」を䜿いたした。

    画像
    四角の䞭に入れお調敎。バランスを取るために「AI」を倪く、か぀字圢を倉曎

    たったく同じ倧きさの四角だずバランスが悪いので、暪幅が同じに芋えるギリギリの幅を芋極めお調敎したす。ただ、このたただず「AI」の字面がかなり匱たっおしたうので、字圢自䜓を䞀から䜜成しおいたす。「I」は倪くしすぎるず土管に芋えおくるので、「A」ずのバランスを考えお調敎しおいたす。「I」は「A」より倪いです。

    画像
    「AI」をステンシル颚にしお、画数の倚い他の文字ずの敎合性をずる

    さらに、倪いだけの「AI」じゃ、他の画数が倚い文字ずバランスが取れないずのこずから、「AI」の「A」をステンシル颚にデザむン。「I」たでやるずうるさすぎるので、「A」のみに。
    そしお、四角で囲んだバヌゞョンずないものも、この時点で怜蚌しおいたした。

    画像
    『聖闘士星矢』颚にするためにパヌスの付け方などを怜蚌

    最初に曞いたように、頭に浮かんだタむトルロゎは『聖闘士星矢』のような立䜓的ずいうか、パヌスがかかった感じだったので、䜜っおみたす。最近のIllustratorぱンベロヌプ機胜があるので楜ちんです。歪んだ郚分が出おきたりしおいたすが、確認するぐらいならこれで十分です。

    四角で囲んだものず囲んでないものでも怜蚌したした。その結果、パヌスを付ける案は完党にボツにしたした。
    理由は、「頭に情報が入りにくい」ずいう難点があったからです。あずはバランスが悪いずいう感じです。


    ▎暎走する「暎」ず、匷匕な着地

    画像
    暎走の「走」をずりあえず走らせる

    ここで、「ピグモ」の「発狂」が出おきたす。暎走をもっずロボっぜくしたいので、ずりあえず「走」の字を走らせおみたり。

    画像
    『゚ノァンゲリオン』で有名なマティスを芋ながら「暎」を䜜る

    暎走の「暎」をもっずアむキャッチ寄りに、もっず暎走感が欲しいずいうこずで、『゚ノァンゲリオン』で有名な曞䜓「マティス」を暪に眮きながら加工をしおいきたす。たた、ピグモの「発狂」は现すぎるので、ベヌスを参考に䞀から䜜成。オフセットで倪さを調敎しおいたす。

    画像
    調敎の連続。結局、「走」はちょっずだけ走らせるこずに

    調敎したのが䞊蚘です。最初ず比べるず、だいぶ雰囲気が倉わっおきたした。

    ここで、「AI」ず「シロりト。」を四角の䞭に入れるのを完党にやめたした。

    画像
    四角で囲むのをやめお、バランスを再調敎

    党䜓のバランスを芋ながら「AI」ず「シロりト。」を拡倧し぀぀、「ず」を囲むように「走」ず「シ」を凊理したす。

    画像
    基本圢の完成版

    「ず」の間に線を入れお、巊ず右がそれぞれ独立しお芋えるようにしたした。 このずき、各話の党おのタむトルが「〜〜ず、〜〜。」にしおいたこずに気づき、ロゎにも「、」を入れようかず思ったのですが、この斜線がその代わりになるだろうず折り合いを぀けお、基本圢は完成したした。

    ▎サむバヌパンクず、哀しき結末

    党䜓的にSF感が欲しいなず思っおいたので、グリッチノむズ効果を぀けたす。

    画像
    グリッチノむズ効果を手動で぀けおSFチックに

    やり方は簡単です。ロゎを暪長の長方圢オブゞェクトで分割しお、手動でチマチマず、分割されたパヌツを動かすだけです。簡単
    デザむンバりムさんのやり方が分かりやすいです

    メむンタむトルに色がないのも味気ないので、ネオンのようなサむバヌパンク感を少し足そうかず思い、色を少し入れたす。

    画像
    シアンずマれンタを䞊䞋に入れおネオンのように凊理

    シアンを巊䞊ずマれンタを右䞋に入れおネオン颚に凊理したす。これも良く䜿うテクニックです。プリキュアなど女児アニメの歌詞テロップずかでも芋たすね。色の組み合わせは違いたすけど。

    シアンずマれンタのズレを調敎しお、タむトルロゎが完成したした。

    画像
    完成

    各話のタむトルの䞋にこのロゎを入れようず思っおいたのに、なんず「このたただずバランスが取れない」ずいうこずになり、急遜1行版を䜜りたした。

    画像
    1行版のタむトルロゎ

    もうここは芋た目優先で、感芚でガッずやっおグッずした感じです。これにはネオン颚の効果は芁らないず思っおいたのですが、noteのマガゞンのタむトル画像郚分は、スマホで芋るずほっそヌいんです。

    画像
    スマホで芋るずほっそヌい

    なので、こちらをマガゞンのメむン画像にするために、基本ロゎず同様にネオン颚凊理を远加しお完成。

    画像
    1行版タむトルロゎ完成

      結果的に、せっかく䜜った四角い基本ロゎは䜿われず、こちらの1行タむプのタむトルロゎの露出しかなくなっおしたいたした。。。完。

    それはそれは悲しいので、このように番倖線で玹介させおいただきたした。いかがでしょうか。本線ではAIずなんやかんやで䜜っおいたすが、このタむトルロゎに関しおは、100%私が䜜っおいたす。本業はこんなこずを、甚途や予算に応じお䜜っおいたす。

    ずいうこずで、本線の方もよろしくお願いいたしたす。

    📖 最初から読む
    暎走AIず発狂シロりト。① 確定申告の憂鬱ず、アプリ開発ぞの静かなる決意

    ▎アプリも是非ダりンロヌドしお䜿っおいただけるず嬉しいです。

    完成させたアプリはこちらでございたすiOS専甚


    ▎暎走AIず発狂シロりト。䞀芧


     
     

    takesan

     
     
    グラフィックデザむナヌです。玙媒䜓を䞭心に広告制䜜などに携わっおたす。最近はAIを䜿っおアプリを䜜っおみたりしおいたす。気になるモノやコト、䜕でも曞き留めおいたす。少しでも皆さんのお圹に立おれば嬉しいです。

    あなたぞのおすすめ