【最新版】おしゃれなホームページをタイプ別に解説。まとめサイト、制作会社も紹介します
「おしゃれなホームページを作りたい。でもどうすればいいんだろう？」
と思っている方のために記事を書きました。
おしゃれと一言でいっても、シンプルなデザインだったりにぎやかなものだったりとさまざまです。まずはどのようなデザインがいいのかイメージするところからはじめてみましょう。
おしゃれなホームページをタイプ別に紹介したのちに、まとめサイトや作り方を解説します。さいごにおしゃれなホームページ作りを得意としている制作会社も紹介します。
【目次】
サイドバーがないシングルカラムのデザインで、サイトが縦長なのが特徴。スマートフォンやタブレットでもパソコンと同様のレイアウトで閲覧できるメリットもあります。
スマートフォンやタブレットの普及により、シングルカラムはここ数年でトレンドになっているデザインです。
「求人検索」と「スタッフブログ」以外を1ページにまとめ、すっきりと整ったレイアウトになっています。上から順に、会社のコンセプトからサービスの流れ、エントリーフォームと続いており、ユーザーにとって使いやすいレイアウトです。
メニューの内容がすべて1ページにおさめているシングルカラム定番のレイアウトになっています。また、画像や文字にアニメーションがくわえられており、シネマグラフなど多くのトレンドが盛り込まれたサイトです。
トップページはシンプルにメニューのみ表示。各メニューはすべて1ページにおさめられているシングルカラムのレイアウトです。文字と画像は白と黒を基調としており、見た目もシンプルでおしゃれなサイトになっています。
「シンプルでおしゃれなホームページ」と同様にサイドバーがないシングルカラムのデザイン。掲載されている情報が多いので、それらをバランスよく各メニューのページに表示しています。
ユーザーが直感で目的のページにたどりつけるように、UI（ユーザーインターフェイス）も重視したデザインです。
ユーザーに伝えたことをトップページに大きく表示。詳細は各ページにリンクさせている見やすいレイアウトです。リンクへの導線がわかりやすく、迷いにくいサイトになっています。
ブランドイメージの高級感を出すために、落ち着いた色味の背景に黒やゴールドの文字をつかっています。また、各ページの文字数も少なくスマートな印象のサイトです。
ブランドカラーの赤と余白をうまく使ったデザインに加え、適度にアニメーションのあるスマートなサイトです。
たくさんの色や画像が使われていてにぎやかに見えるものの、デザインが統一されることでうるさくはなりません。サイトのイメージにそったデザインで統一されているのが特徴です。
複数の色をつかうことでにぎやかな印象です。また各パーツを四角と三角で構成することで、にぎやかなだけでなくおしゃれなデザインとなっています。
ハンドメイドイベントらしく、イメージにそったやさしい色使いやイラストのデザインです。すべてのページでデザインが統一されており、おしゃれな印象を与えてくれます。
画像がすべて丸みをおびていて優しい印象があります。また背景に壁紙の画像をつかってインテリアらしさを出したデザインのサイトです。
ユーザーに伝えたいことを動画にして、トップページの一番目立つところに載せます。ユーザーはサイトをひらいた瞬間に動画がとびこんでくるので、よりそのサイトの印象がつよく残るデザインです。
飛行機のメンテナンスの状況や離着陸のようすの動画がサイトのトップに掲載。それにより動画の印象がつよく残ります。
また各メニューがきれいに整列されており、おしゃれでありながら信頼感のある企業らしいホームページです。
メニューバーをトップページの最上部ではなく動画の下に配置し、より動画を強調したレイアウトです。ページをひらいた瞬間にほぼ全面が動画なので、強く印象に残るサイトデザインになっています。
トップページに一番最初に企業の理念やこだわりを伝える動画が使われています。「熱処理で世界の工業技術を支える」のメッセージとともに流れる作業現場の動画は、思わず見入ってしまうデザインです。
業界別や色別に検索できるまとめサイトが多く、よりイメージに近いおしゃれなサイトを見つけることができます。
たくさんあるおしゃれサイトのまとめの中から、厳選した9サイトを紹介します。
カテゴリが業界別、デザイン別、色別、サイトのタイプ別に分かれており、目的のサイトを見つけやすい構成になっています。ギャラリーサイトのように見やすいデザインなのも特徴です。
カテゴリや色のほか、タグで目的のサイトを検索できます。サイトが更新される頻度が高いので、定期的にチェックしたほうがよいサイトです。
カテゴリと色の2つを選んだ検索や、タグでの検索ができます。国内向けのサイトを作るのに、参考にしてはいかがでしょうか。
掲載サイトのキャプチャ画像のサイズをS、M、Lから選ぶことができます。Sだと多くのサイトを比較しながら見ることができるのでおすすめです。
1カラムや2カラムといったレイアウト別に検索できるのが特徴。そのほか、コンテンツやテイストで検索できます。運営者が各サイトに対するコメントを書いています。
ほぼ毎日2〜4サイトが追加されており、掲載されているサイトの数はとても多いです。業界別と色別で検索できます。
Webデザインだけでなく、パーツデザインやスマートフォンデザインなどのギャラリーも掲載されています。各ギャラリーの特徴が書かれており、目的のギャラリーにたどり着きやすくなっているのも特徴です。
各デザインについて、デザイン、ユーザビリティ、クリエイティビティなど6つの項目で評価されています。評価は運営者ではなくユーザーが行っているのが特徴です。
ここまでおしゃれなホームページのデザインを紹介しましたが、ここからはホームページの作り方をお伝えします。
まずはHTMLテンプレートです。HTMLテンプレートは、ホームページを作るのに必要なファイルと画像がセットになったものです。あらかじめ入っている画像や文章を、自分が入れたいものに差し替えるだけでホームページが完成します。
そのなかから無料で使えておしゃれなホームページが作れるHTMLテンプレートを3つ紹介します。
掲載する内容がそれほど多くなく、シンプルなサイトを作りたい場合におすすめのレイアウトになります。タブレットとスマートフォンの表示にも対応済みです。
サービスを紹介したい個人や小規模の会社で活用できるようなレイアウトになっています。またポートフォリオだけでなくブログを掲載することも可能です。
メニューバーがきれいにまとまっています。またSNSリンクもあるので、個人のポートフォリオサイトなどにおすすめのデザインです。
通常ホームページを作るにはHTMLやCSSといったプログラミングの知識が必要です。しかしWordPressを使えばそれらの知識は必要なく、文章と画像を準備するだけでホームページを作ることができます。
WordPressにはさまざまなデザインのテンプレートがあり、無料で利用できるものも豊富です。今回はそのなかから、3つのテンプレートを紹介します。
トップページはギャラリー形式で写真やイラストなどを見せることができます。ファッションサイトのようなおしゃれなホームページを作りたいかたにおすすめのテンプレートです。
メニューバーやSNSボタンの色味が統一されていています。ブログページは5つのレイアウトから選ぶことができ、自分の好みにカスタマイズできるのも特徴です。
イメージはあるけど自分でホームページを作るのが難しいかたは、制作会社にお願いする方法もあります。制作会社はたくさんありますが、そのなかでも特におしゃれなホームページを得意としている制作会社を紹介します。
無料でオリジナルのSEO対策を行ってくれるため、検索結果の上位に表示されることで高い集客率も期待できます。
実績と経験が豊富にあり安心して依頼することができます。また自社でコンテンツを制作しておりおしゃれなホームページ作りに定評があります。
おしゃれなホームページにはさまざまな特徴があります。デザインがシンプルなものもあれば、スマートなものやにぎやかなもの、動画をつかったものなどさまざまです。
またホームページを作るには、自分で作る方法と制作会社にお願いする方法があります。
「HTMLテンプレート」や「WordPressのテンプレート」を使えば、比較的かんたんにおしゃれなホームページを作ることができます。もし自分で作るのが難しいようでしたら、おしゃれなホームページ作りを得意としている制作会社にお願いしましょう。
とはいえ、おしゃれなホームページはあくまでも手段です。ユーザー体験を向上させる、つまり使いやすいサイトを最優先に考えることをおすすめします。
まずはご自身でどのようなイメージのホームページを作りたいのか、まとめサイトも含めてこれまでに紹介したサイトを見ながら考えてみてください。
と思っている方のために記事を書きました。
おしゃれと一言でいっても、シンプルなデザインだったりにぎやかなものだったりとさまざまです。まずはどのようなデザインがいいのかイメージするところからはじめてみましょう。
おしゃれなホームページをタイプ別に紹介したのちに、まとめサイトや作り方を解説します。さいごにおしゃれなホームページ作りを得意としている制作会社も紹介します。
【目次】
- シンプルでおしゃれなホームページ
- スマートでおしゃれなホームページ
- にぎやかでおしゃれなホームページ
- 動画を使ったおしゃれなホームページ
- おしゃれなホームページのまとめサイト9選
- おしゃれなホームページが作れるHTMLテンプレート
- おしゃれなホームページが作れるWordPressテンプレート
- おしゃれなホームページを依頼できる制作会社
- おしゃれなホームページを目的にせず、ユーザー体験アップを最優先で制作を
シンプルでおしゃれなホームページ
まずはシンプルでおしゃれなデザインを紹介します。サイドバーがないシングルカラムのデザインで、サイトが縦長なのが特徴。スマートフォンやタブレットでもパソコンと同様のレイアウトで閲覧できるメリットもあります。
スマートフォンやタブレットの普及により、シングルカラムはここ数年でトレンドになっているデザインです。
株式会社ライフワーク
株式会社ライフワークは、「すばらしい仕事を。すばらしい人生を。」がキャッチコピーの熊本の人材紹介会社のサイトです。「求人検索」と「スタッフブログ」以外を1ページにまとめ、すっきりと整ったレイアウトになっています。上から順に、会社のコンセプトからサービスの流れ、エントリーフォームと続いており、ユーザーにとって使いやすいレイアウトです。
画像出典：https://www.lifeandwork.co.jp/
KODOMOLOGY
子育て支援事業最大手の株式会社 JP ホールディングスと資生堂との合弁会社KODOMOLOGYのホームページです。メニューの内容がすべて1ページにおさめているシングルカラム定番のレイアウトになっています。また、画像や文字にアニメーションがくわえられており、シネマグラフなど多くのトレンドが盛り込まれたサイトです。
画像出典：http://www.kodomology.co.jp/
Volante Co Ltd
Volante Co Ltdは、撮影やマネジメント業務を行う株式会社ボランチのホームページです。トップページはシンプルにメニューのみ表示。各メニューはすべて1ページにおさめられているシングルカラムのレイアウトです。文字と画像は白と黒を基調としており、見た目もシンプルでおしゃれなサイトになっています。
画像出典：http://www.volante.cc/
スマートでおしゃれなホームページ
つづいてスマートでおしゃれなホームページを紹介します。「シンプルでおしゃれなホームページ」と同様にサイドバーがないシングルカラムのデザイン。掲載されている情報が多いので、それらをバランスよく各メニューのページに表示しています。
ユーザーが直感で目的のページにたどりつけるように、UI（ユーザーインターフェイス）も重視したデザインです。
インテル
CPUなどのパソコンの構成部品をつくっている半導体メーカーインテルの日本向けホームページです。ユーザーに伝えたことをトップページに大きく表示。詳細は各ページにリンクさせている見やすいレイアウトです。リンクへの導線がわかりやすく、迷いにくいサイトになっています。
画像出典：https://www.intel.co.jp/content/www/jp/ja/homepage.html
SHISEIDO THE STORE | 資生堂
SHISEIDO THE STOREは、資生堂の知見、技術、ブランド価値を体現したフラッグシップストアのホームページです。ブランドイメージの高級感を出すために、落ち着いた色味の背景に黒やゴールドの文字をつかっています。また、各ページの文字数も少なくスマートな印象のサイトです。
画像出典：http://thestore.shiseido.co.jp/
プロレド・パートナーズ | 戦略コンサルティングファーム
経営コンサルティングファームのプロレド・パートナーズのホームページです。ブランドカラーの赤と余白をうまく使ったデザインに加え、適度にアニメーションのあるスマートなサイトです。
画像出典：https://www.prored-p.com/
にぎやかでおしゃれなホームページ
次ににぎやかでおしゃれなホームページを紹介します。これまではおしゃれなサイトは控えめなレイアウトが多かったですが、2017年ころから流行りだしたデザインです。たくさんの色や画像が使われていてにぎやかに見えるものの、デザインが統一されることでうるさくはなりません。サイトのイメージにそったデザインで統一されているのが特徴です。
株式会社LITALICO 新卒採用サイト
就労支援事業や教育事業をおこなっている株式会社LITALICOの新卒採用サイトです。複数の色をつかうことでにぎやかな印象です。また各パーツを四角と三角で構成することで、にぎやかなだけでなくおしゃれなデザインとなっています。
画像出典：http://litalico.co.jp/recruit_students/
ヨコハマハンドメイドマルシェ
ヨコハマハンドメイドマルシェは、日本最大級のハンドメイドイベントのサイトです。ハンドメイドイベントらしく、イメージにそったやさしい色使いやイラストのデザインです。すべてのページでデザインが統一されており、おしゃれな印象を与えてくれます。
画像出典：https://handmade-marche.jp/
TOLI-LIFE.COM
カーペットやカーテン、壁紙などを製造販売する東リのインテリア情報サイトです。画像がすべて丸みをおびていて優しい印象があります。また背景に壁紙の画像をつかってインテリアらしさを出したデザインのサイトです。
画像出典：https://www.toli-life.com/
動画を使ったおしゃれなホームページ
さいごに動画を使ったおしゃれなホームページを紹介。ユーザーに伝えたいことを動画にして、トップページの一番目立つところに載せます。ユーザーはサイトをひらいた瞬間に動画がとびこんでくるので、よりそのサイトの印象がつよく残るデザインです。
日本航空株式会社
日本航空株式会社「JAL」の企業サイトです。飛行機のメンテナンスの状況や離着陸のようすの動画がサイトのトップに掲載。それにより動画の印象がつよく残ります。
また各メニューがきれいに整列されており、おしゃれでありながら信頼感のある企業らしいホームページです。
画像出典：https://www.jal.com/ja/
株式会社マリモ
広島県に本社のある総合不動産会社の株式会社マリモのサイトです。メニューバーをトップページの最上部ではなく動画の下に配置し、より動画を強調したレイアウトです。ページをひらいた瞬間にほぼ全面が動画なので、強く印象に残るサイトデザインになっています。
画像出典：https://www.marimo-ai.co.jp/
株式会社中信高周波
長野県にある高周波焼入などの熱処理やめっきなどの表面処理をおこなっている株式会社中信高周波のサイトです。トップページに一番最初に企業の理念やこだわりを伝える動画が使われています。「熱処理で世界の工業技術を支える」のメッセージとともに流れる作業現場の動画は、思わず見入ってしまうデザインです。
画像出典：https://www.chushin-koshuha.co.jp/
おしゃれなホームページのまとめサイト9選
これまでさまざまなタイプのホームページを紹介しましたが、おしゃれなホームページのイメージがわかないひとには「まとめサイト」をおすすめします。業界別や色別に検索できるまとめサイトが多く、よりイメージに近いおしゃれなサイトを見つけることができます。
たくさんあるおしゃれサイトのまとめの中から、厳選した9サイトを紹介します。
1. MUUUUU.ORG
MUUUUU.ORG（ムーオルグ）は、クオリティが高く縦に長いサイトを厳選して掲載したデザインポータルサイトです。カテゴリが業界別、デザイン別、色別、サイトのタイプ別に分かれており、目的のサイトを見つけやすい構成になっています。ギャラリーサイトのように見やすいデザインなのも特徴です。
画像出典：http://muuuuu.org/
2. I/O 3000
I/O 3000は、国内外問わずWeb制作の参考となるサイトを集めたWebデザインギャラリーサイトです。カテゴリや色のほか、タグで目的のサイトを検索できます。サイトが更新される頻度が高いので、定期的にチェックしたほうがよいサイトです。
画像出典：https://io3000.com/
3. WONDER BOOKMARKS
WONDER BOOKMARKS
画像出典：http://ww1.wonderboxstudio.com/
4. 81-web.com
81-web.comは、国内のサイトのみピックアップし、Webサイト制作に役立つ優れたデザインのサイトを集めたギャラリー＆リンク集です。カテゴリと色の2つを選んだ検索や、タグでの検索ができます。国内向けのサイトを作るのに、参考にしてはいかがでしょうか。
画像出典：http://81-web.com/
5. ズロック
ズロックは、運営者が日々おもしろいなっと感じた世界中のWebサイトを集めたWebデザインのリンク集です。掲載サイトのキャプチャ画像のサイズをS、M、Lから選ぶことができます。Sだと多くのサイトを比較しながら見ることができるのでおすすめです。
画像出典：http://www.zzrock.net/
6. WPデザインギャラリー
WPデザインギャラリーは、WordPressを使った国内外のサイトを集めたWebデザインギャラリーです。1カラムや2カラムといったレイアウト別に検索できるのが特徴。そのほか、コンテンツやテイストで検索できます。運営者が各サイトに対するコメントを書いています。
画像出典：http://wpgallery.kachibito.net/
7. イケサイ
イケサイは、いけてるサイト、かっこいいサイト、おしゃれなサイト、クールなサイトなどを運営者がピックアップして掲載しているサイトになります。ほぼ毎日2〜4サイトが追加されており、掲載されているサイトの数はとても多いです。業界別と色別で検索できます。
画像出典：https://www.ikesai.com/
8. Siiimple
Siiimpleは、国内や海外のおしゃれなWebデザインをまとめたサイトです。Webデザインだけでなく、パーツデザインやスマートフォンデザインなどのギャラリーも掲載されています。各ギャラリーの特徴が書かれており、目的のギャラリーにたどり着きやすくなっているのも特徴です。
画像出典：http://www.indeeex.com/foreign/siiimple.html
9. AWWWARDS
AWWWARDSは、世界中のすぐれたWebデザインを集めた海外のデザインポータルサイトです。各デザインについて、デザイン、ユーザビリティ、クリエイティビティなど6つの項目で評価されています。評価は運営者ではなくユーザーが行っているのが特徴です。
画像出典：https://www.awwwards.com/
おしゃれなホームページが作れるHTMLテンプレート
ここまでおしゃれなホームページのデザインを紹介しましたが、ここからはホームページの作り方をお伝えします。
まずはHTMLテンプレートです。HTMLテンプレートは、ホームページを作るのに必要なファイルと画像がセットになったものです。あらかじめ入っている画像や文章を、自分が入れたいものに差し替えるだけでホームページが完成します。
そのなかから無料で使えておしゃれなホームページが作れるHTMLテンプレートを3つ紹介します。
Link
Linkは、シングルカラムですっきりとしたレイアウトのHTMLテンプレートです。掲載する内容がそれほど多くなく、シンプルなサイトを作りたい場合におすすめのレイアウトになります。タブレットとスマートフォンの表示にも対応済みです。
画像出典：https://templatemag.com/demo/Link/
kreative
kreativeは、自分のサービスやポートフォリオを掲載できるHTMLテンプレートです。サービスを紹介したい個人や小規模の会社で活用できるようなレイアウトになっています。またポートフォリオだけでなくブログを掲載することも可能です。
画像出典：http://www.styleshout.com/demo/?theme=kreative
Ceevee
Ceeveeは、文字フォントが見やすく、おしゃれでシンプルなHTMLテンプレートです。メニューバーがきれいにまとまっています。またSNSリンクもあるので、個人のポートフォリオサイトなどにおすすめのデザインです。
画像出典：http://www.styleshout.com/demo/?theme=ceevee
おしゃれなホームページが作れるWordPressテンプレート
続いてWordPressを使ったおしゃれなホームページの作り方を紹介します。通常ホームページを作るにはHTMLやCSSといったプログラミングの知識が必要です。しかしWordPressを使えばそれらの知識は必要なく、文章と画像を準備するだけでホームページを作ることができます。
WordPressにはさまざまなデザインのテンプレートがあり、無料で利用できるものも豊富です。今回はそのなかから、3つのテンプレートを紹介します。
Fukasawa
Fukasawaは、白と黒を基調としたデザインのテンプレートです。トップページはギャラリー形式で写真やイラストなどを見せることができます。ファッションサイトのようなおしゃれなホームページを作りたいかたにおすすめのテンプレートです。
画像出典：http://www.andersnoren.se/themes/fukasawa/
UNWIND
UNWINDは、シンプルかつおしゃれなテンプレートです。メニューバーやSNSボタンの色味が統一されていています。ブログページは5つのレイアウトから選ぶことができ、自分の好みにカスタマイズできるのも特徴です。
画像出典：https://demo.siteorigin.com/unwind/
おしゃれなホームページを依頼できる制作会社
ここまでは自分でおしゃれなホームページの作り方を紹介しました。イメージはあるけど自分でホームページを作るのが難しいかたは、制作会社にお願いする方法もあります。制作会社はたくさんありますが、そのなかでも特におしゃれなホームページを得意としている制作会社を紹介します。
Web Design Aoi
Web Design Aoiは、東京と宮城(仙台市)に事業所があり、おしゃれを追求したホームページを作ってくれる制作会社です。
画像出典：https://xn--yck7ccu3lc4264ce4ay1qdwe.jp/
無料でオリジナルのSEO対策を行ってくれるため、検索結果の上位に表示されることで高い集客率も期待できます。
株式会社LIG
株式会社LIGは、東京上野にあり10年以上ホームページ制作を行っている制作会社です。実績と経験が豊富にあり安心して依頼することができます。また自社でコンテンツを制作しておりおしゃれなホームページ作りに定評があります。
画像出典：https://liginc.co.jp/
おしゃれなホームページを目的にせず、ユーザー体験アップを最優先で制作を
ここまでをおさらいします。おしゃれなホームページにはさまざまな特徴があります。デザインがシンプルなものもあれば、スマートなものやにぎやかなもの、動画をつかったものなどさまざまです。
またホームページを作るには、自分で作る方法と制作会社にお願いする方法があります。
「HTMLテンプレート」や「WordPressのテンプレート」を使えば、比較的かんたんにおしゃれなホームページを作ることができます。もし自分で作るのが難しいようでしたら、おしゃれなホームページ作りを得意としている制作会社にお願いしましょう。
とはいえ、おしゃれなホームページはあくまでも手段です。ユーザー体験を向上させる、つまり使いやすいサイトを最優先に考えることをおすすめします。
まずはご自身でどのようなイメージのホームページを作りたいのか、まとめサイトも含めてこれまでに紹介したサイトを見ながら考えてみてください。
