TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptで別のページにジャンプする方法を現役エンジニアが解説【初心者向け】
icon
icon
JavaScript

JavaScriptで別のページにジャンプする方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで別のページにジャンプする方法について解説しています。別ページへのジャンプにはwindow.locationプロパティを使います。基本の書き方と実際の使用例を見ていきましょう。

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

JavaScriptで別のページにジャンプする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

別のページにジャンプする方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

window.locationプロパティについて

window.location プロパティは、ブラウザに表示されているドキュメントの位置情報を表す Location オブジェクトを返します。Location オブジェクトには以下のような情報が格納されています。

Location {
  href: "https://techacademy.jp/magazine/wp-content/uploads/2017/07/index.html2_-620x437-e1499391542321.png",
  origin: "https://techacademy.jp",
  protocol: "https:",
  host: "techacademy.jp", …
}

href

WebページのURLを表します。URLは Uniform Resource Locator の略で、インターネット上におけるWebページの住所のようなものになります。

origin

URLのプロトコルとサーバー名を表します。ファイル名は含みません。上記の場合、プロトコルは「https」、サーバー名は「techacademy.jp」となります。

protocol

プロトコルを表します。プロトコルとは通信手段のことで、データを送受信する方法を決めた仕様です。あらかじめプロトコルを決めておくことで、プロトコル名を指定するだけで、スムーズに通信を開始することができます。

現在インターネットでは主に「https」というプロトコルが使用されています。これは安全性を保ちながらサーバーとやりとりできるプロトコルです。

host

サーバー名を表します。

 

[PR] コーディングで副業する方法とは

別のページにジャンプする方法

別のページにジャンプするには window.location に遷移先の URL を代入します。

window.location = "遷移先のURL";

URLを指定する際「www.google.co.jp」のようにサーバ名以降を指定すると、現在表示しているサーバー内のページに遷移しようとします。プロトコルも含めて指定すると、サーバーも含めて別のページにジャンプすることができます。window.location について、詳しくは以下の記事も参考にしてください

MDN – Window.location

 

実際に書いてみよう

それでは実際にプログラムを書いて確かめてみましょう。実行はChromeブラウザーのデベロッパーツールで行いましょう。まずは techacademy のページに移動します。

https://techacademy.jp

コンソールに以下のように入力しましょう。

window.location = "www.google.co.jp"

実行結果は以下のとおりです。プロトコルを指定しなかったため「https://techacademy.jp/www.google.co.jp」に遷移してしまったことが分かります。

次はプロトコルも含めて入力してみましょう。

window.location = "https://www.google.co.jp"

実行結果は以下のとおりです。今度は Google のページに遷移できました。

 

まとめ

今回の記事では JavaScriptで別のページにジャンプする方法を学習しました。

 

監修してくれたメンター

太田和樹（おおたかずき）

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

JavaScriptでblank判定を行う方法を現役エンジニアが解説【初心者向け】

JavaScriptでblank判定を行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

JavaScriptでtextareaのreadonly属性を取得、設定する方法を現役エンジニアが解説【初心者

JavaScriptでtextareaのreadonly属性を取得、設定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初...
JavaScript

JavaScriptでcheckboxを使う方法を現役エンジニアが解説【初心者向け】

JavaScriptでcheckboxを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

Webデザインに使えるJavaScriptのライブラリについて現役エンジニアが解説【初心者向け】

Webデザインに使えるJavaScriptのライブラリについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。...
JavaScript

JavaScriptの正規表現でエスケープが必要な文字を現役エンジニアが解説【初心者向け】

JavaScriptの正規表現でエスケープが必要な文字について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。...
JavaScript

JavaScriptのupdateメソッドの書き方を現役エンジニアが解説【初心者向け】

JavaScriptのupdateメソッドの書き方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向け...
JavaScript

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

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

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。   プロトタイピングの概念そのものは、インターネットの成立以前から存在していました。典型的な例として、新しい製品を開発をする人々は最初に製品を組み立て、次に製品が期待した通りに作動するか試します。 最初のバージョンで特許を取得して、潜在的な投資家に製品を見せることもあるかもしれません。もし投資家が独自の生産ラインの設備を利用できるとしたら(例えば既存の会社で働いているなどの理由から)、製造可能なレベルのモデルが完成するまで、製品の開発が進められて、バグの修正も行われます。   昔のデモディスクを覚えていますか？ 機能の制限されたプログラムが入っていたり、ゲームの初歩レベルあるいはゲームが2つだけ入っているようなディスクのことです。プロトタイプはデモディスクと似ている点が多くありますが、よりシンプルでさえあります。 Webサイトやアプリのプロトタイプを作成するのは、期待した通りに作動するか確かめるためです。 プロトタイプの目的は、将来の顧客の獲得というよりも、より良い製品を作るのに役立てることです。 Webサイトやアプリのプロトタイプは、製品が期待通りに作動するか確かめるために作成します。またクライアントや潜在的な投資家に製品の作動を示すこともできます。   最近では、Webとモバイルアプリ用のプロトタイプ作成アプリが多数登場しています。 最近リリースされたデザインツールのAdobe Experience Designerは、Webとモバイルに対応したデザインアプリとしての機能と、プロトタイプ作成用のアプリとしての機能が融合されています。 Adobe社の知名度とプロ向け製品における市場シェアを考えれば、多くの人々が今まで以上にプロトタイプを実践し始めているのも当然かもしれません。   今回の記事は初心者向けのガイドです。デザイン業界でどのような経験を積んできたかにかかわらず(あるいは未経験でも)、プロトタイプを日常的に使い始めた方向けに書いています。 このガイドでは何よりもまず基本的な原則を説明します。もちろんその後に発展的な情報として、役立つツールやアプリをリンクとともにご案内します。   ワイヤーフレーム＆モックアップ VS. プロトタイプ デザイナーとしての経験が豊富な方は、すでにワイヤーフレームやモックアップを編集で利用しているかもしれません。ただ、これらは必ずしもプロトタイプとはいえません。 ワイヤーフレームやモックアップで問題なのは静的なことです。製品の機能についての多くの情報を伝えることができないのです。このため、製品の動作性についてクライアントやデベロッパーに誤解を与えるおそれもあります。こうした理由から、プロトタイプとは一般的に、何かインタラクティブな要素を持つものと定義できます。 ただし、例外的に静的なものにもプロトタイプと見なせるものもあります。 例えば、概念的なプロトタイプや、詳細に作成された設計書などです。重要なのは単にインタラクティブであることよりも、製品に期待される機能について情報を伝えられることだからです。 それでもやはり、ワイヤーフレームやモックアップは単にプロトタイプの作成によく使われているという理由だけで、誰も捨てようとはしません。   いつプロトタイプが必要になるのか？ 何かがどのように作動するかを示す必要があるときにはいつでも、プロトタイプが必要です。 わかりやすい例は、Webアプリやモバイルアプリです。アプリは、モックアップでは簡単に見たり予測したりできない機能を数多く持っている傾向があります。コンテンツ中心型の静的なWebサイトでさえプロトタイプを必要とするかもしれません。 1つの理由として例を挙げると、私は以前クライアントにシンプルなビジネスサイトのモックアップを見せたときに、クライアントから「トップページにある「概要」や「サービス」などをクリックしたら別のページに移行するのか？」、「コンタクトフォームでユーザーが「送信」をクリックしたら、私はメールを受信することになるのか？」と聞かれたことがあります。 シンプルなタスクでさえ不確実性を伴うことがあり、プロトタイプは当て推量を解消するのに役立ちます。 また、簡単なブラウジングの操作さえ、ユーザーやクライアントによってはわかりづらくて大変な作業となりえます。プロトタイプがあればネットワークからサインオフするときにも、当て推量する手間を省くことができます。 加えて、プロトタイプはユーザーテストに役立ちます。ユーザーテストを行うときには、初期段階からプロジェクトのシミュレーションを始めるのがベストです。作業がほとんど完了した後に大きな変更をしなければならない事態は避けたいところです。   [PR] コーディングで副業する方法とは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ページ用エディタもあります。これらを使うことで、ローファイプロトタイプからコードを加えた完成製品まで全て作ることができます。 または、これらをプロトタイプを速く作る目的だけに使い、プロジェクトの最終段階ではカスタマイズしたコードを使う方法もあります。どちらの方法でも上手くいくでしょう。   プロトタイピングのツールとアプリ 理論を理解したところで、プロトタイプの作成に進みましょう。紙のプロトタイプやコードだけに限定せず、アプリをどこかで使うと仮定します。 良くも悪くも、多数の優良なアプリから選ぶことになります。 繰り返しになりますが、結局はあなたに合うものを選ぶことが大切です。モバイルアプリのデモを実行する機能が必要か？Google DriveやDropboxなどのサービスとファイルの同期が必要か？Githubと統合させるか？ローファイ、ミディアムファイ、ハイファイのどのタイプか？アドバンストスクリプト言語(Advanced scripting)か？などから考えましょう。 以下にリストアップするアプリは、これらのニーズに対応しています。何に着目すべきか分かりやすいように、アプリごとに最も関連性の高い機能をご紹介します。 これらアプリの多くは主にワイヤーフレームのためのツールとして知られています。ワイヤーフレームのソフトウェアは、インタラクティブなプロトタイプに必要な機能を備えていることが一般的です。人によってこれらのアプリを使うことで得られるアドバンテージも異なります。   AdobeのExperience Design CC 現時点では最新のアプリです。このアプリの登場により、今まで飽和状態だった市場に競争を巻き起こすことになりそうです。単にワイヤーフレームのアプリまたはプロトタイピングのアプリというよりも、デザインアプリです。Sketchや開発終了したFireworksと似ていますが、デザインした全てのものからプロトタイプを作り出すことが可能な点が斬新です。 今のところMacのプレビューにのみ対応していますが、2016年末までにはWindows版もリリースされる予定です。 プレリリース版は無料ですが、完成版のリリース後にはAdobe Creative Cloudのプランに組み込まれます。   プレゼンテーションのソフトウェア MicrosoftのPowerPoint、AppleのKeynote、LibreOfficeのImpress、GoogleのSlidesは全てプロトタイプの作成に使えます。プロトタイプについてのコンセプトはそれぞれ異なっています。スライドにリンク機能を加えるだけで、インタラクティビティを模倣できます。 コンテンツ中心型のWebサイト用のプロトタイプにも向いています。またこの中のソフトの少なくとも1つは使った経験のある人も多いでしょう。もし使ったことがなければ、ImpressとSlidesは無料で使えます。   InVision InVisionも有名なアプリの1つで、ハイファイプロトタイピング向きです。バージョン管理を特色としていて、リアルタイムの連携機能やフィードバック機能を売りとしています。Marvelのアプリのように、アニメーション、プロトタイプの組込み、デバイス上でのデモ、などの機能もあります。 無料プランではプロトタイプ1つまで作成できますが、それ以降は有料プランで月額15USドルかかります。 InVision   Justinmind Justinmindはアプリケーションのハイファイプロトタイプを作成するのに向いているように思えます。JustinmindのサイトではレスポンシブデザインのWebサイトのプロトタイプについても言及されています。アプリ上でのデモ機能もあります。 今のところ1年間の有料契約(月額換算で19USドル)からスタートできます。 Justinmind   Marvel Marvel Appは有名なプロトタイプのアプリです。基本的に無料プランで、アップデートの価格も全てリーズナブルです。注目の機能は、PhotoShipとSketchのサポート、DriveとDropboxとの同期、Webページ上での組込み型プロトタイプです。これらの機能によって、プロトタイプをアニメーション付きのプレゼンテーションに仕上げることもできます。ハイファイプロトタイプの作成に向いています。 Marvel   Proto.io Proto.ioはハイファイプロトタイプ向きのアプリです。複合的なインタラクション、アニメーション、ファイル形式のエクスポート、印刷、組込み、デバイスのデモンストレーションなどの機能が全てビルトインされています。15日の無料お試し期間と、月額24USドルのプランから始められます。 Proto.io   POP POPが他のアプリと異なっているのは、ワイヤーフレームのスケッチとデジタル形式のプロトタイプのハイブリッドを作成できる点です。 iPhone、Androidフォン、Windowsフォンなどのカメラでスケッチの画像を取り込み、これらをインタラクティブなプロトタイプに変換します。 主に紙で作業を進めるタイプの人には、データを共有するのにいいアプリです。プロジェクト2つまでは無料で利用可能で、以降は月額10USドルの有料プランになります。 POP   Flairbuilder Flairbuilderはデスクトップアプリですが、プロジェクトにオンラインのビューア(閲覧用ソフトウェア)機能を利用できます。ミディアムファイのワイヤーフレームとプロトタイプに向いています。インタラクションを追加したり、デバイス上でのデモを行うことが可能で、グリッドベースのデザインにも特色があります。 ワンタイム料金で99USドルと高額ですが、Axureよりも安いです。 Flairbuilder   Flinto Flintoには、Macアプリ版とWeb用ライト版の2つのバージョンがあります。違いはというと、Macのバージョンの方がより複雑なアニメーション、インタラクションなどの機能をテーブル(表)に加えることができます。またSketchからファイル形式をインポートできるのも、Web用ライト版にはない機能です。 ワンタイムの購入価格で99USドルかかります。ライト版(月額20USドル)だとデスクトップバージョンのライセンスも含まれるので、両方の良い部分を利用できます。 Flinto   [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
アプリデザイン

JavaScriptのwindow.locationの使い方について現役エンジニアが解説【初心者向け】

JavaScriptのwindow.locationの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 window.locationの使い方について詳しく説明していくね！ 大石ゆかり お願いします！   目次 window.locationとは window.locationの使い方 実際に書いてみよう まとめ   window.locationとは window.location とは現在表示しているWebページの位置情報を表すプロパティです。window.location について、詳しくは以下の記事も参考にしてください。 MDN – window.location   [PR] コーディングで副業する方法とはwindow.locationの使い方 window.location を表示するには以下のように指定します。 window.location 逆に値を代入することも可能です。 window.location = 新しい位置     実際に書いてみよう それでは実際に書いてみましょう。実行はChromeブラウザーのデベロッパーツールで行います。はじめに、techAcademy のページを開き、デベロッパーツールのコンソールで以下のように入力します。 console.log(window.location); 実行結果は以下のとおりです。 Location { href: "https://techacademy.jp", ancestorOrigins: DOMStringList, origin: "https://techacademy.jp", protocol: "https:", host: "techacademy.jp", … } それぞれの内容は以下のとおりです。 href Webページの位置(URL)を指します。URLはインターネット上におけるWebページを一意に特定する住所のようなものです origin URLのプロトコル(後述)とサーバー名を表します。今回の場合のサーバー名は「techacademy.jp」となります。インターネット上のサーバーは実際は「IPアドレス」という番号で管理されており、DNSという仕組みによってサーバー名と紐付けられています。 protocol プロトコル(通信手段)を表します。データを送受信する方法を予め「プロトコル」として定義しておくことで、プロトコル名を指定するだけで、スムーズに通信を開始することができます。今回の場合は「https」というプロトコルが使用されています。これは安全性を保ちながらサーバーとやりとりできるプロトコルです。 host サーバー名を表します。   次に、window.location に値を代入してみましょう。 window.location = "https://www.google.co.jp"; 実行するとWebページが Google の検索ページに遷移します。   まとめ 今回の記事では JavaScript の window.location の使い方について学習しました。   監修してくれたメンター 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

特徴や仕組みを理解！アルトコイン（altcoin）とは

今回は、アルトコインについて解説します。 アルトコインとはどういった通貨なのか、有名な仮想通貨も紹介しながら解説していきます。単語はよく聞くけど理解していないという方は、ぜひ知っておきましょう。     田島悠介 今回はアルトコインについて解説しよう。 大石ゆかり 田島メンター！アルトコインというのは何ですか～？ 田島悠介 簡単に言うと、ビットコイン以外の仮想通貨のことを指すんだ。ビットコインとの違いについても解説するよ。 大石ゆかり はい！ 目次 アルトコインとは ビットコインとの違い 代表的なアルトコインの種類 アルトコインを購入するためには   アルトコインとは アルトコインとは、正式にはAlternative Coinと言います。日本語にすると「代替のコイン」という意味です。 ここで言う代替とは、ビットコインの代替という意味です。 つまり、アルトコインとはビットコイン以外の仮想通貨の総称で使われています。   [PR] コーディングで副業する方法とはビットコインとの違い ビットコインは、マイニング（採掘）を通じて手に入れることができます。 ただし、採掘できるのは、2,100万枚(21,000,000)と最初から決まっています。 そして、ビットコインは、2017年12月の段階で1,600万枚以上(16,770,512)採掘済みで、2033年には99％のビットコインが採掘され、2140年まで残りの1%を少しずつ採掘すると言われています。 つまり、ビットコインでは、上限枚数に近づくにつれて、どんどん採掘でき可能性が低くなります。そのため、新規参入する小規模事業者では、ビットコインを採掘する事さえできません。   アルトコインの役割とこれからの将来性 アルトコインは、根本的な原理としてはビットコインと同じです。 ビットコインと大きく異なる点として、採掘が始まったばかりのものが大半ということです。そのため、採掘することでコインを手に入れることができる確率は現実的です。 アルトコインの役割としては、ビットコインやEthereum（イーサリアム）には無い機能や価値を提供する事にあります。 結果的に、ビットコインの代替コインとしてたくさんのアルトコインが誕生し、アルトコインを採掘する人たちの間でも人気が高まっています。 現在では少なくとも1500種類以上のアルトコインが存在すると言われています。 そして、現在のアルトコインには存在しない、新しい価値観による機能が付与されたアルトコインが将来的にも誕生し続ける可能性は非常に高いです。   田島悠介 代替のコインという意味でアルトコインと呼ばれるんだ。 大石ゆかり アルトコインにはたくさんの種類があるんですね。 田島悠介 次に、その中でも代表的なものをいくつか見てみよう。 代表的なアルトコインの種類 Ethereum C++, Go, Rust等のプログラミング言語で実装されており、ブロックチェーン以外にもスマートコントラクトという技術を使用しています。 スマートコントラクトとは、送金記録以外にも、契約に関する記録も保有することが可能です。   Ethereum Classic Ethereum Classic（イーサリアムクラッシック）とは、2016年6月17日に発生したThe DAO事件というEthereum（イーサリアム）の盗難事件に伴い、Ethereum（イーサリアム）のハードフォークに伴いEthereum（イーサリアム）から分裂した仮想通貨です。 イーサリアムクラッシックでもスマートコントラクトを利用することができます。 Ethereum（イーサリアム）との違いは、以前のEthereum（イーサリアム）の流れを踏襲する非中央集権性を重視した運営になっています。 非中央集権性とは、DApps（分散型アプリケーション）で実現されます。 分散型アプリケーション（DApps）とはについての記事も参考にしてみてください。   Ripple リップルとは、リップル社が提供するプロトコルで国際的な送金システムを金融機関に提供しています。三菱東京UFJ銀行もリップルの技術を活用して、国際送金サービスを始めると話題にもなりました。 驚くほど高騰した後、現在の価格に落ち着いています。   NEM NEM（ネム）は当初New Economy Movement（新しい経済運動）の略称で始まり、日本人開発者も在籍していたアルトコインです。 NEMは電力をあまり消費せず、よりセキュリティの高い特徴があります。 2018年1月26日には仮想通貨取引所のcoincheckから約580億円相当のNEMが盗難されました。 これはNEM自身の脆弱性ではなく、仮想通貨取引所自体のセキュリティホールにより発生しました。   Dash Dash（ダッシュ）とは非常に匿名性の高いことが特徴の仮想通貨です。 当初は、Darkcoin（ダークコイン）という名前でしたが、 Darkcoinの名前の由来でもある、Darksendという技術により匿名性を高めています。 また、Dashと解明する由来でもある、InstantXという高速送金技術を利用しています。 暗号化には、X11という11種類のハッシュ関数を利用した消費電力の低い暗号化技術を採用しています。 ハッシュ関数についての記事も合わせて参考にしてみてください。 2018年1月26日には仮想通貨取引所のcoincheckから約580億円相当が盗難された、NEMの資金洗浄先として利用されている可能性が高い点が、現在の通貨リスクです。   Bitcoin Cash Bitcoin Cash（ビットコインキャッシュ）とは、ビットコインと名前が似ているように、ビットコインから分裂したアルトコインです。 仮想通貨のネットワークに参加している人が違った意見を持ち、折り合えない場合には「分裂」することになります。 2017年にビットコインは、認知度が上がるとともに取引量も増えました。その結果システムが追いつかず取引が滞ってしまい解決策を求めた結果分裂に至ったのです。 そのためビットコインキャッシュは、ビットコインの技術を利用してビットコインよりも高速取引とセキュリティ向上を追い求め分裂した仮想通貨になります。他にもビットコインゴールドという仮想通貨が存在します。 他にも日本の取引所で取引を行っている通貨は数多くあります。 価格の値動きだけではなく、各仮想通貨の特徴や裏側の技術を理解しておくと良いでしょう。   アルトコインを購入するためには ビットコイン以外の暗号通貨も買ってみたい、ブロックチェーン技術を理解するためにアルトコインを買ってみたい方は以下のサービスで購入すると良いでしょう。 扱っている通貨や手数料などが違うので、メリットデメリットを吟味して登録してみましょう。 bitFlyer 国内最大の仮想通貨取引所です。 管理画面などは中級者以上をターゲットとしたような作りになっていますが、セキュリティ面は万全なので、安心して利用したい方におすすめでしょう。 bitFlyer   GMOコイン レバレッジ取引を行うのに向いているのは、GMOコインです。 ビットコインのFX取引などを行いたい中級者以上の方におすすめです。スマホのアプリで手軽に売買が行えるので、ぜひ利用してみてください。 GMOコイン   ビットトレード 仮想通貨交換業者に登録されている取引所になります。 リップルやライトコインなど主要なアルトコインを扱っています。 ビットトレード   今回は、アルトコインについて解説しました。 国内では仮想通貨の取引として注目されていますが、東南アジアなどでは実際にブロックチェーン技術を使ったサービスも増えてきているので、今後日本にも普及する可能性は大いにあるはずです。   田島悠介 主なアルトコインについていくつか紹介したよ。 大石ゆかり Ethereumというのは聞いたことがある名前ですね。 田島悠介 ブロックチェーンとスマートコントラクトについては、それぞれまた別のところで具体的な解説をしていくよ。併せて勉強しておこう。 大石ゆかり 了解です。ありがとうございました！   この記事を監修してくれた方 中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。
ブロックチェーン

JavaScriptでlocationオブジェクトを使う方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでlocationオブジェクトを使う方法について解説します。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   大石ゆかり 田島メンター！locationオブジェクトというのは何でしょうか？ 田島悠介 ブラウザで表示したWebページのアドレス（URL）に関する情報が格納されているんだ。また、指定したアドレスに移動したりもできるんだよ。 大石ゆかり どのような書き方があるのですか？ 田島悠介 例を見ながら説明していくね！   locationオブジェクトとは プログラムを作っていると、Webページのアドレス（URL）に関する情報を取得したり、指定したアドレスに移動したい場面があるのではないでしょうか。そんな時に便利なのが、locationオブジェクトです。 URLとは、Uniform Resource Locator の略で、インターネット上でのページの「住所＝アドレス」のことを指します。URLには、情報の種類やサーバ名、ポート番号やファイル名など、プログラミングで使える様々な情報が格納されています。 それらの情報が格納されているのがlocationオブジェクトです。 実際の開発現場では、URLからパラメータを取得したり、指定したアドレスに移動したりする時に使います。   locationオブジェクトの書き方 基本的なプログラムは以下のようになります。locationキーワードの後ろに「.」ピリオドを付けて関数名を記載します。 主な関数については次章で紹介します。 location.関数名   [PR] コーディングで副業する方法とはlocationオブジェクトの主な使い方 この記事では、locationオブジェクトの主な使い方について解説します。 まずは、簡単な関数を用意します。 <!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> // locationオブジェクトを表示 console.log(location); // urlを取得 var url = location.href; console.log(url); // プロトコルを取得 var protocol =
JavaScript

事例も紹介しながら解説！スマートコントラクトとは【初心者向け】

今回は、スマートコントラクトについて解説します。 Ethereum（イーサリアム）によるスマートコントラクト開発を行いたい人は必ず理解しておきたい用語でしょう。スマートコントラクトとは何なのか、どんな仕組みで機能しているのか説明しています。 どういったシーンに活用できるのかもぜひ読んでみてください。     田島悠介 ここではスマートコントラクトという概念について解説していくよ。 大石ゆかり 田島メンター！スマートコントラクトというのはどういった技術なんですか〜？ 田島悠介 契約に関する処理のひとまとまりを自動化させるものなんだ。具体的にどういう形になるのか見ていこう。 大石ゆかり 分かりました！ 目次 スマートコントラクトとは スマートコントラクトの仕組み ブロックチェーンとの関わり スマートコントラクトを学習できる本 スマートコントラクトの活用可能性   スマートコントラクトとは スマートコントラクトとは、ブロックチェーン上で動くアプリケーションでありアルトコインの一つである、Ethereumに実装されている技術です。 Ethereumについては、アルトコインの一つとして解説しています。 それまでのビットコインでは、ブロックチェーンという技術を利用して、取引内容の信憑性を担保していました。 Ethereumのスマートコントラクトでは、取引するにあたって契約も担保するプロトコルです。プロトコルとは、コンピューター同士が行う処理の約束事の事です。   [PR] コーディングで副業する方法とはスマートコントラクトの仕組み スマートコントラクトの考え方は、ブロックチェーンより古く、1990年代にNick Szaboという暗号学者により提唱されました。 自動販売機を例に説明すると、「購入者がお金を投入→商品ボタンを押す」という契約条件が満たされた場合、商品を提供するという一連の流れ自体をスマートコントラクトで確実に取引できるよう担保しています。 Ethereumではスマートコントラクトを実現することで、仮想通貨の取引だけでなく、通貨を通じ契約を行い、商品や役務の提供まで自動的に処理する事を目指しています。   田島悠介 スマートコントラクトがどういう仕組みなのかという解説だよ。 大石ゆかり 自動販売機の例で考えるとよく分かりますね。 田島悠介 最後に、今後スマートコントラクトが活躍しそうであると言われているモデルについても見ていこう。   ブロックチェーンとの関わり ブロックチェーンにおけるスマートコントラクトとは、主にEthereum（イーサリアム）上で実行可能なプログラムです。 同様に、ブロックチェーンを利用しているビットコインでも、 Locking Script や Unlocking Scriptに対してプログラムを書く事は可能が、容量の制限もあり現実的ではありません。 Ethereumでは、スマートコントラクト技術を利用して、自由なプログラム実行を可能にしています。 そして、スマートコントラクトの自由度が、セキュリティの脆弱性を生み出し、結果的に、ブロックチェーンのセキュリティリスクの原因にもなります。 実際、2016年6月17日にThe DAO 事件と呼ばれるEthereum（イーサリアム）盗難事件が発生しました。この結果、Ethereum（イーサリアム）はハードフォークを行い、Ethereum Classicへと分裂する原因にもなりました。   スマートコントラクトを学習できる本 堅牢なスマートコントラクト開発のためのブロックチェーン［技術］入門 堅牢なスマートコントラクト開発のためのブロックチェーン技術入門 特徴 紙面の許す限り、スマートコントラクトに関する個々の技術を詳細に解説してあります。 対象ユーザー スマートコントラクトのセキュリティ対策初心者 学べる事 スマートコントラクトにはセキュリティの脆弱性が存在し、その対策方法に踏み込んだ学習をすることができます。   ブロックチェーンアプリケーション開発の教科書 ブロックチェーンアプリケーション開発の教科書 特徴 スマートコントラクトの開発をチュートリアル形式で解説してあります。 対象ユーザー スマートコントラクト開発の初心者 学べる事 Ethereumのスマートコントラクト開発用フレームワークである、Truffleを利用したアプリケーション開発を学習できます。   スマートコントラクトの活用可能性 カーシェアリング カーシェアリングでは、対価を支払うことで、一定条件で車を利用することができます。 カーシェアリング企業としては、会員登録をから始めることなく、いつでもユーザーカーシェアリングをしてもらうことができます。 それだけでなく、瞬時に代金回収することができるため、事業スピードを加速することができ、代金回収手数料をゼロにすることができます。 ユーザーは、新たに会員登録することなく、アルトコインを利用できるサービスを使いたいときに使いたい分だけ、自動販売機で商品購入するようにすぐに利用できます。   不動産取引 不動産取引では、一定金額を支払うことで、対象物件を購入することができます。 しかし、仲介業者へ支払う手数料や、取引完了までの時間が必要です。 スマートコントラクトを不動産取引で利用できれば、短時間で、所有者と購入者同士が、仮想通貨を利用して瞬時に取引が可能になります。 もちろん、ブロックチェーン技術を利用することで、その不動産物件の所有者であることを担保させることが可能です。   田島悠介 これらはまだ可能性であって、実際の例ではないんだ。 大石ゆかり まだまだこれから実装していこうという段階にあるんですね。 田島悠介 全体としてスマートコントラクトは第三者を介さない、自動での取り引きができるものという風に捉えておこう。 大石ゆかり 了解です。ありがとうございました！   今回は、スマートコントラクトについて解説しました。 あまり聞きなれない言葉かもしれませんが、知っておくとブロックチェーンの理解も深まるでしょう。   この記事を監修してくれた方 中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。
ブロックチェーン

目的を見失わないために！プロトタイピングの間違った手法とは

本稿は、Studio by UXPinのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はUXPinのUXデザイナーであるMarcin Treder氏によって投稿されました。 プロトタイピングの間違ったやり方は、あなたが思っている以上にUXデザインを損ないます。 そして、プロトタイピングを実行する段階が早すぎることがなぜ危険なのか、私の経験を基に説明します。   急成長するUXデザイン 10年前にはUXデザインは、デジタル製品の開発プロセスの一部で使われているだけでした。それが2000年代以降に広まり始め、今や全ての製品開発においてUXデザインは重要な役割を果たしています。 次のGoogleトレンドによる分析グラフも、UXデザインの急成長を示しています。   リーン開発、アジャイル開発、ウォーターフォールモデル（上流から下流への開発工程）などの数々のシステム開発のタイプの実例を見たところ、多くの会社ではプロジェクトの時間節約のために、プロトタイピングを早すぎる段階で実行していることに気づいたのです。 その結果、短期的にはチームにとって時間節約になるかもしれませんが、長期的には修正や故障が数多く起こるために、かえって時間がかかるのです。 これでは、デザインの間違いを修正する過程で正しいアイデアを見つけるという、UXの真の価値が失われてしまいます。   間違ったプロトタイピングの危険性 私は、プロトタイプはその良さが生かされないまま、いわば現実離れしたおもちゃになりつつあるのではと思っています。 実際にプロトタイピングは、ものを良く見せるためだけに使われることも多くなっています。その結果としてデザインプロセスは、高い費用がかかり、肥大化し、バラバラに分離した、混乱するようなものになってしまうのです。 私が過去に、ビジュアルデザインのバックグラウンドを持つUXデザイナーと一緒に、eコマースのデザインの仕事をしたときに、まさにこの罠に陥っていました。Photoshopに慣れている彼らは、いきなり実際のサービスをイメージしたモックアップからデザインを始めました。 デザインに問題があれば、サービス責任者からフィードバックを受けたり、インタラクションモデル（ターゲットとするユーザーと共同でデザインを考える手法）においてユーザーから問題を指摘されることもあります。 もちろん、実際のサービスに寄せたプロトタイピングから始める方法が役立つこともあるのですが、それをデフォルトにするのは良くありません。 製品のデザインに、PhotoshopやSketchなどを使うのは、デザインプロセスのもっと後の段階でいいのです。 何よりもまず、そもそものプロトタイプの存在意義について考えてみましょう。   [PR] コーディングで副業する方法とはプロトタイピングの3つのコスト削減効果 プロトタイピングは実は古くからある概念であり、またインタラクションデザインにおける唯一の手法ではありません。 Michael Guggenheim氏の記事『The Long History of Prototypes』によると、 「プロトタイピングは開発における「原型」として理解されるべきものではなく、またインダストリアルデザインにおけるベータ版（サンプル製品のソフトウェア）のようなものでもありません。プロトタイピングは開発を進めるための手法です。つまり、仮のモデルであり、ブリコラージュ（使えるものを何でも利用して作ること）や、ユーザーの参加、製品の修正などの「オープンな革新」を可能とするものです。決して見知らぬユーザーのために、閉鎖的な実験室で完成度の高い製品を作るための手法ではありません。」 プロトタイピングは、ユーザーに製品への最短経路を提供するものであるべきです。プロトタイプは製品開発の初期において、製品のアイデアをそれを受け取る人（顧客）に示すことができます。これこそプロトタイピングの真の価値です。 プロトタイピングを効果的に使うと、次のようなメリットがあります。 製品のアイデアを検証する 製品の詳細を修正する 製品のアイデアを拡張する デザインの検証、修正、拡張をプロトタイピングで実行すれば、製品開発のコストを大幅に削減できます。 またエンドユーザーにプロトタイプを試用してもらう時期が早いほど、後々高いコストがかかるエラーが発生する可能性も低くできます。これこそプロトタイプを初期から作成するべき理由です。 初めに最もコストのかからないプロトタイプを作成し（ファイデリティを柔軟に変更できて、一応使える代物であれば、プロトタイプとしては完璧です！）、ユーザーのフィードバックを受けた後でイテレーション（反復型の短期の開発サイクル）を行えばいいのです。 外観のデザインの完成度を高めるために多くの時間を費やしたり、プロトタイピングで使うためだけにスクリプト言語でアニメーションを作成するとしたら、時間とエネルギーの無駄です。ユーザーに最初に製品を紹介したときに、良く評価されないリスクが高くなります。 多くのケースにおいて、わざわざグラフィックデザインのツールを使って作成したモックアップから、プロトタイプを作るメリットはありません。最初に完成度の高いデザインに陶酔してしまったら、ユーザーに製品のアイデアを検討してもらうのも、製品を改良するのも難しくなるというデメリットがあるだけです。 つまり、イテレーション（反復型の短期の開発サイクル）の精神が失われてしまうのです。 プロトタイプを最大限活用するには、素早く実践し、チームで共同作業を行い、ユーザー調査に基づいてイテレーション（反復型の短期の開発サイクル）を行うべきです。   プロトタイピングが役立つケース しかしながら、モックアップのプロトタイピングが非常に役立つケースも存在します。   既存のアセットを変更するケース 既存のアセットに小さな変更を加えるだけであれば、効率的です。 グラフィックやコードから小さな操作（要素の再配置など）をするだけで十分なので、わざわざデザインし直すメリットはありません。   顧客向けのプレゼンテーションを行うケース グラフィックで作られたプロトタイプは、顧客向けのプレゼンテーションを行う場合に役立ちます。逆に、完成度の低いプロトタイプをプレゼンテーションで使っても、顧客の関心を引くことはできないでしょう。 すでにユーザーに製品を試用してもらっていて、製品の最終的なインターフェースに自信を持てるとしたら、顧客向けに完成度の高いプロトタイプを作成してもいい段階です。 優れたプロトタイプを顧客に示すことで、より契約獲得の可能性が高まると思います。   複雑なプロジェクトのケース 現実世界のシミュレーションをプロトタイプに反映しなければならないような場合を考えてみてください。 このような複雑なプロジェクト（または「重要度」は高いが「緊急度」は低いプロジェクト）では、現実の変動するデータにアクセスできるプロトタイプを作るのが有効です。 コストは高くつくかもしれませんが、目的を達成するには必要です。しかし他のケースでは、プロトタイプに時間を投資する価値があるかどうか考えましょう。   実際のイテレーションの例 UXPinの方針では、プロトタイピングは迅速に共同作業で行われるべきであるとしています。そして私たちはすでに述べた基準も実践しています。 最近の事例（デザインエディターのインターフェースの再設計）を紹介します。   全体のプロセス カスタマーサポートに寄せられたユーザーからのフィードバックを検討した後、チームでデザインの原則を考えました。例えば、「気を散らすものの排除」、「予測できるアーキテクチャ」、「一貫性のある外観」などです。 次に、2日間かけてアイデアをまとめ、最終的にUIのプロトタイプを作成しました。そしてプロトタイプを20人のユーザーに試用してもらった後に、イテレーション（反復型の短期の開発サイクル）を行い、ここでやっと最終的な製品をデザインするための準備が完了しました。 以上は外観デザインだけのプロセスです。全体ではユーザーテストを含めて2週間近くかかりました。 新しいUIを再設計するために作成した、初期のプロトタイプの例を次にご紹介します。   プロトタイプの3つのバージョン例 バージョン1 インターフェースの主要な構成部品（ナビゲーション要素など）の、一番良い配置位置を考えるために、多数の可能性を試してみました。上の画像は、試したUIデザインの1つです。サイトマップは右下に置いています。これらのテストを行う中で、幸運なことに私たちは、元々の要素の配置はユーザーのニーズと一致していないことに気づきました。 バージョン2 デザインエディタをデザインする上で大変なのは、高機能を搭載しながら、インターフェースはシンプルにわかりやすい設計にしなければならないことです。 上の画像は、編集モードごとに切り替えができる、タブのようなシステムです。すっきりした外観で、ユーザーからも「切り替えをしやすい。」というフィードバックをもらえましたが、欠点も見つかりました。 アイコンの名前の表示がないため、各機能を見つけにくい。 小さな画面上では、約80pxの余白部分を見つけにくい。 このバージョン2は、バージョン1を基にして30分ほどで作成したものですが、テストを一巡させた後に破棄しました。 バージョン3 このプロトタイプの最終的なバージョンは、実際に製品化したサービスのデザインに近いものです。バージョン1とバージョン2での反省を生かしています。 もしバージョン1 のプロトタイプを作成していたら、ユーザーにとってサイトマップが見つけにくいデザインのままだったと思います。また、私たちがバージョン2で満足していたら、さらに悪い事態になっていたかもしれません―ユーザーはエディタの機能のアイコンを見つけるのが難しいままだったと思います。 どちらのケースでも、後々の修正に高いコストがかかるだけではなく、粗悪な製品を売り出すことになっていたでしょう。   最後に UXデザインも他のデザインと同様に、プロトタイピングが必要です。 車のデザインから建築に至るまで、プロトタイピングなしには良いデザインを生むことはできません。しかし、プロトタイピングを全体のデザインプロセスから独立したものと考えるべきではありません。 プロトタイピングはその本来の目的―製品のアイデアの検証、製品の修正、製品開発の拡張などに役立てるべきです。そして製品を使うユーザーを中心として、チームでデザインの共同作業を進めるべきです。 正しい段階で、正しい理由で、正しいプロセスを実行しましょう！ [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートを受けながら学びたい場合はご参加ください。
アプリデザイン

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptで別のページにジャンプする方法を現役エンジニアが解説【初心者向け】