質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

2回答

3265閲覧

レスポンシブデザインの質問:プルダウンメニューのプラグイン導入とグローバルナビの縦並び…どちらがよいのでしょうか?

MAYAKO

総合スコア30

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

0グッド

4クリップ

投稿2015/02/25 04:04

編集2015/02/26 06:31

MAYAKOです。
回答者の方の意見を踏まえて改めて質問させていただきます。
複数の質問が混在していたので、二つに分けました。

質問1:レスポンシブデザインについて、スマホでウェブページを閲覧する際のメニュー表示において、Webページ制作初心者でも導入しやすいメニューやナビの作成方法は以下のどちらでしょうか?
1. 何らかのプラグインを読み込んでのプルダウンメニューを作成する
2. ただ単にグローバルナビを縦並びにして、CSSでスタイル調整する
なんとか形にはできるものの、見づらいぐだぐだのコードを入力しがちなので、上記についてシンプルでわかりやすいコードの書き方もあれば、記述例を示していただけると非常に助かります。

質問2:すでにお仕事等でいくつもサイトを作成されている方の中で、自分は普段この方法をよく使っているorおすすめします!という方法があれば、ご教示いただけると助かります。
質問2への回答に関しては今後、もう少しスキルが上がった際、試行しながら導入していきたいと思います。

HTML/CSSの基本は抑えたものの、UI設計などはこれから勉強していくという段階なので、知識およびスキル不足等で質問者として至らぬところがございますが、どうぞご回答お願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ほとんどの場合、手軽に使える=柔軟性がイマイチな場合が多いと言う事は理解して下さい。
かなり柔軟性があって、情報も多いと言うことならほぼjQueryMobileになるのでは無いでしょうか。

なぜかと言えば質問者さんの条件(閲覧者にも作成者にも都合の良い、実装がシンプルな物)が当てはまるなら世の中ほとんどそれしかみんな使わないからです。

でも実際世の中にいろんなライブラリがあるのはどれも一長一短でその作成者さんが使いやすい・見栄えがすると思う物を実装してくるからいろんなライブラリがある訳です。

説教みたいになってしまいますが、まずはjQueryMobileを使ってナビゲーションを実装してみましょう。
そこら中にあるサンプルページや公式のガイドを見れば30分もいらないと思いますよ。

そこで自分で「こういう動きじゃなくてこういう動きをさせたい」と言う要望が出た時点で「jQueryMobileでやってみましたが、**の動きが私的には好みで無いのでこういう動きをするプラグイン等はないですか?」と質問があればみんな答えやすいと思います。

投稿2015/02/25 20:28

landy77

総合スコア1614

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MAYAKO

2015/02/25 23:31

landy77様 ご回答ありがとうございます。 手軽に使える分、応用が効かないということなんでしょうね。 とりあえず、回答内容を参考に質問内容を改善してみました。 自分の中ではまだ手探りの状態ですので、ここでもう少し他の方の意見を募り、そちらを元にどれが自分に合っているのか判断し、試行していきたいと思います。 今後少しずつでもスキルアップしていって、そのようなピンポイントな質問ができるようになると信じて、頑張ります。 ひとまずはjQueryMobileについて調べてみます。ありがとうございました。
guest

0

ベストアンサー

こんにちは。

スマホファーストの時代をむかえ、Webサイトをどのようなデバイスからも、いかにストレスなく閲覧してもらうことができるかということについて、僕たちは深く考え、さまざま配慮しなければならなくなっています。

Webサイトの閲覧、つまり「見る」ということにおいて、スマートフォンがデスクトップやラップトップとおおきく異なっているのは、スクリーンのサイズです。iPhoneにも6 Plusが登場し、スクリーンサイズは徐々におおきくなっているとはいえ、かぎられたスクリーンサイズのなかで、Webサイトをどう「見せる」かということは重要なポイントです。とりわけ、ナビゲーションのあつかいには、これまで以上に配慮が必要になってくるでしょう。

僕は、スマートフォンで見られることを視野にいれた場合、ナビゲーションはシンプルでじゃまにならないことがだいじだと考えています。その意味で、タテにならんでスクリーンを占領してしまうグローバルナビゲーションはおすすめできません。
Webサイトの性格によってはマルチレベル・ナビゲーションを採用しなければならない場合もあることを考えると、やはりプルダウンタイプ(変則的にスライドタイプ)のナビゲーションのなかから選定するということになるのではないかと思います。

ということで、僕からは、2種類のナビゲーションを紹介させていただきます。

1)Drop-Down Navigationリンク
HTMLとCSSによるプルダウンタイプのシンプルなナビゲーションです。フラットデザインを採用していますので、Bootstrapをベースにした Webサイトとも相性がいいと思います。

2)jQuery.mmenuリンク
プラグインを読み込んで使用するスライドタイプのナビゲーションです。これは、ふだんスマートフォンを使い慣れているユーザーを対象とした Webサイトにむいていると思います。また、スマートフォンのスクリーンサイズになっても、つねに右サイドに画面の一部が見えるように設計されていますので、ユーザーが今どこにいるのか迷うこともありません。

いずれにしても、ナビゲーションにはこれを使わなければいけないということではなく、Webサイトのデザインや特性などを考え合わせて、いちばんフィットするナビゲーションを選定していけばよいのではないかと僕は考えています。

MAYAKOさんも、さまざまなナビゲーションを(A/Bテスト的にチーム内などで)試してみて、よりよいものを選定していけばよいのではないでしょうか。

【提案的なおまけ】
じっさい、僕たちがスマートフォンを操作(とくにタッチ)するとき、どこにナビゲーションがあると便利なのかを考えてみると、新たなアイデアがうかんできます。
じつは、片手で操作する場合などは、キーボードの位置がそうであるように、スクリーンの半分より下にタッチするものが現れたほうがいいということがあります。
それをふまえると、下にナビゲーションがあるというのもアリなのではないでしょうか。僕は、今後はそうした人間工学的なことに配慮がされているナビゲーションの設計がとても重要になってくるのではないかと考えています。
ちなみに、こちら(リンク)は、そうしたことを実験的に検証しているサイトです。よろしければ、ごらんください。

以上、関係のないことも書かせていただきましたが、ご参考いただければ幸いです。

投稿2015/02/26 06:56

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MAYAKO

2015/02/26 07:49

GeorgeCohta様 こんにちは。そして、ご回答ありがとうございます。 スマホでグローバルナビゲーションを縦並びに表示すると、なぜ良くないのかが理解ができていなかった私にもわかりやすく解説していただき、嬉しく思います。 提案的なおまけのリンク先の本文の言語がどこの国の言葉かわからないのが残念ですが、 まずはリンク先の英文を訳しつつ、挙げていただいた2つのナビゲーション用プラグインを実装してみようと思います。 また、非常に恐縮ですが、本日質問を編集したばかりですので、もう少し回答期間を設けます。 あと2、3日様子を見て他に回答がなければ、GeorgeCohta様の回答をベストアンサーとさせていただきます。よろしくお願いいたします。
退会済みユーザー

退会済みユーザー

2015/02/26 08:01

MAYAKOさん、コメント(返信)をいただきありがとうございます。 僕の回答がすこしでもお役に立てたとしたら、とてもうれしいです。 なお、提案的なおまけとして例示させていただいたサイトに使用されているテキストの内容には、あまり意味がありません。 これは、lorem ipsum(ロレム・イプサム、通称リプサム)という英語サイトのダミーテキストとしてよく用いられているものです。 くわしくは、よろしければ下記の Wikipedia(リンク)をごらんください。 http://ja.wikipedia.org/wiki/Lorem_ipsum
MAYAKO

2015/02/27 01:50

GeorgeCohta様 こちらこそ、お忙しい中、丁寧にご返信いただきありがとうございます。 ダミーテキストとは知らず、どうしようと思っていたので、お恥ずかしいです。 英語圏ではサンプルテキストを入力する際にグリーキング(このようなギリシャ語を元にしたダミーテキストの挿入)を行うということで、また一つ勉強になりました。 ありがとうございます。 僭越ながら拝見させていただきましたが、GeorgeCohta様の作られているような美しいパララックスサイトも作れるように、私も日々ますますの努力をしていきたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問