ユーザーの脳や認知の仕組みを活用したUIデザインテクニック38 -認知心理学逆引き辞典-｜SOMPO Digital Lab デザインチーム
こんにちは、SOMPO Digital Labデザインチームでプロダクトデザイナーをしている林です！私は入社1年目・チーム最年少のデザイナーで、現在は先輩のサポートデザイナーとして日々の業務に携わっています。 私のターンでは、新米デザイナーとしての日々の学びの記録を更新していければと思っています。そんな学習記録の1つ目のテーマは「ユーザーの脳や認知の仕組み」についてです。 ユーザーに寄り添ったデザインをするためには、デザイナーがユーザーの脳や認知の仕組みを理解していることが大切ですよね。「認知心理学」は、複雑なユーザー心理を理解するのを助ける重要な知見ですが、学問的な説明が多く、実践まで落とし込むには少しハードルが高い印象がありました。 デザイナーとして認知心理学を実践的に活用していくためには、どのような点に気をつければよいのでしょうか？ その答えを求めて法則が効果的に働いているデザインの
アンカーリンクを使ってページ内リンクを行う最、ヘッダーを固定にしていると思い通りの動きをしてくれないことがあります。 これは、アンカーリンクのジャンプ先がブラウザ上部を基点に表示されるためです。 ヘッダーは固定のままにしたいですが、スクロールするコンテンツが隠れてしまうのは避けたいところ。コンテンツがヘッダーの高さ分下に表示されればちょうどいいですよね。 これを解消する方法として「CSSに記述する方法」と「jQueryを使う方法」があります。 内容的には比較的易しめなものですが、アンカーリンクがずれてしまう現象って割と発生しやすいものかなと思いましたので、今回のブログで取り上げていこうと思います。
3系swiper、4系swiperのオプション記事を以前書いたんだけど、また久しぶりに公式見たら6系まで進んでたから再々記事。 ※この記事は実装方法が解説しているというよりは、オプションを実際触ってみてその効果をひたすら書いた記事になります。 以前のバージョンの記事も需要ありそうだから残しておく。 【4系】こちら 【3系】こちら ※2系以前と5系は記事にしてないです。許して。 5系についてはオススメサイトのリンクを貼っておくのでよければこちら参考に！ Web Design Leaves様の5系に関する記事 swiper.jsってなんぞ？ swiper.jsの公式サイト 簡単に言うと、スライダー系のJSプラグイン。スライダーはswiper以外にもいくつかあるけど、中でもオプションが多く、更新も多い個人的にはかなり熱いプラグイン。 このswiper.jsのメリットデメリットはこんな感じ。 メリ
アンカーリンク（aタグ）を使って、メニューや目次からページ内の特定の場所にジャンプさせることってよくありますよね。 ところがそれにloading=”lazy”などの遅延読み込みを組み合わせると、ジャンプ先がずれてしまいます。 ランディングページでどうしても両者を共存させたかったので、色々調べて解決した方法をご紹介します。 スムーススクロール用のjQueryの記述を変えよう まずHTML側は、ざっくりこんな形だとします。 <ul> <li><a href="#link01">リスト01</a>></li> <li><a href="#link02">リスト02</a></li> <li><a href="#link03">リスト03</a></li> </ul> <div id="link01"> <p>ブロック01</p> <img loading="lazy" src="demo.jpg
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS&jQuery】固定ヘッダー時アンカーリンクの位置を調整する方法
swiper.js6系使ってみたからそのオプションについて(v6.0.4) | なんかいろいろデザインする人
画像の遅延読込でページ内リンクがずれる時の解決法【jQuery】 | KAITEKI CHOKIN