スムーズに検索させよう！複雑な検索をするときの画面やUIパターン | SINAP
こんにちは、久保田です。今日はオンラインショッピングや物件検索などで使用される、検索画面や検索時に使われるUIを見ていきたいと思います。検索と一口に言っても、用意されたカテゴリーの中から1点選ぶものから、複数項目を選べる複雑な検索など様々です。そもそも検索はユーザーが目標物にたどり着くための便利な機能ですが、選択項目が多かったり、各条件が関係し合っている場合などは、見せ方を工夫しないと検索そのものが役に立たなくなってしまいます。事例をあげながら見ていきますので、検索機能のデザインをする際の参考にしてみてください。 もくじ大きく3構成にてご紹介していきます。 よくある検索方法複雑な検索（詳細検索）工夫されたUIやデザインパターン 1. よくある検索方法例えば、オンラインショッピングサイトで買い物をするとき、サイトトップページからユーザーはどのように検索をするでしょうか？国内の主要なECサイト
Webサイトデザインの横幅サイズ！もう何pxか迷わない！ 2017年1月版
こんにちは。FASTCODINGデザイナーの七転び八重子です。みなさん、Webデザイン時のワイドサイズやファーストビューサイズを何ピクセルに設定してますか？私は半年ごとに支流のサイズを確認しているので、２０２１下半期スタートに合わせてまとめてみました。前回2020年10月にまとめましたが、今回は、デザインのレイアウトも考慮に入れています。目次 ソリッドレイアウトorリキッドレイアウトorフレキシブルレイアウト？ ソリッドレイアウト（固定レイアウト）とは？ リキッドレイアウト（可変レイアウト）とは？ リキッドの進化系... どうも、FASTCODINGディレクターのせりなです。 Webサイトを制作するとき、デザインの横幅を何pxにすればいいかなーって思ったことありませんか？ パソコンは何pxで作るの？スマートフォンは何pxがいいの？ って聞かれることが多いので、デザインの横幅でもう迷わないた
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
2015年以降に起こっているWebトレンドのまとめ&今後のトレンドは？
スマートフォンが普及し、デスクトップやモバイルの速度も安定してきたので、それに合わせてホームページのデザインも変化しています。 もちろん、定番で形式化されたデザインやレイアウトもある程度は存在していますが、挑戦的なデザインはどの時期にもあるものです。 とりわけ、モバイルファーストが急速に普及していった2015年を境に、ホームページのデザインは次の段階へとステップアップしています。 スマートフォンでのホームページの閲覧がデスクトップを上回ったことで、スクロールを重視したり、マルチデバイスに合わせたデザインが一般化してきたので、いかにスマートフォンでも閲覧しやすく、デザインや機能性も保持できるかが重要になってきます。 今回は、2015年以降に起こっているWebトレンドのまとめと今後のトレンドの大胆予測をご紹介していきます。 ホームページやアプリのデザインを行う機会のある方は、ぜひこの機会にこれ
【2016年】ディレクター必見！スマホ用グローバルナビゲーションのトレンド7選
近年、急速にスマートフォンの普及が進む中、PC版とは異なるUI・UXで、スマートフォン用に制作されたWebサイトが増えています。 これまでは「PC」が主体で制作されていたWebサイトですが、若い世代では"PCを所有していない人"も多く、スマートフォンだけで携帯電話とPC、双方を兼ねて使っているという人も少なくありません。 そのため、スマートフォンサイト（以下、スマホサイト）のUI・UXに関しても、より使いやすさというのが求められる時代になってきていて、必要とされるポイントとしては、画面が小さいため、視認性や可読性の高さ、タップのしやすさなどになります。 そこでユーザをストレスなく、目的とするページに遷移させるためにも重要となってくるのがグローバルナビゲーション（グローバルメニュー）の役割です。 今回は、実例をもとに、様々なスマホサイトのグローバルメニューをご紹介します。 各グローバルメニュ
スマホサイトのナビメニューを見直そう！基本3パターンの長所と短所、改善ポイント
ウェブやモバイルアプリのナビゲーションは、直感的で予測できるべきです。新しいユーザーとリピーターの両方が、どのようにアプリが操作するのか理解できるべきなのです。 しかしモバイルの小さな画面上では、分かりやすくアクセスしやすいナビゲーションメニューを作成するのは大変な作業で、コンテンツの優先順位に応じてUI要素が必要になります。異なるナビゲーションメニュー・パターンを利用し、他の解決方法を試みても、他のさまざまなユーザビリティーの問題点が出てきてしまいます。 この記事では、ハンバーガーメニューとタブメニュー、ジェスチャー型ナビゲーションといった、モバイルアプリの基本的な3つのナビゲーションパターンのメリットやデメリット、デザインの解決方法について詳しく見ていきましょう。 コンテンツ目次 1. ハンバーガーメニュー 概要 メリット デメリット デザインの解決方法 2. タブメニュー 概要 メリ
これでもう悩まない！2017年のデザイントレンド完全ガイド
2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンドを掘り下げてみていきましょう。 デザイントレンドはメディアやテクノロジー、ファッション業界、そして最近では「使いやすさ」を追求するユーザビリティーなどに影響を受けています。トレンドは徐々に細かく枝分かれし、いつの間にか同じように消えていきます。 基本的にデザイントレンドの寿命は1〜2年。2017年のデザインは、2016年のトレンドを引き継いだものとなり、雰囲気もここ数年よく利用され、親しまれているものと言えるでしょう。Google マテリアルデザインの影響力は今年も強く、対応にはいくつかの変更が必要になります。 Adobe が2017年デザイントレンドを発表！確認しておきたいポイントとは？ 2017年のWebデザインはどうなる？
Apple Pay
設定は一瞬。Apple Payの設定は簡単です。クレジットカードなどをiPhone上のウォレットアプリに追加するだけで、すぐに使えます。Suica、PASMO、ICOCAを加えれば、iPhoneまたはApple Watchをかざすだけで、自動改札をスムーズに通ることもできます。カードのポイントはすべて引き継がれ、特典もこれまでと同じように利用できるので安心。がんばって貯めたポイントやマイルを失うことはありません。 カードを追加する方法 もう、あなたのデバイス上にあります。Apple Payは、iPhone、Apple Watch、Mac、iPadに内蔵されています。登録や年間手数料は不要。別のアプリのダウンロードは不要。複雑な設定プロセスは不要。面倒な作業も不要です。 交通機関の利用もここまで簡単。Suica、PASMO、ICOCAをApple Payに追加すると、これまで以
＜カプセルホテル＞発祥地・大阪で進化 外国人や女性向けに （毎日新聞） - Yahoo!ニュース
カプセルホテルの発祥地・大阪で、外国人旅行者や女性客をターゲットにした新しいタイプのカプセルホテルが相次いで登場している。背の高い外国人が泊まれる長いカプセルや女性同士で泊まれるツインルーム、ジムやプールを完備する施設も。大手企業の採用選考が今月１日から解禁されたが、就職活動生を迎える長期滞在型プランも注目を集めている。誕生から３７年たった今、客層も様変わりしている。 カプセルホテルは１９７９年、建築家の故黒川紀章氏の監修で日本で初めて大阪・梅田に誕生した。ビジネスマンの利用が大半だったが、最近は外国人や観光客の利用が急増している。 大阪でサウナ施設を展開する「ニュージャパン観光」は２０１４年、急増する外国人観光客を狙った男性専用のカプセルホテル「カバーナ」（１泊４１００円～）を、観光名所の道頓堀（大阪市中央区）で開業した。背の高い欧米の男性でもゆったりとくつろげるように、カプセルの奥
問題だらけの日本のモバイルサイト、整備を急ぐべき--アドテック東京
12月1、2日に開かれた「ad:tech tokyo 2015」のセッション「消費者の信頼を勝ち取るモバイルサイトの条件とは」では、企業の「モバイル」に対する意識の遅れ、感覚のずれが指摘され、モバイルサイトの整備を急ぐべき理由が語られた。 登壇者は、モデレーターを務めたドーモ代表取締役の占部雅一氏、グーグルのシニア パフォーマンス ソリューション エキスパートである水谷嘉仁氏、パブマティックのカントリーマネージャーである前川洋輔氏、花王のデジタルマーケティングセンター デジタルコミュニケーション室 リーダーである田中剛氏。 「モバイルシフトが始まった。いま、『モバイルサイトを作るのがよい』と考えている方の95％くらいは『表示（見た目）』にしか興味がない。サイトの表示速度やOne Web（あらゆるデバイスやブラウザで同じ機能を提供すること）、ウェブを構造化することは、ほとんど考えられていない
【VIP】webディレクターだけど、初心者に役立つサイト教える てんこもり。
1: 以下、＼(^o^)／でVIPがお送りします 投稿日：2015/02/06(金) 17:42:31.05 ID:flJZIImcH 最近クソみたいなデザインとグッチャグチャのソースコード書いてる ミーハー丸出しアフィサイトが増えてきて鬱陶しいから、 これからサイト作る初心者用にサイトを紹介していく これ以上俺のウェブサーフィンライフを邪魔すんじゃねえぞ
アプリUI/UXデザイナー必見！「ハンバーガーボタン」ナビゲーションを使うとユーザーエンゲージメントが半減することが発覚 | ゴリミー
あなたが作っているナビゲーションボタンは今流行りの「ハンバーガーボタン」、またの名を「ナビゲーションドロワー」を採用しているだろうか。それとも一覧で表示している「タブボタン」を採用しているだろうか。 クリーンでシンプル、メインコンテンツの表示領域が最も広く確保できるなどいいこと尽くしの「ハンバーガーボタン」ナビゲーション。一方で、常にボタンが表示されメインコンテンツの表示領域が必然的に狭くなってしまう「タブボタン」ナビゲーション。見た目のデザインとしては当然「ハンバーガーボタン」の方が良い。では実際にユーザーとしても同様の見解なのだろうか。 クリーンでシンプルだが、ユーザーは操作方法を覚えられない 「ハンバーガーボタン」もしくは「ナビゲーションドロワー」と呼ばれるナビゲーションUIは数多くのアプリに見られる。Googleもアプリデベロッパー向けにオススメのデザインパターンとして推奨している
World Wide System（WWS）│ WEBの仕掛け集団
SaaS SmartPRシリーズ（オンラインキャンペーンツール） SmartPRオープンキャンペーン・会員連携企画 SmartReceico（LINE応募型）マストバイ（レシート・シリアル応募） SmartReceico（Web応募型）マストバイ（レシート・シリアル応募） SmartReceicoマイレージ来店・購入時にスタンプ・ポイント付与 SmartStamprallyデジタルスタンプラリー SmartStampCardリピータ向けデジタルスタンプラリー SmartKujiスマホ抽選・電子クーポン SmartContest（写真）コンテスト＆投票審査 SmartContest（動画）コンテスト＆投票審査 SmartE-Couponデジタルクーポン SmartMap Proノーコード・デジタルマップ作成 AdminDXシリーズ 結果通知システムPCR検査・昇格試験・合否発表など 予約シス
mineo （マイネオ）
mineoの特長 mineo（マイネオ）や格安スマホサービスがはじめての方へ はじめての方へ 格安スマホサービスの中でも選ばれるのには理由があります！ mineoが選ばれる理由
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイトの横幅まとめ - ULTRAZONE
INFINITY STYLE
Am I Responsive?
大阪高槻市 日本最初毘沙門天 神峯山寺 Kabusanji
あなぶき興産 | 人にときめき、街にきらめきを
Responsive Web Design JP（日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト）
