2016.02.28

課題解決のためのUI実装講座

コンバージョン率アップを目指せ！　ユーザビリティの高い入力フォーム（2/2）

ここでは、実際のサイトで使われているフォームをアレンジしたものを例にして、具体的な実装方法を紹介していこう。フォームはユー...

2016.02.27

課題解決のためのUI実装講座

コンバージョン率アップを目指せ！　ユーザビリティの高い入力フォーム（1/2）

お問い合わせや登録など、さまざまなサイトに設置される「入力フォーム」。コンバージョンの向上に直結する重要なUIであるだけに...

2016.01.30

課題解決のためのUI実装講座

Webフォントが普及しても、まだ手放せない画像テキスト（2/2）

画像テキストとWebフォントのメリットとデメリットを理解したところで、画像テキストを使ったメニューを実装してみよう。今風に...

2016.01.29

課題解決のためのUI実装講座

Webフォントが普及しても、まだ手放せない画像テキスト（1/2）

近年、日本語フォントでの表示スピードの向上やフォントの種類の増加により、Webフォントを使用するケースが増えてきた。とはい...

2016.01.04

課題解決のためのUI実装講座

カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」（2/2）

スワイプに対応したタブメニューの事例から、そのメリットや気をつけるべき点が把握できたところで、サンプルを使って実装例を解説...

2016.01.04

課題解決のためのUI実装講座

カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」（1/2）

カテゴリーが多いサイトのスマートフォン対応において、その情報量を小さい画面に収め、かつ操作しやすいUIを実現するには、どう...

2015.12.07

課題解決のためのUI実装講座

状況に合わせたプログレスバーで待ち時間を「見える化」する（2/2）

「待ち時間を可視化する」ことか?て?きる UI である、フ?ロク?レスハ?ーやローテ?ィンク?画面。ここでは、実際にサンプルを...

2015.11.29

課題解決のためのUI実装講座

状況に合わせたプログレスバーで待ち時間を「見える化」する（1/2）

プログレスバーやそれを用いたローディング画面は、「待ち時間を可視化する」ことができるUIだ。「先が見える」ことでユーザーの...

2015.11.05

課題解決のためのUI実装講座

スクロールに追従するナビゲーションの工夫と実装（2/2）

では、実際にサンプルを使って、追従ヘッダにはどのような実装があるのかを見ていこう。CSSだけで実装したベーシックなサンプル...

2015.10.28

課題解決のためのUI実装講座

スクロールに追従するナビゲーションの工夫と実装（1/2）

追従要素とは、スクロールに応じてページに表示されるナビゲーションのことだ。スマートフォン（以下、スマホ）では画面が狭くペー...

2015.10.05

課題解決のためのUI実装講座

「視線導線」を考慮したメガメニューの構造設計（2/2）

では、実際にサンプルを使って、どのような実装になっているのかを確認していこう。複雑なように見えるかもしれないが、シンプルに...

2015.09.29

課題解決のためのUI実装講座

「視線導線」を考慮したメガメニューの構造設計（1/2）

多階層サイトのナビゲーションを設計する際、多くのコンテンツをどのように整理し、ユーザーを目的のコンテンツに導けばよいだろう...

2015.09.10

課題解決のためのUI実装講座

「人が集まるWeb」のための一覧ページの作り方（2/2）

グリッド型のUI表現の形がわかったところで、そのシンプルな実装をサンプルを使って解説していこう。デザイナーと打ち合わせて、...

2015.09.10

課題解決のためのUI実装講座

「人が集まるWeb」のための一覧ページの作り方（1/2）

Web技術の進化とともに、その表現方法も多様化し、伝達手段の可能性も広がってきた。この連載では、Webを通じたコミュニケー...