ホームページ制作を検討する中で「作るならシンプルにスッキリ見せたい」「リニューアル後はゴチャゴチャ感を無くしたい」といったように、シンプルなデザイン設計を希望するお客様は多くいらっしゃいます。
しかし、一言で「シンプルなホームページ」と言っても、情報を削減しすぎると質素なホームページになってしまいます。「自社はどこまで削減して良いのか」「どの程度の情報量が適切なのか」は業種によって大きく異なります。
本記事では、当社が手掛けた「シンプルなデザイン」を目指したホームページの制作事例を10選ご紹介しながら、デザインの引き算で実現した見やすさや魅力を解説していきます。今後、ホームページ制作をご検討の方は、ぜひ参考にしてみてください。
ホームページ制作をご検討の方へ
サイバーインテリジェンスは、デザインの方向性がイメージできていない方からのご相談は多くいただきます。何となく「かっこいい」「可愛い」「シンプル」といったイメージだけでも構いません。プロのWEBマーケターが親身にお客様のご要望にお応えします。まずはお気軽に無料相談をご利用ください。
目次
目次
シンプルなホームページ制作事例10選
ヒロ建築工房 様
| サイトタイプ | コーポレートサイト |
| URL | https://hiro-kenchiku.com/ |
東海三県で注文住宅を承る自由設計の工務店、ヒロ建築工房様のサイトです。実際にリフォームを行った室内の雰囲気や外観の写真を余すこと無く使用しています。その写真をできるだけ際立たせるためにも周りの装飾やあしらいは、ほとんど使用せずに写真やテキストのレイアウトと大小で調整したシンプルなデザイン設計です。
ファーストビュー直下には、ヒロ建築工房のコンセプトが端的にまとめられたテキストとともに、明るい室内と作業風景を掲載しています。キャッチコピーとテキストでできた段差を埋めるように重なった画像をズラしたレイアウトで、少ない要素でもバランスよく見える工夫をしています。
各ブロックで使用している写真やコンテンツは全て四角で構成されています。建築業では欠かせない正確な作業、数mmも狂いのない真っ直ぐな直線をサイト全体のコンテンツの形で表現しています。綺麗な写真をたくさんお持ちだったので、白をテーマカラーにして、アクセントカラーは写真で魅せることをメインにデザインしています。
グリーンワークス 様
| サイトタイプ | コーポレートサイト |
| URL | https://grworks.co.jp/ |
岐阜県大垣市で公共施設や企業を中心に造園・外構・エクステリアを手掛ける地域密着の専門業者、グリーンワークス様のサイトです。造園やガーデニングを連想させる「緑」をテーマカラーとして採用しています。公共施設や企業がメインの施工実績をお持ちなため、その事例をたくさん見せるためにもサイト全体のデザインは落ち着いていておしゃれな印象になるように設計されています。
「サービス紹介」のブロックでは、ホームページとしてよく見るレイアウトを採用していますが、見出しに差し色として緑を加えたり、「個人宅向け」「企業向け」のテキストを囲うブロックは個性ある形にするなど、細かいデザインのこだわりを入れることで、ベースのレイアウトはシンプルでも個性あるおしゃれさを出しています。
強みを紹介する部分はテーマカラーのアイコンを使用したシンプルで可愛らしい印象のデザインになっています。また、「採用情報」は別のサイトをお持ちなので、求人に力を入れるという点でも、テーマカラーの緑の面積を広めにとったブロックを配置し、ユーザーの目を引くデザインになっています。
シグサスホーム 様
| サイトタイプ | コーポレートサイト |
| URL | https://sigsas.co.jp/ |
岐阜県羽島市で注文住宅や新築一戸建てを承るリフォーム会社、シグサスホーム様のサイトです。サイト全体で使用されているフォントは太さを細めに設定し、繊細さや丁寧さを表現しつつ余白を贅沢に使用しています。その分写真に目が行くようになり簡潔にまとまった文章が読まれやすくなることを意識したシンプルなデザイン設計です。
コンセプトを紹介するブロックでは、文章の段落ごとに余白を多めに取ることで、スッキリとしていて読みやすくなるようレイアウトしています。細めのフォントでも見出しとの強弱がつくようにフォントサイズや文字同士の余白を調整しています。
使用する写真は全体的に明るさをプラスしテーマカラーである明るい緑にトーンが合うように調整しています。サイト全体の雰囲気が暖かく柔らかい印象になり、信頼感を向上させる雰囲気づくりを意識しています。
魚初 様
| サイトタイプ | コーポレートサイト |
| URL | https://uohatsu.co.jp/ |
愛知県で企業の社員食堂運営や委託給食業務を行う魚初様のサイトです。食材を扱って企業や高齢者施設、大学や寮など大人数に提供するので、特に衛生面の良さや清潔感を印象付けるために「白」をベースカラーとして使用し、アクセントに食欲を増進させる暖色を使用しています。
見出しの背景に手書き風の欧文フォントを使用して、施設ごとに色を変えることで違う分類であることをあしらいの配色で視覚的に伝わるように意識しています。
「対応エリア」を紹介するブロックでは「食堂運営」と「お弁当」の2つの分類を黄色と緑色の差し色を入れて分類しています。各ブロックの見出しの横には食材の切り抜き画像をワンポイント添えることで、ブロック全体が1つのデザインとして締まるように工夫しています。
佐藤建設 様
| サイトタイプ | サービスサイト |
| URL | https://greenwall.shizen-ya.jp/ |
日本全国を対象に、室内や屋外の壁に設置する観葉植物を使用したインテリアデザイン、グリーンウォールの販売・加工を行う佐藤建設様のサイトです。緑豊かな空間の良さを伝えるために実際の写真を豊富に活用しています。
「グリーンウォール」を知らない方も多いため、ファーストビュー直下で説明をするとともに実際の写真を使用して、ユーザーがこのブロックを見るだけでイメージがしやすいコンテンツ設計になっています。写真の緑がサイト全体のアクセントにもなっているので、写真に自然と目が行きやすいデザインになっています。
「商品紹介」でも実際の写真と、パネルのイメージ画像を合わせて掲載することで、どのように設置するのかや自社に導入する場合はどのタイプが適しているかがイメージしやすくなっています。写真の扱い一つでサイト全体のあしらいが少なくてもおしゃれに見せられることが分かりますね。
日本料理 白日 様
| サイトタイプ | サービスサイト |
| URL | https://hakujitsu-gifu.com/ |
岐阜県岐阜市で本格的な京料理を職人が提供する日本料理 白日様のサイトです。旬の食材を使用した美食を提供する匠の技をファーストビューのメインビジュアルとして採用しています。食に興味関心の高いユーザーにリーチするためにもサイト全体の雰囲気を「和」で丁寧な印象で統一しています。
ファーストビュー直下は「白日の心」というブロックで、店主の言葉をあえて縦書きで明朝体にすることで思いが伝わるように工夫しています。背景も真っ白ではなく、ぼかしたデザインをゆっくりと動かすことで、より丁寧でこだわりのある印象を与えます。
「お品書き」のブロックは、品へのこだわりや世界感を伝えています。実際の品を写真で掲載するのではなく、その季節に合った旬の食材を使用した品を提供するため、新鮮な食材の写真を均等に配置しています。「食」に対して真っ直ぐな気持ちをそのままデザインに落とし込んでいます。
プレヴィア 様
| サイトタイプ | サービスサイト |
| URL | https://previa.tokyo/ |
イタリアのサロン向けオーガニックヘアケアブランド、プレヴィア様の日本公式サイトです。植物由来の素材で、地球環境にも髪にも優しい製品を追求しており、その強みがサイトの雰囲気からも伝わるようにデザインをしました。
「商品一覧」のブロックは写真の使い方にこだわっています。ランディング先とのギャップをなくすために使用しているレイアウトや写真を統一させ、単に商品だけを載せるのではなく、髪のイメージが伝わる写真を商品の背景に添えています。
「ストーリー」のセクションでは、植物由来であることが伝わる写真をできるだけ端的な文章で掲載しています。トップページの構成はできるだけシンプルにし、気になるユーザーは「MORE」から移動していただく設計で、気軽に読み進めてもらうデザイン・情報設計になっています。
アルシュ 様
| サイトタイプ | サービスサイト |
| URL | https://arche-beauty.com/ |
大阪に7つの店舗を持つ美容室、アルシュ様のサイトです。「美容」をイメージさせる白をベースにサイト全体をほとんどモノトーンで統一したデザインになっています。予約のボタンやほんの一部のアクセントとして強いピンク色を使用することで、一通り紹介し終わった最後にオファーとして視線を誘導できるような設計になっています。
「BEST MATCHING」のブロックは、お客様のイメージや理想似合わせたご提案ができることを伝え、より詳しいことは詳細ページで閲覧できる設計にしています。そのため、トップページでは、目を引くモデルさんの写真を大きく掲載しています。
アルシュ様は店舗が7つあるため、一つ一つを大きく紹介していると間延びしてしまいユーザーの手間が増えます。そのため、ユーザビリティ向上の観点から、それぞれの店舗の外観を横長に写真をトリミングしてコンパクトにまとめています。
スニップ 様
| サイトタイプ | コーポレートサイト |
| URL | https://snip-co.com/ |
大分県・福岡県で美容室を9店舗展開するトータルビューティサロン、スニップ様のサイトです。トップページはコンセプトやイメージを雰囲気で伝えるデザイン設計にし、詳細な情報は全て下層ページで伝えています。そのため、トップページのコンテンツは必要最低限でとてもシンプルにまとまっています。
ファーストビュー直下は、グリッドで写真や動画をレイアウトし、文字を使わずサロンのイメージがひと目で伝わる情報設計になっています。
「SPIDEA」のページでは、メリットを大きく写真の上に掲載し、詳しい内容はテキストで説明をする情報の優先度でコンテンツの大小を決めています。また、説明文が長くなるため、サイドに写真を小さく並べておくことで、文章ばかりで離脱してしまうということを削減しています。
小菅工務店 様
| サイトタイプ | コーポレートサイト |
| URL | https://kosuga-inc.co.jp/ |
京都府伏見で新築住宅やリニューアル・商業施設や倉庫建設などを承る小菅工務店様のサイトです。業務に対する誠実さが伝わる「青」をメインカラーとして採用し、建築業らしい四角の形をベースにしたシンプルなレイアウトでデザインされています。
ファーストビュー直下は「地域の未来創りに貢献する」というコンセプトに沿った町並みの写真をバックグラウンドに設定しています。合わせて小菅工務店の強みを3つのブロックでシンプルにまとめることで、サイトの序盤の段階で、どんな強みがあるのかが分かりやすく伝わります。
施工事例のブロックは、できるだけ多くの写真を見せるためにも1事例3枚で紹介をしています。その中でも大小をつけることで、インパクトに欠けたり間延びしたりすることを防ぐレイアウトを採用しています。
シンプルなのに物足りなくならないコツ
シンプルなホームページを作成する際に陥りやすい失敗は「質素になること」です。シンプルさを保ちつつ満足感のあるサイトにするにはどうすれば良いのでしょうか？
ここでは、シンプルさと読み応えのバランスについて紹介します。
「情報を削る前に」ユーザーが知りたいことを洗い出す
いきなりコンテンツを削るのではなく、先にユーザーが何を知りたいかを出し切っておきます。
初めてきた人が「必ず知りたいこと」
・何の会社か、信頼できるか
・どんなサービスか
・いくらぐらいか
比較検討する時に見られやすい情報
・実績、事例、導入企業
・よくある質問
来店や問い合わせの前に必要な実務情報
・場所、対応エリア
・営業時間
・問合せ方法
トップページは「案内板」詳細は下層ページ
シンプルなサイトほど、トップページに全てを詰め込まず、「要約」と「導線」に役割を絞るとうまくいきます。ユーザーがトップページで確認するのは「自分に関係ありそうか」です。トップで全て説明しようとすると、文字数が多くなり複雑に見えます。結果、離脱する可能性が高まるため、内容は一般の人でも伝わりやすい内容にして最小限にとどめて詳細はリンクで下層ページへ飛ばします。
トップページ
▶「何の会社か、何をしているのか、選ばれる理由、代表的な実績、お問い合わせ」
概要を端的に伝えましょう。ここでは大きな実績や数値は勿体ぶらずに掲載します。
下層ページ
▶「サービスの詳細、事例の一覧、会社情報、採用情報」
トップで掲載した事例の詳細やサービスへの細かいこだわりを1つ1つ丁寧に説明してユーザーの信頼を築けるコンテンツにします。
写真・アイコン・図解で文章に頼りすぎない
シンプルなサイトは、文章を減らした分ビジュアルやデザイン面の役割が大きくなります。文章で長々と説明せず「この写真を見てもらえれば分かる」という写真やイラスト・図があれば、その分長い文章を削減することができます。
- 写真で「どんな業種・どんな雰囲気か」が分かる
- アイコンや簡単な図解でサービスの流れや文章の理解を助ける
- 実績はロゴやサムネイル一覧で「数」と「件数」を視覚的に伝える
シンプルなホームページのメリット・デメリット
メリット
第一印象で「見やすい」「伝わりやすい」と感じる
余計な装飾や情報が少ない分、「何のサイトなのか」「どこを見ればよいのか」が直感的に伝わりやすくなります。初めて訪れたユーザーにとって、わかり易いサイトになります。
スマホでの閲覧と相性が良い
スマホでは、一画面に表示できる情報が限られます。シンプルなレイアウトにしておくと、狭い画面でも必要な情報を追いやすくなり、離脱のリスクを下げることができます。
伝えたいポイントに集中してもらえる
メニューやバナーが多すぎると、ユーザーの視線が分散してしまいます。シンプルなサイトは、問い合わせボタンや資料請求、予約フォームなど「ここを押してほしい」という導線に注目してもらいやすくなります。
長く使っても古くなりにくい
流行に寄せすぎないシンプルなデザインは、数年経っても大きな違和感が出にくいです。トレンドのデザインに合わせると、そのデザインの時代感がそのまま残ります。そのため、時間が経つと古くなったことが見て分かります。しかし、シンプルなデザインは小さな修正や情報更新を重ねながら、長く使いやすいというメリットがあります。
デメリット
情報を減らしすぎに注意
先程も説明した通り、見た目をスッキリさせることだけを優先すると、ユーザーが比較検討したいときに情報が足りず、「ここは詳しく書いていないから不安」と判断されてしまう場合があります。
写真やコピーが弱いと質素になる
シンプルなデザインほど、1枚の写真や一つのキャッチコピーの印象が大きくなります。素材の質が十分でないと、「洗練されている」というより「地味」「安っぽい」と感じられてしまうことがあります。
社内の「これも載せたい」という要望とぶつかりやすい
部署ごとに載せたい情報が増えていくと、せっかくシンプルに設計した構成が崩れていきます。最初に「トップページに載せる情報」と「下層ページで詳しく書く情報」の線引きを決めておかないと、公開後にどんどん情報が足されて、結局ごちゃついたサイトに戻ってしまうことがあります。
シンプルなホームページを依頼するときのポイント
「シンプルにしてください」と伝えるだけでは、制作会社とのイメージにズレが出ます。どこをどの程度シンプルにしたいのかを予め整理しておくと、完成ごとのギャップをかなり減らせます。
何をシンプルにしたいのかを決める
シンプルといっても、狙いはいくつかに分かれます。ざっくりで良いので整理しておくと、「なんとなくシンプル」ではなく、目的に合ったシンプルさを提案してもらいやすくなります。
- デザイン（色や装飾）をスッキリさせたい
- メニューや導線をシンプルにして迷わないサイトにしたい
- 文章量を整理して読みやすくしたい
載せたい情報を整理する
事前に載せたい情報はある程度まとめておきましょう。後出しで情報の追加を希望すると、そこだけ浮いてしまったり、後付け感がすごくて目立ってしまう事があるので、注意が必要です。イメージがつかない場合は、競合が何を載せているのかを調べたり、WEBマーケティングに強い制作会社に何を載せるべきかを相談することをおすすめします。
- トップページに必ず載せる情報
- 下層ページで詳しく説明する情報
- 別資料やPDFなどに回してもよい情報
写真とコピーのクオリティに投資する
デメリットで説明したように、昔撮影した古い写真や画質の悪い写真を使用していると、安っぽく見えてしまいます。そのため、比較的新しいスマートフォンで撮影した写真を使うか、プロのカメラマンにお願いして撮影してもらうことをおすすめします。
特に、ホームページの見た目が良くないというだけで、ユーザーが離れてしまっては勿体ないです。デザインや見た目で損をしないためにも、ホームページを作る際に妥協しない方がいい項目です。
まとめ
シンプルなホームページは「要素や文字を減らす」だけではありません。本当に大切なのは、情報を整理して、伝えるべき情報と順番が正しく簡潔にまとめられているかです。
誰に向けたサイトなのか、何を一番伝えたいのか、ユーザーはどんな情報から知りたがるのか。この軸が決まっていれば、トップページでは要約と導線に役割を絞り、詳しい説明は下層ページでしっかり伝える、といった「シンプルだけど物足りなくならない構成」を作りやすくなります。
「何を残し、どこをスッキリさせるのか」をユーザー目線で決めていくことが大切です。その視点さえ持っておけば、見た目も使い勝手もよい、「伝わるシンプルサイト」に近づいていきます。
シンプルなホームページをご検討の方へ
サイバーインテリジェンスは、お客様のご要望を丁寧にヒアリングし、希望とプロの視点から最適な案をご提案します。シンプルなホームページにするからこそ、入念な下調べや世界感の理解が必要になります。当社は、その世界感を理解したうえで、お客様の集客やビジネスの成長をサポートします。制作をご検討の方は、お気軽に無料相談をご利用ください。
