タグ

UIに関するyamadarのブックマーク (331)

  • Mac - Apple (日本)

    iPhoneの使いやすさをMacでも。 Macにはメッセージ、写真、メモ、FaceTimeなど、iPhoneと同じアプリがたくさん。使い始めた瞬間から使い慣れた感覚で操作できます。 フル装備。 メール、カレンダー、ネットサーフィンのためのSafariなど、あなたが毎日使うアプリが勢ぞろい。すぐに始められる理由です。Pages、Numbers、Keynoteといった仕事効率化のためのパワフルなアプリも内蔵されているので、書類、スプレッドシート、プレゼンテーションの作成にも取りかかれます。

    Mac - Apple (日本)
    yamadar
    yamadar 2017/06/06
    見せ方がダサい。プロダクトは良いかもしれないが。
  • MUI: The React component library you always wanted

    Skip to content🚀 Influence MUI's 2024 roadmap! Participate in the latest Developer Survey →

    MUI: The React component library you always wanted
    yamadar
    yamadar 2017/04/24
    GoogleのマテリアルデザインをReact.jsベースで使用出来るCSSライブラリのフレームワーク
  • The Next Generation WYSIWYG HTML Editor | Rich Text Editor

    "Froala is a wonder" I feel it's one of the most powerful and best javascript editors so far in the ...Read more market.inatialization speed is 40se which is pretty amazing and the security is outstanding. What do you dislike about Froala Editor? No downsides as such.I did not face any major issues with using it.Its practically AMAZING. What problems is Froala Editor solving and how is that benefi

    The Next Generation WYSIWYG HTML Editor | Rich Text Editor
    yamadar
    yamadar 2017/03/28
    今Railsで 一番イケイケっぽいWyswigエディタ
  • スクロールは制御するな - Weblog - Hail2u.net

    WWD Japanのウェブサイトがリニューアルして、スッキリした見やすそうな印象のものに変わった。しかし実際のところ見やすさは見せかけだけで、ナビゲーションをクリックしても見当違いのタブに切り替わったり、ニュース一覧からニュースをクリックしたら、要約ページへ移動するだけで、文へはもう一度クリックしなければならなかったりする。中でもひどいのがMobile Safariでの閲覧だ。 このウェブサイトではスクロールをほぼ自前で制御しようとしているため、常にこのようにMobile SafariのURLバーとツールバーが上下にそれぞれ表示され続ける。その上、最上端にロゴとグローバル・ナビゲーション、最下端に広告がそれぞれ固定位置であるので、コンテンツの領域がかなり制限されている。iPhone 5SやSEどころか6+や7+でさえも致命的なのではないかと感じられる狭さだ。 とにかく文書を読ませようとい

    スクロールは制御するな - Weblog - Hail2u.net
    yamadar
    yamadar 2016/10/03
    本文を読むボタンを置いて、画面真ん中から下に流れる広告を誤タップさせるのほんとやめて欲しい。/スクロール制御はUX損ねる場合が多いと感じてる。
  • 16種類(45カテゴリ)の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選(スライド付)

    2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今

    16種類(45カテゴリ)の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選(スライド付)
  • 2000種超えのWebデザインを横断検索できる「Collect UI」を使ってみた! : うえぶはっく

    Webやアプリを開発する際に必要となる「Webデザイン」の勉強&参考に最適なサービス「Collect UI」のご紹介です! 圧倒的なコンテンツ数を誇っているのが魅力的ですが、細かくカテゴライズされているので「ログイン画面」や「フォーム」など、自分が必要としているシーン別に探しやすいのも特徴でしょう。 使い方! サイトにアクセスすると、およそ2000種類を超えるオシャレなWebデザインの一覧を見ることができます。 これらのデザインは、「Dribbble」などから抽出されているのですが、ランダムに選ばれているのではなく、人の手によって「最もイケてる」と思われるデザインだけをキュレーションしているのが特徴です。 さらに、ユニークなのは画面左側にズラッと並んでいるカテゴリ! 2016年2月29日現在で、なんと117カテゴリに分けられているので、かなり細かい絞り込み検索ができるでしょう。 ほんの一部

    2000種超えのWebデザインを横断検索できる「Collect UI」を使ってみた! : うえぶはっく
  • Icon Animations Powered by mo.js | Codrops

    Various icon animations made with mo.js, a powerful motion graphics library by Oleg Solomka. Inspiration comes from the Dribbble shot “Like Animation” by Daryl Ginn. Maybe you’ve already stumbled across mo.js, a very powerful motion graphics library for the web made by Oleg Solomka. You can do tons of awesome things with it and today we’d like to share our take on some icon animations using the li

    Icon Animations Powered by mo.js | Codrops
    yamadar
    yamadar 2016/03/01
    mo.jsを使ってアニメーションさせたアイコン
  • UIセンスが壊滅的なエンジニアがそれっぽいwebアプリを作るために使った無料UIライブラリをまとめておく - Qiita

    仕事の傍ら、暇つぶしとかでwebアプリを構築したりするわけですが、どうにもUIセンスがなさすぎて、カッコイイサイトとかを参考に真似したりしても、なぜか自分でアレンジするととてつもなくダサくなる、ということを繰り返してきました。 で、もうこうなったら自分で考えずに、すべてライブラリに頼ろう!と思ってwebサイトを構築した時に使ったcssやjsのフレームワーク、ライブラリなんかを、簡単なコメント添えてまとめておこうと思います。 css自分で一切書かなくても、このぐらいのUIまではいけそうです。 フレームワーク Bootstrap ベースはtwitter bootstrapの恩恵に授かります。 GoogleMaterialDesignLiteも見た目はかっこいいんですが、色々コンポーネントがたりなかったりして、結局いくらか自分でデザインしないとどうにもならなくなる印象です。 jQuery 今更書

    UIセンスが壊滅的なエンジニアがそれっぽいwebアプリを作るために使った無料UIライブラリをまとめておく - Qiita
  • ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
  • Devices — Facebook Design Resources

    Designing for many platforms Facebook supports a diverse audience around the world and an equally diverse set of devices. To emphasize that in our design mocks, we redrew a range of devices to show the global diversity of the people using our products. Each device comes with a bitmap of the device (with and without shadows) and the original Sketch file for that device. We'll release different cate

    Devices — Facebook Design Resources
    yamadar
    yamadar 2016/02/02
    FacebookがiPhoneなどのガジェットの画像素材を無料配布してる
  • No UIはデザインを進化させる新しい概念

    Next Big ThingsとTech Crunchでも記事が書かれた「No UI」という概念が最近話題になっている気がします。 No UIとは「スクリーン(UI)の情報量や設計に頼らず、目的を達成すること」を軸にしたサービス体験を意味します。 流れの主流としては、テキストメッセージを使ったものが多いです。Operatorというショッピングサービスは、商品の検索機能や、オススメの商品が並ぶトップページ、カテゴリ別のナビゲーションなどは全くありません。 ”オペレーターに”テキストメッセージで自分が求める商品の特徴を送ることで、その要件に合ったものを返信して教えてくれるというものです。 スクリーンで四苦八苦するデザイナーの苦労Operatorのようなサービスの場合、ユーザーの要望を臨機応変に対応できるのでスクリーン上の複雑なケースを意識したデザイン設計が要りません。 が、現在、UIに関わるデ

    No UIはデザインを進化させる新しい概念
    yamadar
    yamadar 2015/12/02
    サンプルがわかりやすい。
  • Sagakeen(サガケーン) - 佐賀県

    4対4でインクを撃ちあい、ナワバリを競いあうWii U専用アクションシューティングゲーム。それが「スプラトゥーン」なのだ!

    Sagakeen(サガケーン) - 佐賀県
  • [JS]このアイデアは面白い!セレクトボックスの選択肢をすぐに選択できるようにするスクリプト -Quick[select]

    フォームのセレクトボックスは多くの選択肢を配置できる便利な要素ですが、他のフォームと操作性が異なるため一連の流れで入力しにくいのが弱点です。 セレクトボックスの操作性を改善し、デザインも簡単に変更できるスクリプトを紹介します。Quickの名前の通り、すぐに選択できるようになります。 通常のセレクトボックスの挙動 セレクトボックスは、タップとクリックの2つのオペレーションがあります。これはフォームの他の要素と操作性が異なり、ユーザーをフォームの一連の流れから外してしまうものです。 そこで注目すべき点は、通常セレクトボックスの選択肢の中にはより多く選択されるものがあることです。上記の例だと、「はい」「いいえ」が多いでしょう。 Quick[select]は、セレクトボックスの選択肢の中から、いくつかを表示させておくことができます。

    [JS]このアイデアは面白い!セレクトボックスの選択肢をすぐに選択できるようにするスクリプト -Quick[select]
  • 遅延読み込み用のぼやけた画像

    Mediumでとある記事を高速にスクロールして読んでいたら、さりげなく画像を遅延読み込みしていることを知った。読み込み発火のタイミングがうまいのかあまり遅延読み込みの存在を感じさせないのもすごいと思ったが、プレースホルダー画像の実装方法が良さそうだった。単純に元の画像を幅30px程度まで小さくしてそれをブラウザーにリサイズさせることでぼやけた画像をプレースホルダーとして表示しているだけだが、十分に機能していそうで目から鱗だった。 画像の遅延読み込みはなかなか曲者で、読み込むタイミングやプレースホルダーとしている画像が悪いと大きくユーザーにストレスを与える。プレースホルダーでよく使われるローディング画像は読み込み中のインジケーターではあるが、同時に何か遅いことをやっていますというネガティブな印象も与えてしまう。ユーザーはローディング画像を見るとスクロールを止めなくてはならないのかと感じること

  • 10歳のこどもから学んだユーザビリティ向上のポイント

    2015年9月8日 ユーザビリティ 夏休みの後半、原稿用紙15枚の自由研究に苦しめられていた姪っ子(10歳)を「楽しそうだな〜」と手伝っていました。そんな時「私も久しぶりに自由研究したい!」と思い、ちびっこが家にいることですし、最近のちびっこがWebサイトをどのように利用しているのか研究してみることにしました。という事で今回の記事は自由研究風に進めようと思います! ↑私が10年以上利用している会計ソフト! 調べたいこと 認知度の高いWebサイトを、小学生がどのように利用するのかを観察し、こども向けのWebサイトに必要なもの、Webサイトを制作するうえで注意すべき点を調べます。 予想 難しい漢字は読めないので読みとばす イラストやキャラクターなど、可愛いものに興味を示す 明るい色彩のサイトに興味を示す まだ習っていない漢字や難しい表現は読み飛ばし、自分の理解できるもののみにフォーカスしていく

    10歳のこどもから学んだユーザビリティ向上のポイント
  • ReadMe

    Developer hubs that meet your users where they areReadMe transforms your API docs into interactive hubs that help developers succeed.

    ReadMe
    yamadar
    yamadar 2015/08/31
    APIを公開するサービス。Concurなどが使っている。
  • 【まとめ】デザインが素敵!使い易さに特化してる!的なWebサイト10選 - Love&Peace

    はじめに 私が直感で”素敵だなぁ”と思ったWebサイトをご紹介します。日々様々な情報を得る為にホームページを見に行く訳ですが、その中でも見た目のデザインや使いやすさに特化したWebページを自分なりにまとめてみました。 目次 はじめに 横浜中華街オフィシャルサイト 転職サイトGreen(グリーン) ワーナーミュージック・ジャパン 北欧、暮らしの道具箱 通販ベルメゾン ミニラボ(minilabo) 箱庭 haconiwa ドラおじさんの薬剤師・転職相談室 feve casa オンライン住宅雑誌 ZERO-CUBE MALIBU×カリフォルニア工務店のコラボハウス 写真・イラスト・動画などの素材屋「123R」 さいごに 横浜中華街オフィシャルサイト www.chinatown.or.jp 横浜中華街で「美味しい飲店はないかなー?」と探していた時に出会ったのがこちらのWebサイトです。全体の雰囲

    【まとめ】デザインが素敵!使い易さに特化してる!的なWebサイト10選 - Love&Peace
    yamadar
    yamadar 2015/07/12
    最近気付いたのだと、kayakのタブレット表示が中々良かったな。
  • SVGアニメーションの現状 | POSTD

    SVGScalabe Vector Graphics)の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の(そして未来の)SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL(Syn

    SVGアニメーションの現状 | POSTD
  • アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点(スライド付) | ベイジの社長ブログ

    スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。(以降、両者をガイドラインと略します) スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14%しかなく(comScore調査/2014)、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは

    アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点(スライド付) | ベイジの社長ブログ
  • 建築史に隠されたウェブデザインの未来

    ウェブデザインの進化の過程を考えるとき、西洋建築史はとても参考になります。美術の形として、両者は同じ項目で定義することができます。 人が集まる場所として機能する実用的に作られている技術の進歩に大きく左右される実用的だが、間違いなくアートでもあるこのような制約があるなかで、両者の進化の過程はとても似ています。どちらも同じように過去の作品をもとに、その上に新しいものを築いています。もしウェブデザインの未来が知りたければ、建築家が辿った道を見てみればいいのです。

    建築史に隠されたウェブデザインの未来
    yamadar
    yamadar 2015/06/27
    目の付け所が面白い。