WEB制作

WEB制作

Webデザイン経験者がUI/UXデザインを知ったかぶるために学んだこと

最近、Webデザイン界やアプリ制作などの界隈でよく耳にするのが「UI/UX」という言葉。

なんとなくわかるけど、細かくはわからないというのが実情であり、勉強して知ったか程度には理解する必要があった。

むしろ、最近はWebデザインの仕事なんかでも「UI/UXは経験ある?」「UIわかるよね?」とか、これまた知ったかの人たちが聞いてくる場合があるので、対抗するためにもWebデザイナーも知ったか程度の知識は必要なのだ。

対象読者

筆者と似たような状況にある人。

・WebデザインなどUI/UXデザイン以外のデザイン経験者
・UI/UXが何の略かはとりあえずわかる
・とりあえず知ったか程度の知識を身に付けたい

UI/UXとはなにか

二つ並べられてセットにされがちだけど、それぞれ別物。

UXという幅広い概念の中に、UIという限られた世界がある。知ったかとして振る舞うには、UXの中の一部がUIだと知ってればOKだ。日本(UX)の中に東京(UI)があるので、対等なものでもないし、逆は有り得ない。

それでもUIはUXに影響を与える重要なものである。それぞれ細かく解説していく。

UIとはなにか

UIはユーザーインターフェースの略。

「UIがどうの~」とか言われたら、とりあえず「ユーザーインターフェースのことですね?」とドヤ顔で返せば知ったかできる。困ったときのオウム返し手法の発展版だ。

Webサイトとかアプリとかのクリックやタップできる部分だとか、ユーザーがコンテンツを操作するための接点となる部分がUIだ。

UXとはなにか

UXはユーザーエクスペリエンスの略。

エクスペリエンスなんて単語は普段は使わないと思うが、体験や経験を意味する言葉だ。ちなみに、Windows XPのXPはエクスペリエンスの略。

その対象物を知ってから、対象物が物理的に消滅したり、あなたの記憶から完全に抹消されるまでの体験全てがUXだ。

つまり、UXとは極めてユーザーの主観に基づいたものである。体験をデザインするなんて言われると、UI/UXデザイナーが格好いい仕事に思えてしまう。

UI/UXデザインが向上するには競合が必要

あなたも経験があると思うが、自治体のWebサイトとか、公共施設の予約システムだとか、JRの「えきねっと」とかの予約システムとかは非常に使いにくいし、デザインが洗練されていない。

それはUI/UXデザインが向上するためには、競合と争いながら付加価値として改善していくプロセスが必要だからである。

自治体やJRの予約システムが使いづらくても、代わりの手段がな存在しないのだからユーザーは我慢して使わなければならない。そこにUI/UXが改善する余地はないのである。

対して、競合が存在するサービスではUI/UXは日々磨かれていく。

例えば、筆者の身近なところだと、楽天が運営する「楽天トラベル」と、リクルートが運営する「じゃらん」は旅行予約サイトとして競合関係にある。記憶に新しい所では、GoToトラベルの醜いドタバタ劇では、楽天がGoTo割引に対応するや否や、じゃらんも対応させたりと、それぞれがUX/UIを向上させるために日々改修しているのだ。

ちなみに、この界隈ではデザインとは「設計」を意味するのであって、芸術性とか視覚的な美しさではない。もちろん、芸術性や資格的な美しさを兼ね備えているのが理想的だが、画面構造だとか予約手順とかの「設計」がデザインの両悪の判定基準になる。

デバイスごとの操作性の特長

デバイスが持つ特長を理解しつつUIを考えることが大事。

PCの特長

大きいモニターと、キーボード、マウスやトラックパッドを備えているのが特徴。

マウスやトラックパッドで細かい操作ができ、「ホバー」が使えるのでクリックできるか微妙な対象物もクリックできることをやんわり伝えることができる。

縦スクロールには強い一方で、一般的に横スクロールは非常にやりにくい。

スマホ、タブレットの特長

タッチパネルで指を使って操作するのが特徴。

指で操作するため、リンクやボタンはある程度の大きさが必要。指で細かい入力をするのは大変なので、ゆったりしたボタン間隔などゆとりあるデザインが好まれる。

文字入力は基本的にソフトウェアキーボードなので大量に素早く入力するのはPCより向かない。閲覧用に適したデバイス。

PCと違って「ホバー」が使えないので、一目見てクリックできるとわかる必要がある。

テレビの特長

最近のテレビはインターネット機能があったりするのが当たり前で、これもUI/UXデザイナーの仕事の範囲だという。

ゲーム機とかクロームキャスト的なデバイスも同じだろう。

このデバイスの特長は、「十字キー」「決定」「戻る」の3つで操作するのが基本ということ。PCやスマホのように画面の好きな場所をいつでも選択することはできず、カーソルを移動させていくため、要素の連続性が重要になる。

フォーカスの移動を縦方向のみや横方向のみなどにすると入力の負担が減る。PS3とかPS4のホーム画面なんかが良い例だろう。

音声で操作できるのも一般的。PCやスマホとは違ったUI/UXの世界があるのだと思っておけば、知ったかクンとしては修羅場を切り抜けられるのではないだろうか。

Webサイトとアプリの違い

UI/UX界隈で主戦場となるであろう、Webサイトとスマホなどのアプリの違いについて知ったかぶる知識を述べる。

Webサイトの特長

・PCやスマホに入っているブラウザで、とりあえずサクっと使って貰える
・マルチデバイス展開が比較的容易で、レスポンシブによってWebデザイナー的知識で十分対応可能
・ハードウェアに合わせたインタラクティブな作りに限界がある
・良くも悪くもURLによって管理されている

アプリの特長

・個別にインストールしたりと手間がかかる
・ハードウェアの合わせたインタラクティブな作りが可能
・通信量を抑えたり、Webサイトより軽快な動作が可能

インタラクションコストとは

ユーザーが受ける負担のことをインタラクションコストと呼ぶ。

インタラクションコストが小さいと、ユーザービリティ(サービスの使いやすさ)が良いということになる。

インタラクションコストが高い例

・どこをクリックしたらいいかわからない
・パッと見で判断が付かない
・スクロール、移動が大変
・スマホで指が届かない
・持ち換えないとならない
・同じことを何度もしないとならない
・アタマを使わせるデザイン全般(精神面)

UI/UXがわかるデザイナーとして知ったかぶるには、これらを最小にさせる必要がある。

最後の「アタマを使わせるデザイン全般(精神面)」はインタラクションコストの代表的なものでもある。

例えば、虫メガネアイコンは検索という暗黙の了解があるし、フロッピーみたいなアイコンは保存だ。暗黙の了解を理解してデザインすることによって、アタマを使わせる率を減らせることになる。

個人的に最近インタラクションコストが高いなと思ったのは、キヤノンの某画像ストレージサービスだ。一般的なアイコンで使われている意味と違う動作をするし、画像ストレージで大量の画像をアップロードすることが多いにも関わらず、100枚単位でしか選択できなくてストレスフルだった。

UI/UXはあらゆるWebサービスにおいて重要だということだ。

UI/UXデザイナーが主に使うツール

平均的なWebデザイナーの仕事に比べて、画面遷移やボタンのタップ感覚などの操作性のテストや共同作業も多くなるので下記のような専用ツールを使うのが一般的。

Adobe XD

Adobe Creative Cloudに含まれていてWebデザイナーにも敷居は低い。Adobe製品の使い勝手に慣れていれば、勉強しないでも何となく使えるのが魅力。

Sketch

2014頃のFireworks開発終了アナウンスくらいからジワジワと代替ツールとして人気が出てきたらしい。99ドルだから1万円弱で買い切り(アップデート1年間)で、Mac専用かつ英語のみ(?)、プラグインで機能拡張するのが特徴。ガチなUI/UXデザイナーが使っているイメージ。

Figma

秋葉原界隈では萌えフィギュアのブランドだけど、UI/UX界隈ではWebブラウザで動作するUIデザインツール。個人用で限定的な機能だけど、アカウント登録だけで無料で手軽に使える。Adobe CCを契約していなくて、UIデザインの雰囲気を学んでしっかり知ったかぶるにはオススメだろう。英語のみなのとブラウザで動作するタイプなので、作り込んでいったら動作安定性などが未知数。

prott

画面遷移などスマホ実機で動くプロトタイプ作成ツール。XDとかでも実機で動かせるけど、よりプレゼン向きな気がする。Webディレクター向けの本に紹介されていたので、ディレクター系の職種でも使われているはず。料金プランは無料プランありでサブスク形式。Webブラウザで使うタイプ。

Justinmind Prototyper

Windows、Macのインストール型。Prototyperがアプリ名だと思うけど、同名の別物の似たサービスが日本企業からもリリースされていてるのでJustinmind社のPrototyperということにする。パッと見、インストール型だしXDみたいな感じ。フリープランもあるが、有料版で機能がプロっぽくなるものの、全部英語で日本語での最近の解説は少な目な印象。日本でのシェアは少ないんではないかしら。

「赤信号、みんなで渡れば怖くない」派の人は、XD、Sketch、Figmaあたりを触っておくとツールについても知ったかぶれるはず。

より深くUI/UXを学ぶためには

とりあえず、ここで述べたくらいのことを知っていたり意識していれば、UI/UXについて知ったかぶることはできるはず。

しかし、UI/UXはWebデザイナーだったり、アプリのエンジニアだったりが、基本スキルの延長線上に身に付ける学問的な匂いがする。最近は急速にUI/UX専門のデザイナーが求められている気もするが、そういった仕事に就いていない場合は独学で学びにくいのも事実である。

今回の記事作成に当たって参考にした書籍は下記。書籍名の通りだが、教科書的に必要な知識が網羅されているので、知ったかぶるだけでなく、ちゃんとした知識を学びたい人にはオススメだ。

WEB制作

大手でWebデザイナー実務経験者だけど、ScssとかSassとかの良さがわからん

画像はイメージ

某大手企業でWebデザイナーの仕事をしていたけど、CSSを効率的に書いたり管理できるらしいScssとかSassとかの良さがわからんという話。

普通にCSSを書いた方が楽だし管理しやすい

ScssとかSassもそれぞれに書き方のルールがあるが、どこがどう普通のCSSより効率的だったり管理しやすいのかがわからん。

書き方のルールが違うだけで、元々のCSSの方が直感的にわかりやすくてデザインしやすい。

さも「今どきはScssとかSassで書くのが普通」と解説していることもあるけど、どこがどう普通なのかもわからない。

BoosStrapみたいにデザインをあまりしないエンジニア系の人に好まれている技術がScssとかSassなのではと思う。

最大の欠点はhtmlにそのまま適用できないこと

ScssとかSassの最大にして絶対使いたくない欠点は、普通のcssと違ってhtmlというかブラウザに直接読み込ませることができないというクソ仕様。

エンジニアっぽいツールを使って、わざわざcssに変換しないとならない。

それってつまり、日常的なちょっとしたcssの改修の時とかどうすんの? 面倒臭すぎないか?という疑惑がある。Webデザインをやっていると運用中にちょこちょこcssを修正する機会は多いはずなのだ。

ScssとかSassみたいに、よくそんな面倒くさいもの使う人がいるなーとか思いつつ、こんなものが「今どき普通」なんて言われて強制的に使わされたら溜まったものではないので、Webデザイン界の未来のためにScssとかSassはクソで不要な産物であると、ちょろっと言ってみた。

WEB制作

【2021年版】求職者支援訓練のWebデザイナー養成コースは再就職に役立つ? メリット、デメリットを経験者が語る

デザイナー目指すからにはセンス抜群なのは前提だよ?(脅しでなく)

2012年頃に求職者支援訓練の某Webデザイナー養成コースに通って、その後、正社員や派遣などの非正規でWebデザイナーの仕事をしてきた筆者。

2021年現在でも各地で未だによく開催されている求職者支援訓練のWebデザイナー養成コースについて、メリット、デメリットを経験者目線で語ってみたい。

Webデザイナーは仕事の需要があるのか?

国が税金を使ってまでWebデザイナーを養成しているということは、それだけ需要がある仕事であることは間違いない。買い物や公共料金の支払い、行政関係の手続き、ホテルや新幹線の予約までネットでできる時代だ。

業界的に細かく言うと、「買い物や公共料金の支払い、行政関係の手続き、ホテルや新幹線の予約」などはWebデザイナーの仕事ではなくて、WebプログラマーとかWebエンジニアの領域だから、求職者支援訓練レベルのなんちゃってWebデザイナーが単独で太刀打ちできるレベルではない。

2021年現在の一般の人が一般的に使うようなネットのサービスというのは、WebデザイナーというよりはWebプログラマーとかWebエンジニアの方が活躍できる時代であることは知っておかないとならない。

2012年頃と比較しても、年々Webデザイナーだけで単独で出来るような仕事は就職先としてはあまり存在しないのだ。(個人のブログとか趣味のサイトとかのレベルは除いて)

求職者支援訓練のWebデザイナー養成コースの特長

民間のWebデザインスクールや専門学校と、求職者支援訓練のWebデザイナー養成コースは似て非なるものである。

前者は自腹で数十万~100万円以上の学費を払うが、求職者支援訓練は無料な上に8割の人は月10万円程度の補助金目当てで通学する。残り2割は主婦とかで対象外の人や、生活保護受給者で受講しないと生活保護を打ち切ると脅されて無理やり通わされている人だ。

つまり、通っている人たちの層が全く違う。

求職者支援訓練は補助金目当ての人がほとんどなので、モチベーションが低いし。筆者が通っていた時も実際にクラスに数名いたが、出席だけとって授業中に寝ている人がいた。いびきが煩くて授業にならなくなった時は、さすがに講師の人が注意していたが、退学処分になることはなかった。補助金目当てで通っている人が多いというのは、こういうことである。

そして、明らかにデザイナーという、数ある職業の中でも美点センスが最重要になる仕事を目指しているということを自覚していない人も多い。まともな美術大学や芸大だったら、基本的なデッサン能力などの入学試験がある場合がほとんどだと思う。

求職者支援訓練は一応、入学のために「面接」はあるが、ほとんど「面接場所に時間通りに辿り着くことができるか」と「日本語で会話ができるか」くらいしか問われないため、デザイナーに根本的に向かない人も大勢入学してくるのである。

このようなことを総合的に考えると、「優秀な人たちと競い合ってスキルを高めたい」という願望を持っていて、それなりの学費を払える人は、民間のWebデザインスクールに通った方がその後の人生が好転する可能性が高いと言える。

民間のWebデザインスクールの例

学費に余裕があるなら、基本的には民間のスクールの方が可能性が広がる。

かと言って、教えている内容が国が学費を肩代わりしている求職者支援訓練と天と地の差があるかというと微妙。

とりあえず、通っている人の層が違うのは確か。

あと、求職者支援訓練はターミナル駅の駅前とかにあることは少なくて、辺鄙な場所にある企業が受託していることも多い。



Web制作会社LIGが運営するWebデザインスクール【デジタルハリウッド STUDIO by LIG】

求職者支援訓練のメリット

悪い点ばかりを列挙したが、良い点も存在している。

・入学試験など受講難易度が極めて低い
・無料+補助金が貰える
・割と時間をかけて基礎を学ぶので、真面目にやれば初心者Webデザイナーには一応なれる

求職者支援訓練のデメリット

とは言ってもデメリットが多々あるので、少なくとも下記の点は事前に覚悟しておいた方がよい。

・補助金目当てのどうしようない人たちばかり
・もちろん学校も補助金目当て
・大体、PCやソフトが時代遅れ(ブラック中小企業相当)
・習う内容も時代遅れなことが多い(修了した時に役立たない)
・修了しても初歩の初歩にしかなれない

最後の「初歩の初歩にしかなれない」というのを解説すると、Webデザイナーという職業ができてから20年くらい経つ。20年ずっとWebデザイナーをやっている人というのもいない気はするが、就職した先の周りの人たちは5年や10年やってるベテラン揃いで太刀打ちできないと考えた方が良い。

Webデザイナーに限らないが、公務員でもない限り、中途採用の場合は5年や10年やってるベテランと同じレベルで早期に活躍できないと、すぐに居場所がなくなってしまう。Webの世界は幅広い知識が必要なので、求職者支援訓練で3カ月~6カ月くらい学んだだけでは、現場でベテランが何年も運営してきた『複雑なコード』を紐解いていけるかというと、かなり厳しい。

求職者支援訓練後の就職先とその末路

最後に、求職者支援訓練のWebデザイナー養成コースを修了してWebデザイナーの仕事についた、とある悪い先輩(筆者)の末路を少しだけ紹介しておきたい。

訓練受講中に正社員で内定したのは社員10人くらいのブラック印刷系企業のWebデザイナー。面接で社長にやたら作品が褒められたりしたが、24時の終電までの飲みに付き合わされたり、残業代が1円も支払われないことを指摘すると「文句言うのかてめぇは!」などとキレられて、話にならないと思い短期間で退職するハメになった。

そのあとに転職活動でもロクな企業にWebデザイナーで正社員で採用されることはなかった。面接ではそこそこ良さそうだったが、入社してみるとやはりキチガイみたいな経営者と女副社長的な雁字搦めな会社だった。社員10人もいないのに毎月誰かしら突然辞めるという酷い会社だったのだ。

仕方ないので正社員に夢を見ることを辞め、派遣で採用される道を選んだが、ブラック零細企業のWebデザイナーよりは待遇がいい。ただ、国の方式で派遣社員は3年までしか同じ企業に勤められないし、数カ月で使い捨てにされることが多いのが大きな欠点。

ちなみに、大手優良企業に求職者支援訓練をきっかけに就職するのは99.99%不可能。そういう所の正社員Webデザイナーは美術大学や芸大、2年制などの専門学校を出た「キャリア組」というのが前提だからだ。

求職者支援訓練で人生は好転しない

求職者支援訓練を受けたからといって人生好転するかと思っていたら、それは甘すぎると言わざるを得ない。それ以前の本人が持つ旧祝活動でのスベック(年齢、学歴、職歴など)に、福神漬け的に付け加えられるのが求職者支援訓練の効果なのである。

それでも、派遣使い捨ての仕事に就くくらいのことは、2021年以降に求職者支援訓練のWebデザイナー養成コースを受講する人でも35歳以下だったら可能性あるんじゃないかしら。35歳以上だったら悪いこと言わないので、もう少し硬い仕事を目指した方がマシだと思うが。



初心者も経験者もOK!【インターネット・アカデミー】