6つの事例から学ぶ！モバイルデザインのテクニック集

現代に合ったモバイルデザインとは。実際に6つのデザインを事例にしながらユーザー体験を向上させられるデザインについて語っています。ナビゲーションやアニメーションなど実際に動きを見ながら説明しているので、ぜひ参考にしてみてください。

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

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、ソフトウェア・デベロッパーのNick Babich氏によって投稿されました。

近年の最も成功したデザインを観察してみると、勝者のデザイナーは基礎を完璧に実践していることに気づくと思います。

彼らは、人間の自然な動作に合ったデザインを考え、障壁となるものを私たちも気づかないうちに上手く取り去っています。

そして、外観のデザインとインタラクティブなユーザーエクスペリエンス、特にスキャナビリティ（Scanability：コンピュータの画面上の文字が読みやすいこと）に力を注いでいるようです。

モバイルデザインの最も重要なテクニックとその活用法を見てみましょう。

効果的なタイポグラフィ

Webサイト上やアプリ内のテキストの目的は、ユーザーとの関係を構築し、ユーザーの目的達成を助けることです。このインタラクションにおいて重要な役割を担っているのが、「タイポグラフィ」です。

テキストのサイズやレイアウトは、ユーザーが文字を読む体験に大きな影響を与えます。

文字のサイズが小さく、行の高さと余白が十分に設定されていないテキストは、ユーザーにとって読むのに非常に時間がかかります。結果としてユーザーは、情報のほとんどを読み飛ばすことになるでしょう。

これは特にモバイルにおいて顕著です。高輝度の小さな画面が小さな文字で埋めつくされていると、ユーザーは読みにくいと感じます。画面のサイズが小さいほど、タイポグラフィをよく考える必要があります。

1-glx4qtsh0gez7ju23_-dfw

出典元：Usertesting

モバイルデザインにおけるタイポグラフィの秘訣は、余白を上手く使って、可読性を高めることです。適切な文字サイズと余白を選択することが最も重要です。

文字が狭いスペースに詰め込まれたようなテキストとならないように、文字は読みやすいサイズにして、行間には十分な余白を設定しましょう。

1-k2d-2l4pqnpw8kt_x0ezua

iOSアプリにおける文字サイズと余白の良い例

アドバイス：モバイルデバイスにおける可読性を保証するには、1行あたり30～40文字に収めましょう（日本語に換算して約15～20文字）。これは、デスクトップにおける1行あたりの理想的な文字数とされる60～75文字（日本語に換算して約30～38文字）の約半分です。

[PR] Webデザインで副業する方法とは

シンプルなカラースキーム（配色）

カラーは、外観のデザインの中でも最も難しい分野かもしれません。カラースキームをシンプルにするとユーザーエクスペリエンスの質を向上する効果がある一方、多くのカラーを使い過ぎるとユーザーエクスペリエンスにマイナスの影響を与えます。多くのカラーを複雑に組み合わせることは、絶対に避けましょう！

単一の色相の明度・彩度を調整するだけでも、豊富なカラーを表現できますし、カラースキームがユーザーの目に派手過ぎると映ることもないと思います。

0-fmmkpg9nkfprsokx

単一の色相（青色）によるカラースキーム　出典元：Smashing Magazine

次の例も、単一の色相によるカラースキームです。単一の色相（青色）の、トーン（Tone：色相に灰色を混ぜて生まれる色）、シェード（Shade：色相に黒色を混ぜて生まれる色）、ティント（Tint：色相に白色を混ぜて生まれる色）の濃淡を変えて、複数のカラーを作っています。

0-w_fvxwqg_6px2vge

出典元：Louis Saville

アドバイス：オリジナルのカラースキームを作るのは難しく思えるかもしれませんが、それほど複雑なことではありません。例えば、中間色のカラーパレットに、明るいアクセントカラーを1色だけ加える方法があります。明るいアクセントカラーによって効果的に人目を引くことができます。

1-w2h9aop_8rrtqpxt_2k4jg1

582602bfb2cb7767075559

出典元：Maximlian Hennebach

カード型の要素＆コンテンツベースのナビゲーション

アプリのコンテンツは、ユーザーに最大限利用してもらうことがその目的となると思います。コンテンツベースのナビゲーションは、オーバービュー画面から詳細表示の画面への遷移を、自然に表現するためのデザインパタンです。

このようなデザインのナビゲーションは、カード型の要素と組み合わせることが効果的です。というのもカード型の要素は、大量の情報を見やすい形に整理するのに適したデザインだからです。

カード型の要素には、コンテンツを意味のまとまりごとに区切り、画面のスペースを節約する効果があります。ちょうど文章においてパラグラフ（段落）が各文をまとめるように、カード型の要素はコンテンツをまとめるのです。
カード型の要素は操作も非常にシンプルです。カードを開く操作や、次のコンテンツに進むためにカードをスワイプする操作を、ユーザーは直感的に理解できます。

5826046cb71d8374965536

出典元：Ramotion Agency

アドバイス：UIを可能な限り隠すこと――コンテンツを中心としたデザインに徹しましょう。

レイヤーと奥行き

デスクトップとモバイルの画面の一番大きな違いは、サイズです。

モバイルサイトやアプリの画面はスペースが少なく、この短所を補うために、近年多くのインターフェースが、既存のデザインのレイヤーの上にさらにレイヤーを追加することで、Z軸を加えるようになっています。

1-02gdxjzosixtk_piapeqla

レイヤーによってZ軸を加えるデザイン手法は、インターフェースに奥行き感を与え、より知覚しやすい3D空間のデザインを生み出します。

Googleのマテリアルデザインの次のデザイン例は、複数のレイヤーを重ねてインターフェースを作っています。マテリアルデザインは、現実の物理的な世界における人と物体のインタラクションを模しています。

レイヤーには、優れたインタラクションを作る効果があります。サーフェス（Surface：影であるシャドウを落とす要素）とシャドウ（Shadow：影の要素）を使えば、アプリの構造を表現することができます。シャドウを加えた要素は下に影が落とされたデザインとなるので、他の要素やオブジェクトから浮き出て見えます。

0-dkgwcq4gbjoiowk8

レイヤーはインタラクションにおけるユーザーへのヒントになります。出典元：GoogleのMaterial Design

複数のレイヤーを重ねて作るインターフェースには、次のような機能的なデザインもあります。

フローティング操作ボタン（Floating action button）

UI上に浮かぶ円形のアイコンで、操作を促すためによく使われます。

1-odmdqy3jiqqzfw1jythhyq

出典元： pocketmeta

ズームイン（Zoom-in）

典型的な例として、ユーザーがリストから特定のアイテムを選択した場合に、そのアイテムの詳細が画面全体に表示され（このときリストの画面は覆い隠されます）、また元のリストの画面に戻るデザインなどがあります。

1-8ennklircgledz0zxcr9oq

出典元： androidcentral

スティッキーナビゲーション（Sticky navigation）

ユーザーがスクロールなどの操作をしても、メニューが画面上に固定されたまま留まります。

1-mlvl3atkc5653_qrbsdxxg

上のナビゲーションバーは、スクロール操作をすると画面から消えます。出典元：exisweb

1-d1qeokxxxtlenhiyytc0mw

上のナビゲーションバーは、スクロール操作をしても画面に固定されたままです。出典元：exisweb

モーダルウィンドウ（Modal window）

既存のウィンドウの上に、子ウィンドウを重ねて表示し、ログイン画面、広告、リマインダーなどを知らせます。

1-stcq5u-nehdzqkn6_lzc-a

出典元：GoogleのMaterial Design

アドバイス：ユーザーフローはシンプルにしましょう。1つの画面は一度に1つのフローのためだけにデザインします。

ジェスチャー機能

ジェスチャー機能に対応したデバイスの登場は、インタラクションのあり方にも大きな影響を与えました。

近年、スワイプ、タップ、ズームなどが最も一般的なジェスチャであり、従来のマウスのポイントやクリック操作のように、直感的に分かる操作となりました。

ジェスチャーは、前のページに戻る、メニュー画面を表示する、お気に入りに登録する、アイテムを変更・削除するなどの操作によく使われています。

582605f0c22b3939368269

出典元：Aaron Wade

ジェスチャーによる操作を増やせば、その分画面上のボタン要素は少なくて済むので、コンテンツのためのスペースをより広く確保できまます。

そのため、アプリ開発をコンテンツを中心に進めやすくなるはずです。

1-g-mhvlwpl1rf1w4uzik6qg

出典元：Bady

アドバイス：ここで紹介したのは、標準的な（直感的に分かる）ジェスチャーです。新しく作ったオリジナルのジェスャーを使う場合には、注意が必要です。通常、ジェスチャー機能はアプリ上では隠れています。もし指示などが示されないとしたら、ユーザーはアプリの操作に戸惑うかもしれません。

機能的なアニメーション

機能的なアニメーションとは、ユーザーインターフェースのデザインに組み込む微かなアニメーションのことです。インタラクションを高める次のような効果があります。

フィードバック（応答）を視覚的に返す

5826062253f9d141709771

ユーザーがクリックやタップなどの操作をした後に、アニメーションがフィードバック（応答）として現われれば、ユーザーは操作が受理されたことが分かりやすくなります。

スムーズな画面遷移を生み、変化に注目を集める

0-s372md0xh5gaxfr1

この例では、アイコンを2パターンに変化させることで、2つの機能を備えていることを伝えています。

アドバイス：アニメーションやトランジションを絶妙に使うことで、ユーザー体験の質を向上させることができます。ただし、アニメーションは目的を考えて使うように注意しましょう。

アニメーションは、ユーザーを楽しませるためというよりも、ユーザーにとって役に立つ機能を実現するために使うべきです。

結論

現代のUIデザインは、不要な要素を削ぎ落として、より機能性を重視する方向に動いています。

整理されたインターフェース・シンプルな色合い・美しい外観デザインが、現代的なインターフェースを生み、ユーザーが使いやすい製品を生み出す秘訣なのです。

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

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

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

アプリデザイン

私もあなたも実は「UXデザイナー」ではない！

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

アプリデザイン

【プロトタイプを作る！】初心者でもすぐに分かるProttの使い方

プロトタイピングツールとして有名な「Prott」の使い方について解説しています。 Prottは作業画面からサポートまで全て日本語対応のプロトタイプ作成ツー...

アプリデザイン

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。 &...

アプリデザイン

【事例から学ぶ！】聞いたことはあるけど「UIデザイン」とは？

「UIデザインとは」何なのか、歴史などを踏まえて解説しています。そして、UIデザイナーを目指す上で参考になる勉強サイト等も紹介しています。初心者の方でこ...

アプリデザイン

Goodpatchのプロダクトマネージャーに聞く！プロトタイピングツール「Prott」を使ったプロトタイピング

今日では、ソフトウェアやサービス、アプリ開発の現場において、必須プロセスとなっているプロトタイピング。IT業界ではこの1、2年でプロトタイピングのカルチャーが浸...

インタビュー

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

今年のトレンド！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] プログラミングで挫折しない学習方法を動画で公開中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のフォントが対応しています。人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。 5. Avenir デザイナー：Adrian Frutiger デザインされた年：1988 発行者：Linotype Avenirも、Futuraフォントの影響を受けたフォントですが、幾何学的なデザインを取り入れたフォントではありません。垂直方向の文字が、水平方向の文字とアセンダ（アルファベット文字において、標準的な高さのx文字よりも背の高いb、fなどの文字の、上に突き出た部分）よりも太い幅になっているデザインです。可読性が重視されるテキストに最適です。 6. Helvetica Neue デザイナー：Edouard Hoffmann デザインの日付：1983 発行者：Linotype Helveticaは世界で最も人気のある書体の1つであり、マーケティングが成功した例です。このフォントファミリーは51種類のウェイトから構成されています。古典的なサンセリフのフォントであり、時代を超えたニュートラルなデザインです。あらゆるコミュニケーションや情報媒体に適したデザインです。 7. Avenir Next Pro デザイナー：Adrian Frutiger　Akira Kobayashi デザインされた年：2004～2007 発行者：Linotype Avenirファミリーは、これまでに作成されたフォントファミリーの中で最も優れたものの1つですが、画面上での表示の問題があったため、これを解決するために代替フォントのAvenir Nextが開発されました。 32種類のフォントから構成されています。：それぞれに8種類のウェイトがあり、ローマ字とイタリックに対応しています。また2種類の幅を選択できます。グリフは、小文字と同じ高さの大文字、下付き文字、上付き文字、合字を含むように拡張されました。 8. Isidora デザイナー：Enrique Hernandez デザインされた年：2016 発行者：Latinotype Isidoraは、機能性に重点を置いて開発された、現代的な幾何学的フォントです。表現力豊かでフレンドリーな印象ですが、合理性を兼ね備えたフォントでもあります。 Isidoraは28種類のフォントから構成されていて、サブファミリーフォントとして、7ウェイトの2つのフォントがあります。ロゴ、ブランディング、見出し、パッケージ、Web上での利用、出版物に最適です。複数の言語をサポートしているユニバーサルデザインフォントです。 9. Sagona デザイナー：Rene Bieder デザインされた年：2016 発行者：Rene Bieder 力強いセリフ体を特徴とするフォントです。小さな文字サイズのテキストと見出しの両方に使用できる汎用の書体です。このフォントファミリーはイタリック体に対応していて、9つのウェイトがあります。 OpenTypeフォントの機能として、代替グリフ、合字、オールドスタイル数字などが幅広くサポートされています。 10. Trade Gothic デザイナー：Jackson Burke デザインされた年：1948 発行者：Linotype Trade Gothicは曲線的デザインのサンセリフ体のフォントです。サンセリフ体のフォント特有の厳密さを破っています。 Trade

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] プログラミングで挫折しない学習方法を動画で公開中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デザイナーのサポートで学びたい場合はご参加ください。

アプリデザイン

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

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Dmitry Fadeyev氏によって投稿されました。近年人気の高い「フラット」なインターフェースのデザインは、単なるトレンドではありません。それは真のデザインへの欲求の現れです。つまり、視覚的に過剰なものを抑え、偽物や余分なものを排除しようとする欲求です。技術の進歩はときに過剰なものを生み出すことがあります。 19世紀には、機械化された大量生産によって、装飾品を早く生産することができるようになり、その結果、製品は過剰に装飾されるようになりました。近年、同様のことがデザインの世界でも起きています。ディスプレイやスタイリングの技術の進歩によって、デザイナーたちはリッチな外観のインターフェースをデザインすることが可能になりましたが、その結果、スキュアモーフィックデザイン（現実の質感を模倣したデザイン）やスタイリングが過剰になりました。モダンデザインの運動は、本物のデザインを求める過程で、19世紀の過剰な装飾を抑制することによって、現代の大量生産によりふさわしいデザインを生み出しました。目次モダンデザインの誕生デジタルの装飾本物のデザインミニマリズムではない本物のデザインが重要である理由モダンデザインの誕生 1908年、オーストラリアの影響力の強い建築家であるアドルフ・ロースは、『装飾と犯罪』という挑発的なタイトルのエッセイを書きました。ロースは、「現代の装飾主義者たちは、文化的に遅れているか病理の症例である。彼らの作品は今後3年も持たないだろう。彼らの生産したものは、文化人には受け入れがたいものであり、他の人々にとってもやがてそうなるだろう。」と主張しています。さらに大胆にも、「人々の水準が低いほど、装飾は贅沢になる。装飾に依存するのではなく、形に美しさを見つけることが、人類が目指すべき目標である。」と主張しています。なぜロースは装飾を批判するに至ったのでしょうか？モダンデザインの先駆者であるロースのマインドセットを理解するには、初めに19世紀のデザインの実態を知る必要があります。蒸気機関の発明によって、機械化された大量生産の時代が始まりました。美術評論家のフランク・ウィットフォードは、「蒸気駆動の機械は、人間の手作業よりも速く、より規則的にほぼすべての物質を切って型抜きして、生産することができます。生産が機械化されたことにより、より低い価格でより高い利益が実現されています。」と書いています。しかし生産方式が人の手作業から機械に変化した一方で、製品のデザイン自体は変化しませんでした。建築や家具から衣類や食器に至るまで、ほとんどの製品には、ルネサンス時代からの伝統的なデザインに基づく、豪華な装飾が加えられていました。歴史的に、人の手作業による装飾品は生産コストが高く、富と贅沢の象徴とされてきました。しかし機械化によって、こうした需要の高い装飾品の模造品を安く早く生産できるようになりました。どのようなデザインが大量生産に適しているのかを立ち止まって考えることもなく、メーカーは低コストで歴史的なデザインを模造することができる機会に飛びつきました。その結果、アドルフ・ロースをはじめとするモダンデザインの先駆者たちが批判したような、低品質で装飾が過剰な製品が氾濫するようになったのです。有名な建築家であるル・コルビュジエは著書の『今日の装飾芸術』の中で、「ごみが豊富に装飾されているものである。」と遠回しに批判しました。また「贅沢な物は、しっかりとした造りで、美しくクリーンで、純粋で健康的です。無装飾なそのままのものには製造のクオリティが現われます。しかし、製造業界ではこのことが逆転しています。装飾の多い鋳鉄製のストーブは、普通のものよりも生産コストが低いのです。というのも葉のパタンの装飾が多く施されていれば、鋳造の欠陥が見つかりにくいからです。」と述べています。また、影響力のある批評家・ジャーナリストであるモントゴメリー・シュイラーは、19世紀のファサード（建築物の正面）の装飾について批判しました。「もし通りの建築物の表面の装飾を削り取ったとしたら、すべての建築スタイルを取り除いたことになるが、今までと変わらない良い建築物になるだろう。」と述べています。「超高層ビルの父」として知られる建築家のルイス・サリヴァンは、「元型として良く形成された美しい建築物を生み出すことに集中するために、何年もの間、装飾をやめるとしたら、私たちの美学的な利益に資するだろう。」と述べ、装飾を抑制することを主張しました。 1920年代には、ドイツで新即物主義という美術運動が起こりました。新即物主義は、純粋な実用性をデザインに求める運動でした。ドイツの建築家ヘルマン・ムテジウスは、彼自身が機械のスタイルと呼ぶものを生み出すために、実用性をスタイルにどのように適用できるかを説明しました。ヘルマンは、「鉄道列車の駅、展示ホール、橋、蒸気船などにその例を見ることができます。一方、他のモダンデザインの先駆者たちは、装飾を批判する代わりに、機能的な形態を高めることに集中しました。 1934年、近代建築家のフィリップ・ジョンソンによって企画された展覧会「マシンアート」が、ニューヨーク近代美術館で開催されました。展示品として、飛行機のプロペラや産業用断熱材など、さまざまな機械的な備品が並んでいました。この展覧会の目的は、純粋に機能的な目的に従った形態を持つ物の美しさを強調することでした。そして、美しさと上品さは、表面的な装飾からではなく、デザイン自体から生まれるということが示されたのです。モダニズムの運動が浸透するには、20世紀前半の時間の多くを要しましたが、最終的にはこの新しい手法が、伝統的なスタイルや技術に勝利しました。 Jonathan Woodhamは、著書『Twentieth Century Design』において、「現代の美学は、クリーンな幾何学的形状・クロムメッキ加工された鋼・ガラスなどの現代的な素材の使用、平面の明暗への人工的な操作によって特徴づけられる。色の使用はしばしば抑制され、ホワイト・オフホワイト・グレー・ブラックなどの色が強調される。」と述べています。モダンデザインの運動が全体として反装飾的なものであったと見なすのは誤りです。アール・ヌーヴォーやアール・デコなどに代表される新たなデザイン様式が、現れては消えました。未来派のスタイルは、誇張された技術的な美学を推し進め、一方、デ・ステイルのスタイルは、数を制限したパタンや形の中に調和を見出しました。しかし、これらのスタイルの変容の根底にあったのは、必要のない装飾からの脱却でした。モダンデザインの運動は全体として、よりクリーンで、美しさを表面的な装飾よりもスタイルや形態そのものに見出すような、抑制されたデザインを求める運動だったのです。 [PR] プログラミングで挫折しない学習方法を動画で公開中デジタルの装飾モダンデザインの歴史とソフトウェア・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サイト上では、既製のテーマが繰り返されているのではないでしょうか？テーマは常にダミーのコンテンツをベースに作られているため、本質的に、最適なコンテンツを表現することは不可能です。ダミーのテキストによってテーマを作る場合には、すでにコンテンツは形骸化しているので、デザイナーはスタイリングと装飾に走ることになるでしょう。ミニマリズムではない機能性に美しさがあるデザインは、ミニマリズムのデザインとは同じではありません。前者は、使いやすく、効率性の高い、利用性が最大限に高められた製品を生産するために、デザイナーが余剰を排除して生まれるデザインです。一方、後者はミニマリズムの美学を追求することにより生まれるデザインであり、オブジェクトにシンプルさと美しさをもたらします。一方はデザインの基本原則であり、もう一方はスタイリングの選択肢なのです。インターフェースをよりシンプルで「本物」らしくするために、ミニマリズムのデザインを、スタイルとしてインターフェースのデザインに厳格に適用することは、間違いです。例えば、シャドウ、色、背景の多様なスタイルなどを見境なく排除する場合、必ずしもインターフェースが使いやすくなるとは限りません。ジョン・マエダは著書の『シンプリシティの法則』の中で、「シンプルさを達成する最も簡単な方法は、思慮深い削除です。不確かな場合は、削除してください。しかし削除するものには注意してください。」と述べています。要素を削除することがシンプルさにつながるのは、ユーザーが処理するアイテムが少なくなるからです。しかし、ユーザーがインターフェースの操作を理解するための視覚的な手がかりまで削除することは、――アイテムをまとめ、要素を目立たせるためにボタンやラベルを区別化するのが、グラフィカル要素の役割であるため――かえってユーザーの負担が増えて逆効果です。そのため、ユーザーへのガイドは、スタイルによってというよりも、デザインの原則によって実現するべきです。本物のデザインが重要である理由 Riseというアプリは、本物のデジタルデザインの完璧な例の1つです。目覚まし時計はすでにアプリとして開発されていましたが、このアプリを開発した会社Simplebotsは、純粋なデジタルキャンバスのコンテキストにおけるインターフェイスを再考することで、概念にゼロから取り組んだのです。 Riseのインターフェイスにはフルスクリーンのスライダがあり、時間設定した時の空の色に合わせて背景色が変化します。現実世界の時計、スライダー、テクスチャなどは模倣していません。その代わりに、Riseのデザイナーたちは、モバイル端末のタッチキャンバス機能に対応するデザインを生み出し、端末を最大限に活用できるようなユーザー経験を創造しています。革新的なデザインは、優れたユーザー体験を実現するだけではなく、アプリ市場で目立つことができます。 Riseのようなインターフェースは、現実の世界にソリューションを求めるというよりも、デジタルなコンテキストの中で、完全に設計上の問題に取り組む場合にのみ実現可能です。コンピュータの画面上では、抽象的なフォーム、アニメーション、明るい色、均一なシェイドを表現することが可能です。カラーパレットを抑制したり、静的表現に限定する必要はありませんが、スキューモーフィズムに縛られてもいけません。ピクセル単位のグリッドを使用して、コンテンツを表現する最良の方法を理解することによって、より良いシンプルなソリューション、使い心地が良い画面を備えた革新的なインターフェースを実現することが可能となり、より良いユーザー体験を提供し、その他大勢から目立つようなアプリのデザインを実現できます。まとめ近年人気の高い「フラット」なデザインは、1つのトレンドかもしれませんが、余剰な装飾を排除してコンテンツに集中することへの欲求の現れでもあるのです。19世紀に機械化された大量生産によって過度な装飾を生み出したように、またディスプレイやスタイリングの技術が初期のWeb・ソフトウェアデザインにおいて同様に過剰なデザインを生み出したように、技術の進歩は過剰につながることがあります。しかし、機能性に美しさを求めたモダニズムの先駆者たちによって、過剰な装飾が時間をかけて排除されたように、今日のソフトウェアにおける過剰も、やがて真のデザインへの欲求によって排除されることになるでしょう。 TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。今後Webデザイナーとして働きたい、自分で思った通りのデザインを再現したいと思っている方はぜひご覧ください。

Webデザイン

事例から学ぶ！HubSpotがサイト改善に成功したUX戦略とは

本稿は、UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UXPinのコンテンツ・ストラテジストであるJerry Cao氏によって投稿されました。 UXデザイナーのAustin Knight氏率いるチームが、Hubspotのサイトをリニューアルしたプロジェクトについて書かれています。 HubSpot（ハブスポット）のサイトは、世界の90カ国以上にわたり1万8000以上の企業にサービスを提供し、月間400万人以上のユーザーがアクセスしています。 HubSpotにとって、サイトこそ経営の要となるものでした。HubSpotが非公開会社から、多様な製品を提供する世界規模の公開会社へと発展するには、サイトのリニューアルが不可欠でした。サイトリニューアルのプロジェクトは、プロジェクト開始から一ヵ月半後に開かれる、HubSpotの年次イベント「INBOUND」で新しい製品ラインがリリースされるまでに、急いで完成させる必要がありました。 UXデザイナーのAustin Knight氏がこのプロジェクトを率いて、3つのチーム（ビジュアルデザイナー、デベロッパー、マーケティングマネジャー）が加わりました。またKnight氏はこの他に、製品のポジショニング戦略（product positioning）、コピーライティング、技術開発を担当する外部の6つのチームとも協力しました。この記事では、UXデザイナーが、過密なスケジュールのプロジェクトにおいて、リサーチ、共同作業、ユーザーに焦点を当てた「Lean UX」という手法を応用しながら、どのように良い結果を生み出せたのかを事例として紹介します。画像：HubSpotのリニューアルされたサイト次の3つのステップは、実際のプロジェクトをベースとしてUXPinが作成したベストプラクティスです。ステップ1：入念なリサーチ、継続的なテスト HubSpotのプロジェクトは、まず最初に、Knight氏が「Lean UX」という手法をチームに紹介することから始まりました。「Lean UX」とはJeff Gothelf氏によって提唱されている手法で、継続的な「学習ループ」（構築 – 評価 – 学習のループ）を用いてデザインプロセスを軽量化することによって、ビジネス戦略を整えるためのものです。このプロジェクトでは、ステップ1は、分析とユーザー調査を行い、手早く予測の検証を行うことでした。分析＆ヒートマップ多くのケースにおいては、デザインチームはマーケティング部門にデータ分析を依頼するのが一般的ですが、今回のプロジェクトでは、Knight氏は自らデータ分析を始めました。HubSpot、Googleアナリティクス、Mixpanelから膨大なデータにアクセスできました。主な課題は、これらの膨大なデータを分析して、意味のあるパターンを見つけ出すことでした。 Knight氏はまず、多くのユーザーの行動を分析した結果、次のような傾向が見られることに気づきました。サイト上でPRICING（価格表）に最初にアクセスする（ユーザーは製品のメリットよりも価格を優先していることがわかります。）サイト上でFAQ（問い合わせ）に最初にアクセスする（ユーザーの疑問が解決されていないことがわかります。）サイト上でサイト内検索を最初に利用する（主に製品について不明な点を検索しているので、ユーザーが必要な情報をサイトで得られていないことがわかります。）この分析から、HubSpotのサイトは完成度は高いものの、重要な情報が欠けているために、コンバージョン率が低下していることが判明したのです。 Knight氏はまた、2万5000人のユーザーを対象に、ヒートマップとスクロールマップによる分析を行い、合計46万7308のデータを集めました。数年分のデータを集めることができたため、問題（例として、ユーザーの25%しかサイトのページをスクロールしていないことなど）が生じた原因を理解するのに役立ちました。セッションの記録最後に、セッションの記録によって、定量分析と定性分析を行いました。セッションの記録は、生きた、匿名性のある、未だ分析されていないデータです。実際のユーザーの行動がそのまま反映されたデータなので、分析結果も信頼できます。セッションの記録は、デザインプロジェクト全体を通して行い、ユーザーへのインタビューやユーザビリティテストの結果を検証するのに役立てます。定性分析定量分析は何（What）を分析するのには役立ちますが、なぜ（Why）を知ることはできません。ユーザーエクスペリエンスに期待されることや、行動に隠された動機を知るためには、デザイナーはユーザーと利害関係者にインタビューを行う必要があります。 1. ユーザーへのインタビュー HubSpotのサイトの利用者の10%は、ログインや情報検索をしているユーザ―であるため、サイトのリニューアルにあたっては、これらの特定のグループを無視することはできません。データの分析結果を検証するためだけではなく、新しいサイトでどのようなコンテンツを提供するべきかのアイデアのヒントを得るために、Knight氏はユーザーへのインタビューを行いました。ユーザーへのインタビューのプロセスを徹底して考えたことで、的を絞って意見を集めることができました。 2. 利害関係者へのインタビューこのプロジェクトによってHubSpotのサイトの外観が根本的に変わることになるため、Knight氏はまた、HubSpotの会社の取締役、製品、マーケティング、セールス、カスタマーサポートのチームにもインタビューを行いました。次にKnight氏は、ユーザーへのインタビューから得られた意見、カスタマーサポートの記録、HubSpotのサイトのリニューアルの不要な原案、Twitterのツイート、電子メール、さらにはKnight氏自身の講演イベントでの参加者との会話などの結果を総合的に勘案にしました。「プロジェクトで取り組んだのは、『データを参考とした、人間を中心に考えたデザイン』だ。」とKnight氏は述べています。また、「デザイナーは可能なときにはいつでも、自分自身でデータを解釈して、デザインに関する決定を行う必要があります。近年、定量的なデータと定性的なデータを活用することで、デザイナーたちがますます力を発揮できるようになりました。一般的に、単なる意見や誰かの「好み」に基づいて決定することもなくなり、それ以上のことが可能になっているのです。今日のデザイナーが真に力を発揮するには、明示的なデータと黙示的なデータの両方を活用して、デザインのソリューションを導くことが大切です。」とも述べています。多変量テストによって、小さな変更を試す最後に、Knight氏はリサーチの結果を基にして、多変量テスト（Multivariate Testing：レイアウトデザインの候補の中から、最適なデザインを選ぶための手法）を行うために、デザインにいくつか変更を追加しました。多変量テストは、特定のデザイン要素を決定、却下することで、サイト全体のリニューアルに進む前に、チーム全体として戦略的な決定を行うのに役立ちます。ステップ2：実際のデザインを設計する Knight氏は、「全体の設計→テスト→学習→イテレーション→最適なソリューションの選択」という構造化されたプロセスの手法を用いました。簡単なプロトタイピング多変量テストによって、レイアウトのデザイン候補をチームで3つに絞り、さらにプロトタイプを作成しました。主な方向性が定まったところで、Knight氏は最初の段階でイテレーションを繰り返して行い、次に外観のデザインに取り組むという手法を取りました。実際には、ユーザー望む方向性や意見を反映することに多くの時間を費やしたことを考えれば、プロトタイプでも最終的な完成製品に近いものでした。 Knight氏は次のように述べています。「紙のプロトタイプ、ワイヤーフレーム、外観のデザインの段階に至るまで、テストはユーザーと共に行っています。」「プロジェクトのすべての段階において、ユーザーの声が反映されています。デザイナーとしては、ユーザーの声は耳に痛いこともあるかもしれません。ユーザーの意見にすべて従うのではなくて、方向性を見出すために活用するのがいいと思います。」モックアップ外観のデザインの段階において、Knight氏は特にビジュアルデザイナーと一緒に仕事を行いました。また、Knight氏はデベロッパーとは、プロジェクトの各段階ごとにデザインについてディスカッションを行っていたのも特筆すべきことです。開発側は、プロトタイプを作成する段階で集中的にコーディングを行う一方、全体を通してイテレーションを行うことで、チーム全体としてプロジェクトの進行段階が揃うようにしています。外観のデザインこうしてチームは、現代的で、美しく、鮮やかな色、HD画質の画像、型にはまらないグリッドデザインを活かしたサイトが完成しました。このグリッドデザインは、リニューアルしたサイトには「生き生きとしたデザイン」が必要だという観点から生まれたものです。グリッドデザインをベースとして、多くのデバイスに対応したマルチプラットフォームで、コンテンツの変更や削除も容易です。また重要なコンテンツは、ユーザーや利害関係者の提案に応じて、アップデートしやすくなっています。画像処理画像の枠のデザインも、型にはまらないグリッドデザインです。プロジェクトのチームは、まずサイトのレイアウトに完璧に収まる画像を選びました。マウスをホバーしていない状態（off-hover）では焦点のぼやけた画像の一部が表示され、マウスをホバーさせた状態（on-hover）では画像が右のグリッドの領域まで広がり、画像全体と追加の情報が表示されるような設計になっています。この画像処理によって、識別しやすいデザイン要素が生まれ、ユーザーのアクセスを大幅に増加させるインタラクションが実現しました。またチームは、ユーザーへのインタビューから、個々のユーザー向けに動的なコンテンツを提供することが、サイトリニューアルの成功に大切な要因であるとわかっていたので、これも開発しました。互換性とWebアクセシビリティ最後に、HubSpotのサイトのユーザーの16%はモバイル端末からアクセスしていること、アメリカの人口の19%はWebアクセシビリティのニーズがあることを考えると、コーディング作業に加えて、互換性とWebアクセシビリティを考慮するのも重要なことでした。プロジェクトの各作業の段階は同時並行で進めていたので、モバイル端末向け、デスクトップ端末向けの各サイト設計も同時並行で進めました。 [PR] プログラミングで挫折しない学習方法を動画で公開中ステップ3：コーディングとテスト次のステップでは、HubSpot社のCMSを利用して、きれいなコードを設計するのが目標となりました。すべてのデバイスにおいてコードの互換性が保たれるように、Knight氏は、ビジュアルデザイナー、エンジニアと共に、QAテスト（品質保証テスト）を定期的に実施しました。各種デバイスや、Chrome、Safari、Firefox、Internet Explorer、Edge、Opera、Yandexなど各種ブラウザの多数のバージョンの解像度ごとに、Webサイトが正しく機能するかチェックするテストも行いました。さらに、BrowserStack（多数のブラウザ環境下における作動を再現するためのエミュレータ）を使い、実際のデバイス環境下におけるWebサイトの作動の再現も行いました。設計を改良するときには、ユーザーのプラットフォームごとの割合はすでに把握できていたため、利用者数やクリティカリティ（Criticality：システムエラーなどにおいて主要な要因を分析するための指標）を考えながら、優先順位を決めて効率的に進めることができました。ステップ4：テストの継続とイテレーションリニューアルしたHubSpotのWebサイトは、予定通り、年次イベント「INBOUND」の舞台において、同社の共同設立者たちによって、Webサイトのサポート対象である新製品や新機能の紹介とともに初公開されました。新製品のリリースは、大成功を収めました。しかし、チームとしては引き続き「Lean UX」の手法をプロジェクトで実践するため、栄光に浸っている暇はありませんでした。早速、チームはGoogleアナリティクスとHubSpotのサイトからデータを集計して、次の指標に注意を向けました。コンバージョン率（Conversion rate：目標の達成率）送信率（Submission rate：ユーザーがフォームにデータ入力して送信する率）離脱率（Drop-off rate）目標達成数（Goal completion）ナビゲーションサマリーにおける、参照元ページと移動先ページ検索クエリ（Search Queries）チームは、直帰率（Bounce rate：ユーザーが1ページだけ見てサイトを去る率）、ページ滞在時間など重要業績評価指標（KPI：Key Performance Indicators）として役に立つ指標のみを分析しました。さらにデザインの改良を重ねるために、チームはヒートマップを使って2万5000という膨大なセッションを分析し、追加のユーザビリティテストも行いました。結果：データが示すUXの成功今回のプロジェクトは、Knight氏とチームが「Lean UX」の手法を全て取り入れた初の試みでしたが、データ分析と設計を上手く組み合わせて、迅速にビジネスの成果につなげることができました。またリニューアルしたのHubSpotのWebサイトも、今回のプロジェクトのプロセスと同じくらい、柔軟性の高い設計に仕上がったので、今後のイテレーションも容易に行うことができると思います。デザインのリニューアルや、ユーザーやビジネス上のニーズに応じた修正にも、幅広く対応できるでしょう。秘密保持契約（NDA）のためすべては公開できませんが、Webサイト公開後のビジネス上の成果を、次にいくつかご紹介します。ユーザーのコールトゥアクション（CTA：Call To Action）への反応率の増加ユーザーのナビゲーション要素への反応率の増加製品のトライアル版契約数の増加同社の製品チームにおけるストレスの緩和今では、HubSpot社は「Lean UX」の手法を絶賛する支持者となっています。 Knight氏は、「私たちのチームは、プロジェクトの共同作業を効率的に進めることができた。」、「すべてのプロセスにユーザーの声を反映した結果、チームが誇りに思えるような、インパクトのあるWebサイトを構築できた。」と述べています。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

Webデザイン

無限スクロールの課題とは！スクロールが長いサイトのデザイン手法

本稿は、Smashing magazineのブログ記事を許可を得て日本語翻訳し掲載した記事になります。本記事は、UXデザイナーのNick Babich氏によって投稿されました。縦長で無限にスクロールするWebサイトが最近一般的になってきています。ロングスクロールを使うと、ユーザーはページをスクロールするだけで大量のコンテンツを閲覧することができるようになります。無限スクロールはFacebook・Twitterなどのフィードで見られる、エンドレスなスクロールの手法です。ロングスクロールには次のような利点があります。ユーザーをより引き込むことができます。スクロールを利用することで、目的のために必要な操作を最小限に抑えることができます。「次へ」をクリックする必要がないというメリットによって、ユーザーは次のページに移動する変化を気にすることなくコンテンツに没頭することができます。モバイルデバイスにうまく変換されます。ロングスクロール技術の普及の背景には、モバイル画面がよく使われるようになったということが大きく関わっています。画面が小さいほどスクロールの頻度は増えます。モバイルデバイスのジェスチャーコントロールによって、スクロールは直感的で楽しいものになります。しかし、このやり方には欠点がないわけではありません。デザイナーはコンテンツとナビゲーションにしっかりと注意を払う必要があります。この記事ではロングスクロールにおいてのいくつかの利点、考慮すべき点、それと簡単なヒントについて解説します。どのようなときにロングスクロールを利用するかロングスクロールはすべてのWebサイトに使われるわけではありません。次のような場合にふさわしいでしょう。ストーリーテリング(ストーリーテラーのために線型構造を作り出す) 長い記事や複数のステップによるチュートリアルなど、連続した長いコンテンツ(複数のページに分割するよりもユーザーエクスペリエンスが向上する) コンテンツを別々のパーツに分割できず、全体として提示する必要がある場合(インフォグラフィックなど) 製品の機能・品質・特質を物語形式で見せたいときどのようにロングスクロールを実装するか次の10のルールが、ロングスクロールによいユーザーエクスペリエンスをもたらすのに役立ちます。 1. ユーザーにスクロールを促すページが表示されるとすぐにユーザーはスクロールを開始しますが、サイト上部のコンテンツは依然として重要です。訪問者の最初の印象と品質に関する予想は、ページ上部の内容で決まります。ユーザーがページをスクロールするのは、サイトの上部に表示されているのが期待できるものである場合だけです。なので、最も魅力的なコンテンツを置きましょう。良い導入部・前書きを提示しましょう。(コンテンツの状況をはっきりさせて、ユーザーに「このページがどういうものであるか」ということを分かってもらうことができます) 魅力的な画像を使いましょう。(そのサイトに関連する情報を含む画像は、ユーザーの注意を引きつけます) 2. ナビゲーションオプションを常に保持するロングスクロールのWebサイトを作成する場合、ユーザーは現在の位置とナビゲーションを把握したいと思っていることを忘れないでください。ロングスクロールではナビゲーションに関する問題が起こることがあります。ページをスクロールしたときにナビゲーションバーが表示されなくなった場合、下の方までスクロールしていたのに一番上まで戻らなければいけなくなったりします。こういう問題に対しての解決策として、常に一貫した場所に表示され続けるメニューがあります。モバイルデバイスの場合：モバイル画面は他のデバイスよりも小さいため、ナビゲーションバーが画面の大部分を占めることがあります。ユーザーがコンテンツを見るためにスクロールしているときはナビゲーションバーを隠して、トップに戻るために画面を引き下げたときに表示させるとよいでしょう。ヒント：追加のナビゲーションを使用して、ページ内の各セクションの間をジャンプさせることもできます。以下のアニメーションの場合、ユーザーは自分の進行状況を確認することができると同時に特定のセクションへのショートカットとしてこれを利用することができます。 3.「戻る」ボタンが適切に動作することを確認するロングスクロールのサイトでは、ユーザーが自分のページ上の位置を見失うことがよくあります。ロングスクロールのリストからクリックして該当のページに行ったあと「戻る」ボタンを押したとき、元いた場所でなくページの一番上に戻ってしまうというような形です。そうすると、一度見たコンテンツをまたスクロールしなければいけなくなります。適切な場所に戻れないことで、当然ユーザーは不満を感じるでしょう。フィード内の要素をアクティブにしたあと、元いたところにきちんと戻れるようにしておく必要があります。Flickrの「戻る」ボタンはこのような機能についての良い例です。スクロール位置が記憶されており、「戻る」ボタンを押すと元の場所に戻ることができます。 4. スクロール位置に基づいてURLを変更するロングスクロールの一般的な問題のひとつとして、ページ上の特定の場所へのURLによる共有ができないという点があります。スクロール位置はURLに反映されず、そのページの先頭に繋がります。 URLが現在の位置を捉えないので、ユーザーは画面を簡単に切り替えることができなくなり苛立つことになります。 HTML5からは、history.pushState()関数を使うことで、ページをリロードすることなくブラウザに表示されるURLを変更することが可能になっています。 5. ページ内ジャンプ機能を使用するロングスクロールのもうひとつの共通の問題は、方向感覚がなくなることです。ユーザーは前に見たものを探すときに苦労します。長いチュートリアルなど、コンテンツが複数の重要なセクションに分かれている場合に特に深刻な問題になります。「セクションへジャンプ」オプションをつけることでこの現象を解決することができます。例えばTumblrでは、ページ内で迷子になったときのためにページの下や上にジャンプすることができるようになっています。ページ上のコンテンツはいくつかのはっきりしたブロックに分けられており、大きなインジケーターのドットが画面の左に固定されています。ヒント：「セクションへジャンプ」機能では、インジケーターのドットを使いやすくする必要があります。ドットがクリックやタップがしにくい状態だとユーザーを苛立たせることになります。そのため、ドットの大きさが適切であるかどうか確認してください。 6. コンテンツを読み込むときに、視覚的なフィードバックを表示するヤコブ・ニールセンのユーザビリティ10原則のひとつによると、システム状態の視認性はUIデザインにおいて重要な原理です。ユーザーはシステム上の現在の状態をいつでも知りたいと思っており、Webサイトは閲覧者を不安にさせてはいけません。適切な視覚的フィードバックを通して、ユーザーに今何が起きているのかを伝える必要があります。Webサイトがコンテンツを動的に読み込む場合は、ローディングが行われていることをはっきりと示さなければいけません。進行状況を示すインジケーターを使用して、新しいコンテンツが読み込まれていることを表現しましょう。読み込み時間は2秒～10秒の短い時間であるはずですので、システムが動作していることをループアニメーションで表すことができます。 7. スクロールハイジャックを行わないスクロールハイジャックのWebサイトでは、スクロールが制御され基本的なWebブラウザの機能を無効にされてしまいます。ユーザーがページをコントロールできない上に動作の予測ができなくなってしまうため、スクロールハイジャックは好ましくありません。この問題はAppleのMac Proのページで見ることができます。ユーザーがどれだけ早くスクロールしても、レイアウトはあらかじめ決められた速度で移動します。このページの全てのコンテンツはスクロールに関連付けられているため、訪問者はページを遅い速度でブラウズすることを強いられてしまいます。 8. ページの読み込み時間を最適化するロングスクロールのページでは、読み込みの長さの問題も発生します。これはWebサイトにおいて致命的な問題です。実際に、ユーザーの47％が2秒以内のWebページの読み込みを求めています。ページが3秒以内に読み込まれない場合、57％のユーザーが去ってしまいます。ロングスクロールの読み込み時間の問題は解決することができます。レイジーローディングなどの読み込み技術を利用し、ページの読み込み時間を最適化することで基本的なコンテンツにすぐにアクセスできるようにします。 9. リソース消費を考慮するロングスクロールを使用する場合は、ページが消費するリソース(CPUとメモリ)を常に考慮に入れてください。ページをリロードせずに複数のページの写真・アニメーションGIF・動画をスクロールすると、システムリソースが大幅に浪費される可能性があります。リソースが限られているデバイス(iPhoneなど)では大量のアセットの読み込みによる遅延が起きる可能性があります。そのため、さまざまなデバイスでWebサイトをテストし、該当の場所を通り過ぎたときにはアニメーションや動画を一時停止するなどの手法を利用します。 10. ユーザーの行動を考えるロングスクロールがどう効果的であるかを判断するために、ユーザーがどのように操作しているかを調査してください。アナリティクスデータが有効です。例えば、Googleアナリティクスではページ解析によって何人のユーザーが折りたたまれた部分の下をクリックしているか確認することができます。そのデータに応じてデザインを調整することが可能です。 [PR] プログラミングで挫折しない学習方法を動画で公開中ECサイトでのロングスクロール ECサイトではロングスクロールは頻繁に使用されます。ユーザーは製品のリストや検索結果を、中断することなくスクロールして閲覧し続けることができます。ただしユーザー満足度を向上させるためには、いくつかの一般的な問題に対処する必要があります。ナビゲーションとフィルタをスティッキーにフィルタリングが適切に行われていると、ユーザーは何千ものWebサイト内の選択肢をニーズに合った数少ない項目に絞り込むことができます。ナビゲーションメニューとフィルタオプションを持続的に表示することで、ユーザーがコンテンツをうまく管理することができます。それぞれのアイテムをブックマークできるようにする後々参照できるように気になったアイテムを簡単にブックマークしておける機能は、ユーザーにとって強力なツールです。条件に一致したアイテムの数を表示する利用できるアイテムの数を表示することで、ユーザーはフィルタリングによる結果内容のスクロールにかかる時間を判断することができます。フッターにアクセスできるようにするユーザーはフッターの概念を理解しており、そこにWebサイトの大事な情報があると思っています。しかし、ロングスクロールではフッターの閲覧が困難なことがあります。ページの下に行くと新しいアイテムが継続的に読み込まれ、フッターは見えないところに押し込まれます。この問題は深刻なもののように思われますが、「もっと見る」ボタンを利用することで解決できます。この手法では、コンテンツはオンデマンドで読み込まれることになります。新しいコンテンツは、ユーザーが「もっと見る」ボタンをクリックするまでは自動でロードされません。これによってフッターに簡単にアクセスできるようになります。ロングスクロールと視差効果インタラクションデザインはロングスクロールを使ったWebサイトの基礎であり、アニメーションはその中でも欠かせない部分です。 Web上でのユーザーの注目のスパンが約8秒であることを考えると、楽しいスクロールは注意を引きつける時間を引き伸ばすことができると言えます。閲覧者を喜ばせるアニメーションのひとつに視差効果があります。視差スクロールでは背景画像は手前のコンテンツよりもゆっくりと動き、深みと没頭の錯覚を作り出します。この効果によって画面の立体感が増します。パララックススクロールをどんなときに使うか視差は大きな印象を与え、訪問者がもっとスクロールしたくなるなる面白い視覚効果です。ユーザーをあっと言わせたいときに便利な手法になります。パララックススクロールは、ガイド付きの物語形式で効果を発揮します。ストーリーをスムーズに直線的に伝えたい場合、視差効果とロングスクロールを組み合わせることによってユーザーは閲覧を実体験のように夢中になって楽しむことができます。 The Boatでは、画面がスクロールされると次のコンテンツのパスを作成しながらアニメーションによって閲覧者を次の場面に導きます。スクロールの動作はより楽しいものになり、ユーザーは「次はどうなるんだろう？」とワクワクするでしょう。パララックススクロールを使うべきではないケース多くのユーザーがはっきりしたタスク(製品の購入など)を目的としている場合は、パララックススクロールは使用しないでください。もし製品を購入するたびに視差効果を見せられるAmazonがあったら、どれだけフラストレーションがたまるか想像してみましょう。パララックスとページパフォーマンス視差効果を使用するWebサイトの多くは、スクロールのパフォーマンスに苦しんでいます。iPhoneのような高画素のデバイスでは特に害のあることです。すべてのパフォーマンスの問題を完全に解決することはできませんが、簡単な手法でスクロールのパフォーマンスを向上させることができます。ブラウザのアニメーションにはtranslate3d・scale・rotation・opacityといった手軽なプロパティのみを使用してください。大量の画像をアニメートしたり、劇的にサイズを変更させたりしてはいけません。ブラウザに画像(特に巨大なもの)をリサイズさせると、コストがかかる可能性があります。一度にたくさんのものをアニメートしないようにしましょう。パララックスとアクセシビリティ前庭機能障害を持つユーザーが、そのWebサイトを使用したとき視覚的にどのようになるかを考慮しましょう。アニメーションによって目まいが起きる可能性があります。 Val Headはより安全なアニメーションをデザインする方法として、もしWebサイトに大量の動きがある場合はモーションをオフにするオプションをつけることを推奨しています。ボタンあるいはトグルスイッチを使用して、Webサイト上のアニメーションを減らしたり消したりできるようにします。このアイデアの研究のために、Nat TarnoffはどのWebサイトでも使用できるトグルスイッチのプロトタイプを開発しました。最後にロングスクロールによって、没入感のあるブラウジングを生み出すことができます。ユーザーが直感的なUIが好きであれば、スクロールの長さは気にならないでしょう。閲覧者の目的が達成され、かつ便利だと感じさせるものにしてください。また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサイトを開発することが可能です。独学に限界を感じている場合はご検討ください。

Webデザイン

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

今回は大阪中心部のIT・情報系の専門学校をまとめました。資格やスキルなど特化した学校もあるため、自分に合った学校を見つけましょう。田島悠介今回は、なにか相談受けたんだって？大石ゆかり大阪に住んでる親戚がIT系の専門学校に通いたいって言ったんですが・・・どこを選べばいいかわからなくて・・・田島悠介よし！それじゃ、自分にあったIT系専門学校の選び方と大阪にある学校を紹介していくね！大石ゆかりお願いします！目次自分に合った学校の選び方学費を抑えられる学校資格が充実している学校プログラミングを学習できる学校実習の多い学校就職サポートが充実している学校まとめ自分に合った学校の選び方これからIT系の知識・スキルを習得したいと考えている方は多いでしょう。 IT系の専門学校に興味を持ってもどの専門学校に入学すれば良いのか、自分にはどの専門学校が合っているのか考えることは難しいです。本記事では以下のポイントに注目して大阪のIT系専門学校をまとめました。学費を抑えたい就職・転職の際の強みになる資格を取得したいプログラミングスキルを習得したい実習などで経験を積んで即戦力として活躍したい就職実績が良く、安心して就職・転職をしたい自分の目的に合った専門学校選びの参考にしてみましょう。 [PR] プログラミングで挫折しない学習方法を動画で公開中学費を抑えられる学校学費を抑えながら通える学校についてみていきましょう。 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/ プログラミングを学習できる学校プログラミングを基礎から学習できる学校をみていきましょう。大阪情報コンピュータ専門学校画像引用元：http://www.oic.ac.jp/growup/ 概要/特色 C＃やC言語などプログラミングを深く習得できる学科や専攻が細かく設定されており、4年コースもあり初心者からプロになることができる IT業界の大手に就職実績あり大阪情報コンピュータ専門学校は、場合によっては4年コースで専門的なスキルを高めていけることが特徴の専門学校です。また、アニメやCGなども学べることから多種多様なニーズを満たすこともできます。区分私立（学校法人大阪経理経済学園）学費入学選考料 2万円入学金 12万円授業料 60万円施設費 15万円実習費 18万円教材費 0.5～7万円程度校友会費専門学校Webサイトに記載なし合宿等諸経費 1～6万円程度 1年次合計約120万円卒業後の進路【内定職種】エンジニアシステムエンジニアネットワークエンジニアフィールドエンジニアデータサイエンティスト Webエンジニア Webデザイナー DTPオペレーターセキュリティエンジニア CGデザイナーゲームデザイナーゲームプログラマゲームグラフィッカーゲームプランナーその他【内定就職先】旭情報サービス（情報処理系）日本総研情報サービス（情報処理系） CTCシステムマネジメント（情報処理系）カプコン（ゲーム・クリエイティブ系）スタジオ・ビーアンドエム（ゲーム・クリエイティブ系）その他多数コース一覧【学科・コース】学科コース情報処理・IT系 ITスペシャリスト専攻（4年）ネットワークセキュリティ専攻（4年）システムエンジニア専攻（3年）ネットワークエンジニア専攻（3年）などゲーム系ゲームプログラマー専攻（4年）ゲームデザイナー専攻（4年）ゲームプランナー専攻（4年）ゲームクリエイター専攻（PG）（3年）ゲームクリエイター専攻（CG）（3年）ゲームプログラムコース（2年）ゲームCGデザインコース（2年） CG・アニメーション系 CG映像クリエイター専攻（4年） CGクリエイター専攻（3年） CG映像コース（2年） CGアニメーションコース（2年）デザイン・Web系アートディレクター専攻（3年） Webデザインコース（2年）グラフィックデザインコース（2年）ビジネス系 ITビジネスコース（2年） OAパソコンコース（2年）大短専門卒・社会人対象 ITシステムエンジニアコース（2年） ITネットワークエンジニアコース（2年） ※IT系の学科のみを記載しました。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 HTML データベーススペシャリスト CSS ネットワークスペシャリスト JavaScript 情報処理安全確保支援士 SQL 基本情報技術者試験 C# 応用情報技術者試験 C言語情報セキュリティマネジメント試験その他 ITパスポート試験オラクルブロンズ C言語プログラミング能力認定試験 CGクリエイター検定 MOS Webクリエイター能力認定試験 CCNP（シスコ認定ネットワーク技術者プロフェッショナル） CCNA（シスコ認定ネットワーク技術者アソシエイト）その他 ※シラバスなどを参照入試方法書類選考面接選考（行事参加により免除される場合があります）筆記選考（英語・数学Ⅰ）入学難易度面接選考と筆記選考があるため、入学難易度としては、他の専門学校と比較すると高めです。住所大阪市天王寺区上本町6-8-4 専門学校WebサイトURL：http://www.oic.ac.jp/ 近畿コンピュータ電子専門学校画像引用元：https://kincom.ac.jp/profile/it_engineer/ 概要/特色プログラミング関連の多数の資格取得をサポート LinuxやUnix関連のカリキュラムが豊富実習が豊富であり、即戦力が身につく近畿コンピュータ電子専門学校は、プログラミング言語に触れたうえでLinuxやUnix関連のカリキュラムが豊富なことが特徴的な専門学校だといえます。区分私立（学校法人ヒラタ学園）学費入学選考料 2万円入学金 20万円授業料 64万円施設費 38万円実習費教材費（実習費に含む）校友会費専門学校Webサイトに記載なし 1年次合計約124万円卒業後の進路【内定職種】エンジニアシステムエンジニアデータサイエンティスト CGデザイナーゲームプログラマゲームプランナーその他【内定就職先】株式会社IIJエンジニアリング旭情報サービス株式会社株式会社エイチ・エル・シー株式会社エーアイシステム株式会社NSD その他多数コース一覧【学科・コース】学科コースクリエイタ学科ゲームプログラマ専攻（2年）ビジュアルデザイン専攻（2年）プログラマ学科 ITスペシャリスト専攻（2年）電子科データ通信専攻（2年）総合エンジニア専攻（2年）情報クリエイタ工学科ゲームクリエイタ専攻（3年）ゲームグラフィック・キャラクター専攻（3年）システムエンジニア専攻（3年）ゲームエキスパート専攻（4年） CG・デザインエキスパート専攻（4年） ITエキスパート専攻（4年） ※IT系の学科のみを記載しました。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 PHP オラクルマスター HTML CCNA（シスコ認定ネットワーク技術者アソシエイト） CSS データベーススペシャリスト JavaScript ネットワークスペシャリスト SQL 基本情報技術者試験 C# 応用情報技術者試験 Java 情報セキュリティマネジメント試験その他 ITパスポート試験 Webクリエイター能力認定試験 Javaプログラミング能力認定試験 LPIC（Linux技術者認定試験）情報検定（J検） C言語プログラミング能力認定試験 CGエンジニア検定その他 ※シラバスなどを参照入試方法以下を基準にする書類選考面接選考（行事参加により免除される場合があります）筆記選考（国・数・社・理・英）（状況におうじて免除される場合があります）入学難易度面接選考と筆記選考があるため、入学難易度としては、他の専門学校と比較すると高めです。住所堺市西区鳳西町3丁712 専門学校WebサイトURL：https://kincom.ac.jp/index.php i-SEIFU清風情報工科学院画像引用元：https://i-seifu.jp/ 概要/特色ゲームに関するプログラミングや開発環境などが学べる Webのスペシャリストになるためのカリキュラムあり多数のプログラミング言語をゆっくりと習得できる i-SEIFU清風情報工科学院は、ゲーム分野などに特化したプログラミングを学ぶことのできる専門学校です。また、ゲームだけでなく、企業で活躍できるスキルを習得することも可能です。区分私立（学校法人清風明育社）学費入学選考料 2.0万円入学金 30.0万円授業料 94.0万円卒業アルバム 1.0万円教材・検定費 3～5万円程度教育充実費 4.0万円 1年次合計 136.0万円卒業後の進路【内定職種】ゲームプログラマーゲームグラフィッカーゲームプランナー CGクリエイターアニメーターシステムエンジニアネットワークエンジニア組込み系エンジニア Webプログラマー Webディレクター Webクリエイターグラフィックデザイナーその他【内定就職先】株式会社堀場エステック日本ヒューレット・パッカード株式会社ソフトバンクBB株式会社株式会社オージス総研 NECネッツエスアイ・サービス株式会社その他多数コース一覧【学科・コース】学科専攻コースデザイン・コンピュータ学科研究・応用・基礎コース（4年・3年・2年）デザイン・イラスト専攻 Webデザインコースビジュアルデザインコースゲーム専攻ゲームプログラムコースグラフィック・アニメーションコース情報処理・ネットワーク専攻システムエンジニアコースパソコンマスターコース ※IT系の学科のみを記載しています。【習得できるプログラミング言語・資格】資格については専門学校Webサイトに記載なし。習得できるプログラミング言語 HTML CSS JavaScript C# Java PHP その他 ※シラバスなどを参照入試方法書類選考面接選考（行事参加により免除される場合があります）コンピュータ適正選考入学難易度筆記選考はないものの、面接選考とコンピュータ適正専攻があるため、入学難易度としては、低くはありません。住所大阪市阿倍野区丸山通1-6-3 専門学校WebサイトURL：https://i-seifu.jp/ NCP日本コンピュータ専門学校画像引用元：https://www.ncp.ac.jp/ 概要/特色細かく専攻が分けられており、なりたい職業に必要なスキルを深く習得できる Web系、システム系の言語だけでなくスマホアプリを開発できるプログラミング言語も学べる VRなど最新技術を習得できる NCP日本コンピュータ専門学校は、専攻学科が細かく分かれており、Web・ゲーム・アプリ開発など多様な選択肢を選べる専門学校です。区分私立（学校法人瓶井学園）学費入学選考料 2.0万円入学金 27.0万円授業料 100.0万円実習費 7.4万円厚生費 0.6万円校友会費 0.5万円同窓会費 0.5万円 1年次合計 137.9万円卒業後の進路【内定職種】ゲームプログラマーゲームクリエイターゲームCGクリエイター CGアニメーターキャラクターデザイナーシステムエンジニア Webクリエイター Webデザイナー Webディレクターグラフィックデザイナー DTPオペレーターその他【内定就職先】サイバーコネクトツーアズリードカンパニーダイナムコナミカプコン NTTコムウェア西日本その他多数コース一覧【学科・コース】学科コース Webスペシャリスト科（4年）３DCGゲームデザインコース Webデザインコースグラフィックデザインコース VR・MRクリエイターコースネットワークシステムコーススマートフォンアプリコース Webシステムコース Webビジネスコース情報処理システム科（2年）ネットワークシステムコーススマートフォンアプリコース Webシステムコース AI・IoTコース Webビジネスコースデジタルクリエイター科（2年）３DCGゲームデザインコース VRゲームコース CG映像制作コース Webデザインコースグラフィックデザインコース ITスペシャリスト科（1年） Webデザインコースグラフィックデザインコース Webシステムコース ITライセンス実践コース ITビジネス科（1年） ITライセンス実践コース ※IT系の学科のみを記載しました。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 HTML CGクリエイター検定 CSS CGエンジニア検定 JavaScript マルチメディア検定 Java ITパスポート試験 C言語基本情報技術者試験 Swift 情報セキュリティマネジメント試験 SQL 情報検定その他情報システム検定 CCNA・CCENT（シスコ認定資格）試験オラクルマスター認定資格試験応用情報技術者試験ネットワークスペシャリスト試験情報処理安全確保支援士その他入試方法書類選考面接選考（行事参加により免除される場合があります）筆記選考（英語または数学Ⅰ）入学難易度面接選考と筆記選考があるため、入学難易度としては、高めです。住所大阪市東淀川区豊新1-21-22 専門学校WebサイトURL：https://www.ncp.ac.jp/ 実習の多い学校実習が多さは、実際の課題をクリアする機会が沢山あることを意味します。そのため、企業でも役に立つスキルを身につけやすいといえるでしょう。ＥＣＣコンピュータ専門学校画像引用元：https://comp.ecc.ac.jp/course_2020/it_coll/col_info/kenkyu/ 概要/特色海外研修が豊富で、国内外で活躍できるスキルを習得できる多数のプログラミング言語を演習を通して学べる国家資格だけでなくベンダー資格まで、数多くの資格取得をサポートＥＣＣコンピュータ専門学校は、大手企業にも就職実績のある専門学校です。海外研修や演習を通して、実際に現場で使用できるスキルを磨いていくことができます。区分私立（学校法人山口学園）学費入学選考料 2.0万円入学金 18.0万円授業料 96.0万円施設費 24.0万円教材費 1～3万円程度海外研修 144.5万円諸経費 4～7.5万円程度 1年次合計 295.0万円卒業後の進路【内定職種】ゲームプログラマゲームプランナーゲームCGデザイナーゲームキャラクターデザイナーシステムエンジニアネットワークエンジニア Webデザイナー Webエンジニアその他【内定就職先】カプコンセガゲームスインテリジェントシステムズソフトウェア・サービスエイチームその他多数コース一覧【学科・コース】学科コース専攻高度情報処理研究学科（4年）ゲーム開発エキスパートコース IT開発エキスパートコースゲームプログラム専攻ゲームCG専攻ゲームプランナー専攻マルチメディア研究学科（3年）ゲームプログラム開発コース CGデザインコース IT開発研究コース Webデザインコース３DCG専攻ゲームキャラクター専攻マルチメディア学科（2年）システムエンジニアコースシステムエンジニア専攻経営工学科（2年） ITビジネスサポートコース ITビジネス専攻 ※IT系の学科のみを記載しています。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 HTML 情報処理安全確保支援士 CSS データベーススペシャリスト試験 C# 応用情報技術者試験 JavaScript 情報セキュリティマネジメント試験 Swift シスコ技術者認定 Objective-C LPIC（Linux技術者認定試験） Java ITパスポート試験 PHP 基本情報技術者試験 SQL オラクルマスターその他 android技術者認定その他 ※シラバスなどを参照入試方法書類選考入学難易度書類選考のみのため、入学難易度は容易です。住所大阪市北区中崎西2-3-35 専門学校WebサイトURL：https://comp.ecc.ac.jp/ 創造社デザイン専門学校画像引用元：https://www.sozosha.ac.jp/ 概要/特色カリキュラムのほぼすべてが演習や実習で構成されている Web系のカリキュラムが多数アプリ開発も習得可能創造社デザイン専門学校は、カリキュラムにおいて演習・実習の頻度が非常に多い専門学校です。区分私立（学校法人創造社学園）学費入学選考料 2.0万円入学金 12.0万円授業料 72.0万円諸費用 48.0万円教材費別途 1年次合計 134.0万円卒業後の進路【内定職種】グラフィックデザイナーアートディレクタークリエイティブディレクター DTPデザイナーイラストレーターキャラクターデザイナーアニメーター Webディレクター Webプランナー Webデザイナー Webプログラマー CGクリエイターアプリ開発デザイナープログラマーその他【内定就職先】専門学校Webサイトに記載なし。コース一覧【学科・コース】学科専攻ビジュアルデザイン科（2年）グラフィック専攻イラストレーション専攻ウェブ専攻コトづくり学科（2年）グラフィック専攻イラストレーション専攻ウェブ専攻アントプレナー学科（4年）コトづくり系コース ※他にも学科はありますが、IT系の学科のみを記載しています。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 HTML Webクリエイター能力認定試験 CSS マルチメディア検定 JavaScript Photoshopクリエイター能力認定試験その他 Flashクリエイター能力認定試験画像処理検定 Illustratorクリエイター能力認定試験 DTPエキスパート認定試験その他 ※シラバスなどを参照入試方法書類選考作文選考入学難易度面接選考と作文選考があるため、入学難易度は高めです。住所大阪市西区江戸堀1-25-15 専門学校WebサイトURL：https://www.sozosha.ac.jp/ 大阪デザイナー専門学校画像引用元：https://www.odc.ac.jp/ 概要/特色大手学校法人が運営卒業してからも就職をサポートしてくれる VRルームなど充実した設備で実習などが可能大阪デザイナー専門学校は、就職サポートが充実している専門学校です。就職実績として、ゲーム関係のものからWebデザイナーなど非常に様々な選択肢を選ぶことが可能です。区分私立（学校法人Adachi学園）学費入学選考料 2.0万円入学金 17.0万円授業料 94.0万円施設費 22.0万円校友会費 0.8万円学生保険料 0.2万円教材費 1～3万円程度 1年次合計 139.0万円卒業後の進路【内定職種】ゲームグラフィッカー３DCGデザイナーゲームデザイナーキャラクターデザイナーグラフィックデザイナーアートディレクター Webデザイナー DTPオペレーターその他【内定就職先】エープラス（ゲーム・映像・CG業界）アンビジョン（ゲーム・映像・CG業界）マーケティングファクトリー（ゲーム・映像・CG業界）エムグラフィックス（広告・Web業界）神戸デザインセンター（広告・Web業界）その他多数コース一覧【学科・コース】学科コース CG・ゲームデザイン（2年）ゲームイラストゲームモデリング CGアニメーションゲームデザインアプリケーションデザイングラフィックデザイン（2年）グラフィックデザイングラフィックアート広告デザインパッケージデザイン Webデザイン ※IT系の学科のみを記載しました。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 HTML CG検定　CGクリエイター　エキスパート CSS CG検定　CGクリエイター　ベーシック JavaScript CG検定　WEBデザイナー　ベーシックその他色彩士検定　３級色彩士検定　２級色彩士検定　１級その他 ※シラバスなどを参照入試方法書類選考面接選考（必要に応じて）入学難易度基本的には書類選考のみのため、入学難易度としては低めです。住所大阪市北区堂島2-3-20 専門学校WebサイトURL：https://www.odc.ac.jp/ 就職サポートが充実している学校就職サポートが充実している専門学校についてみていきましょう。大阪コンピュータ専門学校画像引用元：https://www.ocsg.ac.jp/school/feature 概要/特色企業が学校にきて説明会を行ってくれる有効求人倍率10倍実習室が最先端で実践力が身につく大阪コンピュータ専門学校は最先端の機器を使用できるため、学習内容を企業の業務にそのまま活用することが可能です。また、求人倍率が非常に高いことから、企業からの信用が高いといえるでしょう。区分私立（学校法人西沢学園）学費入学選考料 2.0万円入学金 20.0万円初年度学費 120.0万円 1年次合計 142.0万円卒業後の進路【内定職種】プログラマーシステムエンジニアセールスエンジニアカスタマーエンジニアシステムアドミニストレータ OA機器インストラクター OAオペレーターネットワークエンジニア CGアニメーター Webデザイナー Webクリエイターキャラクターデザイナーゲームプログラマー DTPオペレーターその他【内定就職先】東芝情報機器日本システムウェア日本デジタル研究所日立情報システム任天堂その他多数コース一覧【学科・コース】学科 IT・クラウド科 CG・ゲーム科デジタルクリエイター科フォトグラファ科 ※IT系の学科のみを記載しました。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 HTML インターネット検定 CSS 基本情報技術者試験 JavaScript 応用情報技術者試験 VisualBasic ITパスポート試験 C言語情報デザイン試験 C++ CGクリエイター検定 Java CGエンジニア検定その他マルチメディア検定 Photoshopクリエイター能力認定試験その他 ※シラバスなどを参照入試方法書類選考入学難易度書類選考のみのため、入学難易度は低めだといえます。住所大阪市北区南扇町3 専門学校WebサイトURL：https://www.ocsg.ac.jp/ ＨＡＬ大阪画像引用元：https://www.hal.ac.jp/osaka 概要/特色完全就職保証制度あり細かな学科、コース設定でより目指す職種の専門スキルを習得できる目指せる職種が多数ＨＡＬ大阪は大手専門学校であり、ロボットやプログラミングなどより自分に合わせた専門スキルを習得できる専門学校です。また、完全就職サポートなどの制度から就職も安心できるといえます。区分私立（学校法人日本教育財団）学費入学選考料 3.0万円入学金 28.0万円授業料 83.0万円教育充実費 14.1万円施設費 28.2万円教材費 3.5～8.3万円程度卒業諸費用 1.9万円 1年次合計 166.5万円卒業後の進路【内定職種】ゲームCGデザイナーキャラクターデザイナーモーションデザイナーゲームプランナーゲームディレクターゲームシナリオライターゲームデザイナーゲームプログラマーゲームクリエイターオンラインゲームプログラマースマートフォンゲームクリエイターゲームデザイナー CGデザイナーゲームCGデザイナー WEBデザイナー WEBエンジニア WEBディレクターロボット設計エンジニアロボット制御エンジニアエレクトロニクスエンジニア組込システムエンジニアシステムエンジニアプログラマー情報セキュリティスペシャリスト運用管理エンジニアプロジェクトマネージャネットワークエンジニアデータベーススペシャリストその他【内定就職先】任天堂ソニーデジタル・フロンティア東映アニメーションヤフー富士通その他多数コース一覧【学科・コース】学部学科コース専攻ゲーム学部ゲーム4年制学科ゲームデザインコースゲームデザイナー専攻 3Ⅾキャラクターデザイナー専攻スマートフォンゲームデザイナー専攻ゲーム企画コースゲームプランナー専攻ゲームシナリオライター専攻ゲームディレクター専攻ゲーム制作コース VR・３Dゲームプログラマー専攻オンラインゲームプログラマー専攻スマートフォンゲームプログラマー専攻 CG学部 CG映像学科３DCGクリエイター専攻 VFXアーティスト専攻グラフィックデザイン学科 CGデザイナー専攻アートディレクター専攻アニメ・イラスト学科アニメーター専攻イラストレーター専攻ミュージック学部ミュージック学科サウンドクリエイター専攻サウンドエンジニア専攻ゲームミュージック選考ロボット学部先端ロボット開発学科ロボット開発エンジニア専攻デバイス制御エンジニア専攻先端ロボティクス専攻 IT学部高度情報学科高度情報処理コース高度システムエンジニア専攻情報ネットワーク専攻サイバーセキュリティ専攻 Web開発コース Web開発エンジニア専攻 Webデザイナー専攻スマートフォンアプリ開発専攻 ※IT系の学科のみを記載していました。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 HTML CGクリエイター検定 CSS マルチメディア検定 JavaScript 基本情報技術者試験 SQL 応用情報技術者試験 Java データベーススペシャリスト試験 PHP エンベデッドシステムスペシャリスト試験 C# 情報セキュリティマネジメント試験その他オラクルマスター Webデザイナー検定情報検定その他 ※シラバスなどを参照入試方法書類選考面接選考（書類選考の結果。行事参加により免除される場合があります）入学難易度面接選考があるものの、筆記選考がないため、入学難易度としては低めです。住所大阪市北区梅田3-3-1 専門学校WebサイトURL：https://www.hal.ac.jp/osaka 大阪電子専門学校画像引用元：https://www.kimura.ac.jp/course/it_engineer/it_engineer-02/ 概要/特色有効求人倍率10倍（2018年度実績）求人企業総数約850社（2018年度実績）国家資格からベンダー資格まで幅広く資格取得をサポート大阪電子専門学校は、プログラミングを学びつつ、非常に多くの企業に対して就職実績を持つ専門学校です。区分私立（学校法人木村学園）学費入学選考料 2.0万円入学金 25.0万円授業料 63.0万円実習費 8.0万円施設委 27.0万円 1年次合計 125.0万円卒業後の進路【内定職種】プログラマーシステムエンジニアネットワークエンジニアセキュリティエンジニア Webデザイナー DTPデザイナーグラフィックデザイナー CGデザイナーその他【内定就職先】 SIG 新日本コンピュータマネジメント関越ソフトウェアニチワシステムその他多数コース一覧【学科・コース】学科コース情報エンジニア学科 ITコースパソコンメンテコースネットワークコース Webデザインコースグラフィックデザインコース電子工学科ロボットコース電子コース家電サービスコース情報通信コースオーディオコース ※他にも学科はありますが、IT系の学科のみを記載しています。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 HTML 基本情報技術者試験 CSS 応用情報技術者試験 JavaScript ITパスポート試験 Java ネットワークスペシャリスト試験 C言語データベーススペシャリスト試験 SQL 情報処理安全確保支援士試験その他 (旧情報セキュリティスペシャリスト試験) ドットコムマスター(ベーシック・アドバンス) C言語プログラミング能力検定試験 Java SE8認定試験（オラクル）マルチメディア検定(ベーシック・エキスパート) CGクリエイター検定(ベーシック・エキスパート) その他 ※シラバスなどを参照入試方法書類選考入学難易度書類選考のみのため、入学難易度は低いといえます。また、筆記選考も面接選考もありません。住所大阪市天王寺区勝山4-5-6 専門学校WebサイトURL：https://www.kimura.ac.jp/ 大阪ハイテクノロジー専門学校画像引用元：https://www.osaka-hightech.ac.jp/school/access/ 概要/特色毎年就職率100％求人件数1740件学園主催で就職フェアを開催大阪ハイテクノロジー専門学校は、就職率100％を誇り、学校に対する求人のみで1000件を超すことから多くの企業に評価されている専門学校です。区分私立（学校法人大阪慈慶学園）学費入学選考料 2.0万円入学金 10.0万円授業料 60.0万円実習費 10.0万円教材費 8.5万円その他 30～38万円程度 1年次合計 128.5万円卒業後の進路【内定職種】 AIエンジニアプログラマーその他【内定就職先】カワサキロボットサービスアイディエスクラフト日立超LSIシステムズその他多数コース一覧【学科・コース】生命工学技術科AIロボット専攻 IT系の学科のみを記載しました。【習得できるプログラミング言語・資格】 C言語 Python その他 ※シラバスなどを参照 ※資格についてはIT系のついて専門学校Webサイトに記載なし。入試方法書類選考面接選考作文選考筆記選考（中学・高等学校で履修する程度の一般教養）入学難易度面接選考と作文選考、筆記選考があるため、入学難易度は高めです。住所大阪市淀川区宮原1-2-43 専門学校WebサイトURL：https://www.osaka-hightech.ac.jp/ まとめ今回紹介した専門学校の特徴をまとめました。専門学校名学費入学難易度プログラミング習得資格習得就職サポート実習 JOHO大阪情報専門学校約106.9万円中〇〇〇〇ユービック情報専門学校約105.5万円中〇〇〇〇中央ＩＴビジネス専門学校約109.5万円中 △ △ △ △ OCA大阪デザイン＆IT専門学校約170万円中〇〇〇〇 NRJ日本理工情報専門学校約137.9万円高 △ 〇 △ △ 大原情報デザインアート専門学校約118万円低 △ 〇 △ △ 大阪ＩＴ会計専門学校天王寺校約128万円低〇〇 △ △ 大阪情報コンピュータ専門学校約120万円高〇〇〇〇近畿コンピュータ電子専門学校約124万円高〇〇〇〇 i-SEIFU清風情報工科学院約136万円中 △ △ △ △ NCP日本コンピュータ専門学校約137.9万円高〇〇〇〇ＥＣＣコンピュータ専門学校約295万円低〇〇〇〇創造社デザイン専門学校約134万円高 △ 〇 △ 〇大阪デザイナー専門学校約139万円低 △ △ 〇〇大阪コンピュータ専門学校約142万円低〇〇〇〇ＨＡＬ大阪約166.5万円中〇〇〇〇大阪電子専門学校約125万円低〇〇 △ 〇大阪ハイテクノロジー専門学校約128.5万円高 △ △ 〇〇大石ゆかりありがとうございます！たくさん比較してもらえたので、自分にあった学校が分かったそうです！田島悠介それは良かった！またわからないことがあったらいつでも聞いてね？大石ゆかりはい！ありがとうございます！ TechAcademyでは、プログラミングを学習して就職したい方向けに、就職保証付きの大阪で学べるプログラミングスクールを開催予定です。現役エンジニアの学習サポートと、キャリアカウンセリングを通じてエンジニアへの就職を支援します。

プログラミング

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

6つの事例から学ぶ！モバイルデザインのテクニック集

目次

効果的なタイポグラフィ

シンプルなカラースキーム（配色）

カード型の要素＆コンテンツベースのナビゲーション