稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

副業で稼ぐ仕組みの作り方

スマホの理想的なハンバーガーメニュー紹介

投稿日:2015年12月12日 更新日:

スマホデザインを作るのであれば、ハンバーガーメニューが一般的ですよね。今回は理想的なハンバーガーメニューを見つけたのでご紹介させて頂きます。

はじめに

色々なハンバーガーメニューを見てきましたが一番しっくりくる物を見つけたのでご紹介させて頂きます。

注意事項

紹介元のデザインが変わった場合は見れなくなってしまいます。

欲しい動き

スマホ用のメニューで欲しいと思っていた機能は

  • アイコンをクリックすると右側からメニューが表示
  • メニューの中でもクリックすると表示させたい
  • ヘッダーにfixしない

この辺りですかね。私自身1からスマホのハンバーガーメニューを作る事が出来るほど実力がないので、何か参考になる物を探しました。

そこで、見つけたのがこちらのサイトです。

理想的なハンガーガーメニューはこちら

機能の紹介

上記サイトを参考にして余計な機能を削ったものを作りました。こちらを使って紹介させて頂きます。

ハンバーガーメニューサンプル※スマホで見てね

メニューがぬるっと表示

hbg1

まずスマホでアクセスするとこんな感じです。

hbg2

右上のハンバーガーをクリックするとこのようにぬるっと現れます。

さらに中でぬるっと動く

hbg3

もし、メニューが多くなってしまっても大丈夫です。安心して下さい。

hbg4

クリックするとぬるっと下に表示されます。

ヘッダー固定じゃない

hbg5

個人的にメニューがずっとヘッダーに固定されるのって嫌いなんですよね。見る人は見ますし、見ない人はみないですしね。

だから下にスクロールするとそのまま消えるのが理想的なんです。

どうでしょうか?個人的にはこの形が今作っている稼げる副業用のサイトにぴったりなので参考にさせて頂いています。こういった物を1から作れるくらいの実力があるとまた違うんだろうなぁ。頑張らないとですね!

以上でスマホの理想的なハンバーガーメニューの紹介を終了いたします。

さいごに

もう当たり前ですね

ハンバーガーメニューは昔と比べてスマートフォンが普及している今では結構当たり前なデザインですよね。

なので、わざわざ「メニュー」と言う文字を入れなくてもタップしてくれますし製作者側から無理にアプローチしなくても良くなったのが嬉しいですよね。

個人的にスマホってグローバルナビゲーション=ハンバーガーメニューってイメージなので重要なコンテンツへのみの誘導のみをしている印象があります。

最近本格的にスマートフォン系のデザインを考えてはいますが、「どのコンテンツを表示させるのか」これが一番悩んでいます。

パソコンと違って見られるボリュームが変ってくるので、SEO対策用のコンテンツは表示させず重要なもののみにする?など、色々と考えすぎてしまって頭の中がごちゃごちゃ中です笑

でも、スマートフォンも非常に需要が伸びてきているのを考えると稼げる副業をするのには欠かせないアイテムの一つですかね。

-副業で稼ぐ仕組みの作り方
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

Shopifyペイメントの設定とチャージバック

Shopifyペイメントの設定は簡単ですが 関連記事: shopifyの送料設定は素晴らしい shopifyでスタッフを追加する 【ゆうちょ】アリエクのアフィリエイト報酬を受け取りました ECのショッ …

ECCUBE3をさくらにインストールしたよ

ECCUBE3の情報がまだまだ圧倒的に少なかったので、自分がさくらサーバーにインストール時に苦労したことのメモです。画像付きで分かりやすく説明させて頂きます。 関連記事: ホームページにパスワードを設 …

スパムコメントを自動で削除してくれるAkismet

ワードプレスをインストール時に最初からインストールされているAkismetの使い方をご紹介いたします 関連記事: 一つのプラグインで最低限の機能が揃うJetpack シーサーブログにメニューを作る方法 …

Yahoo!ショッピングの出店申し込み方法

間口は広い方が良いので、Yahoo!ショッピングにも申し込みしてみました。 関連記事: yahooリスティング広告の申し込み方法 yahooリスティング広告らくアドの利用方法 yahooリスティング広 …

スマホ画面の下にPC切り替え可能なワードプレスプラグイン

スマホ用のデザインの下にPC用の切り替えボタンを簡単に導入する事が出来るワードプレスプラグインをご紹介いたします。 関連記事: 管理画面でお問合せメールの確認が出来るTrust Form 足底筋膜炎を …