コラムColumn

トップページのデザイン比較

はじめまして。6月からウェブ制作の仕事に就き、もうすぐ3カ月が経とうとしている新人デザイナーのクラッカーです。
当ブログを読んでくださいましてありがとうございます。
毎日ウェブデザインの仕事に携わっていますがデザインの経験が薄く、どうしたらしっくりくるデザインができるのか日々悩んでおります。そんな私ですが当ブログでは、参考サイトを見比べながらデザインを考察するレポートを書こうと思っています。みなさまぜひご覧ください。

 

それでは、今回は2つの病院サイトトップページを比較してみます。
一宮西病院のサイトトップページにはスライダーのメインビジュアルがあり、写真の左側が白くフェードアウトしているようなデザインになっています。
メインビジュアル上のタイトル・メッセージには毛筆のような和文フォントが使われており、この書体がメインビジュアルやサイト全体のイメージに影響を与えているのではないでしょうか。
また、メインビジュアル・メインコンテンツの上部から下に向かって、背景にグラデーションがかかっているところがきれいで、ページを分割する効果にもなっており、見やすいデザインだと感じました。
矢印やアイコンが丸い形で統一されている所も特徴だと思います。
全体的に写真が多く使用されていて見ごたえもあるのではないかと思います。

比較画像psd

次に選んだのが、大阪府済生会泉尾病院のサイトトップページです。
グローバルナビにマウスオーバーした時に、色が反転してタブのような形が表示されるデザインにこだわりを感じました。
メインビジュアルは横に広く病院の写真を表示していて、明朝体系のフォントでシンプルなメッセージが左サイドに載せられています。
「病院からのお知らせ」のコンテンツでは、はじめに見た一宮西病院のコンテンツとは違い、タブで表示が切り換えられるようになっています。
また、矢印のアイコンはこちらでも丸地に三角形のデザインが使用されています。
見出しやボタンに使用されているスタイルの色味は一宮西病院の見出し・ボタンのグラデーションのものと似ている色みをしています。
フッターは一宮西病院のシンプルなものとは違い、コンテンツの一覧がたくさん掲載されています。
サイトの比較をしてみた結果、雰囲気が似ているサイトのデザインは、フォントの印象や中間色の色み、アイコン・シェイプなどに共通点があると感じました。
使用しているパーツの形や、ボタンのグラデーション、スタイルも似ていました。また、今回の比較では病院のトップページ同士でも、掲載されているコンテンツやコンテンツの載せ方に違いが見られました。
また、グローバルナビの動き、メインビジュアルの動きにも違いが見られました。
じっくり観察すればするほどサイトデザインをした人が意識していたルールに気付くことができるのではないかと感じました。もっとウェブデザインのマナーを学んで、自分でデザインのよしあしを判断できるようになれたらいいなと思っています。
ここまで読んで頂きありがとうございました。

WEBデザイン / 比較

執筆者:nagata

お問い合わせフォーム