Webサイトの印象を大きく左右する要素の一つが「文字」です。
フォントの種類やサイズだけでなく、文字に一工夫いれてあげることでその文字を目立たせることができるので、デザインは格段に向上します。
この記事では、Webデザイナーが厳選した、実践的な文字装飾テクニック15選をお伝えします。
この記事があなたのクリエイティブのヒントになれば幸いです。
文字に一工夫入れるテクニック15選
1. 文字の一部をモチーフにする
よく使われるテクニックです。
文字の一部をモチーフに変えることで、より文字からイメージを連想しやすくなります。
デザイン全体がシンプルになりすぎた・・という時に一工夫いれてみては如何でしょうか？
2.文字の一部を伸ばす
ロゴデザインで多様されるテクニックです。
ドラゴンズのロゴが一番印象的な例ですね。
また、筆記体のテキストの最初と最後の文字を伸ばしてより目立つようにしたり、伸ばした部分に葉などの装飾を加えたりと応用もできます。
3.文字の結合部分を切り離す
英文、漢字ともに使えるテクニックです。
【歯】を切りはなすと抜けた歯を連想させてしまいますので、使いどころに注意が必要かもしれません （笑）
4.文字の色を分ける
一つの文字をそれぞれ色分けする方法もあります。
一部をモチーフにするテクニックと併用するとよりおしゃれな印象になると思います。
5.文字の一部をはみださせる
サンセリフ体のフォントと相性が良さそうです。
少し遊び心を加えたいときに是非使ってみてください。
6.文字をアウトラインにする
かっこいいので個人的にとても好きです。
太めの英文フォントとの相性が特にいいです。
背景や他の文字とのバランスを考慮して、一文字だけだったり、アウトラインの文字だけ大きくしたりと注意して組み合わせます。
7.文字をずらす
こちらもよく使います。
使うと目立つのとポップで楽しい印象を与えることができるので、様々な場面で活用が可能です。
8.文字に切り込みを入れる
Cutの文字なので切り込みを入れてみましたが、他にもスポーツ系のロゴなどで使われています。
切り込みということで躍動感を感じさせてくれます。
9. 文字を影だけで見せる
影だけでみせるのも面白いです！
あえて背景に同化させるときに使ったことがあります。
10.文字を３D化する
３D化することでとにかく目立ちます。
ブレンドツールを使って見せるより更に立体的になりますので、
バランス感が必要かもです！
11.文字間隔で魅せる
文字間隔を変えるだけで印象がガラっと変わります。
拘って見せていきましょう！
12.文字を図形で囲む
こちらは曜日を入れる時によく使う気がします。
13.文字に擦れを入れる
かすれを入れるとデザインに味が出ますね！柄文字とかもありだと思います。
14.文字を傾ける
こちらも鉄板！目立たせたいキャッチコピーや前向きなテキストに使うことが多いです。
15.文字を強調する
強調する方法は色々あります。
様々な方法があるので、色々な作品を見ていいところを取り入れていきましょう！
▼文字を強調する装飾についてはこちらの記事でも解説しています▼
まとめ
如何でしたでしょうか？
今回は多くなりそうなので15選と厳選しましたが、まだまだありそうです。
様々な方法がありますので、色々な人の作品から使えそうなテクニックを取り入れていくのが上達への最短ルートだと思います。
Webデザインを体系的に学ぶのにおススメのスクール
最後にWebデザインを体系的に学ぶのにおススメしたいスクールを紹介します。
実は先日各コースの説明会を聞いてきました。Webマーケティングのコースについては、値段も手ごろながらかなりボリューミーな内容でした。デジタルコンテンツで売る仕組みをフレームワークに落とし込んで実践していくスキルが確実に習得できると説明会で確認しました。
また他にも【Web制作】【動画編集】【Webマーケティング】など多数のコースがありお手頃価格！
そして在学中につながれるコミュニティーも熱い。
勉強意欲の高い方には間違いなくおススメのスクールです！無料説明会も開催しているみたいなのでご興味のある方は以下のバナーからチェックしてみてください！
