おしゃれなホームページの作り方を解説！事例やHTMLテンプレートも紹介

「ホームページを作ったものの、おしゃれに感じない……」
「おしゃれなホームページを作りたいけど、デザインセンスがない……」
「自社で作らずプロに外注すべき？業者を選ぶコツは？」

今回は上記のような疑問や悩みを解決すべく、おしゃれなホームページを作るポイントやデザインテクニックの解説に加えて、企業のデザイン事例やHTMLテンプレートについてもご紹介します。

インターネットやSNSで情報収集が当たり前になった今、ホームページの存在はマーケティングに置いて非常に重要な役割を果たします。同じサービスを提供しているA社とB社があったとして、おしゃれで洗練されたホームページを持つA社と、見づらくどこに何が書かれているか迷子になるホームページを持つB社では、おそらくA社に仕事を依頼する人が多いでしょう。

ぜひ、おしゃれなホームページ制作の参考にご覧ください。

おしゃれなホームページを作る5つのポイント

そもそもなぜ私たちはデザインを見ておしゃれだと感じるのか、おしゃれなホームページに隠されたデザインの法則を読み解いていき、ホームページ作りに落とし込んでいきましょう。

おしゃれなホームページを作るために重要なポイントは、次の5つです。

それでは一つずつ解説していきます。

①基本のレイアウトを知る

レイアウトとは、「配置・配列」のことです。

写真や文字が並んでいるだけなのに、何となくおしゃれに感じるのは、基本のレイアウトをおさえた上で、おしゃれに見えるようにアレンジが加わっているからです。おしゃれなホームページを見本にして作ったはずなのに「全然おしゃれに見えない」「おしゃれっぽさはあるものの見にくい」のは、本質的なレイアウトについて考慮されていないからと言えるでしょう。

基本のレイアウトを念頭に置いておけば、「だからここに配置しているのか」という理由が見えてくるはずです。

基本のレイアウトは以下の4つの要素です。

それぞれの具体例を見ていきます。

【基本のレイアウト①】近接

近接とは、同じ要素を持つコンテンツを近づけるレイアウトです。

私たちは近くに配置されたコンテンツを1つのグループだと認識するようになっていて、コンテンツ同士の距離が近ければ近いほど関連性が高くなると感じます。

【基本のレイアウト②】整列

整列とは、要素をきちんと並べるレイアウトです。

同じ階層にあるコンテンツを「これは並列した関係ですよ」と認識させられるだけでなく、見栄えや読みやすさにも影響します。

【基本のレイアウト③】反復

反復とは、同じデザインのグループを繰り返し使うレイアウトです。

具体的には、h2やh3といった見出しの装飾を統一化したり、まとまり（divで括った
ブロック）を反復させるレイアウト方法を指します。

【基本のレイアウト④】対比

対比とは、コンテンツに優先順位をつけて強弱をつけるレイアウトです。

優先順位が高く目立たせたいコンテンツは大きく配置したり、上の方に配列させたりといったシンプルなものですが、おしゃれなデザインを優先するあまり蔑ろにされがちな要素となっています。ホームページを見るユーザーに対して「この順番で読んでくださいね」と誘導するレイアウトを意識すれば、ユーザビリティの向上にも繋がります。

②色・配色が持つイメージを知る

コンテンツのレイアウトが決まったら、次に配色を考えていきます。色や配色もおしゃれなホームページを作る大事な要素で、「なんとなくおしゃれな色だから」と感覚で決めてしまうと、統一感がなく、パッとしない印象になりがちです。

そこで押さえておきたいのが下記の3つの基本ルールです。これらの基本ルールを押さえておくだけで、ぐっとおしゃれなホームページに近づいていきます。

例を見ながら詳しく見ていきましょう。

【色・配色の基本①】使用する色数を3色に制限する

服やインテリアでも同じことが言えますが、色の数が増えれば増えるほど、扱いが非常に難しくなっていきます。ですので、デザインやカラーコーディネートに自信がないという方は、使用する色数を3色に制限してしまいましょう。後ほど解説する黄金比にのっとって配色するだけで、おしゃれで洗練されたイメージを持ったホームページに仕上がります。

3色の選び方にもコツがあり、1つの色のベースに「暗い・中間・明るい」で選ぶ方法や、類似した色味で選ぶ方法、補色といってメインカラーと正反対のカラーと組み合わせる方法などがあります。

コーポレートカラーやブランドカラーがあれば、そのカラーを軸として色を選ぶことで「この色といえばこの会社」というような印象づけにもなります（例：NTT docomoと言えば赤、SoftBankといえば白と灰色、auと言えばオレンジ）。

【色・配色の基本②】6:3:1のバランスを意識する

3色に絞ったあとは、「6:3:1」のバランスを意識して配色していきます。きっちり分配することは難しいですので、あくまで目安として意識しておくだけで、とても配色しやすくなります。

上記のAppleのホームページを例に出してみると、「白＞薄いグレー＞濃いグレー」の順番に配色されているのが見えてきますね。

背景に色をつける場合は、サイトの大部分を占めることになりますので気をつけたいポイントです。

NTT docomoのブランドカラーは赤ですが、見てわかる通りパキッとした色味です。そのため、背景色として配置するには、ややアグレッシブと言えるでしょう。特にNTT docomoは幅広い客層を持つケータイ会社ですので、老若男女が安心して利用できるサイトになるよう、「白＞赤＞黄色」というバランスをキープしています。

ビビットピンクがブランドカラーの楽天モバイルでも、背景色にピンクを使用することを避け、「白＞ピンク＞黄色」という配色になっていることがわかります。

逆に、ターゲット層をググッと絞り込んでインパクトを持たせたいのであれば、背景色に強気の色味を配置しても良いでしょう。利用するユーザーに合わせた配色は、ユーザービリティの向上にもつながります。

【色・配色の基本③】色が持つイメージを活用する

コーポレートカラーやブランドカラーが決まっていない場合は、色が持つイメージを活用して「おしゃれ」をブランディングしていくのがオススメです。

ブランディングだけでなく、「幼児向けだとアピールするために黄色を選ぶ」「女性向けだとアピールするためにピンクなど淡い色を選ぶ」と、配色でターゲット層を絞り込む・ユーザーを限定する、という活用方法も可能ですね。

③文字・フォントが持つイメージを知る

レイアウトと配色に並んでおしゃれなホームページ作る際に重要な要素となるのが「文字・フォント」です。ここでは、文字・フォントが持つイメージについて見ていきましょう。

最近はデフォルトでおしゃれなフォントがたくさん配布されています。そのため、ホームページデザインだけでなく、プレゼン資料などを作成するにあたっても、文字について深く考えない方も多いのではないでしょうか。

しかし、文字について考慮すべき要素はフォントだけではありません。文字と文字の間の距離や、行と行の間の距離、大きさといった要素でも、おしゃれさを演出することができるのです。

【文字の基本①】フォント

フォントには「明朝体」「ゴシック体」「丸ゴシック体」「角ゴシック体」「行書体・教科書体」「手書き風」といった種類があり、次のような印象を与えます。

フォントを変えても野暮ったいなと感じるのは、次でご紹介する文字組みや文字の大きさが影響していることが多いものです。ここでは「おしゃれさ」をひとまず横に置いておき、ブランディングを重視していればOKです。

【文字の基本②】文字組み（文字間・行間・レイアウト）

文字組みとは、文字間や行間の空白、横書き・縦書きといったレイアウト、改行時の句読点の扱いなどを総称したものです。プロのデザイナーと素人で大きな差が出るのが、ずばりこの文字組みだと言えるでしょう。

基本の文字組みとして覚えておきたいのは下記のポイントです。

日本語にはひらがな・カタカナ・漢字と3種類の文字が存在しますが、ひらがなとカタカナは漢字と比べて余白が多いため、文字間の距離が不均等になり、違和感のあるデザインになってしまうのです。

サイト内のテキストブロックで考慮する必要はありませんが、トップ画像やバナー画像、デザイン性を重視したブロックなどでは気を配ってみてください。

【文字の基本③】文字の大きさ

スマートフォンの普及により、ターゲット層によってはホームページをスマホから見る方が多いというケースもあるでしょう。ホームページで見やすいとされている文字サイズは「12〜15ポイント」と言われていますが、パソコンで見やすい文字サイズでも、スマホで見ると小さくで読みにくい場合もあるため、パソコンとスマホで文字サイズを変えるなどの工夫が必要です。

また、トップ画像やバナー画像に文字入れをする際、文章内で文字の大きさを変えることでも印象を大きく変えられます。テクニックとしては「○○は」「○○を」というような助詞（てにをは）の部分を小さくしたり、強調したいメインキーワードを大きくするといったものがあります。

④写真やイラストが持つイメージを知る

いよいよ写真やイラストを準備していく段階です。

写真やイラストを準備する際に押さえておきたい基本のポイントは「構図」「背景」「明るさ」「彩度」の4つの要素です。

【写真・イラストの基本①】構図

おしゃれな写真は、フォーカスしたいモノがちゃんとフォーカスされています。社内の様子を写真に撮る場合も、「なんとなく社内の雰囲気を伝えたいから…」ではなく、この写真で伝えたいことは何か？という点を明確にするようにしましょう。

【写真・イラストの基本②】背景

写真を撮る際、後ろの背景がごちゃごちゃしていると印象が良くありませんし、メインで見せたいものの妨げになります。商品を置くテーブルや壁など、映り込む物にも気を使いましょう。

小さなものであれば、白の画用紙を下に敷いて簡易撮影スペースを確保することもできます。

【写真・イラストの基本③】明るさ

写真の印象は、被写体だけでなく明るさでも変化をつけられます。

取り扱う商材によって、暗い方が良いのか・明るい方が良いのか、という判断は異なりますので、目標としたいホームページを参考に撮影場所や時間を考慮したり、画像修正を行いましょう。

ホームページの事例はのちほどご紹介します。

【写真・イラストの基本④】彩度

彩度とは鮮やかさのことで、彩度を上げるとパキッとした色味になり、彩度を下げるとぼんやりとした印象になります。

撮影時にカメラで設定することもできますし、撮影した写真や描き終えたイラストに対して変更をかけることも可能です。ホームページに大きく掲載する場合は解像度にも気を配る必要があるので、スマホアプリで編集するよりも、AdobeのPhotoshopといった編集ソフトで編集する方が洗練されたホームページを完成させられます。

⑤マーケティング心理を知る

ホームページを作る目的は、「おしゃれなホームページを作ること」ではなく、「おしゃれなホームページで集客をはかり、売り上げをアップさせること」でした。

つまり、いくらおしゃれなホームページが完成しても、売上に繋がらなければ意味がないのです。

そこで活用したいのがマーケティング心理です。

マーケティングに活かせる心理学については下記のページで詳しく解説していますので、こちらを参考にしてみてください。

マーケティングに生かせる心理学9選｜マーケティング力を高めて成功しよう

「ビジネスで成功するには、心理学に基づいたマーケティングが欠かせない！」ということを知っていますか？ マーケティングや広告は「センスが問われるクリエイティブな分野」だと思っている人もいるのではないでし ...

続きを見る

【7選】おしゃれなホームページデザイン事例

さまざまなパターンのおしゃれなホームページをご紹介します。

レイアウトや色、フォント、文字組み、イラスト、画像、リンクの導線などに着眼して参考にしてみてください。

それでは見ていきましょう。

WixはSEOに弱いってホント？その理由やSEOを強化する方法も

「Wix（ウィックス）」というホームページ作成ツールを知っていますか？ Wixは、2021年時点、世界で2億人以上に使われているツールです。デザイン性の高さとドラッグ＆ドロップでサイトを作成できるとい ...

続きを見る

女性をターゲットにしたおしゃれなホームページ例

ユースキンの女性向けハンドクリームブランド「ユースキンhana」のホームページです。

柔らかな手書きイラストと製品を掛け合わせたトップ画像によって、ブランドイメージが伝わりやすくなっています。

ブランド名と画像の配置や余白から、おしゃれさとフェミニンさが感じられます。

男性をターゲットにしたおしゃれなホームページ例

Oopsさんのホームページです。

テキストや画像の占有率は高くありませんが、ユーザーのマーケティング心理をついたキャッチコピーとおしゃれさが両立されています。

人に言いにくい悩みを優しく包み込んでくれる、おしゃれなデザインですね。

幅広い層をターゲットにしたおしゃれなホームページ例

beautiful-peopleさんのホームページです。

ジェンダーレスなファッションアイテムを展開しているブランドだけあり、「白・グレー・黒」とジェンダーを感じさせない色味で統一されています。ファッションが持つカラーや特徴を引き立てつつ、ホームページ自体のおしゃれさも妥協しないデザインとなっています。

若年層をターゲットにしたおしゃれなホームページ例

ティーンから20代といった若年層から支持を集めるアーティスト・Official髭男dismさんのホームページです。

サイト自体は非常にシンプルなデザインですが、写真の撮影・編集で洗練されたアグレッシブなイメージが演出されています。

シンプルでおしゃれなホームページ例

verticalgardendesignさんのホームページです。

文字の装飾は少なく、画面いっぱいに表示される画像でおしゃれさを演出するというシンプルなデザイン。

グリッドで整ったレイアウトは、洗練された印象を受けます。

日本風のおしゃれなホームページ例

ふふ 河口湖さんのホームページです。

日本風・和風に寄りすぎず、おしゃれさと高級感が伝わるデザインです。

予約への導線やチャボットの導入など、ユーザビリティーへの考慮も伺えますね。

ラグジュアリーでおしゃれなホームページ例

Bandito e Pirataさんのホームページです。

店名ロゴのカリグラフィと明朝体の組み合わせ、写真、配置など、全ての要素から品が感じられつつ、右サイドに配置されたスクロール表示などトレンド感もあるおしゃれなデザインとなっています。

Web制作ソフトの選び方とオススメ7選｜無料ソフトはNG？

「自社のWebサイトを制作したいけれど、どのWeb制作ソフトを選んだらよいかわからない」とお悩みではありませんか？Web制作ソフトにはいくつものタイプがあり、その特徴もさまざまです。 この記事では、W ...

続きを見る

【10選】おしゃれなホームページになるHTMLテンプレート

ゼロからコーディングするのはハードルが高くても、テンプレートを使えば深い知識を持ち合わせていなくてもサイト作成が可能です。

ここでは、商用利用可能なHTMLテンプレート配布サイト「Colorlib」より、厳選したおしゃれなテンプレートを紹介していきます。

①Travello

配布ページを見る＞

旅行をイメージしたテンプレートとなっています。旅行以外にもレストランなど予約システムを活用したい方にオススメです。

②Loaft

配布ページを見る＞

シンプルでスタリッシュなデザインが特徴のテンプレートです。コーポレートサイトやブランドサイトなど、使い勝手のよいレイアウトになっています。

③Rezume

配布ページを見る＞

写真を大きくおしゃれに掲載したい方におすすめのテンプレートです。ポートフォリオやアパレル、飲食店などブランディングにこだわりたい方にピッタリではないでしょうか。

④Coffee

配布ページを見る＞

タイトル通り、カフェをイメージしたおしゃれなテンプレートです。シンプルに構築されているため、幅広い業種にアレンジがきくデザインとなっています。

⑤Montana

配布ページを見る＞

「ラグジュアリー」「高級感」「リゾート感」をイメージするおしゃれなテンプレートです。写真がメインとなりますので、風景や商品、人物などアピールしたいコンテンツがはっきりしている方にオススメです。

⑥Droppler

配布ページを見る＞

テキストのみでおしゃれを演出しているテンプレートです。無形商材を取り扱う方や、経歴・ポートフォリオ等でホームページを準備したい方にも向いています。

⑦Appco

配布ページを見る＞

ポップでキャッチーな印象を与えられるテンプレートです。イラスト（画像）＋テキストというレイアウトになっていますので、IT・ソフトウェア関係に適しています。

⑧Edusite

配布ページを見る＞

写真を大きく見せるテンプレートですが、商品や人物といった明確なコンテンツではなく、雰囲気として伝えることを目的としたテンプレートになっています。スクールや習い事、エステサロン、美容室といった業態に向いています。

⑨Po-Portfolio

配布ページを見る＞

名前にある通り、ポートフォリオとしての利用を目的としたテンプレートなっています。デザイナーやフォトグラファーといったクリエイターに適している他、アパレルや雑貨などのECとも相性抜群です。

⑩Work

配布ページを見る＞

こちらも仕事依頼を受注するためポートフォリオ向けテンプレートですが、アパレルや商品のブランディングにもピッタリなデザインです。サイドのカラムは固定されているため、LP的な使い方も可能です。

【まとめ】おしゃれでマーケティングに強いホームページを目指そう

ホームページは会社の顔でもありますから、企画からローンチまでスピーディに実施したいものです。

しかし、自社内にプログラマーやデザイナー、Webマーケティング担当者がいない場合、日頃の業務を行いながらのホームページ作成ではスピード感が落ちてしまうのは仕方がないこと。また、最近では簡単におしゃれなホームページを作成できるツールやサービスもたくさんありますが、マーケティングを考慮していない、ただおしゃれなだけのホームページでは、売上につなげるのは難しいと言えるでしょう。

制作会社やマーケティング会社に頼みたいものの金額面で躊躇するケースが多いかと思いますが、上記のような理由から、実際のところプロに頼んだ方がトータルコストが抑えられかつスピーディに売上アップを目指せるのです。

Webマーケティング・Web制作のプロである弊社BLITZ Marketingに、おしゃれなだけでなくマーケティングにも特化したホームページ制作及び運営をぜひお任せください。ご相談は無料です。

詳しくはコチラ