mono.blog

東京のwebデザインスタジオmono.のブログです。
webデザインのナレッジや事例、ツール紹介、ビジネスに関するコラム、時々写真などを掲載しています。

Category
Archive
Author
  • Yuji Ishibashi
    戦略設計やブランディング、デザイン表現を強みとしたWebデザイナー/ディレクター。数社の制作会社に勤めたのち、現在は"mono."の屋号でフリーのweb制作者として活動中。
Contact

シンプルで美しい、テキストだけで構成されたデザインのポイント

2023.02.05

デザイン

シンプルって、いいですよね。
デザインを始めた頃はコテコテに装飾された派手なデザインに憧れていたのですが、年々装飾は最小限にした、シンプルですっきりしたデザインが好きになってきています。

シンプルな中でも極地の一つがテキストだけで構成されたデザインだと思います。

でも、シンプルと言っても本当に何の飾り気もないと味気ない。シンプルの中にさりげない一癖を加えることで、そのデザインではならではの個性が生まれ、ぐっとそのデザインの魅力を引き上げると考えています。

そこで、今回はそんなシンプルだけど魅力的なデザインを構成する要素を分解して考えていきたいと思います。
(簡単な装飾やグリッド線が引かれている事例もあります。)

以前書いたメインビジュアルのレイアウトについての記事とも近い話が多いです。

1.基本は四原則

https://neutra-vdl.org/
なるべく要素の上か左位置が揃うようになっていて気持ちよいです。フォントサイズによって強弱が付いているので、視線も迷いません。
https://www.nathansmith.design/
こちらの例もビシッと揃った気持ちよさがありますね。中央のテキストも両端揃え&テキストボックスの幅がガイドにぴったり合うように設計されており、きっちりと揃うことで特徴を感じさせられている印象があります。

どんなデザインでもそうなのですが、シンプルだからこそ意識したいのがデザインの四原則。もはやデザイナーの必修と言っても良いくらい読まれているこちらの本で提唱されている理論ですね。

四原則とは「近接」「整列」「対比」「反復」の4つの原則を表した言葉で、これらの法則に沿ってレイアウトをすると見やすくなりますよ。という法則ですね。

どんなデザインでも大事なことですが、シンプルなデザインではその繊細さゆえにこの辺りのルールから外れた要素があると悪く目立ってしまいやすくなります。

2.四原則を守った上で一部を崩す

https://arcr.ru/

基本的にはガイドにぴったりあうようにレイアウトされていますが、最後の行だけ行頭が変わっています。ちょっとした崩しがあることでレイアウトに独自性を感じやすくなっています。

3.最初のグリッドから始めない

https://www.martinbriceno.com/

普通、このレイアウトで左揃えの要素を配置するときは一番左のグリッドに左詰めで置くと思いますが、そこをあえて左側に余白を持たせて3カラム目のグリッドにテキストを配置することで個性が生まれています。

4.強弱で工夫する

4-1.極端な強弱をつける

https://ncda.biz/

強弱を極端にすることでも印象的なレイアウトを作ることができます。こちらの例はリード文が若干内側にあるものの基本的には四原則を守ったレイアウトとなっていますが、NCDAという文字が極端に大きいことでレイアウトに強いメリハリが生まれ、一味ある印象が生まれています。

https://aawum.com/

こちらもビシッと揃えて作られているもののAAWU(M)という文字が極端に大きいことでメリハリがつき、絵力が増していますね。

4-2.フォントで強弱を付ける

https://giuliasaporito.com/

ここ数年増えている手法に感じます。いくつかのフォントを組み合わせてレイアウトすることで、フォントにコントラストが生まれ、一味あるデザインに感じさせることができます。

5.文字の一部をマスクする

https://anacuna.com/

テキストにマスクをかけて上端や下端などを少し見切れさせる手法です。
そのままテキストを配置するよりも既視感も薄れ、一手間加えた印象になっているように感じます。
3-1.でご紹介したNSDAの文字も、実はテキストの上端がちょっとだけ切れているのが一手間加えているような味になっています。

6.動きを加える

https://tomorrow-happens.studio/

これはwebなどのデジタル媒体特有のアプローチですが、基本はきっちりと四原則に収めつつも一部の要素にアニメーションを加えることで独自性を出すことが可能です。
こちらの事例では中央のキャッチコピーが常に上向きにスクロールする演出を加えることで、レイアウト的な崩しを加えることなく視線を誘導することができています。(厳密には上下のグリッドをはみ出したレイアウトなので、その効果もあると思うのですが)

7.色を使う

https://www.constancesouville.com/

テキストだけのレイアウトでも背景などに色を加えると、そのデザイン独自の世界観が出るので 一味加わった印象になります。
テキスト中心のレイアウトはどことなくエディトリアルデザインのような雰囲気も感じやすいので、背景色があることで本のようによりアナログな手触りを感じやすくなる気がします。

文字色を背景と同系色にしたり、うっすら背景にノイズのテクスチャを加えたりするとよりアナログ感が増して良い印象になることもあります。

まとめ

いかがだったでしょうか?シンプルなデザインだからこそ、ちょっとした一癖によってデザインのクオリティがぐっと上がって見えますね。

完全にテキストだけということは少ないですが、近年は比較的シンプル・ミニマムなデザインのご相談をいただくことも増えてきていますので、今回ご紹介したようなアプローチも活用しながらより良いデザインを生み出せるようになっていきたいと思います。

このブログは東京のwebデザインスタジオmono.が運営しています。
webサイト制作にあたりお見積やご相談などお気軽にお問い合わせくださいませ。

mono.の公式サイトへ お問い合わせはこちら

Recommend Books

その他の記事を見る

2024.07.31

お知らせ

STUDIO Expertsに加盟しました。

このたびmono.はノーコードWeb制作プラットフォーム「STUDIO」の認定プログラムで…

2023.02.16

AI

ChatGPTは仕事をどう変えるか

先週くらいからChatGPTで色々遊んでいて、段々ChatGPTの癖が見えてきました。得手不得手は…

2022.11.13

デザイン

今週印象に残ったwebサイト(22.11.7~22.11.13)

毎週印象に残ったサイトを紹介していくシリーズをやってみようと思います。 出来ない週もあるかも…

2022.11.26

写真

autumn leaves

写真シリーズ。 昭和記念公園の紅葉ライトアップに行ってきました。 庭園が特に良かったで…

2022.11.04

ツール

デザイナー目線で見たノーコードツールSTUDIO

最近制作界隈で話題になっているノーコードツールSTUDIO。私も今後積極的に導入していこうと思いP…