東京のwebデザインスタジオが運営するデザイン・web制作・ビジネスブログ東京のwebデザインスタジオmono.のブログです。webデザインのナレッジや事例、ツール紹介、ビジネスに関するコラム、時々写真などを掲載しています。Ishibashi戦略設計やブランディング、デザイン表現を強みとしたWebデザイナー/ディレクター。数社の制作会社に勤めたのち、現在は"mono."の屋号でフリーのweb制作者として活動中。Contactinfo@mo-no.designシンプルで美しい、テキストだけで構成されたデザインのポイント2023.02.05デザインシンプルって、いいですよね。デザインを始めた頃はコテコテに装飾された派手なデザインに憧れていたのですが、年々装飾は最小限にした、シンプルですっきりしたデザインが好きになってきています。シンプルな中でも極地の一つがテキストだけで構成されたデザインだと思います。シンプルと言っても本当に何の飾り気もないと味気ない。シンプルの中にさりげない一癖を加えることで、そのデザインではならではの個性が生まれ、ぐっとそのデザインの魅力を引き上げると考えています。そこで、今回はそんなシンプルだけど魅力的なデザインを構成する要素を分解して考えていきたいと思います。(簡単な装飾やグリッド線が引かれている事例もあります。)以前書いたメインビジュアルのレイアウトについての記事とも近い話が多いです。Index1.基本は四原則2.四原則を守った上で一部を崩す3.最初のグリッドから始めない4.強弱で工夫する4-1.極端な強弱をつける4-2.フォントで強弱を付ける5.文字の一部をマスクする6.動きを加える7.色を使うまとめ1.基本は四原則https://neutra-vdl.org/なるべく要素の上か左位置が揃うようになっていて気持ちよいです。フォントサイズによって強弱が付いているので、視線も迷いません。https://www.nathansmith.design/こちらの例もビシッと揃った気持ちよさがありますね。中央のテキストも両端揃え&テキストボックスの幅がガイドにぴったり合うように設計されており、きっちりと揃うことで特徴を感じさせられている印象があります。どんなデザインでもそうなのですが、シンプルだからこそ意識したいのがデザインの四原則。デザイナーの必修と言っても良いくらい読まれているこちらの本で提唱されている理論ですね。4つの原則を表した言葉で、これらの法則に沿ってレイアウトをすると見やすくなりますよ。近接:関連する要素は近くにまとめてグループにする整列:関連する情報は同じガイドに揃える対比:優先度の高い要素は強く、優先度の低い要素は弱く見せる反復:同じ意味を持つ要素のルールは繰り返して使用するどんなデザインでも大事なことですが、シンプルなデザインではその繊細さゆえにこの辺りのルールから外れた要素があると悪く目立ってしまいやすくなります。2.四原則を守った上で一部を崩すhttps://arcr.ru/基本的にはガイドにぴったりあうようにレイアウトされていますが、最後の行だけ行頭が変わっています。した崩しがあることでレイアウトに独自性を感じやすくなっています。3.最初のグリッドから始めないhttps://www.martinbriceno.com/普通、このレイアウトで左揃えの要素を配置するときは一番左のグリッドに左詰めで置くと思いますが、そこをあえて左側に余白を持たせて3カラム目のグリッドにテキストを配置することで個性が生まれています。4.強弱で工夫する4-1.極端な強弱をつけるHomehttps://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などのデジタル媒体特有のアプローチですが、基本はきっちりと四原則に収めつつも一部の要素にアニメーションを加えることで独自性を出すことが可能です。こちらの事例では中央のキャッチコピーが常に上向きにスクロールする演出を加えることで、レイアウト的な崩しを加えることなく視線を誘導することができています。一味加わった印象になります。テキスト中心のレイアウトはどことなくエディトリアルデザインのような雰囲気も感じやすいので、背景色があることで本のようによりアナログな手触りを感じやすくなる気がします。文字色を背景と同系色にしたり、うっすら背景にノイズのテクスチャを加えたりするとよりアナログ感が増して良い印象になることもあります。まとめいかがだったでしょうか?シンプルなデザインだからこそ、ちょっとした一癖によってデザインのクオリティがぐっと上がって見えますね。完全にテキストだけということは少ないですが、近年は比較的シンプル・ミニマムなデザインのご相談をいただくことも増えてきていますので、今回ご紹介したようなアプローチも活用しながらより良いデザインを生み出せるようになっていきたいと思います。このブログは東京のwebデザインスタジオmono.が運営しています。webサイト制作にあたりお見積やご相談などお気軽にお問い合わせくださいませ。Booksセンスは知識から始まる駆け出しの頃に読んで以来のバイブルです。「センス」ってここまで言語化出来るのかと思いました。この本を読んでからデザインや企画のアイデア出しがしやすくなりました。老舗デザイン事務所DRAFT代表の宮田識さんの著書。ブランディングデザインに携わる多くの人の参考になる一冊だと思います。人によって定義のぶれやすいブランディングについて、言語化から実践するための方法までが一冊にまとまっています。美しいカーブと心地よい字並びのためにノンデザイナーズデザインブックレイアウトの法則についてまとめられた不朽の名著。この本で紹介されている4原則を知っているとレイアウトがぐっと見やすくなります。MDNデザイナーズファイル2022今を代表するデザイナーや制作会社がまとめられた本です。グラフィック系がメインですが、web制作会社もノミネートされています。デザインセンスは知識から始まる駆け出しの頃に読んで以来のバイブルです。「センス」ってここまで言語化出来るのかと思いました。この本を読んでからデザインや企画のアイデア出しがしやすくなりました。その他の記事を見る2022.11.28デザインPC向けにも工夫されたスマホファーストのサイト6選2週間前から始めていたwebサイトのまとめシリーズですが、テーマを決めてご紹介していくシリーズの方...2022.11.13デザイン今週印象に残ったwebサイト(22.11.7~22.11.13)毎週印象に残ったサイトを紹介していくシリーズをやってみようと思います。...2022.11.06ブランディング本質的なブランディングの第一歩は”知る”こと読んだ本のまとめもやってみようと思います。...2022.11.25コラム過去を知れば未来がわかる?多くの文化が辿る5つの時代web、アプリ、グラフィック、エディトリアル、プロダクト、建築、、デザインの世界だけでもこれまで数...。