TechAcademy（テックアカデミー） UX/UIデザインコース スマートフォンアプリ開発 アプリデザイン 【プロトタイプを作る！】初心者でもすぐに分かるProttの使い方
icon
icon
アプリデザイン

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

プロトタイピングツールとして有名な「Prott」の使い方を紹介！Prottは作業画面からサポートまで全て日本語対応のプロトタイプ作成ツールです。作成したプロトタイプはiPhoneですぐに確認することができます。

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

プロトタイピングツールとして有名な「Prott」の使い方について解説しています。

Prottは作業画面からサポートまで全て日本語対応のプロトタイプ作成ツールです。使用には専用のアカウントが必要ですが、メールアドレスとパスワードだけですぐに無料で始めることができます。

Prottを使い始める登録のところから実際にプロトタイプを作る詳細部分も載せているので、ぜひ参考にしてみてください。

 

なおProttは、TechAcademyのオンラインブートキャンプ UI/UXデザインコースでも使用しています。

 

新規アカウントを取得する

まず、下記のリンクにアクセスします。

https://prottapp.com/ja/

「無料ではじめる」をクリックします。

prott_p_1

ユーザーネームとメールアドレス・パスワードを設定します。

prott_p_2

各項目を入力し「サインアップ」をクリックすると「【Prott】アカウントを承認してください！」というタイトルのメールが設定したアドレスに届くので、「メールを確認する」をクリックすれば完了です。

prott_p_3

最初の30日間は有料の機能を全て使用することができます。
無料プランは1つのプロジェクトのみが編集可能ですが、スクリーンの数には制限がありません。

prott_p_4

 

プロジェクトの作成

まず、新規にプロジェクトを作成します。
管理画面から「新規プロジェクト」をクリックします。

prott_p_5

プロジェクト名を入力し、対応の形式を選択します。今回はWebとしています。

prott_p_6

 

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

スクリーン画像のアップロード

プロトタイプに使用するスクリーンをアップロードします。

対応の形式はJPEG・GIF・PNGの画像ファイルとなります。
画像はPCからのアップロードの他に、Dropboxから使用することもできます。

prott_p_7

スクリーンをアップロードしたら、編集を行う画像をクリックします。

prott_p_8

 

スクリーンからスクリーンへのリンクを作成する

スクリーン内をドラッグすることでリンクを貼る範囲を選択することができます。

prott_p_9

範囲を作成すると他画像へ紐付けするための黄色い曲線が現れるので、左のスクリーン一覧からリンク先として設定したい画像へ繋げます。

prott_p_10

また、この時「トランジション設定」からリンクを行う際のアニメーションを選択することができます。

prott_p_11

リンク箇所は後からでも範囲を拡大・縮小・移動することが可能です。

prott_p_12

prott_p_13

上メニューの「プレビュー」をクリックすると実際にどう動くか確認することができます。

prott_p_14

 

コラム

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

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

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

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

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

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

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

シェア機能・サポートの使い方

「シェア」→「共有設定をオンにする」をチェックすることで、グループのメンバー以外にも作成したプロジェクトを公開することが可能です。

prott_p_15

サポートへの問い合わせフォームは、左下のこのマークをクリックすることで表示されます。

prott_p_16

prott_p_17

 

以上、Prottの使い方を解説してきました。

WebのUI、アプリのUIをProttで作ってみてください。1プロジェクトであれば誰でも無料で利用できるプロトタイピングツールなので、気軽に使えますね。

[お知らせ]TechAcademyではProttを使って実践的にUI/UXデザインを学ぶオンラインブートキャンプ UI/UXデザインコースを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

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

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

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

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

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

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

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

記事を検索

関連するキーワード

関連する記事

意味のあるデザインを！自然なアニメーションの作り方

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

実際のアプリから学ぶ！UX向上のためのアニメーションの使い方

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

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

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

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

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

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

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

【誰でも簡単に！】モックアップを作成できるおすすめツール5選

モックアップとは、Webデザインの作成時に外観・レイアウト等を確認するためのものです。ここではモックアップの作成を簡単な操作で行うことができる便利なツールを紹介...
アプリデザイン

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

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

今日では、ソフトウェアやサービス、アプリ開発の現場において、必須プロセスとなっているプロトタイピング。IT業界ではこの1、2年でプロトタイピングのカルチャーが浸透し、多くの開発現場でプロトタイピングツールが導入されています。 今回は、今大注目のプロトタイプを誰でも簡単に作ることができるツール「Prott（プロット）」を開発している株式会社グッドパッチのプロダクトマネージャー、岡田麻里さんにお話を伺ってきました。 2016年7月20日に画面遷移図機能がリリースされたProttを中心に、チームでのコラボレーションやプロトタイピングの重要性など、デザインの魅力満載のインタビューとなっています。   お話を伺った方 岡田 麻里さん 株式会社グッドパッチ、Product Divisionのプロダクトマネージャー。 学生時代からインターンとしてプロトタイピングツール「Prott」のカスタマーサポートの業務を担当。 2015年に株式会社グッドパッチに新卒として入社と同時にプロダクトマネージャーとなり、新機能の企画開発を始め、改善の進行管理など、幅広い業務に携わっている。   以下、インタビューです。   Prottの新機能「画面遷移図機能」とは ――まずは、Prottの新しい機能に関してお伺いしてもよろしいでしょうか？ Prottでプロトタイプを作るだけで自動的に画面遷移図が生成される機能です。 「クライアントワークをしているとプロトタイプと合わせて画面遷移図を納品しないといけない。プロトタイプと一緒に画面遷移図もProttで作れないか」という要望を数多くいただいていました。 画面遷移図は、全体を俯瞰するために使うものですが、寄りの視点をプロトタイプで確認しながら、かつ画面遷移図を出力して、引きの視点を見てプロダクト自体のデザインを確認できる、寄りと引きの視点をもってプロダクトを改善できる機能になっています。 画面遷移図を最新の状態で保つのって結構面倒な作業なのですが、それが自動的にできるため、大幅な時間の削減にもなりますね。 ――具体的に作っていた期間はどのくらいでしょうか。 2016年3月頃から着手したので、リリースまでは約3ヶ月ぐらいですね。   ――何人ぐらいで実装されていたんですか。 実装はエンジニア1人です。グッドパッチにはエンジニアが多く在籍していますが、開発は小さなチームで行うのが主流なんです。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中プロトタイピングが作業を効率化させる ――プロトタイピングの重要性について教えていただけますか？  プロトタイピングという手法を用いることで、アイデアを素早く形にし、それを共有してアイデアが実際にユーザーにとって受け入れられるかどうかを検証することができます。 一般的な開発現場で多い、ディレクターからデザイナー、エンジニアへと直線的に依頼する方法ではなく、設定されたゴールに向かって、それぞれの職種がプロトタイプを中心に議論を行い、チームとして一緒に進んでいくことができます。 直線的なコミュニケーションで起きていた「これ実際できないよね？」のような議論や手戻りを削減し、作業を効率化させることができるんです。   ――そもそもProttを開発したきっかけはなんだったんでしょうか。 今から約2年ほど前、Prottがリリースされた当初はIT業界ではプロトタイピングというカルチャーは浸透していませんでした。 リリース当時は、プロトタイピングというカルチャーと合わせてProttを知っていただくことから始めました。 実際に、グッドパッチでも当時国産のプロトタイピングツールがなかったので、海外のプロトタイピングツールを使用してプロトタイプを作成していたことがあるのですが、チームで使うには最適化されておらず、口頭や資料でいろんなことを説明したはずなのに、実装されたアプリを確認すると、意図したことと異なっていたり、非常に使いづらい仕上がりになっていることが頻繁に起こりました。 最適なものがないのであれば、自分たちで使いやすいものを作ろう！となったのがきっかけですね。   ――開発のプロセスはどのようなものだったんでしょうか。 開発当初は、エンジニアがいない状態からスタートしました。 代表の土屋とデザイナーとで議論をしながら進め、開発から2か月後にエンジニアが入社するという、まさにスタートアップらしい始まりです。 当時はノウハウなどは全くない状態でしたが、いいプロダクトをつくるために誰でも簡単い使えるプロトタイピングツールが絶対に必要だという確信があったのだそうです。 代表の土屋と開発メンバーで、作ったばかりのプロトタイプを持ってユーザーの要望を聞いて回り、改善を重ねていきました。Prottを開発しているプロセスがまさにプロトタイピングそのものなんです。   一人でできることが限られているからこそ、チームでのコラボレーションを   ――チームでのコラボレーションの重要性に関して、どうお考えですか？ やっぱり一人でできることってすごく限られているなと思っています。チームメンバーひとりひとりがプロ意識を持っているからこそ、皆それぞれの視点でぶつかり合って、意見を出し合って、結果的にそれぞれの職種の視点が取り込まれたいいものができるんです。 色んな人の視点を入れてコラボレーションするっていうことがプロダクト作りにおいて本当に大切だなと思っています。   ――Prott導入後、チーム内で変化する点はどういうところにあるのでしょうか？ チームでProttを使うことで、プロトタイピングのマインドがついてくるので、無駄な議論が減りやすくなりますね。 プロトタイピングでは、動くものを共有できるので、言葉や絵で共有するよりも伝えられることが多いんです。そのためメンバー間での認識齟齬が減り、チームでは論点が明確な議論ができるようになった、という話もたくさん聞いています。   ――実際どういった方々がどういう場面でProttを使われているのでしょうか。 現在は、日本国内のIT企業で多く導入していただいています。 多くの場合は現場のデザイナーさんが主導でProttを導入を希望してくださり、そこからProttを使って共有することでエンジニアの方もプロトタイプを通してコミュニケーションをするといったケースが多いですね。 最近では、営業の方が提案資料をより魅力的なものにするために、アイデアを形にするためにProttを使用していただくことも増えてきました。職種を超え、誰でも簡単に使えて、アイデアを形にして議論できるというのがProttの良いところだと思います。   ――個人で使用されている方々の使用用途はどういうものがあるのでしょうか。 最近増えているフリーランスの方がクライアントと共有するために使用するケースも多いようです。 あとは、UIデザインの勉強のために使っていただくことが多く、多摩美術大学の学生さんにも授業で使っていただいています。 先日は、女子大生社長として有名な椎木里佳さんが好きなアプリとして取り上げてくださっていましたね。授業中に思いついたアイデアスケッチを写真に撮り、Prottにアップロードしてメンバーに共有しているそうです。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
インタビュー

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

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。   プロトタイピングの概念そのものは、インターネットの成立以前から存在していました。典型的な例として、新しい製品を開発をする人々は最初に製品を組み立て、次に製品が期待した通りに作動するか試します。 最初のバージョンで特許を取得して、潜在的な投資家に製品を見せることもあるかもしれません。もし投資家が独自の生産ラインの設備を利用できるとしたら(例えば既存の会社で働いているなどの理由から)、製造可能なレベルのモデルが完成するまで、製品の開発が進められて、バグの修正も行われます。   昔のデモディスクを覚えていますか？ 機能の制限されたプログラムが入っていたり、ゲームの初歩レベルあるいはゲームが2つだけ入っているようなディスクのことです。プロトタイプはデモディスクと似ている点が多くありますが、よりシンプルでさえあります。 Webサイトやアプリのプロトタイプを作成するのは、期待した通りに作動するか確かめるためです。 プロトタイプの目的は、将来の顧客の獲得というよりも、より良い製品を作るのに役立てることです。 Webサイトやアプリのプロトタイプは、製品が期待通りに作動するか確かめるために作成します。またクライアントや潜在的な投資家に製品の作動を示すこともできます。   最近では、Webとモバイルアプリ用のプロトタイプ作成アプリが多数登場しています。 最近リリースされたデザインツールのAdobe Experience Designerは、Webとモバイルに対応したデザインアプリとしての機能と、プロトタイプ作成用のアプリとしての機能が融合されています。 Adobe社の知名度とプロ向け製品における市場シェアを考えれば、多くの人々が今まで以上にプロトタイプを実践し始めているのも当然かもしれません。   今回の記事は初心者向けのガイドです。デザイン業界でどのような経験を積んできたかにかかわらず(あるいは未経験でも)、プロトタイプを日常的に使い始めた方向けに書いています。 このガイドでは何よりもまず基本的な原則を説明します。もちろんその後に発展的な情報として、役立つツールやアプリをリンクとともにご案内します。   ワイヤーフレーム＆モックアップ VS. プロトタイプ デザイナーとしての経験が豊富な方は、すでにワイヤーフレームやモックアップを編集で利用しているかもしれません。ただ、これらは必ずしもプロトタイプとはいえません。 ワイヤーフレームやモックアップで問題なのは静的なことです。製品の機能についての多くの情報を伝えることができないのです。このため、製品の動作性についてクライアントやデベロッパーに誤解を与えるおそれもあります。こうした理由から、プロトタイプとは一般的に、何かインタラクティブな要素を持つものと定義できます。 ただし、例外的に静的なものにもプロトタイプと見なせるものもあります。 例えば、概念的なプロトタイプや、詳細に作成された設計書などです。重要なのは単にインタラクティブであることよりも、製品に期待される機能について情報を伝えられることだからです。 それでもやはり、ワイヤーフレームやモックアップは単にプロトタイプの作成によく使われているという理由だけで、誰も捨てようとはしません。   いつプロトタイプが必要になるのか？ 何かがどのように作動するかを示す必要があるときにはいつでも、プロトタイプが必要です。 わかりやすい例は、Webアプリやモバイルアプリです。アプリは、モックアップでは簡単に見たり予測したりできない機能を数多く持っている傾向があります。コンテンツ中心型の静的なWebサイトでさえプロトタイプを必要とするかもしれません。 1つの理由として例を挙げると、私は以前クライアントにシンプルなビジネスサイトのモックアップを見せたときに、クライアントから「トップページにある「概要」や「サービス」などをクリックしたら別のページに移行するのか？」、「コンタクトフォームでユーザーが「送信」をクリックしたら、私はメールを受信することになるのか？」と聞かれたことがあります。 シンプルなタスクでさえ不確実性を伴うことがあり、プロトタイプは当て推量を解消するのに役立ちます。 また、簡単なブラウジングの操作さえ、ユーザーやクライアントによってはわかりづらくて大変な作業となりえます。プロトタイプがあればネットワークからサインオフするときにも、当て推量する手間を省くことができます。 加えて、プロトタイプはユーザーテストに役立ちます。ユーザーテストを行うときには、初期段階からプロジェクトのシミュレーションを始めるのがベストです。作業がほとんど完了した後に大きな変更をしなければならない事態は避けたいところです。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中4種類のプロトタイプ プロトタイピングを始める前に、どの種類を使うか決めます。ほとんどのデザイナーたちが実践しているように、どのようなプロジェクトでも複数の種類を組み合わせて使うことができます。   1. 概念的プロトタイプ このプロトタイプは、形の上では完成した製品と全く似ていません。ここでインターフェースのディテールとレイアウトは重要ではありません。インタラクションとプロセスだけに集中します。 全てのプロトタイプの目的は製品の動作性を示すことです。その意味で、このプロトタイピングは原始的な形だといえます。機能性だけがテーマであり、形は問題となりません。 この段階では、フローチャート、ポストイットのメモ、PowerPointのプレゼンテーション、アイコンでプロセスを説明するビデオを使ったり、身振り手振りを加えてカメラに向かって録音してもいいでしょう。要点を伝えることができれば何でもいいのです。 概念的プロトタイプはプロジェクトの初期段階で使われます。プロジェクトにはまだ名前がないかもしれません。アプリやWebサイトもアイデアの段階なので、「こんな感じで作動すると思う。」と話しているかもしれません。   2. ローファイプロトタイプ ローファイプロトタイプでは、レイアウトやスクリーンのサイズなど具体的な対象を扱うようになります。このプロトタイプは、作られるのも破棄されるのもサイクルが速いです。 ローファイプロトタイプの目的は、あなたとクライアントが基本的な部分に満足できるまで、試行錯誤を最速で繰り返すためのものです。だからプロトタイプに愛着を持つべきではありません。ほとんどのプロトタイプは使い捨てであり、それこそが長所です。 「ローファイプロトタイプ」は「ワイヤーフレーム」とよく置き換えることができます。この段階では紙に書いて行うこともよくあります。 アプリでローファイプロトタイプを作成するときには、他のスクリーンへのリンクやコメントの機能など、基本的なプロトタイピングの機能を備えているものを使うことがおすすめです。ワイヤーフレームのアプリはインターネットとの連携が容易であるというメリットがありますが、やや動きが遅いことも多いです。 概念的プロトタイプと同じくプロジェクトの初期段階で使われますが、ビジネスモデルやプロジェクト名はすでに存在している段階でしょう。上手くいくと確信できるものが持てるまで、頭の中で思いつく無数のアイデアをえり分ける時です。   3. ミディアムファイプロトタイプ 段階によっては、ローファイプロトタイプでは要点を把握しにくい一方、ハイファイプロトタイプでは十分過ぎることがあります。スタイルガイドを完全には作成していなかったり、まだグラフィカルアセットを全て作り終えていない段階です。 ミディアムファイプロトタイプは、このようなデザインの初期～中間の段階で使うことができます。インタラクションのシミュレーション機能を持つプロトタイピング作成アプリによって作られることも多いです。CSSのフレームワークを利用して、HTMLとCSSによって構築することもできます。 BootstrapとFoundationが、現在存在しているプロトタイピングのツールの中ではおそらく主流です。 有名ブランドのイメージがあればそれを使うべきですが、ストックイメージでも足りるでしょう。ストックタイプのUIエレメントは、模作のインターフェイスをより速く構築するために使われます。プロトタイピング作成アプリの多くは、これらのUIエレメントのライブラリを持つことが多く、作業の高速化に役立ちます。 ミディアムファイプロトタイプは、リテラル思考型(Literal thinker:全体的なイメージよりも、具体的なステップや言葉の定義から考えるような人)で外観や動作の近似を見たいと思うような人に向いています。彼らにとっては、「未完成」のヘッダーの方が、Webサイトのヘッダーに全く見えないようなスケッチ風の代物よりも、まだ耐えられます。 リテラル思考のクライアントには、ワイヤーフレームで素早く考えた初期のアイデアを見せる必要はないでしょう。ミディアムファイプロトタイプの段階で見せる方が、彼らに方向性を分かってもらいやすいです。   4. ハイファイプロトタイプ この段階までプロジェクトが進むと、全てのスクリーンのモックアップが完成していて、全てが立派なものになっているでしょう。製品をバックエンドのコードと統合して、人々に製品の動作性を見てもらう時です。 ハイファイプロトタイプは通常、デザインに関する最終的な合意をクライアントと結ぶために使われます。ただのPSDファイルを送るだけれはなく、インタラクティブなものを提示しなければなりません。 2つの方法のうちいずれかによって行われます。1つの方法では、静的なHTMLとCSSを利用して、一部をインタラクティブな外観に仕上げます。もう1つの方法では、画像やPSDのファイル形式をインポートできるアプリを利用して、擬似インタラクティブな特性を加えることで完成品のアプリ（製品）の機能を模倣します。 アプリによっては、プロトタイプのデモをWeb上(またはモバイルデバイス上)で行うことも可能です。   プロトタイピングのメソッド プロトタイプの主な種類を見たところで、次にプロトタイプを実際に作るためのツールをご紹介します。基本的な使い方も含めてすでにほとんどご紹介していますが、さらに詳細を見てみましょう。 あなた自身とクライアント双方にとって適合するメソッドを選びましょう。   ビデオまたはプレゼンテーションのプロトタイプ これらは具体的な作業がなされる前に、アイデアを売るためによく使われます。そのため通常は、潜在的な投資家を意識したものです。 クライアント向けにも使えますが、他の代替手段の方が効率的なコミュニケーションを図るには優れていることも多いです。アドバンテージは人によって異なるでしょう。 ビデオとプレゼンテーションのプロトタイプで、利益率を上げるために作られたものは商業型の公式に従います。 聴き手が共感できる問題を提示する。 あなたの製品によってその問題がどのように解決されるかデモを示す。 (オプションとして)会社のマスコットをデジタル形式で表現して、キャッチフレーズを叫ばせながら楽しそうにダンスさせる。 これらのプロトタイプの中にはアイコン、テキスト、イラストレーションを使うだけで完成するものもあります。他にはアニメーションを利用して、要点を説明するのに動きを使うこともあるでしょう。あなたのアイデアを売ることができれば、正しく使いこなせているといえます。 ビデオのプロトタイプと紙のプロトタイピングを組み合わせた良い例をご紹介します。Video Prototype for Mobile Cooking App : Youtube動画より   ワイヤーフレーム ワイヤーフレームは紙面上かアプリにおいて作成できます。ワイヤーフレームは通常ローファイプロトタイプと見なされていますが、時間をかければミディアムファイプロトタイプにアップグレードすることも可能です。もっとも労力をかけるだけの価値はほとんどありませんが。 ワイヤーフレームは、作成されるのも破棄されるのも速いです。紙面上でワイヤーフレームを作成することが魅力的である理由の1つです。アプリでワイヤーフレームを作ると、より正確なデザインが可能となり、既存のワイヤーフレームから簡単に編集することもできます。しかし、あなた自身以外には誰も見ないであろうスケッチを速く作成できるという点が、やはりワイヤーフレームの長所として一番優れています。 しかし、すで述べたようにアプリでワイヤーフレームを作成すると、より簡単にインターフェースの機能を模倣できるというメリットもあります。紙面上に作成したワイヤーフレームをタップしたところでトントン音が鳴るだけですから、面白いかもしれませんが、あなたの意図するところを伝えることはできません。   紙のプロトタイプ これはただのスケッチではないという点で、紙面上のワイヤーフレームとは異なります。紙を利用するのは、物理的でフラットな素材でインターフェースのモデルを作るためです。先にご紹介したビデオのプロトタイプにもその例を見ることができます。 インターフェースの要素は、紙にスケッチして、カットして作ります。コピーして予備を作ることもあります。そして作ったピースを他の紙の上に集めます。 ある要素のサイズが間違っていれば、他の要素の並びを変えたり、新しいサイズの要素を紙をカットして作るなどの方法があります。 またワイヤーフレームより「本物」らしいといえます。特に面白さはないとしても、クライアントは紙のモデルを触ることができます。この触覚に訴える方法はクライアントに多くを説明できるので、他のどんな方法より優れていることもあります。 誰でも対象をより深く理解するためには、物理的なコンタクトが必要です。UXデザインの半分は、物理的なインタラクションの使い心地を、デジタルのインターフェースで作り直す作業であるといえます。   アプリで作成するミディアムファイおよびハイファイプロトタイプ これらは紙のプロトタイプとの共通点が多いです。以下でご紹介するInvisionなどのアプリで作成するプロトタイプは、あらかじめデザインしたインターフェースの要素をもとに作り始め、これらのピースを集めて完成品を模倣します。 異なる点は、全ての作業がスクリーン上でなされることです。完成製品のグラフィック作成やブランド化も可能であり、プロトタイプであっても完成製品のように作成することができます。その次はすでに述べたことですが、アプリによって製品のデモをブラウザやモバイルデバイス上で行うこともできます。 また手で触れて感じることも可能になります。クライアントの触覚に訴えることで、もし気に入ってもらえれば、最終的な承認を得たも同然です。   コード もちろんインタラクションを必要とする場合には、インターフェースのプロトタイプをコードで作るのがいい方法です。その理由もご紹介します。 あなたのワークフローによく合う(とにかくブラウザ上でデザインするような場合)。 作成するサイトやアプリに、ボタンなどのインタラクティブな要素が多数存在している。 製品作成の最終段階でプロトタイプのコードを利用すると、時間の節約になる。 インターフェースの機能性のデモを、アプリを使わずにブラウザ上で実行したい。 あなたがキーを押すのが好きで、クリックするのは嫌いである。 ブラウザ上でプロトタイピングを行うと、特に修正版を作成中はやや時間がかかります。製品の初期段階ではおすすめしません。ミディアム～ハイファイプロトタイプで使うのがベストです。 すでにHTMLやCSSで作業を進める方法を好んでいるとしたら、完成間近のプロジェクトを提示するには最良の方法の1つです。   フレームワークによるプロトタイピング フレームワークを利用すると、コードを使ったプロトタイピングのスピードを相当上げてくれます。さらに、完成製品用のフレームワークを利用するとしたら、コーディングの量も少なくて済みます。 補足として、BootstrapやFoundationのような人気の高いフレームワークを利用して構築された、ドラッグ＆ドロップ形式のWebページ用エディタもあります。これらを使うことで、ローファイプロトタイプからコードを加えた完成製品まで全て作ることができます。 または、これらをプロトタイプを速く作る目的だけに使い、プロジェクトの最終段階ではカスタマイズしたコードを使う方法もあります。どちらの方法でも上手くいくでしょう。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。
アプリデザイン

在宅でできる副業おすすめ職種20選【月5万円稼ぐ方法】

「スキマ時間で稼げる副業はないかな…？」 「どうせなら在宅でできる副業はないかな…？」 「スキルを身につけながら稼ぐことはできないかな…？」   この記事では、在宅でできるおすすめの副業20選を紹介し、選び方、副業をする上での注意点まで解説しています。 今の会社の収入だけでは満足できていない人 会社に出勤するのが無駄だと思っている人 そんな人に向けて書きました。   この記事を最後まで読めば、あなたにぴったりの副業が見つかるでしょう。   目次新規アカウントを取得するプロジェクトの作成スクリーン画像のアップロードスクリーンからスクリーンへのリンクを作成するシェア機能・サポートの使い方 副業で特におすすめなのはIT系の副業です。 習得に時間と労力はかかるが、しっかり力をつければ安定して稼ぐことができます。 プログラミングは今後必要とされるスキルですので、副業を機会に始めてみるとよいでしょう。 難しい印象がありますが、意外と楽しく感じる人も多いので、まずはIT系の副業について勉強してみるのがおすすめです。 プログラマー Webサイト制作 Webデザイン プログラミングで副業したい人向けに、未経験から副業プログラミングで稼ぐ方法を解説した記事もあります。 ぜひご覧ください。   1 在宅でできる副業20選 在宅でできる副業にはどのようなものがあるのでしょうか。 現在人気の副業を中心に、それぞれの特徴をまとめました。 また、スキマ時間で毎月一定収入を稼ぎたいと考えている方向けに、「現実的に副業の範囲で5万円稼げるのか」という点についても説明しています。 1.1 Webライティング Webライティングは、クライアントが指定した内容やテーマに沿って、記事を執筆する仕事です。 Webメディアをはじめとする、様々な媒体でニーズがあり、ブログや商品紹介ページの作成、最近ではYouTubeの台本などの仕事もあります。   Webでの検索は今後も増加していく一方ですので、圧倒的に将来性がある副業だと言えるでしょう。 また、時間の確保さえできれば、毎月5万円を安定的に稼ぐことが可能です。 長期間継続し、文字単価を上げることができればより少ない時間で収入を得られるようになります。   向いている人 継続的にスキルアップし、専門性を高めていける人 記事を書くために多くのWebサイトや資料を読み込むため、情報収集が苦にならない人 様々な分野に興味を持つことができる人 タイピングに自信がある人 報酬体系 文字単価に、納品した記事の文字数を掛け合わせて計算する 1文字0.5円〜3円、1件あたり2000文字〜10000文字が相場 成果報酬型のため、案件を多く受けることができればその分収入アップにつながる クラウドソーシングなどのサイトを利用すれば、案件を受注し納品することで即収入が発生 メリット 日本語の読み書きができれば、特別なスキルがいらない 本業にも通じる文章作成能力が身につく デメリット ライバルが多く、案件が取りづらい可能性がある 案件が取れたとしても最初のうちは低単価で受注することも多くなる   1.2 ブログ 自分自身で開設したブログから収益を得る仕事です。ただし、記事を更新するだけでは収益が発生しません。   主に記事に外部企業の商品広告を貼り、そこから商品を購入したユーザーがいる場合に手数料が受け取れる「アフィエイト」と、Googleのバナー広告を掲載し記事がクリックされると報酬が発生する「Google アドセンス」という2つの方法があります。   Web広告の市場規模は年々拡大しているため、今後もニーズが増え続けていくでしょう。しかし、ブログアフィリエイターの30％以上が、ブログからの収入を得られていません。月5万円を稼ぐとなると、上位20％に入る必要があるため、安定的に稼ぐためのハードルはかなり高いと言えるでしょう。 参考：特定非営利活動法人　アフィリエイトマーケティング協会　「アフィリエイトに関する市場調査　2020年   向いている人 収益化するまで記事更新を継続できる人 「これだけは他の人に負けない」といった特定の分野に精通している人 報酬体系 アフリエイトの場合、広告を通して商品を1つ購入した場合に、商品価格の数％または一定額が支払われる 報酬額は商品ごとに異なり、1件あたり100円〜数千円 アドセンスの場合、1クリック30〜40円、PV数次第で収益が変わる 記事作成後、検索に反映されるまで3ヶ月ほどかかることがほとんどのため、収益化までは少し時間がかかる メリット P V数を増やす過程で、記事のライティングスキルや集客スキルが身につく 一度稼げるブログを作ってしまえば、何もしなくても広告収入が発生するため不労所得を得ることができる デメリット 競争が激しく収益化するまでに時間がかかる   1.3 プログラマー プログラミング言語を用いて、様々なシステムやアプリケーションを作成したり、動かしたりする仕事です。   基幹システムのサーバー構築や、既存システムの開発やテストといった業務内容があります。2018年の時点で、プログラマーのようなIT人材は約20万人以上不足となっており、2025年ではIT人材は36万人の不足と試算されています。   金融や家電、自動車など様々な分野においてI Tの活用が推進されていることも追い風になっており、かなり将来性がある職業だといえるでしょう。 参考：経済産業省　2019年　I T人材需給に関する調査   1案件あたりの単価が高く、スキルが身につけば短い時間で納品まで完了できますので毎月5万を安定して稼ぐことは可能でしょう。場合によっては1案件で数十万円稼ぐこともできるのがプログラマーの特徴です。 ただし、高額な案件を獲得するには、それなりの経験が求められます。 企業で3年以上の実務経験と向上心が必要になりますが、満たしていれば時給4,000円以上も視野に入るでしょう。   向いている人 プログラミングに必要な知識は日々アップデートされているため、常に新しいことを学んで行ける人 向上心があり、前向きに取り組める人 本業でプログラミングに携わっている人 報酬体系 プロジェクトごとに異なり、1案件あたりの単価は5〜10万円以上になることが多い 高い技術が必要とされるアプリケーション作成の場合には30万円以上となることもある 知識を得るために一定時間が必要とされるため、最低3ヶ月は収益が発生しない可能性が高い メリット プログラミング言語は一度覚えてしまえば様々な分野に応用可能なため、手に職をつけることができる ニーズが高く、案件に困ることがない 一般的にスキル習得難易度が高いと思われているが地道に継続すれば未経験からも習得できる デメリット 知識を取得するまでには一定時間を確保する必要がある 案件を獲得するには企業で数年の就業経験が必要   関連記事：【副業】プログラミング未経験から稼ぐ方法を徹底解説   1.4 Webサイト制作 ホームページやLP（ランディングページ）などのWebサイト制作をする仕事です。 主にプログラミング言語を用いてコーディングをすることがメインの業務となります。 現在、企業活動を行うにあたってホームページの設置は必須といえます。   ホームページからの集客を重視している企業も多くなってきていますので、今後も必要とされ続ける職種です。スキルアップのための地道な努力さえできれば、初心者であっても毎月5万を継続して稼ぐことは可能です。 後述するWebデザインとのスキルのかけ算で単価を上げることも可能です。   案件獲得の競争が激しいという一面はありますが、ポートフォリオ作る、低単価でも実績を積み重ねる、などの工夫をすれば月5万の収益を達成できるでしょう。   向いている人 必要な知識が日々アップデートされていくため、常に新しいことを学ぶことができる人 報酬体系 クラウドソーシングから受注する場合は、1ページあたり5000円〜が相場 Word Pressのテーマ制作やコーポレートサイト全体の設計などをする場合は10万円以上になる場合も多い 知識を得るために一定時間が必要とされるため、最低3ヶ月は収益が発生しない可能性が高い メリット アプリケーション制作やシステム構築を行う場合と比べてWeb制作に必要なプログラミング知識は少なくなっているため、学習を始めて収益化するまでのハードルはやや低い YouTubeの無料教材を利用したり、プログラミングスクールを利用したりすることで効率よく学べる環境がある デメリット クラウドソーシングなどのサイトでは案件数に対して応募者が多く、競争が激しくなる可能性が高い   関連記事：【副業】プログラミング未経験から稼ぐ方法を徹底解説 1.5 Webデザイン Web上に表示されるページの見た目に関する制作を行う仕事です。 Webサービスや広告用LP（ランディングページ）の作成など業務は幅広く、クライアントの依頼を受けて、使い勝手の良い魅力あるページ構成やデザインを考えることがメインの業務となります。 自社の魅力を世間によりよく発信するために、Webサイトにデザイン性を重視する企業が増えているため需要は高まってきているといえるでしょう。 スキルアップのための地道な努力さえできれば、初心者であっても毎月5万を継続して稼ぐことは可能です。 ポートフォリオを作る、低単価でも実績を積み重ねるなどの工夫をすれば月5万の収益を達成できます。 先述したWebサイト制作とのスキルのかけ算で単価を上げることも可能です。   向いている人 新しい技術を吸収することに喜びを見出せる人 デザイン以外の幅広い業務をすることに抵抗がない人 報酬体系 クライアントにより異なり、1案件数千円〜数万円と幅広い 企業向けの場合単価が高く10万円以上の案件も多くなる 知識を得るために一定時間が必要とされるため、最低3ヶ月は収益が発生しない可能性が高い メリット Web制作に必要なスキル全般が身につく デザインに関して顧客との折衝・調整を行うことも多く、コミュニケーション能力が身につく プログラミングやUI・UXデザインに関するスキルも身につくため、副業から本業へのシフトチェンジも視野に入れつつ、仕事に取り組むことができる デメリット 仕事の依頼を受けることができるレベルに達するまで、一定の学習時間を必要とする 関連記事：【副業】プログラミング未経験から稼ぐ方法を徹底解説 1.6 イラスト制作 ロゴ、名刺、アイコン、キャラクターなどのデザインをする仕事です。 クライアントからコンセプトや完成イメージの指示を受け、デザインをしていきます。LINEスタンプやキャラクターデザイン、図解やTwitterのアイコンなど、様々な分野でイラストが必要とされており、今後もニーズは拡大していくでしょう。   初心者でスキルやセンスがない場合、案件が獲得できず1ヶ月の売り上げが数千円で終わってしまうことも多いでしょう。スキルがあっても案件が単発で終わってしまうことも多いため、常に営業・集客をしていかなければ継続して収益を上げることは難しいのではないでしょうか。   向いている人 自分のデザインスキルやセンスに自信がある人 趣味として絵を描いたりデザインすることが好きな人 報酬体系 1案件数百円〜数千円とクライアントにより稼げる金額は幅広い 企業向け案件の場合単価が高くなる スキルさえあればすぐに稼ぐことができるが、1から始める場合やセンスがあまりないと感じる場合、収益発生までは数ヶ月〜1年以上かかる メリット 案件が多数あるため、自分にあった案件を見つけやすい デメリット 案件が獲得できるかどうかが各個人のスキルやセンスに左右されやすい 良い品質で納品するために、専用のソフトウェアや機器を用意する等、初期投資にある程度の費用がかかる   1.7 ネットショップ ネット上に店舗を開き、商品を販売する仕事です。 ネットショッピングの市場規模は年々拡大しており、将来性は高いといえます。 参考：経済産業省　　電子商取引に関する市場調査の結果   継続して売り上げをあげるためには、商品ラインナップや価格など、他の店舗と比べた優位性をアピールすることが必要になってきますが、大手と比べた場合、仕入れの面で不利になることも多いため、差別化をし選んでもらうショップにするためにはかなりの努力が必要です。 全くの未経験から始めた場合、月5万というのはかなり高いハードルとなるでしょう。   向いている人 普段からネットショッピングをよく利用している人 好きな商品ジャンルがある人 SNSのフォロワーがすでに多い人 報酬体系 商品の売り上げから仕入れにかかった費用を差し引いた分が利益となる 安く仕入れることができる先を確保できていれば、利益を出しやすい 商品がすぐに売れるとは限らないため、最低3ヶ月は売り上げが入ってこない可能性がある メリット 実店舗と異なり、人件費を極力抑えて物品の販売をすることができる プログラミングの知識がなくても店舗ページを開くことができるプラットフォームも充実している ハンドメイド作品を販売し固定のファンを獲得することができれば継続した売り上げを見込める デメリット 数ある他のショップと差別化をすることが難しく、SNSなども使って集客を行わなければ売り上げが見込めない   1.8 カスタマーサポート 企業へのお客様からの問い合わせに対して、メールやチャット、電話で対応をする仕事です。 稼働時間の確保さえできれば、安定した金額を毎月稼ぐことができるといえるでしょう。   向いている人 丁寧な顧客対応が求められるため、飲食店などの接客業やコールセンターでの勤務経験がある人 報酬体系 時給制となることが多く、1時間あたり1,000円〜1,500円が相場 働いた分だけ稼げるので、比較的早く収入を得ることができる メリット マニュアルに沿って対応をする形になるため、特別なスキルがなくても始めることができる デメリット 契約上毎週一定時間働くことが求められる クレーム対応をする場合、ストレスが溜まりやすい   1.9 データ入力・文字起こし エクセルやワードにデータを入力したり、動画や音声の内容を聞き会話内容を文字にして書き起こす仕事です。 企業内で使用する顧客リスト作成やプレゼン資料の作成、YouTubeの字幕作成といった作業があります。   1件あたりの単価が低いため月5万を稼ごうとすると、相当な時間を費やす必要が出てきます。 初心者でも手が出しやすい分、スキルアップが案件の獲得や単価アップに繋がりにくいため、副業として取り組む場合一定金額で頭打ちとなる可能性が高いです。月5万稼ぐのはなかなか難しいといえるでしょう。   向いている人 淡々と作業をするのが好きな人 タイピングのスピードに自信のある人 事務職での勤務経験がある人 報酬体系 1件あたり数百円〜数千円 クラウドソーシングサイトでよく用いられる「タスク形式」の場合、1件入力するごとに数十円 入力件数や文字数が多くなればなるほど、稼げる金額は増える 作業をした分だけ収益に反映するため、比較的早く収入を得ることができる メリット 特別なスキルが不要で、仕事を始めるハードルが低い デメリット 1件あたりの単価が低く、時給換算した収入が少なくなりやすい   1.10 コンサルティング 自分が詳しい専門の分野で顧客の相談や指導をする仕事です。 主な業務としてはクライアントの悩みを解決することになります。 人の数だけ悩みがあると言われますので、需要は無くならない仕事だといえます。 コンサルタントとしての実力があればリピーターを獲得できるため、月5万円を稼ぐことは容易です。 しかし、スキルに自信がない場合や中途半端なスキルしか持っていない場合、顧客獲得に苦労する可能性が高いため、安定して稼ぐことは難しいでしょう。   向いている人 既に本業を通じて専門的な知見を持っている人 結果にコミットするプロ意識の高い人 報酬体系 相談時間やコンサルティング後の業績など結果に対して、自身で設定した報酬を受け取る メリット 初期費用が不要で、今までの経験や知識を生かすことができる 単価が高い可能性がある デメリット 本業を通じた人脈形成やSNS・ブログなどを用いた集客、ブランディングができなければ案件が獲得できない 1.11 Webマーケティング Webサービスを用いて企業の業務支援や売り上げアップのコンサルティングをする仕事です。SNSの運用代行や広告・メルマガ配信代行、SEO対策などがメインの業務となります。   実力次第で稼げる金額が変わるため、人によって月5万円を稼ぐ難易度は異なりますが、これからWebマーケティングの勉強を始める人にとってはかなりハードルが高いといえるでしょう。   向いている人 自身でブログを運営し集客に成功している人 本業でWeb広告営業に携わっている人 本業でWebマーケティングに携わっている人 報酬体系 クライアントとの契約条件により異なる 一般的には成果報酬・月額支払い・一括支払いのいずれかで契約する メリット Webサービスを使って稼ぐスキルを磨くことができる デメリット 基本的に結果にコミットできる実力が必要となるため、案件を獲得するまでのハードルが高い   1.12 動画編集 あらかじめ撮影された動画を見やすくするために、カット作業やテロップ挿入をする仕事です。企業のプロモーション動画やYouTube、ウェディングムービーなど様々な分野で動画編集のニーズは高まっています。   高いスキルは必要とされないため、月5万円程度であれば比較的短期間で稼げる可能性は高いです。ただし、その分ライバルも多く今後案件が獲得しづらくなる可能性は高いでしょう。   向いている人 細かい作業をするのが苦にならない人   報酬体系 1件あたり5,000円〜数万円で、企業向け案件の場合単価が高くなる クラウドソーシングサイトでの募集が多いため、即収入につながりやすい メリット 自分自身でYouTubeやプレゼン動画を作る際に身につけたスキルが応用できる 一定レベルのスキル取得までにプログラミングなどと比べて時間がかからない デメリット 動画制作をするためのパソコンやソフトウェアに初期投資が必要   1.13 広告動画制作 映像・写真・イラストといった素材を加工・効果付けをして動画を作る仕事です。動画クリエイターと言われることもあります。企業向けの動画広告作成については市場が拡大しており、将来性がある分野となっています。 参考：サイバーエージェント　2020年国内動画広告の市場調査   動画制作の経験があれば、広告運用等も合わせて依頼されることもあるため、1件あたりの単価も高くなりやすく、月5万円は達成可能といえます。ただし、スキルがない状態では案件獲得が難しく収益化しづらいでしょう。   向いている人 動画制作に携わったことがある人 動画編集で一定の売り上げを上げている人 報酬体系 1件あたり数万円〜数十万円 企業向けの案件については単価が高い傾向にある メリット 汎用性の高い、本格的な動画制作のスキルを身につけることができる デメリット 動画制作をするためのパソコンやソフトウェアに初期投資が必要 スキルを身につけるまでに時間がかかる   1.14 写真撮影 写真販売は、自分で撮影した写真を、ネットショップやストックフォトサービスで売って収入を得る仕事です。プロのカメラマンであれば別ですが、素人が副業として行う場合、売れ行きの良い写真を狙って撮るのはかなり難しく、安定的な収入を得ることは期待できないでしょう。   向いている人 カメラが趣味の人 日頃からよく写真を撮る人 報酬体系 1枚数百円〜数千円で販売するのが一般的 ストックフォトサービスを使うと、販売価格から40～60％ほどの手数料が差し引かれる メリット 趣味を仕事にできる 始めるためのコストがほとんどかからない デメリット 売れる写真を撮るためには専門的な学習とセンスが必要とされる   1.15 ナレーション 企業の広告やアプリゲームに使用されるナレーションを提供する仕事です。 1件あたりの単価が低いだけではなく、募集されている案件の数も多いとはいえないため、月5万円を稼ぐことはなかなか難しいでしょう。   向いている人 声に自信がある人 声優系の学校に通っていた、声優の仕事経験がある人 報酬体系 1件あたり数百円〜数千円 主にクラウドソーシングサイトやスキル販売サイトで募集している メリット 趣味を仕事にできる デメリット 1件あたりの単価が低い 編集や録音をするための機材などの初期投資が必要   1.16 オンラインの家庭教師 英語やダイエット、ビジネスなど自分の得意なことをオンラインで教える仕事です。 副業として行う場合使える時間が限られてきますので、時間単価を上げることが必須になります。 スキルがあれば時間あたりの単価を高く設定することも可能です。   しかし、人気や実力がなければ顧客数に影響してしまうため、単価を上げることが容易ではなく、月5万まで稼ぐのは難しいといえます。また、参入障壁が低いのでライバルも多いでしょう。   向いている人 人に教えることが好きな人 報酬体系 スキル販売サイトで、1時間当たりの料金を設定し募集することが多い 1時間500円〜数千円程度 メリット 販売できるプラットフォームが多い デメリット 時間を切り売りするのでスケジュール調整が難しい 参入障壁が低くライバルが多い   1.17 Twitterの懸賞 Twitter懸賞とは、Twitterのアカウントを利用して応募できる懸賞・キャンペーンのことです。 後日当選が発表される形式の懸賞の場合、フォロワー数やツイート・プロフィール内容に注意を払うことで当選確率を上げることができます。 しかし通常の懸賞と同様、運の要素が強いため月5万を安定的に稼ぐことは期待できないでしょう。   向いている人 毎日Twitterを使っている人 報酬体系 1回の抽選ごとに商品または現金が当たる メリット 主催者が発信したツイートをリツイートするだけなので、ごく短時間で参加できる デメリット 転用可能なスキルが全く身につかない 見返りの有無が確率に左右される   1.18 フリマアプリ フリマアプリで不用品を販売して収入を得る方法です。 メルカリをはじめとするフリマアプリは多数リリースされており、ユーザー数も多いため、売るものがあれば即収入につながります。特にブランド品などは高く売れやすいため月5万円を稼ぐことは可能です。   しかし、売るものがなくなった時点で出品ができませんので継続的に収入を得ることができないでしょう。   向いている人 自宅に物がたくさんある人 報酬体系 アプリを使用する場合、商品売上金額から、1商品販売するごとにかかる10％程度の手数料を差し引いた金額が収益となる 即金性が高い メリット 既に自宅にあるものを売るためコストがかからず収益を上げやすい デメリット 一時的にしか稼ぐことができない 転用可能なスキルが全く身につかない   1.19 せどり・転売 ネットショップやリサイクルショップから安く商品を仕入れて、仕入れ額よりも高く販売することで差額を利益として得る仕事です。せどりには様々な方法があり、楽天ポイントを利用したり海外から輸入したりする方法などがあります。   仕入れ商品のリサーチから梱包、販売まで全て一人で行うため仕組み化することができれば短時間で月5万円を稼ぐことはできます。ただし、価格差が取れる商品を見つけ出すまで時間がかかることも多く、競争相手も多いため、軌道に乗せるまでは時間がかかるでしょう。   向いている人 特定分野の商品に詳しい人 流行に敏感な人 報酬体系 仕入額と販売価格の差が利益となる 出品手数料や送料を考慮して価格設定をする必要がある メリット 仕組みがシンプルな商売なので、安く仕入れることができれば特別なスキルがなくても始めることができる デメリット プラットフォームごとの転売規制によって売れる商品が変わる可能性がある ブランド品の偽物販売に関わってしまうリスクがある   1.20 ポイントサイト サイト内の特定の広告をクリックして商品購入や会員登録をすることで、報酬を得ることができます。 副収入がある男性会社員の22.3%の収入源は、「ポイント・アンケートサイト」で58.1%と最多となっており人気の仕事です。 参考：新生銀行　2019年サラリーマンのお小遣い調査 月5万円を稼ぐことは十分可能ですが、一度きりの案件も多いため継続して稼ぐことはできないでしょう。   向いている人 コツコツと単純作業に取り組める人 様々な企業に個人情報を提供することに抵抗がない人 報酬体系 広告ごとに決められた達成条件を満たすと収益発生 ポイントが貯まったら電子マネーや現金に交換可能なため即金性が高い メリット クレジットカード作成や口座開設などの高額案件に取り組めば、短期間で一定の金額を稼ぐことができる 特別なスキルがなくても始めることができる デメリット 誰でもできる仕事のためスキルが全く身につかない   2 在宅でできる副業のメリット・デメリット 在宅でできる副業にはメリットだけではなくデメリットもあります。 事前に理解しておくことで、自分に合った副業を見つけることができるでしょう。 2.1 メリット 在宅でできる副業のメリットは3つあります。 それぞれ詳しく説明します。 2.1.1 メリット1　仕事内容や付き合う人を選べる 副業で稼ぐためには、自分自身の得意分野を生かして仕事をすることが重要です。 苦手なことには時間をかけず、得意なことに集中することで限られた短い時間の中で成果を上げられます。 会社で働く場合と異なり、取り組む仕事については自ら取捨選択する姿勢が大切です。 また付き合う人を選ぶことができますので、人間関係で余計なストレスを抱えることも少なくて済みます。 2.1.2 メリット2　本業以外のスキルが身につく 副業に取り組む過程で、本業以外の実用的なスキルを身につけることができます。 副業にもよりますが、成果報酬として1件あたりの対価が設定されていることがほとんどのため、必然的にスキルを身につけることになります。 対価をもらいながら学ぶことができますので、学習のアウトプットの場としても最適です。 会社に頼らず自力で稼ぐ力を身につけたい、独立しても通用するスキルが欲しい、という人にとって副業は有効な手段となるでしょう。 2.1.3 メリット3　時間と場所に縛られず仕事ができる スマホやPCが1台あれば、基本的に時間や場所に関係なく作業ができます。 通勤時間がないのは、精神的にも体力的にも楽だと感じる人は多いのではないでしょうか。 また、通勤時間がなくなることで空いた時間やスキマ時間で作業を進めることもできるためより効率的に稼ぐことが可能です。 2.2 デメリット 在宅でできる副業のデメリットは3つあります。 2.2.1 デメリット1　自己管理力が必要 体調や納期管理、営業や案件の管理など基本的には全ての作業を一人で行う必要があります。 無理をして体調を崩してしまったり、急なトラブルが発生して納期に間に合わないという事態が発生した場合、各方面に迷惑をかけることになります。 基本的に余裕を持ってスケジュールを組み、仕事に取り組むことが重要です。 2.2.2 デメリット2　孤独感を感じることが多い 仕事の性質上、一人で作業する時間が多いため、孤独感を感じることが多くなるでしょう。 一人で作業をするのが苦手で、和気あいあいと仕事をしたい人にとっては厳しいかもしれません。 2.2.3 デメリット3　トラブルに巻き込まれる可能性がある 仕事の選び方次第では、トラブルに巻き込まれてしまう可能性があります。 副業はあくまで自己責任で行うため、万が一トラブルが発生した場合も自分自身で全て対処する必要があります。   特に、「簡単・高収入」を謳った副業詐欺には注意しましょう。 稼ぐどころか、高額な教材を買わされてしまったり、気付かない間に犯罪に加担してしまう可能性もあります。 仕事を受ける場合には依頼先の情報や業務内容を慎重に確認し、問題ないか見極める力が必要です。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中3 在宅でできる副業の選び方 数ある副業の中でどの副業を選ぶのが良いのか、選び方についてまとめました。 3.1 目的に合わせて選ぶ なぜ副業をするのか、副業に対して何を求めているのかを明確にして取り組むことで効率よく稼ぐことができます。 以下のように目的に合わせて選ぶことが有効です。 「短期間で一定金額を稼ぎたい」：即金性の高いもの 「無理なく空いた時間を有効活用したい」：作業負担が少なく手軽にできるもの 「本業で足りない生活費の確保」：1ヶ月に稼げる金額が明確なもの 「将来の独立・起業のためスキルアップしたい 」：汎用性の高いスキルが身につくもの 3.2 最初はリスクの小さい副業を選ぶ 副業を始める際、元手がかからないものを選ぶことは重要です。 特に本業と異なる分野の仕事に取り組む場合、自分にあった仕事かどうかはスタートしてみるまでわからないことが多いです。   もし自分に合わないと判断した時に、コストをかけず始めていればすぐにやめて違う仕事をするという選択ができます。初期投資の額が大きいと、投資額を回収できなくなる可能性も高いです。   稼ぐために始めた副業で収益を上げられなかったり、負債を抱えてしまったりすると、精神的な負担が大きくなり本業にも悪影響が出てしまいます。プログラマーやWeb制作、WebデザイナーといったIT系の副業であれば、いずれも初期費用を抑えて低コストで始めることができます。 3.3 自分スキルになるものはおすすめ どの副業が良いか迷った時には、自分自身にスキルが身につく副業を選ぶのがおすすめです。 時給で働く場合やスキルが身につかない副業を続けると、時間の切り売りをするばかりで、一時的には稼げるかもしれませんが、将来的な収入アップは望めません。 副業でスキルアップができると、より高単価の案件を受注することで収入を上げていくことができます。 また、副業に取り組む中で自分の可能性に気づき、本業での成果につながったり、転職をするきっかけとなったりすることもあります。 スキルを身につけることができる副業としては、プログラマーやWeb制作、WebデザイナーといったIT系の副業がおすすめです。 今後も需要が高い分野ですので、一度スキルを身につければ再現性高く稼ぐことができるでしょう。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
副業・フリーランス

作業を円滑に！エンジニアとデザイナーが衝突しない秘訣とは

本稿は、UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。記事は、エンジニア、Webデザイナー、ペンシルバニア州立大学の助教授であるJames Stone氏によって投稿されました。   プロジェクトをタイトなスケジュールで進めるときには、共同作業は困難を極めます。 デザイナーとエンジニアの意見を一致させるのは、非常に大変です。 もし彼らが同じプロジェクトで、Webサイトを公開しようとすれば、オフィスの中は戦争状態と化すかもしれません。   では、デザインを素早く完璧にこなし、かつ世界に通用するレベルのWebサイトを構築するにはどうしたらいいでしょうか？ この記事では、プロジェクトの共同作業における問題を解決するためのアドバイスを紹介します。すべてのアドバイスは、私が過去10年間にWebデザイナーおよびエンジニアとして経験してきた成功と問題から引き出したものです。   目次 グリッドシステムをレスポンシブデザインで設計する ピクセルパーフェクトなデザインを実現できるツールを使う Photoshopの代替ツールを考える 値を統一する プロトタイプを使った共同作業をする デスクトップファーストの手法を排除しないこと アセットの引き継ぎには十分注意を払う   1. グリッドシステムをレスポンシブデザインで設計する グリッドシステムはすでにご存知かもしれません。私がエンジニアとしてデザイナーと共同作業をしたときに直面した問題は、グリッドシステムをレスポンシブに設計するスキルが、デザイナーたちに不足していたことです。   グリッドの幅を具体的に設定する まず技術的な話から始めましょう。最初に、グリッドの幅は具体的な数値で設定し、各グリッドごとにガターのサイズも正確に把握します。こうしておくことで、デザインに統一感が生まれ、またくり返し微調整する手間も省けます。 開発チームへグリッドシステムを引き継ぐときにも、数値は正確に揃えておきましょう。もしパディング（padding）を15ピクセルで設定したら、厳密に15ピクセルになっていなければなりません。グリッド全体の幅を1000ピクセルで設定したときも、厳密に1000ピクセルです。 レスポンシブデザインとは、あらゆるデバイスやシステムにおいてWebデザインが柔軟に機能することを意味しますが、最初の数値設定は厳密に行う必要があります。   デザイナーは、モバイル端末上の表示もチェックすること モバイルビュー デザインを美しく仕上げても、それで完成ではありません。モバイルビュー（モバイル端末上の表示）も忘れずにチェックしてください！ もしデザイナーがモバイルビューをチェックしなければ、エンジニアはデザインの意図を汲みながら、モバイル端末上でも上手く作動するように、すべて一人で設計しなければなりません。私はエンジニアとして、こういう状況によく遭遇します。 デザイナーも、グリッドシステムをレスポンシブに設計する方法について、よく理解しておくべきです。 プロジェクトの共同作業を円滑に進めるためには、デザイナーは、デスクトップ版からモバイル版へ移植するときの各要素の並べ方（mobile stacking order）も考えておくといいでしょう。 また時間に余裕があれば、モバイルビューのモックアップを作成しておくと大いに役に立ちます。完成製品のデザインをイメージしやすくなります。   互換性の問題 デスクトップ上で作成したグリッドシステムは、モバイル端末上では上手く機能しないこともあります。たとえば、サイズの大きい要素は、モバイル版のサイズに上手く縮小されないことがよくあります。 デスクトップとモバイルのインターフェース間では、このようにデザインの互換性の問題が起こることがあり、タイムラインを示すUIの要素（timeline UI element）にも見られます。 デスクトップ上では問題なく表示され、時間軸上の各ポイントも見やすいデザインです。しかしモバイル端末上では表示が崩れることがあります。 デザイナーは、こうした問題を自力で解決する必要があります。そうでなければ、エンジニアにデザインの意図を誤解され、予想もしなかったようなおかしなデザインが生まれるおそれがあります。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中2.ピクセルパーフェクトなデザインを実現できるツールを使う ショックを受けてほしくないのですが、Photoshopは現代的なWebサイトを構築するのに適したツールとはいえません。 私はエンジニアとして、Photoshopで作成されたモックアップを渡されることがよくあります。残念なことに、Photoshopで作られたモックアップは、エンジニアがWebサイトを構築するときには問題となることがあります。Photoshopでは、エンジニアが必要とするレベルの精度と正確さを実現できないからです。   フォントの整合性 第一に、PhotoshopとWebの間で、フォントの整合性が保たれる保証はありません。 Photoshopのファイル形式でデザインされた文字は、Web上で表示が崩れてしまうこともよくあります。文字がより太くなったり、全く異なるデザインになっていたりするのです。オープンソースのフォントでさえ、Photoshopで編集すると、Web上で表示が変わることがあります。 デザイナーは、ウェイト（太さ単位）を基本にして、フォントの調整を行うべきです。 スクリーン上での表示を基本にしてフォントの調整を行うのは、良くありません。Webを構築したときに、デザインが歪んだり劣化する原因になるおそれがああるからです。   パフォーマンスの問題 ピクセルパーフェクト（px単位の正確な設計）が重要なのは、他にもデザイナーがWeb用に作成するPhotoshopのファイルには問題があるからということも理由の1つです。 その1つの例がドロップシャドウです。 Photoshopは高機能なドロップシャドウなどを備えています。デザイナーは、シャドウ、マスクなどのデザイン効果を柔軟に使いこなすことができます。しかし、エンジニアがこれらのデザインをWeb用にコーディングするときには、使える選択肢がかなり限られているのです。 また、エンジニアがWebサイトのフロントエンドの開発をするときには、パフォーマンスを非常に重視します。 スタイリッシュなUI要素を表現するために、24bitの半透過または透過のPNG形式のサイズの大きい画像などを使うとしたら、Webサイトの読み込みに時間がかかります。もしこのような要素が100個あれば、100倍の時間がかかり、Webサイトの動きは非常に鈍くなります。   解決策の1つは、ドロップシャドウを使う代わりに、CSSでコーディングすることです。 CSSを使うと、ドロップシャドウの他にも多くのデザイン効果を表現できます。もしエンジニアがCSSを使えるなら、Web上にPNG形式の画像を埋め込む代わりに、CSSを使うべきです。 軽量なデザインが可能となり、要素のサイズを小さくすることができるというメリットがあります。しかしデメリットもあり、CSSで作ったタイポグラフィやドロップシャドウは、元の画像と全く同じデザインに仕上げることはできません。 2つの画像のうち、上が透過のPNG形式の画像で、下がSVG形式の画像です。 見た目はほとんど同じですが、画像のサイズはPNG形式は12.3kもあるのに対して、SVG形式はわずか1.7kです。SVG形式の場合、シャドウをデザインするときには、ディテールの調整、ブレンドモードによる色の変更なども、完璧に行うことができます。 一方、透過のPNG形式だと、画像の背景色を変更するときに、背景色がアルファチャンネルのデータ領域ににじんでしまって、他の要素の周りに光の輪がついたように見えることがあるのです。   Photoshopの代替ツールを考える あなたがどのようなツールを選ぶとしても、PhotoshopがWebデザインのツールとしては最適な選択でないことは明らかです。たとえば私は、Bohemian Coding社の開発したSketch 3というデザインツールを使っています。 今のところSketchにはバグや問題もあるのですが、デザインの整合性を保つためには非常に優れたツールです。 まず、px単位で厳密に行う設計なデザインを素早く簡単に行うことができます。フォントやドロップシャドウも、CSSでコーディングするのと変わらない出来栄えです。 Sketchには、作成したデザインからCSSのコードを取得して、コピー&ペーストで利用できる機能もあります。そのため、一度デザインしたものを、最終的にHTMLやCSSでコーディングし直す必要もありません。   ピクセルパーフェクトなデザインを可能とする現代的なツールを使えば、デザインの意図を完成製品に反映することが可能です。プロジェクトのメンバーの仕事の負担軽減にも大いに役立ちます。 より詳しい活用方法をご紹介すると、私は各レイヤーのプロトタイプを作るために、Sketchで作成したモックアップをインポートして共有しています。こうすることで、同じチームのエンジニアはデザインの見た目だけではなくて、デザインの動作性も知ることができます。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、
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] UI/UXデザインで挫折しない学習方法を動画で公開中ECサイトでのロングスクロール ECサイトではロングスクロールは頻繁に使用されます。ユーザーは製品のリストや検索結果を、中断することなくスクロールして閲覧し続けることができます。 ただしユーザー満足度を向上させるためには、いくつかの一般的な問題に対処する必要があります。 ナビゲーションとフィルタをスティッキーに フィルタリングが適切に行われていると、ユーザーは何千ものWebサイト内の選択肢をニーズに合った数少ない項目に絞り込むことができます。ナビゲーションメニューとフィルタオプションを持続的に表示することで、ユーザーがコンテンツをうまく管理することができます。   それぞれのアイテムをブックマークできるようにする 後々参照できるように気になったアイテムを簡単にブックマークしておける機能は、ユーザーにとって強力なツールです。   条件に一致したアイテムの数を表示する 利用できるアイテムの数を表示することで、ユーザーはフィルタリングによる結果内容のスクロールにかかる時間を判断することができます。   フッターにアクセスできるようにする ユーザーはフッターの概念を理解しており、そこにWebサイトの大事な情報があると思っています。 しかし、ロングスクロールではフッターの閲覧が困難なことがあります。ページの下に行くと新しいアイテムが継続的に読み込まれ、フッターは見えないところに押し込まれます。この問題は深刻なもののように思われますが、「もっと見る」ボタンを利用することで解決できます。 この手法では、コンテンツはオンデマンドで読み込まれることになります。新しいコンテンツは、ユーザーが「もっと見る」ボタンをクリックするまでは自動でロードされません。これによってフッターに簡単にアクセスできるようになります。   ロングスクロールと視差効果 インタラクションデザインはロングスクロールを使ったWebサイトの基礎であり、アニメーションはその中でも欠かせない部分です。 Web上でのユーザーの注目のスパンが約8秒であることを考えると、楽しいスクロールは注意を引きつける時間を引き伸ばすことができると言えます。閲覧者を喜ばせるアニメーションのひとつに視差効果があります。 視差スクロールでは背景画像は手前のコンテンツよりもゆっくりと動き、深みと没頭の錯覚を作り出します。この効果によって画面の立体感が増します。   パララックススクロールをどんなときに使うか 視差は大きな印象を与え、訪問者がもっとスクロールしたくなるなる面白い視覚効果です。ユーザーをあっと言わせたいときに便利な手法になります。 パララックススクロールは、ガイド付きの物語形式で効果を発揮します。 ストーリーをスムーズに直線的に伝えたい場合、視差効果とロングスクロールを組み合わせることによってユーザーは閲覧を実体験のように夢中になって楽しむことができます。 The Boatでは、画面がスクロールされると次のコンテンツのパスを作成しながらアニメーションによって閲覧者を次の場面に導きます。スクロールの動作はより楽しいものになり、ユーザーは「次はどうなるんだろう？」とワクワクするでしょう。   パララックススクロールを使うべきではないケース 多くのユーザーがはっきりしたタスク(製品の購入など)を目的としている場合は、パララックススクロールは使用しないでください。もし製品を購入するたびに視差効果を見せられるAmazonがあったら、どれだけフラストレーションがたまるか想像してみましょう。   パララックスとページパフォーマンス 視差効果を使用するWebサイトの多くは、スクロールのパフォーマンスに苦しんでいます。iPhoneのような高画素のデバイスでは特に害のあることです。 すべてのパフォーマンスの問題を完全に解決することはできませんが、簡単な手法でスクロールのパフォーマンスを向上させることができます。 ブラウザのアニメーションにはtranslate3d・scale・rotation・opacityといった手軽なプロパティのみを使用してください。 大量の画像をアニメートしたり、劇的にサイズを変更させたりしてはいけません。ブラウザに画像(特に巨大なもの)をリサイズさせると、コストがかかる可能性があります。 一度にたくさんのものをアニメートしないようにしましょう。   パララックスとアクセシビリティ 前庭機能障害を持つユーザーが、そのWebサイトを使用したとき視覚的にどのようになるかを考慮しましょう。アニメーションによって目まいが起きる可能性があります。 Val Headはより安全なアニメーションをデザインする方法として、もしWebサイトに大量の動きがある場合はモーションをオフにするオプションをつけることを推奨しています。 ボタンあるいはトグルスイッチを使用して、Webサイト上のアニメーションを減らしたり消したりできるようにします。このアイデアの研究のために、Nat TarnoffはどのWebサイトでも使用できるトグルスイッチのプロトタイプを開発しました。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。
Webデザイン

JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 目次新規アカウントを取得するプロジェクトの作成スクリーン画像のアップロードスクリーンからスクリーンへのリンクを作成するシェア機能・サポートの使い方 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでオセロゲームを作成する方法について詳しく説明していくね！ 大石ゆかり えっ？オセロゲームを作るなんて、難しそうですね、、、 田島悠介 大丈夫！1つ1つの処理を丁寧に解説するから、一緒に頑張ろう。 大石ゆかり はい！よろしくお願いします！   はじめに 対象読者 本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。 本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！ 入門向けのJavaScriptを学習できるサイト   本記事の目的 本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。 設計から実装までの、エンジニアの思考プロセスを体験する ゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛える オセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する 上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式をとっています。 解説に沿ってコードを書きながら、プログラミングに親しんでいきましょう！   注意点 本記事では、オセロゲームを0から実装するために必要な解説のすべてを記載しているため、記事の分量が多くなっています。 一気に最後まで進めようとせずに、ご自身のペースで学習を進めることを推奨します。 本記事では章ごとに所要時間の目安を記載しているので、学習の区切りを決める参考にしてください。   オセロゲームのルールに基づいて設計をしよう 🕛目安時間：1時間 ゲームに限らず、いかなる実装においても設計は非常に重要です。 機能要件を満たしつつも、できるだけシンプルでメンテナンスしやすい設計を考えるのもエンジニアの醍醐味の1つです。 「その設計、自分ならどうするかな？」ということを考えながら読み進めてみてください。   オセロゲームのルールを確認しよう オセロゲームを実装する上での機能要件は、一言でいうと「オセロゲームのルールに従って盤面の状態が変えられる」ということです。 まずは前提条件となるオセロゲームのルールを確認していきます。   オセロゲームのルール 盤は8×8マスを利用する 初期状態で真ん中の4マスに白黒の石を交互に配置する 先攻を黒とし、黒⇨白⇨黒…の順番で石を置いていく 石を置ける場所は、下記の条件を満たしている 置くマスに他の石がないこと 置くマスの上下左右、斜め1マスの場所に相手の石があること 置いた石、相手の石があった方向の延長上に自身の石があること 石を置ける条件を満たせない場合は、パスをして相手の番になる すべてのマスに石が置かれた時点でゲーム終了（「空きがあるが、白黒どちらも置けない」状況は今回は考えないことにする） ゲーム終了時点で石の数が多い方が勝ちとなる 以上がオセロゲームのルール概要です。   ルール以外の要件を定めよう ゲームのルールのほか、今回の実装では以下の条件を適用することとします。 自動でパスする機能は実装せず、「パス」ボタンを設置する 「現在どちらの手番であるか」を表示する ゲーム終了後、白黒それぞれの石の数と勝敗を表示する ゲームの初期化機能は実装しない 石が裏返るなどのアニメーションは実装しない CPUとの対戦機能は実装しない jQueryなどのフレームワークは使用しない 画像は用いない それでは、要件を確認したところで実際の設計に移りましょう。   要件に沿って実装設計をしてみよう 同じルールや条件でも、それをどのように実装に落とし込むかはエンジニア次第です。 実装設計では、いかに無駄なくすべての要件を満たした実装ができるかを考え尽くします。 それでは、紙やプレゼンスライドなどに、大まかな処理の流れを考えて書いてみてください。 想定されるケースを洗い出し、そのケースに応じてどう処理を分岐するかを矢印で表してみましょう。   本記事の執筆者は、以下のように流れを作成しました。 上図のように場合分けをしつつ、プログラムのフローを書き出すことで、コードに落とし込む際に整理がしやすくなります。 もちろん上記のフロー図が唯一の正解ということではなく、他にもいろいろなパターンの表現方法が考えられます。 想定されるケース・条件を網羅し、かつ無駄のない流れで設計できると、「良いフロー図」と呼ぶことができます。 本セクションは以上です。 休憩・復習などをして、ご自身のペースで次のセクションへ進んでください。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中開発環境を整えよう 🕛目安時間：30分 今回の開発に必要な環境は以下の通りです。 コードエディタ（図解ではVisual Studio Codeを使用します） Webブラウザ（Google Chrome推奨）   コードエディタを用意しよう コードエディタは普段使い慣れているもので構いませんが、解説に用いるVisual Studio Codeを導入したい方は、以下の記事を参考にセットアップしてください。 Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説   Webブラウザの環境を整備しよう 主要なWebブラウザには、コードの構造を確認したり、エラーを発見したりするための開発者用ツールが備えられています。 本記事では、実務現場の多くで使われているGoogle Chromeを用いて開発を進めていきます。 開発者ツールの使い方をまだ学習していない方は、次のセクションに進む前に以下の記事に目を通しておいてください。 Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】 コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） UX/UIデザインコース スマートフォンアプリ開発 アプリデザイン 【プロトタイプを作る！】初心者でもすぐに分かるProttの使い方