この記事について
この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。
emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。そのほかストックイラストレーター、グッズデザインなどしております。
無料で使えるフォントにも日本語のフォントが増えてきた印象です。
Adobe Fonts、Google Fontsの中から、いくつかピックアップして紹介していきます。
Adobe Fonts
黒薔薇シンデレラ
薔薇の棘があるようなデザインのフォント「黒薔薇シンデレラ」。
ゴシック系のファッションコンテンツや、ハロウィンなど独特の雰囲気を出したいときに効果的なフォントです。 あえてベースラインがずれているのもリズム感があります。
今回はきれいに並んでいるように見せるため、あえてずれたベースラインを活かしつつ微調整しています。
文字の下のインクが滴るような装飾は、Photoshopの生成AIを使用して書き足しました。
むつきかな
「むつきかな」は和風で柔らかな印象がある明朝体のフォントです。
和風のものだけではなくレトロなイメージもありますね。線が細すぎず読みやすいので、タイトルにぴったりです。
漢字がないので使用する際は他のフォントと組み合わせて使うとよいです。
組み合わせて違和感のなさそうなフォントをAdobe Fontsの中から選んでみました。以下で挙げた他のフォントでも合うものはあると思うので、漢字と一緒に使用する場合の参考になればと思います。
Google Fonts
Wavefont
今回紹介するのは文字ではなく棒状のテキストが入力できる「Wavefont」です。
ビルの部分が「Wavefont」を使ったテキストになっています。
レイヤーパネルを見ていただくとわかるのですが、ビル群は英数字でできています。
英数字を入力していくと棒状の文字になるので、ビルっぽく見せるためにテキストを入力し文字間や高低差を確認しながら調整しました。
文字でイラストを作成することはほとんどないかもしれませんが、こういうアイデアの使い方もあります。
Darumadrop One
今回紹介するのは民芸品のだるま落としからインスピレーションを得た味わい深い手書き文字「Darumadrop One」です。
フォントの縁がギザギザとしていて、和紙に書いたようにも見えるので和のイメージもありますが、かわいらしい印象の文字なので絵本のタイトルなどでも使えます。今回はかわいい絵本の表紙をイメージして作成しました。
このフォントも漢字がないので使用する際は他のフォントと組み合わせて使うとよいです。
組み合わせて違和感のなさそうなフォントをGoogle Fontsの中から選んでみました。Webフォントではなく画像テキストとして使用する場合は文字の縁の処理をするとより違和感がなくなるかと思います。以下で挙げたものは、漢字と一緒に使用する場合の例として参考にしていただければと思います。
Cherry Bomb One
お菓子のパッケージのような雰囲気にぴったりの「Cherry Bomb One」
パンチの効いたかわいらしさがコンセプトで、縦書きもできるそうです。まるい感じがかわいらしいフォントだったので、よりかわいさを出すためにぷっくりしているように作成しました。
このフォントも漢字がないので使用する際は他のフォントと組み合わせて使うとよいです。
組み合わせて違和感のなさそうなフォントをGoogle Fontsの中から選んでみました。
以下で挙げたものは、漢字と一緒に使用する場合の例として参考にしていただければと思います。
Nabla
「Nabla」は色つきの立体感があるフォントです。
たとえばシムシティのような斜め上から見下ろしたゲーム画面のようなデザインを作りたい時に、最初から文字の見た目が完成しているので素早く作れそうですね。
Nablaはカラーフォントです。フォントにはベースカラーが設定されており、ハイライトやシャドウの太さなども調整できます。
Google FontsのType testerで文字サイズだけではなくハイライトやシャドウを調整して試すことができます。
以下は実際にWebフォントで使用した例です。
Noto Emoji
「Noto Emoji」はシンプルな線でできた絵文字フォントです。
スマートフォンサイトやウェブアプリをデザインしている時、例えばカメラのヘアラインアイコンが欲しいと思ったときにNoto Emojiを選択してカメラの絵文字を入力すると、素早くヘアラインアイコンにできます。
Noto Emojiは通常のテキストのように文字色の変更も可能です。たくさんの絵文字が用意されているのでWebサイト内で統一感を出したい時も便利です。
カラフルな塗りの絵文字を使用したい場合は、Noto Color Emojiがあります。
まとめ
無料で使えるフォントもかなり増えています。選ぶフォントによってかなり印象が変わるので、フォントを選ぶ楽しさを味わいながら、魅力的なデザインを作り出しましょう。
おまけ
背景で使用しているカボチャやコウモリの画像はPhotoshopの生成AIで作成しました。
カボチャの画像は、あらかじめベースとなる部分をグラデーションで塗り、生成された画像の描画モードを調整しています。
コウモリの部分は生成された背景の上でなげなわツールで選択し、生成したものです。背景のグラデーションの色に合わせて生成されるので、バリエーションから選択するだけでコウモリの部分のイラストが完成しました。
