スマートフォンナビゲーションテンプレート 10set

スマートフォン用のナビゲーションテンプレートを10個セットで用意しました。
スマートフォンが普及し、グーグルもモバイルに重点を置いています。

高速化をはかるAMPや、専用アプリなど、モバイルでも表示形態はいくつか分かれますが、検索エンジンを問わず、webブラウザでPCでもスマートフォンでも表示できる「レスポンシブデザイン」が一般的になっています。

当テンプレートは、10個すべてレスポンシブデザインで作られており、PCでもスマートフォンでも使えるナビゲーションデザインです。

サイトを運営する上で、ナビゲーション（UI）は情報への到達、満足度、効率を考えるうえで重要な物となります。

※同じ情報なら見やすいほうが良し

このテンプレートには10個の種類が入っているのでいくつもテストすることができます。
0から作るより多く試してみてください。

参考動画

ご購入いただくとzipファイルをダウンロードできます

zipファイルをダウンロードすると以下のファイルが入っています。

ファイルの中にインラインでCSSが記述されており、HTMLとともに該当箇所をコピー＆ペーストして使用します。

テンプレート1 オーバーレイ

※クリックするとgifアニメで閲覧することができます（容量：約10メガ）

右上のアイコンを押すと、全体を覆うようにナビゲーションメニューが表れます。
大きめの文字になっているのでメニュー数が少ないサイトに向いています。

テンプレート1を商品と同じものを公開しています。

mentai.tokyo/lp/sp/

ぜひ、ご利用ください。

テンプレート2 オーバーレイ2

※クリックするとgifアニメで閲覧することができます（容量：約38メガ）

オーバーレイ表示ナビゲーションの発展型になります。
ナビゲーションの中にさらにナビゲーションがあり、スクロール部に様々なコンテンツを表示することができます。
スクロール後にヘッダーの背景が付くjavascriptも盛り込まれています。

テンプレート3 サイドに配置　縦スライド型ナビゲーション

※クリックするとgifアニメで閲覧することができます（容量：約10メガ）

ドロワーメニューと呼ばれる、スマートフォンサイトで多く採用されているUIデザインです。
当テンプレートのドロワー型はボタンを押すと縦に移動して表れるモーション付きになっています。
メニューを閉じる際にも「×」を片手でも押しやすいように右上に配置しています。

テンプレート4 javascriptなし

※クリックするとgifアニメで閲覧することができます（容量：約9メガ）

javascriptの使えないAMPでもそのまま移行できるjavascriptを使用しないスマホナビゲーションです。
シンプルにボタンを押すとオーバーレイでメニューが表示されます。（テンプレート1に似ています。）

テンプレート5 javascriptなし・固定型+おまけつき

※クリックするとgifアニメで閲覧することができます（容量：約32メガ）

固定タイプのアイコンが並んだUIデザインです。スマートフォンではフリックでナビ部分をスライドできます。（ヤフーのナビゲーションに近い形）
javascriptを使っていないので、AMPにも応用できると思います。

エンドレスループスライダーのおまけつき

また、このテンプレートはCSSのみのスライダーとオンマウスで下線がアニメーションするエフェクトが同梱されています。
ページ下部に記述があるのでコピー＆ペーストでご使用ください。

テンプレート6 PC・スマホ表示切替スイッチ型

※クリックするとgifアニメで閲覧することができます（容量：約13メガ）

レスポンシブデザインは基本的に「viewport」とディスプレイの横幅で読み込むCSSを決めているため、「スマホでPCのデザインを見たい」というニーズを満たせません。
そこで、javascriptのスイッチにより「viewport」を書き換え、スマホでもPC表示するようにしています。

スマホナビテンプレート

ボタンを押した時だけ変わるため、設定を保存するにはlocalstorageやクッキーの併用が必要です。
ボタンのCSSデザインは省いているため、各位設定してください。

テンプレート7 フッター型

※クリックするとgifアニメで閲覧することができます（容量：約36メガ）

「ボタンを押してメニューを表示する」スマホナビゲーションではなく、「すでに表示されている」タイプのフッター型ナビゲーションです。
スマートフォンサイトに訪れると基本的に下へスクロールしていくので、フッター部分は押されやすくナビゲーションとしても機能すると思われます。

項目が多いとサブメニューの表示に困りますが、ボタンを押すと狭い場所ですが、スライド型のメニューナビが表れます。