ホームページの作り方

【業種別】おしゃれデザインのホームページ33選

企業ブランディングを構築する際、ホームページのデザインはとても重要なものとなる。

おしゃれなホームページを作る際の参考になるよう、優れたデザインのホームページを集めてみた。

職業別に掲載しているので、是非ご覧頂きたい。

ホームページ制作について

飲食店のおしゃれHPデザイン(6社)

まずは飲食店・レストランの業種から6社のホームページをご紹介したい。

金のダイニング 鮪金

鮪金

参照:http://www.tunakin.jp/

東京都銀座にあるお寿司屋さん「鮪金(つなきん)」のホームページ。テキストは横書きと縦書きを織り交ぜており、和の重厚感を表現している。

東京十月

東京十月

参照:https://www.tokyo-jugatsu.com/

南青山にある居酒屋「東京十月」のホームページ。フルスクリーンで表示される背景画像のインパクトは大きく、画面右下にはサービス紹介動画が埋め込まれている。

八屋

八屋

参照:http://8ya.jp/

都内にある日本茶スタンドカフェ八屋のホームページ。スライダーで切り替わるメインビュー画像自体にもアニメーションを付けることで動きのあるデザインに仕上がっている。

余韻

余韻

参照:https://gion-yoin.jp/

京都市にあるレストランバー祇園 余韻のホームページ。バーとレストランで左右2分割に分けられた珍しいデザインである。

うしごろ

うしごろ

参照:http://ushigoro.com/

都内に展開する焼肉店うしごろのホームページ。英語と日本語の2か国語対応になっており使い勝手も良いホームページ。

島原 乙文

乙文

参照:https://shimabara-otobun.com/

京都市内にある京料理「島原 乙文」のホームページ。ワンカラムの縦長デザインだがグリッドで左右分割することでレイアウトにリズムを持たせている。

医療・介護のおしゃれHPデザイン(4社)

次に、医療関係のホームページを4社ご紹介したいと思う。

上田皮膚科

上田皮膚科

参照:https://uedahifuka.com/

長崎県大村市にある上田皮膚科のホームページ。ロゴデザイン含めとても柔らかい印象を与えるデザインとなっている。

大塚医院

大塚医院

参照:https://otsuka-clinic.com/

下関市にある大塚医院のホームページ。メインビューには画像を使用せずテキストのみのシンプルなデザインだが、それであっても印象に残る優れたデザイン力。

三川矯正歯科

三川矯正歯科

参照:https://mikawa-kyosei.jp/

神戸市内にある三川矯正歯科のホームページ。縦長のマルチカラムデザインになっておりユーザーの導線までをしっかりと設計している。

セントラルクリニック

セントラルクリニック

参照:http://www.centralclinic.info/

名古屋市内にあるセントラルクリニックのホームページ。白と水色を基調とした爽やかなデザインになっている。ブロック毎にフェイドイン効果を付けることで動きのあるホームページを演出している。

ホテル・旅館のおしゃれHPデザイン(5社)

次に、ホテル・旅館などの宿泊施設のホームページ5社の紹介となる。

古民家宿るうふ

るうふ

参照:https://loof-inn.com/

山梨県内で古民家宿を営む株式会社るうふのホームページ。アニメーション部分がかなり緻密に作り込まれておりストーリー性のあるホームページとなっている。

MAOIQ

参照:https://maoiq.jp/

北海道にあるバケーションハウス「MAOIQ」のホームページ。写真をコンテンツのメインにしており、ブランディング構築に長けたデザインのホームページである。

日和ホテル

日和ホテル

参照:https://ginza-east.hiyori-hotel.jp/

日和ホテルのホームページ。デザイン性ももちろんのこと、導線設計までがしっかりと作り込まれている。ユーザーが迷子にならず目的のページに辿り着くことができる。

MEMU EARTH HOTEL

memu.earthhotel

参照:http://memu.earthhotel.jp/

北海道にあるホテル「MEMU EARTH HOTEL」のホームページ。縦方向の画像スライダーを採用しており、映画のフィルムを観ているかのような気分になれるホームページ。

奥の湯

奥の湯

参照:https://www.okunoyu.com/

阿曽黒川にある旅館 奥の湯のホームページ。マルチカラムデザインでメリハリのあるデザインを表現。5か国語対応でユーザビリティも素晴らしい。

士業のおしゃれHPデザイン(5社)

続いては士業となる。特に堅いデザインの多い業種でもあるが、その中でもデザイン性の高いホームページを5社紹介したいと思う。

税理士法人クオリティワン

税理士法人クオリティワン

参照:https://q-one.jp/group-ta/

東京都にある税理士法人クオリティワンのホームページ。全ページにおいて背景画像にアニメイラストを用いており、士業ではかなり異質なデザイン。

あおば会計事務所

あおば会計事務所

参照:https://aoba-kaikei.net/

広島市内にある「あおば会計事務所」のホームページ。写真は一切使わずにイラストでのデザイン構築を行っている。パララックス効果もあり奥行きあるデザインに仕上がっている。

上田・小川法律事務所

上田・小川法律事務所

参照:https://uedaogawa-lo.com/

京都にある上田・小川法律事務所のホームページ。jQueryでページ全体に渡ってアニメーション効果を付与しており、動きのあるデザインとなっている。

神戸マリン綜合法律事務所

神戸マリン綜合法律事務所

参照:http://kobemarin.com/

神戸市内にある神戸マリン綜合法律事務所のホームページ。TOPページはテキストのみで構成されているにも関わらず目を引くデザイン。

弁護士法人法律事務所 瀬戸パートナーズ

弁護士法人法律事務所 瀬戸パートナーズ

参照:http://www.segou-partners.com/

兵庫県内に複数の事務所を構える瀬戸パートナーズのホームページ。フォントサイズも大きめ、コンテンツがすっきりとして非常に見やすいデザインになっている。

不動産・建築のおしゃれHPデザイン(5社)

次に不動産・建築関連の企業ホームページを5社ご紹介したい。

ECOLA

ECOLA

参照:https://ecola.co.jp/

宮城県にある不動産会社「株式会社エコラ」のホームページ。ハンバーガーメニューが縦に並んでいる珍しいデザインの1つ。

埼玉外構

埼玉外構

参照:https://fujimino-gaikou.com/

埼玉県ふじみ野市にあるエクステリアショップ。富山工房のクライアントさまでもあり、テンプレートデザインを用いて低予算での制作を実現。

建築と時間と妹島和世

建築と時間と妹島和世

参照:https://kazuyosejima-movie.com/

建築界のノーベル賞とも称されるプリツカー賞を受賞した建築家・妹島和世氏が手がけた大阪芸術大学の新校舎に関するホームページ。縦書きテキストと横書きテキストが共存しており、とても面白みのあるデザイン。

ひとともり一級建築士事務所

ひとともり一級建築士事務所

参照:https://hitotomori.net/

奈良県にある「ひとともり一級建築士事務所」のホームページ。メインビューには写真ではなく動画を埋め込んでおり、動きのあるホームページを表現している。

エムトラスト株式会社

エムトラスト株式会社

参照:https://www.m-trust.co.jp/

都内で住宅分譲事業を行っているエムトラスト株式会社のホームページ。アニメーション映像を取り入れて躍動感の溢れるデザインとなっている。

教育機関のおしゃれHPデザイン(4社)

続いて大学・幼稚園等の教育機関ホームページ4社のご紹介となる。

立正大学 地球環境科学部

立正大学

参照:http://ris-geo.jp/admission/

立正大学地球環境科学部の特設サイト。「?」マークがデザインのメインになっておりスクロールに合わせて追尾してくる。とても面白みのあるデザインである。

あいち造形デザイン専門学校

あいち造形デザイン専門学校

参照:https://www.design.ac.jp/special/

あいち造形デザイン専門学校の特設サイト。ホームページ内にクイズを答えるコンテンツも用意されており、見るだけではなくユーザーの楽しめるホームページになっている。

愛農学園農業高等学校

愛農学園農業高等学校

参照:https://ainogakuen.ed.jp/

三重県にある愛農学園農業高等学校のホームページ。今では珍しい3カラム構造にも関わらず、とてもおしゃれに仕上がっている。

おへそグループ

おへそグループ

参照:http://oheso-group.com/

佐賀県内で保育園等を複数展開する「おへそグループ」のホームページ。フォントスタイルなどを上手に活用して柔らかいイメージのデザインとなっている。

美容・エステのおしゃれHPデザイン(4社)

続いては美容・エステ関連のホームページ5社のご紹介となる。

MILLOR

MILLOR

参照:https://www.millor.jp/

神奈川県にある美容室MILLORのホームページ。パララックス効果により奥行きを表現しており、非常に優れたデザイン性。

GIFT

GIFT

参照:https://hr-gift.jp/

都内にあるヘアサロンGIFTのホームページ。紺色と白色のツートーンカラーをベースにしており、男性的かつ洗礼されたデザイン。

ORIGAMI

ORIGAMI

参照:http://origami-hair.jp/

長野県にある美容院ORIGAMIのホームページ。スクロールボタンなど細部のデザインにまでこだわりが表現されている。

Bloom

Bloom

参照:https://bloom.ne.jp/

都内に展開するエステサロングループ「Bloom」のホームページ。フルスクリーンのデザインを採用しており、コンセプトが視覚的に伝わってくる。

おしゃれなWEBデザイン費用は高額?

ホームページデザインには、オリジナルデザインとテンプレートデザインの2通りが存在する。特徴は下記の通り。

オリジナル テンプレート
おしゃれ度
カスタイマイズ性
制作時間 長期間 短期間
制作料金 優秀なデザイナー程高額 格安

おしゃれなホームページが作りたい場合、基本的にはオリジナルデザインでの制作が必要となる。

また、費用が高額になる要因には下記の2点が挙げられる。

  • アニメーション効果の使用
  • 工数が増える

アニメーション効果の使用

文字や画像に動きを付けるアニメーションを実装するにはjQuery・JavaScriptといったプログラミング言語を使用する必要がある。

その分、制作時間(人件費)が膨らむことになる。

工数が増える

また、オリジナルデザインの場合は0からデザイン構想を練る必要があるため、デザイナーを挟んでのヒアリング・ワイヤーフレーム作成など、テンプレートデザインには必要のない工程が出てくる。

工数が多くなる分、制作費用も2~3倍になると考えて良いだろう。

まとめ

ここまで様々なホームページデザインデザインをご紹介させて頂いた。

テンプレートデザインであってもある程度のおしゃれなホームページは作成かのうである。

しかし世界に1つだけのこだわりあるデザインをご希望の場合はオリジナルデザインが必要となる。

富山工房においても、低予算でのテンプレートデザインから本格的なオリジナルデザインまで対応可能なので、是非お気軽にご相談頂きたい。

成長し続けるHP「富山工房」


インターネット上のホームページの半数以上が1日10アクセス以下。HPを作るだけでは集客できません。

月間1000万PVを集めるノウハウが凝縮されたコンサルティング型HP作成サービスです。
Web集客に必要なモノは全て揃えました。

ホームページ制作について