これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
全てのデザイナーが知っておくべき10の法則 デザイン会社 ビートラックス: ブログ
デザインを行う際には、感覚ではなく複数のロジックを活用することで、より精度の高いプロダクトを創り出すことができる。 そのプロダクトを人間が利用する場合、ユーザーの視覚や行動心理学などをしっかりと理解し、活用すればデザイナーとしての能力が一段と高まるはず。 今回紹介するのは、複数あるデザインにおける法則のうち、ビートラックスのデザインチームでも頻繁に利用される代表的な10の法則。プロのデザイナーなら、これは押さえておきたい。 デザイナーなら知っておきたいデザインに関する基本の10法則ヤコブの法則ヒックの法則80/20の法則パーキンソンの法則フィッツの法則ミラーの法則テスラーの法則FBMモデルドハティのしきい値3対1の法則ヤコブの法則ユーザービリティーの父であるヤコブ・ニールセンが提唱する法則。一般的なユーザーは、アプリやプロダクト、Webサイトなどに、既存のものと同じような動作体験を望む。
数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWebディレクターの日常
なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです
ウェブの UI デザイン・ビジュアルデザインの基礎を学ぶのに役立った本まとめ（2015年・冬） - おいちゃんと呼ばれています
プライベートで新しいサイトを作りたいと思い、ここ最近はデザインに関する本を集中して読んでいた。何冊か是非薦めたいものが見つかったので紹介する。年末年始のお休みのお供にどうだろうか。 今回紹介する本の範囲 デザインといっても範囲が広いが、今回紹介するのは主に UI デザイン、ビジュアルデザインに関するもの。また主にウェブサイトのデザインに関するもの。 なお今回できるだけ新しい本を挙げるようにした。ほとんど今年（2015年）発売されたものばかり。理論的なところはずっと前から変わっていないのかもしれないが、何せウェブデザインの流れがはやいので、説明がしっかりされていることに加えて、取り上げられているサンプルが新しいものか否かが読むときのテンションに大きく影響すると感じたため。 伝えたいことを整理しよう 今回、紹介する本の順番について悩んだが、最初の本だけは迷わなかった。 なるほどデザイン〈目で見
UXを定量的に評価する7つの基準で客観的にサイトを改善していこう | 【レポート】Web担当者Forumミーティング 2015 Spring
オンラインビジネスの成功のためには、ユーザーの意見を客観的に多数取得し、その数値分析から具体的対策を練ることが重要だ。当たり前のことだが、これができているサイトは少ない。 UXはたびたび、Webサイトやサービスの「使い勝手」を指す「ユーザービリティ」と混同されがちだが、UXとは単なる使い勝手ではなく、商品・サービスを含めた体験そのものを表す。 UXの概念を示すものとしては、ピーター・モービル氏が提唱した「UXハニカム構造」が有名だ。しかし、キーワードは英語で言葉の意味がわかりづらく、内容を理解するのは少々難解である。 これを専門家以外にもわかりやすく、ゴメス・コンサルティングで編集したのが「サイト全体構造とUX7つの要素」だ。Webサイトの構造例と、それぞれに対応する7つのUX基準を記している。 1. アクセスのしやすさ「アクセスのしやすさ」とは、Webアクセシビリティやマルチデバイス対応
ファーストビュー盲信がもうしんどい
Updated 2015.04.27 / Published 2015.04.27 「ファーストビューが全て」のようなファーストビューについては盲信的な記事も多く、ファーストビュー云々のことで煙が立ち始めて、火がついてしまうと、上手く説得を試みようにも聞く耳をもってもらえず、困り果てるディレクター・デザイナーの方も多いのではないかと思います。ファーストビューはもちろん大事ですが、盲信的に傾倒することには疑問を感ぜざるを得ず、ファーストビュー問題はいつになっても考えものです。 ファーストビューのボヤは気付き難い ディレクターやデザイナーの方ならプロジェクトが進行していく中で、ファーストビューが問題になったことが一度や二度はありませんか。「いやいや、ファーストビューはちゃんとガチガチに予防線を張っているよ！」というディレクターの方も、きっと過去に苦い経験があるのではないでしょうか。 個人的にフ
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
Googleのマテリアルデザインで使える色が並び、クリック一発でカラーコードのコピーも可能な「Material UI Colors」
Googleが提供しているモバイルOS「Android」の最新バージョン「Android - 5.0 Lollipop」にも採用されている、新しいUX体系が「マテリアルデザイン」です。マテリアルデザインの発表後、Googleは自社サービスに続々とマテリアルデザインを採用しており、サードパーティ製のアプリなどでもこれを採用したものが次々と登場しています。そんなマテリアルデザインでは使用可能な色が指定されているのですが、これで使えるカラーを並べたカラーパレットを表示してくれ、使用したいカラーをクリックすればそのカラーコードが一発でコピーできてしまうというウェブサイトが「Material UI Colors」です。 Material UI | Material Design | Material UI Colors http://www.materialui.co/ 「Material UI C
入力フォームの「必須」「任意」のラベルは両方付けないとコンバージョン率が下がる
[レベル: 初〜中級] 入力フォームのフィールドには、入力が「必須」なのかまたは「任意」なのかのラベルを両方付けることが推奨されます。 どちらか片方だけだと入力途中の離脱の原因になります。 ECサイトのユーザービリティ調査と最適化を専門に扱っているBaymard Instituteが詳しく解説しています。 15の大手ECサイトのユーザビリティ調査と18の主要なモバイルサイトのユーザビリティ調査、そして自社による最新の大規模なアイトラッキングテストによって実証することができました。 この記事では、その解説の要点をまとめて紹介します。 片方だけの「必須」「任意」ラベルの問題点 入力が「必須」か「任意」かをどちらか片方のラベルだけで示すことにはさまざまな問題点があります。 必須か任意かを示さないのはいちばんよくない そのフィールドの入力が必須か任意かを示さないのはいちばんよくないスタイルです。
UI Tiles·Webサイト全体の画面遷移設計に使えるデザイン集 MOONGIFT
Webサイトを開発する際に使われるのが画面遷移を表現するフローチャートです。例えばコマースであればトップページから商品一覧、カテゴリ一覧や商品のピックアップなどの遷移が考えられます。 深くなってしまう場所がないか確認したり、ユーザ動線が正しく描けているかどうか確認するのに便利です。UI Tilesはそんなフローチャートを作成するのに便利なデザイン集です。 UI Tilesの使い方 UI TilesはPNGの他、PhotoshopやIllustrator形式でファイルが配布されています。 PNG版。画面のモックがたくさんあります。 それぞれ小さいながらも特徴があります。 動画プレーヤ、ポートフォリオページもあります。 PSDはデモも用意されています。 デザイン一覧。 Illustratorも同様です。 UI Tilesを使うと、これまでは単なる四角い枠に対してトップページなどとラベルを貼って
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
ヒートマップテストで判明した19点の超重要データ - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ 先日、アイトラッキングに関する記事を配信した所、予想以上の人気がありました。アイトラッキング以上に簡単に実施できるのが、マウスの導線を追うヒートマップテスト。様々なASPサービスも提供されており、低価格で導入できますよね。今回の記事では、数多くの公開事例や調査を通してヒートマップテストで会得した19のデータを紹介します。 — SEO Japan ヒートマップは、ビジターの行動を分析する上で大いに役立つ。その他のメソッドでは得られない見解を導き出し、その結果、コンバージョン率を大幅に引き上げることが出来る可能性がある。 ヒートマップは、マウストラッキングとアイトラッキングの2つに分類される。大多数
UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ
前回エントリーでは「UIデザイナーが理解しておくべき11種類のナビゲーションと特徴」として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。 続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい（動き）、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。 形状のデザイン UIにおけるナビゲーション要素が、主にどのような形状でデザインされているか、というパターンをここではご紹介しています。 メニューバー メニューをボタン化し、バー状にまとめたデザインです。PCサイトのグローバルナビゲーションやローカルナビゲーションなどによく採用されます。 一覧性に優れ、一目でナビゲーション要素と分かるため、ユーザビリティに優れます。一方、ある程度の表示スペースを必要とするため、スマートフォンではあまり用いられない
入力フォーム改善でCV率1.6倍！成果を上げる18のテクニック | LISKUL
たかが入力フォーム、されど、入力フォーム。 ユーザーが入力フォームに入力しているとき、もう気持ちは「購入します！」「申し込みます！」と決まっているはずです。 しかし、入力フォームが使いにくいために、せっかくの顧客をのがしてしまう可能性があるのです。 サイトへの流入はあるのに成果が上がらない・・・。 フォームPV数とコンバージョン数に差がある・・・。 そんな時には入力フォームを見直すべきかもしれません！ 入力フォームについて書かれている16の記事、サイトを参考に、結局、なにが重要なのか、基本と応用合わせて18のテクニックを厳選し、事例を交えてお伝えします。 入力フォーム改善の威力、条件を知ることで、成果を上げる入力フォームを作ることができるはずです。 失敗しない入力フォームを選ぶ！【LISKUL特集（2019年版）】CVR改善ツール一覧>> ※本記事は2014年7月29日に公開された記事をL
アイトラッキング調査で判明した8つの原則 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ アイトラッキング調査といえば、画面上のユーザー目線を追うことで、普段気付かないウェブデザインの問題やユーザビリティ上の課題を見つけ出そうという試み。サイトのコンバージョン率改善には確実に役に立つであろう手段ですが、準備の大変さや費用も重なり、中々実現できている企業は少ないと思います。今回、既に公開されている様々なアイトラッキング調査を調査し、そこから学べる要素を引き出した記事を紹介します。ある種、鉄板といえるルールに集約されていますが、筆者は有名デジタルマーケッターでありヒートマップツールで有名なCrazyEggの創業者ニール・パテルだけに、分析内容含め学べる点は多そう。 — SEO Japan
UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ
WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所
説得力がグンと上がる！UIデザインの心理学
オライリーから出ている「ユーザーインターフェースデザインの心理学」から使えそうなものを実例を踏まえピックアップ！これでUIデザイン説明の説得力をあげよう！ 情報は一度にすべて見せるのではなく、そのとき必要なものを段階的に開示させた方がよい。 デザイナーが犯しがちな失敗は一度に大量の情報をユーザーに与えてしまうことです。 情報は一度に大量に与えるのではなく、その時点で必要としている情報だけを与えるほうが様々なニーズに対応することができます。 ユーザーの中には大まかな説明でよい人もいれば、詳細を知りたがっている人もいます。 つまりどういう事？ 情報は一度に見せるのではなく段階的に見せる 重要なのはクリック回数ではない。クリックのたびに必要な情報が手に入るのであればユーザーは喜んでクリックする 誰がいつ何を必要としているかを理解する。各段階で何を必要としているか的確に把握していないと、この手法は
Webアプリケーションの画面をさくさく作ろう。UIフレームワーク特集 MOONGIFT
今回はWebアプリケーションの画面作成に関する話です。かつて業務システムというのはエンジニア自身が画面を作ってロジックを実装して提供していました。UIがただコンポーネントを貼付ける程度だったからです。 しかしWebアプリケーションの時代になって、UIの制作が難しくなってきています。デザインの自由度が高いためです。しかし今後さらにWebアプリケーションが活用されていく中ではエンジニアもそれなりの画面を素早く開発できるようになっていかないといけない時代になっています。 そこで今回はUIフレームワーク、多彩なコンポーネントを備えたデザインフレームワークをまとめて紹介します。 iPhone/Android/Windows Phone対応のモバイルWebアプリフレームワーク「ChocolateChip」 モバイルWebサイトをネイティブ風にするUIライブラリは昔から多数存在しますが、今回はその最新版
新規顧客を逃さないECサイトデザイン
2014年5月12日 Webデザイン, ユーザビリティ ECサイトの構造はとっても複雑。ユーザーは好みの商品を検索し、その中から実際に購入するものを比較・検討・選択、さらにフォームに入力するというプロセスを経て、ようやく購入完了となります。オンラインショッピングに慣れている私でも、新規サイトでは苦労することが多いです。そこで使いやすいECサイト、特に新規客に優しいサイトデザインとはどんなものなのか、考えてみました。 ↑私が10年以上利用している会計ソフト！ 目的の商品ヘ素早くアクセス ECサイトはスピード勝負だとよく言われています。それはページの読み込み時間という体感速度はもちろんですが、いかに簡単に目的のページに到達できるかも大切です。特に何が欲しいのか決まっているというユーザー層は、急いでいるわけではありませんが、そのサイトに長居するつもりはありません。目的の商品を素早く表示するのはも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webディレクター・デザイナー必見！ワイヤーフレームや最近のUIを解説した -ワイヤフレームガイド