ホームページのデザイン例

メインビジュアルは事務所からの風景写真やスタッフの写真がスライドする形式になっており、「News」のコンテンツ部分の白枠が写真と重なるようになっている。法律事務所は堅苦しいイメージがあるが、スタッフの写真のおかげで柔らかいイメージを与えてい...

メインビジュアルはウインドウ幅いっぱいに広がる構成で、写真はスライドで切り替わるようになっている。キャッチコピーとサブコピーの位置が左下でスライドする写真からはみ出るような位置に置かれており、センスを感じさせる。サブコピーの「突然生じる事故...

着目したいのがメインビジュアルの背景。最初見たときは気づかなかったが、カラフルな空模様のデザインの色合いが徐々に変わるようになっている。メインビジュアル以外は特筆したところは特にないが、採用サイトという特性上、ファーストビューのイメージが一...

ロゴが絆創膏風なデザインになっている可愛らしいホームページ。ピンク色と茶色でデザインされており、メインビジュアルの写真はスライドする構成になっている。ヘッダー部分が少しごちゃごちゃしており、どこを最初に見て欲しいのか？というのが定まっていな...

メインビジュアルの写真はスクロールしても固定された状態で写真がスクロールされないという形になっており、この動きをパララックスと呼ぶ。パララックス（別名スクロールエフェクト）を与えることにより、奥行きや立体感を演出することができる。 ...

白を基調としたシンプルで清潔感のあるホームページ。メインビジュアルの3枚の写真はそれぞれのページへリンクをさせる設計になっている。1カラムで全て構成されており、各タイトル等で黄色が使われているだけで、全体的に色数が少なく統一感のあるデザイン...

イラストを効果的に使い優しい印象を与えているホームページ。 ホームページの随所に動きがあり、閲覧していてワクワクするような構成になっている。左側にあるグローバルナビゲーションにマウスを載せると下記のようにアイコンにも動きをつけている。...

「がんこクリニック」という名称含め、非常に独創的なホームページデザイン。メインビジュアルの写真は一定時間でスライドするようになっており、ウインドウ幅・高さいっぱいに広がるようになっている。 メインビジュアル含め、下部のページでも効果的...

ファーストビューは至って普通のデザインだが、「初めての方」「メニュー」「スタッフ紹介」などの下層ページが非常に丁寧に作り込まれており、クオリティが高い。 縦書きでWebフォントを使って見出しを作成し、スマホでは横書き表示に変更したり、...

明朝体が多用された安心感・信頼感のあるホームページデザイン。レスポンシブで設計されておりスマホにも対応している。 余白を取り過ぎているせいか、それともフォントが大きいせいか、間延びした印象になっているが、スライドに使われている写真のク...

グローバルナビゲーションが縦書きで、左右のフラッグが連なった飾り（フラッグガーランド）が印象的な、可愛いくてポップなホームページ。全体的に文字サイズが大きく太字で案内されており、ユーザに優しいデザインになっている。 メインビジュアルの...

予約システムが搭載された治療院のホームページ。シンプルでイラストと写真を多用し、緑色と茶色の2色でデザインされている。レスポンシブ対応しており、スマホで見ても最適化した状態で表示される。 アクセスマップでは駅から医院までの道のりを動画...

メインビジュアルは背景写真がフェードイン表示でスライドし、キャッチコピーの「これからの医療を、ここから。」で固定して表示している。スライドする写真ごとにキャッチコピーを変えるサイトも多いが、ここは一つに絞ってスライドする写真で安心感・信頼感...

カラフルなデザインで可愛らしく仕上がったホームページ。ロゴやグローバルナビでは文字間が非常に広く取られており、メインビジュアルにはYoutubeの動画が載せられている。 こういった動画はYoutubeで再生するのではなく、Html5の...

メインビジュアルの写真のトリミングの独特さと、上部の左右にぶら下がっているフラッグが連なった飾り（フラッグガーランド）が印象に残るホームページ。着目したいのが、幼稚園のスケジュールをGoogleカレンダーを使って保護者に告知しているところだ...

イラストが多用されたレスポンス化されたホームページ。メインビジュアルのスライド写真の1枚目はYoutubeにリンクされる設計で、全体的にシンプルに仕上がっている。イラストが効果的に使われているためか、シンプルながらも安っぽくなっていない。 ...

メインビジュアルで園内を撮影したと思われる動画が使われており、目新しさを感じるホームページ。レスポンス化されているが、動画の部分はスマホの通信料を考慮してか、画像が表示されている。余白が広く、ホワイトスペースを活用したデザインで、所々で使わ...

青・白・黄のコントラストが良く、全体的に丸みを帯びた可愛いデザインに仕上がっている。下層ページのサイドメニューは全て画像化されており、視認性が高いデザインとなっている。最近ではサイドメニューがない1カラムなサイトが多く、あったとしても右側に...

グローバルナビゲーションがタブの切り替えとなっており、全体的にシンプルでUI・UXが良いホームページ。構成自体は王道で見新しさがない半面、王道だから使いやすいという側面もある。 下層ページではサイドメニューが右側に表示され、メインコン...

グローバルナビゲーションに相当する部分がブロック要素として並んでおり、グリッドレイアウトと呼ばれる手法でデザインされたホームページで、スマホにも最適化している。こういったあまり例を見ない構成というのは、使い勝手が悪いと思われる場合が多いが、...