Webデザインのすごいアイデアや細かいこだわりがいっぱい！素晴らしいUXを堪能できるサイトのまとめデザインの細かいこだわりがすごい！ こんな面白いアイデアはどこから生まれるんだろう？ CSSやSVGでこんなこともできるのか！ 次のプロジェクトのヒントになるような素晴らしいUXを堪能できるWebサイトを紹介します。 時間のある時に、じっくりお楽しみください！
ブラウザにやさしいHTML/CSS
1. HTML/CSS 〜 「お・も・て・な・し」をブラウザにも 〜 TAKEHARU IGARI Front-end Engineer / Evangelist ブラウザにやさしい <html5j パフォーマンス部 第⼀回勉強会 /> 2. プロフィール • TAKEHARU IGARI 猪狩 丈治 - 所属 • 株式会社 Lei Hauʼoli フロントエンドエンジニア - 略歴 • 表⽰速度、保守性、ブランディング、SEOを考慮したフロントエンドエンジニアリングを得意とし、 現在、各ナショナルクライアントのプロジェクトや、株式会社リクルートの主要サービスのフロント エンド開発に携わり、⾼速化コンサルティングも⾏う。 - 執筆 • 技術評論社「WEB+DB PRESS」 • Vol.66 〜我流コードからの卒業HTML構造化指南 • Vol.59 〜「Webサイト超⾼速化実況中継 ──
スマホ初心者の母にスマートフォンサイトのUIについて色々聞いてみました | AOGIRI.net（アオギリネット）
おそらく自分の母親世代である方も対象になるであろうスマホサイトを制作するために、母に色々と意見を聞いてみました。 母は、スマートフォンで私のインストールしたアプリでレシピ見たり、天気予報を見たり、ニュースを見たりするぐらいで、積極的にネットで検索はしないけど、必要に迫られると見るというぐらい。 そこでいくつか驚いたこと、なるほどと思ったことがあったのでご紹介します。 右上の三本線はメニューとは認識しないどころか、「メニュー」という文言すら何を指しているのか分からない 最近、スマートフォンサイトではヘッダの右上に「三本線＋メニュー」のボタンが配置されることが多くなっています。三本線だけ、というサイトもありますが、万人がターゲットのようなサイトは、「メニュー」「MENU」の記載が大体あります。 しかし、私の「このメニューっていうボタンを押したらメニューが表示されるって分かる？」という質問に返っ
最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集 -Refills
ヘッダやフッタ、ナビゲーション、タブ、アコーディオン、カードコンテンツ、モーダル、パンくず、オーバーレイコンテンツなど、最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集を紹介します。
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート | コリス
レスポンシブ対応で背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装するスタイルシートを紹介します。 最低限の要素にしたデモ 実装は、こんな感じになります。 HTML パネルはarticle要素で実装します。中身はテキストでも画像でもフォームでも何でもOK。 <body> <article> <h1>半透明の美しいパネル</h1> <p>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が［一般に〔米〕では Whiskey,〔英〕では Whisky.］であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ご
[JS]スクロールに加速やバウンドなど30以上のエフェクトを与え、位置補正もできるスクリプト -AnimateScroll
「Easing Effect」には3つのデモがあります。 「easeInOutBack」一旦逆にスクロールし、目的地をちょっとだけ通りすぎて戻って到着。 「easeOutBounce」目的地につくとバウンドで到着。 「easeOutElastic」はeaseInOutBackを素早くした感じです。 AnimateScrollの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトをhead内に記述します。 <head> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="animatescroll.js"> </head> Step 2: HTML（スクロール先の設定） スクロール先の要素にidやclassを付与します。 ※ペー
ノンデザイナーこそ押さえておきたい! UI/UXが学べる神スライド7選 | Find Job ! Startup
競合に負けないWebサービスをつくるため、UI（User Interface）、UX（UserExperience、ユーザー体験）にこだわるのは、もはや常識。良いUI/UXはチーム全員で考えることが、良いサービスをつくる秘訣です。 エンジニアやWebディレクターも学んで損はしません。もちろん、本職デザイナーの方々にも役立つ7つのスライド厳選まとめです！ 目次 基礎知識 １．UXのためのUIデザイン ２．UX is not UI ３．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：前編 応用編（Webサイト） ４．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：後編 ５．コンテンツで改善する UI デザインの極意 応用編（スマホアプリ） ６．UI＆UX / 重要なのは、毎日さわって嬉しいUI UX! 応用編（タブレットアプリ） ７．ニコニコ超デザイン-
damirfoy.com - damirfoy リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Almost Flat UI
Provides extra visual weight and identifies the primary action in a set of buttons
Web Components普及の夜明け！？Polymerを試してみた。 | OpenWeb
今、Google I/Oに来ています！ そこで参加したWeb Components in Actionというセッションで、以前から注目していたWeb Componentsについて、大きな動きがあったことを知りました。 Polymer.jsというライブラリにより、Web Components仕様の大部分が動作させられるだけではなく、様々なカスタムコンポーネントを既に利用可能とのことなのです！ ちなみに、Web Components仕様について多少詳しく知りたい方は、昔白石が書いたこちらの記事を参考にするといいんじゃないでしょうか。 Polymerのコードを取得 PolymerはGitHubでコードが公開されています。まずは適当な空ディレクトリに移動し、そのコードを手元にクローンします。 このコマンドを実行すると、Polymer本体だけではなく、依存しているいくつかのモジュールも同時にクローン
ページを移動（離脱）するときにjQueryで警告を出す方法
Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $(window).on('beforeunload', function() { return '投稿が完了していません。このまま移動しますか？'; }); }); </script> <form method="post" acti
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
スマフォやタブレットに最適なナビゲーションの考察 -見た目のレスポンシブではなく操作性で！
スマートフォン、タブレット、ラップトップタイプのタブレットなど、タッチデバイスに最適なナビゲーションの考察を紹介します。 単に見た目のレスポンシブではなく、操作性を考慮したレスポンシブです。 Responsive Navigation: Optimizing for Touch Across Devices 下記は各ポイントを意訳したものです。 各デバイスのサイズ 各デバイスのタッチ方法 タッチデバイスに最適なナビゲーションの位置 デモ スマフォ・タブレット・ラップトップタブレットのサイズ まずは、デバイスごとのスクリーンサイズを確認してみます。 過去2ヵ月にリリースした主要なスマートフォンのサイズ一覧です。
Free Web GUI Pack: Cool Metallic and Glassy Versions
Freebies: Free Cool Metallic and Glassy Web GUI Pack for Designers Graphical User Interfaces, commonly known as GUIs are used by designers to represent information and actions available to a user through visual indicators and graphical icons. Many different variations of GUIs are readily available on the web, as designers always like to try out new GUI sets to suit their projects. Today, we are gl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
データを可視化する為のグラフ描画JavaScriptライブラリをまとめた・「JSGraphs」
cow2design.com
Loading...
ウェブデザインのセンスを磨く！ 2012年下半期洗練されたディテールのUIデザインのまとめ
[CSS]ユーザーを楽しませる気持ちいいエフェクトがたくさんあるCSS3のデモサイト -CSS3 Playground