UI/UXデザイン
価値共創型デザインで、サービスの価値を最大化します
UI/UXデザインをはじめとする幅広いクリエイティブ支援で、ビジネス課題を解決します。
本質的な課題にアプローチし、お客様と共にビジネス・サービス・プロダクトの価値を最大化いたします。
LYZONが提供するサービス
-
Service 1
UI/UX診断・分析
LYZON独自のAIスキルを活用したUI/UX診断と、専門家による定性分析を組み合わせた診断結果をご提供します。
数値だけでは見えない課題を可視化し、改善の優先順位と具体的なアクションまで明示します。 -
Service 2
UI/UXデザイン
ユーザー調査や定量・定性データをもとに本質的な課題を見極め、根拠あるUX設計を実践します。
ビジネス成果とユーザー満足の両立を目指し、測定・検証できるUI/UXデザインを実現します。 -
Service 3
デザインシステム構築
デザイン原則やUIコンポーネントを体系化し、チーム全体で活用できるデザインシステム・ガイドラインとして整備します。
制作・運用の属人化を防ぎ、デザインの一貫性と長期的な品質・効率を両立します。
LYZONコーポレートサイトのデザインシステム
LYZONの強み
-
Value 1
デザイン・コーディング・フロントエンドを一貫して対応するスキルを持ったデザインチーム
デザイナーがデザイン設計からフロントエンド実装まで一貫して担当するスキルを有しているため、デザインと開発の意図がずれることなく、高品質なUI/UXをそのまま形にできます。
実装を知るデザイナー集団だからこそ、操作性・表示品質・運用しやすさを同時に最適化したサイトを実現します。 -
Value 2
小規模～大規模サイトデザイン、多業種サイトの幅広い実績
業種・規模を問わず多数のサイト制作に携わってきた知見は、UI/UX設計にも直接活かされます。
様々なユーザー層やビジネスモデルへの対応経験があるからこそ、課題の本質を素早く捉え、成果につながるデザインを提案できます。 -
Value 3
状況に合わせて選べる、スモールスタートから始められるプラン設計
UI/UX診断・デザイン改善・レクチャーなど、目的や予算に応じて複数のプランからお選びいただけます。
まずは診断だけ、改善施策は段階的に、といった柔軟な進め方が可能で、はじめてUI/UX改善に取り組む企業様にも安心してご利用いただけます。
導入実績
Case 1 グローバル統合Web基盤の2サイトを構築
セイコーウオッチ株式会社様
プロジェクト概要
セイコーウオッチサイト(
https://www.seikowatches.com/
) & Grand Seikoサイト(
https://www.grand-seiko.com/
)の2サイトを、Sitecoreを利用し、23か国18言語（2022年5月時点）の全ページのフルリニューアルを約1年間の開発において実現しました。
サイト構成、レイアウト、デザインを刷新するとともに、基幹連携として製品情報や地図情報を連携し、世界中に商品情報をリアルタイムにお届けします。
プロジェクトの成果
-
01
着⽤‧⽣活シーンを想起させるビジュアルで購買意欲を喚起
SEIKOの時計があることで、上質な⽣活を送れるようなイメージを持ってもらえるよう、イメージコンセプトを作成。時計単体の写真ではなく、実際に⾝に付けている写真やインテリアに溶け込んでいる写真を選定しました。
時計の着⽤シーンや空間に馴染んだ写真を使⽤することで、時計がファッションやライフスタイルの⼀部として⾃然に溶け込み、存在感を⾼めています。
これにより、ユーザーが時計を⼿にしたときの使⽤シーンをより具体的にイメージしやすくなり、購買意欲を⾼める効果が期待できます。 -
02
検索導線の改善とメガメニュー強化によるユーザー利便性の向上
リニューアル前のGrand Seikoサイトの検索機能は、左側にメニューがあり、条件を⼊⼒するたびにページの上部へ戻される仕様でした。リニューアル後は、検索条件を上部に配置し、タブ形式に変更。さらに、条件を×ボタンでクリアできるようにデザインし、利便性を向上させました。
Grand Seikoサイトのメガメニューは、以前はテキストリンクのみのシンプルな構成でしたが、リニューアル後は時計の画像を追加し、タブやカルーセルを導⼊。メガメニュー内での導線を改善し、視認性と操作性を向上させました。 -
03
フォントの⽐較検証によるブランド印象の最適化
Grand Seikoサイトでは、フォントの印象でブランドの精密さや上質さを⼗分に伝えることができていませんでした。そこで、複数のフォントをリストアップし、それぞれの特⻑を挙げた上で相対的なイメージを作成し、どのフォントが適しているか⽐較検討を⾏いました。
結果、視認性の⾼さを維持しつつ、ブランド価値を強調できる「秀英明朝」を採⽤。フォント変更により、ブランドらしい洗練された印象が⼀層強調され、精緻で上品なイメージをより効果的に伝えることができるようになりました。
Case 2 サイトデザインリニューアルとパーソナライズ施策の導入
学校法⼈東洋⼤学様
プロジェクト概要
当時のデザインが少し古いデザインになっていたため、デザインのリニューアルを実施しました。デザインリニューアルを行うにあたり、色々な大学サイトや大学サイト以外を調査を行いました。
最新のデザイントレンド、大学サイトとは思えない最先端なデザインを目指しつつ、大学サイトとしての機能を損なわないUI/UXを設計し、実装しました。
プロジェクトの成果
-
01
"⼤学らしさ”を超える、先進的ビジュアル設計
リニューアル前は固定幅レイアウトや情報量の多さから、大学の魅力や在学生の活動が十分に伝わらないという課題がありました。他大学・他業界の先進的なサイトを幅広く調査し、「大学サイトらしさ」にとらわれない最先端のビジュアルを追求。
大学が伝えたい情報とユーザー体験の調和を図ったデザインコンセプトを構築した結果、独自性と先進性を兼ね備えた、大学サイトの枠を超えた新しいUXを実現しました。 -
02
第⼀印象を⾼める、フルスクリーン映像と演出
リニューアルでは、「⼤学らしさ」にとらわれない先進的なデザインを追求し、⼤学が伝えたい情報とユーザーの期待が調和するコンセプトを構築しました。
その象徴として、TOPページにフルスクリーン映像を採⽤。ページロード時のアニメーションと組み合わせることで、訪問者に驚きと⾼揚感を与え、第⼀印象で惹きつける体験を提供しています。 -
03
ブランドカラーを活かし、信頼感と操作性を両⽴
ユーザーの感情や⾏動に配慮し、直感的にナビゲーションできるように⾊の選定を⾏いました。ブランドカラーである東洋⼤学の鉄紺を基調に、信頼感を与えつつ、全体のバランスがとれるように配⾊を調整しています。
この⼯夫により、視覚的な魅⼒と使いやすさを両⽴させたデザインが実現し、UXの向上につながっています。 -
04
ターゲット別パーソナライズで快適なUXを実現
良いUXの実現には、ターゲットユーザーの理解が不可欠です。サイト利用者を入学希望者・在学生・卒業生・保護者・企業研究者の5タイプに分類し、それぞれの目的や関心に応じた導線を設計しています。
本改修ではSitecoreのパーソナライズ機能を活用し、ユーザーの行動をスコアリングしてレコメンドコンテンツをプッシュ表示。直前のセッション履歴をもとに興味ページへ誘導する仕組みも設け、ストレスのないサイト回遊を実現しました。
Case 3 デザインの刷新とSitecore基盤の設計・開発
損害保険ジャパン株式会社様
プロジェクト概要
既存のCMSからSitecoreに移行するにあたりデザインの刷新とSitecore基盤への移行を行いました。
大量のコンテンツに適したテンプレート設計を行い、また、今後のグループ各社のSitecore導入も見据えたうえで、その基盤として機能するようSitecoreの設計、開発を行いました。
その後現在に至るまで損保ジャパン様のWebサイト運用に長く携わらせていただいております。
プロジェクトの成果
-
01
誰もが使いやすいWebを⽬指したUX改善
専⾨機関によるアクセシビリティ診断を通じて、現状の課題を可視化。社内での検討を重ねながら、優先度の⾼い箇所から段階的に改善を進めてきました。
JISレベルAA準拠を⽬標に取り組み、現在は⼀部のコンテンツでその基準を達成しています。誰にとっても使いやすく、アクセスしやすいWeb体験を提供することを⽬指し、UX全体の品質向上に継続的に取り組みました。 -
02
スキップリンク導⼊でストレスフリーなナビゲーションを実現
ユーザーの利便性とアクセシビリティ向上を⽬的としたUX施策として、ナビゲーション項⽬が多く、キーボード操作でメインコンテンツにたどり着きにくいという課題に対応するため、「ナビゲーションスキップリンク」を導⼊しました。
これにより、スクリーンリーダーやキーボード操作を利⽤するユーザーも、⽬的の情報へ素早くアクセスできるようになり、より効率的でストレスの少ない操作体験を実現しています。
また、スキップリンクの視認性にも配慮し、背景とのコントラストや視線の流れを意識した配⾊設計を採⽤。⾃然に認識しやすいUIを⽬指し、誰にとっても使いやすいデザインを実現しました。 -
03
カルーセルのフォーカス問題を解消し操作性向上
キーボード操作におけるアクセシビリティ向上を⽬的としたUX施策にも取り組みました。カルーセル機能を導⼊した際に発⽣した、キーボード操作で⼀部の要素がフォーカスできない問題に対して、プラグインの設定をカスタマイズし、⼿動で正しいフォーカスを適⽤できるよう調整しました。
これにより、キーボードユーザーを含むすべてのユーザーが、より直感的にサイトをナビゲートできるようになり、操作性が⼤幅に向上しました。
Case 4 デザインの刷新とSitecore基盤の設計・開発
ＳＯＭＰＯひまわり生命保険株式会社様
プロジェクト概要
これまでコーポレートサイトと通販サイトが分かれていたため、サイトとして統合しました。
また、既存のCMSよりも更新作業の負担が軽減されるよう、運用業務を考慮したテンプレート設計、及びアプリケーションの開発を行いました。
その後現在に至るまでＳＯＭＰＯひまわり生命保険様のWebサイト運用に長く携わらせていただいております。
プロジェクトの成果
-
01
保険⽤語を視覚的にわかりやすく伝えるUIデザイン
生命保険の検討が初めての方にも直感的に理解できるよう、「特約」などの専門用語に頼らないUI設計にこだわりました。
日常でなじみ深い「＋（プラス記号）」を活用し、特約を"自由に追加できるオプション"として視覚的に表現。メインの保障と特約の関係性を自然に把握できる設計により、検討から申し込みまでの流れをスムーズにし、コンバージョン向上を後押しします。 -
02
テーマカラー⾃動対応で⼀貫したユーザー体験を実現
デザインシステムに対応した柔軟なCSS設計を取り⼊れることで、初回リリースから5年以上が経過した今も、HTMLを⼤きく変更することなく、スムーズなデザインリニューアルを実現できました。
また、ページごとのテーマカラーにも⾃動で対応できる仕組みにより、常に統⼀感のあるUIを提供。どのページでも迷わず情報にたどり着けるため、ユーザーにとっての使いやすさや信頼感の向上にもつながっています。 -
03
分散情報の統合で、ページ遷移のストレスを解消
もともとバラバラだった保険情報を⼀つのページに⼀覧化。ユーザーがページを⾏き来することなく、全体像を⼀⽬で把握できるようになり、必要な情報にすばやくアクセスできる構造になりました。
これにより、迷いのないスムーズな体験を提供しています。 -
04
グラフ導⼊で、複雑な数値情報を読み解きやすく
従来は数値の⼀覧表のみで提供されていたデータに対し、JavaScriptライブラリを⽤いたグラフ表⽰を導⼊。
例えば、変額保険の⾦額推移など、時間的な変化がある商品については、数値の増減や傾向が⼀⽬で把握できるようになりました。
単なる表形式では読み取りづらかった情報が、視覚的な変化として捉えやすくなり、ユーザーの理解や判断をサポートするUX向上を実現しました。
この改修は、機能設計からデザイン、実装に⾄るまでフルでLYZONが担当。表とグラフの両⽅を組み合わせることで、情報の網羅性と直感性を両⽴させました。 -
05
迷わずたどり着ける書類案内—分岐フローによる情報整理
従来の「保険⾦‧給付⾦請求に必要な書類の案内」は、情報量が多く、利⽤者が⾃分に該当する書類を探しづらいという課題がありました。
そこで、ユーザーの状況に応じた質問に答えることで、必要な書類が⾃動的に表⽰されるフローを新たに設計。
情報設計段階では、分岐条件をヒアリング‧整理し、回答に応じて右側に確認結果が表⽰されるインタラクションを設けることで、「⾃分に必要な⼿続きが何か」が⼀⽬でわかる構成にしました。
フローチャートのような分岐の可視化を設計初期に実施。視認性と操作性の両⽴を図り、迷わずに⽬的の書類へたどり着けるストレスフリーな体験を実現しました。
