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

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

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

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

とにかく素材感・手書き感溢れるデザインで、子供をターゲットにしていることが一目でわかるデザインになっている。メインビジュアルのスライドの工夫が面白く、ついつい写真をスライドさせてしまう。 GIFアニメーションなどが効果的に使われており...

ホワイトスペースを有効活用し、余計な装飾を一切していないためか、非常にシンプルなホームページに仕上がっている。 グローバルナビゲーションの下の余白を取りすぎているのが少し気になるが、横幅を1090pxとかなり広めに取っていたりと、とに...

メインビジュアルはウィンドウ幅と高さいっぱいに広がり、背景には動画が流れる仕組みになっており、下にスクロールすると、視認エリアに応じてコンテンツが動きながら表示される仕組みになっており、レスポンシブにも対応している。 男心をく...

子供の写真のスライドを前面に持ってきた配色がオシャレなホームページ。各所でマウスオーバーに動作をつけており、見ているだけで楽しく、ワクワクするようなデザイン。写真や枠線は丸みを帯びており、ポップで優しい印象を与えている。全体的に非常にクオリ...

余計な装飾を一切使わず、非常にシンプルなデザインで、オーガニック感を演出できているホームページ。 サロンからの情報を定期的に配信するために、Wordpressが導入されている。こういった定期的に配信する部分をアメブロを中心としたブログ...

1カラムで構成されたシンプルながらもオシャレなレスポンシブ対応のホームページ。写真を横幅いっぱい使っている箇所が多く、メインビジュアルはスライドする形式。スマホ閲覧時はキャッチコピーのみ表示され、サブコピーは表示されなくなっている。 ...

3カラム構成で真ん中のカラムはヘアモデルが縦スライダーするという、独特なサイト構成になっている。 3カラム構成にするとレスポンシブでスマホ対応するのが難しくなり、実際に現時点でこのホームページはスマホ対応していないが、情報を一度に見せ...

白色をベースとした高級感のあるデザインで、レスポンシブ対応したホームページ。着目したいのが、グローバルナビゲーションのローマ字がWebフォントを使って表現されている点だ。 従来はオシャレなフォントを使おうとすると、画像化するしかなかっ...

緑色一色でデザインされており、シンプルながらも安心感のある高品質なホームページ。下層ページも写真が多用されており、とてもわかりやすい内容になっている。 メインビジュアルの医院長の治療中の写真のクオリティが高く、安心感や技術の高さを上手...

イラストが多用された非常にポップで可愛いホームページ。色数が多く見ていて楽しいデザインになっている。背景は画像を使っているが素材感があり、CSSだけでは表現できない味が出ている。 フォトアルバムというページでは、会員のみ閲覧できるよう...

各ページへ遷移した際の動作が面白く、随所でWebフォントを有効活用し、ほとんどの箇所を画像化せずにコーディングしている。Webフォントとはクライアント（閲覧者）側の環境に依存せずに、指定したフォントを表示させる技術で、これだけWebフォント...

メインビジュアルで街のイラストが使われており、色数が多く、文字が丸みを帯びているためポップなデザインとなっている。インプラントは女性が多く利用する治療なので、恐らく女性をターゲットにデザインされたのだろうが、とても可愛いホームページに仕上が...

白を基調とした清潔感のある歯医者のホームページ。明朝体を上手く活用し、余白も広く取られていて、レスポンシブなのでスマホにも最適化している。 よくあるホームページの失敗例として、自社の強みを洗い出していくと、少しでも多くのアピールポイン...

レスポンシブで作成されたオシャレでシンプルなホームページ。写真の多用、ホワイトスペース（余白）の活用、文字の間隔の広さ、行間の高さによって、シンプルながらも決して安っぽくなっていないデザインに仕上がっている。 マウスオーバー時の色の変...

「前歯を見せて、大きな口で笑ってほしい」「あなたの未来にあわせた歯科治療を」といった、ユーザに刺さるようなキャッチコピーがつけられており、視認性が高くクオリティが高いホームページ。 ロゴが歯の形になっており、手書き風の文字や縦書きが織...

メインビジュアルは代表者の写真と強みをアピールしたデザインになっている。 最近ではスマホ対応（レスポンシブ）を考慮してタイトル部分を画像化しないケースが多いが、ここは画像化している。画像化することによって、ドロップシャドウやフォントサ...

中小企業に特化した税理士事務所で、メインビジュアルのビル群と売上げアップのイメージ図により、法人向けのデザインを演出している。 ベースは黒色、クリックさせたいボタンはオレンジ色で、2カラムで構成されている。かっこいいだけのホームページ...