ホームページはかっこよく作れば成果につながるというものではありません。
しかし、業界によってはブランドイメージに合わせてかっこよく作るべき場合もあります。

• 「ホームページをかっこよく作りたいのに、いまひとつかっこよくならない」
• 「クールなサイトにするために何が足りないかわからない」

とお困りの方もたくさんいらっしゃるとかと思います。

そこで本記事では「かっこいいサイトを作る際に押さえておくべきポイント」をWebデザイナーである筆者が解説します。
さらに、参考になる「デザインがかっこいいサイト」も多数ご紹介！

あなたのサイトを今よりかっこよくするためのヒントが得られるはずです。
ぜひご覧ください。

参考にしたいギャラリーサイト10選 
様々なかっこいいサイトが一覧できる

クオリティの高い縦長のサイトが集められている｜MUUUUU.ORG

出典：MUUUUU.ORG

Webデザインのポータルサイト。
縦に長くオーソドックスなレイアウトで、非常にデザイン性が優れたサイトが集められています。
Webデザイナーが現場レベルで作成の参考にしたくなるものが多いです。
カテゴリーでソートして表示することもできます。

国内外問わず様々なかっこいいサイトが揃う｜I/O 3000

出典：I/O 3000

国内外問わずかっこいいサイトが揃っているギャラリーサイト。
国外のサイトは国内のものと比べて雰囲気が違うので、そのままでは使えないかもしれませんが、アイデアにひとひねり加えたいときに参考になります。

「カテゴリー」「カラー」でソートが可能。ひと月に20サイトほど更新されています。

レスポンシブデザインのサイトを探したいならここ｜Responsive Web Design JP

出典：Responsive Web Design JP

PC、タブレット、スマホ表示のデザインが一度に見られるギャラリーサイトです。
ただしファーストビューのみなので、実際の表示はサイトを訪れて確かめなければなりません。

とはいえ並べて見ることで、ディスプレイサイズに合わせたデザインの変化がわかりやすいです。
「WordPress」「 jQuery」など、サイト制作に使われている技術も紹介されてます。
類似サイトの表示があるので、同じ傾向の参考デザインを集めたいときに便利です。

バラエティ豊かな国内のサイトが集まる｜イケサイ

出典：イケサイ

デザインの優れた国内のサイトを幅広く見るのに適しています。
ほぼ毎日２から４サイトが追加されており、更新頻度は非常に高いです。
PC版の場合は豊富なカテゴリーでソートが可能。
スマホ版はサイト内検索で見たいサイトを探せます。

PCサイトとスマホサイトを一気見できる｜bookma!

出典：bookma!

同一サイトのPC版とスマホ版を並べて見ることができるほか、複数サイトのPC版のみを一覧にすることもできます。
「メインカラー」と「ベースカラー」がピックアップされており、サイトに使う色の組み合わせを考えるときに便利。

ユーザー投票によるサイトの点数化が特徴的｜awwwards.

出典：awwwards.

ユーザー投票によってサイトが点数化されているのが特徴のギャラリーサイトです。
条件によるソートはできません。掲載されているのは外国のサイトが中心です。

シンプルでスタイリッシュなサイトが揃う｜Siiimple

出典：Siiimple

スタイリッシュでシンプルなデザインを集めたギャラリーサイト。
「detail」ボタンをクリックすると、類似サイトが複数表示されます。
ログインすれば、お気に入りサイトの登録も可能です。
シンプルなサイトを作る際の参考になります。

細かく別れたスタイルやタイプから検索可能｜siteInspire

出典：siteInspire

「最も洗練されたWebデザインのショーケース」がコンセプトのギャラリーサイトです。
「Styles」「Types」「Subjects」「platforms」という４つのカテゴリーごとに検索タグが豊富に用意されているほか、 自由テキストによる検索も可能。
国外のサイトのみです。

スマホサイトに特化したギャラリーサイト｜AGT

出典：AGT

スマホ表示に特化したWebサイトギャラリーです。
主に日本国内のサイトを紹介しています。
イメージにカーソルを合わせると、自動でスクロールが始まり全体が見られるようになっており、おもしろい。
静止画で全体を見たい場合は、イメージをクリックすればOK。
「カラー」と「業種」でソートが可能です。

WordPressで制作されたサイトに特化したギャラリーサイト｜WeLoveWP

出典：WeLoveWP

WordPressで作られたサイトのデザインだけを集めたギャラリーサイト。
タグ付けされたワードとカラーでソートが可能です。
各種WordPress のテーマも簡単な特徴とともに紹介されています。

参考にしたい企業サイト10選
特色が異なるかっこいい企業サイトを紹介

商品の美しさと品質をビジュアルで伝える 
福助株式会社

出典：福助株式会社

明治15年創業。足袋装束店からスタートして現在は靴下、ストッキング、肌着の製造から卸、小売を行っている会社です。
良い写真を大きく使って、商品の美しさと品質をビジュアルで伝えているのが特徴。
すべての商品の背景に彩度の低い色を使うことで統一感を出しています。

ファーストビューがひときわ目を引く 
ベクスト株式会社

出典：ベクスト株式会社

テキストマイニングにより各種ソリューションを提供する会社です。
「10,000人の声から紡ぎ出す、ただ一つのビジネス戦略。」というキャッチフレーズを象徴したファーストビューのアニメーションが目を引きます。
Vextがどんな企業なのかが、テキストとビジュアルにより一瞬でわかる仕組みです。

スクロールするとアニメーションでテキストが表示され、きびきびとした会社の仕事ぶりを想像させるつくりになっています。

この会社で働いてみたいと思わせるデザイン
黒木テック工業株式会社

出典：黒木テック工業株式会社

1952年創業。遊園地の乗り物を作るメーカーです。
遊園地の乗り物とスタッフの写真がふんだんに使われておりワクワクするようなホームページになっています。
アクセントカラーのイエローもワクワク感の演出に一役買っており効果的です。

モノクロの配色とスタイリッシュなカーソルでクールな印象に
sansan株式会社 DSOC

出典：sansan株式会社 DSOC

sansan株式会社のデータ統括部門であるDOSCのホームページ。
モノクロの配色とスタイリッシュなカーソルでクールな印象のサイトです。
写真がなく文字だけで作られていますが、視認性のよいフォントを使い、フォントサイズと太さで強弱をつけ、余白を大きく取ることで見やすくなっています。

横スクロールで他社とは違う印象に
株式会社aircord

出典：株式会社aircord

空間演出と体験デザインを行うクリエイティブスタジオ。
トップページが横スクロールになっており、過去の実績が映像で次々と見られる仕組みです。
作り込まれた画像と映像に見ごたえがあり、スタジオのもつ技術の高さをうかがわせます。

サイトから会社や設計する家の温もりを感じさせる 
株式会社浅井良工務店

出典：株式会社浅井良工務店

和歌山県にある、気候風土に合った家づくりができる工務店。
テーマカラーのイエローと明るい写真で温かみが感じられるサイトです。
見出しのフォントがアクセントになっていてオシャレな印象も付け加えています。

コーポレートカラーを効果的に利用したスタイリッシュなサイト 
株式会社大創産業

出典：株式会社大創産業

100円ショップの「ダイソー」を運営する会社。
コーポレートカラーであるビビットなピンクをサイトのテーマカラーとして効果的に利用したスタイリッシュなサイトです。
使用している色が少ないので、コーポレートカラーの印象がいっそう際立っています。

ビジネス領域の広さをサイトから想像させる 
原田産業株式会社

出典：原田産業株式会社

造船・海洋事業から生活用品の製造まで、幅広く事業を手掛ける会社。
明るさを抑えた写真と明朝系のフォントが落ち着いた印象を与えています。

シンプルなデザインながら硬めのフォントで信頼感もアピール 
小島国際法律事務所

出典：小島国際法律事務所

国際企業法務を中心として、国際取引、合併・企業提携、紛争解決などを手がける法律事務所。
シンプルでありながら、明朝系で硬いイメージのフォントを使って信頼感を感じることのできるサイトになっています。

テキストが多めだと読みにくくなりがちですが、言葉を使う仕事だけにかえって堅実でしっかりとした印象です。

色彩を効果的に利用したデザイン 
株式会社山陽

出典：株式会社山陽

兵庫県姫路市にて靴、鞄、ハンドバッグなど各種皮革製品の製造・販売を行っている会社です。
革製品からはイメージしにくい鮮やかな色彩のインパクトが強烈。

さらに、紙のように舞い上がる革の写真も従来のレザーのイメージをひっくり返しています。
他の皮革製品メーカーとはひと味違うことがありありと伝わってくるサイトです。

かっこいいサイトを作る際のポイントとは？ 
カラーや情報の統一感を出そう

使用する色の基本はメインカラーとアクセントカラーの２色にする

サイトがあまりかっこよくないなら、色を使いすぎているかもしれません。
そんなときは使用する色を「メインカラー」と「アクセントカラー」の2色に絞ります。

Webサイトの配色は以下の３つの色で構成されます。

• ベースカラー（75％）：最も大きな面積を占める色。余白や背景に使われる。
• メインカラー（20％）：サイトの印象を決める色。
• アクセントカラー（5％）：使用面積は少ないが、一番目立つ色。ユーザーの注意を引く目的で使われる。

例えばこちらのサイト。使われている色が少なく上品な印象です。

出典：https://www.wedgwood.jp/

配色は以下のようになっています。

• ベースカラー：白（#ffffff）
• メインカラー：青（#6c98cf）
• アクセントカラー：やや濃い青（#697f9f）

この中で目立つのはメインカラーとアクセントカラーですが、ベースカラーに比べて使用面積が抑えられているのがわかるかと思います。

使用する色は基本的に「背景以外に2色」とし、使用面積は全体の3割程度に収めましょう。
色の使いすぎは禁物です。

ファーストビューにたくさんの情報を入れないようにしてユーザーの注意を絞る

Webサイトの入口であるファーストビューに入れる情報は厳選します。
目安は「１メッセージ=1イメージ」。

出典：https://brands.onisi.jp/

こちらのサイトを見たときにぱっと目に入るのは、ゆっくりと自動でスクロールされていく背景の画像と中央に大きく配置された「PANTONE Living」というテキストです。

出典：https://tis-home.com/

こちらのサイトでは、「TOKYO ILLUSTRATORS SOCIETY」の文字と「TIS」の中を横にスクロールするイラストが目を引きます。
いずれも最初に見てほしいものが「1メッセージ、1イメージ」に絞られています。

かっこいいサイトを作る場合、サイトの雰囲気を伝えるのがファーストビューの役割です。
サイトによってはバナーなどを配置して詳しい情報を盛り込む場合もありますが、それですとどうしても洗練された印象は損なわれます。

クールなイメージにしたいなら、ファーストビューの情報はサイトを象徴するような画像やテキストに絞ったほうがいいです。

写真やイラストのテイストはサイト全体のイメージに沿って統一する

写真やイラストのテイストもサイト内で統一します。
「テイスト」と聞くと漠然として難しそうですが、「何かひとつ共通するところを作る」と考えてください。

写真の「制作者」を統一する

一番簡単なのは「制作者を統一する」という方法です。
写真ならカメラマン、イラストならイラストレーターを特定の人にすることで、テイストを揃えることができます。

既存の写真やイラストを使う場合は、引用元のサイトをひとつに決めます。
サイトによって素材のテイストが違うからです。
例えば運動会の写真を二つの写真素材サイトで比較してみます。

まずPIXTA。

次にAdobe Stock。

サイトによってなんとなく写真の雰囲気が違うのがわかるかと思います。
テイストを気にしながら複数サイトの写真を使うより、引用元を一つにする方が簡単です。

写真の「明るさ」を統一する

自分で撮った写真を使う場合は、「明るさ」を統一しましょう。
どんなサイトでも「明るさ」だけは揃える必要があります。

例えばこちらは明るい写真を使ったサイト。

出典：http://www.fukuda-hp.or.jp/

次に暗めの写真を使ったサイト。

出典：https://bensen.com/

明るさが違うと、雰囲気がかなり変わります。
明るい写真と暗い写真をまぜて使えば、サイトの統一感が失われるのは想像できるでしょう。

「明るさ」を揃えた上で、「色味」「ポーズ」「人物」「背景」などほかにも統一できる部分を検討してみてください。

使用するフォントによっても受け取る印象は変化するためサイトの雰囲気とすり合わせる

フォントはサイトの雰囲気に合わせて選びます。
とはいえ、たくさんありすぎて選ぶのが難しいかもしれません。
そこで、以下の2点にわけて考えます。

①フォントの「系統」

まずは大まかにフォントが与える印象を押さえます。

• 明朝系：上品、繊細、知的、優雅、高級
• ゴシック系：親近感、シンプル、カジュアル、モダン、信頼感
• 筆書体： 和風、伝統的
• 手書き風文字：やわらかい、あたたかい、チープ、ポップ

和文フォントでも欧文フォントでも基本は同じです。
欧文フォントの場合、セリフ体が明朝体、サンセリフ体がゴシックにそれぞれ相当します。

これを目安に、作ろうとしているサイトに合うのは「明朝系」と「ゴシック系」のどちらなのか検討します。
ウェブでよく使われるのは以下のもので、いずれもパソコンやスマホに元々入っている「デバイスフォント」です。

【Windows】
明朝系：MSP明朝、游明朝
ゴシック系：メイリオ、游ゴシック

【Mac】
明朝系：ヒラギノ明朝、游明朝
ゴシック系：ヒラギノ角ゴ、ヒラギノ丸ゴ、游ゴシック

②フォントの「太さ」

フォントが決まったら、太さを検討します。
細くすると「モダン」「都会的」「シャープ」といった印象が強くなります。
反対に太くすると「力強い」「重厚」といったイメージになるでしょう。

太さは細かく変えることができます。強調したいイメージに合わせて調整しましょう。
何種類か作ってみて並べて比較すると決めやすいです。

以上のようにフォントは「系統」と「太さ」に着目して選べますが、どうしても決められないときは同じ業種やテーマのウェブサイトで使われているフォントを参考にしましょう。
使用されているフォントを正確に知るにはGoogle Chromeの拡張機能「Whatfont」が便利です。

出典：WhatFont

カーソルをテキストに合わせるだけで、フォント名がわかります。
フォント選定の参考にどうぞ。

【コラム】かっこいいサイトを外注して制作する際の注意点

外注する会社の実績は必ずチェックしよう 
会社ごと制作するサイトのテイストは異なる

「かっこいいサイトを作りたいけど、自分にはできなかった・・・」
そんな人はWeb制作会社に外注するのも手です。

ただ、どの制作会社でもあなたの希望をかなえられるとは限りません。
所属するデザイナーやコーダーが違えば、できてくるサイトのテイストも当然違います。
ゆえにあらかじめ実績をチェックし、イメージするサイトが作れそうかを判断するのです。

なお制作会社に依頼する際には、あなたの考えに近い既存サイトを提示するとイメージの共有がスムーズです。
本記事でご紹介したギャラリーサイトなどを利用して探してみてください。

かっこよさだけを求めると失敗する 
サイトを制作する目的をしっかりと定めよう

世の中にはため息が出るほどかっこいいサイトがたくさんあります。
しかし、いたずらにかっこよくしているわけではありません。

「ブランディングやマーケティングに必要だから」など、何らかの理由があってそのような見た目になっているのです。

サイトにかっこよさを求めるのは悪いことではありません。
ただし「そのかっこよさに理由はあるか？」についてはよく考えるべきです。
なんとなくかっこよくしたいだけなら、その要望は本来いらないものかもしれません。

かっこよさを求めるならば、あくまで目的に合ったものにしましょう。

複数社から提案をもらおう 
3社程度に絞って提案をもらうのがベター

ウェブサイト制作にかかる費用は、会社によってかなり差が出る場合があります。
くれぐれも他社との比較をせずに発注するのはやめましょう。

見積もりは各社ホームページにある専用フォームなどから簡単に依頼できます。
３社程度を目安にお願いしてみてください。

見積もりを依頼する際は価格およびサービス内容はもちろん、担当者の対応をよく見ておきます。

いったん制作を依頼すると、数週間から数か月は制作会社とのやりとりが続きます。
コミュニケーションがスムーズにできないとお互いストレスになる上、制作にも支障をきたし、いいことがありません。

それだけに円滑にやりとりできるかどうかは、見積内容と同じか、それ以上に重要なのです。

関連記事：コーポレートサイトの構成を初心者やリニューアル向けに解説！

かっこいいサイトまとめ

本記事では、「かっこいいサイトを作る際に気を付けるべきポイント」について解説しました。

本文でも書きましたが、ウェブサイトはあくまで目的に沿って作るものです。
かっこよさを求めるのはいいことですが、目的に合った意味のあるデザインであることを前提に考えてください。
サイトのパフォーマンスを上げるのであれば、デザインより言葉や構成を見直した方がいい場合もあります。

「かっこいい」は抽象的で、具体的にどうやって実現すればいいかわかりにくいですが、基本は「統一」と「限定」といってよいかと思います。

本記事でご紹介したノウハウが、あなたのウェブサイト制作のお役に立てば幸いです。

かっこいいサイトの制作をプロに任せたい方へ

制作会社をなかなか探す時間がない・制作会社の違いが分からないという方は、ぜひWeb幹事にご相談ください。

Web幹事は、あなたに最適な制作会社を「人力で」マッチングするサービス。
実際にWeb制作・運用を経験したプロのコンサルタントが対応するため、業者選びの手間なく、質の高いマッチングを受けることが可能です！

コンサルタントのご紹介 岩田 Web制作会社を設立し、
3年間で上場企業を含む50社以上制作に携わらせていただきました。

様々なお客様のWeb制作を実際に行ってきましたので、
初心者の方でも安心してご相談ください！

あなたの目的や予算に合わせて最適な会社をご紹介させていただきます。
ご相談はもちろん無料。また紹介された会社に必ず発注する必要はありません。

【無料】プロに最適なホームページ制作会社を紹介してもらう

ホームページ制作の費用がわかる料金シミュレーター

作りたいホームページはいくら費用がかかるのか？　
そんな悩みに応えるべく、Web幹事で料金シミュレーターを用意しました。

• サイトの用途（採用サイトなど）
• ページ数
• デザイン
• 機能

ホームページの制作に関する8問に選択するだけで、たった60秒で制作料金が分かります。料金の算出は無料なので、ぜひご利用ください。

【無料】ホームページ料金シミュレーターを使う