参考にしたいレスポンシブWebデザイン15選

モバイル端末でホームページを閲覧するユーザーが増えており、モバイル対応はもはや必須となっています。

レスポンシブデザインを採用すれば、、ユーザーはどのデバイスからでも快適にWebサイトを閲覧することができます。

また、ユーザーの利便性が向上し、アクセスやコンバージョン率の増加も期待できます。

この記事では、デザイン・利便性に優れたデザイン事例をご紹介します。

事例を参考にすれば、自社のホームページをレスポンシブデザインにする際のヒントが得られるでしょう。

シンプルでUIに優れたデザイン事例

株式会社マルベルデン

https://www.mulberden.com/

「株式会社マルベルデン」は東京都港区南青山に本社を構え、ホームぺージを総合的にプランニングするWeb制作プロダクションです。

「css design awards」や「The FWA」、「Awwwards」といった世界の優れたWebサイトが選出されるアワードを受賞し、海外のWebサイトも制作しています。

デザインはシンプルかつ洗練されており、高いデザイン力はさすが多くの受賞歴を持つ制作会社だなと思わされます。

UIも優れており、情報が整然とまとめられたナビゲーションから、どんな情報を持つサイトなのか直感的に理解できます。

Bot Express

https://www.bot-express.com/

「世界からめんどくさいをなくせ。」を掲げ、デジタルで町がもっと良くなるサービスを創造する「Bot Express」のホームぺージです。

モダンで洗練されたデザインからはテクノロジーと高い専門性が感じられます。クリーンなレイアウトと直感的なナビゲーションは、ユーザーに使いやすさとプロフェッショナルな印象を与えます。

アプリやシステム開発など、技術力や専門性を強調したいとき参考になるデザインです。

VUILD株式会社

https://vuild.co.jp/

「VUILD株式会社」はデジタル技術を駆使した次世代の建築を開拓する建築集団です。ものづくりに情熱を捧げる設計者・技術者・製作者によって構成され、設計から部品製作まで一貫しておこなっています。

先鋭的な建築物を創造する集団のホームぺージらしく、洗練されたデザインからはプロフェッショナルで先進的な印象を感じられます。

メリハリのあるフォント、適度な空白によって非常に見やすく、シンプルながら飽きのこないデザインに仕上がっています。

ビーワイディージャパン株式会社

https://byd.co.jp/

電気自動車をはじめとする製品・サービスを通じて、お客様のビジネスや暮らしに寄り添う「BYDジャパン株式会社」のホームぺージです。

電気バスやEVフォークリフトなど先端技術を駆使した製品を扱う企業らしく、技術革新とサステナビリティを強調し、クリーンで洗練された印象を与えるデザインに仕上がっています。

アフターサービスや製品情報など訴求ポイントは多めですが、アイコンや適切なナビゲーションを駆使し、時間をかけず情報を網羅できる構成になっています。

Morght

https://morght.com/

「株式会社Morght」は、D2C寝具ブランド「NELL」の企画・販売をおこなう東京都港区の企業です。社名には朝 (Mornig) 起きてから (to)、夜 (Night) 寝るまでの人々の生活を豊かにする。 という意味が込められています。

色使い、メリハリのあるフォント、余白、レイアウト、写真すべてが高いレベルでまとまっています。デザインはシンプルですが、イラストやアニメーションに遊び心が感じられ、見ていて楽しくなるサイトです。

サービス・商品の魅力が伝わるデザイン事例

サウスレイン

https://southrain.com/

オーストラリアや南アフリカ原産の植物、オージープランツ（ネイティブプランツ）を取り扱う「サウスレイン」のブランドサイトです。

若葉色に近い柔らかなグリーンを基調にし、自然と温かみを感じさせるデザインで、高品質な写真を多用し商品の魅力を視覚を通してダイレクトに伝えています。

商品を魅力的に魅せたいECサイトやブランドサイトを作る際に参考にしたいデザインです。

バイオリン工房 Studio Mora Mora

https://studio-moramora.com/

バイオリンの聖地クレモナで8年に渡り培った技術で、バイオリン・ビオラ・チェロの製作・修理・販売を行うバイオリン工房「Studio Mora Mora」のホームぺージです。

クラシカルで上品なデザインと、落ち着いた色合いとバランスよく配置されたタイポグラフィーが、ユーザーに安心感を与えます。

屋号のMoraには「ゆっくり」という意味があり、それを表すように「ゆっくり」と眺められるホームぺージに仕上がっています。

西川株式会社

https://www.nishikawa1566.com/

1566年（永禄9年）創業。450年以上に渡り生活用品の製造・販売を通じて人々の暮らしを支える「株式会社西川」のホームぺージです。

白をベースにした清潔感が漂うデザインは、商品の品質と企業の信頼性を強調しています。

商品情報やコラムなど多くのコンテンツを有していますが、ナビゲーションから動線がうまく張られ、整然としたレイアウトで見にくさを感じさせません。

デザイン性はもちろんUIも作り込まれており、シンプルで見やすく、使い勝手に優れたサイトを制作する際には参考になるでしょう。

小川ぶどう園

https://ogawa-vineyard.studio.site/

濃厚な甘さと豊かな風味を持つ葡萄（ぶどう）を育てる「小川ぶどう園」のホームぺージです。

自然と調和する穏やかなデザインで、シンプルで使いやすいUIは、快適なユーザー体験を提供するでしょう。

ツタのイラストをあしらい、美味しそうな葡萄の写真が目を引くデザインは「ぜひ食べてみたい！」と思わされます。

蛇足的なコンテンツは一切なく、ひたすら葡萄の美味しさと園主の想いを伝える、シンプルながら引き込まれるホームぺージです。

代官山青果店

https://daikanyamaseikaten.com/

東京・代官山にある小さな街の八百屋さん「代官山青果店」は、生産者に代わって手間と愛情のこもった野菜や食品を地域に届けています。

仕入れるものは、生産者と直接会い、店主が惚れ込んだものをメインに厳選したものばかりです。

地域コミュニティとのつながりを大切にする街の八百屋さんらしい、温かみと親しみを感じるホームぺージです。

高品質な商品画像が食欲を刺激し、眺めているとつい「バッグに入れる」ボタンを押しそうになります。

かっこいいデザイン事例

アナログファウンデーション

https://analoguefoundation.com/

「アナログファウンデーション」は、音と音楽を軸に五感に響く忘れられない体験や、未来へつながるもの・ことをカタチにとらわれずに生み出すクリエイティブコレクティブです。

モダンでアーティスティックなデザインで、創造性と革新性を前面に押し出しています。ベースはモノトーンですが、明るい色使いの写真が程よい彩りを与え、大胆なグラフィックが目を引きます。

創造的なイメージを前面に出したい企業の参考になるWebデザインです。

AIアニメプロジェクト (AI Anime Project)

https://ai-anime-pj.com/

「AIアニメプロジェクト」はAIによるクリエイティブが台頭するなか、人の心を震わせる根源がどこにあるのか？をテーマに、AIとクリエイターが共創し、今までにない形でIP・キャラクターを生み出すことを目的に、テクノロジーカンパニー・アニメスタジオ・クリエイティブスタジオで挑む、新しいアニメの可能性を探求するプロジェクトです。

最先端であるAI技術を採り入れたプロジェクトのLPらしく、テクノロジーとクリエイティビティを融合させた現代的なデザインです。

明るく鮮やかな色使いとアニメーションがユーザーを引き込み、エネルギッシュな印象を与えます。「人×AIがこれからどんなアニメを生むのか？」とてもワクワクさせられます。

独創的なデザイン事例

建築空間創作集団 colours

https://www.beams-factory.com/

「建築空間創作集団 colours」は、「明日をもっとcolourfulに。」をコンセプトに、空間をトータルプロデュースする職人集団です。

コンセプトどおり、ファーストビューはカラフルなイラストが画面一杯に表示され、インパクトは抜群です。テキスト、写真などコンテンツも大きく配置され、ダイナミックさを演出しています。

サイト全体で創造性と独創性を強調しており、多くのビジュアルと動きを利用して、ワクワクを感じるユーザー体験とインスピレーションを生み出します。

Renxa株式会社

https://recruit.renxa.co.jp/

クライアントのマーケティングに新たな価値を提供し続ける「Renxa（レンサ）株式会社」のリクルートサイトです。

暖色系のグラデーションが温かみを、多彩なアニメーションがPOPさを演出し、楽しんで働けそうな企業イメージがうまく作られています。

色彩、動きの多いデザインとは反対にナビゲーションはシンプルで、求職者にとって必要な情報が過不足なくまとめられています。

UUUM

https://www.uuum.co.jp/

YouTuberの総合プロデュース事業を手掛ける「UUUM株式会社」のホームぺージです。

常に新しいエンタメを創造してきたUUUMらしい、明るく活動的なデザインです。カラフルで動的なキャラクター・イラストはエネルギッシュで前向きな印象を与えます。

活気とエネルギーを表現したいサイトを作るとき参考にしたいデザインです。

レスポンシブWebサイトで快適なユーザー体験を

レスポンシブWebデザインは、スマホユーザーが増えたオンラインビジネスにおいて重要なファクターとなっています。

デザイン・UIともに優れたホームぺージは、企業・ブランドイメージの向上にも貢献します。

●スマホ時代に対応したい
●ワンランク上のサイトをつくりたい
●ホームページを使って集客したい
●ホームページで売り上げを伸ばしたい

という方は、ぜひ弊社にご相談ください。

これまで培ったノウハウ・実績で、スマホユーザーに快適なユーザー体験を提供するレスポンシブWebサイトをご提案します。