かっこいい印象を与えるホームページとは、いったいどのようなものでしょうか。ホームページの作り方は、自作と制作会社に依頼する方法があります。どちらを選ぶとしても、まずは良質なホームページについて知っておくことが大切です。本記事では、国内外のギャラリーサイトや企業が公開するホームページについて紹介します。

プロが作って、自分で簡単更新!
運用費用ゼロのホームページ作成サービス

初期費用55,000円、月額5,500円で高品質なホームページを作成可能!

お客様に最適な構成やデザインをプロが作成し運用までサポートするので、安心して任せることができます。
ホームページの更新は直感的に操作可能な管理画面からお手軽に更新可能です。

  • お客様に何を伝えたらよいかわからない
  • どんなデザインにしたらよいかわからない
  • 作った後の更新・運用方法がわからない

上記のようなホームページ作成のよくある悩みをsiteflowでカンタンに解決!
まずは無料相談をご利用ください。

かっこいいホームページのギャラリーサイト6選

ホームページ作成において、初めに決めておきたいのがデザインです。優れたデザインでユーザーの目を引き付けるホームページは、いわば先人の知恵の結晶ともいえます。ここでは、参考になる6つのギャラリーサイトを紹介します。どのようなホームページにしたいのか、具体的な例を見て学んでみましょう。

SANKOU!

引用元:SANKOU!(https://sankoudesign.com/

デザインの色合いや配色で検索できるほか、掲載されている内容、画像・動画の有無なども選択でき、理想のデザインを見つけるのに役立つサイトです。「シンプル」「カジュアル」「スタイリッシュ」など、ホームページの雰囲気を示すワードで絞ることもできます。ランディングページ・ECサイト・コンテンツページなどにおいても、最新のトレンドがわかるサイトです。

MUUUUU.ORG

引用元:MUUUUU.ORG(https://muuuuu.org/

縦に長いサイトが集められたギャラリーです。カテゴリーは、業種・デザイン・カラーのほか、Webマガジンやポートフォリオといったタイプ別でも分類されています。イメージにマッチするデザインが見つけやすく、特にスマートフォン用サイトのクオリティ向上を目指している方におすすめです。

straightline bookmark

引用元:straightline bookmark(http://bm.straightline.jp/

タグリストのタブをクリックすると、テーマカラーやカテゴリーのほか、レイアウトでの検索もできるようになっています。会員登録をすれば、「いいね」やブックマーク機能を使うことができ、じっくりとお気に入りのデザインを比較することも可能です。

WebDesignClip

引用元:WebDesignClip(https://www.webdesignclip.com/

デザイン性の高い国内外のWebサイトを集めたギャラリーです。メニューを開くと、カラーやレイアウトでの検索以外にWordPressやレスポンシブのタグが用意されていて、目的に合わせたデザインをまとめて参考にすることができます。

I/O 3000

引用元:I/O 3000(https://io3000.com/

こちらも国内外のホームページを紹介しているサイトです。ギャラリーは毎月更新されるため、常に新しいデザインに触れることができます。業種や雰囲気、カラーで分類される以外に、1年ごとのアーカイブも作成されていて、年を遡ってトレンドの移り変わりを見ることができます。

CSS Design Awards

引用元:CSS Design Awards (https://www.cssdesignawards.com/

海外のホームページをまとめたギャラリーサイトです。直観的なキーワードで検索できるため、イメージに合うサイトをすぐに見つけ出せます。UIデザイン・UXデザイン・イノベーションの3つの項目でスコアが公開されていて、品質の高い独創的なデザインを参考にすることができます。

かっこいいデザインの企業ホームページ15選

かっこいいホームページとひと言にいっても、その表現は多岐にわたります。ここからは、企業が公開するデザイン性の高いホームページを紹介します。

株式会社ユニクロ

引用元:株式会社ユニクロ(https://www.uniqlo.com/jp/ja/contents/lifewear-magazine/

トップページからユーザーの目を引く洗練されたデザインが印象的です。インタビューやコラボレーション商品について詳しく紹介する記事や、不定期で更新されるマガジンの公開など、訪れた人の好奇心をくすぐる工夫がされています。オンラインショップでは、購入者の評価が星で表示されていて、人気の高い商品がひと目でわかるようになっています。

株式会社デンソー

引用元:株式会社デンソー(https://www.denso.com/jp/ja/

トップページだけでなく、スクロールした先の画像と印象的なキャッチコピーの数々が見る者の心をとらえます。企業が現在行っている取り組みや未来に描くビジョン、テクノロジーを駆使した製品・サービスの紹介などが見やすく整理されています。シンプルなレイアウトの中で使われているアニメーションが効果的です。

sansan株式会社 DSOC

引用元:sansan株式会社 DSOC(https://sansan-dsoc.com/about/

名刺のデータ化を行っている企業のホームページです。モノトーンを基調にテキストのみが表示されるシンプルなデザインは、アニメーション効果によりポップな雰囲気も加わっています。画像を使用しない究極の引き算ともいえるデザインが印象的です。

サントリーホールディングス株式会社

引用元:サントリーホールディングス株式会社(https://www.suntory.co.jp/

ムービーや商品画像、広告やキャンペーン情報など、色とりどりの画像が並んでいますが、白を基調としているため全体的にすっきりとした印象を受けます。商品の紹介ページにあるカテゴリーをクリックすると、上部のタグからさらに詳細な絞り込みが実行でき、ユーザビリティにも優れているサイトです。環境活動に対する取り組みなどを紹介した読み物も充実しています。

花王株式会社

引用元:花王株式会社(https://kaobeautybrands.com/en/

ファーストインプレッションはシンプルそのものです。“人の数だけ美がある”というメッセージとリンクする背景画像にも、強いメッセージを感じます。目当てのブランドをクリックすると、新たなページが立ち上がり、公式オンラインショップの導線もスムーズです。

株式会社ワンキャリア

引用元:株式会社ワンキャリア(https://onecareer.co.jp/

「人の数だけ、キャリアをつくる。」というキャッチコピーを投影したような、3Dグラフィックアニメーションがトップページを飾ります。就職活動に関するサービスを提供する企業ということもあり、ユーザーを後押しするような希望に満ちた文言が並んでいるのも印象的です。使う色の数を全体的に抑えたことで、ユーザーに質実剛健なイメージを抱かせます。

ベクスト株式会社

引用元:ベクスト株式会社(https://www.vext.co.jp/

 AIの基盤となるテキストマイニングの実施ツールを販売する会社です。トップページの背景に表示されるグラフィック画像は “多数の声から1つの戦略を導き出す”という自社ツールを表しているのが伝わってきます。閲覧者のスクロールに合わせてアニメーションが表示されるため、楽しく文字を追うことができます。

TAO TAJIMA

引用元:TAO TAJIMA(http://taotajima.jp/

映像作家であるTAO TAJIMA氏のサイトです。見る者の目を引き付けるおしゃれなムービーや、スクロール操作で揺れるように切り替わる画像など、かっこいい仕掛けが使われています。テキストは必要最小限しか使われておらず、映像作家ならではの視覚に訴えるデザインが強く印象に残ります。

株式会社CRAZY

引用元:株式会社CRAZY(https://www.crazy.co.jp/

ウエディングプロデュースを行っている企業のホームページです。暖かみのあるカラーリングや柔らかな印象のアニメーションが効果的に使われています。シンプルな構成で、探している内容が見つかりやすく、パートナーシップに関連したさまざまなコラムも興味を引きます。

博報堂アイ・スタジオ

引用元:博報堂アイ・スタジオ(https://www.i-studio.co.jp/

交差点を行き交う人々で始まるムービーが、スタイリッシュな印象を与えるトップページデザインです。過去の実績や手掛けてきたイベントを紹介するだけでなく、新たなクリエイティブを生み出す多様な発想が込められているホームページです。

株式会社aircod

引用元:株式会社aircod(https://www.aircord.co.jp

シンプルなトップページに表示された3Dの企業ロゴが、カーソルと連動して動く仕組みになっています。フォントやカラーリング、細やかなアニメーション使いなど、全てにおいてかっこよさの際立つデザインです。手掛けてきた作品を一覧で表示しているアーカイブページには、テキストにカーソルを合わせるだけで画像が表示される仕掛けがあり、訪問者を楽しませてくれます。

株式会社WHERE

引用元:株式会社WHERE(https://where.inc/

積み上げてきた実績を、1つひとつ振り返るよう丁寧に紹介するホームページです。無機質な印象を受けるテキストのみのトップページをスクロールすると、地域の活性に尽力する人々の豊かな表情が映し出されます。程よく使われているアニメーションも効果的で、閲覧者の興味を高めてくれます。

HARIO株式会社

引用元:HARIO株式会社(https://www.hario.com/

耐熱ガラスメーカーの老舗です。情報がダイレクトに伝わってくるような、シンプルでわかりやすいトップページです。商品紹介ページも同様にシンプルな構成ですが、スペシャルページの記事をクリックすると、手の込んだアニメーションが使われていて、読み手の関心を引き付ける工夫がされています。

株式会社電通

引用元:株式会社電通(https://www.dentsu.co.jp/

主要なカテゴリーは上部タブに設置されていますが、画面をスクロールしていくとカラフルなパネルが表示され、これらが各コンテンツの入り口になっています。マーケティングに関するコラムや対談へのリンク、企業の取り組みなど、さまざまな視点から企業の情報を発信しているホームページです。

任天堂株式会社

引用元:任天堂株式会社(https://www.nintendo.co.jp/

かの有名な「マリオ」を生み出した日本を代表するゲームメーカーです。各ゲームの紹介動画が用意されていて、ユーザーの好奇心を向上させます。上部のタブにカーソルを合わせると、さらに目的別のカテゴリーが表示され、豊富な情報量ながらも見やすくまとめられているのがポイントです。

かっこいいデザインのECサイト15選

デザインが優れているサイトは、ユーザーの記憶に残ります。ここからは、また訪れたいと感じるようなデザイン性と、ユーザビリティの両方を兼ね備えたECサイトを紹介します。

MoMA Design STORE

引用元:MoMA Design STORE(https://www.momastore.jp/shop/default.aspx

新商品やキャンペーン情報への導線の良さが高い評価を集めているサイトです。商品別、デザイナー別での検索はもちろん、さらにカテゴリーを細かくすることで探している商品にたどり着きやすくなっています。質問チャットも設置されており、ユーザビリティに配慮されたホームページです。

MR.CHEESECAKE

引用元:MR.CHEESECAKE(https://mr-cheesecake.com/

見た目でも濃厚さが伝わるチーズケーキの写真がトップページ全面に使われています。ただ注文を受けるだけのサイトではなく、コラムが多数掲載されているのもポイントです。余白を大胆に使ったレイアウトが、商品を強く印象付けるという優れた効果を発揮しています。

RonHerman

引用元:RonHerman(https://ronherman.jp/

テキストが控えめで、写真が際立つデザインです。上部にあるタブから求めている情報へもアクセスしやすく、商品画像にカーソルを合わせると、商品名・価格が表示される仕組みになっています。シーズンごとのコレクションもまとめて閲覧できます。

RINGO

引用元:RINGO(https://ringo-applepie.com/non/berry/

フレッシュなリンゴを使ったアップルパイの魅力が伝わるトップページです。製造工程を紹介するムービーや、さりげなく使われているアニメーションがアクセントになっています。開催中のイベントやキャンペーンへの導線もわかりやすく設計されていて、ユーザビリティに優れています。

THE PARFAIT STAND

引用元:THE PARFAIT STAND(https://theparfaitstand.com/

ポップなカラーリングで賑やかな印象を与えつつ、どこかクールな印象もあるパフェスタンドのサイトです。ユーザーの興味が自然と高まるような楽しい仕掛けが魅力的です。ムービーやアニメーションもふんだんに使用されていて、商品の魅力をダイレクトに伝えることに成功しています。

SK−Ⅱ

引用元:SK−Ⅱ(https://www.sk-ii.jp/

シンプルな2つのタブでカテゴリー分けされた先には、多数の商品画像が並んでいて、どの商品が売れ筋なのかがひと目でわかるようになっています。トップページには、SK−Ⅱのコンセプトが伝わってくるアニメーションやムービーが公開されています。

クナイプ

引用元:クナイプ(https://www.kneipp.jp/

カラフルでありながら、落ち着いた印象のホームページです。トップページには、数量限定・季節限定商品の画像が大きく表示され、ユーザーの購買意欲を後押しします。「ハーブについて」「バスソルトの選び方」など、顧客の疑問を解消する項目が用意されていて、好感度の高いサイトになっています。

BOTANIST

引用元:BOTANIST(https://botanistofficial.com/shop/default.aspx

ヘアケア・ボディケア製品のホームページです。トップ画像の背景には、ブランドを象徴するみずみずしい植物の画像が表示されています。上部に設置されたタブからカテゴリーごとのページへ進み、商品画像をクリックすると詳細が表示される仕組みになっています。使用方法を紹介する動画や美容に関するコラムが充実しているのも特徴です。

Fred Perry

引用元:Fred Perry(https://www.fredperry.jp/

スポーツウエアが原点のアパレルブランドです。整然と並んだ商品画像にカーソルを合わせると、カラーバリエーションやモデルの着用画像が見られるようになっています。ブランドの歴史やサブカルチャーにまつわる記事も用意されていて、FRED PERRYの多彩な魅力が発見できるサイトです。

SALONIA

引用元:SALONIA(https://salonia.jp/special/genderless/

全体的に色味を抑えたクールなデザインに、カーソルを追従するシンプルなアニメーションが効果的です。アイテムを使用したスタイル写真も掲載されていて、ユーザーの購買意欲を向上させます。ジェンダーレスがテーマの商品展開をするなど、新しい視点を大切にした企業であることも伝わってきます。

BALMUDA

引用元:BALMUDA(https://www.balmuda.com/jp/

デザイン性の高い家電製品を展開している企業らしいシンプルでかっこいいホームページです。新商品やオンライン限定商品が紹介されていて、訪れたユーザーの好奇心をかき立てます。商品の詳細ページでは、その商品を使用したレシピが紹介されているなど、訪れたユーザーに対してのホスピタリティも感じられます。

PRADA

引用元:PRADA(https://www.prada.com/jp/ja.html

イタリアを代表するハイブランドのサイトです。トップページに最新コレクションの動画が表示され、そのシーズンのテーマやデザインのポイントについて知ることができます。コレクション別・素材別で商品が探せるのもポイントです。

RIMOWA

引用元:RIMOWA(https://www.rimowa.com/jp/ja/home

ドイツのスーツケースブランド RIMOWAのサイトです。上部に設けられたタブから見たい情報へとすぐにアクセスでき、商品画像からデザインごとのカラーバリエーションもひと目で確認できます。商品のスタイリッシュさをより引き立てるすっきりとしたデザインが特徴です。

A.P.C

引用元:A.P.C(https://www.apcjp.com/jpn/

カジュアルなデザインが人気のアパレルブランドです。画面の左半分には、ブランドロゴとともにカテゴリーが表示されていて、カーソルを合わせるごとに右半分の画像が切り替わります。より詳細なカテゴリーページが用意されていることで目当ての商品が見つけやすく、サイズや色で絞り込みを行うフィルターも設置されています。

+SHIFT

引用元:+SHIFT(https://plusshift.jp/place/

東京都内に特化したオフィスビル情報を紹介するサイトです。トップページに掲載されている画像はどれもスタイリッシュで、画像をクリックすると、そのビルの立地やフロアのレイアウトがわかるようになっています。360°パノラマ内見の画像も用意されているなど、見た目のおしゃれさだけでなく、利便性にも優れたホームページです。

ホームページデザインのおさえるべき6つのポイント

かっこいいホームページ作りを実現させるために、覚えておきたいポイントを解説します。成果につながるホームページには、以下のような共通点があります。

ファーストビューでユーザーの興味関心を惹きつけられるか

トップページのデザインは重要です。特にこれといった目的がなくサイトを訪れた訪問者は、トップページを見て興味が持てないと判断すると、わずか3秒ほどでブラウザバックしてしまいます。そのため、ファーストビューでどのようなイメージを打ち出すかはとても重要です。

メインカラーとアクセントカラーの2色で基本色がまとまっているか

カラフルな配色のホームページは、一見すると楽しげで好印象を受けるかもしれません。しかし、実際に使ってみると、どこにどのような情報があるのか見つけにくいといったことがよく起こります。メインカラーとその対照色の2色を中心に、すっきりと仕上げるのがおすすめです。

ユーザーファーストが徹底されているか

かっこよさにこだわりすぎて、ユーザビリティが後回しになってしまっては意味がありません。閲覧者が知りたい情報へ、スムーズにアクセスできる導線が大切です。利便性を高めるための検索窓やカテゴリー表示は上部にまとめて配置するなど、使いやすさも大切にしましょう。

レイアウトや情報がシンプルでわかりやすいか

複雑なレイアウトや読み取りにくい文字は、ユーザーのストレスになりかねません。目立たせたい部分は画像やムービーを使用して強調し、伝えたい情報はわかりやすくシンプルに記述するなど、メリハリのついたデザインが好印象を与えます。

レスポンシブ(スマホ)対応されているか

今やスマートデバイスからのブラウジングは一般的なものになっており、スマートフォンに対応していないサイトは閲覧者が激減するといっても過言ではないでしょう。スマートデバイスの対比に合わせたレイアウトにするなど、レスポンシブデザインを視野に入れて考えることが重要です。

トンマナ、フォントに一貫性があるか

どのような層をターゲットにホームページを制作するかを決定し、文体や画像の雰囲気を統一するようにします。トンマナだけでなく、使用するフォントについても特別な理由がない限りはホームページ全体で統一しておくとよいでしょう。

まとめ

さまざまなデザインに触れて学び、見た目のスタイリッシュさだけでなく、伝えたいことがしっかりと届くようなホームページを作りましょう。成果につながるノウハウを取り入れながら、閲覧者の興味関心を高めるホームページ作りを実現させてください。
ホームページを自身で作成するのが困難な場合には、制作会社に依頼するのも1つの方法です。

プロが作って、自分で簡単更新!
運用費用ゼロのホームページ作成サービス

初期費用55,000円、月額5,500円で高品質なホームページを作成可能!

お客様に最適な構成やデザインをプロが作成し運用までサポートするので、安心して任せることができます。
ホームページの更新は直感的に操作可能な管理画面からお手軽に更新可能です。

  • お客様に何を伝えたらよいかわからない
  • どんなデザインにしたらよいかわからない
  • 作った後の更新・運用方法がわからない

上記のようなホームページ作成のよくある悩みをsiteflowでカンタンに解決!
まずは無料相談をご利用ください。