Animate transition
AnimateTransition({ container: container, blockIn: blockIn, blockOut: blockOut, animation: 'slide-in', onTransitionStart: function (blockIn, blockOut, container, event) { }, onTransitionEnd: function (blockIn, blockOut, container, event) { } }); AnimateTransition({ container: container, blockIn: blockIn, blockOut: blockOut, animation: 'slide-in', onTransitionStart: function (blockIn, blockOut, con
[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ
コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい～ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。
![[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0bc338c3b019bd35cf84848dd648330728cc081c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015082406.png)
これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編） | Goodpatch Blog
先日、長谷川恭久さんとの共同プロジェクト、“Patch Project”がスタートしました。これはUIデザインの新しいワークフローを作るために立ち上がったプロジェクトです。これまでのワークフローを見直して、より良いUIを作っていくためにはどうするべきなのか、実際に何かのUIをデザインしながら模索していきます。そのプロセスや結果はどんどんオープンにしていきますのでお楽しみに！ まず今回はその導入部分として、ワークフローの提案について長谷川さんに話して頂いた内容を記事にしました。前編では、デザインカンプをやめてプロトタイプを作るべき理由を中心にまとめています。 そもそもUIとは何か UIの話というと多くの人がビジュアルデザインの話をしますが、そもそもUIとは人間とコンピュータの関係を円滑にするためのものです。人がコンピュータと関わるとき、そこには必ずインプットとアウトプットがあります。その中で
Webユーザビリティランキング 企業サイト編｜トライベック・ストラテジー
トライベックでは創業以来、独自のユーザビリティ評価プログラムによって国内主要企業のWebサイトの使い勝手を客観的な指標によって評価してきました。 毎年、各業界売上上位の国内主要企業全150社をピックアップし、企業Webサイトを当社専門家が評価・スコアリングを行い、企業のユーザビリティ品質に対する取り組みの実態やトレンドを明らかにする取り組みを行っています。 100点満点でスコアリング 当社実施の各種ユーザーテストやコンサルティングで培われたUI/UX視点の詳細な評価基準。 毎年ユーザー環境・意識やトレンド変化に合わせ評価基準は最新化されます。 全117評価項目 ユーザビリティコンサルタントによる専門家評価を実施。全117評価項目について使い勝手を4段階評価します。当社実施の各種ユーザーテストやコンサルティングで培われたUI/UX視点の詳細な評価基準。 毎年ユーザー環境・意識やトレンド変化に
system.js
system.jsには初期設定としてonloadに色々な関数が設定されています。onloadを上書きすると動かない機能があります。 新たにonload時に走らせたい関数がある場合は、「load.Set('関数名');」として、追加します。 load.Set('AAA()'); function AAA () { alert(ENV.tH); }
一歩先に進むためのレスポンシブデザインのガイドライン
ウェブサイトをデスクトップ・タブレット・スマートフォンなど、クロスデバイス対応のレスポンシブデザインにする際、サイズを小さくしたりシンプルにするだけでなく、ユーザーの使い勝手を考慮した一歩先に進むためのUIデザインのガイドラインを紹介します。 UI Design Guidelines for Responsive Design 下記は各ポイントを意訳したものです。 はじめに デスクトップ タブレット スマートフォン おわりに はじめに レスポンシブデザインが誕生した時、ウェブ制作のコミュニティではそれを解決するための方法をすぐに考えだしました。多くのウェブサイトがレスポンシブに対応した今、そこから一歩先に進む時です。コーディングに注意を払うことは簡単ですが、いくつかのスクリーンサイズのためにデザインが犠牲になることがあります。 レスポンシブデザインの多くのリソースは基本をカバーするだけで、
JavaScriptのライブラリを沢山集めてカタログ化しているWebサイト・Jster - かちびと.net
JSライブラリのまとめサイトの ご紹介。既知の方も多いかもし れませんが、探すのに便利なの で改めてご紹介します。カテゴ リ分けもしてくれているので探 しやすいです。 様々なJSライブラリがまとめられています。探し物がある際は覗いてみるといいかも。 UIやメディア、グラフィック、ユーティリティなどのカテゴリに分けられています。現在は900ほどのライブラリがまとめられています。 シンプルで探しやすいのではないかと思います。ライブラリはそれぞれ簡単な説明もしてくれています。 パッと見たところ、評価の高い印象のライブラリに絞ってくれている・・・気がしました。（気がするだけかも 困ったら覗いてみようと思います。 Jster
素晴らしいCSSメニュー120選 – creamu
CSSでかっこいいメニューをデザインしたい。 そんなときに参考になるのが、『120 Excellent Examples of CSS Horizantal Menu』。素晴らしいCSSメニュー120選だ。 以下にいくつかご紹介。 ↑のキャプチャはandreaugusto。 dairien kudayta megavirada porterscarpetandfurniture その他のリストは以下から。 » 120 Excellent Examples of CSS Horizantal Menu 素晴らしいCSSメニュー、チェックして参考にしてみてはいかがだろうか。 天気がよくて気持ちいいですねーー。表参道でカフェ中だ。 古本で買った本を読み終わった。ブログの方はなかなか面白かったかな。
スマートフォンサイトで好まれるユーザーインターフェイス【リサーチ】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
デザインが苦手な人、すぐに使いたい人にぴったりなウェブページ・ワイヤフレーム用のPSD素材 -Layout Lab
デザインが苦手な人、すぐに使いたい人にぴったりなウェブページ・ワイヤフレーム用のPSD素材 -Layout Lab
フォームデザインいろいろ - DesignWalker
今回は、フォームの見た目にこだわっていろいろとフォームのデザインをまとめてみました。 登録、ログイン、コメント、検索などなどいろいろな場面で使われるフォームをきれいに見せるアイデアがたくさんつまっています。 Blog Comment Form Design Showcase | Smiley Cat Web Design ブログのコメントフォームを集めたショーケースです。きれいなフォームがたくさんありますね。またこちらのサイトでは、他にもいろいろとフォームをまとめられております。ログインフォームや登録フォーム、別のブログコメントフォームも参考になりますね。 Pattern Tap 現在185種類のフォームデザインがまとめられております。 Form Generators, Styling, Inspiration | CSSAddict おしゃれにデザインされたフォームがたくさん。 Web
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ)
バンダイチャンネルが7月下旬から11月にかけて期間限定でiphone,ipad上で無料動画を配信していたことをご存じでしょうか？ 公開中にこの記事を書けば良かったのですがいつのまにやらこんなに日にちが経っていました…。このまま記事を下書きにしておくのももったいないので公開してみようと思います。 UI、デザイン、マークアップディレクションを担当 UI及びサイトデザイン、及びマークアップ関連のディレクションを担当させていただきました。実際のマークアップやAJAXの部分はチームまめこの優秀なマークアップエンジニャーさんによるものです。さすが! iPhone、iPadのような新しいデバイスでのデザインはPCと似ているようで非なる箇所が多く、本サイトをデザインするにあたり多く気付かされた事がありました。 iPhone版について インターフェイス 情報を優先順位にのっとってメリハリがPCのそれよりも
ユーザーにクリックされやすいボタンデザインの5つのポイント
ユーザーの行動への呼びかけを促す「ダウンロード」や「サインアップ」などのボタンをデザインする際に気をつけたい5つのポイントをLee Munroeから紹介します。 Web Design Trends: Call To Action Buttons 先日とりあげた「ハイパーテキストリンクのスタイル大全」の5. ボタンスタイルで紹介されているものです。 以下は、各ポイントを意訳したものです。 はじめに サインアップやダウンロードなど、ユーザーの行動への呼びかけを促すボタンのデザインはウェブデザインにおいて重要なものです。 ボタンはそのページのゴールの一つであり、その目的のためにそれぞれのページをデザインするといっても過言ではありません。 行動を呼びかけるボタン（Call to Action Button）はユーザーの注意を引く必要があります。以下に、そのボタンのデザインの5つの特長をあげます。
User Heat : どこが読まれているか見える！無料ヒートマップ・ツール
ヒートマップとは ヒートマップとは、温度を色で表すサーモグラフィーと同様に、ユーザーが注目している閲覧場所を赤緑青といった色で可視化する技術です。ユーザーのページ内行動を、マウスの動きから推定しています。 たとえば、 「ページをどこまで読み進めたのか(終了エリア)」「ページのどの位置を長く読んだのか(熟読エリア)」「ページのどの位置をクリックしたのか(クリックエリア)」を見える化します。これを利用すると、「読んでほしいのに読まれなかった箇所」、「意外とクリックされているリンクやボタン」「クリックしてほしいのにされていないリンクやボタン」などを発見でき、従来のページビュー(PV)やユニークユーザー数(UU数)などのアクセス解析だけではわからなかった改善点を、素早く浮き彫りにできます。 終了エリア 熟読エリア クリックエリア ヒートマップのメリットはどんなものですか？ ヒートマップツールを使う
無料でウェブページ内のユーザーの行動を可視化してヒートマップを見せてくれる「ユーザーヒート」
通常のアクセス解析は単純にどのページがどれだけ見られたかという程度のものですが、実際にユーザーがどこをクリックしているのか、どこから見始めているのか、どこを重点的に見ているのかなどを分析する「ヒートマップ」を無料で作成してくれるのがこの「ユーザーヒート」です。 実際にどのような感じで解析できるのかというサンプルは以下から。 ユーザーローカル、Webページ内の行動を分析する無料アクセス解析ツール「ユーザーヒート」を公開 User Heat : どこが読まれているか見える！無料ヒートマップ・ツール http://userheat.com/ マウスの軌跡・クリックが多い場所・熟読エリアの3パターンの可視化が可能となっており、それぞれ以下のようになります。 マウストラック分析。ページが表示されてから離脱するまでの訪問者のマウスの動き（ページを開いたときのマウス場所や移動箇所、クリックした場所）を表
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sliiide
純利益をあげているEコマースTOP100サイトに見る、購入フローの全ステップをキャプチャでおさめたまとめ
新着記事
ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI
WebサイトのUIのプロだけどサイトの評価するよ : はれぞう