スマートフォンやタブレット端末などの普及と、それにともなうインターネットの利用拡大により、ホームページは企業やお店などにとってかかせない情報発信ツールとなっています。

実際、インターネットで検索するとたくさんのホームページが見つかります。そして、それぞれ同じデザインのものはなく個性豊かで、よく観察すると多くのホームページが持つ共通点が見つかります。

今回は、多くのホームページで見かける定番の表現方法と、その役割をお伝えしていきます。

この記事を通して、ホームページに対する印象が薄い方や、これからホームページの新規開設、リニューアルを検討される方に少しでも最近のホームページのイメージを持ってもらえれば、と思います。

ホームページでよく見かける定番のUI（ユーザーインターフェース）

それでは順番にご紹介していきます。

スライダー（またはカルーセル）

まず1つ目が「スライダー」です。

複数の画像を切り替えながら表示させる役割を持ちます。切り替えの方法は様々で、左右矢印ボタンをクリックして切り替えたり、時間によって自動遷移させたりもします。

特徴としては、限られたスペース内の中でたくさんの画像を見せることができます。また切り替わり時には、スライドやフェードイン/アウトなどの動きが生まれるため、ユーザの目を引くことができます。

TOPページ上部のメイン画像部分に使われていることが多いです。

トップへ戻るボタン

次に「トップへ戻るボタン」です。

クリックするとページ上部へ移動します。一般的にはページ下部の隅に配置されることが多く、マウスのスクロールやモバイル端末のフリック操作なしで、そのページの一番上へ移動することができます。

右下の、コレです。

コンテンツが少ないページではスクロールやフリックですぐに移動可能なため、利用機会は少ないかもしれませんが、文章や画像が多くて縦に長いページなどで「一番上に戻りたい」というときに、特に効果を発揮します。

縦に長いページでもスクロールいらず

また移動の際は滑らかなスクロール表現（＝スムーススクロール）がよく用いられます。
TOPへ戻るボタン以外にも、ページ内のある箇所から別の場所へ移動する際などにも使われます。

モーダルメニュー

最後は「モーダルメニュー」です。画面全体に展開するナビゲーションメニューになります。

多くの場合、メニューボタンを押すと背景が暗転して、メニュー内のリンクをクリックするか、×印または暗転部分をクリックしてメニューを閉じる操作を促す仕組みになっています。

ページの表示スペースを気にせず、画面全体を使って浮かせるように配置できるため、リンクが多い場合でもたくさんの情報を掲載することが可能です。

メニューボタンはページ上部の左右隅に固定して配置されことが多いです。

モバイル端末などでは、ページ内のどの位置からでもメニューを通して別のページへ移動できるよう、画面上に固定配置することでユーザーの利便性があがります。

スマートフォンではこんな感じ

ホームページは定番UIが溢れている！

いかがでしょうか？ご紹介した中で見たことのあるUIはありましたか？

今回は弊社ホームページを参考にサンプルイメージをお見せしましたが、他のホームページを覗いてみると、おそらく同じような機能・UIが見つかるかと思います。どこが違っているのかに注目して、同じ機能を比較するのもおもしろいかもしれません。

特にホームページのリニューアルや新規制作をお考えの方であれば、たとえ漠然としていても「こういった雰囲気」「こういう機能」などのイメージがあるだけで、制作会社との打ち合わせを行う際にお互いの認識や求めるものを共有しやすくなるかと思います。

今回は【その①】ということで、次回はまだまだあるホームページの定番UI（ユーザーインターフェース）【その②】をお届けします。