ホームページのTOPページデザインで意識しておきたい5つのこと

更新日：2018年01月13日｜公開日：2016年04月29日

目次
1.アイコンの洗練
2.垂直スクロールデザインパターンの復活
3.ヒーローヘッダーを使った印象深い全画面画像
4.アニメを使ったインタラクション
5.写真スライダーの活用
【まとめ】TOPページのデザインにお悩みの方は業者にご相談してみませんか？

今後、HTML5を活用したアニメや、動画、モバイルとパソコンのデザインをシームレスにする垂直パターンなどが人気となることが予想されます。

こうしたトレンドを把握しておき、自社のTOPページデザインにぜひ活かしてください。

1.アイコンの洗練

スマホが全盛となる前は、アイコンといえば「送信」「申込み」などの無味乾燥なものや、やたらと立体的なごてごてしたイメージのものが多かったです。
しかし、現在主流のアイコンはもっとシンプルで、パッと見てすぐに何をしたら良いかが分かるものが多いですね。

その典型例が「ピクトグラム」です。
ピクトグラムとは何らかの情報や注意を示すために表示される視覚記号のことですが、非常階段の緑色の人が階段にダッシュしているイラストを思い浮かべると分かりやすいです。
あれと同じで、ユーザーが何をするべきなのか人目でわかるアイコンが主流になってきています。

2.垂直スクロールデザインパターンの復活

垂直スクロールは、下火になりかけた時期もありました。
「情報は簡潔に！」が情報化社会の合言葉となっていますが、この波はWebデザイン業界にも及びました。
「長いスクロールは伝えたい情報をきちんとまとめ切れていないからだ！」というネガティブな意見が影響力を持った時期がありました。
しかし考えてみればWebのユーザー体験は紙の企画書とは違うわけですから、なんでもかんでもA4で１枚にまとめましょう的な発想には無理があったのでしょう。

垂直スクロールは長い１ページ物のランディングページのコンバージョン効果が注目を集めることと、縦スクロールが苦にならないスマートフォンの普及によって復権しています。
下方向へのスクロールは、むしろ違うページに遷移させるよりも離脱率が低いというデータもあります。

3.ヒーローヘッダーを使った印象深い全画面画像

「Grain and Mortar」公式サイト — 出典Grain and Mortar

ヒーローヘッダーとはサイトのファーストビューに全画面の画像や動画を使い、メッセージ性のある短いコピーを画像にかぶせるようにしたデザインです。
これまでも、大きめのヘッダー画像を使ってブランドイメージを訴求するという手法はありましたが、ヒーローヘッダーは、ヘッダーと言いつつも全画面であることが特色です。

IR情報などの企業の情報発信を主体としたコーポレートサイトでは使いにくいのですが、企業サイトでも特定のサービスやブランドの紹介にはとても向いています。

4.アニメを使ったインタラクション

Flashが使われなくなるにつれてアニメーション自体が企業サイトで使われなくなったかというと、そんなことはまったくありません。
むしろ、古くからあるGIFアニメを使った小技の聞いたTOPページや、HTML5を使った派手なアニメーションを使ったTOPページは増えてきています。
その他CSS３を駆使したアニメ、jQueryなどのJavaScript系アニメーションも盛んです。

ただし、「そのアニメは何を訴求しているのか」「ほんとうに必要なのか」ということは、しっかり意識して取り入れましょう。

5.写真スライダーの活用

写真スライダーの利点は、TOPページに大きな領域をとってしまう画像部分に、情報量を増やすことができる点です。大きな通常ヘッダーや全画面のヒーローヘッダーは確かにインパクトがあるのですが、その反面、伝えることのできる情報量が減ってしまうという欠点があります。
スライダーを使えば、ストーリー性のあるアニメーションのようにして小出しにコーポレートアイデンティティを伝えることもできますし、サイト内の各詳細ページへのナビゲーション機能を果たすこともできます。

ヘッダー部分をスライダーにすることもできますし、ヒーローヘッダーのような全画面をそっくりそのままスライダー化することも可能です。

【まとめ】TOPページのデザインにお悩みの方は業者にご相談してみませんか？

TOPページデザインは、その時代のキーとなっているトレンドをよく表しています。
でも流行を表面的に追っているだけでは、他社を真似したサイトにしかなりません。
なぜそのTOPページデザインが必要なのかをしっかり考えて、自社にとって必然性のあるTOPページデザインを実現することが大切です。
なかなか難しいですが、ここをおさえておかないと流行が過ぎてしまった後はホームページ全体の価値も一気に下がってしまいます。

日本最大級の発注業者比較サイト『アイミツ』ではWebデザインに関する専門知識を持ったコンシェルジュが本質を抑えたTOPページデザインに対応可能な業者を完全無料で紹介することができます。

まずはお気軽にお問い合わせください。
すぐれたコンシェルジュが、あなたの会社に合った企業選びを全力でお手伝いさせていただきます。

ホームページ制作会社を比較、無料で一括見積もり