ブルー・青色を使ったホームページ・Webデザイン事例

白色を基調に、青色をアクセントとしたすっきりと見やすいサイト。メインビジュアルのスライダーは、見出しと画像の動くタイミングに変化をつけることで、ユーザーの関心を引くような動きになっている。 各サービス紹介ページは、アイコンを使って分か...

グローバルナビゲーションを左側に固定配置したサイト。モニターが長大化する昨今において、横長の画面を上手く利用するレイアウトだ。 コーポレートロゴの緑色をポイントで使いつつ、青・緑系統の色で全体的に優しい色合いで構成されている。各ページ...

多言語マーケティングを売りにしている企業サイト。多様な国籍の従業員が微笑みかける動画をメインビジュアルとし、海外向けマーケティングパートナーとしての土台の確かさを訴求している。 横長のモニターでも画面幅いっぱいにコンテンツが表示され、...

ファーストビューにはビジネスシーンを思わせる動画を掲載。スクロールに合わせてコンテンツが動画の上を流れるほか、ボタンや見出しを枠からはみ出すように配置するレイアウトにより画面を立体的に見せている。 ページ遷移時には画面読み込み中である...

白い余白を効果的に使い、爽やかで開放的な印象を与えるサイト。トップページメインビジュアルの写真白いフレームを設けたかのように余白があり、透明感がある。写真からはみ出すようにテキストが配置されているのも要素に奥行きが生まれ、デザインに立体感が...

オリジナルの写真が多く、キャッチコピーに視線を誘導するようレイアウトが工夫されているサイト。デバイスフォントでなく画像内に直接文字を書くことで、雑誌のように自由なレイアウトを実装している。 縦書きの文字や、縦長の写真が比較的多いのも特...

流線形のグローバルナビゲーションが特徴的なサイト。 アーチ状になったナビゲーションが視線上に動きをつけ、飽きのこないデザインとなっている。メインビジュアルには写真を使うサイトが多いが、このサイトではトリミングされた写真と、デザインされ...

メインビジュアルや、各ページの上部に設置された写真は都会的でスマートな印象を与える。ヘッダー・フッターに並ぶ要素がほぼ同じで、ページの最下部までスクロールしてもページ冒頭と同じアクションを起こせるようになっている。 全ページ、フッター...

文字組が個性的なトップページ。ファーストビューではメインビジュアルを効果的に見せるためヘッダーの背景が透過しているが、スクロールすることで導線としての機能に特化する。電話・メールでの問い合わせボタンは大きく設けられ、スムーズにユーザーを誘導...

深い青を基調とした、信頼感を与えるトップページ。ファーストビューにはスタッフの集合写真が掲載されている。問い合わせを行うユーザーにとって、実際に担当してくれる人の顔がサイトで見られると、安心感があるだろう。 トップページのデザインは写...

青色を基調に、理性的でクールな印象を与えるサイト。スクロールに合わせて写真がフェードインするアニメーションが実装されており、上品な雰囲気が漂う。 スクロールに合わせてヘッダーが画面上部に追従してくることで、サイト全体の回遊性を高めてい...

トップページにはスクロールに合わせてコンテンツが浮き上がるようなエフェクトが実装されており、洗練された印象を与える。使用されている写真も全体的にトーンの統一感がある。 特徴的なのはグローバルナビゲーションの中央に設置されたコーポレートロゴ...

トップにサッカーボールを抱えた代表の写真が掲載されたこのサイトでは、芝生やグラウンドなどのサッカーを連想させる写真を使用しているほか、「ページ上部へ戻る」ボタンなど、サイトの随所に遊び心を感じさせる。 ビビッドな青色と黄色を使用したデ...

全面に動画を打ち出し、「人々の笑顔を支える」コンセプトを伝えるトップページ。動画はオフィス、法人・個人クライアントといった様々なシチュエーションを感じさせる内容になっており、最後に切り替わるタイムラプス動画の街並みはプロフェッショナルな印象...

鮮やかなブルーを基調とし、クールでインテリジェンスな印象を与えるトップページ。メインビジュアルは動画を使用しており、トレンドを抑えていると言えるだろう。かといってイメージ訴求に寄り過ぎず、電話番号表記やトピックスなどの、アクセスすべき不可欠...

今まで色々とホームページのデザインをまとめてきたが、間違いなくトップクラスにクオリティが高いホームページ。 単純なデザインだけでなく、メニューのドロップダウン、ニュースのタブ切り替え、マウスオーバー時の動作など、Javascript側...

写真の使い方が美しい、シンプルなデザインのホームページ。下層ページは全て違うテンプレートでデザインされており、細部まで丁寧に作られている。 少し情報量が少ない印象を受けるが、TOPからの各要素（リンク先）が大きく設計されており、非常に...

余白感の取り方含め、かなり大胆なデザインを取り入れた法律事務所のホームページ。レイヤーや文字をわざとずらして、明朝体を全体的に活用し、青しか色が使われていないので、非常にシンプルだが、高級感があるデザインとなっている。 横線を...

最近流行っている、文字と画像をわざとずらす手法が色々な所で使われており、各要素はスクロールに応じて色々な動きを取る仕組みになっている。ぺージの読み込み速度が少し遅いため、遷移した際に何も表示されない時間があるため、そこが少し残念な点。 ...

最近では珍しくトップページから2カラムの構成となっているホームページ。最近ではグラデーションを使ったデザインは少ないが、至ところにグラデーションが活用されている。 ファーストビューでは5人のスタッフの顔写真とロゴを使ったバナーを前面に...