アニメ『アオのハコ』のロゴに使われた日本語フォントを特定〈商用可〉


アニメ『アオのハコ』のロゴに使われた日本語フォントを特定しました。青春・学園ものっぽい作品をイメージしたタイトルロゴを制作したい人におすすめの内容です。本家のロゴを再現するチュートリアルも込み!
Image Credit: Official Website

{tocify} $title={Table of Contents}

『アオのハコ』のロゴフォント


アニメ『アオのハコ』のロゴに使われたのは、「ABキリギリス」です。

このデザイン書体は、Adobe Fontsのものなので商用利用可です。リンク先の「サンプルテキスト」と示された入力欄から試し打ちできます。

本家のロゴをよく見てみると、文字の縁が若干ギザギザした加工はあり、手作り感と言いますか、温かみのある雰囲気になっています。

本家のロゴ

本家のロゴに似せてPhotoshopでデザインしてみます。それほど難しくないのでどなたでも実践できます。チュートリアル開始です!


まず、Adobe Expressで「blue watercolor」と検索して出てきた背景素材をPNGでダウンロードします。


Photoshopに移動して、「アオ」「の」「ハコ」の3つのレイヤーに分けてテキストを入力します。「の」だけ小さくします。その方がメリハリあるからね!


それができたら、3つのテキストレイヤーを選択した状態で右クリック→「レイヤーを結合」を押します。ショートカットはCtrlEです。

これでテキストレイヤーを1つの統合できました。ファイルから先ほどダウンロードした背景素材をドラッグアンドドロップして読み込みます。


そのまま水彩の背景レイヤーを選択した状態で右クリック→「クリッピングマスクを作成」を押します。


先ほどと同じ流れで、水彩レイヤーとテキストレイヤーを統合して複製します。複製はCtrlJで。


複製したレイヤーのスタイルを「通常」→「ディザ合成」へ切り替えれば、ギザギザ加工完了です。仕上げに、ふんわりシャドウを入れてみます。


最上部のレイヤーを選択して、下部のツールバー「fx」から「ドロップシャドウ」を押します。上の画像のように設定したらOKで進みます。色はスポイトで抜き取りました。

似せたロゴ

これで完成です!淡くドロップシャドウ入れるだけで雰囲気がかわいくなりますね。おつかれさまでした。


最後に|フォトプランで全部使える


以上、アニメ『アオのハコ』のロゴに使われた日本語フォントを特定しました。

今回、チュートリアルで利用したソフトやツールは「フォトプラン」にすべて含まれています。

PhotoshopとAdobe Expressだけじゃなく、Lightroomも付属します。3つのサービスがセットになっているのでそれぞれ単体で契約するよりお得なんです。

クリエイターにとって必須プランなのでまだの人は検討してみてください。

最後までお読みいただきありがとうございました。



Natchan

ゲームが好きなグラフィックデザイナー。複数のサイトを運営中。子どもの頃からPCゲームで遊んでました。1番最初に遊んだのはSecond Life。デザインとは飽きない程度に関わっていくつもり。詳しくはこちら

コメントを投稿

記事内にPRを含む場合があります