ヘッダー（グローバルナビゲーション）のデザイン事例100選｜akane
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、ヘッダー（グローバルナビゲーション）のデザイン事例を調べてみました！パターンごとに分類しながら紹介していくので、どうぞ最後までお楽しみください✍ はじめに：グローバルナビゲーションとは？グローバルナビゲーションとは、Webサイトの全ページに共通して表示される「主要なコンテンツへの案内リンク」です。 一般的には画面上部のヘッダーに設置されることが多く、ユーザーが「今、どこにいるのか？」「目的のページはどこか？」と迷わないように誘導する大切な役割があります。 どんなサイトを作るときもほとんど必須のパーツですが、わたしは気付けばいつも似たようなレイアウトを使いがち…。そこで今回は、グローバルナビゲーションのデザインを100事例見比べて分類してみます🔍 ・ ・ ・ 1. スタンダード型まずは、一般的に「ヘッダー」の言葉で想像
Chromaticを導入しました！
はじめに 半年くらい前にプロジェクトにStorybook及びChromaticを導入したのでその知見を今更まとめたいと思います。 Chromaticは開発者１人だけではなくエンジニアチーム全体、更にはデザイナーやPM/PdMみんなで使っていくことによってその効果が何倍にもなるツールです。Chromaticがどんなツールなのか、どうやって使うことができるのか、について書きたいと思います。 Chromaticとは何か？ ChromaticはStorybookをベースとしたUIテストツールです。Storybookのチームによって開発されており、フリーミアム型のサービスです。 簡単なイメージとしては、ローカルにあるStorybookをCDNにデプロイしたもの、みたいな感じです。 https://www.chromatic.com/docs/ より デプロイすることで同じStorybookをチームみ
フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる
TikTok担当者が語るアプリを夢中にさせた3つの理由。企業がユーザーと上手く広告コミュニケーションを取るコツとは？｜モバイルマーケティング研究所｜モジュールアップス – ModuleApps
TikTokを夢中にさせる3つの要素 ではなぜ、こんなにTikTokが利用されているのだろうか。 それには3つの理由があるという。1つ目は「Creation」。TikTokには、音楽とエフェクトが豊富に取り揃えており、ユーザーはそこから簡単に、クリエイティブな15秒の短い動画制作ができる。 2つ目は「Contents」。誰もが簡単に動画制作ができるので、面白いコンテンツが豊富にある。それに加えて、TikTokの運営元はAIの会社であるため、AIのアルゴリズムを使って、ユーザーの世界観が広げられるようなおすすめのしかたを行っている。 3つ目は「Connection」。TikTokのユニークなインターフェースが、ユーザーとコンテンツのつながりを加速している。例えば、「雨効果」というエフェクトが世界中で流行っており、このテーマだけでも日本で25万本以上の動画が投稿されているという。こういったとこ
読みやすさのデザイン備忘録 | 深津 貴之 (fladdict) | note
noteのコア体験は、「読む楽しさ」と「書く楽しさ」だと考えています。 本来ならコア体験は、調査でしっかりと導くべきものです。しかしアカデミックなUXとは異なり、実際のスタートアップ環境では時間とリソースに限界があります。このため調べながらも、走り出さなければなりません。 まず序盤はヒューリスティック（経験）ベースのデザインを行いつつ、調査やテストが可能なところから、裏づけやチューニングを行う流れになりそうです。 以下、「読書体験」における「可読性」のパートのメモ。noteチームにとりあえず提案する予定の諸々です（現時点では個人の見解です）。基本的には「当たり前のことを、当たり前に」やる予定。「これもやっとけ」的なことがあれば、タイポグラファーの諸先輩の方々には、ぜひご意見をお伺いできればと。 書体をサンセリフ系に変えるべきか？デジタルでは、一般的にサンセリフ体の可読性は、ローマン体よりも
UIを模写してみてわかること - Kamihira_log at 10636
先日のこと，カードソーティングゲームを元にUIをつくる演習の回で，「模写」を取り入れてみた．経緯として，昨年度の同じ課題の際に，ペーパープロトのスケッチを描くあたりで手が止まってしまう学生が多くて，毎日いろんなアプリを使っているのにUIは本当に見えないものなのだなぁ，という気付きがあった．でも，考えてみればUIはよく出来ていればいるほど，透明化して意識から消えてしまうものだ．デザインする以前にそもそも意識化する必要があるんじゃないか・・・と思って試しにやってみた次第である．軽くググってみたけど，UIの模写を教育の場で取り入れている例はほとんど無いようだ． ここで模写するアプリとして，料理レシピサービスのクックバッドを選択した．理由として，まず，学生達でも一度は使ったことがあるサービスであること（クックパッドはなんと月間6000万以上のユーザ数らしい．凄い数字だ）．そして今回のカードソーティ
DHTMLX JS Library | JavaScript/HTML5 UI Framework | JavaScript UI Library
Boost development with JavaScript UI Libraries Easy-to-use and feature-rich JavaScript components that perfectly fit your solutions in any domain and of any complexity.
あなたは今も犯している！？モバイルUXの7つの失敗 - ふろしき Blog
ここ最近、モバイルWebコミュニティにて、Apptimize社のトップであるLynn Wang氏がポストした「7 Mobile UX Mistakes You’re Probably Making Right Now」が話題になっています。 www.sitepoint.com その内容とは、彼女自身が、A/Bテストを使い様々なモバイルアプリの改善を行い、その中で得られた知見をまとめたものです。若干、煽り気味なタイトルに見えますが、中身はしっかりしていて、多くの人がなんとなく感じていることをキレイに言語化しています。個人的にも、参考になると感じています。 本人の許可が頂けたので、日本語らしく読めるようざっくりと意訳し共有します。 1. 不必要にサインインをさせようとする 多くの人々は、ユーザのサインインが価値を持つものだと考えています。しかし、時にサインインは、ユーザに苦痛を与えます。たとえ
クライアントとデザイナのためのUX/UIデザインの手引き | POSTD
出来の良いUXデザインとUIデザインはプロダクトを全く別の新しいレベルのものにしてくれます。しかし、コミュニケーションがうまくできていなければ、クライアントにとってもデザイナにとってもいい結果は生まれません。 UXデザインとUIデザインのプロセスがうまくいけば、ユーザにとってシンプルで明快な使いやすいプロダクトができ上がります。 DUX はエストニアに事務所を構えるKristian LemberとKevin Crepinの2人が経営しているUX/UIデザインのスタジオです。彼らは使い勝手の良いプロダクトを作るエキスパートです。DUXでの業務は、レストラン予約に 便利なアプリ や自分に合った電気会社の料金プランを検索できる サービス など多岐にわたっています。 現在もてはやされている リーンスタートアップの考え方 にあるように、大企業でさえも今はLemberたちが経営するような小規模のスタジ
TechCrunch
The IRS will test a free tax filing service in 2024 for a subset of lucky taxpayers in as many as 13 states, the agency announced today. Direct File, as the service is called, is a shot across the bow
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
UIデザインの参考になるサイトまとめ | ナナメウエblog
毎日仕事中と寝る前にチェックしてるUIの参考になるサイトをまとめました。 もう、見ているだけで涎が出ますね。 Dribbble – Following もはや知らない人はいないでしょう。世界中からハイレベルなデザインが集まるこのサイト。3時間に1回は見てます。 JAYPEG 日本版Dribbbleというとわかりやすいかもしれません。昨年末にできたばかりですが、すごく好きです。投稿しまくってます。自分で作ったUIを素材として公開してたりします。1時間に1回は見てます。 Inspired UI – mobile ui patterns カテゴリーが細かく分かれていて非常に嬉しいです。数も豊富で見やすいサイトです。 iOS Mobile Patterns カテゴリーがわかりやすく、マウスが拡大鏡になるので細部まで見ることができます。 iPad and iPhone Design Ins
50 Free UI and Web Design Wireframing Kits, Resources and Source Files — Smashing Magazine
Planning and communication are two key elements in the development of any successful website or application. And that is exactly what the wireframing process offers: a quick and simple method to plan the layout and a cost-effective, time-saving tool to easily communicate your ideas to others. A wireframe typically has the basic elements of a Web page: header, footer, sidebar, maybe even some gener
様々なイケてるUIを参考にできるサイト | バシャログ。
足掛け2年、全ての関連作品を見てからアベンジャーズを見て最高に盛り上がったminamiです。 Webデザインの中でもサイトのUIデザインは近年重要性を増していると思いますが、デザインする際のインスピレーションを受けられるサイトをご紹介します。 UI Patterns UI Patterns User Interface Patter Libraryというサイト名通り、UIが体系的にまとめられ解説されています。「Design patterns」ではそれぞれのUIに対して、どういう問題を解決してくれるものなのかの詳細な解説があるので、普段なんとなく使っているUIを基礎から勉強し直せます。 ui parade. ui parade. UIを種類別に集めたサイト。なかなか洗練されたものが集まってますね。 PATTERN TAP PATTERN TAP 良さ気なUIのスクリーンショットが集まるサイト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ネット銀行、銀行アプリの振込時のUI/UX・デザインを比較してみました｜UI/UXデザインを得意とするWebサイト制作会社｜株式会社ヒカリナ
UIデザイン講習会
UIデザイン
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
TechCrunch