モバイルのUI要素を視覚的に分けるための６つのガイドライン
アプリのデザインは一見すると簡単そうかもしれませんが、実際プロトタイプに取りかかってみるとその難しさに気づきます。どのようなデザインにするか判断に迷いだすと、最初はシンプルに思えたことも複雑になり始めます。 例えば２つ以上のコンテンツを視覚的に分けるというシンプルなタスクでさえ、的確な判断をするのが難しいときもあります。 今回はそんな細かいUI要素の一つである「区切り線」やUI要素の「区分け」について見ていきたいと思います。 従来の区切り線 水平（または垂直）の線を使用すると、関連するコンテンツのセクションの間に必要となる視覚的な区分けを作ることができます。 この仕切りによってページにリズムと階層をつくり、コンテンツがどのように編成されているかユーザーが理解するのに役立ちます。 区切り線の種類と使い分け フルブリードディバイダー フルブリードディバイダー（余白なしで横幅100％の区切り線）
ポータルサイトのデザインリニューアル案件で気をつけたこと＆使える心理学 - Design Color
色を使いすぎない 以前に書いた「ポータルサイトのデザインをする時に意識したこと5つ」という記事でも触れましたが、今回も特に気をつけました。 ポータルサイトは一画面に表示される情報が多いです。文字はもちろん、画像の量が多くなります。サイトによってはバナー広告もあるので、それらの色に加えて、サイト自体の色もカラフルだと、目が疲れてしまいます。 そのため、色数を極力おさえることでサムネイル画像やタイトルに注目が集まるよう心がけました。そうすることで、ユーザーは情報を探しやすくなり、記事を読む事に集中できます。 逆に、色がゴチャゴチャしてどこを見たらいいのかわからない状態になると、ユーザーの離脱を招くことにもなるため注意が必要です。 選択肢は4つ程度にとどめる 今回のリニューアルにあたり、ポータルサイト内の選択肢を極力4つ程度にとどめる工夫をしました。その理由についてはふたつの心理学が関係していま
ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。
こんにちは、デザイナーの長谷川です。 今回は僕が普段気をつけている、ちょっと意識するだけでスッキリしたデザインになるレイアウトのコツをご紹介します。 デザイナーじゃない方も、企画書や簡単な UI のモックアップ、Web や雑誌のレイアウトなどに応用できると思いますので、ぜひ参考にしていただければと思います。 1. 上下左右のマージンを均一に Web デザインや UI デザインの要素全てに対して隣り合う要素との間隔やバナー、ボタンなどの外側と内側の要素の上下左右マージンをできるだけ均一にすることで、デザインがスッキリ見えます。 2. 内側のマージンは外側のマージンより狭く レイアウトなど一番外側とコンテンツの間隔より文章のかたまりや画像同士の間隔を小さくします。基本的にコンテンツのまとまりを作るためですので、デザインによっては広く取って区分ける場合もあります。 3. 段落の下は間隔を広く開け
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Penguin Random House
