【SWELL】ブログにおけるUI、UXとは?実際にデザインを修正してみよう

  • URLをコピーしました!

近年UI、UXという言葉を様々な箇所で見るようになりましたが、実際に「UIって何?」と聞かれて、答えられない方も多いでしょう。

スマートフォンが普及し、Webサイトだけでなく、アプリの分野でもUI、UXの重要性は高まってきています。

この記事ではUI、UXの基本情報と重要性について説明していきます。そしてブログをやっている方に向けて、どのようにブログをデザインしていけばいいのかを紹介します。

この記事を読んでわかること
  • UI、UXの基本知識
  • UI、UXの重要性
  • ブログUIの作り方
目次(気になる部分をタップ!)

UI(User Interface)とは?

まず初めに、UI(User Interface)について説明してきます。

Userは、あるサービスの利用者のことを指します。例えば、YouTubeを見る人や、Nintendo Switchでゲームをする人、ご当地顔はめパネルに顔を入れる人達はすべてUserです。Userというのは非常に広い意味を持つ言葉なので、ざっくりと「あるものを使っている人」と簡単に捉えておきましょう。

Interfaceは日本語約で「接合部」「接触面」という意味があります。主にコンピュータとコンピュータを繋ぐケーブルの接続部分のことを言い、iPhoneの充電ケーブル端子の「ライトニング端子」や「USB-C」などがInterfaceの代表的なものです。

この両者を合わせたUser Interfaceは、「利用者と製品、サービスを繋ぐ部分」という意味があります。

これだけ聞いても何のことかわからない方も多いと思いますが、ここでは「利用者が目にする、利用する部分」と考えておいてください。具体的には、このブログ記事のフォント、色、文字の大きさなどもInterfaceの一つです。Webサイトに限らず、日常品や家具のデザインもInterfaceになり得ます。そのため見るものすべてがInterfaceといっても過言ではないほどに、世の中にありふれているのです。

上記の通りに考えてみると、UIという言葉は最近生まれた言葉ではなく、以前から使われた考え方をわかりやすく伝えるために作られたものなのです。そのためWebデザインや製品デザインを考えるうえでは当たり前であり、非常に重要な考え方になっています。

UX(User Experience)とは?

UXとはUser Experienceの頭文字を並べた言葉であり、その名の通り「利用者の体験」という意味です。

体験というのはサービスや製品を通して利用者が得る体験のことであるため、Webサイトやアプリケーションだけでなく、製品を通じた体験もUXにあたるのです。「Twitterのいいねボタンは大きいから使いやすい」「このペットボトルのキャップは固くて開けられないから不便」「このボールペンは紙に引っ掛からなくて書きやすい」などがUXの一例です。生活をしていれば毎日何かしらのUXを人間は得ているのです。

UXを考えることは、製品やサービスの品質向上に役立てるだけでなく、利用者の感動や好感を生むことが出来ます。そのため、デザイナーだけでなくすべての職種の方が覚えておくべき考え方なのです。

最近だとUIとUXがごっちゃになって考えてしまい、同じような言葉として使用されている方を見かけます。上記の通り、意味は全く違うものなのです。UIは目的のUXを生み出すための「手段」という風に考えると良いと思います。

事例で見るUI、UXの重要性

これまでUIとUXの基本情報を紹介してきましたが、なぜUI、UXが重要なのでしょうか。

それはUI、UXが考えられていないデザインは「不便」を生むからです。というよりも私は「不便」をなくすという一種のUXを実現するために、UIが必要になると考えています。

例えば、iPhoneのUIは新作が出るたびに何かしらの変化を遂げています。衝撃的であった変化はiPhoneの一番の特徴とも言っていい、ホームボタンがなくなったことですよね。2022年5月現在の最新機種のiPhone13にはホームボタンがありません。iPhoneSEという機種にはホームボタンが搭載されており、ホームボタンのあるUIが好みのユーザーに対して販売しています。

この変化は「ホームボタンがない方が使いやすくて、かっこいい」というUXを想定したことによって生まれました。AppleはUXから逆算してUIを作り上げることでiPhoneを無駄のないデザインにし、ユーザーの感動を生むことが出来たのではないでしょうか。

上記の様なUIとUXの流れは製品開発やWebデザイン作成においては非常にメジャーなアプローチです。

逆にUXを想定していないUIは独りよがりのデザインとなってしまい、利用者の視点が抜け落ちている可能性が非常に高いです。「UIをこだわったから、UXが生まれる」のではなく、「UXを生むために、UIをこだわる」という考えを持つことが重要です。

ブログで考えるUI、UX

ここからは私の本サイトを利用して、ブログのUIとUXについて考えていきます。

ブログを行う上での最低条件となるUXが「有益な情報が得れた」という感動です。有益性が伴わないブログも世の中には沢山ありますが、「収益をあげたい」「誰かの役に立つサイトにしたい」と思うのであれば、有益性は非常に重要です。

私は「有益な情報が得れる」というUXを前提とした上で、さらに付加価値を尽きなければいけないと考えています。なぜならどのような情報発信にもライバルがいて、そのライバル自身も有益な情報を提供しようと記事の作成を行っているからです。

もちろん記事の内容が良ければ読まれますし、最初のうちはあまり気にすることはないと思いますが、ブログに個性を持たせるにはUIをこだわる必要があります。

ここで重要なのは、「記事の内容」ではなくあくまで「UI」に個性を持たせることです。

記事の内容に個性を持たせるとかえってわかりづらくなり、読みづらい文章が出来上がってしまいます。対してUIに個性を持たせると、ブログに世界観が生まれファンを生むことが出来ます。

ブログにファンをつけることのメリットはリピートしてくれる視聴者を作ることが出来る点です。

例えて言うと、「smartnews」や「グノシー」をある特定の記事を読もうと思ってインストールする人は非常に少ないでしょう。多くの方が「クーポン機能が欲しい」「カラフルなデザインで見やすい」という理由で使用していると思います。このようにファンを作ることによって、「記事を見に来る人」より「そのサイトを見に来る人」を増やすことが出来ます。長期的にもPV数を増やすことが出来るので、世界観は非常に重要です。

UIデザインを作り上げるのは各ブログで使用しているテーマで変える必要があるので、様々な機能を使用して自分の好みの世界観を作り上げることがいいでしょう。

実際に作ってみると…

実際に私のブログデザインを変えて、世界観を作り上げていこうと思います。

まず私がこの記事作成まで使用していたコンセプトが「可愛いガジェット」紹介サイトです。そのため全体もポップなデザインでカラフルに仕上げていました。

背景を動画することで、どのような製品を取り扱っているのかをざっくりと紹介したうえで、オレンジをベースにトップページの背景を作りました。可愛いというコンセプトには沿っていますが、「可愛い」デザインからどのようなUXが生まれるのか疑問を持ちました。改めて見直すといらない機能も多く、自分よがりのデザインになっていました。

この記事以降のサイトコンセプトを「ゲーム感覚でガジェットを探す」としました。

私はこのコンセプトから「記事からどこか懐かしさを感じながら、遊んでいるような感覚になる」というUXを生みたいと考えました。そのためレトロなドット絵を主なデザインとしてブログを作っていきます。

上記の画像はトップページで使用する背景です。フォントは「美咲ゴシック」というフォントを使用し、初期のドラゴンクエストの様な世界観を作りました。各ページへの飛ぶためのボタンもドットフォントにすることによって、デザインに統一感を持たせています。

変更前
変更後

問題なのはこれまでに作ったブログアイキャッチとのデザインに差が生まれてしまうことです。今後作成するアイキャッチはドット調のデザインで統一することができますが、現在までのものは徐々に変更をしていく必要があります。

ですが、ドット調のゲームのようなデザインは動画にもしやすいですし、Instagramの投稿にも優れています。

このように各SNSとの連携を考えた上で世界観を作り上げることが、今後のブログ活動のポイントとなってくるでしょう。

kana
管理人
当サイトの記事をご覧いただきありがとうございます。当サイト「ガジェットにもかわいさを」はスマホとパソコン周りのガジェットマニアであるkanaが運営するサイトです。かわいくて便利なガジェット収集を生きがいにしています。在宅勤務9割で仕事をしている現役リモートワーカーが厳選したアイテムを紹介させていただきます!
よかったらシェアしてね!
  • URLをコピーしました!
目次(気になる部分をタップ!)