サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
はじめに 私は事業会社（楽天→スタートアップ）でUXライティングを専門としてプロダクトの開発に携わっています。しかし、事業会社で私のような専任のUXライターやコピーライターを雇用している企業は決して多くありません。 多くの場合、UXデザイナーやUIデザイナー、エンジニア、プロダクトマネージャー、マーケターなど、UXライティングに比較的近い立場の方が、自分自身でUIテキストを書かなければならない、というのが実情だと思います。 そうした状況で試行錯誤されている方に向けて、自分に何かできることがあるのではないかと思い、このnoteを書くことに決めましたら。私がUXライティングの知見をしっかりと整理して伝えれば、役に立つのかもしれないと。 このnoteでは、私なりの実践的なUXライティングの方法論を言語化します。あくまで私が実践しているものなので、考え方もやり方も違うし、こんなのUXライティングじ
先日Cybozu Frontend Monthly #1 にてb4h0_c4tさんの「HTMHell special: close buttons」のお話を聴いていた中で、一つ引っかかるものがあった。 「そもそも✗(バツ)は閉じるって意味じゃないから！」 確かに。 現代、様々なUIを触ってきた中でなぜ ✕ を閉じるものと捉えているのだろうと不思議に思った。 ✕ではなくx(エックス)で表現されることも多々あるようで、こんな名言もある。 ✕とはなんなんだろう ではなぜこのクロスの記号(✕)が閉じるの意味を持ってしまったのか考えてみる。 一旦✕を見て思い出すものを上げてみようと思う。 ・◯と✕(日本の正誤表記) ・✓と✕(海外...主に欧米の正誤表記) ・プレステのコントローラー ・海外ゲームだと決定が✕、キャンセルが◯ ・宝の地図なんかで在り処を記す ・上記のツイートのようにx(エックス)とし
UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しようGoogleChrome（デスクトッ
ビスケットは，開発して新しい機能を追加したときなど，必ず子どもたちが使っている様子を自分目で見てどんな風に使っているかを見てきます（最近はその暇が無くて他人に任せていたりして，かなりまずいんですが）．3年前くらいの面白いエピソードをご紹介しましょう． ちょうど，Androidタブレットで動くビスケットを開発していて（これはまた一般には配布していません．実験環境だけです），それがどのように子どもたちに使われるか見に行きました．僕としても指で直接操作するタブレットのUIの開発は初めてで．実は，マウスとタッチペンの操作は結構似ています．どちらも，非常に小さいエリアを結構正確にポイントできて，ドラッグもできますから．どちらかというと，ペンの方がドラッグが得意でしたね．小さい子はマウスクリックが全然出来ないとか（ボタンを押すときに指先だけ押すということができないので，手を握ってしまって，その結果マウ
読む：3分 試す：15分 はじめまして、4月にアシアルへ入社した噂の好青年こと高橋です。 今日はjQueryUIを使ったオシャンティなソートを紹介します。 まずはデモをご覧ください。 「こんなメンド・・・大変そうなUIできるかなぁ？」 心配ご無用！jQueryさんはやってくれます！！ まずは必要なソースを準備します。 下記からそれぞれ最新版をダンロードしてください。 http://jquery.com/download/ （24/7/19時点で ver 1.7.2） http://jqueryui.com/download （24/7/19時点で ver 1.8.21） ファイル構造・読み込み等は割愛します。 今回覚えるべき、たったひとつのシンプルなキーワード 「sortable」 まずはHTMLいきます <table class="table table-striped table-b
Requires (Dev) dg/bypass-finals: ^1.5.1doctrine/collections: ^1.8 || ^2.0doctrine/dbal: ^3.5 || ^4.0doctrine/mongodb-odm: ^2.4doctrine/orm: ^2.14 || ^3.0doctrine/phpcr-odm: ^1.7 || ^2.0jackalope/jackalope-doctrine-dbal: ^1.9 || ^2.0phpstan/extension-installer: ^1.4phpstan/phpstan: 2.0.3phpstan/phpstan-phpunit: 2.0.1phpunit/phpunit: 10.5.39rector/rector: 2.0.3ruflin/elastica: ^7.3 || ^8.0solarium/s
README A paginator that makesit easy andsimple Name: Paginator License: MIT Author: Mardix Version : 2.x.x Requirements:PHP >= 5.4 About Paginator Paginator is asimple class that allows you tocreate pagination for your application.It doesn't require anydatabase connection.It only requires the total ofitems found and from thereit willcreate a pagination that can be export toHTML or Arra
About Add datepicker picker to field or to any other element. can be used as a component formats: dd, d, mm, m, yyyy, yy separators: -, /, . Download Changelog 12/3/2013 Fixed bug where date selection from previous and next year was wrong Fixed bug where a variable was polluting the namespace 10/3/2013 Changed so the value will not be set unless the user chooses a date 16/2/2013 Fixedit to work
bootstrap-datepicker¶Bootstrap-datepicker provides a flexible datepicker widget in theBootstrap style. Requirements¶Bootstrap 2.0.4+ jQuery 1.7.1+ These are the specific versionsbootstrap-datepicker is tested against (js files) and built against (css files). Use other versions at your own risk. Dependencies¶ Requiresbootstrap’s dropdown component (dropdowns.less) for some styles, and bootstra
bootstrap-datepicker sandbox αlphα Use the form below totweak the options; results and code appear in realtime below. As you change options, your address bar will update to reflect the current configuration (requires a browser with history.replaceState support). This url can be used to link to the sandbox with the given configuration pre-loaded. Download 1.9.0 Download Development (master) Type:
This project is registered as a Bower package, and can be insalled with the following command: $ bower installbootstrap-timepicker You can also download our latest release (and any previous release) here. <!DOCTYPEhtml> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" href="css/bootstrap.min.css" /> <link type="text/css" href="css/bootstra
今回はフォームで使用するSelectタグを拡張するJSを試してみる https://github.com/ivaynberg/select2 http://ivaynberg.github.com/select2/ サポートしているブラウザ IE 7+Chrome 8+ Firefox 3.5+ Safari 3+ Opera 10.6+ ライセンス Apache License と GPL License のデュアルライセンス 使用方法 select2.cssとselect2.jsを読み込む必要がある ■ 通常のセレクトHTML<select id="e1" class="populate placeholder"> <option value=""></option> <option value="北海道">北海道</option> <option value="青森県">青森県<
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
