シンプルなWebデザインってなに?シンプルが良い理由と4つの技術
- カテゴリ

なんとざっくりしたテーマかと我ながら思いますが、今回はシンプルについてお話しようと思います。
「シンプルでかっこいいデザインをお願いします」
非常にリクエストの多いデザイントーンです。装飾や要素の少ない感じ?というのがシンプルのイメージでしょうか。しかし、この「少ない感じ」が人によって結構違います。また、Webサイトは基本情報を発信するものなので、言いたいことはたくさんある、でも「シンプル」に、は実は矛盾しています。
普段、どう意識してデザインしているかを紹介します。
「本当のシンプル」と「計算されたシンプル」
白地にテキスト情報だけ載せる、極めてシンプルです。
情報を伝えるだけならこれで問題ないはずですが、これをOKという人はあまりいないでしょう。シンプルな味付けが好きな人でも、水に塩だけ入れたものを好んで飲む人はあまりいないと思います。
我々デザイナーに求められるシンプルは、本当のシンプルではありません。シンプルが持つ効果を使いながら伝えるべきことを伝える、いわば「計算されたシンプル」です。
計算されたシンプルは、要素を削ぐだけではありません。様々な施策がなされているが、ユーザーにとってはシンプルと感じられるデザインです。
色々な出汁が入った透明度の高いスープといったところでしょうか。
シンプルがもたらす効果

シンプルが持つ効果はどういったものがあるでしょうか?
まずは、コンテンツを見やすく、読みやすくすることができます。
装飾や要素を抑えるということは、惑わすものが少ないということです。見せたいものへしっかり視線誘導ができます。また情報のカテゴライズをわかりやすく見せることができます。
もう1つの効果は、シンプルはセンスが良く感じられるということです。子ども向けのデザインは装飾されたものが多いですが、シンプルなデザインは洗練された大人の印象を演出することができます。シンプルデザインのWebサイトにすることで、企業や商品・サービスのセンスを上げることができます。
そしてシンプルは、飽きにくい長持ちするデザインにすることができます。装飾が少ないシンプルデザインは、時代に流されない普遍性があり、万人受けします。反面、強調は苦手です。イベントサイトなど、インパクトで印象に残したい場合は、シンプルデザインは不向きかもしれません。
シンプルデザイン1:装飾や要素を減らす

シンプルデザインでは、まず装飾や要素を抑えます。
余分な装飾はなくし、必要最低限の要素で構成します。色数も抑えた方が良いでしょう。色も装飾なので、たくさん使うとごちゃごちゃした印象に見えます。色を使いたい場合は、CTAやコンテンツ画像のみなど限定的な使い方をすることで、シンプルさを担保できます。
文字も長文は避け、詳しくは詳細ページに遷移させるなど、文字量をコントロールしましょう。文字量を調整する際は、SEOも気をつけましょう。
シンプルデザイン2:スペースを効かす
スペースを有効に使うことも、シンプルデザインでは重要です。スペースがあることは、シンプルであることをわかりやすく伝えます。
例えば、最低限の要素だけだとしても、タイトに詰まっていたらどうでしょう。あまりシンプルには見えなそうです。要素の間や強調したいものの周りにスペースを設け、ゆとりや余裕を表現しましょう。
参考
シンプルデザイン3:レイアウトと写真
装飾や要素を抑え、スペースを作っただけではただ寂しいトーンになるだけです。シンプルデザインでは、レイアウトを工夫してデザイン性を高めましょう。
レイアウトをする際、重宝するのが写真です。写真は背景としても、コンテンツ要素としても使えるので、淡白になりがちなシンプルデザインにアクセントをつけることができます。また、写真は枠に収まっているので、写真内の世界をサイトデザインに干渉させることなく配置することができます。
要素の少ないシンプルデザインは、レイアウトに悩むこともあります。そんなときは写真を使うと、レイアウトのバリエーションを作ることができます。
シンプルデザイン4:動きで演出
シンプルデザインと相性が良いのが「動き」です。トーンを崩すことなく、一段階上のデザインにすることができます。コンテンツを表示するときや、スクロール時、マウスオーバー時などにつけると効果的です。動きにも特徴があり、早い動きはスタイリッシュな印象、ゆっくりな動きはリッチや品のある印象になります。
まとめ
今のWebサイトのデザインは、シンプルに構成されたものがかなり増えています。上述の効果を狙うためということもありますが、シンプルにすることでサイトの表示速度を速くするという、Webならではの理由もあります。特にスマホサイトでは表示速度は重要です。 しかし、シンプルデザインが常に正解ということはなく、華やかに装飾されたデザインが効果をもたらすものも大いにあります。 伝える内容やターゲット、閲覧環境などを想定し、デザイントーンを決めましょう。
阪口英基
Webデザインの課題はクーシーが解決します
-
Webサイトデザイン
EC、コーポレート、eラーニング、SNS、基幹システムなどあらゆるジャンルのWebサイトを手がけています。
クーシーのWeb制作実績
-
難解サービスを再構築。
アイディア コーポレートサイトアイディア株式会社は、海事産業界向けプラットフォームの開発・運用を行うスタートアップ企業。収集した膨大な航海データを活かして航海支援スマホアプリ「Aisea(アイシア)」を小型船舶向けに提供。本プロジェクトでは、コーポレートサイトおよび「Aisea」サービスサイトのリニューアルを手がけました。
記事を読む
-
国内最大手「辻・本郷 税理士法人」
コーポレートサイトリニューアル辻・本郷 税理士法人は、北は北海道から南は沖縄まで国内60拠点以上を展開する国内最大手の税理士法人です。法人/個人、医療・公益法人・地方公共団体といった様々な顧客に向けて会計・税務顧問業務をはじめ、事業承継、組織再編、M&Aアドバイザリーなど幅広いサービスを提供しています。本件では、同法人のコーポレートサイトをリニューアルしました。
記事を読む
-
リビングから「注文住宅」相談。
NTTデータ・スマートソーシング
「HOME4U 家づくりのとびら」「HOME4U 家づくりのとびら」は株式会社NTTデータ・スマートソーシングが新事業として展開する、注文住宅のオンライン相談サービスです。PC/スマートフォンから注文住宅の疑問や不明点を専門アドバイザーに相談し、理想の住まいづくりを叶えることができます。
記事を読む
Webデザインに役立つ記事はこちら
-
失敗しないワイヤーフレームの作り方とは?
Web制作に欠かせない4つのポイントワイヤーフレームはWFと略されることもあり、Webサイトのページを定める設計図になります。情報の優先順位や構成を決…
記事を読む
-
Webデザイン初心者が最初に身につけるべき構成力とは?
「Webデザイナーが身につけた方が良いことはありますか?」とよく聞かれます。私がおすすめするのは「構成力」です。ここで言う構成力とは、...
記事を読む
-
デザイン思考とは?Web制作会社が考える概念とプロセス
デザインとは、美しさ、格好良さ、居心地の良さなどを実現するための計画的な行動であり、一番近い言葉だと「設計」だと考えています。ただし、機能的なものや、数値的なものではなく、人の情緒的な感情をモノとして...
記事を読む