こういう本を待っていた！ WebのUXを改善するライティングに特化された解説書 -Webコピーライティングの新常識「ザ・マイクロコピー」
マイクロコピーとは、Webサイトやスマホアプリのボタンのラベル、ボタンやフォームに添えるテキスト、エラーメッセージなどのUIデザインに使用される短いテキストのことです。優れたマイクロコピーを使用することで、入力ミスが少なくなったり、ボタンのクリック率があがったり、さまざまな効果を得られます。 思わずクリックしたくなるタイトル、迷わずクリックできるボタンなど見かけませんか？ ボタンに書かれているラベル、ボタンに添えられたテキスト、これらに使われる文言はほんの少し工夫を加えるだけで、劇的な効果を発揮します。 WebサイトやスマホアプリのUIで使用する文言、ライティングのテクニックを身につけたい人にお勧めします。本書は「ザ・マイクロコピー（紹介記事）」の第2版で、内容は大幅にアップデートされています。 UIデザインで使用する言葉、ボタン、フォーム、ナビゲーションに使用する文言など、言葉の魅力でU
2021年、最も注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 今年公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2021 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する 2. 4ptベースライン＋8ptグリッド＝調和のとれた縦のリズム 3. フォントで階層を示すにはウェイト、サイズ、カラーを使用する 4. ホワイトスペースはたっぷり使用してください 5. アイコンをグリッドシステムで使用する際の注意点 6. アクションを実行
よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ
Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無し フレームワークは必要無し ピュアCSSで実装、CSS
2017年に注目されたインターフェイスデザインのトレンドを解説
2017年はインターフェイスデザインにとって多様性の一年でした。中でもユーザーフレンドリーに注目された年と言えるでしょう。 2018年これからのWebサイト、スマホアプリのデザインで押さえておきたいインターフェイスデザインのトレンドを紹介します。 Review of Popular Interface Design Trends in 2017 by Marina Yalanska 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 機能的なミニマリズム ブルータリズム 画像に統合されたタイポグラフィ アニメーションするヒーローイメージ オリジナルのイラスト 枠線がないレイアウト さまざまなインターフェースのアニメーション UIに優しいブランディング 単色のUI 進化した暗い背景の使い方 文字を読ませるためのスペース コントラストを
この春、デザインやファッションに使いたい10色 -2013年春のトレンドカラー
まだまだ寒い日が続きますが、日も少しずつ長くなり、春の気配を感じますね。 pantoneがセレクションした2013年春のトレンドカラーを紹介します。 Spring 2013 Fashion Color Trends - Pantone Fashion Color Report この春、グリーンのトレンドは否定できないでしょう。 グリーンは他のすべてのカラーの前景でも背景でも完璧に役割を果たします。今年のトレンドカラーでもあるEmeraldは、グリーンの中でも洗練された鮮やかでクリアです。Grayed Jadeはグレーを少しいれた色合いで静か・休息のムードを引き起こします。Tender Shootsは柔らかい新芽の色合いで春の到来をイメージさせ、さわやかで朗らかです。
優れたユーザインタフェースを設計する際に考慮する8つのポイント
ユーザーにとって有益なユーザインタフェースを設計する際に考慮する8つのポイントをUsability Postから紹介します。 8 Characteristics Of Successful User Interfaces 以下、その意訳です。 ユーザインターフェイスの設計時に、考慮する8つのポイントを紹介します。 Clear Concise Familiar Responsive Consistent Attractive Efficient Forgiving To conclude… 1. Clear 明快 明快であるというのは、最も重量な要素です。 ユーザインターフェイスデザインの目的は、ユーザーに意味と機能を伝え、利用するアプリケーションと相互につきあえるようにすることです。そのアプリケーションがどのように機能するのか、どこに進むべきか理解することができない時は、ユーザーは困惑しが
[JS]オルトを利用して、画像にキャプションをかっこよく表示するスクリプト -Captify
画像のオルトを利用して、画像の上にオーバーレイでキャプションを表示するスクリプト「Captify」を紹介します。 Captify demo デモでは、画像にマウスオーバーすると、下側からキャプションがスライドしてオーバーレイで表示されます。 オプションでは、キャプションの表示位置（上・下）、表示のスピード、不透明度、表示方法（フェード・スライド・常設）、クラス名などが変更できます。 キャプションはデザインを適用したものを表示することも可能で、下記のようにdiv要素を使用することもできます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
