- かっこいいホームページにリニューアルしたい
- ブライドイメージが上がるホームページ事例が知りたい
- かっこいいだけでなく成果が出るホームページを作りたい
自社の魅力を最大限に引き出し、ユーザーにサービス購入や問い合わせなどの行動（コンバージョン）を促す「かっこいいホームページ」を作れていますか？
ホームページを作る際は、見た目がかっこいいだけでなく+αの要素として以下も必要となります。
- ユーザーの利便性
- ブランドイメージの向上
- 問い合わせに繋がる導線設計
本記事では、上記の要素も兼ね備えたかっこいいホームページ事例を形態別の企業ホームページ、業種別のデザイン事例を紹介します。また、当社（クーミル株式会社）はWebサイト制作会社でもあるため、かっこいいホームページの作り方についてのノウハウも徹底解説します。
クーミル株式会社はアニメーションや動きがあるホームページ制作を得意としております。
かっこいいホームページを作りたい人はぜひご相談ください。
COOMIL（クーミル）株式会社 代表取締役。神奈川県出身。東京薬科大学大学院を修了後、大手製薬会社にて研修開発に従事する。2016年にファングロウス株式会社を創業し、マーケティング、広告運用、YouTube、SEO対策を駆使し、2年で売上1億円強かつ利益率40%強の会社へとグロースさせ、株式譲渡。YouTubeチャンネルのプロデュース・原稿制作・出演・撮影・編集の全てを自ら行い、運営10ヶ月で登録者数1万人突破させる(現在3万人越え)。IT業界だけでなく実店舗経営の知見を活かし、クライアント様の課題の本質を捉えて、「結果が出るマーケティング施策」をご提案致します。サイトを公開後も運用をお任せ頂き、サイトだけでなく「事業規模の拡大を目指す」ことがクーミルのモットーです。
■経歴
2014年 東京薬科大学大学院終了
2014年 第一三共株式会社
2016年 ファングロウス株式会社 創業
2019年 一般社団法人スーパースカルプ発毛協会（FC本部） 理事
2021年 ファングロウス株式会社 株式譲渡
2021年クーミル株式会社 創業
■得意領域
SEO対策
コンテンツマーケティング
リスティング広告
オウンドメディア運用
フランチャイズ加盟店開発、集客
■保有資格
Google アナリティクス認定資格（GAIQ）
Google 広告検索認定資格
Google 広告ディスプレイ認定資格
Google 広告モバイル認定資格
■SNS
X（旧Twitter）：https://twitter.com/ryosuke_coomil
YouTube：https://www.youtube.com/@marketing_coomil
サイト制作のお悩みを
無料で相談する
Step1
ありがとうございます
弊社にご相談頂きまして
誠にありがとうございます。
クーミル株式会社では、
1つ1つのご相談を真剣に考え、
最適解をご提供出来るよう日々努めております。
可能な限り、即日ご返信を心掛けておりますが、
相談内容や、
営業日の関係で少々、
お待たせさせてしまうかも知れません…。
目次
サイトタイプ別のかっこいい企業ホームページ
今回は、以下のタイプ別にかっこいいホームページを厳選しました。
- コーポレートサイト：2サイト紹介
- ECサイト：2サイト紹介
- オウンドメディア：2サイト紹介
これからホームページを作る企業は、以下のホームページの特徴を参考にしてください。
かっこいいコーポレートサイトデザイン事例
かっこいいホームページとして、以下の2つの企業を紹介します。
- トヨタファイナンス株式会社
- 穂垂亭
それぞれを選んだポイントを順に解説します。
トヨタファイナンス株式会社
トヨタファイナンス株式会社のホームページは、ファーストビューに3Dで動きのある素材をしています。¥さらに動的な素材を使用しているため、ユーザーは飽きずにホームページに滞在できます。
デザインに注力するだけではなく、オフィスの風景やスタッフの表情がわかる画像をトップページに配置しているのもブランディングになります。
穂垂亭
旅館とレストランを営む穂垂亭（ほたるてい）のホームページは、歴史ある建物の質感を見事に再現しています。モノトーンを基調にしているので、温泉や館内の写真に自然と引き込まれます。
利用客にとってわかりやすいように、トップページにアクセスや周辺のアクティビティを大きく掲載しており、ユーザビリティの面でも優れたホームページです。
コーポレートサイトを作る際は、ユーザーに伝えたい情報を優先的にトップページに配置しましょう。
かっこいいECサイトデザイン事例
ECサイトはホームページ内で購入まで完結するため、デザイン性だけではなく見やすさと使いやすさも重要です。
- R.L waffle cake
- バターサンド専門店PRESS BUTTER SAND
上記のECサイトを選んだ理由を解説します。
BAKE
BAKEは、タルト専門店として有名なお菓子となります。
ページ上部にショップ一覧、オンラインショップ、モバイルオーダーなど「購入したい」時にすぐに購入ページへ遷移できる導線設計を構築しています。また、左下には特集としてポップアップを掲載することで、キャンペーン情報を多くのユーザーに届ける事ができます。
シリーズや用途から商品を検索できるようになっているので、ギフトを選ぶ際も目当ての商品を見つけやすいでしょう。タルトの色味である黄色を基調としたメリハリのあるデザインもシンプルながら高級感を演出しています。
バターサンド専門店PRESS BUTTER SAND
バターサンド専門店PRESS BUTTER SANDは、バターサンドに特化したECサイトです。通常のギフトだけではなく「eギフト」にも対応しているので、遠く離れた家族や友人、SNSで知り合った知人への贈り物もECサイト内で完結します。
個別に撮影された高品質な商品画像を大きめに表示しているので、ユーザーの購買意欲が高まりやすい設計になっています。
かっこいいオウンドメディア
オウンドメディアは、業種やジャンルによってコンセプトが大きく異なります。今回は以下の2つのオウンドメディアを紹介します。
- となりのカインズさん
- グーネットマガジン
どちらも記事だけではなく、さまざまなコンテンツを発信しているので、オウンドメディア作りの参考にしてください。
となりのカインズさん
となりのカインズさんは、ホームセンター「カインズホーム」が運営するオウンドメディアです。家電や室内の掃除に関する情報だけではなく、DIYのコツやガーデニングの情報も発信しています。
またオウンドメディアの内容も面白く、読みやすいデザインを構築しているためユーザー体験が非常に良いサイトとなります。白をベースに、カインズホームのイメージカラーの緑を取り入れた優しい配色が特徴的です。
記事コンテンツの他に動画コンテンツや連載企画も発信しているので、ユーザーの生活全般に寄り添ったオウンドメディアになっています。
グーネットマガジン
中古車の売買でお馴染みの「goo-net」が運営しているのが、グーネットマガジンです。新車情報や目的別の中古車のおすすめ紹介、大人の自動車選びなどの連載も掲載しています。
差し色としてgoo-netのイメージカラーの赤を使用し、ユーザーの使いやすさを考慮した設計になっています。
特に、トップページ下部にメーカー・ブランドから記事を探せる項目があるので、特定のメーカーや車種の情報を求めているユーザーは検索の手間を省略できるでしょう。
業種別かっこいい企業ホームページデザイン事例
ホームページは、業種によってもデザインや求められる機能が異なります。
- 病院・クリニック：2サイト紹介
- 不動産業：2サイト紹介
- 小売店：2サイト紹介
- 士業：2サイト紹介
上記の業種の中から、かっこいいホームページをご紹介いたします。
病院・クリニックでかっこいいホームページ
病院やクリニックのホームページで大切なのが、清潔感と安心感です。検索したユーザーが安心して診療に行ける雰囲気作りが欠かせません。
- 東京大学医学部附属病院
- 虎の門病院
今回は上記の病院のホームページを紹介します。
東京大学医学部附属病院
東京大学医学部附属病院のホームページは、清潔感のある白と水色を使って清潔感のあるデザインになっています。
ユーザーがアクセスしてから画面に最初に表示されるファーストビューに、予約センターの電話番号と予約ページを掲載しているのが印象的でした。体調が悪い方や緊急の場合でも、ホームページ内を検索せずに予約が可能です。
また、トップページ下部にgooglemapを埋め込みしてあるので、googlemapで検索しなくても周辺情報を取得できます。外来や入院、その他病院の取り組みも下層ページに掲載しているので、必要に応じて情報を探しやすいホームページです。
虎の門病院
虎の門病院のホームページは、文字と画像のバランスに優れたデザインが魅力のホームページです。
トップページのメインビジュアルは横幅いっぱいに配置するホームページが多い中、虎の門病院は左右に診療科やセンター案内、初診の方や予約確認など患者にとって重要な情報を掲載しています。
ホームページにアクセスしてすぐに目的のリンクを見つけられるので、ユーザーにとって使いやすいホームページになっています。青のボタンにグラデーションを使用するなど、細部までこだわって制作されているホームページです。
不動産業でかっこいいホームページ
不動産業でかっこいいホームページとして、以下のホームページを紹介します。
- CENTURY 21 住まい館
- GRAND DESIGN
A-POSITION
A-POSITIONのホームページは、画像を多く使用していますがデザイン性に優れていてスッキリと見えるのが特徴です。
それぞれのコンテンツはフェードインやスライドなどの動きを付けているので、ページをスクロールしても飽きを感じさせません。また、在籍するスタッフの明るい写真とコメントを掲載しているので相談しやすい雰囲気を感じます。
個別ページに移動しなくても、物件の一覧ページで以下のような情報を確認できるのもユーザーにとって使いやすい要素です。
- 外観写真
- 最寄り駅
- 間取り
- 面積
- 賃料・管理費・敷金・礼金
メニューバーがページ上部に固定されているので、いつでも物件検索や契約に関する情報にアクセスできる設計も魅力的です。
GRAND DESIGN
GRAND DESIGNのホームページは、アニメーションを駆使した動的なデザインが印象的です。画像を多く使用していながら読み込み速度も速いので、ユーザーはストレスなく物件選びができます。
白をベースにしつつ、赤の濃淡で統一感のあるデザインでまとめています。トップページに不動産コラムへのリンクがあるので、初めて不動産を探す方は有益な情報を得られるでしょう。
小売店でかっこいいホームページ
小売店のホームページは、それぞれの企業の特色や商品が強く反映される傾向にあります。
- 小川ぶどう園
- 木村石鹸
今回は異なる商品を提供している小売店のホームページを紹介します。
小川ぶどう園
小川ぶどう園は、巨峰やマスカットを販売している小売店です。ホームページもぶどうの色を基調にし、トップページに商品や直売所の情報を掲載しています。
生産者の小川さんの写真や収穫の様子も見られるので、消費者は安心してぶどうを購入できるでしょう。小川ぶどう園のホームページは、ユーザーにとって安心できる温かみのあるホームページになっています。
木村石鹸
石鹸の製造を始めて100年の歴史のある木村石鹸は、メインビジュアルに私たちが普段目に出来ない石鹸の製造風景を掲載しているのが特徴です。
石鹸のイメージに合わせて白やベージュなどの淡い色合いで構成されたデザインは、ホームページを訪れたユーザーに落ち着きを与えてくれます。
ショッピングカート機能もありますが、ジャーナルには社長のブログやコラム記事が掲載されていて、木村石鹸の開発工程やスタッフの日常も確認できます。
士業でかっこいいホームページ
士業のホームページでは、堅実さと法律やトラブル解決に関する情報発信が重要視されています。
- 税理士法人 創経
- アステル法律事務所
今回は作りの異なる上記のホームページを紹介します。
名北会計グループ
名北会計グループのホームページは、イラストを多く使用していて親しみやすさを感じやすいのが特徴です。
ホームページ内のコンテンツをテキストのみで解説すると難しくなりやすい業種ですが、図解を用いて視覚的に分かりやすい設計になっています。
グループ企業それぞれにテーマカラーを設定しているので、目的に応じて情報を探しやすく士業のホームページでは写真を用いるケースが多いですが、あえてポップなイラストと図解を使用することで他社との差別化に成功しています。
BESO
BESOのホームページは、オレンジを差し色として使用し、シンプルながらかっこいい印象を感じます。
コンテンツの配置や背景を所々変えるなど、細部のデザインまでこだわって制作されています。また、ページ上部のメニューバーだけではなく、ページ右下に資料請求と無料相談のウインドウを固定している点もポイントです。
ホームページ全体から明るさを感じるだけではなく、かっこいいホームページとの両立を実現しています。
かっこいいホームページを探せるギャラリーサイト5選
- 目的のデザインや業種からホームページのサンプルを探す際は、ギャラリーサイトを参照するのがおすすめです。今回は、数多くのホームページが掲載されているギャラリーサイトから、以下の5つをご紹介いたします。
上記のギャラリーサイトには業種や形態を問わず、数多くのホームページが掲載されています。
どんなデザインを採用したらいいか迷っている方は、上記のギャラリーサイトからイメージに近いホームページを探してみましょう。参考ホームページは、制作会社にホームページ制作を依頼する際にも大切な情報になります。
かっこいいホームページの作り方
かっこいいホームページに欠かせない要素として、以下の5つがあります。
- レイアウト
- 配色
- 必要な情報（テキスト、画像、動画など）
- アニメーション
- レスポンシブデザイン
まずは参考となるホームページを選び、基本的なレイアウトや配色を決めます。その後、ホームページに必要な情報を整理し、優先度の高いものはトップページに、より詳細に記載したいものは個別ページにわけましょう。
基本デザインと必要な情報が決まったら、ユーザーの離脱を防止するためにアニメーションなどのエフェクトを選定します。
かっこいいホームページにするためには、PCとスマートフォンでデザインが崩れないレスポンシブデザインを採用するのがおすすめです。
かっこいいホームページを作る際のメリットとデメリット
ホームページを作る際に、以下の項目はどれも集客や売上にかかわる重要な項目です。
- 見た目
- ユーザービリティ
- 画像や動画
以下、それぞれの項目を重視する際のメリットとデメリットを表でまとめました。
| 項目 | メリット | デメリット |
|---|---|---|
| デザイン性 | ブランディング効果が高い | デザイン費用がかかる |
| ユーザビリティ | コンバージョン率や滞在時間が向上 | 使い勝手を優先しすぎると簡素なデザインになりやすい |
| 画像や動画 | 多いほどユーザーへ与えるインパクトが大きくなる | 容量の大きい画像や動画は読み込み速度の低下につながる |
ホームページで使用する画像や動画はあらかじめ圧縮し、ユーザーがアクセスしてもすぐに素材が表示されるようにしましょう。Googleの調査によると、以下のように読み込み速度が遅くなるにつれてユーザーの直帰率が増加することが示されています。
| 読み込み速度 | 直帰率 |
|---|---|
| 1秒→3秒 | 32%増加 |
| 1秒→5秒 | 90%増加 |
| 1秒→6秒 | 106%増加 |
| 1秒→10秒 | 123%増加 |
Page Speed Insightsを使用して、かっこいいだけではなく、読み込み速度が速く使いやすいホームページを提供しましょう。
かっこいいホームページは長期的な売上増加につながる
今回はかっこいいホームページの事例と作り方を中心に紹介しました。かっこいいホームページは長期的な売上増加につながりますが、同時にSEO（検索エンジン最適化）対策も行いましょう。
検索しても上位に表示されないと、ホームページを見てもらえなくなります。
クーミル株式会社では、長期的に売上につながるためのSEO対策を提案し、ホームページからの集客を支援しています。ホームページの新規制作や作り直しからでも対応できるので、お気軽にお問い合わせください。
