第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」2015-08-30（日）に大阪JUSO Coworkingにて行われた「第7回 D2D アクセシビリティ勉強会」でのスライドです。 Read less
フロントエンドも気にかけたいUI/UXの話。LIGブログのドロップダウンメニュー実装で気付いたこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
LIGブログの中の人、ゆたろです。どうもです。 フロントエンドの皆さんは、サイト上に新たに機能を実装する際、UI/UXをどのくらい意識していますか？ UI/UXはデザイナーさんの領域、と思いがちですが、フロントエンドも意識をすることで、より無駄なく・効果的なサイトの制作に役立ちます。 今回は、少し前のLIGブログ上にあったグローバルメニューで実際に上がった、フロント領域でのUI/UXの問題点と、それに対しての改善の一例を紹介いたします。当記事を通して、UX改善方法の参考、UXを意識した実装をするきっかけになればと思います。 変更前のグローバルメニューってどんなのだっけ？ https://web.archive.org/web/20160422094831/https://liginc.co.jp/（※） こちらが、今年の4月後半にリリースされた、ドロップダウンの付いているグローバルメニュー
UIデザインの引き出しを増やしたいときや悩んだときに参考になるデザインギャラリー 20 - NxWorld
webサイトやアプリなどのUIデザインに悩んだときに参考になるデザインギャラリーを全20サイト紹介します。 よくあるコンポーネントのデザインや配置の仕方、カラーの組み合わせ方を眺めるだけでなく、ギャラリーによってはクールなものからユニークなものまである様々なアニメーションをまとめているところもあるので、デザイン以外の部分でも参考になるギャラリーもいくつかあります。 また、悩んだ・困ったときに見るだけでなく、お気に入りのギャラリーがあればブックマークやフィード登録などして普段から空いた時間に目を通すことでデザインの引き出しも増やせますね。 Calltoidea 細かいコンポーネントからページ全体のレベルまで様々なデザインがまとめられています。 カテゴリーを表すアイコンもわかりやすく参考デザインのキャプチャも大きくて見やすいので、個人的によく見るギャラリーサイトのひとつです。 Collect
歴史から考えるフラットデザインとマテリアルデザインの違いとは？
もし私がこれから、フラットデザインとマテリアルデザインの違いが視覚上ごくわずかであると発言しても、不愉快にならないでください。 実際、この話題についてあまり知らない人は、どちらのデザインに対しても、とても良く似ていると思うかもしれません。今回はこの問題を解決するために、両方のデザインにおけるアプローチの違いに焦点を当ててご説明します。 マテリアルデザインにいたる歴史 二つのデザインスタイルについての長い議論を始める前に、それぞれのデザインが持っているルーツを見つけることは理に適っています。多くの人がマテリアルデザインはフラットデザインをベースにしていると信じています。 しかし、どのようにして我々はフラットにたどり着いたのでしょうか？ スキューモーフィズム UIとウェブデザイン用語でスキューモーフィズムは、現実世界にあるものを模倣するアプローチを指します。アップルのリアルな質感、明るさ、派手
Hamburger menu alternatives for mobile navigation
If you’re working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its low discoverability and efficiency. (You can read some of best articles on the topic here, here, here, and here.) Luckily, more and more sites and apps are experimenting with alternative, more efficient solutions for th
2017年に人気となる、知っておきたいUIデザインのトレンド8個まとめ
アプリデザインのトレンドは絶えず変化しています。時間が経てば消えてしまうものから、成長し、進化を続けるものもあります。多くのトレンドは検討する価値がもちろんありますが、一緒に新しい技術も必要となります。 優れたUIデザインは、シンプルさ（英: Simplicity）と有効性（英: Effectiveness）が全てです。これこそがデザイナーが機能性を達成しようとする理由です。しかし反対に、もしユーザーがアプリをうまく使いこなせないとき、UIデザインは失敗と言えるでしょう。 デザイントレンドが変化する理由にはさまざまな要因が考えられます。たとえば2015年の大きな流れとして、ハードウェアの変化やモバイル端末のレスポンシブ化が挙げられます。 公開された多くのモバイルアプリは、人気のある機能を必需品としてすぐに変化させてきました。さらに今では若者のおよそ90%が、モバイル端末上で基本的な操作を行
ホバーが好きすぎるエンジニアが選んだ “至極のホバー表現” 10選 【2016年10・11月版】！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
10枚の同じ服を着まわしているフロントエンド兼ミニマリスト、ザワです。はじめまして。 webでのデザインやアニメーションなどの表現がリッチになっている昨今。今回は、webサイトでのユーザーインタラクションの代表格であるホバー表現に注目し、過去にホバザワとの異名を授かったことのある私がチョイスした、魅力的なサイトをご紹介します。 Space Advisor http://www.space-advisor.ca/en/?experience ホバータイトル： 宇宙はlinear 勝手な解説： 惑星の周りを周回する衛星の様子を表現したアニメーションが、ボタンにホバーすることで表示されます。ボタンを構成する要素にはcss animationのanimation-iteration-countをinfiniteに設定し、イージングをlinearにすることで無重力空間が表現されています。サイトの世界
５つのデザインコンセプトから学ぶマテリアルデザイン
マテリアルデザインは、Googleが提唱するメタファーに基づいたデザイン手法ですが、多くのアプリに適用されだしています。 マテリアルデザインの第一の目的はユーザーを幸せにすることです。 デザインのあらゆる側面（色、タイポグラフィ、ビジュアル、マルチメディア、構造など）は、ユーザーが欲しいものを即座に得られるような快適な環境を作り出し、且つ心地よくそれが実現することを手助けするべきなのです。 マテリアルデザインでは、次のことが求められます: ユーザーインターフェイスは直感的ですっきりしている 情報の階層構造は明確でわかりやすくすべきである 全ての構成要素は配置・目的ともに必然であるべきである。飾りとして使われるアニメーションでさえも、意図や関連性を持つべきである 今回はUpLabsでキュレーションしているデザイナーによるギャラリーの中から、これらのガイドラインと各デザイナーの考える最適解が組
GPU処理のCSSアニメーションでアコーディオン - Qiita
■目的 カクカクしないようGPU処理でcontentクラスとtoggledクラスを javascriptで切り替えてアコーディオンを行う。 iPhoneシュミレーターでGPU処理されていたが、 iPhone6以上だとアニメーション中に引っかかるため手直しが必要。 ■slide.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,shrink-to-fit=no"> <title></title> <link rel="stylesheet" href="import.css" type="text/css"> <script src="jquery.js" charset="utf-8"></script> <script sr
Alertbox: 映画の中のユーザビリティ -- 間違いトップ 10（2006年12月18日）
映画の中のユーザインタフェース（UI）は、現実のそれよりもエキサイティングで、ヒーローたちは、なじみのないシステムを現実よりも遙かに簡単に使いこなしてしまう。 Usability in the Movies - Top 10 Bloopers by Jakob Nielsen on December 18, 2006 ハリウッドが表現するユーザビリティは、間違いだらけだ。ここではその中でも、最も著しいものをとりあげる。 1. ヒーローはどんな UI でもすぐに使いこなせる 企業に侵入する。外国の場合もあれば、異星である場合もある。そしてコンピュータの前に立つ。UI の操作方法を理解し、初めてみるアプリケーションを使えるようになるまで、どのくらいかかるだろうか。映画スターの場合は、1 分もかからない。 映画で最も現実離れしたコンピュータの表現は、どのインターフェイスもみた途端に使いこなせると
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するために CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を利用します。しばしばページに変化（英: Transition）やアニメーション（英: Animation）を加えるために CSS を利用しますが、まだまだ開発する余地がありそうです。 アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。 ディズニー社の現場で長年培われた、アニメーションの基本原則 12 個（英: 12 Principles of Animation）
jQuery・実務で必要な12項目をクリアしたレスポンシブドロワーメニューを作りました [IE11以上]
2017/07/29 余計なCSSを削除し、jQueryの見直しを行いました。 2017/01/29 Mac OS・Safari限定でスクロール不可に。Mac版Safariはクソブラウザ化しているので放置。 ※iOS、Androidは問題なし。 2015/10/16 発火後にリンクへ飛んでしまうバグを修正 2015年9月時点における、ドロワーメニューの実務要件を考えた。 Android 4.1 で動作するPCのクリック / スマホのタップ、両方に対応スマホアプリのように滑らかにスライドスマホでタップすると、一瞬で開閉するオーバーレイをクリックで戻る閉じるボタンも設置トリガーボタンを複数設置可オープン時、ドロワーメニュー部分のみスクロール ※コンテンツ側のスクロール無効ドロワーメニューの横幅をCSSで変更可 ※レスポンシブviewport に余計なコードを追加しない意味不明なHTML/CSS
![jQuery・実務で必要な12項目をクリアしたレスポンシブドロワーメニューを作りました [IE11以上]](https://cdn-ak-scissors.b.st-hatena.com/image/square/70ed47a51176ee01a65443ac18c45363990ced39/height=288;version=1;width=512/https%3A%2F%2Fkeitahirai.net%2Fwp-content%2Fuploads%2F2015%2F09%2F0.jpg)
UIデザインの参考にしたい！ナビメニュー用HTML/CSSスニペット40個まとめ
ウェブサイトやブログにおいて、ユーザーがもっとも操作するインターフェースのひとつは、ナビゲーションメニューです。きちんと設置することで、サイトを構成する各コンテンツへとユーザーを移動でき、目次のような役割として活用できます。 今回は操作性にこだわった、最新のナビメニュー用HTML/CSSスニペットをまとめてご紹介します。これらのコードを利用して、よりユーザーの注目を集める、独自のナビゲーションを実装してみましょう。 詳細は以下から。 未来のナビメニューはこれだ！参考にしたいHTML/CSSスニペットまとめ Spinny Header Menu 各種コンテンツをクリックすると、ヘッダー部分のロゴが回転します。 See the Pen Spinny Header Menu by Josh Nichols (@MrBlank) on CodePen. Fly Out Navigation 左サイ
ヌルヌルの秘訣はCSS！Googleスマホ版で採用されている使い心地のよいスライドメニューを再現した『jSlideMenu』
以前『スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました 』という記事を書きましたが、今回は『Qiita [キータ] – プログラマの技術情報共有サービス 』にてGoogleでも採用されているCSS3のアニメーションを使ったスライドメニューというものを発見したのでご紹介します。 jQueryプラグイン『jSlideMenu』 なんでも作者の方はGoogle先生のソースコードを調査し、あのヌルヌル動くスライド部分のアニメーションがJSではなく実はCSS3のtranslateで行われていることを突き止めたんだとか。 CSS – Googleから学ぶ ヌルヌルサクサクなスライドメニュー – Qiita [キータ] スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきや
Webデザインシステムはじめの一歩
CSS フレームワーク活用のタイミング Bootstrap、Foundation をはじめとした CSS フレームワークを一度くらい使ったことがあると思います。制作はもちろん、どのように CSS ファイルを整理すれば良いのか、どのようにデザインのルールを設計するのかといった CSS の書き方を学ぶ際にも使えます。もちろん CSS フレームワークはたくさんありますし、 Gridlex のように Flexbox を活用したグリッドシステムだけといった UI の特定要素のみを提供しているツールもあります。 CSS フレームワークは制作において非常に便利なツールですが、最終成果物として扱うかは注意が必要です。以下のような場合を除いて、CSS フレームワークはなるべく使わないようにしています。 プロトタイプ作成 Photoshop や Sketch のようなグラフィックツールで Web サイトをデザ
闇雲にディズニー映画みたいなアニメーションを GUI に実装するのはもうやめよう - Qiita
はじめに 本稿は UI Design Advent Calendar 2015 – 9日目の GUI アニメーションに関する記事です。 アニメーションの12の基本原則と GUI ディズニーの アニメーションの12の基本原則/12 basic principles of animation というのがありまして、要はこの原則に沿ってアニメーションを制作すればまるでそれが生きているかのような動きをする、平たく言えばディズニーっぽい動きになる、というものです。http://the12principles.tumblr.com がとてもわかりやすいので、うちいくつかを転載しておきます。 SQUASH & STRETCH ANTICIPATION FOLLOW THROUGH & OVERLAPPING ARCS ビデオ解説：The illusion of life これらを見ただけでも、『あー、デ
iOS アプリの UI でこれだけはおさえたい細部のインタラクション3つ - クックパッド開発者ブログ
Holiday 事業室の多田です。先日 Elasticsearch の記事を書いた内藤と共に Holiday ( https://haveagood.holiday ) の開発を行っています。 Holiday は、去年9月に Web 版をリリースしましたが、よりおでかけを楽しくするために今年3月に iPhone アプリをリリースしました（ダウンロードはこちら）。 アプリの開発過程ではコンセプトや仮説を立て、その検証や実現のために作っては壊すことを何度も繰り返し行いますが、実現したい価値を提供するためには、出来上がったプロダクトの細部のインタラクションも重要になってきます。細かい部分に気を配り使い心地を良くしてこそ、本当に提供したい価値をまっすぐに届けることができるためです。逆に言えば、最後の最後で細かい部分がちゃんとしていないばかりにそれまでの過程が無駄になったらもったいないですよね。 今
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Frend — Accordion
ヌルヌルとスライドするレスポンシブなドロワーメニューの作り方 | ツクログ
PCサイトのUIデザインにおける12のトレンド
