おしゃれなホームページ15選！現役Webデザイナーが本気出して選んでみた
▼記事の内容をスライド形式でまとめた資料はコチラからDL▼
Download
せっかくホームページを作るなら、おしゃれで今っぽいデザインにしたいと思う人は多いのではないでしょうか。しかし、おしゃれの感じかたは人それぞれ。ちなみに筆者がおしゃれに必要だと思うポイントは次の5つです。
- ブランド・会社の雰囲気・世界観が伝わってくる
- 余白・文字・画像の大きさのバランスがとれている
- 初めてサイトを見たときに印象に残りやすい
- 装飾や色数は最低限使用し洗練されている
- 何ができるのか分かりやすい、サイトが使いやすい
上記のようなおしゃれポイントを押さえ、誤字脱字のないしっかりとした情報をホームページに載せてみましょう。すると、ユーザーが安心感を得て商品を購入したり、お問い合わせをしてみたり…と次のアクションにつながっていくメリットが生まれると思います。
今回はそんなおしゃれポイントが随所に散りばめられた信頼感のあるホームページを、業界別に15サイトご紹介します。
目次
食品・飲食サービス
食品をアピールする際は、ユーザーに「おいしそう」「食べてみたい」と思われることが一番重要なため、写真の鮮やかさやみずみずしさ（いわゆるシズル感）は特にこだわりたいところです。
いくら健康で美味しさが売りの商品でも、写真の解像度が悪かったり彩度が低いだけで美味しそうに見えず、興味を持ってもらえない可能性があるので注意が必要です。
CRISP SALAD WORKS クリスプ・サラダワークス
自分好みのサラダをオーダーできる、カスタムサラダ専門店「CRISP SALAD WORKS」のホームページです。
メインビジュアルではコントラストがはっきりした鮮やかなサラダたちに目を惹かれ、野菜嫌いな筆者でもおいしそうと感じられます。
商品詳細ページではテキストが簡潔にまとまっており、材料紹介エリアも写真がメインの構成になっているので、直感的に内容がわかります。
上記のキャプチャーでは分かりにくいですが、テキストは深い緑色、背景は薄いベージュという落ち着きのあるシンプルな色使いにすることで、鮮やかな商品をより引き立たせています。
山梨果実菓子 和乃果
果実にこだわったお菓子を販売している「山梨果実菓子 和乃果」のホームページです。
こちらも引き込まれるような美しいメインビジュアルですが、自慢の商品をファーストビュー（ユーザーが最初に目に入る領域）で見せないという余裕のあらわれが、品の高さを感じさせます。
商品写真はグレーの背景に商品だけというシンプルな見せ方で高級感を醸し出していますが、材料である果実の写真は、シズル感がありフレッシュな印象を受けます。
愛でたまご
長崎県島原市の養鶏場で生産されたブランドたまご「愛でたまご」のホームページです。
「おめでたい日・たいせつな日に食べてほしいおいしいたまご」というコンセプトにあったポップな写真と、ゆるかわいいイラストがうまく組み合わされています。
フォントや装飾に丸みをつけることで柔らかい印象を与え、ホームページ全体にデザインの統一感があります。
見ているだけで筆者の都会で荒んだ心が浄化されそうです。
建設・不動産
マイホームや不動産の購入は人生で特に大きな買い物のひとつです。
そんなビッグイベントを任せてもらうためには、ユーザーから信頼感を得ることがとても重要です。
建設・不動産業界のホームページで信頼感を得るためのポイントは、「実績紹介」「人の顔が見える」「会社情報」がしっかり掲載されていることなどがあげられます。
暮らしを自由にするオフィス12
株式会社リビタが運営する、シェアオフィス、レンタルオフィスサービス「オフィス12（ジュウニ）」のホームページです。
縦スクロールをせず同じ画面で要素が切り替わるスタイリッシュな動きが魅力です。
サービス名にある「12」を背景の一部にアレンジするなど、遊び心がある個性的なデザインがかっこいいですね。
松栄建設
神奈川県横浜市にある建築会社「松栄建設」のホームページです。
しあわせをつくることをモットーとしているからか、全体のデザインは丸みがあり優しい印象を受けます。
商品だけでなくスタッフがうつっている写真を使用することで、顔が見える安心感があります。
ReeL株式会社
住宅・店舗・商業施設などの新築やリフォームの設計・施工を行う「ReeL株式会社」のホームページです。
ホームページを開いた瞬間、極太ゴシックのキャッチコピーが目に飛び込んでくるので非常にインパクトがあります。
色味はモノトーンで統一されていますが、マウスポインターの変化や、画面いっぱいのカルーセルなどユーザーを飽きさせない工夫が随所に施されています。
大胆に見えて実はしっかり作りこまれているギャップがたまりません。
宿泊
宿泊やレジャー系のホームページでは、ユーザーがそこに行くとどんな体験ができるかをわかりやすく伝えることが大切です。
そのため食品業界と同様にビジュアルが命です。ただ写真を大きく見せるだけでなく、＋αのサービス面や清潔感もアピールしていきましょう。
グランアップル神戸三田
手軽にグランピングやBBQが体験できるサービスを提供している「グランアップル神戸三田」のホームページです。
各コンテンツのタイトルにロゴをあしらった装飾や、画面を飾るイラストなど細かいこだわりを感じます。
家族・友達・カップルなどを想定したフォトギャラリーがあり、これによりユーザー自身がサービスを体験した時のイメージがしやすくなります。
The Beach Club SANDALWOOD
種子島にある一日一組限定のプライベート・ヴィラ「The Beach Club SANDALWOOD」のホームページです。
ヴィラと空の境目が一瞬わからない美しいファーストビューが印象的です。
境界線をなくすことで日常からの解放感や、「照明付いているけど、外明るいじゃん、これ何時！？」という幻想的な雰囲気をかもし出しています。
全体的に写真を大きく使用し、テキストは必要最低限で洗練されています。
しかしアメニティ・カフェ・マリンスポーツ・レンタカー手配など、ユーザーが気になる情報はしっかり掲載されており安心感を与えます。
ちなみにヴィラの外壁は白いようなので、種子島の空が空間を青く見せているのでしょう（撮影した時間がずっと気になる）。
古民家宿TOKITOKI
長崎県にある築190年の歴史を持つ「古民家宿TOKITOKI」のホームページです。
風情のある写真と縦書きのコピーがノスタルジックな雰囲気をかもし出しています。
お宿のご紹介では、写真と間取り図の位置が連動しており、初めて利用するユーザーにも優しい構成になっています。
ちなみにメインビジュアル下の「よう来ござったのまぁい」の方言の意味を調べてみましたが、はっきり根拠のあるソースは見つけられませんでした……。
製造
製造業は会社同士の取り引きが多いため、ビジュアルの他にも「技術力」や「誠実さ」をしっかり伝えられるかが重要となってきます。
光束工業
山口県にある薄板金属加工を得意とする部品製造会社「光束工業」のホームページです。
適度なマージンとテキストの大きさのバランスが良く、すっきりと見やすい構成になっています。
見出し・本文・写真のレイアウトがしっかりパターン化されているので、初めてコーポレートサイトをデザインする人は、フォントサイズやマージンの取り方などのルールを参考にしてみるといいと思います。
ブルーメンシュトラウス
美容師さんや花を取り扱う人が使用するシザーケースを販売する「Blumenstrauss（ブルーメンシュトラウス）」のホームページです。
色を組み合わせて自分好みのシザーケースをシミュレーションし、そのままオーダーできるというユーザビリティのよさが光ります。
商品写真がカラフルなため、背景やテキストはシンプルにし、商品に目が行くようになっています。
玉川釉薬
タイルに色と艶を出す「釉薬（ゆうやく）」を研究・製造・販売している「株式会社玉川釉薬」のホームページです。
釉薬のどんな色でも生み出せるという性質を、ホームページでも背景色をランダムに変化させることで表現しているように感じます。
テキストや写真の浮かんでは消えるような動きもページ全体のムードに合っています。
医療・福祉
医療系は患者から「安心感」「信頼感」を得るために、外来以外にもスタッフ・入院・検診など詳細な設備の紹介が必要です。
また、医療機関のホームページでは、患者等の利用者保護の観点から医療法に基づいた「医療広告ガイドライン」を遵守しなければいけないので、注意してください。
ヘルスケアアプリ『みんなの家庭の医学』
『家庭の医学』がアプリとして生まれ変わったヘルスケアアプリ『みんなの家庭の医学』のホームページです。
グラデーションやうっすらとしたシャドウなど、デザインのトレンドを随所に取り入れています。
キーカラーのオレンジは「幸福感」や「元気」などのポジティブな印象を与えるので、明るいイメージを出したいときにおすすめです。
筆者のお気に入りホームページの1つです。
桜十字病院
熊本県熊本市にある「桜十字病院」のホームページです。
白をベースに、見せたいポイントでパステルカラーを使用した、清潔感とやさしさを感じるデザインが印象的です。
「病院への行き方を知りたい」や「受付時間を確認したい」などのユーザーがよくアクセスするページへのリンクが、ほぼすべてのページの下部に設置されており、ユーザーの立場に立った思いやりの心を感じます。
診療スケジュールでは医師の名前にマウスを乗せる（スマホ版の場合タップする）と顔写真付きの詳細情報が表示されるので、医師が気になるユーザーにはうれしい機能です。
社会福祉法人 愛和会
保健福祉サービスを提供している「社会福祉法人愛和会」のホームページです。
メインビジュアルがカルーセルになっており、3つのサービスを選択でき、マウスオーバー時の要素の変化など、細かい動きでユーザーを飽きさせない工夫がされています。
上記のようなおしゃれなホームページをもっと見たいという人は、筆者おすすめの参考ギャラリーサイトも紹介しているので、下記リンクからぜひ参考にしてみてください。
おしゃれは見た目だけじゃない！
今回は業界別に15のホームページのおしゃれポイントを紹介しました。
ビジュアル面だけでなく、使いやすさ、オブジェクトの動き、キャッチコピーなど様々な要素をトータルして高クオリティなものをおしゃれと感じるのではないでしょうか。
デザインのイメージがついてきたら「マウスオーバーはこの動きにしよう」、「ここにボタンを置いた方が使いやすいかな」などユーザーの立場にたって、ホームページを立体的に考えてみると、視野が広がりもう一段階うえのレベルのホームページになっていくと思います。
「うちもこんなWebサイトがほしい…！！」とワクワクした方は、ぜひプライムナンバーズにご相談ください。300社以上のWebサイト制作を経験してきた制作チームが、デザインからキャッチコピーまで「まるっ」と担当いたします。
Webサイト、LP、広告バナーなどの制作会社をお探しの方は、以下のボタンからお問い合わせください。
