記事一覧
UI/UXデザインの専門情報ポータル。京谷商会のデザイン・UX部が、地方中小企業の実務者に向けて専門知識を解説しています。
16件の記事を公開中
マイクロインタラクションデザインでUX向上
マイクロインタラクション設計の5つの原則と実装チェックリスト。ボタンやフォームの細かなアニメーションがUX品質を劇的に改善します。
LPのCVR改善は『見せ方』が決め手｜中小企業向けの実践3ステップ
LPのCVR改善に効果的な3つの軸——意思決定フロー分析、フォーム最適化、信頼性デザイン——を実務レベルで解説。小手先施策から脱却し、ユーザー心理に基づいた改善法を学べます。
2026年のUXデザイン最新トレンド、AIの落とし穴と検証が稼ぐ
2026年のUXデザイン最新トレンドはAI普及下でのリサーチ検証スキルの急騰です。AIの『それっぽい』出力を見極め、パフォーマンスとマイクロインタラクションで差をつける現場知識を解説。
【業種別事例】LPデザインでCVR改善を実現する設計原則と具体プロセス
LP デザインによるCVR改善の成功事例を業種別に解説。BtoB・健康食品・不動産の高CVR LPに共通するデザイン原則と、ヒートマップ分析からA/Bテストまでの改善プロセスを紹介します。
Webアクセシビリティ対応の進め方｜事業サイトで今すぐ取り組める5つの改善ポイント
Webアクセシビリティとは何か、なぜ事業サイトに必要なのかを実務担当者向けに解説。画像の代替テキスト、色のコントラスト比、フォームのラベル設計など、専門知識がなくても始められる改善ポイントを実践例とともに紹介します。
LP離脱を防ぐ信頼性デザインの実践｜トラストシグナルの配置とUI設計でCV率を改善する方法
ランディングページでCTAボタンの手前での離脱が多い原因は、信頼性を伝えるUI設計の不足にあるかもしれません。社会的証明、セキュリティバッジ、テスティモニアルなど、トラストシグナルの効果的な配置方法を、実際の改善事例とともに解説します。まずはCTAボタン周辺の見直しから始めましょう。
LP制作の参考事例集｜高CVRランディングページのデザインパターン12選
LPデザインで成果を出すためのパターン12選を業種別事例とともに解説。CVR向上のためのファーストビュー設計・信頼構築・CTA最適化の手法と、LP公開前チェックリスト20項目も収録。
スマホユーザーを逃さないLP設計｜モバイルファーストで考えるUI/UXの実践テクニック
LPのCV率が伸び悩む原因はモバイル体験にあるかもしれません。親指ゾーン・ファーストビュー・フォーム設計など、スマホユーザーの行動特性に基づくLP最適化の実践手法を具体例とともに解説します。
フォーム離脱率を半減させるUI設計の実践知識｜入力しやすさが問い合わせを変える
フォームの離脱率が高い原因はUIにある。ラベル配置、入力補助、バリデーション、ステップ分割など、フォームUIを改善して問い合わせ数を増やす具体的な設計手法を、京谷商会18ポータルの統一フォーム設計の実践から解説します。
WordPress由来の14記事をCSS統一した実践記録｜Cloudflare Pages移行
WordPressから移行した14記事のインラインCSSを削除し、style.cssでグリーンテーマに統一、components.jsでCTA自動注入を実現した全手順を解説。Cloudflare Pagesでの記事デザイン統一の実践ノウハウを公開します。
健康食品LPのデザイン改善で実践した10のテクニック｜WebP変換からSVG図解まで全公開
酪酸菌青汁LPの全面リデザインで実践した10のデザイン改善テクニックを、実装コード付きで解説。WebP変換で97%軽量化、IntersectionObserverによるスクロールアニメーション、SVG図解の実装方法など、地方中小企業でも再現できるLP改善の全記録。
ランディングページのCVR改善チェックリスト: 42の確認項目と改善優先度マトリクス
LP（ランディングページ）のCVR改善チェックリスト42項目と改善優先度マトリクス。Quick Winsから着手する実践的な改善手順を解説。
健康食品LPの配色で売上が変わる？青汁サイトの「青→緑」カラー変更で学んだ実践カラー戦略
健康食品LPの配色がコンバージョン率に与える影響を、色彩心理学・競合カラー分析・自社青汁サイトの実変更事例から解説。70:25:5の配色比率やCTAボタンのアクセントカラー戦略など、実務で使えるチェックリスト付き。
スティッキーセクションバーで実現するスクロール連動ナビゲーション｜ヘッダーが入れ替わるUIの設計原則
スクロールに応じてヘッダーが各セクションのカラーバーに切り替わるUI。position:stickyの活用、z-indexレイヤー設計、ブランドカラー連動を実践的に解説。
タイルフリップで魅せるヒーローデザイン｜視線を奪う動的ビジュアルの設計思想
ヒーローセクションにタイルフリップアニメーションを導入し、世界各地の風景写真を動的に切り替えるデザイン手法。視覚的リズム、色彩設計、レスポンシブ対応の設計思想を解説。
問い合わせが増えるランディングページのUI/UX設計｜CV率を上げる7つの原則
ランディングページのコンバージョン率を左右するUI/UXデザインの原則を実例付きで解説。ファーストビュー設計、CTAの配置、フォーム最適化など、デザイナーでなくても理解できる実践ガイド。