LATEST
ブルータリズムWebデザインとは？あえて崩す表現の意図
ブルータリズムは、装飾を削ぎ落として素材をそのまま見せるWebデザインの表現です。目を引く一方で、読みやすさや信頼感を犠牲にします。成立する条件、企業サイトで採用してよい範囲、そして「崩れている」と受け取られないための線引きを整理します。
KNOWLEDGE
UI/UXのナレッジ
使いやすさは、
設計で決まる。
UI/UXに関するナレッジ記事です。現場の制作・運用で培った実践的なノウハウを解説します。（全44記事）
該当する記事は見つかりませんでした。
-
見出しデザインで目を引くには？装飾のパターンと使い分け
見出しの装飾は、目立たせるほど効果が上がるわけではありません。装飾を足すと見出し同士の上下関係が壊れ、拾い読みしている読者が構造を追えなくなります。装飾のパターン、選ぶ基準、決める順序、そして運用で崩れないようにする方法を整理します。
-
スクロールアニメーションは効果があるのか｜使いすぎると成果が下がる理由と判断基準
スクロールに合わせて要素を動かす演出は、印象を作る一方で読む速度を落とします。読み手のスクロールより動きが遅いと、内容が現れる前に通り過ぎられます。種類ごとの適性、避けるべき使い方、実装で確保すべき条件、効果の測り方を整理します。
-
グラスモーフィズムとは？すりガラス風デザインが成立する条件と、避けるべき場所
グラスモーフィズムは半透明とぼかしで奥行きを出す表現です。見栄えはしますが、背景次第で文字のコントラストが変わるため、読めるかどうかを保証できません。成立する条件、使ってはいけない箇所、描画負荷、そして採用の判断基準を整理します。
-
マイクロインタラクションとは？小さな動きが操作を助ける仕組みと、入れるべき箇所
マイクロインタラクションは、ボタンや入力欄などの小さな動きです。装飾として入れると操作を遅くしますが、状態を伝える目的に絞れば迷いと問い合わせを減らせます。構成要素、入れる箇所の判断、長さの目安、止められるようにする対応を整理します。
-
カード型レイアウトが向く場面と、向かない場面｜並べると比較されなくなる理由
カード型は情報を整理して見せられますが、すべてが同じ重みに見えるため優先順位が伝わりません。向く条件、避けるべき場面、1枚に入れる情報の決め方、そして並べ方の判断を整理します。
-
ECサイトのスマホ対応で見るべき箇所｜購入までの各段階で起きる離脱
スマホでの購入率が低い原因は、デザインの見た目より入力と確認の手間にあります。商品を探す、選ぶ、買うという段階ごとに起きる離脱と、優先して直すべき箇所を実務の順序で整理します。
-
スクロール率からLPを改善する｜どこで読むのをやめたかを特定する手順
スクロール率は離脱箇所を特定できますが、そこが原因とは限りません。数字の読み方、離脱が正常な箇所とそうでない箇所の見分け方、そして改善の優先順位のつけ方を実務の順序で整理します。
-
CTAボタンの設計｜文言と配置が、色よりも成果を動かす
ボタンの改善は色から始めがちですが、実際に効くのは文言と配置と個数です。押した後に何が起きるか伝わる文言、置くべき位置、増やしすぎたときに起きること、そして検証の順序を整理します。
-
スマホで押しやすいボタンの設計｜大きさより間隔が誤タップを決める
ボタンを大きくしても誤タップは減りません。原因は要素同士の間隔と、指が届く位置にあるためです。押せる領域の考え方、隣接要素との距離、画面上の配置、そして確認方法を整理します。
-
カスタマージャーニーマップは作るべきか｜作って終わらせないための条件
ジャーニーマップは作ること自体が目的になりやすい成果物です。作る価値がある条件、想像で埋めた場合に起きること、Webサイトの改善に接続する方法、そして簡易版で足りる場合を整理します。
-
UIのフィードバック設計｜操作が伝わらないと、利用者は同じ操作を繰り返す
反応のない画面は、二重送信や離脱を生みます。押したことが分かる、処理中だと分かる、終わったことが分かる。この3つが揃っていない箇所を見つける方法と、待ち時間の長さごとの見せ方を整理します。
-
UIの一貫性はなぜ成果に効くのか｜崩れる原因と、揃えるべき範囲
一貫性は見た目の問題ではなく、判断にかかる時間の問題です。崩れると何が起きるのか、揃えるべき範囲とそうでない範囲、運用の中で崩れていく原因、そして復旧の手順を実務の観点から整理します。
-
ユーザビリティの10原則を自社サイトの点検に使う｜項目ごとの確認方法
ヤコブ・ニールセンの10原則は、専門家でなくても自社サイトを点検できる枠組みです。各原則が実際のWebサイトで何を指すのか、どう確認するのか、そして違反していた場合に何が起きるのかを具体的に整理します。
-
UXデザインの5段階モデルとは｜手戻りが起きる原因を層で説明する
5段階モデルは理論として知られていますが、実務での価値は手戻りの原因を説明できる点にあります。下の層が決まらないまま上を作ると起きること、発注側が各段階で確認すべきこと、判断の順序を整理します。
-
UXリサーチの手法の使い分け｜知りたいことが決まれば、方法は決まる
インタビュー、アンケート、行動観察、ログ分析。どれを使うかは手法の優劣ではなく、知りたいことが「なぜ」か「どれだけ」かで決まります。目的別の選び方、少人数でできる方法、そして聞いてはいけない質問を整理します。
-
色覚多様性に配慮した配色の考え方｜色だけで情報を分けない設計
赤と緑で状態を分ける表示は、一定の割合の人には区別できません。日本人男性の約5%という頻度を踏まえたうえで、色以外の手がかりを足す方法、実務で問題になる箇所、そして自社サイトを点検する手順を解説します。
-
配色のコントラスト比の基準｜WCAGの数値と、実務での使い方
薄いグレーの文字は洗練して見えますが、屋外や高齢の閲覧者には読めません。WCAGが定める4.5:1と3:1という基準の意味、大きい文字の扱い、ボタンや境界線に必要な比率、そして自社サイトを無料で点検する手順を解説します。
-
読みやすい文字サイズの決め方｜サイズ・行間・1行の文字数を数値で揃える
読みにくいページの原因は文字サイズだけではありません。行間と1行の文字数が揃って初めて読みやすくなります。3つの数値の決め方、業種や客層による調整、スマートフォンでの確認方法、そして小さい文字が使われる箇所の点検を解説します。
-
グリッドレイアウトの作り方｜整って見えるサイトが揃えている3つの数値
整って見えるサイトと雑然としたサイトの差は、センスではなく揃っている数値の数です。グリッドの構成要素、実務で決める3つの数値、崩してよい場面と崩してはいけない場面、そして自社で点検する方法を解説します。
-
使いやすいWebサイトの条件とは？自社で点検できるチェック項目
使いやすさを「見つけられる・読める・操作できる・迷わない・待たされない」の5観点に分解し、観点別のチェック項目を提示。15分でできる自己点検手順と、制作会社への具体的な伝え方まで解説します。
-
グローバルナビの設計｜項目の決め方と並べ方
グローバルナビの項目数の考え方、入れる項目と入れない項目の判断基準、社内用語を避けるラベルの決め方、検討の順序に合わせた並び順、スマートフォンでの設計と項目の減らし方を解説します。
-
アイコンとイラストの使い方｜使う基準と使わない基準
アイコンが機能する条件と機能しない条件を整理し、イラストと写真の使い分け、スタイルを統一する決め事、アクセシビリティ上の注意、素材や生成物を使う際の権利確認までを解説します。
-
マイクロコピーとは？CVRを動かす短い文章の書き方
マイクロコピーが効く場所を優先順位順に整理し、CTAボタンの文言、押す直前の不安を消す一文、フォームの補足、エラーメッセージ、送信完了画面の書き方を具体例で解説します。
-
Webアクセシビリティ対応はどこまでやるべきか｜優先順位の決め方
Webアクセシビリティの対応範囲を決めるための優先順位を解説。費用をかけずに直せる7項目、色だけで情報を伝えない設計、制作会社への具体的な伝え方、チェック方法までを整理します。
-
LPのコンバージョン率の平均は？業種別の目安と改善の考え方
業種別の平均CVRを目標に使えない理由（分布の偏り・条件の違い）を整理し、自社の基準値を設定する手順を解説。CV地点の定義による変動、CVRが動いたときの読み方、判断に必要なデータ量までまとめます。
-
モバイルファーストデザインとは？重要視される理由と設計のコツ
モバイルファーストを「表示の対応」ではなく「設計の順序」として整理し、PCから設計すると崩れる3点を解説。縦1列からの設計手順、実機で確認する項目、PCへの展開の考え方までまとめます。
-
コーポレートサイトリニューアルの進め方｜失敗しない依頼手順
コーポレートサイトのリニューアルで最も損失が大きいURL変更による流入消失を防ぐ手順を中心に、目的の数字での定義、依頼前にそろえる情報、工程ごとに発注者が判断すること、公開前後の確認事項をまとめます。
-
縦長・一枚物LPのデザイン設計のコツ｜離脱を防ぐ構成の作り方
縦長LPの離脱がブロックごとの通過率の掛け算で積み上がる構造を示し、訪問者の判断順に並べた標準構成を解説。LPの長さの決め方、スマートフォンでの1画面設計とCTA配置、離脱箇所の特定方法までまとめます。
-
CVRを改善するデザイン要素とは？押さえるべき7つのポイント
CVRをファーストビュー通過から送信完了までの5段階に分解し、落ちている箇所を特定する方法を解説。影響の大きい順に7つの改善ポイント、費用をかけずにできる改修、判断に必要なデータ量、数字が動かないときの確認先をまとめます。
-
デザインシステムとは？導入するメリットと作り方の基本
デザインシステムを4段階に分け、中小企業が最初に作るべき「1枚のルール」の中身を解説。既存サイトからの棚卸し手順、導入で得られる効果、運用が形骸化する原因と対策、導入判断の基準までまとめます。
-
最新Webデザイントレンドの取り入れ方｜採用する基準と見送る基準
Webデザインのトレンドを「機能の改善」と「表現の流行」に分けて判断する軸を解説。近年の主な傾向と採否の考え方、取り入れる際の4条件、企業サイトで見送るべき表現、古く見えないサイトの作り方をまとめます。
-
Fの法則・Zの法則とは？ユーザーの視線誘導を意識したレイアウト設計
Fの法則・Zの法則の内容と成立条件を整理し、情報量による使い分けを解説。スマートフォンで前提が変わる理由、法則より優先度が高いジャンプ率・余白・色の使用頻度、ヒートマップでの検証方法までまとめます。
-
Webフォントの選び方｜与える印象の違いと業種別の選定基準
Webフォントを印象・可読性・表示速度の順で判断する基準を解説。書体ごとの印象の違い、見出しと本文の組み合わせ、日本語Webフォントが重い理由と対策、社内で合意するための進め方までまとめます。
-
ユーザビリティテストのやり方｜低コストで始める実践手順
5人・実機・タスク形式で実施するユーザビリティテストの手順を解説。仮説の絞り方、タスクの作り方、聞いてはいけない質問、観察結果の整理と改善の優先順位付け、GA4やA/Bテストとの使い分けまでまとめます。
-
Webサイトの配色の決め方｜ブランドカラーから展開する方法
Webサイトの配色をベース・メイン・アクセントの役割で分け、ブランドカラーから使用色を展開する手順を解説。CVボタンの色を決める基準、コントラスト比の目安、配色が崩れない運用ルールまでまとめます。
-
Webデザインにおける余白の効果｜情報を伝わりやすくする使い方
余白が担う視線誘導・グルーピング・可読性の3機能を整理し、要素間の余白量を決めるルール、行間や文字数の目安、詰めてよい場面と詰めてはいけない場面、「余白が多い」と指摘されたときの説明方法を解説します。
-
Webデザインにおけるペルソナ設計の考え方と作り方
サイト設計に使えるペルソナの7項目（課題・きっかけ・検討段階・比較対象・不安・決め手・情報源）と、既存顧客への3つの質問から材料を集める手順、設計判断への落とし込み方を解説します。
-
ワイヤーフレームとは？作る目的と作成時に押さえるべきポイント
ワイヤーフレームで決めることと決めないことを整理し、発注者がレビューで確認すべき7項目を解説。情報設計・デザインカンプとの違い、自社で作る手順と用意する材料、手戻りを生む5つの失敗までまとめます。
-
情報設計（IA）とは？わかりやすいサイト構成の作り方
情報設計（IA）の成果を到達率やサイト内検索率で測る方法と、検索語句・問い合わせ内容から構成を作る手順を解説。ナビゲーションの項目数とラベリング、SEOとの接続、リニューアル時のリダイレクト設計までまとめます。
-
入力フォームの離脱率を改善するデザインの工夫｜商談化まで見た設計
フォームの離脱を到達前・入力中・送信時の3段階に分けて原因を特定する方法を解説。入力項目の要否判定、スマートフォンでの入力負荷を下げる実装、エラー表示の設計、商談化数での効果測定までまとめます。
-
ファーストビュー設計の重要性｜離脱を防ぐ最初の3秒の作り方
サイト・LPの離脱を左右するファーストビュー設計を解説。必ず入れる6要素と入れてはいけない要素、流入経路別の設計の違い、スマートフォンでの注意点、改善効果を測る指標と優先順位までまとめます。
-
LP制作費用の相場は？価格帯別の内訳と成果から逆算する予算の決め方
LP（ランディングページ）制作費用の相場を価格帯別に整理し、見積の内訳、工数からの検算方法、追加費用になりやすい項目、成果から逆算して予算を決める手順と成果が出る構成のポイントを解説します。
-
UIデザインとUXデザインの違いとは？具体例や設計プロセス、改善ポイントをわかりやすく解説
Webサイトやアプリの制作現場では、「UIデザイン」と「UXデザイン」という言葉が頻繁に使われます。しかし、両者の違いを明確に説明できず、「UIは見た目、UXは使いやすさ」とだけ理解している方も少なくありません。 UIと […]
