ホームページ制作で「自社サイトをかっこよくしたい」「男性に刺さるデザインにしたい」というご要望をいただくことがあります。一言で「かっこいい」といっても、スタイリッシュでクールなもの、無骨で男前なもの、シンプルで洗練されたものなど方向性は様々です。
なんとなく参考サイトを眺めているだけでは、自社にとってベストなデザインのイメージが固まりにくいのが正直なところだと思います。本記事では、制作会社に提示する参考サイトを「なんとなく」から「世界観のあるかっこよさ」で提示できるように、当社の制作事例を交えながら、かっこよさや男性ウケを狙ったデザインをご紹介します。
ホームページ制作をご検討の方へ
サイバーインテリジェンスは、ターゲットやビジネスの目的を伺いながら、参考サイトの整理からデザインの方向性や集客の導線設計まで一緒に考えていきます。「うまくイメージを伝えられるか不安」という方もプロのWEBマーケターが親身に対応させていただきますので、お気軽に無料相談をご利用ください。
目次
目次
かっこいいホームページの制作事例10選
株式会社クワバラボディワークス 様
| サイトタイプ | サービスサイト |
| URL | https://kuwa-bo.com/ |
岐阜県揖斐郡で自動車の修理や鈑金塗装を行っているクワバラボディーワークス様のサイトです。魅力的な館内をサイト全体に大きく掲載してインパクトのあるかっこいい仕上がりになっていますね。
ADASエーミングを訴求するブロックでは、アクセントカラーとして緑色を採用し、パキッとした印象を与える配色になっています。サイバーチックでくっきりと文字が映るので、かっこよく見えますね。
サービス紹介のブロックは、先程の緑を交えたアイコンが使用されており、その下には会社の外観が大きくパララックスで表示される仕様になっています。会社の外観とサイトの配色が統一されてより一体感が出ています。
株式会社エイワ 様
| サイトタイプ | コーポレートサイト |
| URL | https://eiwa01.co.jp/ |
岐阜で46年の歴史を持つ産業機械、機械装置、金属部品の製造を行うエイワ様のサイトです。技術力が伝わりやすくなるよう動画をファーストビューに挿入しています。余白と大きなビジュアルを贅沢に使用した強弱のあるレイアウトを採用しているので写真に自然と目が行きます。
「エイワの4つの力」を紹介するブロックでは、火花が飛び散っている迫力のある写真をコントラストを強めることで、より印象に残る絵に仕上げています。専門的な言葉が多いと伝わりにくくなるため、端的にまとめながらアクセントの「赤色」を差し込むことで、シンプルになりすぎない工夫をしています。
「製品事例」はカルーセルを使用して動きをつけています。規則的なレイアウトにとらわれず、ユーザーにスムーズに読み進めてもらえるようにしています。その下には、工場の内装を大きく掲載し、インパクトを与えるとともに、どんな施設で仕事をしているのかが分かる安心感につながる要素も加えています。
株式会社松野組 様
| サイトタイプ | リクルートサイト |
| URL | https://recruit.matsunogumi.co.jp/ |
岐阜県穂積市で土木・舗装・河川工事を行う松野組様のリクルートサイトです。新卒の男子生徒をターゲットとして「今風」なデザインで鮮やかな青色のグラデーションを使用した若者に好まれやすいかっこよさを持ったサイトです。
「文字を読まない」という近年のユーザーの特徴を踏まえて、ファーストビュー直下には簡潔に述べられたメッセージとともに会社の紹介映像を大きく掲載しています。文字よりも写真が多くなるようにしたことで、見て雰囲気が伝わるサイトになっています。
青色がアクセントとなるように見出しごとにグラデーションのかかった装飾文字を配置しています。人以外の背景写真については、モノクロで統一することで、色が混在せず、まとまった印象を与えることができています。
有限会社ポニー 様
| サイトタイプ | サービスサイト |
| URL | https://pony2264.com/ |
岐阜県羽島郡で脱毛とカットのサービスを提供する男性向けの脱毛サロン、ポニー様のサイトです。モバイルファーストを意識したサイトで、ターゲットが男性限定なので、デザインも男性ウケのよい青基調でスタイリッシュな印象が与えられるように意識しています。
基調になるメインカラーは青色を使用しており、アクセントカラーとして補色の黄色（ゴールド）を使用しています。訴求力を高めるためのサイトという役割もあるため、お得感を感じる色使いを意識して作成しています。
「選ばれる理由」では、図を用いることで難しい内容も視覚的に伝わりやすくなるよう工夫しています。色が増えるブロックでも角丸を使用せずに尖らせたり、斜めのデザインを部分的に差し込むことで、飽きにくくスタイリッシュな印象を保つことができています。
有限会社海津運送 様
| サイトタイプ | コーポレートサイト |
| URL | https://kaizu-transport.com/ |
岐阜県海津市でチャーター便や個別配送を行う運送会社、海津運送様のサイトです。トラックの写真を豊富に活用し、彩度とコントラストを強めに採用したメリハリのついたデザインテイストです。サイト内も動きをつけて見ている側が楽しめる、そんなサイトになっています。
文字は通常のサイトではあまり使用しない32pxという大きさで採用し、ユーザーの注意を引きつつ、インパクトの強い写真に見劣りしないよう、文字と写真のバランスが取れるよう配慮しています。
採用にも力を入れており、人の温度感が伝わる写真をスタイリッシュな形でトリミングしてレイアウトされています。登場する英語も「読む」というよりは「見る」を優先させ、デザインの一部として活用しています。
ABCキャンパー 様
| サイトタイプ | サービスサイト |
| URL | https://abc-auto.co.jp/ |
日本全国でキャンピングカーの買取を行っているABCキャンパー様のサイトです。ファーストビューは、訴求力を最大限に強めたデザインを採用しています。というのもターゲットはキャンピングカーを所有されているアクティブな方が多いため、スタイリッシュでシンプルなデザインというよりは、期待感が向上するような盛り盛りのデザインの方がユーザーに刺さるだろうという考えからこのデザインになっています。
訴求力が強いデザインは、もちろんファーストビューだけではなく、サイト全体に反映されています。ブロックによって強弱をつけ、一番見てもらいたい情報のデザインを強調し、集客につながるデザイン設計を意識しています。
「選ばれる理由」は、見出しだけ見て伝わるように太字で目立つ赤文字とアンダーラインを使用して、ユーザーがスムーズに情報を仕入れられるように工夫しています。また、キャンピングカー好きの方が訪れるサイトなので、写真も豊富に活用してファーストビューでも意識した期待感の向上に努めています。
給食王グループ 様
| サイトタイプ | リクルートサイト |
| URL | https://recruit.kyushokuou.com/ |
給食・お弁当の調理・盛り付け・配送の求人募集をしている給食王グループ様のリクルートサイトです。若者をターゲットとして、漫画風の勢いのある世界観で統一されたデザインです。求職者に「面白い」「楽しそう」という好印象をサイトに訪れた段階で感じてもらえる工夫が施されています。
各ブロックも漫画の一コマのようにデザインされており、まるで従業員がキャラクターになったような愉快さがあります。背景は全てモノクロにすることで、このサイトで特に見てほしい「人」と「献立」に自然と目が誘導されるデザインになっています。
「今アツい給食会社紹介」の項目では、ダイナミックにレイアウトされた訴求文とともに3社が掲載されています。背景には各会社の写真がイラスト調に加工されており、ただ白いボタンにするのではなく、ページ全体のテイストに合わせたデザインに統一しています。
株式会社エストテクニカ 様
| サイトタイプ | コーポレートサイト |
| URL | https://esteka.co.jp/ |
岐阜県大垣市でレーザー加工・溶接を行うエストテクニカ様のサイトです。ファーストビューは、ホームページではあまり馴染みのないレイアウトで構成されており、下には業務の様子が分かる動画が流れています。ユーザーが訪れたときの最初の印象が「技術力がありそう」「ここなら任せられそう」という気持ちになるよう、見せるシーンを厳選して制作しています。
「加工内容」で使用される写真は全てコントラストを強めにし、全体がパキッと仕上がるように加工しています。使用している色がコントラストの強い黒と、ロゴに採用されている緑なため、メリハリのついたかっこいい印象でまとめる方針となりました。
「会社案内」の部分はスライド形式で写真が流れるように設定しています。社員の作業風景や集合写真とともに会社の概要と取り組みについて簡潔に述べているので、このブロックを見るだけで内容をざっくりと理解することができる情報設計になっています。
ハイエスト 様
| サイトタイプ | コーポレートサイト |
| URL | https://highest-car.com/ |
岐阜県山県市で、改造車の買取を専門に行うハイエスト様のサイトです。改造車のオーナーである男性をメインのターゲットとしたサイトで、赤と黒を基調としたデザインになっています。ファーストビューには様々な種類の車をスライド形式で掲載しており、ユーザーに覚えてもらうことを意識した設計を意識しています。
概要を述べたブロックではハイエスト様の強みを端的に述べるとともに沢山の改造車やチューニングカーが並んだ画像が流れています。売却を検討する側も自分が売ろうと思っている車に近い車が並んでいると安心につながりますし、見た目の面でもかっこよさが引き立ちます。
「Q＆A」「アクセス」のブロックでは画面の半分を大きく車の写真が締めており、ユーザーにインパクトを与えます。ベースカラーとして白を採用している分、装飾を入れないとシンプルになりすぎてしまうため、写真の大小を工夫したりフォント選びを意識したりしています。
辰己製作所株式会社 様
| サイトタイプ | コーポレートサイト |
| URL | https://laser-tatumi.co.jp/ |
岐阜県羽島市でレーザー加工や溶接1次加工から3次加工まで一貫生産を得意とする辰己製作所様のサイトです。ファーストビューには画面いっぱいに加工の様子が動画で映し出されます。火花が飛び散る様子や細かな手作業、手慣れた操作などコンスタントに映像が切り替わるので、そのスピード感からコピーにもある「最短当日で納品」を想像させます。
「辰己製作所でできること」の部分はサイト全体で統一されたグリッド形式のレイアウトを反映し、加工系の業務で特に重要な正確さが雰囲気として伝わるデザインを意識しています。また、青をメインカラー、補色の黄色をアクセントカラーとした配色でこちらのサイトもコントラスト強めで統一されています。
加工や製作でどんな事ができるのかを写真とともに掲載しています。背景には薄っすらと工場内の写真が掲載されており、創業45年の長い歴史と信頼感を感じさせます。
「かっこいいホームページ」を依頼する時のポイント
「好きなデザイン」と「好きではないデザイン」を両方共有する
参考サイトを共有する時は、「好きなデザイン」だけでなく、「あまり好みではないデザイン」も一緒に出しておくと、イメージのすり合わせがスムーズに進みます。
例えば「印象は暗くならないようにしたい」「写真が少ないのは嫌だ」「動きは最低限にしたい」といった避けたいポイントを事前に伝えておくだけでも制作会社との無駄なキャッチボールの数を減らすことができます。
「かっこいい」の方向性を言葉にする
冒頭で述べたように、「かっこいい」でもスタイリッシュなもの、無骨で男前なもの、シンプルで洗練されたものなど様々です。そのため、自分の思い描いた「かっこいい」が伝わる参考サイトをいくつか用意しておくと良いです。
「こういう雰囲気に寄せたい」という一言があるだけで、完成形のイメージがかなり共有しやすくなります。
写真・コピーの準備についても、早めに相談する
かっこよさを決めるのは、デザインだけではありません。「どんな写真を使うか」「どんなコピーを載せるか」が、世界観を大きく変えます。
自社で撮影するのか、カメラマンに頼むのか、フリー素材中心なのか、コピーはどこまで制作会社に任せるのか、といった点は早めに相談しておくと安心です。とりあえずデザインだけお願いして、素材は後まわしにすると、仕上がりがチグハグになったり、写真だけ浮いたりする場合があるので、注意が必要です。
まとめ
今回の紹介で「かっこいいホームページ」には様々な種類があることが分かりましたね。誰に向けた、どんな世界観のかっこよさなのかを事前に決めておかないと、デザインはなかなか定まりません。
大切なのは「ターゲット・目的・好みのデザイン・目指したい方向性」この4つを事前に整理したうえで制作会社と情報共有することだと思います。何となくかっこいいサイトを目指すのではなく、「自社のターゲットに刺さる、意図のあるかっこよさ」を目指して設計することが、うまく集客まで持っていくコツです。
ホームページ制作を検討されている方へ
かっこいいホームページづくりで「自社の世界観をどう形にすればいいか分からない」と感じている方は、ぜひ一度ご相談ください。サイバーインテリジェンスは、ターゲットや目的を整理するところから、「男性ウケ」「女性ウケ」を意識したデザインの方向性まで一緒に言語化し、最適なサイト構成をご提案します。まずはお気軽に無料相談をご利用ください。
