HP・Webデザイン事例

2024.10.28 - Mon

井上

【厳選12サイト】面白い仕掛けがあるホームページ（HP）を紹介！

この記事で紹介しているサイト一覧

制作実績から参考サイトを探す

スクロールや画面遷移でサイトが変化するユーザを飽きさせないデザイン事例

近江リース株式会社

近江リースの実際のサイトデザイン

https://www.oumi-lease.com/（制作：株式会社リーピー）

こちらは滋賀県にある清掃業の企業のコーポレートサイトです。
爽やかな青と白の配色が、訪れる人に清潔感と信頼感を感じさせます。

ファーストビューからスクロールしていくと、風景が次々に変化していきます。ビルを抜けると視界が開け、湖が広がります。そして、社員の方々の顔が見えてきます。

計算された細かい動きによって平面のディスプレイに奥行きを感じさせ、ユーザーの心を惹きつけるデザインです。

株式会社キャリア・アーク

https://career-ark.co.jp/

株式会社キャリア・アーク様のコーポレートサイトです。優しい色合いの洗練されたデザインが、企業理念を表しているようで素敵です。

「ひとしずくの想い。つなぐ、ひろげる。」というキャッチコピーから、雫をモチーフにしたデザインに落とし込んでいます。スクロールすると雫が追従してきて、水たまりにぽちゃんと落ちたり、また着いてきたりという動きが印象深く、ついスクロールしたくなる仕掛けになっています。

haru光

https://haru-hikari.jp/（制作：制作会社リーピー）

ゲームなどを楽しむ夜時間に焦点を当てたインターネット回線のサービスサイトです。サービスに合ったイラストがとても可愛いですね。

夜のリラックスタイムを感じさせるデザインからサービス内容の説明が始まります。スクロールしていくと徐々に背景や窓の外が明るくなっていき、まるで夜明けを体験しているような気分になります。サービスのコンセプトとデザインがうまくマッチしたサイトです。

くりもと眼科

https://kurimoto-ganka.com/

大阪府にあるくりもと眼科様のホームページです。情報がわかりやすくまとまっており、見やすいです。

ナビゲーションから他のページに遷移しようとすると、まるで瞬きをしているようなアニメーションが！

デザインはシンプルですが、綺麗な写真と一つのアイデアでとても印象的なサイトとなっています。よく見ると、ロゴの目がマウスカーソルを見ているような動きもあり、お茶目ですね。

カワボウテキスチャード株式会社

https://www.3930311.co.jp/（制作:株式会社リーピー）

弊社で制作させていただいた、カワボウテキスチャード様のコーポレートサイトです。

一見、白を基調としたシンプルなデザインですが、時間で差し色が変わる仕掛けが。左下のボビンが満たされると、色が青から赤、オレンジ、黄色、緑と次々に変化していきます。

一本の糸から紡がれる様々な可能性を色の変化で表現した、心に残るサイトです。

有限会社安藤商店

安藤商店様_サイトデザイン

https://ando-chochin.jp/（制作：株式会社リーピー）

提灯を生産・販売する安藤商店様の通販サイトです。提灯といえば伝統工芸品のイメージがありますが、こちらのサイトでは伝統的なものから現代のインテリアにも合うような新しいデザインのものまで取り扱っています。それを象徴するように、サイトのデザインも写真が大きく使われたモダンなレイアウトとなっています。

こちらのサイトでは、提灯の優しい光を表現した動きを取り入れています。例えば、商品カテゴリにマウスを乗せると、画像は暗くなりますがマウスに光のようなグラデーションが追従してくるため、あかりが灯ったように見えます。

Works 制作実績

「面白い仕掛け」がある当社の
制作実績はこちら

地方企業におけるWeb集客の成功事例
同業他社のデザイントレンド
など、「Webサイト制作前に抑えておきたい要素」をご案内しておりますので、まだ情報収集中という方もお気軽にご相談ください。

動画やアニメーションを効果的に取り入れたインパクトのあるデザイン事例

株式会社アルミック　採用サイト

https://recruit.almic.co.jp/（制作：株式会社リーピー）

弊社で制作させていただいた、株式会社アルミック様の採用サイトです。社員一人ひとりに焦点をあて、インタビューやクロストークを充実させることで求職者にアプローチしています。

メインビジュアルが動画になっており、生き生きと働く姿をしっかり見せることができます。スクロールしても左エリアは動画のままで、右エリアでは社員紹介を見せるという思い切ったレイアウトで、インパクトある画面作りとなっています。

カンダまちおこし株式会社

https://www.kanmachi.co.jp/（制作：制作会社リーピー）

十六フィナンシャルグループのまちづくり会社、カンダまちおこし株式会社様のウェブサイトを制作させていただきました。ローカルに回る経済、地方がおもしろくなる引力を起こす、というキーワードを元に、回転して引き合いながら広がっていくアニメーションを使用しました。サイト全体は暖色で統一し、温かみを演出しています。

アニメーションは常にサイトの背景にあり、訪れた人にロゴの印象を強く残します。

株式会社加藤螺子製作所

株式会社加藤螺子製作所の実際のサイトデザイン

https://kato-rashi.co.jp/（制作:株式会社リーピー）

弊社で制作させていただいた、株式会社加藤螺子製作所様のコーポレートサイトです。ファーストビューで動画を大きく使用し、会社全体や設備を見せる構成になっています。サイト内の情報はカテゴリごとに整理されており、各製品の詳細情報がわかりやすいです。

工場案内のセクションでは、それぞれの設備の動画が再生されており、幅広い加工が可能であることが直感的にわかります。

株式会社トラックセッション

https://tracksession.jp/

スポーツイベントの企画運営を手がけるトラックセッション様のホームページです。社名にもなっている陸上トラックがモチーフの一つとなっており、爽やかでスポーティな印象を受けます。
サイト上ではイベント参加者が走っている動画が常に流れていて、疾走感があります。

ファーストビューではキャッチコピーが窓になっていて、動画の一部だけが見えている状態です。スクロールすると全体が見えてきます。その後も文章を読ませたい箇所では動画を隠したり、また小窓で見せたりと、効果的に見え隠れさせています。

Works 制作実績

「面白い仕掛け」がある当社の
制作実績はこちら

ユーザカスタマイズ機能を搭載したオリジナリティのあるデザイン事例

ブルーメンシュトラウス（株式会社馬場十一商店）

にぎやか・楽しい！元気なホームページデザイン！【11選】

https://blumenstrauss.jp/（制作：株式会社リーピー）

カラフルな商品や動きのある配置がアクセントになっていて、ポップで賑やかな雰囲気があるホームページです。お花と組み合わせることで上品感もありますよね。シンプルな背景と組み合わせることで豊富なカラー展開が目を惹きます。商品ページではそれぞれのカラーに合わせたデザインになっており、ユーザーを楽しませてくれます。