![http://www.0101.co.jp/topics/care/item04.html](https://cdn-ak-scissors.b.st-hatena.com/image/square/e2eecccb8ac400dd1f51174f89471908acdfcf7f/height=288;version=1;width=512/http%3A%2F%2Fwww.0101.co.jp%2Ftopics%2Fcare%2Fimg%2Fitem%2Fimg04_2.gif)
WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者/状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所
知ってるつもりで意外と知らないSEO最新のキホン 第9回 Webデザイナーが押さえておくべき、内部SEO施策18のポイント 2015年03月24日 TEXT:押谷圭佑(ヴォラーレ株式会社) こんにちは。ヴォラーレ株式会社の押谷です。前回はリニューアルにおけるSEOの全体感の説明をしましたが、今回はより実践的で細かな施策を紹介します。 クライアントに「いま手がけているWebサイトのSEOもお願いしたい」と依頼された経験のあるWebデザイナーや、Web担当者を兼務しているWebデザイナーは、WebサイトのSEO対策を考えたことが一度はあると思います。そうしたWebデザイナーのために、押さえておくべき18のSEO内部施策に関するポイントを紹介していきます。 ■HTMLの調整 基本的に、1ページに対して1テーマ(キーワード)として対策します。これはSEOにおけるHTMLの調整の基本であり、対策する
TL;DR 実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 1.画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 2.画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css 3.float を使わ
Webサイトやアプリを訪れたユーザーに対して、ゴールまでの最適な道筋をつけるのがCTA(Call to Action:行動喚起)。このCTAを意識してボタンをデザインすることで、クリック率やコンバージョン率を大幅に改善できます。ボタンを実装するときにチェックしておきたい7つの法則を紹介します。 1.ユーザーの言葉を使う ネットで買い物しているところを想像してみましょう。以下の2つのボタンがあったら、どちらを押したくなるでしょうか。 ほとんどの方は、右の「注文する」を選んだはずです。デザインがまったく同じボタンがあったとしたら、自分が日ごろから使っている言葉のほうがピンときて押しやすい。企業側の言い回しと、ユーザー側の言い回しがずれているほど、ユーザーはアクションを起こしづらくなります。ボタンのラベルにはユーザーが普段使っている言葉を使いましょう。 Webサイトの制作ではつい企業目線の言葉を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く