自分で作るウェブサイト | 格安wordpressテンプレート ダウンロード有料販売

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


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

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

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

sp10set-02.jpg

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

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

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

参考動画






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



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

sp10set-01.jpg

ファイルの中にインラインで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にも応用できると思います。

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


e2.jpg

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

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



スマホナビテンプレート

※クリックするとgifアニメで閲覧することができます(容量:約13メガ)


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

スマホナビテンプレート

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

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



スマホナビテンプレート

※クリックするとgifアニメで閲覧することができます(容量:約36メガ)


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

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

テンプレート8 固定+ボタン



スマホナビテンプレート

※クリックするとgifアニメで閲覧することができます(容量:約52メガ)


固定型のナビ+オーバーレイ型ボタン表示のハイブリッド型ナビゲーションです。

スマホナビテンプレート

ボタンを画像にすると視認性があがります。

テンプレート9 ECサイト



スマホナビテンプレート

※クリックするとgifアニメで閲覧することができます(容量:約40メガ)


ショッピングサイトを想定したUIデザインです。
項目が多くてもスッキリと格納しています。

楽天・ヤフーテンプレートに同梱している物の改良版になります 。

スマホナビテンプレート

オーバーレイ型で、固定追従します。

テンプレート10 リング型



スマホナビテンプレート

※クリックするとgifアニメで閲覧することができます(容量:約21メガ)


ややトリッキーなリング型ナビゲーションです。
モーションが付いていて中心から広がるように丸いボタンが表れます。

javascriptによって自動で円状にアイコンを並べています。10個以上のメニューはやや厳しいです。



改良して使用できます



フォントはGoogle Fontsから「Oswald」と「Lato」を、アイコンフォントに一般的な「Font Awesome」を使用しています。
どちらもAMPにも使用可能ですので、改造しAMP対応することができます。

基本的にはお好きなフォントに変更して使用してください。

商品価格(DL販売のみ)

  • 2,160円(税160円)

TOP