無料のマテリアルデザインフレームワーク10選
ライターであり、Sufism:A Brief Historyの著者。メインの分野はオープンソース、モバイル開発、WebCMS、ベクターアートなど。電子ジャーナルのBrave New Worldのチーフ＆エディター。 デザイン原則に科学と技術のイノベーションを組み合わせたら、なにが起こるでしょうか？ まさにGoogleが実践し作りあげた、マテリアルデザインのコンセプトが創られるのです。 マテリアルデザインとは、クラシックデザインの原理やルールと、サイエンスやテクノロジーの可能性やきまりを結びつけたビジュアルデザインコンセプトです。マテリアルデザインだけでなく、関連するツールやリソースも同様に人気があります。 この記事では、マテリアルデザインスタイルを採用するWebやモバイルプロジェクトに最適なフレームワークをまとめました。 マテリアルデザインUIキットとマテリアルデザイン活用の実例もまとめて
コードを最適化するためのフロントエンドフレームワーク10選
UIデザインとWeb開発に関するトピックのライター。個人ポートフォリオやWeb上のいたるところで彼の記事を見つけることができます。最新のアップデートなどを見るにはTwitterをフォローしてください。 Googleで検索すると、Webサイトのパフォーマンス改善のための便利なツールが数多く見つかります。 サイトの画像最適化から独自のCDN設定にいたるまで、さまざまです。 しかし、デザイナーの中でコード最適化について考える人はほとんどいません。 コード最適化とは、総HTTPリクエスト数を減らしたり、ファイルを軽量化したり、表示スピードアップのために最適なカスタムフレームワークに切り替えることを意味します。 最新のBootstrap v4は素晴らしいデザインですが、残念ながら最も重いフレームワークの１つです。 そこで今回の記事では、重いBootstrapの代わりに軽いWebフレームワークを厳選し
メールアドレスの確認フィールドをなくすべき理由
UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける
サイトやアプリの使い心地を改善！UIアニメーションを良くする実践テクニック、小技7個まとめ
実際のサンプル例を確認しながら、UIデザインの「良い」アニメーションを「より良く」してみましょう。ほんの少し調整を行うだけで、UIマイクロインタラクションをより魅力的で、ユーザーにも分かりやすく表現できます。 たとえば、リスト形式で並べたコンテンツにちょっとした工夫を加えるだけで、よりつながりのあるUIパターンを演出できたり、コンテンツの関係性を考えたアニメーション遷移、ボタンをクリックするなどユーザーに行ってもらいたいものに注意を引くことも、ほんのわずかなUIマイクロインタラクションによって実現できます。 今回はこれらのサンプル例を作成するために、Material Motion、IBMのアニメーション原則、Motion in Manifestoのガイドラインを参考にしています。 また今回のサンプル例は、InVision Studio（現在は限定ユーザーのみのアーリーアクセスで、メール登録
完全無料で美しい！参考にしたいUIキット50個まとめ 2017年保存版
ユーザーがウェブサイトを訪れたとき、まず目にするものがグラフィックデザインです。高品質なUIデザインを利用することで、ユーザーにサイトをより魅力的に見せることができます。 今回は、新しいデザイントレンドを取り入れた、完全無料ダウンロード可能なUIキットをまとめてご紹介します。 これらのUIキットを利用することで、クリエイティブで美しく、便利なウェブサイトやアプリデザインの作成をスピーディーに行うことができます。必要に応じてボタンやログインフォーム、ソーシャルメディアなどの要素を編集し、自由に利用することができます。 魅力的なウェブデザインを素早く仕上げる、すごい無料UIコンポーネント素材30個まとめ 完全無料でこのクオリティ！美しい新作UIキット50個まとめ 2017年版 Blog UI Kit ファイル形式: Sketch Prometheus | UI Kit ファイル形式 : PSD
UXデザイナーが備えておきたいツール・サービス厳選20個まとめ
UXデザインとはユーザーエクスペリエンス(UX)、Webサイトやアプリの使い勝手やユーザーが体験する満足度を重視したデザインのことで、あなたが満足するデザインをつくってもユーザーが使いやすいと感じなければUXが良いとは言えません。 ユーザーのリサーチやテストやフィードバック、プロトタイプやワイヤーフレームの作成、クライアントやチームメンバーとのコラボレーションなどに役立つツール・サービスを紹介します。 20 Valuable Tools For UX Designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ユーザーのリサーチ・テスト・フィードバック プロトタイプ・ワイヤーフレームの作成ツール コラボレーションのツール ユーザーのリサーチ・テスト・フィードバック ユーザーのリサーチは、プロトタイプを制作する前におこなう
Uber、行き先として場所ではなく人を指定できる新機能
Uberの行き先として、連絡先に登録している相手の現在地を指定できるようになる。連絡先をUberアプリと連係させ、相手もUberアプリユーザーで、相手が現在地通知を承諾すれば可能だ。 米Uberは12月21日（現地時間）、乗客が行き先として場所ではなく人（の現在地）を指定する新機能を追加したと発表した。 相手がどこにいても、相手もUberアプリをインストールしていて現在地の通知を承諾すれば、行き先として相手の現在地を指定できる。 この機能を利用するには、まずUberアプリと端末の連絡先を同期させておく必要がある。アプリの「Where to?」入力欄に相手の名前を入力すると、相手に現在地を相手に教えることを承諾してほしいというプッシュ通知が表示される。ここで相手が「SEND」をタップすれば、その現在地が行き先として登録される。
インタラクションの参考にしたいUIアニメーション５選
MatthieuはUpLabsの創設者で、MaterialPaletteとWOW.js.のクリエイター。 良いユーザー体験のためには格好良いデザインだけではなく、仕組みや構造、使いやすさにも気を配る必要があります。近年ではUXデザインの重要性が叫ばれ、こういった考え方も徐々に浸透してきてはいますが、だからといってビジュアルやインタラクションのデザインを軽視してもいいと言うわけでもありません。 この記事では過去にも何度か取り上げている、UIコンセプトギャラリーサイトのUpLabsからまたいくつかのUIコンセプトを実装コード付きでご紹介します。ユーザーがサイトを使うときの心地よさを演出するためのヒントがたくさん詰まっていますので、是非参考にして下さい。 ※各項目ごとにCodePenを埋め込んでいるため、読み込みに少し時間がかかる場合があります UpLabsのオススメUIコンセプト５選 1. カ
UXを向上させる５種類のアニメーションの使い方 | UX MILK
Nick Babich氏はソフトウェアディベロッパーです。大のテクノロジー好きで、UI/UXをこよなく愛します。彼のwebサイトはこちらです。http://babich.biz。 モーションはストーリーを伝えます。長く複雑なストーリーではなく、「今ここを見て下さい」や、「操作は正常に完了しました」などのシンプルなストーリーです。 しかし、アニメーションの目標は、ユーザーを楽しませることではありません。ユーザーが何が実行されているか理解し、より便利にアプリを使う方法を理解するための手助けするためにあります。このアイディアは、Zurbの記事にある次の言葉の中ではっきりと表現されています。 We’re no longer just designing static screens. We’re designing for how the user gets from those screens
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
