決済画面デザインの重要ポイント４つを解説！購入をためらわせないためによりスムーズな決済を
ショッピングサイトには必ず支払いのプロセスが存在します。その最終段階となる決済画面の構築には特に気を遣うはずです。支払いフォームはユーザーが手続きを最後まで進めやすいように作らなければならず、ここで問題が発生すればユーザーは不信感を抱いてしまうでしょう。そうしたことがないように、これから紹介する4つのポイントを押さえて支払いフォームを使いやすく改善してください。 1.はっきり見やすくする 最終的な目標は、ユーザーに商品を購入してもらえるフォームを作ることです。そのためにプロセスは極力シンプルなものにしましょう。次の点に注意すれば、ユーザーが迷いにくいデザインを作れます。 ・文字は大きめに ・プレースホルダーではなくラベルを使う ・各フィールドは十分な余白を空ける ・カスタムのtabindexでナビゲーションしやすくする また必要な場所にアイコンを加えるととても見やすくなります。 2.カスタ
ラジオボタンをUIに用いる時のポイントを解説！より良いサイト、アプリの利用環境のために
ラジオボタンはフォームにおける必須要素です。互いに相容れない２つ以上のオプションがある時に使用され、ユーザーは正確に１つの選択肢を選ばなければなりません。言い換えれば、選ばれていないラジオボタンをクリックすることによって、選んでいた他のどんなボタンも選ばないということになります。 ラジオボタンは正しく使用されれば素晴らしいものです。ユーザーが間違ったデータを入力するのを防ぎます。キーボード・ナビゲーションやプラットフォームを通じた信頼できるレンダリングなど、多くの選択肢を提示してくれます。 本稿では、ユーザビリティ・テストによって巧みにつくられたラジオボタンに関する実用的なガイドラインをご紹介します。 ラジオボタンの名前の由来 古いカーラジオにおいて放送局を変えるために使われたことにちなんでラジオボタンと呼ばれるようになりましたが、このボタンは１つ押された時、別の１つは飛び出すようになって
iPhoneの変化に合わせて生まれたUIトレンド【デザイナーの方々、見逃していませんか？】
最近のモバイルUIにはとあるトレンドが見られます。重要な要素が画面の下側に配置されるようになってきているのです。iOS 10で変更されたアップルの地図アプリを見れば一目瞭然です。 この変更には明確な理由があります。それはスマートフォンがどんどん大きくなる一方で、私たちの手の大きさが変わらないためです。 初期のiPhoneでは親指で画面左上の戻るボタンをタップすることができました。しかしPlusモデルでは画面が大型になり、同じ操作をすることがほぼ不可能となっています。 この問題に対処するため、画面の端からスワイプすることで前の画面に戻る機能が搭載されました。ただしこの操作は画面を見ただけでは発見できず、新機能に敏感なユーザーにしか届きません。 そのため、重要な要素を画面下部に配置するという親指にやさしいトレンドが生まれたのです。Windows Phoneのブラウザもアドレスバーは画面下部にあ
タッチ操作デバイスのデザインはこれで！フリー「ジェスチャー関連アイコン」15選！
携帯電話やタブレットからラップトップまで、タッチ・デバイスの急速的な普及によって、タッチ操作可能な要素をわかりやすく伝えることが必要になっています。 そんなとき使い勝手がよいのが、「ジェスチャー・アイコン」です。 アイコンを使えば、アプリの使い方を手っ取り早く知らせることができるからです。 本記事では、15のフリー・ジェスチャー・アイコンを集めました。 使用の際には、ライセンス・チェックを忘れないでくださいね（現在は無料ですが、時々に変わるものです）。 Touch Gestures Icons By Jeff Portaro (100 Icons, AI, EPS, CSH, PSD, PNG, SVG) Touch Gesture Icons By Mobile Tuxedo (48 Icons, PSD, EPS, PNG) Gesture Icons By Frexy (38 Ico
【使い方を究める】Webデザインにおけるアニメーション使用の基本的な考え方｜SeleQt【セレキュト】
機能的かつ楽しいアニメーションは、現在のWebデザインにおいて欠かすことのできな部品となっています。 ご存知の通り、アニメーションを使えば、ユーザを誘導したり、ユーザが自分のアクションの結果を目で見ることができるようにすることができ、またそのようにしてユーザの振る舞いに影響を与えることができるのです。 本記事では、このようにWebエクスペリエンスを向上させてくれるアニメーションの使用についての、基本となる考え方をまとめてみました。 進行状況の表示 ・ローディングアニメーション アニメーションを使ってユーザにローディング時間を意識させないようにするのは、よくある使い方ですね。なるべくシンプルなもので、見ていて楽しいものを用意してみてください。 ・プログレスアニメーション ローディングバーなどが代表的な例ですが、このように複数のステップに分けたものも面白いですね。 ・スケルトンスクリーン 空白
世界、日本ともに主要企業サイトの8割がサイト内検索を導入！今後の設置傾向は？
企業サイトのスマートフォン対応が進む中、検索への取り組みはどのようになっているでしょうか？ あとらす二十一が、グローバルナビゲーションの現況について主要企業サイト（世界主要企業 500サイト/国内主要企業 225サイト）を対象に調査。その中で今回、サイト内検索に関する結果を発表しました。 それによると、サイト内検索の導入状況は、スマートフォンサイトでも進んでおり、世界主要企業の8割、国内主要企業の7割強が対応していることがわかりました。 また、以下のグラフのようにPCサイトでの導入率は9割を超え、特に日本が世界よりも高い傾向がみられます。 その他、レポートでは、スマートフォンサイト・PCサイトともに、設置位置としては上部右へ設置されるケースが多いことや、スペースの有効利用のために、今後はアイコン単独の掲載（タップやクリック後の入力窓表示）が増加すると予想しています。 詳しくは以下のページで
「table」って実はここまでできるんです！jQuery tableプラグイン12選｜SeleQt【セレキュト】
＜table＞はHTMLで最も古い要素のひとつです。tableはかつてWebレイアウトに広く使われていました。しかし、tableを基盤としたレイアウトは廃れ（HTMLメールを除いて）、現在tableを使うのは、表データを見せるために使うときくらいでしょう。 HTMLスペックの古い部分は、一般的にモバイル中心のデザインに合っておらず、そしてbox要素の外では機能的な発展はありません。とはいえ、table機能の使い勝手がもっとよくなったらいいと思いませんか？ この記事では、jQueryで動く厳選したプラグインについてザっと説明し、tableの可能性が広がればいいなと思います。これからご紹介するプラグインは、簡単なデザイン修正から機能豊かな解決策にまで多岐に及びます。 jQueryで動くtableプラグイン12選 Dynatable Dynatableはフィルター、分類、ページ付けなどの機能をも
【決定版】デキるWebデザイナーのための「CSSフレームワーク」ベスト10
フレームワークの活用はWebデザインの現場において「当たり前」のものとなってきましたね。制作にかけられる時間・労力は決して無限ではありません。限られた資源（リソース）を効果的に分配するのもプロとして欠かせない姿勢です。今後もこうしたCSSのフレームワークを活用した流れは続くのではないでしょうか。 そこで本稿では制作の現場で使えるWebデザイナーのための「CSSフレームワーク」ベスト10をご紹介します！下記にご紹介するフレームワークをうまく活用して、ぜひ日々の業務の効率化にお役立てください。 そもそもフレームワークとは何か？ フレームワークとは、本来ファイルとフォルダを含むパッケージのことです。CSSフレームワークの場合だと標準化されたHTML、CSS、JSコードを含んだ機能群のことを指します。こうしたフレームワークを使うことで、一からフロントエンド開発を行うよりも飛躍的にWeb制作の生産性
ブログのデザインテストに300万円を費やしてわかった4つのグロースハック術｜SeleQt【セレキュト】
本稿では、ブログデザインのテストに30,000ドル（＝約300万円）を費やし、4つの重要な改善ポイントを見出したJustin Brooke氏の記事をご紹介します。 ブログのデザインテストでわかった4つのグロースハック術 以下のイメージは標準的なブログレイアウトですが、このようなレイアウトのブログやWebページを何百も見てきたことでしょう。ここではオレンジ色の丸で示された4つの重要な改善ポイントをご紹介したいと思います。 【1】一等地を有効活用しよう 例えば営業メールを書く時、見出し部分に一番力を入れますよね。コピーライターにとっては、Webページが折りたたみ式の場合、唯一見えているトップページのヘッドラインや第1パラグラフが最も力を入れる部分になります。 今回テストした中で、一等地の見出し部分を最適化することが最も効果がありました。オプトインボックスの配置を、右側のサイドバーからロゴとナビ
ユーザー目線で考える！Webデザインにおける半透明レイヤーの効果的な使い方
写真にかぶせてキャッチコピーを表示したいときの手段として、半透明レイヤーを効果的に使う方法があります。写真と文字が調和することで、見た目が美しくなります。 今回は半透明レイヤーを上手に使っているサイトを参考にしながら、ベストな色の選び方を考えていきたいと思います。 こちらは半透明レイヤーに複数の色のグラデーションを使った例です。 この場合は自分のブランドに合った色を複数選ぶのもいいですし、1色のグラデーションにしてフォーカスを当てたい場所を強調してもいいですね。明るめの色を2色選択すると、ユーザーをサイトデザインに引きこみ、写真を際立たせる効果があります。 このグラデーションレイヤーはSpotifyが広めたと言われています。Spotifyでは2色のグラデーションを使ってプレイリストを強調していました。 次は、セピアのレイヤーをかぶせた例です。 ソリッドカラーを使うことで、深い印象をユーザー
【保存版】検索上位の800万ページに見る「HTMLの各要素」利用状況のすべて
#概要 このHTML利用データはGoogle検索結果上位２０位のページから収集された800万のインデックスページを参照しています。 検索順位上位のWebページは平均して２５の異なる要素型を使用していることがよく分かります。 以下はそれらの検索順位上位のWebページのほとんどのページで使用されている２５個の要素です。 #Doctype doctypeはHTML文書の冒頭に記載され、ページが利用している(X)HTMLのバージョンを示しています。 #基本要素とメタデータ htmlはルート要素としても知られており、doctype宣言のすぐ後に記載されWebページのコンテンツをラップします。メタデータはスタイルやスクリプト、データなどのページ情報を含んでおり、検索エンジンまたはブラウザーがページを利用・レンダリングするのに役立ちます。 #コンテンツセクショニング コンテンツセクショニング要素を使えば
68%のユーザーがECサイトで「カートから商品を削除」しているらしい。
ウェブのユーザビリティについての研究を行うBaymard Instituteは、7年間かけて調べた調査結果を発表し、世界のECサイトで「商品がカートから削除」されている割合は68.8%になっていることが判明しました。 一度購入を検討された商品が、約7割も購入されない理由は一体何なのでしょうか。 一般的なECユーザーはただウィンドウショッピングをしていることが多く、複数のECサイトを見ながら値段を比較し、購入特典の有無などをチェックしています。なので「ただ見ているだけで、べつに買う気はなかった」という理由でカートから消去する人は実際かなりの割合（58.6%）を占めています。この部分に関しては、ユーザーの行動次第なのでECサイトとしてはなすすべがありません。しかし、それ以外の理由はECサイト側が改善可能なものばかりでした。 1位 送料、税金、手数料が高すぎる（61%） 2位 アカウントを作らな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
