実践UI/UXデザイン STUDIOデモンストレーションセミナー
開催レポート

Web制作など、クリエイティブな仕事に関わっていると必ず聞くUI/UXというワード。とりわけデザイナーやデザインの制作に携わる場合、UI/UXは必要不可欠な概念です。

ただUI/UXについては、

・将来的にデザイナーとして活動したいので、実際にどのように扱うのかデザイナーから直接聞きたい

・クリエイティブ関連の仕事に就きたいけれど、ネットで検索して調べた程度でくわしく知らない

という方が多いのではないでしょうか。

Winスクールでは2023年9月20日、そうした方々に向けて「実践UI/UXデザイン STUDIOデモンストレーションセミナー」を開催いたしました。

この記事ではその開催レポートとして、UI/UXの基本と実例、プログラミングの知識がなくてもWebサイトが作れるツール「STUDIO」について解説します。

セミナーのハイライト

当セミナーは受講者が自宅やオフィスにいても気軽に参加できるように、オンラインで開催いたしました。講師はWinスクール・DXリスキリングセンターのトップデザイナー、しのぶ先生です。

こんな方におすすめ

今回の「実践UI/UXデザイン STUDIOデモンストレーションセミナー」は、具体的に次のような方を対象に開催いたしました。

• デザインに関わる仕事に就きたいけれど、未経験のため知識やスキルに不安がある
• 現役デザイナーからUI/UXデザインの専門知識やノウハウを学びたい
• STUDIOなどノーコードツールで高品質なホームページを作成したい
• 自社のWebサイトを効率よく作成して時間や労力を削減したい
• DX推進の一環としてWeb制作業務の内製化を図りたい

セミナーのカリキュラム

当セミナーは大きく分けて二部構成となっており、前半は誰もが日頃から目にしている身近なデザインからUI/UXの基本を語っていただきました。そして後半は、UI/UXを意識したデザインをSTUDIOを使って簡単なデモンストレーションを行いました。

しのぶ先生のレクチャーはデザインの理論をしっかり伝えつつ、面白さや気づきのあるデザイン事例の紹介で場を楽しませてくださるなど、初心者でもわかりやすい進め方でした。

当日のカリキュラムは以下の通りです。

UI/UXデザインの基本

冒頭でもお伝えしましたが、デザインに関わる仕事では必ず考えなければならないUI/UXという概念。まずはその基本的な知識を身につけることが大切です。

UI（User Interface：ユーザーインターフェース）

UIとは、人とコンピュータ（アプリやWebサイトなど）がどうやって「会話」するかを決める部分です。具体的には、ボタン・テキスト・画像・色など、見た目の部分全体を指します。

そのため、見た目が美しいことや操作が直感的であることが大切です。たとえば、スマホの画面で「送信」ボタンを押すとメッセージを送れますが、その「送信」ボタンのデザインや位置がUIです。

UX（User Experience：ユーザーエクスペリエンス）

UXとは、ユーザーが製品やサービスを使用するときの「体験」や「感じ方」を指します。人がアプリやWebサイトを使っているとき、「どれだけ快適か」や「使いやすいか」を考え、使う人がストレスなく、また再度利用したくなるような体験を提供することが大切です。

たとえば、地図アプリで目的地までのルートを簡単に見つけられると、使っている人は便利に感じますよね。その使いやすさがUXです。

UIとUXの違い

UIは具体的な形状や配置・色などを扱い、UXはそれらを使ったときの感じ方や体験を扱います。両者は密接に関連しており、どちらかが欠けても高品質な製品やサービスは成立しません。

つまり、良いUIとUXがそろって初めて、ユーザーにとって価値ある製品やサービスが生まれ、それが売上アップにつながるのです。

事例から学ぶUI/UXデザイン

ここでは誰もが知っている有名Webサイトを事例に、UI/UXデザインにおける重要なキーワードやルールについて解説します。

GoogleとYahoo!から学ぶUI/UXデザイン

GoogleとYahoo!は同じ検索エンジンなのに、UI/UXは異なります。

Googleは非常にシンプルなUIで検索に集中できる構造。UXは検索結果の表示スピードの早さやユーザーの求める情報に近い検索結果が上位に表示されます。

一方、Yahoo!はニュースや天気・スポーツなど、たくさんの情報がトップページに表示されるカラフルで複数のカテゴリーがあるUIです。またUXは一度に多くの情報を得られることやユーザーにとって興味のある広告が表示されるようになっています。

UI/UXが異なる2つのサイトですが、次のような共通点があるのも特徴です。

• サイトによってユーザーのやることに集中できる
• サイトの全体像がすぐわかる
• カテゴリー別に分かれていることがわかる
• 知りたい情報にすぐたどり着ける
• 世界観が統一されていて見やすい
• 何を押したらどうなるかを容易に想像できて、その通りに動く

このように、良いUIとUXはいかに自然なものであるか、ユーザーにとってストレスフリーであるかが重要といえます。

UI/UXデザインにはルールがある

UI/UXデザインにはルールがあります。実際、GoogleはMaterial Design、アップルはHuman Interface Guidelinesというルールを設けています。

これらは、たとえばフォントの大きさやレイアウトの余白はどのくらいか、といったことを基準として定めたものです。UI/UXはデザイナーの感覚で決められているわけではありません。

よく「デザインはセンスだ」と言われますが、しのぶ先生は「決してセンスではなく、理論を学びルールに従うことで誰でもデザイナーになれる」と言います。

コーディング不要でWebサイトが作れるSTUDIOとは？

UI/UXデザインのスキル習得には、実際にWebサイトをつくってみるのが理想ですが、Webサイトの制作は通常コーディングが必要です。そこで当セミナーでは、コーディング不要（ノーコード）でWebサイトが作れるツール、STUDIOをご紹介しました。

ノーコードツールSTUDIOの魅力

STUDIOとは、STUDIO株式会社が開発したノーコードのWebデザインプラットフォームです。コードやテンプレートに縛られず、自由にWebサイトをデザインできます。

デザインは直感的なUIでレイアウトを作成し、ピクセル単位の微調整からダイナミックなアニメーションまで対応できるのが特徴です。

コーポレートサイトからブログ・イベント・店舗・商品・ポートフォリオなど、さまざまな用途があり、作成したサイトは1クリックで公開可能です。

STUDIOは、デザインから公開までを一元管理できるため、プログラミングの知識がなくても簡単にWebサイトを作成・運営できるのが大きな魅力です。

STUDIOのデモンストレーション

当セミナーでは、しのぶ先生がイベントのWebサイト制作において、ファーストビュー（Webサイトを開いたとき、最初に表示される部分）のデザイン作成を実演してくださいました。

最初にWebサイトづくりにおける基本的なレイアウトの解説後、デザインエディタ（STUDIO内のツール名）などを使って、ヘッダーとメインの画像やテキストをドラッグ&ドロップで配置。またライブプレビュー機能で、実際にどう表示されるかなどをレクチャーいただきました。

セミナーQ＆A〜参加者のギモンを深掘り

UI/UXデザインやSTUDIOをより身近に感じていただくため、今回のセミナーで受講者から実際にあった質問をまとめました。

セミナーを受講された方の声

セミナーにご参加いただいた方のアンケートより受講者の声（一部）をご紹介します。

※受講者からいただいた回答は原文のまま掲載しております。

今回のセミナーはIT企業にお勤めの方をはじめ、製造業や建設業、さらにはサービス業で働く方も多く参加くださいました。またアンケート結果から、90％の方が内容に満足し、今後もセミナーに参加したいという回答をいただきました。

おわりに

今後ますますデジタル化が進む中、クリエイティブなスキルの必要性を感じている方は多いのではないでしょうか。実際、多くの企業が宣伝・広告・販売・決済・カスタマーサポート…という一連の事業活動にインターネットを活用しています。

今回お伝えしたセミナーでしのぶ先生が言ったように、未経験でも理論を学びルールに沿って作業すれば、良いデザインをつくることは十分可能です。

Winスクールではそのためのスキルが習得できる講座をご用意しております。専門の講師から定期的に学べるWeb制作やデザインの知識・スキルが身につく講座です。

今後のキャリアップやビジネスに生かすために、ぜひリスキリング（学び直し）としてチャレンジしてみてはいかがでしょうか。

デザインを基礎から学び将来的にデザイナーとして活動していきたい方

Webサイトの作成など、デザインツールの操作スキル習得でキャリアップや副業を始めたい方

関連記事