自分でできる簡単更新!オリジナルのホームページ制作ならkayokiseki-design

  

2015年「上に戻る」ボタン4パターン

多くのホームページの右下やフッターに「上に戻る」ボタンがあるのをご存知ですか?

3年ほど前でしょうか、jqueryを使った「ぬるっと上に戻るボタン」が発表されてからいっきに広まりました。わたしもモバイルだとどうしても縦長のサイトデザインになるため、フッター固定で設置することが多いです。

今回のエントリーは、レスポンシブデザインのサイトにおける「上に戻る」ボタンのパターンのご紹介と、このホームページのボタンをSVGで作り直しましたのでざっくりとご紹介します。

[広告]


「上に戻る」ボタンは、概ね次の4パターンに分かれると思います。ひとつひとつメリット・デメリットがありますので、紹介しつつ説明していきます。


1.フッターに対してpositionで固定しているタイプ

フッター要素にボタンをposition指定して置く方法です。わたし自身もこのパターンで納品していることが多いです。

メリット
・下まで読ませることができる。
・フッターにあうデザインができる。

デメリット
・下までいかないとボタンが現れない。


2.主張せずにデザインに溶け込むタイプ

上の例では、PCでは文字だけ空白スペースに置いてあり、スマホサイズではメニューバーの並びに入っています。

メリット
・学校や医療関係など清潔感の必要なサイトの邪魔をしない。

デメリット
・地味で目に入りにくい。あることに気づきにくい。


3.フリックで簡単に戻れるのでスマホでは置かないタイプ

皆さんはスマホで上に戻るときどうしていますか?わたしは思いきり下からピヤッ!!とフリックするので、たまにアプリ自体を閉じてしまうほどです(笑)正直言うと、「上に戻る」ボタンを探すより指一本ではじいた方が速いと思います。

メリット
・要素が一つないだけで、フッターデザインが楽にスッキリ!

デメリット
・普段「上に戻る」ボタンを使っているひとにとっては不便。


4.画面に対してpositionで固定しているタイプ

この例のように、Web閲覧に不慣れな方もPCで多く閲覧するような公共施設では、「上に戻る」という文字があった方が分かりやすく、とてもよい配慮だと思います!1がフッターにposition固定するのに対して、こちらは画面にposition固定するタイプで、ブログサイトなどに多く見られます。

メリット
・常に画面にボタンが出ているので、いつでも上に戻れる。

デメリット
・下まで読まなくても、いつでも戻れる…。
・コンテンツの上に乗る形なので、テキストや画像が隠れてしまうことも。ボタンデザインは考えて!


何のサイトなのか、主にどの層が来訪するのか、フッター回りのデザイン、などいろいろな条件で決定していくことになろうかと思います。


さて、わたしのこのサイトですが、4の画面に対してposition固定している方法で、「上に戻る」ボタンを設置しています。

今までは、「上に戻る」という文字とcssでボタンを表現していましたが、目立ちにくかった上に、主に閲覧いただいているブログには設置していなかったこともあり、この際目立つ色でシンプルな矢印アイコンをSVGを使って設置してみました。

アイコンを画像ではなくSVGで作成するメリットは、レスポンシブデザインならば大いにあります。解像度の異なるデバイス対策に3倍で作成しcssで1/3に出力するなどの手間が一切いりません!本当にクッキリきれいです。


■SVGの上に戻るボタンの作成方法

1.AiなどSVGに変換できるツールでアイコンを作成し、SVG形式で保存します。

2.エディタで1のファイルを開きます。必要なのは<svg ~><g></g></svg>の部分ですが、svg~の中の宣言の部分は、HTML5ではいらないことになっているので消します。

そのうえで、

<div id="任意のid名">
 <a href="#">
 </a>
</div>

で囲み、設置したいページのHTMLにコピー&ペーストしましょう。ポイントは、複数のカラムがあって、いずれかのカラム上に「上に戻る」ボタンを置きたい場合でも、タグを設置する場所は「フッター」です。position:fixedなので、もっとも下の要素に書き加えましょう。そうでないと、レスポンシブでカラム配置が可変したとき、ボタンが反応しないことがあります。

cssは、

#任意のid名{position: fixed;bottom: 10px;right: 10px;}/*固定したい場所*/
#任意のid名 a{opacity:0.7;}/*通常時のアイコンの透過度*/
#任意のid名 a:hover{opacity:1;}/*マウスオーバー時は透過無し*/

などなど設定します。


※ぬるっと戻るjavascriptは、分かりやすく書いてくださっているブログがたくさんあるのでそちらを参照されてください。

[広告]

FC2スマホ用テンプレートを編集する ブログTOP レスポンシブデザインの表
Hotentry
Blog Post
クリックして上に戻る