必要最低限の情報を分かりやすく伝える、シンプルなwebデザイン / webサイト。
ブランディングサイトやコーポレートサイトはその傾向が顕著で、売り出したい企業や団体・商品のイメージから一切の無駄を省くことで、直感的に捉えられるのが良いと考えられています。
実際に筆者が受注した案件でも、クライアントから「シンプルで美しいWebサイトにしたい」という要望が多くなっています。
この記事では、筆者がシンプルなデザインのWebサイトを制作する際に参考にしているサイトの内、特にオススメのものを１０サイトご紹介します。
皆さんもWebサイト制作の際の参考にしてみてください！
株式会社CROOVER
WordPressテーマ「JIN」を手掛けた、株式会社CROOVERのコーポレートサイトさいとです。
恐ろしいほどシンプルな情報量で、自社の理念やサービスなどを分かりやすく伝えています。また、濃い目のパステルカラーと全体的にゆったりとしたレイアウトが、おしゃれさと余裕のある雰囲気を醸し出していますね。
ZENZO ROAST
リキッドコーヒー「ZENZO ROAST」のブランディングサイトです。
テーマカラーのオレンジ色の背景と、パッケージのオシャレさが目を引きます。全体的な構成はシンプルですが、シズル感のある写真が美しく、時折挿入されている縦書きテキストで「丁寧に作った匠の味」を演出出来ています。
Webサイトを訪れただけで、このコーヒー美味しそうと思わず感じてしまいます。
URL：https://zenzo-roast.monocoto-fs.jp/
どこでも待合室
店舗の混雑状況、待ち時間を把握できるアプリ「どこでも待合室」のLP（※ランディングページ）です。
中央で画面を割った大胆な２カラムレイアウトで、片方はスクロール要素、もう片方はフェード切り替え要素という一風変わったWebサイトです。必要最小限に留められたテキストとインフォグラフィックが明確に分離・表示されている事で、シンプルで分かりやすく伝わる工夫がなされています。
マツダ MX-30スペシャルサイト
出典：マツダ｜Maika Loubte（マイカ・ルブテ）ほか × MX-30スペシャルサイト
マツダ自動車が販売するSUV「MX-30」と、それのオーナーであるクリエイターやアーティストの、車を通したライフスタイルを紹介するスペシャルサイトです。
Webサイトを開くとまず目に飛び込む高品質なファーストビュー動画と、ツートンで大胆に配置されたキャッチコピーの構成がとてもかっこいいですね。レイアウトはシンプルに留めつつ、綺麗な写真を全面に押し出して、ユーザーに具体的なライフスタイルを想起させてくれます。
シングルカラムレイアウトをメインに、写真をグリッドレイアウトで効果的に配置することで、メリハリの効いたデザインにもなっています。
URL：https://www2.mazda.co.jp/cars/mx-30_special/
株式会社フルスケール
Web系企業「株式会社フルスケール」のコーポレートサイトです。
装飾なしのhtmlだけで組んだサイトのような見た目で、とてもシンプルかつ斬新です。まるで鉄骨むき出しのオフィスビルみたいなものを想起させます。「そもそもを起点に」というキャッチコピーにあるように、Webサイトの骨組みであるhtmlのような見た目とする事で、課題を根こそぎ解決してくれそうな社風・理念が伝わります。
時々アクセントとして出てくる「青・黄・赤」のグリッチエフェクトも面白いですね。
おかもと歯科医院
おかもと歯科医院さんのWebサイト。
病院/クリニックのサイトも最近はシンプルなデザインの流行が訪れています。ただしここまでにあった先鋭的なシンプルさではなく、医療系ということで「優しさのあるシンプルさ」が表現されていますね。トップページのコンテンツは程よく充実していて、サイト全体を回遊しやすい設計にもなっています。
URL：http://okamoto-dental.clinic/
紙のミルフィーユ
三洋紙業株式会社が展開している、ノートや手帳などを中心としたデザイン文具・雑貨ブランド「紙のミルフィーユ」のブランディングサイトです。
シンプルな構成と美しい写真が、まるで和菓子のような風合いすら醸し出しています。ユーザーに対して、実際に「手に取ってみたい、触ってみたい」と思わせる演出が素晴らしいです。Webサイト自体にはほとんど色付けせず、写真を最大限生かしているのがポイントですね。
guntû（ガンツウ）
株式会社せとうちクルーズが運航する旅客船「guntû（ガンツウ）」のブランディングサイトです。
一隻の旅客船に対してここまでのブランディングは中々珍しいのではないでしょうか。まるで高級ホテルのような船上・航路の雰囲気を、美しい写真で見事に表現されています。Webサイトはモノクロに近いシンプルな構成で、「添えるだけ」といった印象を受けます。このWebサイトを見て「乗ってみたい」と思わない人はいないでしょう。
デンタルステーション ハル歯科医院
歯科医院「デンタルステーション ハル歯科医院」のWebサイトです。
一見してシングルカラムのブロークングリッドレイアウトに見えるのですが、サイト全体に「黄金比」が用いることで、不規則なレイアウトに心地よさすら感じます。
URL：https://www.haru-shika.jp/
Money Tap（マネータップ）
アプリ「Money Tap(マネータップ)」のLP（※ランディングページ）です。
白を基調に、虹色グラデーションの波形 / 円形のグラフィック、スマホアプリのモックアップが美しいですね。不要な要素は付けず、「送金」という役目を果たすアプリへの信頼感と透明性が感じられます。優れたデザインの一方で、ちゃんとLPとしての機能も果たせているのは素晴らしいですね。
まとめ
いかがでしたでしょうか。
シンプルで美しいWebサイトはいずれも、掲載する内容を厳選し、写真やビジュアルそのもので人間の五感に訴えかける効果があります。
ユーザーに対して「私も使ってみたい・行ってみたい」と思わせるブランディングサイトにはまさに打ってつけの表現手法ですね。
内容を厳選できず、要素の過掲載で読みにくいWebサイトをよく目にしますが、シンプルなWebサイトへの切り替えを考えてみても良いかもしれません。
Ｗebデザインに興味を持ったら
「Webデザイナーをやってみたい」「Webデザインを勉強してみたい」と思ったら、Webデザインスクールに通って、現役のプロ講師からスキルを学びましょう！
以下の記事では現役Webデザイナーである筆者の視点から、選びに選び抜いた厳選のスクールを３つご紹介していますので、参考にしてみてくださいね！
