スマホのメニューデザインに悩んだらこれ！パターン別サンプル36選 | LISKUL
スマホはメニューバーが命！！ スマホでもっとも重要な動作は「タップ」ですが、その重要な役割を引き受けるのがメニューアイコンやリストです。 ユーザが求めるコンテンツにスムーズにつなげられるよう、最適化していくことが必要です。 ただそのデザイン、「なんとなく」のものになっていませんか？ 違和感なくスムーズにコンテンツにつなげるためには、最適なデザインを選択する必要があります。 今回は100のスマホサイトを調査し、その中で代表的な36サイトから7つのメニューデザインに分類し、まとめてみました。 自分のスマホサイトの性質を考えながら、もっとも適切なメニューを探していきましょう！ 100のスマホサイトから見る、 スマホメニューの人気ランキング 上図は、100のスマホサイトをランダムに抽出し、それぞれのサイトで採用されているメニューの割合を調査した結果になります。この結果によれば、一位が圧倒的な割合で
スマホサイト最適化25の最新ルール | グロースハックジャパン | growth hack japan
Ryutaro Mori TwitterでGHJをフォロー！ FacebookでGHJをフォロー！ NEW スタートアップに欠かせない6種類の人間 検索エンジン大手グーグルが、スマホサイト最適化に関する大規模なリサーチを行いました。 その結果から導き出した「スマホサイト最適化25のルール」は、モバイル時代、特にtoCビジネスには欠かせない内容です。 調査に関して 本調査は、GoogleとAnswerLabの共同指揮の下に行われました。 モバイルサイトにとって最良のデザイン慣行を提言することを目的に行われた本調査は、以下の方法論で実行されています。 ・シカゴ・サンフランシスコにて、119時間のユーザービリティテストを敢行 ・iOS・Android両方を含むユーザーに調査を実施 ・ユーザーは、商品の購入、価格の調査、予約など、コンバージョンに関連するタスクを実行し、各サイトのユーザービリティを
使いにくい・成果がでない「残念なスマホサイト」は、もう撲滅しよう！
いま「スマホファースト」との言葉も広まり始めたように、誰もが普通にスマートフォンを持ち歩く時代が訪れ、企業がスマートフォン対応をより重視するようになってきた。だが、とりえあえずスマホ対応しました、といったレベルに留まっていたり、そうでないにしろ、本当に現在の「スマホサイト」が、本来のビジネス上の狙いが果たせるサイトになっているか、自信は持てるだろうか？ どうしても成果があがらないならば、やはりサイトそのものの作りが悪いことは疑わなくてはならない。フィーチャーフォン時代からサイトを運営していた企業にも、初めてモバイル端末向けのサイトを構築した企業にも、スマートフォン向けにサイトを作る場合、知らなければ気づきにくい、かつ陥りやすい独特の「スマホサイトの罠」に気をつけなくてはならない。 そこで本稿は、スマートフォンサイトの構築にノウハウを持ち、コンサルティングも手がけるドコモ・ドットコムに聞いた
PCとスマホサイトで情報の出し方を変えた方がいいと思う理由
PCとスマートフォンでは使うシチュエーションが違うので、情報の出し方をそれぞれ最適化したものにするべき、とは言われており、私もその通りだと思います。 ではなぜそうすべきか、シチュエーションが異なる時の心の動きをもとに理由を掘り下げて考えてみました。 PCとスマホ利用時では、認知資源の消費量が違う 認知資源とは、情報を得たり、注意を払ったり、記憶をしたり、などの知的活動をするための脳のリソースです。 PCサイト閲覧時は、椅子に座るなどし、外からの刺激をほとんど受けない状態で情報を探していることが多いと思います。しかしスマホ利用時は、道を確認したり、人を避けたり、などの注意を払っていることが多いです。（ながら歩きはしないよう啓発がされていますが…） 例えば、飲み会があり、とあるお店へ辿り着かなければいけないとき… お店の位置の確認 自分の位置の確認（看板や建物などから手がかりを見つける） 車な
スマホサイト構築に便利なドロワーメニュー・スワイプのjQueryプラグインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのはるえです。 もうほとんどの案件でPC＋スマホ制作がセットになってきましたね。 LIGに入社したての1年前まではスマホの制作経験を聞かれてうつむき気味だった私も、おかげさまで今じゃスマホサイトを喜んで作るようになりました。 ありがとうございます！！ そこで今回は、スマホサイトで使われやすいドロワーメニューやスワイプ実装の際に必要となるプラグインをご紹介させていただきます。 【こちらもおすすめ】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Facebookでもおなじみのドロワーメニュー3選 今じゃ基本中の基本となっているドロワーメニュー。 Facebookなどで使われている、横からぬるっと出てぬるっと引っ込むあれです。動きが気持ちよくて、実装も簡単にできるものを中心にまとめてみました。 jQuery slimMenu
ストレスのないスマホサイトを作る８つのポイント！
お久しぶりです。マラガの海の贈り物ディレクターのSEKOです。 みなさんは普段スマホで「いつ」「どこで」調べ物をしますか？ 私は会社の行き帰りの電車の中で調べ物をしている事が多いですが、「限られた時間の中で知りたい情報をすぐに見つけたい」なのにサイトが重かったり、知りたい情報が見つけにくい、操作がしにくい。そんな経験はないでしょうか？ 本日はストレスのないスマホサイトを作るにあたりUIをどのように考慮していけば良いか８つのポイントをお届けします。 スマートフォンを利用するシーンを想像しよう。 まず一番重要なことがスマホサイトを利用するシーンを考える事です。大抵スマホサイトを利用する場合は下記の状態が考えられます。 時間に余裕がない 通信環境が不安定な状況にいる 利用が断続的である。 屋外、通勤時間の電車の中、休憩時間のカフェ、会話中に思い出せない事がある時など「すき間の時間」の利用シーンが
PHPレシピ3：スマートフォンとPCで振り分ける 1 [PHP] All About
PHPレシピ3：スマートフォンとPCで振り分ける 1今時のWebサイトは、スマートフォン（スマホ）への対応が必須です。スマホへの対応には、CSSで切り替える「レスポンシブWebデザイン」などの手法もありますが、ここではHTMLを切り替える方法で、しかもPHPを利用することでURLを変えずにデザインだけを変えるレシピを紹介します。 ※ 今回のレシピではiPhoneのみを対象にします。他のスマートフォンへの対応は、次回の連載で紹介します。 材料 ・readfile ・strpos ・$_SERVER ・$_REQUEST 作成時間 15分 作り方 PC用とスマホ用それぞれのHTMLを作成します。 index_pc.html <div style="background-color: #ff6f8d"> <p>PC向けです</p> </div> index_touch.html <div sty
![PHPレシピ3：スマートフォンとPCで振り分ける 1 [PHP] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/431e04353dea6d451f66fb58e78d3277805335aa/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F2%2F7%2F1%2F3%2F8%2Ftopimg_large.png)
PCサイトでもスマホサイトのようにサイドバーを実装するデモ:phpspot開発日誌
Sidebar Transitions PCサイトでもスマホサイトのようにサイドバーを実装するデモ 画面のサイドにメニューを出すのが一般的になってきましたが、タブレット等でも同様のインタフェースを実装したい場合に使えそうな様々なエフェクト付きデモが公開されています サイドバーを出すといっても出し方が色々とデモされており、カッコイイだけでなく勉強になります。 Safariなどでみてみましょう 関連エントリ フラットだけど立体的なCSS3アニメーション付モーダルダイアログ実装デモ 複数階層のサイドメニューを実装するデモ＆サンプル CSSアニメーションでページを紙芝居の様に切り替えるデモ フラットで小気味よく動くボタンスタイルのデモ＆サンプル
レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」:phpspot開発日誌
Naver/Formstone/Ben Plum レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」。 ありきたりな次のようなメニュー。 ブラウザの幅を小さくすると次のようにデザインが変更されます。 クリックで開閉。 フラットデザインがなかなか良い感じですね アニメーション設定やイベントハンドラのカスタマイズも可能。 関連エントリ クールな円形ナビゲーションを作るチュートリアル レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 レスポンシブなナビゲーションの見本やチュートリアル ページ上部に隠れるナビゲーションバーが実装できるjQueryプラグイン「jBar」
『スマホデザインにおける、忘れがちな5つのルール』
皆様、こんにちは。 Ameba コミュニティ部門 チーフクリエイティブディレクターのサトウ（@sugaar）です。 今回は、弊社コミュニティ部門における、サービスクオリティの向上とデザイナーのスキルアップを目的として開催している、「デザイナーロワイヤル」についてご紹介すると共に、普段忘れがちなスマホデザインの5つのルールをまとめさせて頂きます。 デザイナーロワイヤルとはデザイナーロワイヤルとは、8～10名のデザイナーが、お題となったAmebaサービスを使い込み、自分なりのブラッシュアップ案を持ち寄って点数を競う、バトル形式の会議です。 発表者以外にも、誰でも傍聴参加が出来るこの会議。 他のデザイナーの提案を間近で聞けるという事で、 回を追う毎に傍聴人が増え、会議終盤では熱気に包まれるほどの人気会議となりました。 そんなデザイナーロワイヤルの詳しい内容については、弊社「広報ブログ」で取材頂い
「スマホサイト必要ない」が8割超のアンケート結果にはいろいろ疑問が残ります
いろいろ疑問が残るアンケート結果だなぁ。 楽天リサーチを活用して、スマホユーザー100名に対し、スマートフォンからPCサイトとスマホに最適化したスマホサイトのどちらを活用しているかを尋ねたところ、実に8割以上が必要性を感じていないと回答したというのです。 Photo:Smartphone chat By Lars Plougmann このアンケートを実施したのは、有限会社いろはの代表・竹内謙礼氏。 これだけ読むと、スマートフォンサイトの全てに対して必要性を感じないという結果に見えてしまうんですが、どうもそういう感じじゃないんですよね。 ※スマートフォン所有者 ※インターネットで月に1回以上商品を購入したり、サービスを利用したりする人 ※画面を見て「スマートフォン専用サイト」と「PCサイト」の見分けがつく人 via. スマホ専用サイトは本当に必要か？ - 竹内謙礼の「経営コンサルタント」 上
【CSS】box-sizingで幅の計算(width + padding + border)を楽にしよう - ディレイマニア
スマホサイト作ってるとき、幅を画面いっぱいにしたいのにpaddingやmarginの数値がディスプレイ幅を超えちゃってはみでることがありますよね。 最近まではきっちり計算してやってたんですが、box-sizingを使うだけでそんなことは何も考えないでも済むようになりますよ。
スマホサイト制作センスをアップする！見本・素材・WPテーマ・JS・その他全部丸ごとまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ライターの内藤です！ 前回の記事（美しいWebデザインをタイプ別に！見ないと損する目的別厳選Web見本サイトのまとめ）ではWebデザインのタイプ別にわけた見本サイトのまとめを行いました。 今回はその続編として、スマホ・タブレット最適化サイトのデザインまとめをご紹介致します。 目次 ※もちろん順番に読む必要はありません。 スマホ専門デザイン見本 部品別に見られるサイト その他スマホサイトの部品作りの参考になるサイト スマホサイト素材になるキット フリック用JavaScriptプラグイン スマホ対応の無料WordPressのテーマ スマホサイト制作参考 スマホ専門デザイン見本 iPhoneサイトデザイン集のiPhoneデザインアーカイブ http://iphonedesignarchive.jp/ 登録数が半端ないです。 カテゴライズは業種別のみですが、年月アーカイブがあるので、い
スマートフォン 用サイトの作成
基本設計 html5 スマートフォン用サイトはHTML5でマークアップ、CSS3でデザインすることが推奨されています。 HTML5やCSS3についての詳細は以下のリンク先を参照してください。 HTML5 CSS3 画面解像度 iPhone3 までの画像解像度 320x416px (画面全体 320x480px )に合わせる iPhone4 の画像解像度 (画面全体 640x960px ) 以下のようにスマートフォン端末の画面解像度は様々で、縦横で幅と高さが逆転する。 スマートフォン用のサイトをデザインするときは「画像を配置する」でなく、「繰り返し表示できる模様を背景に埋め込む」と考えたほうが良い 端末 画面解像度 (px) (液晶画面全体の解像度)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLの知識は必要なし！「Dino」を使えばスマホサイトが誰でも簡単に作れてしまう｜U-NOTE [ユーノート]![HTMLの知識は必要なし！「Dino」を使えばスマホサイトが誰でも簡単に作れてしまう｜U-NOTE [ユーノート]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6683594a0ccbc6923f5ae3801701a22025fab90b/height=288;version=1;width=512/http%3A%2F%2Fimg.u-note.me%2Fnote%2Fcaption%2F47498704.jpg)
無料診断でImpress Watchのスマホサイトをプチリニューアルしてみた（前編） 「すべてが平均点以下」という衝撃の診断結果が！
スマホアプリのUIを再現できるCSSフレームワークまとめ