CSSで作るシンプルな矢印アイコン29個 | 株式会社プレスマン
最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。 CSSでデザインの実装を行う場合、｢カスタマイズやメンテナンスが容易」｢レスポンシブWebデザインとも相性が良い」｢画像を読み込まないのでモバイルユーザーにも優しい」｢Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。 今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。 目次： 共通HTML＆CSS シンプルな矢印アイコン シンプルな矢印アイコン シンプルな矢印アイコン（大） シンプルな太い矢印アイコン シンプルな太い矢印アイコン（大） 斜めの矢印アイコン 右上向きの矢印アイコン 右上向きの矢印アイコン（大） 右下向きの矢印アイコン 右下向きの矢印アイコン
UI考 – ざっと見る、じっと見る | fladdict
英文の速読術には、スキミング・スキャニングと呼ばれる技法がある。 スキミングとは「ざっと一覧して、全体を把握する」こと。各章のタイトルや、パラグラフの一文目、最終のまとめなど、要所要所だけをかいつまんでいく読み方だ。 一方、スキャニングは「特定の部分を熟読する」こと。こちらは一転して、一単語ずつ精査していく読み方である。 まず最初に全体をざっと見て（スキミング）、自分に必要な内容があるかをチェックする。その後に、必要な部分だけを選別してじっと見て（スキャニング）いく。英文速読では、この２つの読み方をペアにして扱う。つまり速読術とは全文を素早く読むことではない。細部を無視して、要点だけを拾い上げていく技法なのである。 この英文速読術の技法、スキミングとスキャニングは、画面の情報設計の大きなヒントとなる。情報を効率良く読むテクニックが確立されているのなら、それをロジック化すればよい。ロジックを
A/Bテストとユーザビリティテストの使い分け
A/Bテストは、用意した複数のデザインのどちらの成果指標がよりよいか、という結果を定量的に比較検討するための手法です。いくつかのデザインの選択肢があった場合に実際にユーザーに利用してもらうことで、どのデザインが最も数値目標達成率が高いかを把握するのには有効ですが、なぜその結果になったのか、という理由を把握することはできません。デザイナーの発想の域を越えることはできず、変更すべきデザイン要素が別のものだったとしても気づくことができません（例：真の問題は、色ではなく配置だった）。 一方、ユーザビリティテストは、ユーザーの利用状況を観察することで、目的達成を妨げる問題など、定性的な洞察を得るための定性的な手法です。まだ開発途中である場合や、リリースしたあとに、ターゲットとしたユーザーがどのように思考し行動するかを把握するのに有効ですが、定量的な指標による評価にはあまり向きません（それをしようとす
ユーザ体験を考えるイベント「UX JAM in SENDAI」に参加してきました
前置き。UXって何か イベント中でも話題にあがってた通り認識はそれぞれですが、とりあえず「ユーザ体験」の事だと思っています。 良いUXは、何かをしていてストレスなく目的達成できることだったり、その行為自体が快感だったりすること、と言い換える事もできそうです。 UXといえば、UIを改悪する事でUXを改善した話が印象的です。 米国ヒューストン空港では、以前より手荷物引渡所(Baggage Claim)の待ち時間が長いという顧客からのクレームに晒されてきた。空港は増え続ける不平に対処するために、スタッフを増員することにより、平均待ち時間を8分までに短縮させることに成功したが、それでも苦情の数は減らなかった。 そこで、空港がとった方法は、「手荷物引渡所までの距離を延ばし、客に空港内で長い距離を歩かせるようにした」というものだ。 UIの改悪がUXを改善させる場合 – A Successful Fai
CSSの:nth-childと:nth-last-child擬似クラスの使用例 - NxWorld
今さらな内容になりますが、未対応だったIEのサポート終了によって今後ますます使う場面は増えるでしょうし、恥ずかしながら指定方法によっては一瞬どう記述するかど忘れしちゃうことがたまにあるので備忘録も兼ねて。 CSSの擬似クラスにある:nth-childと:nth-last-childの使用例を自分が見たい時にすぐ確認できるようひと通りまとめました。 説明時に利用しているサンプルイメージやコードは、ul内に10個のli要素を記述してデフォルトで青いボックスが並んでいる見た目になるようCSSを指定しています。 それを:nth-childと:nth-last-childを使って指定されたものを赤いボックスに変化させており、実際のブラウザ表示を見たい場合はCodePenにデモをアップしておいたのでこちらをご覧ください。
【連載】インタラクションデザインとは？ ③ツール編
この記事は、インタラクションデザインをもっと学びたい人向けの連載です。UX Boothの記事を基にインタラクションデザインに関する様々な情報を全５回に分けてご紹介していきます。 ①基礎知識編｜②手法編｜③ツール編｜④著名人編｜⑤団体・書籍編 第３回はツールについてみていきます。 関連ツール インタラクションデザイナーは仕事に多種多様なツールを使います。インタラクションをナプキンにスケッチしていようと、クライアントにプロトタイプをプレゼンしていようと目的は同じで、会話によるコミュニケーションです。何にもまして、インタラクションデザイナーはうまくコミュニケートする必要があります。下のリストは会話を促進するのに使われるツールのサンプリングです。Webインターフェースは一般的にCSS/HTMLなどのフロントエンド技術で作られることを覚えておいてください。 Balsamiq Mockups Bals
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
20160115 とあるエンジニアから見たUX UXJAM in Sendai @chachaki
お金借りる即日！今すぐお金を借りるオススメの方法【2020年全国対象版】