Ownedmedia ウェブ制作に役立つコンテンツを発信中!

デザイン 2021.03.06

ウェブデザインで使えるテキスト周りのデザインアイデアまとめ#3(アウトライン・シャドウ・グロー効果)

Tags: ,,,
最終更新日:Update

前回に引き続き今回もテキスト周りのデザインサンプルについてまとめていきたいと思います。第3回目となるこの記事では、アウトラインやシャドウ、グロー効果を使ったものにフォーカスして見ていきたいと思います。過去記事にはその他いろいろなデザインをまとめていきますので、こちらも是非ご参考にどうぞ!

(こちらの記事もどうぞ)

・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ#2(文字の変形・加工)
・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ#1(背景写真との組み合わせ)
・画像内の文字を見せるデザイン表現 〜文字に効果を付ける(1)〜
・画像内の文字を見せるデザイン表現 〜文字に効果を付ける(2)〜
・画像内の文字を見せるデザイン表現 ~背景を加工する~

 

アウトラインを重ねて袋文字にする

こちらはよく見かけるアウトラインを重ねた袋文字と呼ばれる手法です。文字の視認性やインパクトも最大限に表現することができます。背景がどんなにごちゃごちゃしていても、しっかりと文字だけを読ませることができますので、使用箇所の制約を受けません。ただし、必要以上に目立ったり、周りとのデザインが合わない、チープに見えるなどもありますので、使い所には注意します。ウェブデザインだけでなく、紙媒体でもよく使われています。

 

過去記事ではPhotoshopやIllustratorを使って袋文字を使った表現方法を詳しくまとめていますので、こちらもご参考にどうぞ。

(参考記事)

Photoshopで輝きのある派手な立体装飾文字を作成する
【デザインワークショップ】vol.5 袋文字のテキストをスポーツ新聞風に表現してみる

 

アウトラインとソリッドシャドウを組み合わせる

先ほどの袋文字だとインパクトが強く目立ちすぎる、もう少しデザインに対して自然にマッチするようにしたい、でもしっかりと訴求はしたいというケースに便利な表現です。訴求力と使い勝手の良さがバランスよく、キャッチコピーからサブコピー、ちょっとした飾り文字など幅広く使えます。見た目的にポップに仕上がるので、POP書体や手書き文字、丸文字系のフォントにマッチします。こちらも袋文字と同じく、カジュアルやチープに見えてしまう場合もあるので注意します。

 

アウトラインをずらした版ズレ文字

塗りとアウトラインを分けて、それぞれ少しずらすことで判ズレ風のデザインに仕上がります。シンプルながらもデザインのアクセントをつけることができます。印象的には、軽やかさや可愛さ、親しみやすさなどが感じられるので、女性向けのデザインにもピッタリです。塗りと線は同系色で、塗りは淡い色を、線は濃い色を選択するとバランスよく仕上がります。フォントも少し角が丸みを持っているものや墨溜まりがあるものがマッチするのではないでしょうか。

 

アウトラインだけで抜き文字にする

こちらはシンプルに塗りなしのアウトラインのみで表現する方法です。ミニマムなデザインに仕上がり、洗練された、カッコよくおしゃれでモダンな印象を与えることができます。背景に写真を使う場合には写真とテキストをなじませることができますので、メッセージ性の強いコピーを入れると尚良いのではないでしょうか。フォントはある程度ウエイトのあるものでないと視認性が下がってしまうので注意が必要です。

 

ロングシャドウをつける

ひと昔前に流行ったフラットデザインでよく見かけたロングシャドウをつけた表現方法です。飛び出すような視覚効果があるので、インパクトは強くなります。条件によりますが、少しレトロや懐かしいような印象を与えることができます。文字を立体的に見せる方法はいくつかありますが、ロングシャドウでは文字自体は平面になるので、3Dのような立体的な文字と比較すると、まだある程度周りのデザインになじませやすいのではないでしょうか。

 

過去記事ではIllustratorを使ってロングシャドウを3Dの立体で表現した方法を詳しくまとめていますので、こちらもご参考にどうぞ。

(参考記事)

Illustratorで立体的に飛び出す見出し文字を作成する

 

ニューモーフィズム風のハイライトとシャドウをつける

近年のウェブデザインで流行りのニューモーフィズム風の表現です。ハイライトとシャドウの効果を追加し、背景色と同色の塗りにすることで立体的に文字を浮かび上げることができます。使い所は限定的ですが、アプリのスプラッシュスクリーンやUIデザインで使ってみたいデザインですね。

 

ネオンサイン風のグロー効果をつける

こちらも使い所は限定的ですが、ネオンサインのように見せることができるグロー効果をつけた表現です。ダークテーマと相性がよく、おしゃれでかっこいいサイトでは是非使ってみたいですね。色味は鮮やかな蛍光色を使うことと、アウトラインは少し太めに、グロー効果はアウトラインの色より少し明るい色味で強めに設定することがポイントです。

 


 

今回はアウトラインやシャドウ、グロー効果にフォーカスして、テキスト周りのデザイン表現のアイデアをまとめてみました。過去記事にもありますが、このようなデザイン表現の引き出しを増やしておくことで、より効率よく質の高いデザインを作成することができますので、ぜひ色々と覚えておきたいですね。

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?