レスポンシブWebデザインのグローバルナビゲーションパターン（参考サイトのご紹介）
今回は、RWDのグローバルナビゲーションのパターンをよくまとめた参考サイトをご紹介させて頂こうと思います。”Adventures in Responsive Navigation”という海外のサイトです。※菊池崇さんが運営されているfacebookページ「レスポンシブWebデザイン」で紹介されていたものです。とても参考になるfacebookページですので、ぜひRWDに興味をお持ちの方は「いいね！」されるとよいと思います。 こちらのサイトでは、8つのナビゲーションパターンを紹介しています。 パターン１．”Do Nothing”アプローチ ブレークポイントまでくるとナビゲーションが真ん中寄せになり、余白が広くなるのみで特別なことは何もしていない簡単なパターンです。メニューの数が少ない場合に使えそうです。 パターン２．フッターナビゲーション グローバルナビが「MENU」というボタン一つになって、
【厳選】日本の全iOSプログラマに捧ぐ！iPhoneアプリ制作に参考になりすぎるデザインリンク集15選 | DX.univ
iOSアプリ開発担当の菅原です。 iPhoneやiPadのア[...]【厳選】日本の全iOSプログラマに捧ぐ！iPhoneアプリ制作に参考になりすぎるデザインリンク集15選 by Yu Sugawara in Design · Mobile — 2013/07/18 iOSアプリ開発担当の菅原です。 iPhoneやiPadのアプリ開発はすべて一人で販売するところまで持っていけるのが魅力の1つです。 アプリ開発作業を大きく分類しますと プログラム デザイン 販売 にわかれます。販売に関してはAppStoreがあるので、心配はありません。残りのプログラムとデザインですが、なかなか両方を得意にするというのが難しいと思います。僕はプログラムは出来るのですがデザインがからっきしダメです。 今日はそういったデザインが苦手なプログラマ向けに参考になるデザインリンク集をご紹介いたします。個人のアプリ開
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
簡単に使えて、コンバージョン率が高まるUI Tipsまとめ | Goodpatch Blog
しっかりと考えられたUIのアプリやWebサイトはとても使いやすいく、使っていてとても楽しいですよね。この記事を見ているデザイナーやディレクターの方の中でショッピングサイトや登録型サービスを担当し、UI設計をしている方もいるのではないでしょうか。UI設計をする上で必ず考えるのが「ユーザーが使いやすいUI」だと思います。しかし前述したショッピングサイトや登録型サービスの場合は使いやすさと共に、「ショッピング購入数」や「登録者数」にも気を配る必要があります。そこで今回は「ショッピング購入数」や「登録者数」を示す、”コンバージョン率” を高めるUIとはどんなものか、海外の記事を参考に考えてみたいと思います。 （この記事はGoodUIから翻訳抜粋したものです） GoodUIには簡単に使えて、コンバージョン率を高めるUIのアイデアがいくつかまとめられています。その中から6つ、素晴らしいアイデアをピック
今年絶対おさえておきたいフラットデザインのまとめ | 株式会社LIG
こんにちは。ライターの内藤です。 恥ずかしながら、最近になって「フラットデザイン」を意識しはじめました。 装飾を最小限におさえることによって、特定のメッセージや製品、アイデアを直球勝負で伝えるデザイン。 フラットデザインは、もともとスマートフォンの小さな画面でシンプルに見せるものから派生したのだと思われますが、Windows8やGoogleの新デザインがきっかけとなって一躍注目を浴びるようになったようです。 もう知っている方も、まだ知らない方もいらっしゃると思いますので、目次のお好きなところから読んでください。 最初から全部読まなくても大丈夫です！ フラットデザインとは まずはどんなものか、百聞は一見にしかず、サンプルを見てみましょう。 フラットデザインの例 http://builtbybuffalo.com/ http://www.squarespace.com/templates/ ※
アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル:phpspot開発日誌
Responsive Retina-Ready Menu | Codrops アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル アイコンフォントなら拡大縮小しても劣化はないということで、CSSとJavaScriptを使ってうまくアイコンもリサイズして綺麗にレスポンシブに、更にRetinaにまで対応してくれるデモです。 UIデザイナーな方はやること増えて大変ですが、チュートリアルをベースにライブラリも出てくれば対応は楽になりそうですね。 それにしても色んなテクニックやディスプレイが出てきたりと、この業界考えることが増えて大変ですね 関連エントリ 3DのソーシャルメディアボタンをCSS3で作成するチュートリアル モダンなサイトを作成するためのCSS3チュートリアル集 テキストを円形に描画するチュートリアル WEBデザイナーなら見ておくべきCSS3のアニ
米Yahoo! 新UIに学ぶアイコン・デザイン | ビジュアルシンキング
yahoo.comのUIに使用されているアイコンのデザイン設計に関して。 Yahoo! 新システムは、Yahoo!のUIデザインチームとiconwerkが協力して作りました。 image by iconwork iconwerkのサイトより、デザインのポイントを。 フラットなデザインの秘密がわかります。 1.パーツの共通化 アイコンに統一感を出すために、共通化したシンプルなブロック・パーツを積み上げてデザインを作り上げています。 image by iconwork 2.いろんなサイズに対応 16ピクセルからプリント用の大きいサイズまで、ひとつのデザインで対応できるように設計されています。 image by iconwork
CSS で作る Tumblr モバイルアプリ風メニュー
1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。 Tumbler の Android アプリ （Tumblr for Android） の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript （jQuery 使用） で再現してみました。実際のサンプルは下記に。 CSS で作る Tumblr モバイルアプリ風メニュー サンプル 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 6 Safari では動作確認しました。他のスマートフォンとか知らない。IE？ 一応、IE10 は問題なく動作します。IE9 だと動作はするけどアニメーションとかしないです。 元ネタを下記に貼っておきますね （画像は 「Tumblr Staff」 から
Thumbnail Grid with Expanding Preview | Codrops
A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images. If you have searched images on Google recently, you might have noticed the interesting expanding preview for a larger image when you click on a thumbnail. It’s a really nice effect and it is very practical, making a search much easier. Today we want to show you how to create a
RedsAfi.com is for sale | HugeDomains
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
まるでネイティブのようなUIを実現できる高機能JavaScript UIライブラリ·w2ui MOONGIFT
w2uiはデスクトップ、スマートフォン、タブレットに対応したJavaScript UIライブラリです。 新しいJavaScript UIライブラリの紹介です。名前はw2ui、多数のウィジェットを搭載したUIライブラリとなっています。 レイアウト。 グリッド。 詳細検索対応。 ツールバー。 サイドバー。階層表示に対応しています。 タブ。 フォーム。 ポップアップ。 ツールチップ。 その他ユーティリティ。 w2uiのサイズは37KB（ミニファイ&Gzip）で、これはExtJSの1/12、Kendo UIの1/6となっています。また、jQueryベースという特徴、全てのウィジェットをまとめて提供、IE9、Firefox7、Google Chrome、Safari5に対応となっています。デスクトップはもちろん、タブレットやスマートフォンにも対応しています。 w2uiはJavaScript製、MIT
UIデザインの参考になるサイトまとめ | ナナメウエblog
毎日仕事中と寝る前にチェックしてるUIの参考になるサイトをまとめました。 もう、見ているだけで涎が出ますね。 Dribbble – Following もはや知らない人はいないでしょう。世界中からハイレベルなデザインが集まるこのサイト。3時間に1回は見てます。 JAYPEG 日本版Dribbbleというとわかりやすいかもしれません。昨年末にできたばかりですが、すごく好きです。投稿しまくってます。自分で作ったUIを素材として公開してたりします。1時間に1回は見てます。 Inspired UI – mobile ui patterns カテゴリーが細かく分かれていて非常に嬉しいです。数も豊富で見やすいサイトです。 iOS Mobile Patterns カテゴリーがわかりやすく、マウスが拡大鏡になるので細部まで見ることができます。 iPad and iPhone Design Ins
これは超使いやすいページネーションの次世代UI:phpspot開発日誌
Slider Pagination Concept - with jQuery UI Slider これは超使いやすいページネーションの次世代UI。 普通、リストページのページネーションといえば、「 1 , 2, 3, 4 ,5 次へ> 」みたいなUIが基本ですが、そもそもこのUI疑ってかかってもいい時期なのかも。 要は現在のページ番号と、ページを前後と、ページ指定で送れればいい、という要件を満たせばいいわけでもっとシンプルに出来るはず。 今回紹介するページネーションのデモ ページ番号の部分はボタン風になっているので押してみましょう。 するとスライダーになってドラッグ＆ドロップでページ指定が簡単に出来ます。 30までドラッグ＆ドロップして話すと30ページ目が開く、というようなイメージ 次へ、前へ、といった直感的に分かりやすいボタンも実装されていて必要十分。 従来のページネーションは作る場合
無料でダウンロードできる多種多様なアイコン・ボタン・UIキットいろいろ
400種類以上のミニアイコンのセットから、ちょっと変わった法律っぽいアイコン、世界中の国旗のアイコン、洗練されたUIキットまで、多種多様なアイコン・ボタン・UIキットを集めてリスト化したものがデザインに関係するトピックを配信するDzineBlog.comで公開されています。いずれも無料でダウンロード可能で、ファイル形式は主にPSDファイルです。 33 New Freebie Buttons and Icon Sets Released in Autumn 2012 - DzineBlog.com http://dzineblog.com/2012/11/33-new-freebie-buttons-and-icon-sets-released-in-autumn-2012.html ◆Free beautiful web icons - Vector social media icons
Webデザインの価値とは何か -webサービスにおける、webデザインの費用対効果(2)
前の記事で、なぜwebデザインは安く見られてしまうのかという問いに対し、 ・参入障壁が低く見える ・ノウハウが広く、速くシェアされやすい ・制作物という点だけにおいて、デザイン作業が定義されてしまっている。 ・効果が一目瞭然ではなく、評価しづらい。 ・需要(発注者)と供給(制作者)のうち、現状では供給が多い という点で技術価値・優先順位・価格が低くみられてしまうという現状について述べた。 現状はたしかにそうなんだけども。 かけるべきときにはかけようぜ！というのが私の趣旨である。 前記事でものべたとおり、期待効果が一目瞭然ではないためデザインの価値は本質的にわかりづらいものだ。 今回はその見えづらい、webデザインの価値について、自分が現場で思った所を書いていこうと思う。 デザインの成功例 Google Apps logo ring of happiness / adria.richards
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブページやスマフォアプリの制作時に参考にしたいUIエレメントをコレクションしているサイトのまとめ
ウェブデザインのセンスを磨く！ 2012年下半期洗練されたディテールのUIデザインのまとめ
https://magazine.campus-web.jp/archives/1125
cmmntr.com