UIにも必要な錯視への考慮、デザイナーが行う視覚調整｜Goodpatch Blog グッドパッチブログ
視覚調整は、人間の脳に対して視覚的なアプローチをとることが多いデザイナーにとって大切なスキルです。 今回は、UIデザイナーが行う視覚調整の主な例を紹介していきます。 視覚調整とは 視覚調整とは、人間の錯視（目の錯覚）を考慮したデザインの調整のことを指します。 身近な企業ロゴに施されていることも多く、Googleのロゴでも取り入れられています。（以下の画像は、Googleのロゴを考察したツイート↓） Is this a joke, Google? pic.twitter.com/qrL8U2Vrhw — Give Me Internet (@GiveMeInternet) 2017年9月25日 この考察内容を見ても、調整前と調整後の違いはかなり微量であるように思えます。本当にここまで細かい調整が行われているのかと疑ってしまいたくなりますが、実際にこのような微妙なデザインの調整はUIデザインに
ユーザーに直感的で分かりやすいボタンとは、UXの観点からくわしく解説
ボタンのクリックレートが低い、ボタンを配置したページにユーザーが長い時間を費やしている、これはボタンが直感的でなく、分かりにくいボタンが原因かもしれません。 コンテンツにおけるボタンの配置、ボタンの形状、導線に基づいた配色など、ユーザーに直感的で分かりやすいボタンをUXの観点から詳しく解説します。 5 Techniques to Make Mobile Call to Action Buttons Intuitive by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ユーザーが分かりやすいボタンとは 1. スキャンパターンに従ってボタンを配置する 2. 形を使って、ボタンをテキストから区別する 3. プログレッシブアクションにカラーを追加する 4. ラベルにあるテキストの太さを変える 5. 優先度の高
デザインカンプから学ぶWebデザイン ｜ 枚方のホームページ制作｜和風デザイン専門店ひだちデザイン
Webデザイナーで入社したのにコーダーになってしまったWebデザイナーで採用されたのにコーダーのポディションに配置されることはしばしばあります。 特に未経験だったり、日の浅いデザイナーに多いです。 Webデザインの知識を一日も早く吸収してWebデザイナーとして一人前になりたい！そう思われることだと思います。 しかし！熟練のデザイナーさんのつくるデザインカンプに毎日触れるコーダーからもWEBデザインの知識を得ることは沢山あります。 コーダーだった私がWebデザイナーに転身した経験を踏まえてデザインカンプからWebデザインの知識を蓄える方法を書いていきます。 デザインの意図深く考えるコーディングする際にこのデザインはどういう意図でデザインされているかを深く考える事が重要です。 配色、隙間、配置、大きさ、線の太さなど・・・ これらの全ては、コーディングする際には全て確認していることかと思いますの
skuare.net
AMP（Accelerated Mobile Pages）対応におけるサイト作成と広告表示などなど 当サイトをAMP（Accelerated Mobile Pages）で構成しました。 元々別ページでAMP用ファイルを設けていましたが、スタンドアロンAMPのススメ - Mercari Engineering Blogという記事を見て、統一してしまおうと思ったのがきっかけです。
サイトのメインビジュアルに悩んだときに参考にしたい！11個のレイアウト手法 - Hatsuka
最近のwebサイトは、トップのスライドショーや、1画面にドーンとメインビジュアルがあるものが当たり前になってきています。 メインビジュアルを作るのが苦手な私ですが、ある程度レイアウトのセオリーを知っておくことで、少しは苦手意識が払拭できるのかなと思っています。 ということで今回は、11のレイアウト手法を元に、参考サイトを33個ピックアップしてみました。 1.反復 同じモチーフを繰り返し置くことで、強調させる手法です。 サイズや色を変えてたり、コマ撮りっぽくすることで、リズム感が出ます。 商品やロゴ、人物など、なにか強調したいものを見せたいときに使えます。 Life is electric SAKUZAN｜美濃焼のうつわ 作山窯 good design company 2.対比 2つ以上の要素を、同じ構図や分量で配置する手法。 情報に優劣をつけず等しく見せたいときに使えます。 webではメニ
Webデザイナーが知っておきたい直帰率の低いメインビジュアルの作り方
あなたはウェブサイトにおけるメインビジュアル(別名：キービジュアル/メイン画像)が、直帰率やその後のコンバージョン率(成約率)に大きな影響を及ぼすことをご存知でしょうか？メインビジュアルはお客さまがサイトに訪問した際、最初に目にする要素なので、メインビジュアルの「発言力」や「インパクト」がないとウェブサイトの直帰率(そのページだけ見て離脱してしまう割合)やその後のコンバージョン率に大きく影響してしまいます。 では一体、どのようにすれば「発言力」や「インパクト」を持ったメインビジュアルを作ることができるのでしょうか？それは「キービジュアルの基本原則と基本レイアウト」を知ることが重要です。メインビジュアルにどのような役割があるかを理解することで、どのような要素を配置する必要があって、どんなレイアウトを組めばいいのか理解することができるからです。事実、メインビジュアルをリニューアルしただけで直帰
こういう解説書を待ってた！Webサイトやスマホアプリにおける認知心理学の効果や実際の使用例が分かりやすい
最近のWebサイトやスマホアプリでは、認知心理学が多く取り入れられるようになりました。キャンセルボタンを右と左のどちらに配置すべきか、顔写真を使用した時の目線の向き、ボタンの大きさや配置方法など、心理学のテクニックが使われています。 Webサイトやスマホアプリのインターフェイス、マーケティングにおける心理学の効果やテクニックを解説したオススメの本を紹介します。 本書は、本日発売！！ デザインと心理学の解説書はいくつかありますが、Webサイトやスマホアプリに特化されたものは少ないと思います。 普段実践しているデザインの考え方が言語化されていたり、目にしていたけどこんな効果があるのかという発見もあり、デザイナーだけでなく、ディレクターや制作に携わるすべての人にお勧めです。コンテンツ編集者やブログを書く人にも役立つと思います。
ベテランほど知らずに損してるIllustratorの新常識（7）埋め込み？リンク？ビットマップ画像の配置と、配置した画像の二次利用 - Adobe Blog
ベテランほど知らずに損してるIllustratorの新常識（7）埋め込み？リンク？ビットマップ画像の配置と、配置した画像の二次利用 連載 ベテランほど知らずに損してるIllustratorの新常識 Illustratorの制作フローでは、ベクトルオブジェクトだけでなく、ビットマップ画像を配置しながら進めていきます。 その際、画像を埋め込むのか、または、リンクするのか、といった切り分け問題や、リンク時のパス（ファイルの場所指定）、ネイティブ入稿時のリンク画像の収集など、CC以降で変更された点を中心に、配置画像まわりについて解説します。 埋め込み？ リンク？ ワークフローから考える画像配置 画像の配置 Illustratorドキュメントに画像ファイルを配置するには、［配置］コマンドを用います。 この際、［配置］ダイアログボックスの［オプション］で［リンク］にチェックが入っていると“リンク”とし
基本的な横並び配置のメニューの作り方 – mororeco
html+cssだけで簡単な「横並び配置のメニュー」を作るときに、よくある3パターンのコードをメモしておきます。そのまま使えるようなシンプルなものになっていますので、ご自由にコピー＆ペーストしてご利用ください。 1.横幅20%のcss背景の場合（※レスポンシブ対応） DEMO1 ウィンドウサイズを変えてみるとわかりますがレスポンシブ対応になっています。 まずは、HTMLを見ていきましょう。 共通HTML <header> <nav> <ul> <li><a href="#">navi1</a></li> <li><a href="#">navi2</a></li> <li><a href="#">navi3</a></li> <li><a href="#">navi4</a></li> <li><a href="#">navi5</a></li> </ul> </nav> <div cla
最近のWebサイトで見かける、パンくずリストのデザイン・配置・機能のまとめ | コリス
Webサイトのパンくずリストとは、ユーザーにサイトの階層を伝え、そのページがどこにあるのかを正確に理解できるようユーザーエクスペリエンスを強化します。また、Googleのbreadcrumb schemaにより、その重要性は高まっています。 最近のWebサイトで採用されている、デザインも機能も素晴らしいパンくずリストの実装例を紹介します。 11 Ways Breadcrumbs Bolster UX Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ※サンプルに日本語版がある場合は、日本語サイトに変更しました。 wayfair wayfairのWebサイトはUX全体が素晴らしく、非常に適切なページです。パンくずリストのデザインは大きすぎず、小さすぎず、控えめに存在しているのが好ましい理由です。 パンくずリストはプロダ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ![[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/b46fb0222c516388a0be1ca6e64e87199e362865/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017073001.png)
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog