魅力的なサイトに必要不可欠なシンプルなナビゲーション
Christineは、appendToのフロントエンドの開発者およびライターです。appendToではチームのためのJavaScriptトレーニングを提供しています。 「インタラクティブ」「一貫性」「ミニマル」は、Webサイトのナビゲーションが話題となるときに共通して聞かれる言葉です。しかしこのリストにはもう１つ「シンプル」という言葉を加えなくてはなりません。 シンプルナビゲーションは、Webデザイン要素の中でもっとも美しいものの１つです。インタラクティブとミニマルデザイン、それぞれの特性を組み合わせることでWebサイトに一貫性をもらたします。 シンプルナビゲーションには以下の２つの特徴があります。 Webサイトのメインナビゲーションには、３～７つのセクションしかありません。これは、ドロップダウンメニューやメガメニューによる表示またはサブ的なナビゲーションの場合は当てはまりません。 デフォ
カード型UIにおける５つの効果的なテクニック
「カード」とは、画像やテキストなどの情報が書かれた下図のようなデザインのことをいいます。カードは、シンプルな使いやすさとデザイン性とのバランスを重視する際にはもっともよく使われる手法となりました。PinterestやFacebookのようなサービスで使われはじめ、現在では多岐にわたる企業で使用されています。
画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ
2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか？ この画面遷移図というものは本来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、本来で
ブルームバーグがTOPページを再発明、その脅威の集客力：月間PVが7倍に増加 | DIGIDAY［日本版］
パブリッシャーは、トップページへのトラフィックの全体的な減少に苦しんでいる。だが、ブルームバーグメディア（Bloomberg Media）は、その対策を見つけたと考えているかもしれない。10月にテクノロジーセクションを再開した際、各記事を下へスクロールしていくと、トップページが現れる仕様したのだ。 パブリッシャーは、トップページへのトラフィックの全体的な減少に苦しんでいる。だが、ブルームバーグメディア（Bloomberg Media）は、その対策を見つけたと考えているかもしれない。10月にテクノロジーセクションを再開した際、各記事を下へスクロールしていくと、トップページが現れる仕様にしたのだ（Technology – Bloombergのトップからどれか記事を選んでスクロールしてもらいたい）。 「メディアでは、全体としてトップページへのダイレクトなトラフィックが徐々に減少する傾向がある。新
有名サイトの事例から学ぶ12のWebデザイン・レイアウト
ユーザーはデザインを見たいのではなく、コンテンツを求めてサイトにアクセスします。Web UI Patterns 2016 Vol. 1で説明した通り、デザインは直感的で分かりやすくコンテンツを表示するための手段にすぎません。 この記事では、Webにおける12通りのレイアウトのパターンを実際の例や良い実践方法、共通のシナリオを通して見ていきます。 1. カード 2. グリッド 3. マガジン 4. コンテナの不使用 5. スクリーン分割 6. シングルページアプリケーション（SPA） 7. Ｆパターン 8. Ｚパターン 9. 水平的なシンメトリー 10. 水平的なほぼシンメトリー 11. 放射線状のシンメトリー 12. アシンメトリー 1. カード
デザインの確かな知識が身につく！Webサイトやアプリのデザインの勉強になるスライドのまとめ
実践的なUXデザインやインタラクションデザイン、レスポンシブサイトに効くデザインTips、Sketchを使ったデザインフロー、Webデザイナーのためのタイポグラフィ講座など、Webサイト・アプリなどのUIデザイン/UXデザイン勉強になるスライドを紹介します。 時間をかけてゆっくり、何度でも見たいスライドばかりです。 写真: ぱくたそ 確実に良くするUI/UX設計 from Takayuki Fukatsu 実践的なUXデザインとインタラクションデザインの考え方 from CyberAgent, Inc. UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015 from Sociomedia アクセシビリティからはじめる、WebサイトのUXデザイン from Yoshinori OHTA いいデザインのために組織の一人ひとりができること f
ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
スクロールは制御するな - Weblog - Hail2u.net
WWD Japanのウェブサイトがリニューアルして、スッキリした見やすそうな印象のものに変わった。しかし実際のところ見やすさは見せかけだけで、ナビゲーションをクリックしても見当違いのタブに切り替わったり、ニュース一覧からニュースをクリックしたら、要約ページへ移動するだけで、本文へはもう一度クリックしなければならなかったりする。中でもひどいのがMobile Safariでの閲覧だ。 このウェブサイトではスクロールをほぼ自前で制御しようとしているため、常にこのようにMobile SafariのURLバーとツールバーが上下にそれぞれ表示され続ける。その上、最上端にロゴとグローバル・ナビゲーション、最下端に広告がそれぞれ固定位置であるので、コンテンツの領域がかなり制限されている。iPhone 5SやSEどころか6+や7+でさえも致命的なのではないかと感じられる狭さだ。 とにかく文書を読ませようとい
アプリの導入画面「ウォークスルー」のデザインで気をつけたい５つのこと
UX Movementの著者であり、編集長です。明確で効率的なデザインに美しさを見出し、ユーザーのために闘うことが好きです。 新作アプリにとって、ウォークスルーはいわば「取扱説明書」のようなものです。 ウォークスルーは、新しいユーザーがアプリを起動したときにまず表示される、アプリの機能についての簡単なガイダンスのようなものです。新しいユーザーが戸惑うことなくアプリを使うために活用されます。 アプリからウォークスルーを無くしてしまうと、ユーザーを混乱させてしまう可能性があります。逆にあったとしても、読みにくくわかりづらいものであれば結果は同じです。ユーザーはウォークスルーを面倒に感じ、読み飛ばしてしまうでしょう。 ウォークスルーは、ユーザーにアプリの使用方法を理解してもらうため、読んでもらえるようなものであるべきです。そのためには、明確なナビゲーションにし、読みやすいテキストにしましょう。ま
グッドデザイン賞を獲得した7つのサイトから学ぶ、ウェブデザインの12のテクニック | LISKUL
photo by Robert S. Donovanウェブデザインを担当していると、星の数ほどある他のサイトたちに自社のサイトが埋もれてしまわないか、心配になりますよね。 そこで、ユーザーに評判のよいサイトを作るために、プロデザイナーたちから優秀だと認められたサイトデザインを参考にしてみるのはいかがでしょうか？ この記事では、2013～2011年の3年間にグッドデザイン賞に選ばれたウェブサイト7つから、自社サイトに活かしたい12個のデザインテクニックをまとめて紹介いたします。 受賞作品を参考に、ヒットするウェブサイトを作りましょう！ 参考：BtoB製造業のWebサイト参考事例9選と、ホームページ作成の3つのポイント グッドデザイン賞とは？ 1957年に創設された日本で唯一の総合的なデザイン賞で、毎年企業やデザイナーから40,000件以上の応募があり、よいデザインを示す賞として広く親しまれて
コピペで使える！マテリアルデザインなUIアニメーション | UX MILK
近年、UIにおけるアニメーションやインタラクションの重要度が増していますが、それらをデザインしたり実装する際、様々なものを参考にすると思います。 実在するアプリもさることながら、DribbbleやBehanceなどのポートフォリオサイトではデザインコンセプトとしてアップロードされているものも多く、参考になるものはたくさんあります。 中には独創的なものもあって、実用性に欠けると感じるようなものもあるかもしれませんが、それでも固定概念を覆す機会になったり、断片的にインスピレーションを得たりもできますし、何よりも、見ていて楽しいものです。 今回は海外のUIコンセプトをたくさんストックしているMaterialUpからいくつかの作品をピックアップしてご紹介していきます。MaterialUpはその名のとおりマテリアルデザインの文脈を組んだ作品を多くそろえているサイトです。 そして多くのGIFだけのサイ
ボタンデザインの歴史と進化から学ぶベストプラクティス
ボタンは私たちにもっとも身近な、ごく普遍的なインタラクション要素です。とてもシンプルなUI要素でありながらも、ここ数十年でそのデザインは大きく変化しましたが、いつの時代も大事なのはその明確さと認知性でした。 この記事では、ボタンデザインの進化を振り返り、効果的なボタンを作るための方法論について見ていきたいと思います。 スタイルの進化 立体的なボタン 昔からOSのボタンデザインは、周りの要素からボタンを見分けるためにレリーフとシャドウを使ってきました。 なぜこのデザインなのかというと、シンプルな原理が基本となっています。ボーダー、グラデーション、ドロップシャドウを使用して背景とコンテンツに対してボタンを引き立たせ、クリックできる要素だということを簡単に識別できるようにしているのです。
Codrops | Useful resources and inspiration for creative minds
Codrops Demos Hub Discover our curated collection of 500+ free animations, interaction concepts, UI designs, web templates & more. Stay in the loop: Get your dose of frontend twice a week 👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox. Zero fluff, all quality, to make y
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI/UXとは？知っておきたいUI/UXデザイン50の知識
Create atomic design systems with Pattern Lab - Pattern Lab