【今さら聞けない！】UI/UXデザインの違いとその学習方法とは！

UI/UXの違いとは何なのか、そして独学に最適な学習サイトや記事をまとめています。スマホが普及されてからUI/UXデザインの重要性が上がってきています。初心者でもこれから学習するのに役立つものが多いのでぜひ参考にしてみてください！

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

スマートフォンが普及してから、主にアプリの開発において「UI/UX」というキーワードが非常に重要視されています。UIデザイナーやUXデザイナーといった職も生まれるほど、現在のアプリ開発ではデザイン面が大事だということです。

とはいえ、普段から携わっている人でないと身近な言葉ではないでしょう。

今回は初心者の方でも分かるように、「UI/UX」について解説し実際の勉強サイトなどを紹介していきます。デザイナーとよりスムーズにコミュニケーションを取るためにも必要な知識となるはずです。

なお本記事は、TechAcademyのUI/UXデザインオンラインブートキャンプの内容をもとに紹介しています。

UIとは

fig1-620x412

UIとは「User Interface(ユーザーインターフェース)」の略称で、「人と物が接触する部分」を意味します。

サイトであれば、ブラウザ上で表示されるフォント、画像、ボタンなどユーザーの目に触れる外観を「UI」と呼んでいます。

UIデザインに特化して学習したい人向けの記事も合わせてご覧ください。

[PR] UI/UXデザインで挫折しない学習方法を動画で公開中

UXとは

UXとは「User Experience(ユーザーエクスペリエンス)」の略称で、「人が物やサービスを通じて得られる体験」を意味します。

例えば、「読みやすいフォント」「サイトの回遊がしやすい」「ECサイトで商品の購入までがスムーズ」といったサービスは全て「UX」に関わるところになります。

Webサイトやアプリに限らず「丁寧な対応」というユーザーが感じる全てのことがUXに当てはまるのです。

UIデザイン・UXデザインの違いとは

UI/UXという単語が広く知れ渡っているためよく混同している人もいるかと思います。

「UI」とはアイコンやボタンなどといった見た目、「UX」はそのUIを実際に触るなど体験してみて感じる「良い」「悪い」といった感覚です。

とはいえ、UIだけが良いUXを作るとは限りません。とてもキレイなUIを作っても、今まで見たことのないような動きのあるサイトを作ってもユーザーが使いやすいと感じなければUXが良いとは言えないのです。

ユーザーが満足するUXを意識しながらサイトやアプリのUIをデザインすることが重要です。

コラム

実は私も！？独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、スクールが向いているかもしれません。
お試しのつもりで、まずは一度無料相談に参加してみませんか？

現役エンジニア・デザイナーに何でも気軽に相談できる30分をすべて無料でできます。
無理な勧誘は一切ないので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！無料相談はこちら

UI/UXが学べる記事やスライド

まだまだUI/UXデザインが学べるサイトは多くありませんが、有名なUIデザイナーなどが挙げている資料は参考になるでしょう。どういった意識で仕事しているのかなど参考にしてみてください。

心地よいUIの温度 – 言葉と気遣いで高めるUI

心地よいUIの温度 – 言葉と気遣いで高めるUI – from wariemon

UIを温泉にたとえて分かりやすく紹介してくれています。ユーザーにとって心地よいUIを作るために理解しておくとより良いアウトプットが出せるはずです。

UIデザインとUXの超基礎「UI Design & UX for ENGINEER」

UIデザインとUXの超基礎「UI Design & UX for ENGINEER」 from Kazuki Yamashita

UI/UXの超基礎ということで、まず最初に見ておきたいスライドでしょう。

UI/UXがどういった役割を果たしているのか、そしてそれぞれの関連性についても解説しています。

UIデザイナーのおしごとby Sumire Hibiya

5分でおさらいするモバイルUIデザインby usagimaru

UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】

以上、UI/UXの入り口になるところを紹介してきました。

UI/UXデザインは、プログラミングと違い「これが絶対」というものはありませんが、常にトレンドを追う必要があるでしょう。これからUIデザイナーを目指す人は世の中のサイトやアプリがどのようなUIで今後どうするとより心地よくなるのか考えると良いかと思います。

[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

プログラミングを独学していて、このように感じた経験はないでしょうか？

・調べてもほしい情報が見つからない
・独学のスキルが実際の業務で通用するのか不安
・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう厳しい試験を通過した講師があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

無理な勧誘は一切ありませんので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！無料相談を予約する

「Sketch vs. Figma」デザインツールとして優れているのはどちらか

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、WebデザイナーであるChristian...

アプリデザイン

ユーザー満足度を上げる！UXデザインで守るべき10のルール

本稿は、Designmodoのブログ記事を、Webdesigner Depotより了解を得て日本語翻訳し掲載した記事になります。 Webサイトやアプリにお...

アプリデザイン

デザイナーなら必見！どんな作業にも便利なSketch用プラグイン12選

本稿は、WebDesignerDepotのブログ記事を許可を得て日本語翻訳し掲載した記事になります。本記事は、ライターでありUXデザイナーでもあるJak...

アプリデザイン

具体的な方法を学ぶ！優れたアプリのデザインプロセスとは

本稿は、Studio by UXPinのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。「問題を解決するためには、まず最初に、問題が存在すると認...

アプリデザイン

優れたデザインを作るための社内コミュニケーション術とは

本稿は、Studio by UXPinのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はLaura Klein氏によって投稿されました。...

アプリデザイン

【厳選！】アプリ開発の参考に！おしゃれなアイコンやロゴまとめ10選

アプリを開発し、リリースさせるとなると必ず必要になってくるものが「アイコン」です。人に使ってもらうアプリであれば、見た目の心地よさは重要な要因になってきます。特...

アプリデザイン

あわせてよく読まれている記事

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。また、本記事は、Doru Ciobanu氏によって投稿されました。タイポグラフィは、独自の世界観、テクニック、統一感を組み合わせたアートです。素晴らしいデザインには、素晴らしいタイポグラフィがあります。 Webデザインまたは出版物のデザインでも、パンフレットやユーザーインターフェースのデザインでも、ロゴのデザインでも、プロジェクトを成功させるために重要な鍵となるものの1つはフォントです。フォント、色、その他デザインをどのように組み合わせるかという選択が、成功と失敗の分岐点となります。こうした細部に十分な注意を払わないがために、優れた製品を生み出すために費やした全ての努力が無駄になることもあります。しかし幸いなことに、優れたタイポグラフィのためのガイドとなるリソースは、豊富に存在しています。そして、これから紹介するのは、2016年に最も売れた50のフォントです。 1. FF DIN デザイナー：Albert-Jan Pool デザインされた年：1995 発行者：FontFont FF Dinは、1995年から2009年にかけて、オランダのデザイナーAlbert-Jan Poolｚ氏によって制作されたフォントです。FF Dinには、20のウェイト（フォントの太さ）があります。編集、出版物、広告、パッケージ、ブランディング、クリエイティブ産業（creative industries：知的財産権に関わるデザイン）、ポスター、看板、Webや画面の設計に適しています。なお、キリル文字とギリシャ語の書記体系については、サポートが限られています。 2. Brandon Grotesque デザイナー：Hannes vonDöhren デザインされた年：2010 発行者：HVD Fonts Brandon Grotesqueは、6つのウェイトとそれに対応する6つのイタリック体から成る、有名なサンセリフのフォントです。このフォントは、可読性を高めるために光学的な修正を加えた幾何学的形状から、インスピレーションを受けています。 Brandon Grotesqueは機能的かつエレガントなフォントです。ウェイトの太さをthinで色をブラックにすると、展示デザインに適しています。 Brandon Grotesqueは、洗練されたプロフェッショナルな印象を与えるデザインを生み出すには良い選択です。また、西ヨーロッパ言語だけでなく、中欧および東ヨーロッパ言語をサポートする拡張文字のセットもあります。 [PR] UI/UXデザインで挫折しない学習方法を動画で公開中3. Century Gothic デザイナー：Monotype Design Studio　Sol Hess　Morris Fuller Benton デザインされた年：1990-1995-2007 発行者：Monotype Century Gothicは、Futuraフォントの競合他社の2つの書体から派生したフォントですが、Futuraフォントの影響も強く受けています。軽くて広々とした印象の書体であり、クリーンな縁取りを備えた、細部まで完璧なフォントです。見出しや大きな看板のデザインには理想的です。 4. Proxima Nova デザイナー：Mark Simonson デザインされた年：2005 発行者：Mark Simonson Proxima Novaのフォントファミリーは、有名なProxima Sansフォントの完全な復古版です。OpenTypeフォント機能は48個に拡張されました。 3つの幅には、それぞれ16のフォントが対応しています。人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。

Webデザイン

ほとんどのデザイナーが気付いていない「UXの4つの間違い」とは

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、HooktoWin.comの共同設立者であるAndrew McDermott氏によって投稿されました。デザイナーは不可能を可能にすることを期待されます。信じられないほど複雑なプロセスを、シンプルで美しいものに作り変えるよう求められることも、何度もあるかもしれません。そして成功したときには、ロックスターになったような気分を味わえるでしょう。しかし、こうした大きな期待に応えられなかったときには、ひどく落ち込むかもしれません。デザイナーには完璧主義者の人が多く、自分自身が自分に対する最悪の批評家であることもよくあります。間違いを自分の責任と見なして、全てを台無しにしてしまったかのように思うこともあります。それでも、落胆するような状況において間違いを受け入れることで、これを成長と学びの機会とすることができるはずです。もし本当のことをお伝えするとしたら…… デザイナーが気づいていない真実：間違いのほとんどは、デザイナーの責任ではありません。辛い現実：いずれにしても、デザイナーは責任を負うことになります。デザイナーに不足しているのは、人についての知識新規の仕事やプロジェクトにおける、デザイナーの目標設定の仕方が、間違いの原因というわけではありません。ほとんどの場合、実際はその逆です。デザイナーは、多くの人が気にしないような細部のデザインまで、こだわりを持って熱心に取り組みます。神は細部に宿ることを知っているからです。問題となるのは、人についての知識が不足しがちなことです。これは、デザイナーが学校で教えられないことですが、仕事に大きな影響を与えます。もしデザイナーが正規の（または非正規の）教育を受けていれば、その過程で自分独自のデザインを究めることを求められます。また、デザインの原則、デザインと配色の関係、色彩なども学びます。しかし、これだけでは十分ではありません。デザインや美術について教育を受けることはあっても、人について深く学ぶ機会はありません。こうした理解不足は、デザインに影響し、ひいては予期しないUXの間違いの原因となります。デザイナーに不足しているのは、人についての知識なのです。 UXの間違い1：ユーザーが実際以上に多くを知っていると思い込むことデザイナーは合理的な人々です。インターフェースの設計に多くの時間を費やすため、デザインがWeb上でどのように機能するかを直感的に理解しています。「これは常識だ！」とデザイナー自身が思っていても、実際はそうではないこともあります。デザイナーにとっての常識が、ユーザーにも通用するとは限りません。デザイナーは設計に多くの時間を費やしているために、よく知っているだけなのです。また、デザイナーがプロフェッショナルであるのに対して、ユーザーが同等の専門性を備えていないこともあります。こうした理由から、ユーザーに対して次のように仮定するのは、間違いです。適切な質問を選ぶことができる設定の操作について理解しているアイコン、マーク、ロゴの意味を知っているコンテンツに意識を集中し続けることができる Webサイトで提供している指示をよく読んでそれに従う必要とするコンテンツの見つけ方を知っている問題の核心が見えてきたでしょうか？デザイナーがこのように仮定すること自体は合理的ですが、問題を引き起こすおそれがあります。なぜなら、こうした仮定は現実に基づいたものではないからです。利用方法が全く分からないユーザーもいますユーザーの中には設定の操作が初めてという人もいますあなたの設計したサイトを、乱雑で混乱するようなデザインだと思うユーザーもいます関心が他に向いているマルチタスク型のユーザーは、コンテンツに集中するほど時間がありません指示に従うのを拒むユーザーもいますほとんどのユーザーは、見ているコンテンツについて詳しく知っていませんこうした場面でデザイナーに求められる仕事は、「迷える羊の群れを、頭数を減らして束ねる」ことです。条件に合うユーザーだけを選び抜き、意図したプロセス通りに彼らがサイトを利用できるような設計にします。その他の条件に合わないユーザーは、除外します。 UXの間違い2：ユーザーのためのデザイン「ユーザーのためのデザイン」は、ここ数年で繰り返し提言されているアドバイスで、頭にたたき込まれているデザイナーも多いかもしれません。デザイナーは、ユーザーのニーズをよく理解して、ユーザーを中心にデザインするよう教えられています。しかし、このアドバイスには見落としている点があります。「なぜ？」と不思議に思うかもしれません。見境なく教え込まれているアドバイスですから。その見落としている点とは、必ずしも全てのユーザーがターゲット・オーディエンス（Target audience：広告やマーケティングにおいて、目標とする顧客）と一致するとは限らないことです。サイトを利用しているユーザーが、「求めているユーザー」像と一致しないことがあるのです。例として、Googleを考えてみましょう。 Googleは、そのエネルギーや注意の大半をユーザーに向けています。Googleにとってのユーザーとは、検索者です。検索者により良いユーザー体験を提供するために、多くの時間と巨額の資金を投資しているのです。しかし、検索者がGoogleの唯一のユーザーでしょうか？実は、その他にもGoogleのユーザーは存在しています。広告主：Googleは広告主が自らの命令に従うことをよく知っています。Googleは、広告主やサイト運営者に対してポリシーを公開しています。もし彼らがGoogleのポリシーに違反して、好き勝手に利用するとしたら、広告掲載やサイトは強制停止されます。ボット（クローラ）：Googleは、ボットなどによってサイト上で「通常以上のトラフィックが検出」された場合に、これをブロックします。検索している主体が人間でも、誤検知（False positive）によりブロックされてしまうこともよくあります。詐欺者：Googleは詐欺サイトもブロックしています。例えば、偽のダウンロードボタンをクリックすると、ランサムウェア（ransomeware）がコンピュータにインストールされるよう仕組んであるサイトなどです。検索者：Googleの検索エンジンの利用者です。このユーザーたちこそGoogleに利益をもたらしています。彼らが広告をクリックしたり、アプリケーションを利用したり、ソフトウェアをダウンロードすることで、Googleに収益が発生する仕組みになっています。 Googleは、自らの目標や利益に反するユーザーに対しては、ユーザーエクスペリエンスの提供を拒否しているのです。 Googleは、ほとんど全てのユーザーに提供されていますが、Googleのユーザーリストに載っていない人々（ボット）は締め出されます。広告主が検索者にスパムを送信するとしたら、広告掲載を強制停止されます。Googleは、自らの目標や利益に反するユーザーに対しては、提供を拒否しているのです。「ユーザーのためのデザイン」は、デザイナーがターゲット・オーディエンスだけに意識を向けるという前提があってこそ有益なアドバイスになることは、十分理解できるかと思います。しかし、多くのデザイナーがユーザーについて見落としている重要な点は他にもあります。それは次の「UXの間違い3」で述べるとしましょう。 [PR] UI/UXデザインで挫折しない学習方法を動画で公開中UXの間違い3：フリクションが不十分であること Webデザインにおける「フリクション（friction）」とは、Webサイト（のレイアウトに使われている要素）の利用を阻害することを意味します。一般にデザイナーたちは、フリクションを悪いものだと考えています。Webサイトを上手く設計しなければ、意図した通りにユーザーが行動しないおそれもあります。こうしたイメージから、デザイナーはフリクションを恐れがちです。しかし、全てのWebサイトにはフリクションが必要です。もし音楽を聴いていて、うるさいと感じたらどうしますか？おそらく音量を下げますね？同じことがフリクションにも当てはまります。ユーザーは音楽に、フリクションは音量調節のダイヤルに、それぞれ例えることができます。望ましいユーザーだけをWebサイトに集めるために、いわばフリクションというダイヤルで、音量を上げたり下げたり調整するのです。フリクションを活用しているWebサイトの例を、次にいくつかご紹介します。 Craigslist（クレイグズリスト）：Craigslistは、同じ広告を50回連続で投稿されたりするのを嫌がります。そのため、Ghostingという技術によってフリクションを生み出しています。ユーザーがスパムを送信したり、広告を過度に多数回投稿した場合には、広告はブロックされて誰にも見えないように非表示になります。 Google：Googleはユーザーに自らのポリシーを尊重してもらいたいようです。もしサイトを悪用したり、検索結果を利用してWebスクレイピング（Web scraping）を行えば、「通常と異なる」ユーザーとして検出されます。さらに警告を無視するとブロックされます。 Quora：Q&Aのサイトです。利用ガイドラインはシンプルで、「Be nice, be respectful.（マナーと節度をもって利用すること）」というポリシーを掲げています。このポリシーを無視するユーザーには警告を与え、ブロックまたは利用禁止にします。フリクションを利用することで、他のユーザーにとって安全なサイトであることを保証しているのです。Quoraのサイトのシステムは、ユーザー体験の質を最大限に高めるようにデザインされています。デザイナーにとってフリクションは、問題となるかもしれません。しかしそれはデザイナーが、フリクションというダイヤルを調整する方法を知らなかったり、またはフリクションが存在すること自体知らないからです。デザイナーのフリクションに対する理解が不足していると、フリクションに過剰反応してしまったり、皮肉なことに望ましくないユーザーにWebサイトを悪用されることも起こり得ます。では、フリクションを具体的に実装するとしたら、どのようになるのでしょうか？例を見てみましょう。問い合わせフォームに、キャプチャを3～4つほど複数設けて、人間であることを判別する利用に至るまでのステップ数を必要以上に増やすことで、ユーザーをふるいにかける文字で埋め尽くされたページ、またはデザイン要素がぎっしりと並んだページにする入力フォームを必要以上に多く設置することで、ユーザーを疲労させ、興味を失わせる（逆に入力フォームを十分に設置しないとしたら、全てのユーザーのアクセスを容易にすることになります。）コンテンツと関連性の低いストックフォトや画像を使うことで、ユーザーがコンテンツの意味を理解する妨げとするユーザーに個人情報や支払い情報の入力を求める一方で、サイト運営者の顔写真や個人情報などは可能な限り非公開にしておくフリクションは重要な設計であり、その形やサイズは様々ですが、多くのデザイナーが理解に苦戦するのは確かです。 UXの間違い4：上司の指示にいつも忠実であることこの間違いを回避するには勇気を要します。それに加えて、さらに重要なことですが、目標を明確に理解していることも必要です。現在デザインしている要素は、どのような完成形が望ましいのか、開発しているWebサイトの目標は何なのかなどです。目標に関するこうした質問にクリアで決定的な答えを出しておくことは、必須ですその理由は、あなたの上司、会社の役員会、クライアント、関係責任者から、目標に反する要求をされることがあるからです。相手の要求通りに進めたら良い結果は生まれないと、経験から予測できることもあるかもしれません。当初の目標に反して進めた結果、失敗プロジェクトとなるおそれもあります。もっとも、「指示通りに仕事をこなしてさえいれば、彼らは報酬を支払ってくれるから構わない。」という考えで、上司に協調するのは簡単ですが。自分の意見を声に出して伝えることが非常に重要です上司が自分自身のために行動しない場合には、あなたが上司に代わって行動することが重要です。もし上司が、彼ら自身の利益を損なうような指示を出してきたら、あなたの意見を声に出して伝えましょう。悪いニュースを伝えるべき場面です。上司に彼ら自身が犯そうとしている間違いを理解してもらうためです。もし自分の意見を声に出して伝えないことが習慣化したら、平凡なポートフォリオしか生まれないほとんどのデザイナーは自分の意見をはっきりと伝えることはありません。仕事を失ったり、キャリアに傷が付くのを恐れているからです。しかし、そのことが逆にこうした事態を招く原因となります。この間違いに対処する手立てが何もない場合にはデザイナーとしてチームに参加したときに、計画やデザインがすでに決定されていた場合にはどうするべきでしょうか？まずチームの他のメンバーと話し合いを持ちましょう。そして自分の意見をサポートする根拠（例えば、リサーチ、レポート、データなど）を十分に用意した上で、プロジェクトの責任者に意見を伝えましょう。最初は不可能に思えるかもしれませんが、実際には行うことは可能です。小さなステップから始めて、段階を追ってゆっくりと進めてみましょう。あなたはデザイナーとしてプロフェッショナルです。デザインツールを活用すれば、他の人が見逃してしまうようなUXの間違いを見つけることもできると思います。間違いを正すことで、複雑なプロセスを、シンプルで美しいものへと作り変えることができるでしょう。 [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。プログラミングを独学していて、このように感じた経験はないでしょうか？・調べてもほしい情報が見つからない・独学のスキルが実際の業務で通用するのか不安・目標への学習プランがわからず、迷子になりそうテックアカデミーでは、このような

アプリデザイン

大阪のIT・情報系専門学校18選｜自分に合った学校の選び方も解説

今回は大阪中心部のIT・情報系の専門学校をまとめました。資格やスキルなど特化した学校もあるため、自分に合った学校を見つけましょう。田島悠介今回は、なにか相談受けたんだって？大石ゆかり大阪に住んでる親戚がIT系の専門学校に通いたいって言ったんですが・・・どこを選べばいいかわからなくて・・・田島悠介よし！それじゃ、自分にあったIT系専門学校の選び方と大阪にある学校を紹介していくね！大石ゆかりお願いします！目次自分に合った学校の選び方学費を抑えられる学校資格が充実している学校プログラミングを学習できる学校実習の多い学校就職サポートが充実している学校まとめ自分に合った学校の選び方これからIT系の知識・スキルを習得したいと考えている方は多いでしょう。 IT系の専門学校に興味を持ってもどの専門学校に入学すれば良いのか、自分にはどの専門学校が合っているのか考えることは難しいです。本記事では以下のポイントに注目して大阪のIT系専門学校をまとめました。学費を抑えたい就職・転職の際の強みになる資格を取得したいプログラミングスキルを習得したい実習などで経験を積んで即戦力として活躍したい就職実績が良く、安心して就職・転職をしたい自分の目的に合った専門学校選びの参考にしてみましょう。 [PR] UI/UXデザインで挫折しない学習方法を動画で公開中学費を抑えられる学校学費を抑えながら通える学校についてみていきましょう。 JOHO大阪情報専門学校画像引用元：https://www.ocs.ac.jp/field/university/system.html 概要/特色 1年次学費が110万円を切っており、他の専門学校と比較して低料金低学費でありながら、大卒資格が得られる学科もあり学習コスパが高い AIを開発できるPythonが学べる JOHO大阪情報専門学校は学費が安価であるだけでなく、就職先にエンジニアが多数いることからノウハウは確かなものだといえます。 PythonやHTMLなど多様な言語を学ぶことが可能です。区分私立（学校法人電子開発学園グループ）学費入学選考料 1.5万円入学金 15.0万円授業料 58.8万円施設費 27.6万円実習費専門学校Webサイトに記載なし教材費２～5万円程度校友会費専門学校Webサイトに記載なし校費 2.0万円レクリエーション費 2.0万円 1年次合計 106.9万円卒業後の進路【内定職種】ネットワークエンジニアデータベースエンジニアセキュリティエンジニアシステムエンジニアプログラマゲームクリエイター Webプログラマー CGエンジニアゲームプログラマーその他【内定就職先】 HTKエンジニアリング SCSKサービスウェア旭情報サービス TDCソフトその他多数コース一覧【学科・コース】学科コース大学併修学科（4年）大学システム専攻大学ゲーム専攻ソフトウェア開発学科（3年）システム専攻（3年） AIプログラム専攻（3年）プログラム専攻（2年）ゲームクリエイト専攻（3年）ゲームプログラム専攻（2年）ソフトウェア制作学科（2年）パソコン応用学科（2年） ITライセンス学科（1年） ※IT系の学科のみを記載しています。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 HTML 情報セキュリティスペシャリスト CSS ネットワークスペシャリスト Java データベースペシャリスト JavaScript 情報セキュリティマネジメント C言語応用情報技術者 Python 基本情報技術者その他オラクルマスター CCNP（シスコ認定ネットワーク技術者プロフェッショナル） CG クリエイター検定 Web デザイナー検定 CG エンジニア検定情報検定（J検）マルチメディア検定その他 ※シラバスなどを参照入試方法書類選考面接選考（行事参加により免除される場合があります）入学難易度面接選考があるため、入学に対しては対策が必要です。入学難易度としては、筆記選考がないため、低めだといえます。住所大阪市東成区中本1-5-21 専門学校WebサイトURL：https://www.ocs.ac.jp/ ユービック情報専門学校画像引用元：http://www.ubik.ac.jp/gakka_course_explain/ 概要/特色 1年次学費が110万円を切っており、他の専門学校と比較して低料金ロボット関係まで学べる C言語やPythonなど習得できるプログラミング言語が多数ユービック情報専門学校は学費の安さに加えて、授業を通して学べるプログラミングが多数ある点が特徴的な専門学校です。区分私立（学校法人東洋学園）学費入学選考料 0.5万円入学金 10.0万円初年度学費 63.0万円施設費 17.0万円実習費 15.0万円 1年次合計 105.5万円卒業後の進路【内定職種】システムエンジニアプログラマーロボットエンジニアその他【内定就職先】株式会社アルプス技研株式会社ワールドインテックダイシン物流その他多数コース一覧【学科・コース】学科コースデジタル制御システム学科（3年） IoTエンジニアコースビジネス情報システム学科（3年）ビジネス情報コース情報学科（3年） ICTエンジニアコース ※IT系の学科のみを記載しています。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 C言語基本情報技術者試験 Java 応用情報技術者試験アセンブラ ITパスポート試験 PHP LPI認定試験 Python シスコ技術者認定 HTML インターネット検定 CSS 組み込みソフトウェア技術者 JavaScript エンベデッドシステムスペシャリスト SQL その他その他 ※シラバスなどを参照入試方法書類選考面接選考（行事参加により免除される場合があります）筆記選考（状況に応じて実施）入学難易度面接選考があるため、入学には対策が必要です。入学難易度は基本的には筆記選考がないため、低めだといえるでしょう。。住所大阪市都島区片町2-10-5 専門学校WebサイトURL：http://www.ubik.ac.jp/ 中央ＩＴビジネス専門学校画像引用元：http://www.gotogakuen.com/itb/whats/index.html 概要/特色 1年次学費が110万円を切っており、他の専門学校と比較して低料金 ITとビジネスのスキルを同時に学べる併修制度により短大卒資格を得られる中央ITビジネス専門学校はプログラミングを学べることに加えて、併修を活用することで短大卒業の資格を得られる専門学校です。区分私立（学校法人後藤学園）学費入学選考料 1.5万円入学金 10.0万円授業料 72.0万円施設費 5.0万円研修旅行費 21.0万円 1年次合計 109.5万円卒業後の進路【内定職種】専門学校Webサイトに記載ありませんでした。【内定就職先】専門学校Webサイトに記載ありませんでした。コース一覧【学科・コース】情報ビジネス学科コンピュータコース ※IT系の学科のみを記載しました。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 HTML ホームページ作成検定 CSS データベース検定 JavaScript IT活用能力検定 SQL ITパスポート試験その他その他 ※シラバスなどを参照入試方法書類選考面接選考（行事参加により免除される場合があります）小論文選考入学難易度面接選考と小論文選考があるため、入学難易度は低くはないため対策が必要です。住所大阪市東住吉区北田辺1-11-22 専門学校WebサイトURL：http://www.gotogakuen.com/itb/ 資格が充実している学校資格取得に対して力を入れている専門学校です。 OCA大阪デザイン＆IT専門学校画像引用元：https://www.oca.ac.jp/school/ 概要/特色国家資格からベンダー資格まで幅広く取得できる環境ホワイトハッカー認定試験など珍しい資格も取得可能カリキュラムが細かく設定されているため、より専門性の高い知識・スキルを習得可能 OCA大阪デザイン＆IT専門学校は非常に多くの資格取得を目指せる環境のある専門学校です。また、多数の資格に対応できるだけのスキルを培うことができる点も信頼できる点だといえるでしょう。区分私立（学校法人コミュニケーションアート）学費入学選考料 3万円入学金 10万円授業料 60万円施設費 35万円実習費 30万円教材費 3～6.5万円程度校友会費専門学校Webサイトに記載なし合宿等諸経費 1～6万円程度海外研修費 10万円健康管理費 2万円キャリア教育振興費 7万円 1年次合計約170万円卒業後の進路【内定職種】 AIエンジニア AIコンサルタント AIエバンジェリストシステムエンジニアサーバエンジニアネットワークエンジニアデータサイエンティストセキュリティエンジニアゲームプログラマゲームディレクターゲームプランナーグラフィックデザイナー CIデザイナー Webデザイナーその他【内定就職先】デジタル・メディア・ラボグラフィニカモノリスソフトアド近鉄その他多数コース一覧【学科・コース】学科コーススーパーゲームIT科 AIクリエイター専攻（4年）ホワイトハッカー専攻（4年）スタートアップ専攻（4年）ゲーム・CGクリエイター科スーパーゲームクリエイター専攻（4年）スーパーCGクリエイター専攻（4年）ゲームグラフィック＆キャラクター専攻 CG＆映像クリエイター専攻ゲームプログラマー専攻 e-sports科 e-sportsプロゲーマー専攻 e-sportsイベントスタッフ専攻 e-sportsマネジメント専攻（4年）クリエイター科グラフィックデザイン＆イラスト専攻ネット動画クリエイター専攻 ※IT系の学科のみを記載しています。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 PHP CEH（認定ホワイトハッカー） Python CDN（認定ネットワークディフェンダー） Ruby ITパスポート HTML 公認情報セキュリティマネージャー CSS CCNA（シスコ認定ネットワーク技術者アソシエイト） JavaScript 情報セキュリティスペシャリスト SQL 基本情報技術者試験 C++ 応用情報技術者試験 C# CG検定 Java マルチメディア検定その他 DTPエキスパートその他 ※シラバスなどを参照入試方法書類選考面接選考入学難易度面接選考があるため、入学難易度は低くないといえます。筆記選考がないため、勉強による対策は必要ありません。住所大阪市西区北堀江2-4-6 専門学校WebサイトURL：https://www.oca.ac.jp/ NRJ日本理工情報専門学校画像引用元：http://www.nrj.ac.jp/#modalSB 概要/特色国家資格からベンダー資格まで多くの資格が取得できる 2年間でみっちり業界での即戦力が身につく IT+工学のスキルが身につくため、就職時のアピールにつながる NRJ日本理工情報専門学校は多くの資格を取得できるだけでなく、ITに加えて工学まで学べる点が特徴です。区分私立（学校法人瓶井学園）学費入学選考料 2.0万円入学金 27.0万円授業料 100.0万円実習費 14.7万円厚生費 0.6万円校友会費 0.5万円同窓会費 0.5万円 1年次合計 137.9万円卒業後の進路【内定職種】ソフトウェアエンジニアハードエンジニアその他【内定就職先】アイコムアンリツテクニクス日本モトローラその他多数コース一覧【学科・コース】学科コース電子・情報工学科（2年）デジタル放送・通信Aコースコンピュータ開発コース情報システム科（2年）ネットワークシステムコース情報工学科（夜1年）ネットワークスペシャリストコース ※IT系の学科のみを記載しています。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 HTML ITパスポート試験 CSS 基本情報技術者試験 JavaScript 応用情報技術者試験 SQL ネットワークスペシャリスト試験その他オラクルマスター認定資格試験 CCNA（シスコ認定ネットワーク技術者アソシエイト）その他 ※シラバスなどを参照入試方法書類選考面接選考（行事参加により免除される場合があります）筆記選考（英語または数学Ⅰ）入学難易度面接選考と筆記選考があるため、他の専門学校と比較すると高めです。住所大阪市東淀川区大隅1-1-25 専門学校WebサイトURL：http://www.nrj.ac.jp/ 大原情報デザインアート専門学校画像引用元：https://www.o-hara.ac.jp/osaka/gakkou/joho/it/ 概要/特色国家資格はもちろん、プログラミング系の資格取得に力を入れている学費も他の専門学校と比較して低価格未経験からプロになるまでの体制が確立されている大原情報デザインアート専門学校は学費が低価格なことに加えて、どのコースにおいてもプロとして働けるスキルを培うことのできる専門学校です。区分私立（学校法人大原学園）学費入学選考料 2.0万円入学金 20.0万円授業料 70.0万円教材費 8.0万円維持費 18.0万円研修費別途卒業諸費用別途 1年次合計 118.0万円卒業後の進路【内定職種】ネットワークエンジニアデータベース管理者システムコンサルタントアプリケーションエンジニア Webエンジニアシステムエンジニアプログラマーその他【内定就職先】アルプス技研 NTTデータ関西 ALL CONNECT 共同コンピュータさくらケーシーエスその他多数コース一覧【学科・コース】コースネットワークスペシャリストコース ITプロフェッショナルコース ITスペシャリストコース ITスペシャリスト+ネットワークセキュリティ専攻コース ITスペシャリスト+Webシステム専攻コース ITスペシャリスト+スマートフォンアプリコース ITエンジニアコース ITビジネスコース ITライセンスコース IT・公務員コース ※他にも学科はありますが、IT系の学科のみを記載しています。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 HTML ネットワークスペシャリスト試験 CSS 基本情報技術者試験 JavaScript 応用情報技術者試験 Java ITパスポート試験 C言語 Javaプログラミング能力認定試験その他 C言語プログラミング能力認定試験その他 ※シラバスなどを参照入試方法書類選考面接選考（必要に応じて）入学難易度書類選考のみのため、入学難易度は低めだといえるでしょう。住所大阪市浪速区難波中1-6-2 専門学校WebサイトURL：https://www.o-hara.ac.jp/osaka/gakkou/joho/ 大阪ＩＴ会計専門学校天王寺校画像引用元：https://www.all-japan.ac.jp/movie 概要/特色国家資格はもちろん、ベンダー資格まで多数の資格取得をサポート C言語など、多数のプログラミング言語を習得可能基本的に書類選考のみで入学の手間があまりかからない大阪ＩＴ会計専門学校天王寺校は多くの資格取得をサポートしている学校です。 HTMLやJavaなど自分の意向に合わせた言語を学び、スキルを高めていくことができるでしょう。区分私立（学校法人立志舎グループ）学費入学選考料 2.0万円入学金 20.0万円授業料 74.0万円実習費 16.0万円維持費 16.0万円教材費実習費に含まれる 1年次合計 128.0万円卒業後の進路以下の情報は、大阪校での記載がなかったためグループの内定職種・就職先を記載しています。【内定職種】システムエンジニアプログラマーネットワークエンジニアデータベースエンジニア情報セキュリティエンジニアその他【内定就職先】富士ソフトテクノプロアルプス技研 TISシステムサービス日本システムソフトウェアその他多数コース一覧【学科・コース】コース情報システム3年・2年コース情報セキュリティ3年・2年コース ITビジネスコース情報経理コース ※IT系の学科のみを記載しています。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 C言語基本情報技術者試験 Java 応用情報技術者試験アセンブラ言語ネットワークスペシャリスト試験 HTML データベーススペシャリスト試験 CSS MOS JavaScript C言語プログラミング能力認定試験 SQL Java言語プログラミング能力認定試験その他情報処理技術者能力認定試験 Webクリエイター能力認定試験その他 ※シラバスなどを参照入試方法書類選考面接選考（必要に応じて実施）入学難易度基本的には書類選考のみであるため、入学難易度は低めです。住所大阪市天王寺区茶臼山町1-15 専門学校WebサイトURL：https://www.tennoji-itkaikei.ac.jp/ コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。そんな方のために参考として、テックアカデミー卒業生がスクールを選んだ理由

プログラミング

現役のデザイナーが語る！優秀なUI/UXデザイナーに不可欠なスキルとは

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Webデザイナー・ライターのJake Rocheleau氏によって投稿されました。 UI/UXデザイナーの仕事の求人を見つけると、困惑を覚えるかもしれません。これら2つの仕事のスキルセットは密接な関係がある一方で、常に重なる領域があるとは限りません。たしかに優秀なUIデザイナーがみんな、ユーザー心理の理解に長けているとは限りません。同様に、優秀なUXデザイナーが皆、PhotoshopやSketchの使い方をマスターしているとは限らないのです。しかし、求められるスキルセットには重なる領域が多いため、優秀なUI/UXデザイナーとなるには、試しに両方のスキルに挑戦してみることも必要です。このガイドでは、優秀なUI/UXデザイナーになるために必要な基本的スキルについて紹介します。両方のデザイナーの役割をこなすことができれば、職業の安定化につながりやすいというメリットがあります。またプロジェクトにおいて、全体像をはるかに把握しやすくなります。目次ユーザーの代弁者であることビジュアルコミュニケーションデザインソフトウェア共感力・クリティカルシンキングユーザーの代弁者であること UI/UXデザイナーはユーザーの代弁者であるべきです。しかしユーザー自身ではありません。この違いを理解しておくことは重要です。というのも、製品を使うほとんどのユーザーは、UI/UXデザイナーと同等の専門性を備えていないからです。ユーザビリティテストが非常に重要であるのは、こうした理由からです。製品の好ましい点・好ましくない点について、直接ユーザーに尋ねてみましょう。ユーザーの意見（フィードバック）を集めるのです。ユーザーの抱える問題の根本原因を見つけて、それを解決するために必要十分な修正のみ加えます。 UXの本質は、美しいインターフェースというよりも、UIの使い心地・振る舞い・ユーザーインタラクションへの応答にあります。細部にまで十分な注意を向け、あなたが優れていると思えるアイデアでも、ゼロから考え直す労を惜しまない姿勢が大切です。デザイナーのあなたの好むデザインでも、それがほとんどのユーザーに受け入れられない状況では、アイデアを一度捨てて修正を加えることが一般的には賢明です。ユーザーの不満に耳を傾け、彼らの本当に言いたいことを理解しようと努めることが大切です。ユーザーテストの大部分はUXの分野になりますが、このことはUIデザイナーとUXデザイナーの両者が心掛けるべきです。どんなに美しいインターフェースも、適切に機能しなければ、何の価値もありません。言葉や行動を通して、「ユーザーの代弁者であること」を実践しましょう。これは、UXデザイナーに第一に求められるスキルです。具体的なスキルではないため、習得するのが難しく思えるかもしれません。しかし、心を開き、デザインを再考する労を惜しまなければ、ユーザーの視点をはるかに理解しやすくなると思います。 [PR] UI/UXデザインで挫折しない学習方法を動画で公開中ビジュアルコミュニケーションデザイナーにとって最も貴重なスキルは、おそらくビジュアルコミュニケーション（視覚コミュニケーション）です。ほとんどのデザイナーは、頭の中で思いついたアイデアを、プロジェクトマネージャー、エンジニア、他のデザイナーたちに説明するべき場面に直面します。そのため、スケッチの描写によってアイデアを視覚的に伝えることができるとしたら、それは素晴らしいスキルになります。あるいは、ワイヤーフレーム、モックアップ、インタラクティブデザインのプロトタイプなどを作成して、デジタルな媒体でアイデアを伝えることもできます。アイデアを伝えるためのツールや媒体として何を使うかは、それほど重要なことではありません。もちろん多くのツールを使いこなせればそれに越したことはありませんが、もしPhotoshopについての知識がなくて、ワイヤーフレーム作成用のツールしか使えないとしても、アイデアを伝えるには十分事足ります。デザインチームと開発チームにアイデアを視覚的に伝えられることは、非常に重要です。もちろん言葉で伝えることも可能ですが、デザインを直接見せる方がはるかに効率的です。また、ビジネスやマーケティングなど他の分野の人にも、アイデアを伝えられるようになりましょう。デザインの専門家でない人に対して、複雑な機能について伝えるには、より平易な言葉で説明することが求められます。このように、視覚的にまたは言葉によって、UXの計画を全ての人に上手く伝えられるようになることが重要です。そのために必要となるのは、1つには視覚的にアイデアを伝えるスキル（スケッチの描写スキル、ソフトウェアなど）、もう1つはコミュニケーションスキルです。デザイナー自身がアイデアをよく理解しているからといって、他の人にも自然と理解してもらえるとは限りません。チームやクライアントに対しては、追加説明が必要かどうかを確認して、質問の機会を与えましょう。彼らが質問をするのを恐れて、ただ受動的に座って話を聞いているような状況にしてはいけません。ソフトスキルも、UXの仕事には不可欠です。コミュニケーションスキルを磨けば仕事の円滑化につながります！デザインソフトウェア全てのUXデザイナーがPhotoshop、Sketch、Illustratorなどのデザインソフトウェアを使いこなせるとは限りません。しかし全てのUIデザイナーは、この中のソフトウェアの少なくとも1つは、使えるようにしておくべきです。両者の仕事の違いは、小さいですがとても顕著です。UIデザイナーは、アイコン、ロゴ、インターフェースのモックアップなど、外観のデザインを担当します。一方UXデザイナーは、これらのデザインされたインターフェースの振る舞い、ユーザーエクスペリエンスのデザインを担当します。しかし、UXデザイナーの道を進むとしても、PhotoshopまたはSketch（もしくは両方）の使い方を学んでおくのが賢明です。どちらか1つだけでも使うことができれば、アイデアを視覚的に分かりやすく表現するのに役立ちます。雇用主からも、収益性の高いスキルとして高く評価されやすいでしょう。そして、必要があれば、Web上に数多く存在しているオンラインソフトウェアも利用しましょう。 Adobe Creative Suite（アドビクリエイティブスイート）などのデスクトップソフトウェアは、デザインプロセスに不可欠です。またInvisionやUXPinなどのプラットフォームを使いこなせることは、ポートフォリオの中で紹介するスキルとして重要です。これらのツールは、プロトタイピングを素早く行い、インタラクティブなデモを作成するためのものです。もしくは、Bootstrapなどのフロントエンド言語用のライブラリを使うこともできますが、コードを学ぶ必要もあるため、全てのUXデザイナーが使えるようになるべきツールではありません。実際のところ、どのツールでプロトタイプを作成するかは、あまり重要ではありません。しかし、数多くのデザインソフトウェアを使えたら、スキルとして履歴書に書くことができるので有利でしょう。最後におすすめしたいのは、アニメーション（動画）制作用のソフトウェアです。最も人気のあるソフトウェアから選ぶとしたら、PrincipleとAdobe After Effects CC（アドビアフターエフェクツCC）です。これらのソフトウェアは、モックアップの作成や、レイヤーの操作によってアニメーション（動画）を編集するのに役立ちます。優秀なUI/UXデザイナーとなるためには、デザインプロセスを各段階ごとに考えることが大切です。デザインプロセスは、まずワイヤーフレームとプロトタイプの作成、次にデジタルグラフィック（UI）のデザイン、最後にインタラクティビティの実装、という順で進めるのが一般的です。アニメーション（動画）制作用のソフトウェアを使えば、実際にコードを書いてインターフェースのデモを作成しなくても、シミュレーションを行うことができます。プロジェクトリーダーも、こうしたソフトウェアを使えるスキルのあるデザイナーを高く評価する傾向にあります。実際のデザインプロセスにおいても、役に立つことを実感できるスキルだと思います。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。そんな方のために参考として、テックアカデミー卒業生がスクールを選んだ理由

アプリデザイン

Webデザイナーの仕事内容！実際のデザイン業務を現役 Webデザイナーが解説

Webデザイナーの仕事内容についてまとめています。 Webデザイナーは未経験からでも働いている人が多くいます。スキルを身につければ環境に左右されずに働くことができるので、これから目指したいと思っている人は、ぜひ知っておきましょう。なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。田島悠介今回は、Webデザインに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Webデザイナーついて詳しく説明していくね！大石ゆかりお願いします！目次 Webデザイナーとは Webデザイナーの仕事概要 Webデザイナーの魅力 Webデザイナーになる方法 Webデザイナーの仕事環境 Webデザイナーになるための勉強方法 Webデザイナーとは Webデザイナーとは、主にWebサイトのデザイン業務をメインに行う職種です。 Webサイトの制作業務は多岐に渡ります。クライアントとの打ち合わせ進行管理企画設計デザインコーディングシステム構築マーケティングなど様々な業務がありますので、所属している会社の方針や、個人の能力によって、業務の範囲が異なります。細かく分けた場合には、およそ下記のように職種が分けられます。 Webディレクター：打ち合わせや進行管理、企画、カメラマンやライターの手配 Webデザイナー：デザインコーダー（フロントエンドエンジニア）：コーディング、Javascriptの実装など Webエンジニア：WordPressなどのCMS構築、その他システム構築 Webマーケター：Webマーケティング、広告運用など会社によっては、完全に分業のところもあったり、WebデザイナーがコーディングやCMS構築まで担当したりなど、業務の範囲は働く場所や、自分の能力次第で大きく変わります。 [PR] UI/UXデザインで挫折しない学習方法を動画で公開中Webデザイナーの仕事概要 Webデザイナーは、Webサイトのデザインを作ることが主な仕事です。 Webサイトのデザインはサイトの目的やターゲットに合わせた全体の印象や見やすさや使いやすさユーザーの興味を惹きつけるようなビジュアル作り Webサイトとして（予算の範囲内で）実装可能かなど様々な要素を考慮しながら作成していきます。また、アニメーションを取り入れる場合の動きの設計なども含まれます。仕事内容には実際のところホームページ作成だけではなく、運用していく上で必要なバナーの作成など様々です。以下では、主な仕事である Webサイトのデザインバナーや画像の作成 Webサイトのコーディングについて紹介しています。 Webデザイナーの仕事がどんなものなのかイメージが湧かない人は、知っておいて損はないでしょう。 Webサイトのデザイン Webサイトをデザインしていくためには様々なツールを使用していきます。そこで主なツールを4つ紹介します。 Photoshop（Adobe） Photoshopは、画像の編集・加工、デザイン、イラスト制作など様々な用途で活用されています。 Webサイト全体のカンプデザインの作成から、Webサイトに載せる写真の加工、例えば、写真に映り込んだ余計なものを削除したり、商品の写真を切り抜いたり、色調を変えたりなど、非常に多彩な調整ができます。 Illustrator（Adobe） Illustratorは、特に紙媒体のチラシや広告、ロゴデザイン、イラスト制作などに用いられます。 Photoshopでは、主にラスタ形式（1px角のドットの集合体で画像を描画する）の画像を扱いますが、Illustratorではベクター形式（複数の点とそれをつないだ線の数値の集合体で画像を描画する）の画像を扱うことができ、拡大縮小にも耐えられる画像を作成することができます。いろんなサイズで展開の必要があるロゴの制作や、Webサイトで使用するSVG形式のアイコン画像などはIllustratorを使って作成していく場合が多いです。 XD（Adobe） XDは、Webサイトやアプリ等のデザインに適したツールです。ワイヤーフレーム制作、デザイン制作、プロトタイプ化、プレビュー、共有などWebサイトやアプリの制作に特化した機能があるのが特徴です。PhotoshopやIllustratorに比べて機能が絞り込まれているため、比較的学習コストが低く、動作が軽量です。アドオンで機能の拡張が可能です。 Sketch（Bohemian Coding） Mac用のWebサイトやUIデザインに特化したツールです。基本的にはXDと同じように、機能がWebデザイン、UIデザインに必要なものに絞り込まれていてシンプルなつくりです。プラグインで機能を拡張することも可能です。バナーや画像の作成 Webサイトは、完成して終わりではなく運用していくものです。 Webサイトの更新に必要なバナーの作成や、掲載する写真の加工、ネット広告に使う画像の作成なども行います。小さい枠の中でユーザーに効果的にアピールできるよう、画像や文字などを組み合わせて作成します。 Webサイトのコーディングコーディングとは、仕上がったカンプデザイン通りに、Webサイトを組み上げていくことです。基本的なWebサイトの見た目はHTML・CSSによって作られています。下記のような簡単なページを例に説明してみます。 See the Pen vYLxZQM by marihashimoto (@mari877) on CodePen. HTML Webサイトにおける内容（文書）を構成するのがHTML（HyperText Markup Language）です。基本的には文書にHTMLのタグ（<h1>や<nav>など）をつけて構造的な意味合いをつけていきます。上記のページのHTMLは以下のようになります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Webデザイナーの仕事とは？</title> </head> <body> <h1>Webデザイナーの仕事とは？</h1> <nav>

Webデザイン

1900年代のデザインの歴史から学ぶ！デザインの基本とは

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Dmitry Fadeyev氏によって投稿されました。近年人気の高い「フラット」なインターフェースのデザインは、単なるトレンドではありません。それは真のデザインへの欲求の現れです。つまり、視覚的に過剰なものを抑え、偽物や余分なものを排除しようとする欲求です。技術の進歩はときに過剰なものを生み出すことがあります。 19世紀には、機械化された大量生産によって、装飾品を早く生産することができるようになり、その結果、製品は過剰に装飾されるようになりました。近年、同様のことがデザインの世界でも起きています。ディスプレイやスタイリングの技術の進歩によって、デザイナーたちはリッチな外観のインターフェースをデザインすることが可能になりましたが、その結果、スキュアモーフィックデザイン（現実の質感を模倣したデザイン）やスタイリングが過剰になりました。モダンデザインの運動は、本物のデザインを求める過程で、19世紀の過剰な装飾を抑制することによって、現代の大量生産によりふさわしいデザインを生み出しました。目次モダンデザインの誕生デジタルの装飾本物のデザインミニマリズムではない本物のデザインが重要である理由モダンデザインの誕生 1908年、オーストラリアの影響力の強い建築家であるアドルフ・ロースは、『装飾と犯罪』という挑発的なタイトルのエッセイを書きました。ロースは、「現代の装飾主義者たちは、文化的に遅れているか病理の症例である。彼らの作品は今後3年も持たないだろう。彼らの生産したものは、文化人には受け入れがたいものであり、他の人々にとってもやがてそうなるだろう。」と主張しています。さらに大胆にも、「人々の水準が低いほど、装飾は贅沢になる。装飾に依存するのではなく、形に美しさを見つけることが、人類が目指すべき目標である。」と主張しています。なぜロースは装飾を批判するに至ったのでしょうか？モダンデザインの先駆者であるロースのマインドセットを理解するには、初めに19世紀のデザインの実態を知る必要があります。蒸気機関の発明によって、機械化された大量生産の時代が始まりました。美術評論家のフランク・ウィットフォードは、「蒸気駆動の機械は、人間の手作業よりも速く、より規則的にほぼすべての物質を切って型抜きして、生産することができます。生産が機械化されたことにより、より低い価格でより高い利益が実現されています。」と書いています。しかし生産方式が人の手作業から機械に変化した一方で、製品のデザイン自体は変化しませんでした。建築や家具から衣類や食器に至るまで、ほとんどの製品には、ルネサンス時代からの伝統的なデザインに基づく、豪華な装飾が加えられていました。歴史的に、人の手作業による装飾品は生産コストが高く、富と贅沢の象徴とされてきました。しかし機械化によって、こうした需要の高い装飾品の模造品を安く早く生産できるようになりました。どのようなデザインが大量生産に適しているのかを立ち止まって考えることもなく、メーカーは低コストで歴史的なデザインを模造することができる機会に飛びつきました。その結果、アドルフ・ロースをはじめとするモダンデザインの先駆者たちが批判したような、低品質で装飾が過剰な製品が氾濫するようになったのです。有名な建築家であるル・コルビュジエは著書の『今日の装飾芸術』の中で、「ごみが豊富に装飾されているものである。」と遠回しに批判しました。また「贅沢な物は、しっかりとした造りで、美しくクリーンで、純粋で健康的です。無装飾なそのままのものには製造のクオリティが現われます。しかし、製造業界ではこのことが逆転しています。装飾の多い鋳鉄製のストーブは、普通のものよりも生産コストが低いのです。というのも葉のパタンの装飾が多く施されていれば、鋳造の欠陥が見つかりにくいからです。」と述べています。また、影響力のある批評家・ジャーナリストであるモントゴメリー・シュイラーは、19世紀のファサード（建築物の正面）の装飾について批判しました。「もし通りの建築物の表面の装飾を削り取ったとしたら、すべての建築スタイルを取り除いたことになるが、今までと変わらない良い建築物になるだろう。」と述べています。「超高層ビルの父」として知られる建築家のルイス・サリヴァンは、「元型として良く形成された美しい建築物を生み出すことに集中するために、何年もの間、装飾をやめるとしたら、私たちの美学的な利益に資するだろう。」と述べ、装飾を抑制することを主張しました。 1920年代には、ドイツで新即物主義という美術運動が起こりました。新即物主義は、純粋な実用性をデザインに求める運動でした。ドイツの建築家ヘルマン・ムテジウスは、彼自身が機械のスタイルと呼ぶものを生み出すために、実用性をスタイルにどのように適用できるかを説明しました。ヘルマンは、「鉄道列車の駅、展示ホール、橋、蒸気船などにその例を見ることができます。一方、他のモダンデザインの先駆者たちは、装飾を批判する代わりに、機能的な形態を高めることに集中しました。 1934年、近代建築家のフィリップ・ジョンソンによって企画された展覧会「マシンアート」が、ニューヨーク近代美術館で開催されました。展示品として、飛行機のプロペラや産業用断熱材など、さまざまな機械的な備品が並んでいました。この展覧会の目的は、純粋に機能的な目的に従った形態を持つ物の美しさを強調することでした。そして、美しさと上品さは、表面的な装飾からではなく、デザイン自体から生まれるということが示されたのです。モダニズムの運動が浸透するには、20世紀前半の時間の多くを要しましたが、最終的にはこの新しい手法が、伝統的なスタイルや技術に勝利しました。 Jonathan Woodhamは、著書『Twentieth Century Design』において、「現代の美学は、クリーンな幾何学的形状・クロムメッキ加工された鋼・ガラスなどの現代的な素材の使用、平面の明暗への人工的な操作によって特徴づけられる。色の使用はしばしば抑制され、ホワイト・オフホワイト・グレー・ブラックなどの色が強調される。」と述べています。モダンデザインの運動が全体として反装飾的なものであったと見なすのは誤りです。アール・ヌーヴォーやアール・デコなどに代表される新たなデザイン様式が、現れては消えました。未来派のスタイルは、誇張された技術的な美学を推し進め、一方、デ・ステイルのスタイルは、数を制限したパタンや形の中に調和を見出しました。しかし、これらのスタイルの変容の根底にあったのは、必要のない装飾からの脱却でした。モダンデザインの運動は全体として、よりクリーンで、美しさを表面的な装飾よりもスタイルや形態そのものに見出すような、抑制されたデザインを求める運動だったのです。 [PR] UI/UXデザインで挫折しない学習方法を動画で公開中デジタルの装飾モダンデザインの歴史とソフトウェア・Webデザインの短い歴史を比較すると、似ている点があることに気づきます。機械化された大量生産が装飾の過剰使用をもたらしたのと同様に、ディスプレイやスタイリングの技術の進歩は、ソフトウェアのインターフェースやWebサイトにおいて過剰な装飾をもたらしています。初期のWebデザイナーたちは装飾に積極的であり、画像にアニメーションや音を加えて、過度にリッチで派手なユーザー体験を生み出しました。グラフィカルユーザーインターフェイスを備えた初期のオペレーティングシステムは、外観や使用感は依然として基本的なものでした。もっとも、ファイルのディレクトリを表すためにフォルダの画像を示したり、ユーザーにクリックできることを伝えるために面取り効果の加えられたボタンが示されるなど、現実世界に近いデザインにするための試みがなされました。しかし、Webデザイナーが視覚的にリッチなユーザー体験を創造したいと思ったかどうかに関係なく、当時は白黒の低解像度のディスプレイであったため、デザインは全体的にフラットで抑制されたものでした。技術の進歩に伴い、デザイナーたちはインターフェースの外観デザインにおいてより大きな自由を獲得しました。MicrosoftはWindows XPで、カラフルなスタイルを導入し、ハイライト、シャドウ、グラデーションを豊富に使用した外観になりました。さらにAppleは、新たにリリースしたMac OS Xで、光沢感のあるプラスチック製の泡、ブラシ加工されたアルミ、リアルなアイコンなどをインターフェース上で表現することに成功しました。また、MicrosoftはWindowsに、光沢感のある透明なガラスのようなテーマを加え、Appleはカレンダーアプリに革のテクスチャを導入したり、ブックリーダーにページめくりの機能を加えるなど、デスクトップおよびモバイルのシステムにより実物に近いデザインを導入しました。現実世界のオブジェクトやテクスチャを模倣したスタイルのことを、「スキューモーフィズム」といいます。インターフェースをユーザーにとって親しみやすい外観にするという唯一の目的のために、デザイン要素は現実世界の物に似せて作られます。しかしデザイナーたちは近年、ノートアプリを紙のメモ帳に似せてスタイリングすることや、カレンダーアプリに革のテクスチャやページめくり機能を加えることの理由に疑問を感じ始めました。これらの効果はユーザーの関心を引く外観をデザインできますが、現実世界の静的な物体を、それとは相容れない流動性やダイナミズムのあるデジタル世界のインターフェースと結び付けようとする過去の遺物なのです。 MicrosoftはWindows 8のリリースで、こうした過剰な外観から脱するために勇敢な一歩を踏み出し、オペレーティングシステムを完全にデジタル化して「本物の」外観にすることを試みました。インターフェイスは、Microsoftが初期のモバイルリリース用に適用した原則に基づいて設計され、テクスチャや現実世界のオブジェクトの模倣をほぼ完全に排除した外観となりました。その代わりにデジタル画面に秩序と上品さをもたらすために、Windows 8は、タイポグラフィ・間隔・色に工夫がなされています。現実世界を模倣した効果、過剰なスタイルを排除した後に残ったのは、シンプルなコンテンツのみでした。かつてヘルマン・ムテジウスが、鉄道列車の駅を例として挙げたように、Microsoftのデザイナーたちは、「Metro」という名称で知られれるWindowsのインターフェースのインスピレーションを、地下鉄の駅の標識から得たと述べています。また、近年Webも同様の変容を遂げました。表やFlashに基づく初期のデザインによって、エンジニアはインターフェースをピクセルパーフェクトに制御することが可能になり、デザイナーもコンテンツのためにリッチな外観を備えたコンテナをデザインすることを躊躇しませんでした。しかし、新しいメディアの流動性を受け入れ、CSSを使用してデザインとコンテンツを分離するようになるにつれて、Webデザインはより拘束されるようになりました。装飾が多く加えられたコンテナは、幅や位置の変更が容易ではありませんでした。そのため、デザイナーは画像の数を減らして、レイアウトをより適応性が高く保守しやすくするためにCSSのスタイリングを使うようになりました。近年はレスポンシブデザインの進化、またデザイナーたちにはPhotoshopを使わずに最初からコードでデザインを始める傾向も見られます。こうした動向は、テクスチャや装飾的な画像を多用するのではなく、タイポグラフィ・間隔・色から美しさを引き出すような、よりシンプルでコンテンツに焦点を当てた、本物のWebデザインの美しさを推し進めています。 Appleも、モバイルのオペレーティングシステムであるiOS 7のリリースにより、本物のデジタルデザインへの第一歩を踏み出しました。縫製の革のテクスチャ、破れたページ端のデザインは消え、代わりにシンプルなアイコンと半透明な表面を備えた、ほとんどフラットなデザインのインターフェースとなりました。本物のデザインモダンデザインの先駆的な時代から、現代のソフトウェアおよびWebデザインの変容に受け継がれているものは、本物への欲求です。この欲求こそ約100年以上前にデザイナーたちの作品から装飾を削ぎ落としたものであり、現代のデジタルデザインをよりクリーンで、より機能的な美しさを備えたものに変える原動力となっているのです。しかし、正確には何がデザインを「本物」にするのでしょうか？本物のデザインの目的は、偽物を否定し余剰を排除することです。本物のデザインは、偽物のテクスチャで素材をマスキングしたりせずに、弱点を隠す代わりに強さを見せるものです。そして製品をより親しみやすく、または魅力的に見せるためだけの無意味な機能を排除します。機能は最適な形態で表現され、効率性にこそエレガンスさがあることに確信を持てるものです。そして表面的な装飾を排して純粋なコンテンツに美しさを見出します。本物のデザインにおいてスタイルが重要ではないということはありませんが、装飾によって追求されるものではないのです。むしろ、形態の美しさはコンテンツに依拠するものであり、スタイルはクリエイティブな解の結果として自然に生じるものです。スージック.Dは、アングルポイズスタイルのランプ（以下画像参照）について次のように言及しています。「ランプがどのように見えるかは――特にシェード（笠）の部分は――後付的なことでした。しかし、そのことは魅力的なことであったのです。ちょうどランドローバー（イギリスの自動車メーカー）の初期のデザインは、消費者受けを狙ったというよりも、技術的に独創的なアイデアを基礎としていたことで信頼性を高めたように、審美性を考慮しない本来のピュアな形態からこそ、本物が生まれるのです。」デジタルデザインにおいては、デザインは大きく次のように集約できます。デジタルな外観を保持すること金属、木材、革などのテクスチャをコンピュータの画面上で模倣する必要はありません。デジタルインターフェイスはこれらの素材から作られているわけではないので、模倣することには意味がありません。しかし、平面のフラットな背景色だけでデザインするべきだということでもありません。むしろ、現実世界のテクスチャを模倣しようと試みたり、それに拘束されるべきではないという意味です。スキューモーフィズムを排すること電子書籍は、ページをめくるときに実際の紙を模倣する必要はありません。またノートアプリも、革のカバー、破けた紙の切れ端、手書き風文字などを備えた実際の紙のメモ帳のように見える必要はありません。スキューモーフィズムはいつも悪となるわけではありませんが、インターフェース上に不必要な制約を生み出します。例えば、メモ帳アプリのインターフェースを、現実世界のものに似せて作ろうとしたら、物理的な模倣をすることに制約が生じます。一方、静的で一次元なデザインにするとしたら、そうした制約はありません。コンテンツを中心にしたスタイルにすることスタイリングや装飾よりも、コンテンツに集中しましょう。このことは当然に思えるかもしれませんが、多くのWebサイト上では、既製のテーマが繰り返されているのではないでしょうか？テーマは常にダミーのコンテンツをベースに作られているため、本質的に、最適なコンテンツを表現することは不可能です。ダミーのテキストによってテーマを作る場合には、すでにコンテンツは形骸化しているので、デザイナーはスタイリングと装飾に走ることになるでしょう。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。そんな方のために参考として、

Webデザイン

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

【今さら聞けない！】UI/UXデザインの違いとその学習方法とは！

目次

UIとは

UXとは

UIデザイン・UXデザインの違いとは