Warning: Use of undefined constant article_css - assumed 'article_css' (this will throw an Error in a future version of PHP) in /home/andsdow/www/ylcl/wp-content/themes/ylcl/header.php on line 89

ハッカドールのロゴフォントを調べてみた

2015年10月より放送開始のTVアニメ『ハッカドール THE あにめ~しょん』
元々はDeNAが運営しているスマホ用ニュースキュレーションアプリで、僕もわりと初期からつかってます!
タイトルのハッカドールは「捗る」からきてるの知らなかった!

hack01

TVアニメ「ハッカドール THE あにめ~しょん」公式サイト

ロゴは作字&フォント

「ハッカドール」部分は作字。THE あにめ〜しょんの方は既存フォントを使用。
まずはフォントからみてみます。

フォントワークスのコメット

font-comet

THE あにめ〜しょんはフォントワークスのコメットを使用。
最近のアニメだと、「輪廻のラグランジェ」のオープニングテロップで使われていたのが記憶に新しいところです。

hack00

※画像はバンダイチャンネルより

すべてのラインを直線で構成している書体です。横画は水平かつ縦画より細く、縦画は5〜8度のゆるやかな傾斜をつけてデザインしています。さらに漢字や仮名だけでなく欧文や数字も同様のデザインスタイルで、文字を組んだ際に動きのあるデジタルチックな雰囲気を表現します。
コメット B | キャッチ | 書体を選ぶ | FONTWORKS

と書かれている通り、躍動感があって近未来感のあるデザインのフォントです。

メインロゴも見てみるよ

hack02

メインロゴは全て直線でつくられてます。
縦横の線の太さの比率と角度はおおよそ以下のとおり

hack03

角丸にしてシアー20°程度にすると近い感じになる!

勢い余って遊んでみたよ

hack04

比率角度を元にそれらしく作ってみた( ゚д゚)/
以下、作り方なので興味ある人だけみてください

角度は気にせず直線だけつくる

hack05

縦横比1:4で角丸に設定してます。
「ス」だけ先に20°してネクストステージへむかいます。

シアーして角度20°つけます

hack06

ガバッと選択してシアー20°にします。「ス」のあそこだけ-20°にしてました。

色つけたりして完成

hack04

白い枠線つけます。
グループ化しているときは「パスファインダー」→「追加」しておきます。

濁点はピンクにしておくと幸せになれます。

さいごに

ベースの線2本だけ作っておけば捗るので簡単に作れます。

それと近い雰囲気のフォントが欲しい人はガウフォントのカナ0816なんかを使っても捗ると思います

gau

  • このエントリーをはてなブックマークに追加

この記事の著者

この著者の最新の記事

関連記事

WEBデザインギャラリー

アニメ・ゲームのwebサイト集

かっこいいwebサイト集めました

ページ上部へ戻る