コピペ可ですぐに役立つ！マテリアルデザインを極めるHTML/CSSスニペット30個まとめ - PhotoshopVIP

2017/07/14 78 users PhotoshopVIP ドロップシャドウ HTML ボタン

Googleが2014年に提唱したデザインガイド「 マテリアルデザイン 」。 最近の新しいウェブサイト でも、このマテリアルデザインの考え方や基本原則を取り入れたものが増えています。 今回は、コピー＆ペーストで手軽に マテリアルデザインを再現できるHTML/CSSスニペット をまとめています。 対応しているスニペットは、ナビゲーションメニューやドロップシャドウなど特長的な素材から、ボタンやカード型... 続きを読む

ユーザーが喜ぶ、効果的で使いやすいナビゲーションメニューの重要ポイント10個 - PhotoshopVIP

2017/07/04 38 users PhotoshopVIP ユーザー

ウェブサイトに欠かせないナビゲーションメニューの設計には、正しい方法と明らかに間違った方法があります。このウェブサイトの基本パーツのひとつは、しばしば設計プロセスでも見過ごされがちで、使いやすさにも影響してきます。 ごちゃごちゃな見た目や、メニュー数が多すぎたり、そもそもナビゲーションがなかったりといった問題が一般的で、単純にウェブサイトの仕上がりが悪くなってしまいます。ここでは、 ウェブサイト制... 続きを読む

8つの事例から学ぶ！優れたナビゲーションメニューの作り方 | TechAcademyマガジン

2017/03/22 18 users JavaSc designMode 本稿 了解 Webメディア

TechAcademyマガジンはオンラインのプログラミングスクール TechAcademy [テックアカデミー] が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。 本稿は、Designmodeの ブログ記事 を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Jake Rocheleau氏によって投稿されました。 モダンなJavaSc... 続きを読む

ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ - PhotoshopVIP

2017/01/05 158 users CSS コピペ HTML ドロップダウン モバイル端末

ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。 今回は HTML と CSS、わずかな JavaScript で実装できるさまざまな ナビゲーションメニュー用コードスニペット をまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフル... 続きを読む

CSSのみで制作する、ナビゲーションメニュー用アニメーションエフェクト10個まとめ - PhotoshopVIP

2015/11/26 113 users PhotoshopVIP CSS ホバーエフェクト 以下 人気

ウェブサイトに欠かせない、ナビゲーションメニューを制作するときに、ちょっとした動きをつけた素敵なホバーエフェクトをまとめてご紹介します。 どれもCSSのみで実装されており、最近のデザイントレンドとして人気のアニメーションを、うまく取り入れたデザインコンセプトとなっています。今後のデザイン制作に活用私てみてはいかがでしょう。 詳細は以下から。 CSSで作成する、ナビゲーションメニュー用アニメーション... 続きを読む

ニュース - Facebook、モバイルショッピング促進の新機能をテストへ：ITpro

2015/10/13 6 users Facebook ITpro ニュースフィード セクション

米Facebookは現地時間2015年10月12日、モバイル向けショッピング機能の強化について明らかにした。数週間以内に、新たなセクション「Shopping」のテストを開始する。ユーザーが手軽に商品を検索、共有、購入できる一元的な手段を提供するとしている。 Shoppingは、「ニュースフィード」「イベント」「友達」などと並んで、Facebookアプリケーションのナビゲーションメニューに表示される... 続きを読む

スマホ対応のキモ。スマホサイトのナビゲーションメニューが悩ましい。

2015/06/08 76 users ナビゲーション 引き出し キモ ハンバーガーメニュー 工夫

スマホ対応は今後ますます必須になります。ナビゲーションへの工夫も、いろいろと引き出しを増やさなくちゃ。スマホサイトのナビゲーション。どーいう感じにしようか、いつも悩みます。 最近、よく見られるのは、こういう「ハンバーガーメニュー」。試しに、右上の「三」をクリックしてみると、 See the Pen Burgers & Sliders by Erik Rahm (@erikrahm) on Code... 続きを読む

ミニマルテイストなフルスクリーンメニューを実装できる「jQuery fatNav」 | bl6.jp

2015/04/30 20 users ミニマルテイスト メニューアイコン ズームイン フェード デモ

jQuery fatNavはミニマルテイストなフルスクリーンのナビゲーションメニューを実装することができます。デモではメニューアイコンをクリックするとオーバーレイでアニメーション付きのメニューが表示されます。フワッとさりげない感じで表示されるのがとてもお洒落ですね。 以下はjQuery fatNavのデモになります。シンプルでスッキリしたデザインが特徴的です。 デモ メニューはフェードでズームイン... 続きを読む

パズル感覚でレイアウトを作成できる、Photoshop無料UIコンポーネントキット「Edge」 - Photoshop VIP

2014/09/19 95 users Edge レイアウト パズル感覚 Photoshop Vip

あらゆるタイプのWebサイトやブログのレイアウトを、収録されているパーツを組み合わせて作成することができる、無料UIコンポーネントキット「Edge UI」が公開されていたので、今回はご紹介します。 ナビゲーションメニューだけでも水平、垂直タイプを含めて20種類近くが用意されているので、アイデア次第でさまざまなWebレイアウトをパズル感覚で作成することができますよ。 詳細は以下から。 パズル感覚でレ... 続きを読む

新型ナビメニュー「ポップアウト」の実装チュートリアル＆参考Webサイトまとめ - Photoshop VIP

2014/08/06 120 users VIP ポップアウト チュートリアル ゴーストボタン 参考

新しいデザイントレンド「ゴーストボタン」同様に、ナビゲーションメニューに面白いアニメーション効果、「ポップアウト」を加えたWebサイトを見かけるようになっています。 今回はそんな新型ナビメニュー「ポップアウト」の実装チュートリアルと、参考にしたいWebサイトデザインをまとめています。今後のデザイン制作、プロジェクトに活用してみてはいかがでしょう。 チュートリアルはどれもデモサイトが用意されており、... 続きを読む

モバイルサイトのナビゲーションメニューは画面下に置くべき | Webクリエイターボックス

2014/02/19 204 users モバイルサイト モバイルユーザビリティ モバイルブラウザー

スマートフォンを使ってWebサイトを閲覧する人、どんどん増えてきています。モバイルブラウザーのシェアを見ても、そのユーザー数は無視できないものとなっています。サイトによってはデスクトップで閲覧する層より多いところもあるかもしれませんね。私がWebサイトの制作依頼を受けた際、モバイル対応は必須としてきましたが、モバイルユーザビリティについて再考してみたので、今回はナビゲーションメニューについて簡単に... 続きを読む

はてなブログのトップにナビゲーション(カテゴリ)メニューを作る！【カスタマイズ】 - すりゴマ・ドットコム

2014/02/16 65 users ナビゲーション カスタマイズ ゴマ・ドットコム カテゴリ

2014-02-16 はてなブログのトップにナビゲーション(カテゴリ)メニューを作る！【カスタマイズ】 便利ワザ SEO WEBサービス すりゴマです。 今日もいい感じにすり潰していきますね。 photo by kudumomoRSS登録していただいている方は、お気づきかもしれませんが、トップの「ナビゲーションメニュー(グローバルメニューとも言いますかね)」のデザインを変えました。 (・∀・)以前... 続きを読む

スライドショーのようなページが作れるjQueryプラグイン「ScrollIt.js」:phpspot開発日誌

2013/07/30 75 users jQueryプラグイン phpspot開発日誌 ザク ページ

スライドショーのようなページが作れるjQueryプラグイン「ScrollIt.js」 2013年07月30日- ScrollIt.js by @ChrisPolis スライドショーのようなページが作れるjQueryプラグイン「ScrollIt.js」 ↑↓キーでページがスクロールし、かつナビゲーションメニューも備えたようなページが作れます 何らかの製品等の紹介サイトを１ページでサクっと作りたい場合... 続きを読む

有名サイトのUIデザインを再現、無料PSDデザイン素材配布サイトPhotoshopVIP |

2013/06/25 122 users 再現 UIデザイン 有名サイト Facebook ブログサイト

多くのブログサイトでも既出なのですが、facebookやAppleなど有名サイトのUIデザインを完全再現し、無料PSDデザイン素材として配布しているサイトPopular UIsが参考になったので、今回はあらためてご紹介します。 ナビゲーションメニューやコンテンツ部分など、パーツごとにフォルダ分けされており、参考にしたいUIデザインもすぐに編集可能ですよ。 詳細は以下から。 有名サイトのUIデザイン... 続きを読む

レスポンシブWebデザイン対応、ナビゲーションメニュー人気トレンド2013PhotoshopVIP |

2013/06/19 83 users レスポンシブWebデザイン ユーザーインターフェース 増加

スマートフォンを利用するユーザーの増加と共に、モバイル端末での表示に対応した、レスポンシブWebデザインが増えています。特にナビゲーションメニューは、ユーザーが頻繁にクリックを行う、重要なユーザーインターフェースです。 ナビゲーションメニューのさまざまなデザイン解決サンプル例をまとめたエントリー「Popular Design Trends for Responsive Navigation」がVa... 続きを読む

レスポンシブに加えスマホ用のメニュー実装もできるjQueryプラグイン「Navobile」:phpspot開発日誌

2013/05/10 64 users レスポンシブ jQueryプラグイン ライブラリ 変身 通常

jQuery Navobile by Made by Made レスポンシブに加えスマホ用のメニュー実装もできるjQueryプラグイン「Navobile」 レスポンシブ関連のライブラリは色々でてますが、これは便利かも、と思ったプラグイン。 通常のPCモード 幅を狭くするとナビゲーションメニューが現れます クリックでアプリ風のメニューに変身 必要最低限さっくりと入れておくと便利そうなプラグインですね... 続きを読む

WordPressのカスタムメニュー（wp_nav_menu）を使って、サブタイトル付きのナビゲーションを実装する - かちびと.net

2012/04/16 108 users カスタムメニュー ケーション ナビゲー コーポレートサイト

ナビゲーションメニューに、よくリンクの 詳細を短文で含めているのを見かけます。 コーポレートサイトなんかでは定番のナビ ゲーションですが、これをWordPressで、 テキストで実現しよう、という方法です。 カスタムメニューで管理できるようにし ます。 カスタムメニューでナビゲーションも、その詳細文、サブタイトルみたいなのも管理できたら楽ですよね、という事で方法をご紹介します。 説明付きのナビゲー... 続きを読む

CSS3で作るナビゲーションメニューのチュートリアルいろいろまとめ7つ - W3Q

2012/03/16 58 users チュートリアル HTML・CSS CSS3 W3Q

[HTML・CSS] CSS3で作るナビゲーションメニューのチュートリアルいろいろ 続きを読む

Media QueriesとjQueryを使って、スマートフォンでアクセスした時だけナビゲーションメニューを上に隠す - かちびと.net

2012/03/07 84 users jQuery レスポ 語弊 Media Queries 備忘録

シンプルで良かったので一応メモ。レスポ ンシブWebデザインのTipsです。Media Queries とjQueryを使用して、スマフォでアクセス した時だけ、邪魔になりがちなナビゲー ションメニューを上に隠す、みたいな手段。 割と良かったので参考までに記事に備忘録 として残しておきます。 隠すというと語弊があるんですけど・・・凄くシンプルな方法です。 Pull-Down-for-Navigat... 続きを読む

ユニークなボックスタイプのナビゲーションメニューを実装するjQueryプラグイン・BoxyMenu - かちびと. net

2012/01/29 56 users 備忘録 発想 アイデア ドロップダウンメニュー メモ

いろいろとアイデアが参考になった ので備忘録。ボックスタイプのナビ メニューで、ユニークなUIです。こ ういうアイデアというか、発想が出 てくるようになりたいです。 というわけでただのメモ。僕では思い浮かばないアイデアで素敵だったので衝動的に書き留めておきます。 BoxyMenu 一見変哲も無いコンテンツですけど・・・どうもドロップダウンメニューにして当然、みたいな流れが自分の中にあったのでいい刺... 続きを読む

もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ | Webクリエイターボックス

2011/10/18 817 users Webクリエイターボックス ナビゲーシ コツ ユーザー 目次

どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ナビゲーシ... 続きを読む

CSSのナビゲーションメニューサンプル５５:phpspot開発日誌

2011/09/09 48 users CSS phpspot開発日誌 水平 参考 感じ

55 Wonderful CSS Navigation Menu Designs | inspirationfeed.com CSSのナビゲーションメニューサンプル５５。 ページトップに置くような水平のナビゲーションメニューのデザインカタログみたいな感じで使えそうなまとめです。 水平ナビゲーションをちょっと変わったものにしたいけどなんとなく煮詰まったみたいな時に参考にしてみてもよさそう。 色々なデ... 続きを読む

背景画像のスライド切り替え演出が綺麗なjQueryメニュープラグイン「Sliding Background Image Menu with jQuery」 | BlackFlag

2011/07/06 11 users BlackFlag Codrops デモ 演出 背景画像

全体の動きが凝った演出になっているわけではないのですが、 ナビゲーションメニューと連動して背景画像がスライドして切り替わる動きが綺麗な 「Sliding Background Image Menu with jQuery」のご紹介。 ≫Sliding Background Image Menu with jQuery | Codrops ≫デモはこちら：Sliding Background Ima... 続きを読む

CSS3で実装するApple.comのナビゲーションメニュー:phpspot開発日誌

2011/06/03 33 users グラデーション phpspot開発日誌 The fancy

The fancy Apple.com navigation menu created using only CSS3. CSS3で実装するApple.comのナビゲーションメニュー。 Appleのサイトで実装されているメニューをCSS３で実装してしまおうというデモ。 グラデーションが綺麗に表現されています。 検索ボックスも次のとおり 画像として使われているのはロゴと虫眼鏡のみ。 検索ボックスが伸... 続きを読む

jQueryでやる！ブログで使えそうな楽しいナビメニュー45*ホームページを作る人のネタ帳

2010/01/27 411 users jQuery noupe ネタ帳 支持 エントリー

色々とjQueryのサンプルやプラグインが掲載されていて、眺めてるだけで楽しくなるエントリー。 ナビゲーションメニューで悩んだ時に使えそうです。 45 jQuery Navigation Plugins and Tutorials - Noupe さて、いまや多くの人たちから支持を得ているjQueryで、もっと楽しいブログにしてみるのもいいかもしれない。 jQueryは何もWEBサイトだけのもので... 続きを読む