今年こそWebデザイナーになりたい!現役Webデザイナーが教えるプロになる為の8つのメソッド(UI/UX編)

OEZGBV0
Designed by Freepik

最近周りの若い子がよくWebデザイナーになりたいけどどうしたら良いですか?
質問があったのでとりあえずまとめてみました。
よく考えたらWebデザイナーって何を勉強してどうしたらよいかなんてわからないよね。という訳で現役Webデザイナーが考えた半年でWebデザイナーになり転職する為のメソッドです。それではいってみましょう。

まず、最終的な目的を定義します。
目的はWebデザイナーとして転職あるいは就職できるまでをざっくりと考えてみます。
※このメソッドは必ず就職できる保証はありません。

僕が考えるWebデザイナーとして必要なスキルを列挙してみました。一体どこから手をつけていいかわからないと思いますので、セクションに分けて説明していきます。とりあえず僕が15年以上やってきた事を圧縮して伝えるね。
第一回目はデザインスキル(UI/UX編)です。

1 デザインスキル(UI/UX編) 昔はこんな言葉なかったよ…

thmb_01bg

最近よく耳にする人もいるかもしれませんが、Webデザインに必要不可欠なスキルの1つであるUI/UXというスキルがあります。ここではいちいち意味なんて説明しないからわからない単語があれば調べてね。(´・ω・`)(´-ω-`)) ペコリ
まずUIですが文字通りユーザーインターフェイスの略ですが具体的にどのような事を指すかというと、ヘッダーやフッター、あるいは検索画面のデザイン、使いやすいサイトなどを指します。
このUIがヽ( ・∀・)ノ● ウンコちゃんだと、どんなに良い写真やコンテンツを使ってもサイト自体使われない事が多々あります。
ですのでまずとっかかりとして必要なスキルとしてUIが挙げられます。

UIデザインについて最も大切な事

preview

まず、デザインという意味ですがよく素人の方で「センス」や「感性」と考えている人がいますが、全然違います。
デザインは設計という意味ですので、改めてここで定義します。

それではUIについてですが、UIでもっとの大切なのは「使いやすさ」です。この使いやすさという意味は具体的にどのような意味かというと、ターゲットユーザーに対して必要な情報がその場に適切に配置されているかという点です。
これが最も大切ですね。しかし、最も大切な事ですが、いざデザイン作業をすると思いのほか大変だと思います。
具体的に何が大変かと言うとターゲットユーザーが何を必要としているか知らないで作業をする人がほとんどだという事です。
つまり、まずターゲットユーザーを知る事が必要になります。これをしないで作業する人が1年目はほどんどでしょう。(理由は最後に書きます)

UIデザインのポイント

説明ばかりしても理解できないと思うので、参考にこのヘッダーに関して説明してみよう。
skitched-20180204-101142-1

例としてみんな大好きYouTubeを例にしてみよう。
まずヘッダーを見てみるとわかる通りだが、検索入力項目がロゴの隣にある、これはロゴの次に大切という意味である。つまり検索させる前提で作っているのだ、逆を言うと検索しやすい設計という理念が感じられる。
そして、ブラウザの幅動かせばわかる通りレスポンシブなので、どのブラウザでも対応出来る所もどの環境でも適切なUIがありオールユーザーに対して優しが感じられる。
次に右エリアを見ると動画アップロードのボタンがあるのがわかる。これは動画投稿者に関してすぐにアップロードできる配慮である。そもそも動画サイトはアップロード者がいないと成り立たないサイトだからこのようにヘッダーの優先度が高い。
次にアカウント情報やプロフィールが確認出来るこれは主にログインやログアウトを頻繁に行うので必要な為である。
され、このように整理されているが、実際これを1から作るとなるとこのようにはいかない、YouTubeもだてにここまで巨大サイトになったり理由としてはそのUIにあると言っても嘘ではない。これが複雑でごちゃごちゃしているサイトならきっと使われてなかっただろう。

UI設計に関しての情報の整理方法

05_v1

それでは実践的な話に移りましょう。まずUIを考える前に、情報を整理することが非常に重要となる。

  • 1 誰が使うのか
  • 2 どのようなコンテンツがあるのか
  • 3 1、2がマッチングする情報
  • 4 ゴールはどこなのか(ユーザーとサイト側の到着地点)

まずこの4つの情報を整理するだけでもかなり違う。
UI設計において大切な事はユーザーを迷わせない事である。つまりユーザー自身が迷うと離脱率が上がるのだ、よって使われなくなる。
この情報整理を行い、極力少なく重要な情報だけを絞る事を心がけよう。
情報が決まったら次に、その情報の中でユーザーに対して1番のメリットは何かを考えてみよう。
YouTubeを例にすると、検索である。検索をする事によりユーザーに対して新しい動画や自分が検索した内容が反映され、情報が表示される、そして適切な動画を見て、ユーザーは嬉しさを感じる。
一連の流れを見ると、いかにUIでユーザーを操っているかがわかるだろうか。
これこそが正しいUIなのだ。

これはWebサイトに限らず身近なコンビニや駅でも同様と考えて見るとよりわかりやすいので是非見て欲しい。ちなみにコンビニはかなり複雑な設計をしているので大変勉強になるぞ。
コツとしてはユーザーが何を求めているかを知る事が大切です。もっとわかりやすく言うと建築家が誰が住むかわからないのに注文住宅を設計するわけがない。

UXデザインのポイント

次にUXについてですが、UXというのは平たく言うとイラだたせないようにする事です(笑)
UIに考え方は似てますが、最大の違いはユーザーがサイトを使った時に体験する気持ちです。例えば実際のデザインとユーザーが求めている情報がそこになかったり、意図した動作をしているのに、意図した結果が起きなかったりする事を指します。
例えば、ボタンを押す事に関して、押された状態がわからない事があるとUXとしてはNGです、これは離脱率につながる結果になったりします。読み込み速度の向上もUX向上と言えるでしょう。
わかりやすく言うと使ってて(゚Д゚)ハァ?ってなったりつかいずれ〜!ってなることがNGってわけイラってきたらだめーっ!(; ・ω・)ノよってこと。探しているのに見つからないとか。井上陽水的なことですよ。

UXで心がけてほしい事

2d5f0cf95a9496147d70aa37517871e9_s

UXデザインで最も大切なのはユーザーの立場を考える事です。UIでもそうですがユーザーは常に離脱するものと考えてより、ユーザーを引き付けるためにその画面で何が必要かを考えてみよう。
ポイントとしては、その画面でユーザーが何を考え、一体何が必要な情報かを知り、誘導してあげることが必要なのだ。
つまり、UX向上のポイントはその場で適切な情報を出すことが大切なのだ、これはUIとも似ているがUXはサイト全体である。
適切なコンテンツ(情報)を適切な所で表示することが大切というわけだ。
これは何もWebだけじゃなく駅に行けば適切な所に看板があるのと一緒です、
よく考えて欲しい。駅に行ったらトイレやホームの番号など見たらすぐにあるのがわかると思う。これは念入りに考えれているUI/UXのわかりやすい例だ。

UI/UXの勉強方法

学生レベルで話をするとUI/UXの勉強方法はまず本を探した方が良いだろう。自分が読むやすい本を探して1冊読破することをお勧めする。基本的な事は学べると思う。また、心理学の本なども非常に参考になるので、UI/UXに限らずデザイナーは心理学やマーケティングを勉強するのがより成長が早い。
また、それ以外にもYoutubeや大手サイトを毎日10サイトを見て、自分なりに解析するのも大切なので是非やってみよう。

まとめ

  • UI/UXは常に身近なところにある
  • UIは情報整理
  • UXはユーザーに適切な情報を伝える
  • 毎日10サイト見て分析、勉強する
  • 1冊参考になる本を買う
  • 心理学も大切

第二回目はデザインスキル(グラフィクデザイン編)です。しばしお待ちを。

  

以上今年こそWebデザイナーになりたい!現役Webデザイナーが教えるプロになる為の8つのメソッド(UI/UX編)でした。気に入ってくれたらシェアしてね!

関連記事

domain_cms

今年こそWebデザイナーになりたい!現役Webデザイナーに必要なサーバー・ドメイン・CMS 基本知識について

今回で第5回を迎えました。なんとか頑張って続けていきます!Webデザイ...

記事を読む

cssjshtml_img15

今年こそWebデザイナーになりたい!Webデザイナーに必要なコーディングスキル編(html/css/js)

今回はコーディングスキル編として、Webデザイナーとして就職するために...

記事を読む

thmb_03_218

今年こそWebデザイナーになりたい!結局何を覚えればいいの?ソフトスキル編

今年こそWebデザイナーになりたい!結局何を覚えればいいの?ソフトスキ...

記事を読む

thmb_02

今年こそWebデザイナーになりたい!デザインスキル(グラフィクデザイン編)

今年こそWebデザイナーになりたい!デザインスキル(グラフィクデザイン...

記事を読む

新着記事

6935b31778bafbaa90cbd4cc223ae54e_m

見積金額を高く!デザインや営業に使える訴求力を高めるたった3つの事

最近はどうも忙しくてなかなか更新できてないのですが、最近カメラマンから...

記事を読む

document_img01

15年の経験から理解した!書類選考を通す為に必要な5つのこと

すっかり時間が空いてしまいましたが、しっかり書いていきましょう。 ま...

記事を読む

design_skill

今年こそWebデザイナーになりたい!初心者の為のデザインスキルを上げる簡単な2つの方法

今回は、諸々スキルも大筋ついてきたけど肝心なデザインスキルがどうしても...

記事を読む

carrier_img01

今年こそWebデザイナーになりたい!経験者になる為に必要な考え方とその方法

今回はWebデザイナーとして勉強してそこそこのスキルはついたけど、実際...

記事を読む

domain_cms

今年こそWebデザイナーになりたい!現役Webデザイナーに必要なサーバー・ドメイン・CMS 基本知識について

今回で第5回を迎えました。なんとか頑張って続けていきます!Webデザイ...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

6935b31778bafbaa90cbd4cc223ae54e_m
見積金額を高く!デザインや営業に使える訴求力を高めるたった3つの事

最近はどうも忙しくてなかなか更新できてないのですが、最近カメラマンから

document_img01
15年の経験から理解した!書類選考を通す為に必要な5つのこと

すっかり時間が空いてしまいましたが、しっかり書いていきましょう。 まず

design_skill
今年こそWebデザイナーになりたい!初心者の為のデザインスキルを上げる簡単な2つの方法

今回は、諸々スキルも大筋ついてきたけど肝心なデザインスキルがどうしても

carrier_img01
今年こそWebデザイナーになりたい!経験者になる為に必要な考え方とその方法

今回はWebデザイナーとして勉強してそこそこのスキルはついたけど、実際

domain_cms
今年こそWebデザイナーになりたい!現役Webデザイナーに必要なサーバー・ドメイン・CMS 基本知識について

今回で第5回を迎えました。なんとか頑張って続けていきます!Webデザイ

→もっと見る

  • -売る技術-

    ウエブデザイン暦15年目。犬をこよなく愛するデザイナー。今はディレクションとデザイン を中心に制作全般をしてます。主にマーケティングを軸にデザインを組み立て商品が売れるサイトを構築しています。 デザインとマーケティングについて研究の日々。現在はオランダでWebデザイナーとして働いています。

    ツイッターやってます。
  • Amazonアソシエイト・プログラム規約による記載

    売る技術はamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

PAGE TOP ↑