第5回 タブ切り替えで快適に読めるインターフェースを作るには | gihyo.jp
見せたいもののメリハリをつけるのがコツ 「限られたスペースに複数の情報を入れたい。でも別ページにするほどでもない……」 そんなとき、タブでコンテンツを切り替えられると便利です。タブ切り替えは、Yahooのトップページで使われているように、かなり浸透してきています。 このUIを使うポイントは、以下のように重点的に見せたいコンテンツとそうでないもののメリハリをつけて使うことです。 特集などの一部のコンテンツに使う ニュースであれば一番見せたいカテゴリーのものをはじめに見せておいて、重要度の低いものは別のタブコンテンツとする サイドバーに置いたトピックスを、アーカイブと最新のもので分ける また、以下のようなデメリットがあるので、UIの見栄えとのバランスを念頭に置いて使う必要があります。 ソースが1ページに書かれるため、ページを分ける場合と違ってSEO効果が薄れる場合がある タブを移動してもページ
第1回 使いやすいメニューはどう作る？ ～水平メニュー | gihyo.jp
「使いやすいメニュー」に必要な3つのこと よく「ナビゲーションメニュー」と言われるように、Webサイトではメニューはナビゲートするためのものです。ナビゲートする対象はもちろん人（ユーザー）ですが、もっと具体的に言及すると「情報を探しているユーザー」ということになります。そして、情報を探す際には、できるだけ簡単に探せる必要があります。 使いやすいメニューには、3つのことが必要です。1つ目はアフォーダンス。言い換えると「メニューがメニューである（次の情報に導く）とすぐにわかる」ということです。2つ目はインタラクティブ性。たとえばメニューにマウスオーバーした、あるいはクリックしたことがわかることを意味します。3つ目はカレント表示。これは「現在いる場所がわかる」という意味です。 この3つを満たすため、メニューには3タイプから4タイプの画像を用意することが多くなっています。ノーマル時、マウスオーバー
第9回 ユーザビリティテスト | gihyo.jp
連載の初回にソフトウェアテストの4つの分類をご紹介しました。今回は品質の観点から分類されるテストの中のユーザビリティテストについてご紹介します。 ユーザビリティテストとは？ ユーザビリティテストとは、ソフトウェアの使いやすさを確認するテストです。 皆さんが普段利用されているソフトウェアで、使いにくいと感じることもあるかと思います。機能要件は確かに満たされているけれども、実際使ってみると使いにくい場合があります。使い方がわからずあきらめてしまう場合もあるでしょう。利用者としてはそのソフトウェアは使えないも同然と受け取られてしまいかねません。 機能は豊富だが、使いにくくて誰も利用していないのでは、機能の目的を果たせません。有効に利用されなければソフトウェア開発に対する費用対効果が出てきません。 このようなことが起こらないよう、使いやすさを確保することを重視するケースが増えてきています。ソフトウ
第22回 JavaScriptによるUIの実装：ドラッグ | gihyo.jp
こんにちは。前回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。 要素のドラッグ ウェブアプリでよく使われるインタフェースのひとつ、ドラッグを実装してみます。ドラッグを使用するケースは幾つかありますが、今回は投稿用フォームをドラッグで移動できるようにするという使い方を想定してみます。 投稿フォームで入力する際、そのページのコンテンツを見ながら入力したいということはよくあります。フォームを好きな位置に移動できればそれが実現できます。 ドラッグの基本HTML <div class="js-drag" id="js-drag-1"> <form class="js-drag-form" onsubmit="return false;"> <textarea></textarea> <input class="submit" type="submit" value="送信"
知らないと怖い！Webディレクターが制作サイトのSEOで“大失敗”しないためのポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ヴォラーレという会社でSEOコンサルタントをやっているじつかわです。 SEOコンサルをする中でさまざまなWebディレクターさんと一緒に仕事をさせていただいてきたのですが、やはりみなさん、SEOの領域まで手を出したくても出せない、というのが実情のようです。SEOをきちんとおさえたサイト構築をできる方には数えるほどしか出会ったことがありません。 しかし、外部リンクによるSEOで成功するのが難しくなっているなか、SEOを成功させるためには内部SEOをどこまでできるか、サイト構築時にいかにSEOを組み込んでいけるか、というのが非常に重要になってきます（※）。 SEOは他の広告手段とは違って、サイトそのものを検索エンジンに評価してもらうという取り組みですから、どのような企画・設計でサイトを構築するか / その際にちゃんとSEOを押さえられているか、によって大きな差がつきます。すなわち、S
モバイル向けUI/UXデザイン10のポイント デザイン会社 ビートラックス: ブログ
日々めまぐるしく変化するモバイルマーケットにおいて、マートフォンアプリやモバイルWebのUIやUXを最適にデザインする事はそのプロダクトがヒットするかの大きな要素となっている。特に最近は見た目が良いだけではなく操作性が非常に高いモバイルサービスが次々とリリースされユーザーが求めるクオリティレベルも上がっている。 小さな画面サイズ、様々な利用シーン、複雑な仕様の機能を実装したモバイルサービスにおいては、高いユーザビリティを実現する事が何よりも重要である。よりユーザーに愛される為もポイントをまとめてみた。 1. レイヤースタイルのUIで奥行きを出す モバイルのインターフェイスに関しては、最近のトレンドを見てみると、フラットなUIがトレンドのように思えるが、実はモバイルの限られたスペースでユーザーに効果的なエクスペリエンスを提供するには、縦と横のスペースに加え、”深さ”を利用したレイヤースタイル
シングルカラムから始める情報設計
横並びは複雑化の第一歩 Webサイトの設計をする際、必ずといっていいほど縦にコンテンツを並べて構成を考えるようにしています。どのような人が、何を求めて Web サイトに訪れているのかというシナリオを基に構成を考えていくわけです。詳細なレイアウトを考えるのではなく、情報の流れが適切であるかどうかを判断するための工程にしています。 パソコン向けの Web サイトデザインの悪い癖のひとつに、「同じくらい重要だったら、横に並べる」というのがあります。広いスペースがあったパソコンが主流の時代ならではのアプローチですが、今は状況が大きく異なります。配信者側にとっての『重要』を出すことは間違っていません。しかし、あれこれ重要だからという理由で隣り合わせにしてしまうと、様々なデメリットが生まれます。 訪問者に迷いが生じる 直接関係のないコンテンツが横に並ぶことで視点の動きが多くなる可能性があります。また、
Webデザインのアイデアに困ったら！参考になるさまざまなコンポーネントやレイアウトをまとめた -Call to Idea
Webページによく使用される、アイテムを並べるリスト、ギャラリー、タブ、ナビゲーションといったさまざまなコンポーネントをはじめ、打ち出しコンテンツのレイアウト、サンプルの表示方法、AdWordsの配置、データがない状態のレイアウトなど、Webデザインのアイデアをまとめているサイトを紹介します。
ウェブ制作者がチェックしておきたいアイデア満載のUIを備えたウェブデザインのまとめ -2014年上半期
うまくトレンドを取り入れ、デザインの細部まで徹底的にこだわり、気持ちのいいインタラクションとアイデア満載のUIを備えた素晴らしいウェブサイトを紹介します。 画像の一部だけ動くシネマグラフを使ったコンテンツ、ペルソナを使ったユーザー中心のレイアウトなど、最新のトレンド情報もお見逃しなく！ VOTD.tv シンプルですっきりしたデザインだけでも素敵ですが、ロゴ、ナビゲーションやサムネイルやコンテンツなどの随所に仕掛けたインタラクションの芸が非常に細かく、楽しませてくれます。
Coca-Cola Slogans Through the Years: The Coca-Cola Company
\r\n<li><a href=\"/content/company/us/en/about-us/history.html\">COCA-COLA HISTORY</a></li>\r\n<li><a href=\"/content/company/us/en/about-us/history/the-birth-of-a-refreshing-idea.html\">Our Origins</a></li>\r\n<li><a href=\"/content/company/us/en/about-us/history/the-history-of-the-coca-cola-contour-bottle.html\">Our First Bottle</a></li>\r\n<li><a href=\"/content/company/us/en/about-us/history/c
最近流行りのフラットデザインのギャラリーサイト『FlatDesign』 | 100SHIKI
参考になりそうだったのでメモ的にエントリー。 FlatDesignは最近はやりのフラットデザインのギャラリーサイトだ。 ほぼ平面的、という特徴を持つフラットデザインはGoogle系サイトをはじめ、最近よく見るようになってきた。 こうしたサイトで他の人がどういう風に実践しているか見るのは勉強になるだろう。サイトのカテゴリーごとに検索できるのもうれしいですな。
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
ユーザーの知識は低いレベルで停滞する
学習というのはたいへんな作業なので、ユーザーのやりたいことではない。その結果、彼らはユーザーインタフェースの探索をすることもなく、ほとんどの機能について知らないままだ。 User Expertise Stagnates at Low Levels by Jakob Nielsen on September 28, 2013 日本語版2013年11月25日公開 コンピュータシステムを長期間利用しているユーザーでも、知っていて使っているのは利用可能なコマンドや機能のほんの一部だけであることは多い。デザインのユーザビリティが優れていれば、ユーザーはシステムを利用しはじめて間もなく、かなり容易に一連の基本機能を理解する。しかし、その後、彼らは伸び悩み、それ以上はたいしてスキルが上がらない。システムを頻繁に使っているユーザーですら、年にわずか1つか2つの新しい知識を身につけられるようになるまでには何
カテゴリ別に見る、スマフォのアプリに使用されている気持ちのいいアニメーションのまとめ
気持ちのいいアニメーションは、スマフォのアプリには欠かせないと言ってもよいでしょう。 アニメーションはインターフェイスを設計する上で非常に重要で、4つのカテゴリに分けてユーザエクスペリエンスに欠かせないアニメーションを紹介します。 Great Animations Make Great Apps 下記は各ポイントを意訳したものです。 1. 知らせるアニメーション 2. 可能であることを伝えるアニメーション 3. あなたを歓迎するアニメーション 4. 楽しませるアニメーション 1. 知らせるアニメーション 最も単純なアニメーションの使い方で、ユーザーに知らせることを目的としたアニメーションです。これは多くのアプリケーションで使用されています。
[JS]コンテンツを効果的にナビゲートするjQueryのプラグインのまとめ
スマフォ・タブレットでよく見かける三本線のナビゲーションをはじめ、コンテンツをスライドしてかっこいいアニメーションで表示されるサイドバー、1ページで構成されたサイト用のナビゲーションなど、あなたの大切なコンテンツを効果的にナビゲートするjQueryのプラグインを紹介します。
フラットなデザインでユーザーが使いづらいのを解消するアドバイス -フォーム編
フラットなスタイルの一番使いにくいところは、どこですか？ 僕はそのシンプルなスタイルのボタン（リンク）です。一見ボタンに見えない、まるで見出しやコンテンツの一部のようにデザインされていると操作に迷ってしまいます。 そんなフラットなスタイルで、ユーザーが最小限の努力で、正確に何をすべきか理解できるフォームを作成するためのアドバイスを紹介します。 Flat UI and Forms 下記は各ポイントを意訳したものです。 フォームのUIで大切なポイント フォームの使いづらい例と改善例 フォームのUIで大切なポイント フォームとは、そのプロダクトやサービスを受ける時に情報を交換するためのインタラクションです。これはサインアップやウェブ検索をはじめ、Eコマースやネットバンクまですべてを含みます。 まずは、フォームのデザインでユーザーに必要とされることとコンテンツで必要とされることの相違点を見てみまし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
x.com
Bootstrapで作られたとは思えないほど洗練されたデザインのWebサイトのまとめ
Flat Inspire
ウェブのレイアウトやUIデザインの参考になるPinterestのボードのまとめ