タグ

関連タグで絞り込む (37)

タグの絞り込みを解除

UIに関するtsuki-rsのブックマーク (91)

  • UIの名称まとめ 〜よく見かけるけどあれなんていう名前？〜｜Nviveto

    コンポーネントを作るときや開発チーム、クライアントと話をするときに名称が一致していないと何の話をしているんだか、、？となってしまします。 忘れっぽい自分は毎回名前をうろ覚えでつけてしまっていますが、戒めとして記事を書くことでしっかり覚えていきたいと思います。 ※色んなところから引っ張ってきているので正式名称ではない（複数呼び名がある）ものがあるかもしれませんが、ご了承ください。 UIパーツ見づらくてすみませんが、エクセルのシートを画像にしたものを貼り付けていきます Onscreen keyboards画面上にキーボードの図形や文字を表示し、マウスあるいはペンなどのポインティングデバイスや、指先によるタッチ、あるいは十字キーなどで各キーを指定して文字入力を行うもの Onscreen keyboards (iOS) SegmentedControliOS独自のUIで水平方向に配置された複数のボ

    UIの名称まとめ 〜よく見かけるけどあれなんていう名前？〜｜Nviveto

  • JSを一切使わないCSSでできたドロップダウンなどのUI実装「CSSUI」:phpspot開発日誌

    CSSUI - Pure CSS interactive components JSを一切使わないCSSでできたドロップダウンなどのUI実装「CSSUI」 そこまでJSを使わない必要があるのか、と逆に思ってしまいますが、リッチなUIがCSSのみで作れてしまいます

    tsuki-rs
    tsuki-rs 2022/02/24
    PHPSPOT開発日誌なつかしいｗｗ昔めっちゃ見てた。
    リンク

  • Microsoft、手書きのUIスケッチをHTMLに変換する「Sketch2Code」を発表


    Microsoft、手書きのUIスケッチをHTMLに変換する﹁Sketch2Code﹂を発表‥AIで手書きの図形と文字を認識 Microsoftは、手書きでスケッチしたUI画面をHTMLコードに自動変換するWebベースソリューション﹁Sketch2Code﹂を発表した。 Microsoftは2018年8月30日︵米国時間︶、ホワイトボードなどに手書きでスケッチしたユーザーインタフェース︵UI︶画面を、AI︵人工知能︶を利用して、HTMLコードに変換するWebベースソリューション﹁Sketch2Code﹂を発表した。 Microsoftによれば、UIのデザインプロセスには無駄が多いという。通常は、まずアイデアレベルのスケッチをホワイトボードに描き、数人で検討してから写真に撮影し、HTMLコードを書き下す。これでは手間ばかりかかり、すぐにアイデアを形にできない。 画像認識技術とAIを組み合わせ
    Microsoft、手書きのUIスケッチをHTMLに変換する「Sketch2Code」を発表
    tsuki-rs
    tsuki-rs 2018/09/05
    MSに魂など売らぬ！！
    リンク

  • デザイナーに青色が選ばれる７つの理由


    この画像によってすでに想像がつくかもしれませんが、この記事は青という色についてのものです。UIデザインにおいて、青がもっとも重要な色の1つであることは間違いありません。そして、もっとも頻繁に使われる色でもあります。 自分のスマートフォンアプリのアイコンをちょっと見てみてください。FacebookやTwitter、Shazam、Safariなど、多くのアプリが青色なのがわかるでしょう。 なぜ青色なのか？ 青色を使用する理由はたくさんありますが、ここでいくつかリストアップします。 人々に好かれている 調査によって、大多数の人が好みの色に青色を挙げていることがわかります。青は世界的に、もっとも安全な色だと考えられています。
    デザイナーに青色が選ばれる７つの理由
    tsuki-rs
    tsuki-rs 2017/12/15
    コンセプトによるでしょ。
    リンク

  • 意外と難しいボタンのお話


    ボタン？それともリンク？ 昨年からデザインシステムをテーマにしたセミナーやワークショップを何度か開催していますが、ワークショップに参加した方から﹁ボタンは難しい﹂という感想をいただくことがあります。ボタンの見た目を作ることも奥深いですが、もっと難しいのが、いつ、どこで、どのように使うかを共有すること。考え始めると﹁そもそもボタンとは何か？﹂といった疑問が浮かび上がります。 フォーム要素と一緒にあれば、ボタンだと断言しやすいです。HTML であればマークアップも <button> になりますし、アプリでも　iOS であれば UIButton を使えば良いと判断できるはずです。 文章のあとに﹁今すぐ始める﹂というラベルが付いた要素があるとしたら、これはボタンと呼べるでしょうか。角丸のような装飾、注目されやすい色が使われているので、ボタンと見なすことができます。見た目はボタンっぽいですが、果たし
    意外と難しいボタンのお話

  • 50代以降をターゲットにしたWebサイトのUI事例 | hi-posi Front-End blog


    若者向けではなく、主に50代以降をターゲットにしたサイト︵スマートフォン向けサイト︶のUIの好事例ついてまとめてみました。 ひとくくりに﹁50代﹂といってもスマホを使いこないしている方も多いと思うので、以下のような人物像で考えました。 ・50代後半の女性 ・スマホは持っているけど通話、家族とのメールやLINE利用がメイン ・インターネット通販では商品を購入したことがない。 ・お気に入り登録しているサイト以外はあまり見ない ・小さい文字は読みづらい、老眼。 事例1‥フォントサイズは大きめ・テキストリンクには下線を フォントサイズは通常よりも大きめにしておくと老眼の方に読みやすくなります。サイトによっては、テキストのサイズを﹁大・中・小﹂で切り替える機能がある場合もありますが、そもそもこの切り替えボタンに気づいてもらえない可能性もあるので、サイトのターゲットが50代以降と決まっている
    50代以降をターゲットにしたWebサイトのUI事例 | hi-posi Front-End blog

  • 使いやすいフォームデザインのための新しい４つのルール


    大規模なECサイトにおけるUXチームのリードであり、レンセラー工科大学でヒューマン・コンピューター・インタラクションの修士号を取得しています。Webサイト、Twitter。 私たちは日々、オンライン上でフォームを使っています。購入を完了するため、メーリングリストやソーシャルネットワークなどに登録するため、ディスカッションに参加するため、美味しそうなランチの写真を投稿するためなど、フォームを使う場面はさまざまです。オンラインで情報を入力するために、フォームは必要不可欠と言っても過言ではありません。 しかし、長きに渡ってフォームの改善はあまり見られませんでした。﹁使える﹂ものではあったものの、﹁使いやすい﹂ものには至らなかったのです。 近年では新しいテクニックを正しく使うことで、デザイナーはより早く、簡単で、生産性のあるフォームの作成が可能になっています。 フォームは短ければ良いのか ﹁フォー
    使いやすいフォームデザインのための新しい４つのルール
    tsuki-rs
    tsuki-rs 2017/03/28
    勉強になる
    リンク

  • 月間1000万PVを支える「UIの言葉選び」のためのチェックリスト - クックパッド開発者ブログ


    クックパッド ダイエット事業室の田中です。昨年5月からスタートした﹁クックパッド ダイエット﹂にリリース当初から携わり、デザインやダイエットニュースの編集を担当しています。 現在クックパッドダイエットのサイトは月間1000万ページビューを超え、﹁ダイエットといえば﹃クックパッド ダイエット﹄﹂と言われるような世界を目指して、日々、運用・改善に取り組んでいます。 今回紹介するのは、クックパッドダイエットのUIをデザインする時の﹁UIの言葉選び﹂の具体的なチェックリストです。 最高のレイアウトでも言葉がイマイチだと台無しに みなさんは、UIの中の﹁文言︵言葉︶﹂をどのようなプロセスで決定していますか？ UIのレイアウトや遷移の方法について熟考する姿勢を持っている方は多いと思うのですが、文言の検証方法については確固たる視点を持っていない方もいらっしゃるのではないかと思います。 UIで王道のレイア
    月間1000万PVを支える「UIの言葉選び」のためのチェックリスト - クックパッド開発者ブログ
    tsuki-rs
    tsuki-rs 2015/03/05
    リンク

  • Googleのマテリアルデザインで使える色が並び、クリック一発でカラーコードのコピーも可能な「Material UI Colors」


    Googleが提供しているモバイルOS﹁Android﹂の最新バージョン﹁Android - 5.0 Lollipop﹂にも採用されている、新しいUX体系が﹁マテリアルデザイン﹂です。マテリアルデザインの発表後、Googleは自社サービスに続々とマテリアルデザインを採用しており、サードパーティ製のアプリなどでもこれを採用したものが次々と登場しています。そんなマテリアルデザインでは使用可能な色が指定されているのですが、これで使えるカラーを並べたカラーパレットを表示してくれ、使用したいカラーをクリックすればそのカラーコードが一発でコピーできてしまうというウェブサイトが﹁Material UIColors﹂です。 Material UI| Material Design | Material UIColors http://www.materialui.co/ ﹁Material UIC
    Googleのマテリアルデザインで使える色が並び、クリック一発でカラーコードのコピーも可能な「Material UI Colors」

  • Prott - Prototyping tool for Web iOS Android apps

    コードを書かずに、本物のようなアプリを再現できる 簡単３ステップで、動くプロトタイプをすぐに作成できます。Web・iOS・Androidはもちろん、カスタムサイズでもお作りいただけます。 プロトタイプ作成機能 ワイヤーフレーム機能

    Prott - Prototyping tool for Web iOS Android apps

  • Yahoo!ニュースの見出し行間「5ピクセルの差」に見えた光～ヒートマップでUI改善


    社長の宮坂がゲスト出演した、11月27日放送のテレビ東京系﹁カンブリア宮殿﹂。Yahoo!ニュースの裏側にも触れられており、ご覧になった方もいらっしゃるかもしれません。 ︵放送バックナンバー‥爆走する国民的サイト！これがネットの底力だ！－ テレビ東京︶ 公式ブログ新コーナー﹁news HACK﹂ではこれまで、Yahoo!ニュースにおけるスマホ利用の成長などをお伝えしてきましたが、今回は、同番組の中でも登場したYahoo!ニュースのUI改善事例について、番組で触れられなかった部分も加えて詳しくお伝えしたいと思います。 これからご紹介するのは、スマホブラウザ版Yahoo! JAPANトップページのA/Bテスト事例︵※Yahoo!ニュースのアプリ版との違いなどについては、こちらの記事をご参照ください︶。 テスト結果は現在のスマホ版トップページに使用されているものと同様ですが、まず具体的な説明に入
    Yahoo!ニュースの見出し行間「5ピクセルの差」に見えた光～ヒートマップでUI改善
    tsuki-rs
    tsuki-rs 2014/12/17
    行間大事だよね
    リンク

  • こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修

    シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される

    tsuki-rs
    tsuki-rs 2014/12/16
    これは参考にしておこう。
    リンク

  • UIデザインの腕が上がるPhotoshopのチュートリアルのまとめ

    UIデザイン用の最適なPhotoshopの環境設定方法から、ブラーやサークルを使ったエレメント、フラットや縦長やレトロスタイルのレイアウト、ページのアクセントになるエレメントの作り方、ディテールの作り込み方など、ユーザインターフェイスをPhotoshopで作成する際に勉強になるチュートリアルを紹介します。

    UIデザインの腕が上がるPhotoshopのチュートリアルのまとめ

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

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

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

  • 【グロースハック永久保存版！！】20のケーススタディから学ぶ、必ず押さえておきたいUI/UX改善の7つのポイント ｜ GROWTH HACK BLOG（グロースハックブログ） by KAIZEN platform


    ︻グロースハック永久保存版！！︼20のケーススタディから学ぶ、必ず押さえておきたいUI/UX改善の7つのポイント ﹃A/BテストやサイトのUI/UX改善を実施するにあたり、どのポイントから、どうやって改善案を考えて行けばよいのか﹄ABテストのプランニングをお手伝いしている中で、現場担当者の方々からこのような相談を良く受ける事があります。 今回は、こういった声に応えるべく、国内外のイケてるWebサービス、および弊社サービスであるplanBCDクライアント様の事例からピックアップした、“20のケーススタディ”を用いて、必ず押さえておきたいUI/UXの7つのポイントをご紹介していきます。7つのチェックポイント ファーストビュー アクションボタン ページ遷移 / 入力項目 キャッチコピー キーワード コンテンツ レイアウト 今回は上記の7つの改善ポイントを紹介していきます。 ﹁A/Bテストを実
    【グロースハック永久保存版！！】20のケーススタディから学ぶ、必ず押さえておきたいUI/UX改善の7つのポイント ｜ GROWTH HACK BLOG（グロースハックブログ） by KAIZEN platform
    tsuki-rs
    tsuki-rs 2014/06/27
    リンク

  • 新着記事

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

    新着記事
    tsuki-rs
    tsuki-rs 2014/02/21
    リンク

  • UI/UXが学べる神スライド7選 | Find Job ! Startup


    FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
    UI/UXが学べる神スライド7選 | Find Job ! Startup
    tsuki-rs
    tsuki-rs 2013/09/05
    リンク

  • 累計32種！UIが優れたiPhoneアプリの部分デザイン（ヘッダ・フッタ編）


    FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
    累計32種！UIが優れたiPhoneアプリの部分デザイン（ヘッダ・フッタ編）

  • UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ


    こんにちは。 スマートフォンサイトやアプリにおいて、重要なことの一つであるUI︵ユーザーインターフェース︶。 また、PC向けサイトでも、よりユーザー目線に立ったUI設計が必要です。 UI設計ひとつで、大きくコンバージョンが上がったり、クリック率の増加が見込めるので、入念に考えなければなりません。 今回は、UIを徹底的に考えるために、UIについて様々な視点から書かれたスライドをご紹介したいと思います。
    UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ
    tsuki-rs
    tsuki-rs 2013/07/22
    リンク

  • FINDJOB!終了のお知らせ | FINDJOB!


    FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
    FINDJOB!終了のお知らせ | FINDJOB!
  • 1 2 3 4 5 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.