ホームページ作成の費用相場について
いくらくらいが適切なの？
「初めてホームページを制作するけど、どんなデザインにすれば良いかわからない」
「今流行りのデザインって？」
などの疑問を抱えているWeb担当者の方もいらっしゃるのではないでしょうか？現在、シンプルなWebデザインがトレンドになっています。ゴテゴテな装飾を施したデザインは下火になり、シンプルなデザインのサイトが求められるようになってきました。本記事では、
- シンプルなデザインが求められる理由
- シンプルなのに目を引くサイトデザインの事例
を紹介しますので、デザインを考える際の参考にしてください。
【発注先探しはお任せください】
優良WEBではWEB発注無料相談を行なっています！「相場がわからない」「優良な発注先見極めのポイントは？」などの相談に無料で対応いたします。実は優良WEB運営母体の会社もWEB制作会社。WEB制作のプロがご希望条件に合った発注先探しのお手伝いもできますので、是非お問い合わせください。
無料相談に対応するコンサルタント紹介
シンプルなデザインが人気な理由
現在のトレンドになる前から、シンプルなデザインは、情報を伝えるのに最適だと考えられています。
脳科学的な研究によると「表現要素の20％しか人の記憶は残らない」と言われており、様々な機能・多くの装飾で凝ったデザイン性を表現しても、あまり意味がありません。あのApple社もシンプルなデザインに対する哲学として「これ以上削る要素がない状態のデザインを完成という」という考えを持っているとのこと。
選択肢が少ない方が、コンバージョンに繋がるというデータも出ているなど、無駄を排除することでユーザーは迷うことが少なくなります。そんな優れた「シンプルなデザイン」が、今この時代に脚光を浴びる理由は2つあります。
理由①：どんどん情報過多になっている現代
インターネットが普及したばかりの頃と比べ、現在では多くのサイトがWeb上に存在しており、その中からユーザーは情報を取捨選択する必要が出てきました。
以前までは、華美な装飾だけでユーザーの興味を惹き、集客をすることが可能でした。しかし、情報がありふれた現代の場合、華美な装飾に目をとられ、本当に必要な情報かどうかユーザーが一目で判断しづらく、離脱率があがってしまうことが多々あります。
そのことから、最近のWebデザインはどんどんシンプルになってきているのです。
理由②：レスポンシブWebデザインとの関係性
Webデザインにおけるトレンドが、シンプルなデザインに移行している理由は「レスポンシブWebデザイン」も大きく関係しています。
以前は、PC用サイト・スマホ用サイトを別々に作っていましたが、現在では1つのサイトがデバイスのサイズに合わせて自動的に変形できる、レスポンシブWebデザインが主流です。
レスポンシブWebデザインでは、デバイスごとに表示が切り替わる「ブレイクポイント」を設定するため、あまり装飾を多用できないという背景があります。その結果、不要な装飾などを排除したシンプルなWebデザインがトレンドになってきている側面もあるのです。
それでは次に、「シンプルなデザイン」に優れたサイトを、サイトの属性ごとに紹介していきます。
シンプルなサイト事例【ECサイト編】
ECサイトは、商品の購入を目的としたサイトです。そのため、真っ白の背景にするなど、シンプルなデザインを使用した方が商品が目立ち、コンバージョンに繋がりやすいという特性があります。
しかし、ただ白くしてシンプルにさせただけでは高級感やインパクトに欠けてしまいます。そこで、ホバーをすると写真が飛び出すようなエフェクト効果を、シンプルの中に混在させることにより、見やすさ・高級感・インパクトを同時に表現することができるのです。
今回は、シンプルでありながら、工夫されたデザインのECサイト3つを考察していきます。
ECサイト①【BOTANIST】
出典：BOTANIST
BOTANISTという自然由来のヘアケア商品のECサイトです。背景は薄いグレーを使い、商品の背景に白を使うことで、シンプルなデザインを保ちつつ、商品を目立たせています。
グレーのみの背景ではなく、葉っぱやお花の写真を併用することで、シンプルでありながらおしゃれな雰囲気を作り出していますね。また、草木を使うことで「自然な商品」というイメージをわかせます。
複数の草花ではなく「1つの草花」を項目ごとに設置していることがポイントです。複数のデザインがあると、そちらに注目してしまい、商品の印象が霞んでしまいます。
ECサイト②【ウサギオンライン】
出典：ウサギオンライン
ファッション・コスメ・音楽など幅広いジャンルの商材を扱う「ウサギオンライン」です。
写真以外にはほとんど色がなく、とてもシンプルなデザインです。その分、文字のフォントや文字と文字の間隔を広めに設定することで、見やすさを追求していますね。
商品にカーソルを合わせると吹き出しがでて、写真以外の色の商品を見せてくれます。クリックをして商品ページにアクセスしなくても商品の情報が伝わるといった、ユーザビリティに優れたデザインです。
ECサイト③【DIANA】
出典：DIANA
女性向けシューズブランド「DIANA」のECサイトです。背景は真っ白で、非常にシンプルなデザインです。商品にカーソルを合わせると商品の向きが変わるので、クリックをしなくても、どんな見た目の商品かわかります。
見出しの初めの文字だけ色を付けることで、デザインのシンプルさを失わずに、閲覧者にわかりやすさを届けていますね。
シンプルなサイト事例【ブランドサイト編】
ブランドサイトとは、企業が伝えたいブランドイメージを浸透させる目的のサイトのことです。
テレビ全盛期が終わった現代では、インターネットを通して情報を発信していくことが必要。ブランドサイトを立ち上げることでブランドイメージを作り上げたり、今あるイメージをさらに浸透させることができるのです。
特に、専門的なイメージや自然由来のイメージのブランドには、シンプルなデザインが相性が良いです。今回は、化粧品・飲料・お菓子・旅館のブランドサイトを例に挙げて、シンプルなデザインによる効果を考えていきます。
ブランドサイト①【IPSA】
出典：IPSA
一人一人の肌状態に合った商品を紹介する、コスメブランド「IPSA」のブランドサイトです。
トップの画像では、生い茂る草木の中に真っ白の商品を置くことによって、商品のシンプルさを引き出しています。サイト自体は白い背景が使われており、清潔感を感じさせていますね。
トップページ後方の「BEST SELLER」という項目では、IPSAのベストセラー商品がモノクロの絵で並んでいます。カーソルを合わせると絵が写真に代わる仕組みで、シンプルな中に面白さが表現されています。
カーソルを合わせなければモノクロな絵なので、サイト自体のシンプルな印象は保つことが可能です。
ブランドサイト②【IPPUKU＆MATCHA】
「IPPUKU MATCHA」という抹茶専門店のブランドサイトです。背景は、黒を使い高級感を出しながらも、文字を白いデザインにすることで見やすさも追い求めています。
文字が多めのトップページですが、文字にアニメーションを付けるなどの動きを入れることによって、シンプルなのに目を引く文章を作り出していますね。
海外の人も理解できるように英語表記バージョンの説明も記載されていますが、英語表記の文字色はグレーに設定。日本語と英語の色を変えることで、どちらの言語を読む人にも、わかりやすく情報を提供しています。
ブランドサイト③【Mr.CHEESECAKE】
チーズケーキ専門店「Mr.CHEESECAKE」のブランドサイトです。トップの画像では、真っ白いお皿に商品を置くことで、商品本来のシンプルさを引き出しています。
トップページ内の写真は、あえて重ねたり形を統一せずに配置したりすることで「シンプルなオシャレさ」を表現。
商品紹介も長い文章でたくさんの情報を書くのではなく、少しの情報を短い文章で書くことで無駄をなくし、人々の記憶に残りやすくなります。
ブランドサイト④【TENKU】
出典：TENKU
鹿児島県にある旅館「TENKU」のブランドサイト。トップの写真と説明文14行だけのとても簡潔なサイトです。書かれている文章のタイトルには「静かな非常識を作りたい」という、一度見ただけでは理解しがたいものを付けています。
見た人が「え？どういうこと？」と思うタイトルを付けることで、単調なデザインでも閲覧者の興味を引くことができます。むしろ単調なデザインだからこそ、インパクトのあるタイトルが引き立つのかもしれません。
しつこい営業一切ありません！
シンプルなサイト事例【コーポレートサイト編】
コーポレートサイトは、問い合わせを獲得したり、採用情報や決算情報など、オフィシャルな企業の情報を発信する目的のサイトです。そのため誠実さやまじめさを表現するのに、シンプルなデザインである必要があります。
今回は、アパレル店・アルコール飲料販売店・フリマアプリのコーポレートサイトを参考にして、シンプルなデザインを使うことによる情報のわかりやすさを解説していきます。
コーポレートサイト①【YAECA】
出典：YAECA
シンプルを追求したアパレルブランド「YAECA」のコーポレートサイトです。写真が一切なく、文字とモノクロの絵のみで構成されている究極にシンプルなサイトです。装飾や写真がないので文字がしっかりと頭に入ってきます。
ただし、文字だけのシンプルなサイトを作る場合は、文字同士の間隔を広くしたり文字量を控えたりするなどの工夫が必要です。文字をびっしりと羅列させてしまうと、ユーザーは不快感を覚え、離脱率が上がってしまうので注意しましょう。
写真の代わりに絵を挟み、わかりやすさ・ユーモアを交えた魅力的なサイトデザインです。
コーポレートサイト②【秋田屋】
出典：秋田屋
アルコール飲料販売店「秋田屋」のコーポレートサイトです。トップの画像にシンプルな色合いの絵を用いることで、オシャレな印象を与えています。
サイト内には本当に伝えたいことが7行だけ書かれていて、その他には会社概要・沿革・採用などの項目名と、項目内容が1行ずつ記されているだけのシンプルなデザインのサイトです。
パッと見ただけで知りたい情報がどこにあるかがわかるので、コーポレートサイトを作る場合は、とても参考になるデザインです。
コーポレートサイト③【メルカリ】
出典：メルカリ
フリマアプリサイト「メルカリ」のコーポレートサイトです。サイトで使われている写真はサイズが小さく、文字に目が行くようなデザインになっています。
モノトーンを基調としつつも、タイトル・ボタン・ハンバーガーメニューにテーマカラーの赤色を使うことで、メリハリをつけています。商材の紹介欄は、同社の商材「メルカリ・メルペイ」の2種類が、一定時間経つと入れ替わって登場する仕組みです。
シンプルなデザインの中に一か所だけ動きがあるので、商材を強調させることができます。
シンプルなデザインを採用し、ユーザーのアクションを促すサイトを作りましょう！
この記事では、「ECサイト・ブランドサイト・コーポレート」の3つの属性に分けて、シンプルなサイトの事例を紹介しました。
星の王子様の作者、サン＝テグジュペリは「完璧とは、付け加えるべきものがなくなった時ではなく、取り去るべきものがなくなった時のこと」という言葉を残しています。
また、あのレオナルド・ダ・ヴィンチも「単純であることは究極の洗練だ」と言っているなど、昔からシンプル＝完璧という考えが伝承されているのです。
現在でも、断捨離やミニマリストがブーム化していることや、シンプルなデザインのユニクロや無印良品などのブランドが人気を集めていることなどから、「シンプル」は重要視されていることがわかります。
現在では、昔よりも物や情報、サービスが増えて便利になった分、個人が自力で取捨選択をしていく風潮が強くなりました。
サイトデザインをシンプルにして情報がしっかりユーザーに届くように工夫し、「これは必要だ」と選ばれるサイトを作ることが今後必要になっていきます。
この記事を参考にして、シンプルなデザインのサイトを作り、顧客に求められる商品や企業を作っていきましょう！
Share
佐々木
コンサルタントの佐々木です。Webのプロとして、現在までに累計200社以上のWeb制作に携わってきました。知識がない方にもわかりやすいアドバイスを心がけています！お気軽にご相談ください！