思わずほっこり…！優しい印象のWEBサイトデザイン5選

こんにちは！デザイナーのH.Abeです。
日々、デザインをしていると様々なデザインテイストに出会います。
その中でも奥が深いなあと感じる、【優しい】テイストについて実例5選を用いて深掘りしていきたいと思います。

優しいデザインとはどんなデザイン？

私たちはどんな時に優しさを感じるのでしょうか？
あくまでも一部ですが、下記のように考えました。

• 親近感を感じた時
• 気持ちが穏やかになった時
• 親切にしてもらった時

これらは全て第三者によってもたらされます。
第三者＝WEBサイトとして考え、デザインによって【優しさ】が作用している事例を挙げてみました。

優しさを「ポップ」で魅せている事例

GREEN BATON

キッズウェアの買取・販売をおこなっている、サステナブル・レーベル「GREEN BATON」のサービスサイトです。

こちらのサイトが表現している優しいポイントは【親しみやすさ】だと考察します。

「サイズアウトして着られなくなった洋服を次の誰かに繋ぐ」というもので、バトンを回したくなる人（＝親しみがある人）を表現するためかと考えました。

「手書きの温かみのあるイラスト」「コマ送りのアニメーション」で親しみやすさを表現されています。

そして、ポップな印象もあるのでこのサイトを擬人化すると「明るくて優しい人」だなと思いました！

株式会社YELLOW

障がい福祉サービスを行う、福祉サービス事務所「株式会社YELLOW」のホームページです。

こちらのサイトが表現している優しいポイントは【親のような存在感】だと考察します。

障がいを抱えている人へ向けた就職支援サービスを主としており、そのような方が支援をしてほしい人（＝優しく背中を押してくれる親のような人）を表現していると考えました。

「手書きで書かれたような文字」や「ポコポコと動く動き」がポップでありながら、一生懸命に働いている様子を想起させられました。

それらの要素をメインに据えて展開していくことで、どんな方も共に働く世界を実現させるための事務所なのだと思わされ、「たくさん頼ってください！」というメッセージ性を感じました。

優しさを「柔らかさ」で魅せている事例

特定医療法人 萬生会　熊本第一病院

熊本県熊本市にある「熊本第一病院」のホームページです。

こちらのサイトが表現している優しいポイントは【親しみやすさ】だと考察します。

サイトを構成するほとんどの要素の角が丸く、色味がクリーム色で温かみがあります。

「随所に散りばめられたあしらいのふわふわとした動き」や「丸ゴシック」、「ノイズテクスチャ（アナログの温かさを感じました）」が親しみやすさをより強く表現していると感じました。

また、グラデーションを用いていることで深度を感じ、「頼りになる印象」も表現されています。

優しさを「丁寧さ」で魅せている事例

GREEN SPOON

ヘルシーおうちごはんを届けるGREEN SPOONのサイトです。

こちらのサイトが表現している優しいポイントは【丁寧な暮らし】だと考察します。

GREEN SPOONは、忙しくてついつい食事をおざなりにしてしまう現代人に向けた新しいウェルネスブランドです。 

本サイトで丁寧さを感じたポイントは行間です。

ゆっくりと話をしてくれているような印象を文字のみで感じます。

行間は200%と、他のサイトに比べても少し広めに設定されていました。

株式会社波多野工務店 採用サイト

建物の建築やリフォームなどを事業としている波多野工務店の採用サイトです。

こちらのサイトが表現している優しいポイントは【落ち着いた佇まい】だと考察します。

行間の広い文章は丁寧に話をしてくれているように感じ、フェードの速度は落ち着いた職場環境であろうことを想起させます。

（ちなみに本サイトも行間は200%以上でした！）

写真を大胆に使うことで、土台のしっかりした頼りになる印象にも感じました。

まとめ

「優しい」と大きく括っても、細分化をするとさまざまな優しさがありました。

全てに共通している項目もあり、

• ゴシック体である
• 角ばっていない

上記は「優しい」デザインを作成する上で最低限押さえておくと良いキーワードかも？と感じました。

参考になりましたら幸いです＼(^^)／

※今回ご紹介したサイトはデザイン性が高いためピックアップして紹介させていただきました。掲載の取消をご希望の場合はご連絡いただき次第速やかに対応させていただきます。