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

デザイン 2021.03.27

ウェブデザインで使えるテキスト周りのデザインアイデアまとめ#5(デザイン要素の追加)

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

先日よりテキスト周りのデザインに関する記事が続いていますが、まだまだデザイン表現のアイデアはたくさんあります。5回目の今回はデザイン要素を加えて装飾していくバリエーションについてまとめています。これまでの過去記事は下記にまとめていますので、ぜひこちらもご覧ください。

(過去の参考記事)

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

 

マーカーペン風の背景を引く

強調するテキストの背景に塗りを適用させる手法ですが、単純に文字サイズに合わせて入れるのではなく、高さを調整し少しずらして入れることで、マーカーでラインを引いたように見せることができます。こうすることでより自然かつデザイン的にも洗練されたような印象を与えることができます。細かい部分の少しの工夫が差となって現れますね。背景色は薄く鮮やかな色が相性良しですね、グラデーションなんかにしても面白そうですね。

 

装飾要素を加える

主にアクセントや目を引かせるための装飾用デザイン要素を強調させたいテキストに合わせてあしらうことで、シンプルながらも効果的に注目を集めることができます。このような装飾は控えめにすることで、全体のデザインテーマを崩すことなく、自然になじませることができ、場面を選ばず使うことができます。そこまで目立たないものでもアリとナシでは大きく印象が変わってきますね。少しポップな仕上がりになるので、POPのような広告には絶対に入れておきたいですね。

 

背景に帯や矩形要素を引く

文字量が多かったり、背景に写真などがある場合にはテキストの視認性をいかにして確保するかが問題だったりしますが、そんな場合にとても有効な手法が背景にベタ塗りの帯や矩形を使う方法です。視認性だけでなく色味を調整することでコントラストも確保できるため、いろんなところで使えてとても便利ですね。バナーなどの限られたスペースでのデザインでもしっかりと情報を入れることができ、文字周りのデザインの基本とも言える手法ですね。アウトラインと組み合わせて少し変則的なレイアウトにすることで、リズムをつけても面白いですね。

 

マス目に文字を入れる

某有名ドラマのロゴを連想させるデザインですが、インパクトはかなり強く印象に残る見た目に仕上がるため、タイトルコピーなどの場所に使ってみたいですね。少しレトロな雰囲気も与えることができ、フォントを工夫することでまた違った印象になります。どちらかというと太めの書体が相性が良さそうです。マス目は塗りつぶすことでアクセントやリズムをつけることも可能です。

 

エレメントにイラストを使う

文字を構成する要素であるエレメントに、テキストに関連するイラストを差し替えたり、カウンターなどのスペースに配置する方法です。イラストは過度にすると文字が読みにくくなりますので、可読性も確保しつつ、アクセント程度に限定して使うことがポイントです。イラストのタッチとフォントの種類は合わせておかないと違和感を与えてしまいますので注意が必要です。また使うイラストはシンプルなものを採用すると作りやすいですね。

 


 

前回に引き続き、今回もテキスト周りのデザイン表現のアイデアをまとめてみました。工夫次第でまだまだいろんなデザインが生まれそうですね!使いどころや適用する文字に合わせて効果的に使い分けるようにしてみてくださいね。

この記事を書いた人

オガワ シンヤ

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

  • Twitter

コメントフォーム

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

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

CAPTCHA


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

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