項目名の右横に、降順や昇順を示すアイコンが表示されます。 適用するソートのタイプによって、表示されるアイコンは異なります。
項目名の右横に、降順や昇順を示すアイコンが表示されます。 適用するソートのタイプによって、表示されるアイコンは異なります。
今回の記事ではフロントエンド開発で参考にしているサイトを紹介していきます。 どれも動くCSS素材やコピペだけで簡単に実装できる素材がまとまっています。 気に入ったサイトを自己判断で参考にしてみてください。 TwinzLabo コピペだけで作れるデザインレシピを公開しています。動きのあるデザインやオシャレなWebデザインなど様々な記事があるのでおもちゃ屋さんに来たかのように楽しめます。記事に使用しているアニメーションはVue環境で作成されているので普段Vueで開発している方はコピペだけできれいに反映させることができて便利です。記事で紹介されているコードひとつひとつに詳しく解説がついているので初心者にはありがたいかと思います。 Free Frontend By using freefrontend.com you accept our cookies and agree to our priv
ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。 UI interactions UI interactions -GitHub UI interactionsは、CSSのみでUIにインタラクションを加えるスタイルシートです。MITライセンスで、個人でも商用のプロジェクトでも無料で利用できます。 UI interactionsの使い方 すべてのコンポーネントには、デフォルトとアクティブの2つの状態があります。状態の切り替えは、is-activeのclassに基づいて発生します。 HTML HTMLは、button要素にclassを与えるだけでのシンプルな構成です。
最近見かける美しいデザインや気持ちいいアニメーション、レスポンシブ対応のコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトなど、人気が高いテクニックを効果的に取り入れて制作されたHTMLとCSSベースのフレームワークを紹介します。 Propeller Propeller -GitHub Propellerの特徴 Propellerのスタイル・コンポーネント Propellerの特徴 PropellerはMaterial Designのデザインやアニメーション、Bootstrapのモバイルファーストで構築されたレスポンシブ対応のフレームワークです。 MITライセンスで、個人でも商用でも無料で利用できます。 25個のUI要素を含むレスポンシブ対応のコンポーネントのライブラリ 開発プロセスをスピードアップするテンプレート UI要素を段階的に使用する詳細なユーザーマニュアル 対応ブ
紙面又はオンライン出版でのデザイン、編集、ライティングを含むメディア業界で10年以上の経験があります。スポーツが大好きでフットボールやバスケットボール旅行の計画に時間を費やしたり、統計データにも夢中です。 この記事はDropboxやGmailなどの実例を参考にしつつ、自然でさりげないUXを生み出すための実践的なガイドです。 ここ数年で最も成功しているインタラクションデザインの分析をしたとき、Gmailの自動保存機能やUberのクレジットカード入力フォームのような、基本的な機能を完璧に作り込む会社に軍配が上がります。彼らは人間の自然な行動を巧みに取り入れ、私たちが今まで気づかなかった障壁をひそかに取り除いているのです。 インビジブルデザイン（インビジブル＝透明な）とは、ミニマリズムのことについて言っているわけではありません。ミニマリストのインターフェイスはインビジブルデザインを実現するための
by Patrizio Cuscito ウェブサイトやアプリを使っていると自分の意図するものとは違う操作が勝手に行われていて戸惑うことがありますが、ミスではなく、「わざと」そのようなデザインにしているユーザーインターフェースを「ダークパターン」と呼びます。なぜ善良なデザイナーがダークパターンを使う悪意あるデザイナーになってしまうのか、その仕組みがムービーで公開されています。 Dark Patterns - User Interfaces Designed to Trick People http://darkpatterns.org/ ダークパターンとは何か？ということは以下の記事を読むとわかります。 ユーザーをだますのが目的のデザイン「ダークパターン」いろいろ - GIGAZINE なぜデザイナーが暗黒面に落ちてしまうのかは以下のムービーで解説されています。 Dark Patterns:
社内のSlackでUI談義が突発的に始まることがあるのだけれども、以前そこで上がったiOS純正メールアプリのUIについてのネタがなかなか面白いのでまとめてみようと思った。結論から言うと、純正メールアプリ、ヤバイ。 まずは観察メールの新規メッセージ画面は他の純正アプリではあまり見かけないようなトランジションを採用していて、開くと元の画面が少し後ろに下がってナビバーだけが見えつつもメッセージ画面が中途半端なモーダルビューで現れたような状態になる。このUIが使いやすいとか何となく見た目がかっこいいとか、そんな上辺だけの理由では絶対ないはずなので、AppleがメールアプリをデザインするときになぜこのUIに至ったのか、その理由を考えてみた。 メールの新規メッセージ画面を開いた状態普段純正メールアプリでメッセージを送信することはほとんどなかったので、まずはいろいろと動きを観察することにした。新規メッセ
最近、「モーションデザイン」という言葉がデザイン業界で急に出てきていることに気づいていますか？大小様々な企業が、これに特化した肩書きを持つデザイナーたちを雇いはじめています。最近ではGoogleが I/Oカンファレンス で、Googleの製品で統一化されているモーションランゲージの概要について話していました。 この騒ぎは何でしょうか？そして何の意味があるのでしょうか？ モーションはストーリーを語ります。 アプリにおける全ての物事は連鎖になっていて、モーションはあなたのガイドになります。ボタンをクリックして、画面が変わる度に、そこにはストーリーがついてきます。例えば、アイテムを作ったり削除する時、アニメーションがどのように役に立つかを見ていきましょう。 アイテムを消すことは劇的で破壊的な作業ですので、適切に反応するようにしましょう。アイテムをただ画面から消すだけということはしないようにしまし
アコーディオンやタブ、ダイアログ、オフ キャンバス、ページ内リンクなど、Webページでよく使用されるコンポーネントをアクセシブルに実装するコードを紹介します。 Frend 実装にあたり Frendのコンポーネントは最小限で、他のスクリプトやCSSの依存はありません。Web標準をプライオリティとして構築されています。 WAI-ARIAに基づき、ARIA属性とイベントバインディングを利用し、ディテールを提供しています。すべてのコンポーネントはキーボードでの操作も可能です。 コンテンツあるいはインタラクションは、それを利用するためのベースラインを保証し、CSSやJavaScriptで拡張している箇所は必ずしもすべてのブラウザで同じように機能しません。しかし、それを利用することに問題はありません。 アクセシブルに実装されたコンポーネント 各ページでは実際のデモとコード、解説が掲載されています。
Webページで実際に使用されている63種類のさまざまなUIデザインのパターン、エレメントの使い方、コンテンツの見せ方・そしてそれらの実装の際の注意点などを一冊のPDFにまとめた無料のeBookを紹介します。 Web UI Design Patterns 2014 本書は以前、紹介したUXPinのシリーズで、ウェブ制作の参考になるPDFが他にも無料でダウンロードできます。 ワイヤーフレームや最近のUIを解説したワイヤフレームガイド 2014年、進化しているWebデザインのトレンドをチェックできる無料のE-Book スマホページ・アプリのさまざまなUIの特徴と実装の注意点がまとめられた無料のeBook eBookは全編英語ですが、英語が苦手な人でもグラフィックを見るだけで十分にためになると思います。 本書の中身を簡単に紹介します。
MoneySmart: ホイール操作で軽快に収支管理できる無料アプリ! ウィジェット対応で残高も即チェック! 記録方法は簡単。日付を指定し、ホイールでカテゴリを選び、金額を入力するだけです。「無駄づかいだったか」や「誰のための支出か」などの細かな情報も記録できます。記録した情報は、タイムラインやグラフで確認しましょう。 iOS 8 の新機能『ウィジェット』に対応しているので、通知センターから今日の支出をチェックしたり、MoneySmart を開いて収支を記録したりできます。Touch ID によるロック解除にも対応しています。 収支を記録する 左：アプリを開いたら、ホイールを下に引っ張って離します。 右：ホイールを回してカテゴリを決めます。 左：金額を入力します。 右：日付をタップすれば、カレンダーから日付を選べます。 記録と一緒に写真や位置情報も残せます。位置情報も記録すると、どこでお金
Behanceに「Google Visual Assets Guidelines」の紹介がありました。 これは、Googleのプロダクト・アイコンや、サービス・ロゴ、UIパーツについて、形状や色のガイドラインを定めたものです。 アイコンのデザイン原理 丸や単純な矩形の組み合わせできています。 アイコンやピクトグラムをデザインする際はレゴで遊んでいたときのことを思い出すとよいです。 パーツの組み合わせのおかげで、アイコン間の統一感も生まれます。 image by Behance image by Behance image by Behance ほかにも3つルールをピックアップ。 3D禁止 image by Behance 影のルール 真っすぐか45度、ソリッドに。 image by Behance 色のコンビネーション・ルール image by Behance こうした資料は、アイコンやロ
Selectize.js タグ入力やコンタクト連絡先の入力に便利なUIを実装できる「Selectize.js」 次のような良い感じのデザインのタグ入力補完機能付きタグ入力UI、同様にコンタクトリストでも使えるUIが作れます Bootstrapと組み合わせても違和感なさそうなリッチなUIがいいですね 関連エントリ jQuery用のよく使うUIコンポーネントセット「ZinoUI」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 超クールなjQueryUIテーマ「Delta」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く