『高級感ある感じの文字でデザインしてみてください』…何百何千回と言われてきたであろうサイトデザインに対する一要望。

最近だとミニマルデザインが流行している感もあって、タイポグラフィの重要性も変わってきている気がするんですよね。最もユーザーに伝えたいことを最強調、シンプルにまとめ伝えるためのミニマルデザイン。必然的にサイトイメージをタイポグラフィが左右しているデザインも多いように感じます。

というわけで、今日は僕が良く使う『高級感あるタイポグラフィ』を、Photoshopを使ってどうやって表現するか、一枚の背景と、一組の文章を使い具体例を出しながらステップ毎に見ていければと思います。同時に、僕自身、どうやって高級感を出すことが出来るか、改めて試行錯誤しながら考えていければと思います！

（僕自身の経験と照らしあわせながら書く復習記事になるので、ちょっとまとめ方が雑になってたらゴメンナサイ…）

 

スタート：とりあえず白黒

とりあえず白黒でタイプ、レイアウトは良くあるシンメトリに、メインタイトルとサブタイトルとあるような感じの文字を打ちました。レイアウトはとりあえずこれで。普通にシンプルですね。高級感はあるようなないような、普通なような…

ただ、真っ白背景と真っ黒背景はコントラスト100%。ちょっと目が痛い気がします。

 

んじゃ、黒白

んじゃぁ、真っ黒背景にしてみたらどうか、黒という印象が強くなりましたね。黒と言えば、日本だと高級色の一つだと思います。黒のベンツ、黒のスーツ、ブラックカード、黒の財布、黒から得る印象は時として高級な感じを演出する要素になりますね。

ただ、やっぱりコントラスト100%、目が痛いわー。

 

ということはグレー&グレー

グレーの背景に、グレーの文字。黒い背景を使う時は基本かと思います。真っ黒は使わない、濃いグレー、そして真っ白は使わない、薄くグレー。多くの黒バックのサイトで使われますね。

 

おっとこっちはモダングレー

先のグレーグレーの配色の逆版ですね。文字を濃いグレー、背景を薄いグレーにしています。このブログなんかはこの配色をちょっと意識しています。上記例はかなり分かり易く配色を分けてみましたが、ここまで分けるとモダンな印象を受けますね。

上記の背景は若干内側へ黒光彩をかけてみました。モダン感が一層際立つかなと。

 

高級と言えば金でキマリ？！

金って、表現するのがすごく難しいですが、Photoshopで加工すれば意外とそれらしい物は作れます。

表彰台のトップがもらうのは金メダル、金銀財宝という言葉があるように、金もまた高級感のある質感には変わりありませんね。ここからはちょっと質感にもこだわってみます。

 

いやいや銀もありでしょう！

先ほどの金の光彩をグレーにするだけで、次は銀っぽくなりました。国によっては、金とか、黒よりプラチナの方が、与える高級感が上になることがあります。時と場合によって、使い分けができそうですね。

 

凹凸のある感じも他と違う感じ？

北米、英語サイトでは良く見る気がします。ちょっとエンボス利いた感じの加工ですね。エンボス加工に違いは無いのですが、強すぎないことが肝かと。

色相、加工共にそうですが、強すぎない、かけすぎない、何事も程度が大事かと。

 

優しー印象の白銀系、ちょっと見難し…

モニタによってはコントラストの違いが薄いので見にくいのが難点。でも、弱グレー背景に、ほぼ白色文字のコラボレーションは、優しい高級感へと変わることがあります。

よく、スノー（雪）〇〇、みたいな作品でこういう配色が使われていますね。

 

んじゃ、グレーバックは？白銀グレーバック

間違いなく良く見るタイポと背景の組み合わせですね。先ほどの白銀コラボの背景色を濃いグレーにしてみた場合です。文字がみずらい感は無くなりましたが、優しい感じではなくなりましたね。

 

忘れちゃならないノイズ／ぼかし加工

ノイズと聞くと、汚そうで使う頻度少なさそうですが、ノイズ加工は僕は良く背景加工に使います。うっすーいノイズは背景の質感をより際立たせ、微妙にかかっている文字の外側光彩は見る人に神秘的な印象を与えるかと思いますが、いかがでしょうね。

 

さて、いかがでしたでしょうか？

もちろん、フォントの種類、レイアウト、表示領域、サイトの種類やパターン、表現するべき物の質、「これが高級感だ！」と様々な要因に左右されて人に伝える高級感は決まると思います。

また、人や人種、住んでる環境等によって高級感に対する印象は左右されます。たとえば、上記、黒背景のパターンも多いと思いますが、「黒」って一概に言っても高級感と共に、「悪い」印象もありえますよね。全てにおいて一概に言葉に出来無いのがデザインであり、よりその広告が伝えたいターゲットに対しての高級感を求めるのが、大事なんだと思っています。

なので、ここではあくまでも一例として、僕が良く使うタイポグラフィエフェクトの数々をまずはご紹介さえて頂きました。

ちなみに、今日サンプルとして作ったPSDは、下記よりダウンロードしてもらえるようにしておきます。エフェクト加工とかが主なので、何かの役に立つなら好き放題使って頂いて構いません。

タイポグラフィエフェクトサンプル Ver.1
（バージョンアップの予定は今のところありませんがｗ）

いやしかし、こうやって思いつくエフェクト加工や配色を見て思いますが、「どうやって文字で高級感を伝えるか」を考えてはみたものの、「時と場合による」っていう結論に至りますかね。モニタによって色相も、コントラストも違うし。

結論が出るとは思っていませんでしたが、僕程度の経験ではマダマダ試行錯誤って感じです。しかし、なんとなくパターンは見えてくるかも。次書く時にはもうちょっと建設的な記事になるよう頑張ります。

ただ、最近求められるWEBデザインに、タイポグラフィとエフェクトで作る表現力の重要性が僕の中で急上昇していたので、ちょっとまとめてみたくなったメモ記事でした。

 

あ、それから今回のPSDから気にいったエフェクトとかあったらPhotoshopでスタイルに追加しとくと便利ですよ！