スマホサイトのナビメニューを見直そう！基本3パターンの長所と短所、改善ポイント
ウェブやモバイルアプリのナビゲーションは、直感的で予測できるべきです。新しいユーザーとリピーターの両方が、どのようにアプリが操作するのか理解できるべきなのです。 しかしモバイルの小さな画面上では、分かりやすくアクセスしやすいナビゲーションメニューを作成するのは大変な作業で、コンテンツの優先順位に応じてUI要素が必要になります。異なるナビゲーションメニュー・パターンを利用し、他の解決方法を試みても、他のさまざまなユーザビリティーの問題点が出てきてしまいます。 この記事では、ハンバーガーメニューとタブメニュー、ジェスチャー型ナビゲーションといった、モバイルアプリの基本的な3つのナビゲーションパターンのメリットやデメリット、デザインの解決方法について詳しく見ていきましょう。 コンテンツ目次 1. ハンバーガーメニュー 概要 メリット デメリット デザインの解決方法 2. タブメニュー 概要 メリ
デザインの確かな知識が身につく！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
オブジェクト指向UX | POSTD
(注：2015/11/18、記事およびタイトルを一部修正いたしました。) CNN.com で働いていた2012年6月に、大統領選挙投票日の夜のユーザエクスペリエンス（以後UX）のデザインを任されました。私はそれからの6カ月間を投票日の夜のための仕事に専念しました。しかし、仕事が成功するかしないかは、選挙結果に関係はありませんでした。私が懸念していたのは、情報の見つけやすさやデータの見やすさ、canvasでのオブジェクトの変形、そして一体どのようにしたら、iPhoneでマウスオーバーのフライアウトが動作するのかでした。CNN.com史上初めてWebデザインをレスポンシブにすることにしたのです。さらに史上初めて私が、その デザイン を担当することになったのです。 大きな賭けでした。CNN.comにとって大統領選挙投票日の夜と言えば、スーパーボウル（プロアメリカンフットボールの優勝決定戦）の日曜
10歳のこどもから学んだユーザビリティ向上のポイント
2015年9月8日 ユーザビリティ 夏休みの後半、原稿用紙15枚の自由研究に苦しめられていた姪っ子（10歳）を「楽しそうだな〜」と手伝っていました。そんな時「私も久しぶりに自由研究したい！」と思い、ちびっこが家にいることですし、最近のちびっこがWebサイトをどのように利用しているのか研究してみることにしました。という事で今回の記事は自由研究風に進めようと思います！ ↑私が10年以上利用している会計ソフト！ 調べたいこと 認知度の高いWebサイトを、小学生がどのように利用するのかを観察し、こども向けのWebサイトに必要なもの、Webサイトを制作するうえで注意すべき点を調べます。 予想 難しい漢字は読めないので読みとばす イラストやキャラクターなど、可愛いものに興味を示す 明るい色彩のサイトに興味を示す まだ習っていない漢字や難しい表現は読み飛ばし、自分の理解できるもののみにフォーカスしていく
UXを定量的に評価する7つの基準で客観的にサイトを改善していこう | 【レポート】Web担当者Forumミーティング 2015 Spring
オンラインビジネスの成功のためには、ユーザーの意見を客観的に多数取得し、その数値分析から具体的対策を練ることが重要だ。当たり前のことだが、これができているサイトは少ない。 UXはたびたび、Webサイトやサービスの「使い勝手」を指す「ユーザービリティ」と混同されがちだが、UXとは単なる使い勝手ではなく、商品・サービスを含めた体験そのものを表す。 UXの概念を示すものとしては、ピーター・モービル氏が提唱した「UXハニカム構造」が有名だ。しかし、キーワードは英語で言葉の意味がわかりづらく、内容を理解するのは少々難解である。 これを専門家以外にもわかりやすく、ゴメス・コンサルティングで編集したのが「サイト全体構造とUX7つの要素」だ。Webサイトの構造例と、それぞれに対応する7つのUX基準を記している。 1. アクセスのしやすさ「アクセスのしやすさ」とは、Webアクセシビリティやマルチデバイス対応
UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】
世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01： 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28： 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデート 「Apple Watch デザイン原則」を追加 2015/10/
Webページで使用されている63種類のUIデザインの特徴と実装の注意点がまとめられた無料のeBook -UXPin
Webページで実際に使用されている63種類のさまざまなUIデザインのパターン、エレメントの使い方、コンテンツの見せ方・そしてそれらの実装の際の注意点などを一冊のPDFにまとめた無料のeBookを紹介します。 Web UI Design Patterns 2014 本書は以前、紹介したUXPinのシリーズで、ウェブ制作の参考になるPDFが他にも無料でダウンロードできます。 ワイヤーフレームや最近のUIを解説したワイヤフレームガイド 2014年、進化しているWebデザインのトレンドをチェックできる無料のE-Book スマホページ・アプリのさまざまなUIの特徴と実装の注意点がまとめられた無料のeBook eBookは全編英語ですが、英語が苦手な人でもグラフィックを見るだけで十分にためになると思います。 本書の中身を簡単に紹介します。
Webデザイナーがスキルアップするために必要なスキル5つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも〜、こんにちはぁ！もっともっとWebデザイナーとして成長したいライター、のび太です。 さて、突然ですが「Webデザイナーにとって必要な能力ってなに？ 」という疑問をもったことありませんか？つい最近フリーランスのWebデザイナーとして飯を食っていくことになった僕ですが、最近ますますその答えが知りたくなりました。 HTML、CSSなどのコードが書ける人？Photoshopでキレイなデザインが作れる人？Webについて詳しい人？いったい「Webデザイナー」ってなんなのでしょうね〜？ 僕はこれまでWebデザイナーに関する海外記事を多く読んできましたが、「へぇ〜、Webデザイナーってこんな能力もなんだなぁ〜。」って意外に感じたことが結構ありました。 今回はその中でも特に重要だと思った5つをピックアップしてご紹介したいと思います。 Webデザイナーがスキルアップするために必要な能力5つ 1. 事前
新人ウェブデザイナーに送る。ウェブデザインブックマークサイト決定版！
おはようございます。CD藤本です。 厳しい冬も終わりを告げ、大好きな春がやって来ました。 桜、誕生祭、キャンプ初め、サイクリング開始。と良いことづくしの春。 当社でも11名の新入社員を迎え入れました。 個性あふれるフレッシュな11名の新人たち。ようこそSOLGへ！！ さて今回は、デザイナーなら誰でも知っていると思いますが、新人ウェブデザイナーのために、ウェブデザインのブックマークサイト・ギャラリーサイトを紹介します。 僕が知っているだけでもこの手のサイトは30サイト以上あります。老舗から新参者、洋物中心のところから和物のみにこだわったところ。縦長にこだわったところからスマホのみに絞ったところ、パーツのみに絞ったところもありますね。 僕が何年も使い続けた結果、ここが至極のブックマークサイト（以下ブクマサイト）だ！という5サイトを紹介します。 （今回はパソコンサイトを扱うブクマサイトに限らせて
"Amazon"に学ぶ、4つの観点で考察するUXデザイン | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
皆様こんにちは、シリコンバレーでUXデザイナーをしているライターのYUKIです。今回はあるひとつのサイトについてUXデザイナーとしての立場からレビューをしてみようと思います。 はじめに 私は友人らと作っていたスタートアップ会社を軌道に乗せるために数年前シリコンバレーにやって来て、現在は某米国の大企業でデザイナーとして働いています。公式な肩書きはヴィジュアル・デザイナーなのですが、実質的にはインタアクションやヴィジュアル両方に携わるユーザー・エクスペリエンス・デザイナーというところです。 LIGでは、かなり個人的な見解で、ユーザビリティに優れていると思ったサイトを説明もふまえながらレビューしたいと思います。 ただ、私が現在持っている知識は本格的にユーザビリティやデザインを学校で学んで得たものではなく、あくまでも実際の現場で働いて得たものばかりなので、「これが絶対に正しい」と思うのではなく、「
ディレクター向け、2013年ウェブデザインのトレンドのまとめ
フラット、サークル、ブラック、ブラー、写真・動画の背景、などビジュアル的なトレンドではなく、どちらかと言えば全体を包括するディレクター向けのウェブデザインのトレンドを紹介します。 コンテンツはウェブにとって非常に重要です。今後数ヵ月にわたり、コンテンツをどのようにユーザーに提供するのがよいか、スマフォ・タブレット・デスクトップなどのさまざまなデバイスにどのように適合するのがよいか、さまざまな討論がおこるでしょう。いずれにしても、これは非常に関心の高いことです。 効率的で、検索可能で、アクセシブルで、マルチプラットフォームに対応したコンテンツを作成し、最も良いインタラクションを備えてユーザーに届ける必要があります。 2. デザインとコンテンツのシンプリシティ シンプリシティは新しい方法論です。シンプリシティとは、コンテンツをアクセシブルで読みやすく、最も良いユーザエクスペリエンスを提供するも
脳に優しいデザインを！「Vertical Rhythm」の基本と実現方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。 どうも近頃はいぬ肌が恋しく、無性にワンコちゃんをなでなですりすりしたくてうずうずしるのですが・・ こういう写真を眺めているだけで心がほわ～っとしてきますよね 久しぶりに記事を書きます。「Vertical Rhythm」と呼ばれているデザイン手法ご存知でしょうか？さり気なく取り入れることで、文章が読みやすくなったり、レイアウトが整ったりすることが期待できるという。 デザインに限った話ではないが、完璧な正解など存在しないと思うので、あくまで一つの考え方として捉えて頂ければと思います。 実例を挙げながら進めて行きますので、「Vertical Rhythm」の考え方とその良さ、便利さをきっと理解してもらえるんじゃないかと思います。 前書き クライアントに「説得力のあるデザイン」を届けよう！ LIGでデザイナーをやってて、よくベテランデザイナーさんにこういう風に言わ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
神アップデート！プロトタイピングツール「Prott」のワイヤーフレーム機能がめっちゃ良い！｜男子ハック
今年気になったハイクオリティなデザインUIキット − 2014 - NxWorld