こんにちは、広報部長です◎
みなさん毎日どのくらいインターネットに触れますか？
広報部長は仕事柄四六時中ネットに触れています。何かを調べたり、素敵な商品やブランドの公式サイトをのぞいたり、地図や乗り換え案内を使って移動したり、ネットショッピングをしたり…もはやわれわれの生活にネットは欠かせないものですね。
そこで気になるのがWebサイトの「つくり」。どこをどう触るとどう動くのか、パッと見たときの印象などなど「良いWebデザイン」をユーザーが判断する要素って、実はたくさんあるんですよね。これを業界では「UX」「UI」と呼ぶんです。
そういうわけで、今回はWebサイトの「UX」と「UI」のお話です。
1.「良いWebデザイン」は、UX／UIにあり！
UIって何？
UIとは「User Interface：ユーザーインターフェース」の略。ユーザーがサービスやサイトに触れる「見た目」や「操作部分」を指します。
具体例を挙げると、
- ボタンの形や色
- ナビゲーションメニューの配置
- フォームの入力欄のデザイン
- アプリのアイコンや画面レイアウト
ですね。
UIは「ユーザーとサービスが接する窓口」を整えること。見やすさ・触りやすさ・わかりやすさが最大のポイントとなるわけなんです◎
UXって何？
UXは「User Experience：ユーザー体験」です。ユーザーがサービスやサイトを使って得られる「体験全体」をUXと呼びます。
具体例は、
- サイトを使ってスムーズに目的が達成できるか
- 情報が探しやすくストレスがないか
- 購入まで迷わず進めたかン
- 「また使いたい」と思える満足感
UXは「利用者が感じる体験」そのものであり、便利さ・快適さ・楽しさが重視されます。UIに比べるとちょっと抽象的に感じるかもしれませんね。
UIとUXの関係は？
「UIは見た目、UXは体験」と表現されるのが両者の関係です。
例えば「めちゃくちゃおしゃれなボタンだけど押しづらい、どこを押したらいいのかよくわからない」という場合は「UIは美しいけどUXが悪い」ということになります。
逆に「 情報はすごく見やすく整理されてるし一発で探し当てられるけど、デザインが古くてださい。正直使う気が失せてしまう」場合。これは「UXが良いけどUIが悪い」ということになります。
UI＝サイトやアプリの「見た目・操作部分」
UX＝ユーザーが得る「体験のすべて」
UIはUXを良くするための手段なので、どちらか片方だけ良くてもユーザーは満足できないんです。UXを高めるためにUIを設計するのがWebデザインの基本となるんですね◎
2. UXとUIについて考えぬいて作りました！T3デザインのWebデザイン事例6選
2-1. 販促STYLE（株式会社トランス）
販促STYLEは、バッグ・雑貨にオリジナルデザインを印刷し、企業向けのオリジナルノベルティ・記念品・販促品が作成できるECサイトです。T3デザインがサイトデザインを担当し、グループ会社が運営しています。
赤というイメージカラーを効果的に使いつつ、安売りサイトに見せないような洗練されたデザインにしています。UI／UXについても、いかに「迷う余地のない」サイトにするかに重きを置いて制作。販促物をユーザーが直接簡単に注文することができるというルートを開き、劇的にECからの注文を増やすことに成功しています。
2-2. be family（株式会社be family）
結婚相談所事業を展開する株式会社be familyのブランディングを担当しました。
be familyは、系列グループで結婚式を挙げた方や関係者からのご紹介のみに限定した、紹介入会制の結婚相談所です。ディスカッションを重ね、「1／1のなっとく成婚」というコンセプトを軸に、ブランドストーリーとしてまとめました。
ロゴデザインでは、余白を設けることで「一人ひとりの思いを受け入れる大らかさ」を表現するとともに、「どんな家族になりたいか」を書き込めるスペースとしています。これにより、自分にとっての良いパートナーを見つけるきっかけを提供し、未来へ一歩を踏み出す決意を固めるアクションにもつながります。また、「b」や「a」に指輪をモチーフとしたあしらいを加えることで、結婚相談所らしさを演出しました。
2-3. HALERU（株式会社大和）
「サステナブル」をテーマに、カタログギフトのブランディング、パッケージデザイン、専用サイト制作を手がけました。コンセプトは「大切な人の未来を想うギフト」。持続可能な社会に貢献しつつ、魅力的な世界観を創出しました。ターゲットは「サステナブルに興味はあるが、詳しくは知らない」層で、ギフトを通じて理解を深め、行動を促すことを目指しました。
カタログ名「HELERU（ハレル）」には、明るい未来を思い描くメッセージが込められています。カード型カタログは環境にやさしい素材を使い、シンプルで暖かみのあるデザインに仕上げました。専用WEBサイトもサステナブルな素材感を意識し、未来を感じさせるシンプルで洗練されたデザインを採用。商品選びの過程で、自然にサステナブルなライフスタイルに触れるコラムページも設けました。
2-4. COURONNE e-order choice（株式会社大和）
カードタイプの引出物『COURONNE（クロンヌ）e-order choice』のツールをデザインしました。
BOXタイプと封筒タイプがあり、それぞれ開けると色とりどりの花が溢れ出るような仕組みに。また、販促物のパンフレット、ウェブサイトには、同じ花を使ったブーケの写真をメインに、幸せの花で満たされたデザインに仕上げました。
2-5. KRAFTWERK（株式会社クラフトワーク）
グループ会社である株式会社クラフトワークのコーポレートサイトリニューアルを行いました。工場の規模拡大、また新たな土地へ移転したことに伴う人材不足を少しでも補えるようリクルートをメインテーマとするWEBサイトとして制作。TOPの動画では和気あいあいとした現場の雰囲気を見せる、工場案内ページを新設するなど、エントリーへの不安を少しでも解消させることを目標に作り上げました。業務内容の理解をより深めるため、印刷技術ごとに工程の動画も制作しました。
>> コーポレートサイトはこちら
2-6. しとく館学園放課後デイ（株式会社S・T・K）
サイトに訪れる層を意識して、イラストを描き、分かりやすく親しみやすいサイトデザインにしました。イメージカラーをグリーンで統一して、学園のモチーフであるそら豆を印象付けました。
>> ウェブサイトはこちら
3. 「良いWebデザイン」でユーザーに心地よい体験を
使いやすい、わかりやすい、満足！がそろうと、ユーザーはまたそのWebサイトを訪問してくれます。UXとUIは両方揃って初めて力を発揮するもの。両立してこそ「良いWebデザイン」を生んでくれるんです。
T3デザインはパッケージデザインの会社ですが、Webサイトやランディングページの制作ももちろん承っております！
商品に似合う素敵なサイトにしたい、みんなに良さが伝わる快適なWebサイトが欲しいとお考えの方は、ぜひご相談くださいね。
