デザインを良くすると、読み手に伝わりやすくなります。また、「おっ」と思わせるフックにもなり、より読んでもらえる（見てもらえる）ものにもすることができます。
時間をかければ良いものを作れるのはあたりまえです。今回はより短時間でちょっとした工夫でできるものを紹介したいと思います！
デザインの4原則（近接・整列・反復・対比）を守りましょう、といった内容は擦られ倒してると思うので、今回は触れません。この4原則を守ることはもちろん大事で、これだけでも整った見やすいものを作ることができます。今回はその先として、よりスタイリッシュ・洗練された印象を持ってもらえるようなちょっとした工夫についてお話したいと思います！
トレンド(流行)に乗る
まず一番コスパの良い話からします。より少ない工数で得られるパフォーマンスが高いのは、トレンド(流行)に乗ることです。これに尽きます。
具体的にどうしたら良いかですが、世界のIT大手がどんなあしらいにしているかを調べ、真似るのです。ここで言う世界のIT大手とはAppleやGoogleなどです。ご自身が持っているアプリから参考となりそうなものを探しても良いです。twitterやInstagram, Pinterestなどですかね。
それらのサービスがどんなあしらいにしているかを見てみます。どんなあしらいになっているかの見方の参考としていくつかピックアップしたいと思います。
角丸
こちらのサイト（WITHINGS, 閲覧日2020/11/16）なんかはトレンドをうまく取り入れていて非常に綺麗なサイトになっています。まずは角丸ですね。iPhoneをはじめとするiOS製品でよくみられるあしらいです。
色が薄めで広がりの大きめのシャドウも付けていますね。これはどちらかと言うとGoogleのマテリアルデザインの考え方が参考になるかとは思いますが、そのページ内で最も強調させたいことや取って欲しいアクションを手前に持ってくるなど思想を統一させた方が良い場合もあるのであくまで参考です。
グラデーション
こちらのサイト（BOOST, 閲覧日2020/11/16）もトレンドをうまく取り入れ、モダンで綺麗なサイトに仕上がっています。文字やボタンに綺麗なグラデーションを用いています。
現在のフラットデザインが主流になる前のリッチなデザインの時代によく使われていましたが、Instagramがアプリアイコンに使用したあたりから様々な企業が活用しています。
文字にグラデーションをあてたり、グラデーションの上に文字を置く場合など、文字とあわせて使う場合は、比較的太くて大きい文字に使わないと可読性が低くなってしまうので注意が必要です。また、全体で統一された色を使う、魅せたい部分だけに使い濫用は避けるなど使い方には注意をしないとうるさくなる可能性もあるので注意してください。
でか文字
サイトの場合、読み込み速度の兼ね合い（テキストは画像に比べロードに遅延がほぼない）もあるかと思いますが、大きい文字が使われるようになってきた印象があります。非常にインパクトがあり、且つコンセプトを短時間で伝えることができます。文字を大きくするだけで、やることとしては非常に簡単なので、うまく使いこなせると非常に有用です。
ここからは、トレンドに通ずる部分もあるかと思いますが、他の視点からすぐに使えるポイントをまとめていきます。
文字色
いきなり重要なポイントについて書きます。
それは、文字色に真っ黒は使わないことです。
こちらはGoogle Storeのメインビジュアルです。見出し（高音質で便利な〜の部分）を見てみると、真っ黒ではありません。
カラーピッカーで見てみると若干グレーになっていることがわかります。これがポイントです。基本的に真っ黒は野暮ったい印象になりがちです。もちろん、モノトーンでお洒落な雰囲気を出したいときやエッジを効かせたいなど使うシーンもありますが、基本色＝真っ黒と捉えることなく、真っ黒を使うのであればなぜ真っ黒を使うのかをきちんと考えるべきです。
見出しだけでなく本文も同様です。そして気を付けたいポイントとしては、少しだけグレーにする点です。あまりグレーにしすぎると読みづらいですからね。少し変えるだけで十分野暮ったい印象は拭えます。
フォント
フォントもコスパが高く、フォントを変えるだけでだいぶ印象は変わります。これだけでも十分他と差をつけられますね。おすすめのフォントを記しておきます。
和文
- Noto Sans JP
和文は色々あるものの、とりあえずこちらを使っておけば問題ないですね。非常に綺麗ですし、ウェイトのバリエーションが豊富で使い勝手が非常に良いです。
英文
- Helvetica Neue
- Avenir / Avenir Next
- Product Sans
- DIN alternate
- Gill sans
英文は上げ出したらキリがないですね。FuturaやGothamなどもオススメですがやや蔓延ってきた印象があります。
フォントのトレンドで言うと、世界的にゴシック体が主流になりつつあると思います。バーバリーをはじめとするハイブランドもこぞってゴシック体にしていますが、この背景にはデジタル化の波が考えられます。一般的にスマホやPC上においては明朝体よりもゴシック体の方が視認性が高いためです。
逆にこれを逆手に取って明朝体を効果的に用いると差別化できるかもしれません。
言葉ではなくアイコンを用いる
視覚表現の一つとしてアイコンは非常に有効です。適切に使うことができれば、文字で置いてあるより「読む」ことなく理解できるので、認知コストが低いです。
例えばこんな具合です。どちらが良い例でどちらが悪い例か、瞬時に判断できないでしょうか。これは老若男女、時に母国語が違っていても何か良い例と悪い例を言っているんだな、というのは理解することができるでしょう。（ユニバーサルデザインとも言われます。）
言葉ではなくアイコンなどで表現できるところはアイコンを用いることで、見た目に良く、わかりやすくて頭にスッと入ってきます。無料のアイコンはこちらのサイトflaticonがおすすめです。有料ですと、こちらdutchiconなんかは可愛いアイコンがあります。
続きはまた書きたいと思います。
Bye~!
デザインについてや進路・キャリアについてなどなど、ご相談受付中です！
LINEで相談する ＞