最新記事

【発売開始！】知らなきゃ恥ずかしいiPhone7の変更点とは

9/16(金)に発売開始したiPhone7/iPhone7 Plus。防水やApple Payの対応、イヤホンジャックの廃止など大きな変更点がありました。値段や色やサイズ・デザインなど改めて知っておきたい内容をまとめました。

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

iPhone7が9月16日(金)より全国一斉に発売を開始しています。

改めて「iPhone7って何が変わったんだっけ？」と聞かれてもすぐ言えるように特徴をまとめています。iPhone6sと比べてどう変わったのか、購入するメリットはあるのかなど改めて参考にしてみてください。

iPhone7の新機能

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-15-16-50-12

イヤホンジャックの廃止
防水・防塵機能
Apple Pay対応
デュアルカメラ搭載(iPhone7 Plusのみ)
2色の新色登場
スピーカーがステレオになり音量アップ

イヤホンジャックの廃止

イヤホン端子は廃止し、Lightning接続にしています。有線のイヤホンを使う場合、専用のアダプタが必要になりますが、このアダプタのデザインについて不評ではあります。Appleもワイヤレスのイヤホンを推奨しています。

防水・防塵機能

防水・防塵機能はイヤホンジャックを廃止することで実現しました。「IP67」と表記されていますが、「IP」の後の6は「防塵機能」、7は「防水機能」とそれぞれ保護できるレベルを表しています。

防塵レベル6とは「防塵が内部に侵入しない」と定義されており、防水レベル7とは「一定の水圧で一定時間(30分間)水中に浸けても有害な影響がない」と定義されています。防水機能に関しては、一番高いレベルではないためお風呂や海での使用はご注意を。

Apple Pay対応(Felicaチップ搭載)

iPhone7には、Apple Payが組み込まれているためモバイルSuicaをiPhoneでも使うことができます。「お財布ケータイ」を使いたいがためにAndroid端末を利用している方もいるかと思いますが、ようやくiPhoneでも対応し始めています。

デュアルカメラ搭載

iPhone7 Plusには、それぞれ1200万画素の広角レンズと望遠レンズを合わせた「デュアルカメラ」を搭載しています。F1.8のレンズを使用し、2つのカメラを使うことで光学2倍のズームをすることが可能になりました。

また、デュアルカメラを使うことで被写体と背景を別々に認識することができ、一眼同様のボケ感(ぼかし)を再現することが可能です。まるで一眼レフで撮ったような写真を収めたい人は、iPhone7 Plusを選ぶことをおすすめします。

2色の新色登場

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-15-10-39-30

iPhone6sまでのスペースグレーは無くなり、代わりに「ブラック」と「ジェットブラック」が新色として登場。

ジェットブラックに一目惚れして予約・購入している人も多く、一番人気となっています。

スピーカーがステレオになり音量アップ

これまであった底面のスピーカーに加えて、通話の際に利用されるスピーカーも音楽再生に使用されるということです。iPhone6sと比較して2倍の音量が出せるようになっています。

ディスプレー上部、底面側のスピーカーから音楽再生されることで、動画やゲーム、アウトドアでの音楽再生など楽しみ方が広がるでしょう。今までBluetoothのスピーカーを使っていた方も必要なくなるかもしれませんね。

カラーバリエーション

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-14-15-58-41

iPhone6sまでのスペースグレーは無くなりました。

ローズゴールド
ゴールド
シルバー
ブラック
ジェットブラック

ブラックとジェットブラックが新色となって登場しています。

MMD研究所の調査によると、2,178人を対象としたアンケートの中でiPhone7シリーズを「購入したいと思う」、「やや購入したいと思う」と答えた人が全体の33.7%と前向きな検討をしていることが分かりました。

特に、今回新色の「ジェットブラック」が一番人気となっています。

ただ、このジェットブラック、とても傷付きやすいため、ケースの装着をAppleが推奨しています。

[PR] プログラミングで挫折しない学習方法を動画で公開中

価格

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-15-16-47-44

iPhone7

32GBモデル：72,800円(税別)
128GBモデル：83,800円(税別)
256GBモデル：94,800円(税別)

iPhone7 Plus

32GBモデル：85,800円(税別)
128GBモデル：96,800円(税別)
256GBモデル：107,800円(税別)

ジェットブラックのみ128GB、256GBのモデル限定となっています。

スペック(前世代との比較あり)

バッテリーの駆動時間がより長く(iPhone7は、6sと比較して約2時間、iPhone7 Plusは、6s Plusと比較して約1時間長持ち)
LTE-Advanced搭載によりデータダウンロードが高速に(iPhone6と比較して3倍速い)
ストレージが256GBモデルが追加
プロセッサの処理速度がより高速に(iPhone6と比較して約2倍)
カメラのフラッシュがより明るく(iPhone6sと比較して50%向上)
カメラが2倍光学ズーム、10倍デジタルズーム(iPhone7 Plusのみ)

iPhoneアプリの裏側をちょっとだけ知っておきたい

これまでもiPhoneを使っていた人、iPhone7で初めてiPhoneに触れる人、それぞれいるかと思いますが、普段当たり前のように使っているアプリには、必ず作った人がいます。

そして、実は準備さえ整えば誰でもiPhoneアプリを作ることができます。

最近のiPhoneアプリは、「Swift」というプログラミング言語(コンピュータに命令するための言葉)を使っていることが多いです。iPhoneアプリやApple Watchのアプリなど、自分専用のアプリを作ることもできるので、ぜひ始めてみてはいかがでしょうか。

まとめ

今回発売開始したiPhone7、改めて変更点が多いですね。防水防塵機能、イヤホンジャックの廃止、Felica対応など細かい変更点が気付かないほど大きくアップデートしています。iOS 10のリリースも含めた上で、iPhoneの使い方がどんどん変わっていくでしょう。

そして、今まで以上にiPhoneを使うメリットが多くなっているので、iPhone7を機に切り替える人も増えるはずです。自分専用のアプリを作ってみても良いでしょう。iPhoneアプリの作り方も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。期間中は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。

【最新版OS】SiriがMacに登場！macOS Sierraの正式版がリリース

Appleは、日本時間9月21日未明にMac向け最新OSである「macOS Sierra」をリリースしました。これによってMacでもSiriが利用できるなど多く...

最新記事

より薄く、より使いやすく！Touch Barを搭載した新MacBook Proを正式発表

Apple（アップル）は、日本時間10月28日午前2時よりAppleの新製品発表イベント「hello again」が行われました。 iPhone7を受けて...

最新記事

マイクロソフト、最薄レベルのデスクトップPC「Surface Studio」を発表

マイクロソフトは、現地時間10月26日、ニューヨークで開催中のイベントで新たな製品「Surface Studio」を発表しました。アップルのiMacをイメージさ...

最新記事

音楽ストリーミングサービス「Spotify」ようやく国内で提供開始

9月29日、世界最大手の音楽ストリーミングサービス「Spotify」の公式アプリが、国内のApp Store/Google Playからダウンロードできるように...

最新記事

公式でもAmazonでも！ポケモンGO Plus(Pokemon GO Plus)再販売開始

「ポケモンGO Plus(Pokémon GO Plus)」が9月16日・17日に全国のポケモンセンター、ポケモンストア店頭、Amazon等で同日発売しました。...

最新記事

Chrome OSとAndroidが融合！Googleの新OS「Andromeda」搭載の「Pixel 3」を

GoogleがChrome OSとAndroidを融合した「Andromeda」という新OSを搭載したノートPC「Pixel 3」を2017年に発表する計画だと...

最新記事

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

【動画あり！】初代からiPhone7 Plusまで歴代のiPhoneを比較

初代iPhoneから最近発売されたばかりのiPhone7までの歴代iPhoneを比較した動画が公開されています。動画を公開した主は、海外で人気のYouTuberで、他にも歴代iPhone同士を比較した動画を公開しているようです。思いつく人はいても実際に全てのiPhoneを持っていること自体がすごいですね。動画で比較されているiPhoneの端末は、iPhone/iPhone3G/3GS/4/4s/5/5s/5c/6/6 Plus/6s Plus/SE/7/7 Plusの15機種となっています。動画では、「起動スピード」「音量」「カメラ性能」「表面温度」「指紋認証のスピード」を比較しているので、暇な時間に見てみましょう。 9年間の軌跡をなんとなく感じられるはずです。起動スピードNo.1は… iPhone7/7Plusは、初代iPhoneと比較すると120倍起動速度が早くなっているとのことですが、実際はどうなったのでしょうか。動画では、すべてのiPhoneに電源コードを接続し、同時に電源を入れています。起動した順に数字がつけられているのが分かりますね。起動スピードが一番早かったのが、「iPhone7」だったようです。意外にもiPhone7 Plusは8番目となっており、初代iPhoneとほとんど差がない結果となりました。ちなみに一番遅かったのは、iPhone4sとなっています。カメラの性能は？カメラに関しては、iPhone7/7 Plusの進化を感じられるはずです。初代iPhone iPhone7 Plus iPhone7 Plusともなると細部まで写真で描写されているのが分かります。iPhoneが新しくなるにつれて進化しているのが分かるでしょう。もっと詳しく見てみたいという人は、動画を見ながら確認してみてください。 source:EverythingApplePro [PR] プログラミングで挫折しない学習方法を動画で公開中まとめ 9年前に初代iPhoneが登場してからすでに15機種ものiPhoneが発売されています。 iPhone7やiOS 10のおかげでメッセージや写真などアプリを通した楽しみ方がどんどん増えてきています。最近のiPhoneアプリは、「Swift」というプログラミング言語(コンピュータに命令するための言葉)を使っていることが多いです。 iPhoneアプリやApple Watchのアプリなど、自分専用のアプリを作ることもできるので、ぜひ始めてみてはいかがでしょうか。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。期間中は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。

最新記事

Photoshopでレイヤーを結合する方法を現役エンジニアが解説【初心者向け】

Photoshopでレイヤーを結合する方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。なお本記事は、TechAcademyのオンラインブートキャンプPhotoshop講座のカリキュラムをもとに執筆しています。田島悠介今回は、Photoshopに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介レイヤーを結合する方法について詳しく説明していくね！大石ゆかりお願いします！目次レイヤーの定義と種類レイヤーを結合する方法全てのレイヤーを結合する方法まとめレイヤーの定義と種類レイヤーとはレイヤーとは、透明なシートに絵を描いて、それを何枚か重ねることで全体の絵を完成させていくイメージで使われる、PhotoShopの基本的なツールです。 PhotoShopでは、デジタルの利点を最大限に活かして、レイヤーごとに画像や文字を編集するのが基本的な方式となります。例えば、こちらの画像では、海の画像とヨットの画像が別々のレイヤで用意してあり、いつでもヨットの表示・非表示を切り替えることができます。レイヤー操作パネルレイヤーは次のようなパネルで操作することができます。 1行が1レイヤとして扱われ、選択中のレイヤ以外はカンバス上でクリックしても反応しませんから、誤操作を気にすることなく決まった画像や被写体の編集に集中することができます。また、目のアイコンをクリックすることで、レイヤーの表示・非表示の切り替えができますので、２つの被写体が重なっている部分でも簡単に編集が可能です。レイヤーの種類 PhotoShopのレイヤーには様々な種類があります。代表的なレイヤーをこちらの表でご確認ください。レイヤーの種類説明画像レイヤー（通常レイヤー）画像を編集するための最も基本的なレイヤー背景レイヤー画像に対して1つだけ設定できる背景用のレイヤー調整レイヤーそれ自身は見た目の情報を持たず、他の画像に対する視覚調整効果を保持したレイヤー文字レイヤー文字情報を表示させるためのレイヤー。PhotoShopでは、文字は画像と独立したレイヤーとして扱いますシェイプレイヤー図形などのシェイプ情報を持ったレイヤーレイヤ構成のサンプル冒頭のサンプル画像は、4つのレイヤーで構成されています。こちらの絵で、どんなレイヤ構成になっているか確認してみましょう。海の画像とヨットの画像は別のレイヤで管理されており、ヨットのレイヤーを海のレイヤーの上にオーバーレイさせています。ヨットの絵はわかりやすくするために背景に色がついていますが、実際は背景が透明のため、下の海の画像が見えるようになっています。調整レイヤは、指定領域だけ海の画像の視覚効果を暗めの色で付与しています。実際は、レイヤそのものはすべて透明で、見た目の情報を持ちません。画像の上にオーバーレイさせた時だけ、画像に非破壊的に視覚効果を付与させることができる、特殊なレイヤです。文字レイヤは、見た目の通り、文字を管理するためのレイヤです。わかりやすく色を付けておきましたが、実際は白に近い色です。 [PR] プログラミングで挫折しない学習方法を動画で公開中レイヤーを結合する方法レイヤー結合の方法レイヤーは、以下の方法で結合できます。 PhotoShopにおけるレイヤー結合操作レイヤーを複数選択する　＞　右クリック　＞　レイヤーを結合レイヤーを複数選択するには、レイヤーパネル上で、Ctrlキーを押しながらレイヤーの行を複数クリックします。レイヤー結合は、絵が描かれた複数枚の透明なシートを接着剤で1つにまとめるイメージですので、レイヤーの数が減ってスッキリします。レイヤー結合の注意点レイヤーは、結合すると元に戻せませんので、複数レイヤを一つの画像にまとめて問題ない場合に結合操作を実行しましょう。また、結合時に「非表示状態」の（目のアイコンが表示されていない）レイヤーは、結合後に情報が消失してしまいますので、十分注意してください。レイヤーのリンク 2つ以上のレイヤーを同時に移動させたい、位置関係を維持して編集したい場合には、「レイヤーのリンク」コマンドを使いましょう。操作方法は、「レイヤーを結合」とほとんど変わりません。右クリックメニューで「レイヤーのリンク」を選択すればOKです。こちらは目的の作業が完了した後に、リンク状態を解除して元に戻すことができます。全てのレイヤーを結合する方法画像の統合作業が全て完了して、レイヤーをすべて結合して一つの画像としてまとめたい場合には、「画像の統合」を実行します。 PhotoShopにおける画像の統合操作任意のレイヤーを右クリック　＞　画像を統合この操作により、すべてのレイヤーが一つの背景レイヤーとして統合されます。まとめ PhotoShopを使いこなす上で、レイヤーの操作は必須となります。結合時にレイヤーが消失してしまわないよう、気を付けて操作を実施していきましょう。監修してくれたメンター寺谷文宏 ( Teratani Fumihiro ) WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。万能なエンジニアとしてWEBデザインにも詳しく、WEB素材をIllustratorやPhotoshopにより制作することができます。 TechAcademyではフロントエンド、Javaコースを担当。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインブートキャンプ Photoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。

Photoshop

時系列の種類やモデルの紹介！時系列分析とは【初心者向け】

今回は、時系列分析について解説します。時系列の種類や時系列データのモデルについて紹介しているので、どういった分析の仕方があるのかぜひ知っておきましょう。なお本記事は、TechAcademyのオンラインブートキャンプ、AI講座とデータサイエンス講座の内容をもとに作成しています。田島悠介今回は、機械学習に関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介時系列分析について詳しく説明していくね！大石ゆかりお願いします！時系列分析とは時系列分析とは時間の項目を軸に分析を行うことです。時系列分析は英語で、Time Series Analysisと言います。時系列分析は、時系列解析と約されることもあり、時系列分析について調べる場合は、時系列解析についてもキーワードとして調べると良いでしょう。時系列分析は、時系列データを元に、何故そのような時系列になってしまったかを理論的に分析するものです。この、何故そのような時系列になってしまったかという点を、時系列分析ではデータポイント列の背後にある理論と言います。代表的な利用方法としては、完全失業率や住宅価格の推移を元に株式相場の見通しを伝える経済ニュースが日々報道されています。時系列データとは時系列データとは、時系列分析で使用するデータのことです。時系列データは、一定間隔に基づいて集計され、統計学上の相関関係が認められるものをいいます。身近な時系列データとしては、総務省統計局のページから閲覧できる総合統計書があります。時系列データのモデルには様々なものがあります。モデルとは、考え方や理論のことを意味します。 [PR] プログラミングで挫折しない学習方法を動画で公開中時系列の種類時系列には定常時系列と非定常時系列があります。実際に使用されるデータは、非定常時系列もののが多いです。そして、実際に解析する際には、非定常時系列データを定常時系列データに変換して解析することが多いです。定常時系列定常時系列とは、定常的な時系列のデータを意味する。定常性とは、確率の性質が一定であり、様々な時点に影響されないことを意味します。非定常時系列非定常時系列とは、非定常的な時系列データを意味する。非定常性とは、定常性が無いことで、確率の性質が一定しておらず、様々な時点の値に影響されるということを意味します。つまり、影響される要素が多いために解析する必要性があるということでもあります。代表的な時系列データのモデル時系列データにはいくつかのモデルが存在します。自己回帰モデル画像引用：wikipedia 自己回帰モデルは、英語でAuto Regression modelと呼ばれ、ARと省略されます。定常時系列データを使用します。現在の値は、過去の値に影響されて記述されるというモデルです。株式相場で、今日値上がりすれば、明日も値上がりするだろ言うというイメージです。自己回帰モデルは、自己回帰移動平均モデル（ARMAモデル）の特殊な例の1つです。また、自己回帰モデルは、ベクトル自己回帰モデル（VARモデル）の特殊な例の1つでもあります。自己回帰モデルは、時間対してある変数をある確率で分布したものを線形で表示します。変数とは、ある値を入れるは箱のようなものです。変数に入れられた日々の値を線形にする例として、株式相場のグラフがあります。移動平均モデル画像引用：wikipedia 移動平均モデルとは、英語でMoving Average modelと言いMAと省略されます。定常時系列データを使用します。移動平均モデルは、現在の値はq個前までの過去のノイズの重み付き和と、現在のノイズとに、平均値を加算したものとして考えるモデルです。つまり、過去のノイズが大きかった場合、現在の値もθの影響を受け変化するということになります。そして、現在の値が過去の移動平均で表現されることから移動平均モデルと言われます。自己回帰移動平均モデル画像引用：wikipedia 自己回帰移動平均モデルとは、英語でAutoregressive moving average modelと言い、ARMAと省略されます。定常時系列データを使用します。自己回帰移動平均モデルは、自己回帰モデルと移動平均モデルを組み合わせたモデルです。つまり、自己回帰モデルの現在の値は、過去の値に影響されて記述されるというモデルと、移動平均モデルの、現在の値はq個前までの過去のノイズの重み付き和と、現在のノイズとに、平均値を加算したものとして考えるモデルを組み合わせることで現在の値を記述するということです。自己回帰移動平均モデルの図式でいうと、p個以前の過去の値とq個以前のノイズの値を組み合わせることで現在の値を記述しています。和分過程和分過程とは、英語でIntegratedと言い、Iと省略されます。和分過程とは、以前の値に現在の値を加算することを意味します。株価などの金融取引に利用するデータで利用する時系列では、和分を利用します。ただ、自己回帰和分移動平均モデルで利用される場合は、和分次数を1と考えることが一般的です。次数とは、何かの指標を求める際に使用する自然数です。指標とは、物事を判断する際に目印となるものです。ここでは自然数を目印にします。自然数とは、正の整数を意味します。自己回帰和分移動平均モデル画像引用：wikipedia 自己回帰和分移動平均モデルとは、英語でAutoregressive Integrated Moving Averageと言い、ARIMAと省略されます。非定常時系列データを使用します。自己回帰和文移動平均モデルは次の3つのモデルを組み合わせてできています。自己回帰モデル（Autoregressive model ）移動平均モデル（Moving Average model ）和分過程（Integrated process）自己回帰和分移動平均モデルは、自己回帰パラメーター（p）と、移動平均パラメーター（q）と、差分の階数（d）とを使用します。和分過程の説明であったように、一般的に和分は1で表されます。つまり、ARIMA(p,1,q)モデルで記述される自己回帰和分移動平均モデルデータは、ARMA(p,q)モデルで記述される自己回帰移動平均モデルの1階和分系列であることを意味します。自己回帰モデルと移動平均モデルは、それぞれ単独であっても高い分析能力があります。自己回帰移動平均モデルは、更に高い分析能力があります。自己回帰和分移動平均モデルはデータの差分を取ることで、データの整形を行った上で、自己回帰移動平均モデルとして、より正しく分析することができます。その他の時系列データのモデル名紹介誤差修正自己回帰モデル誤差修正自己回帰モデルとは、英語でError Correction Modelと言い、ECMと省略されます。分散自己回帰モデル分散自己回帰モデルとは、英語でAutoregressive conditional heteroscedasticity modelと言い、ARCHと省略されます。一般化分散自己回帰モデル一般化分散自己回帰モデルとは、英語でGeneralized Autoregressive conditional heteroscedasticity modelと言い、GARCHと省略されます。確率的ボラティリティモデル確率的ボラティリティモデルとは、英語でStochastic Volatility modelと言い、SVと省略されます。マルコフスイッチングマルチフラクタルマルコフスイッチングマルチフラクタルとは、英語でMarkov Switching Multifractalと言い、MSMと省略されます。今回は、時系列分析について解説しました。この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でも、AI（人工知能）の構築に必要な機械学習・ディープラーニングについて実践的に学習することができる、オンラインブートキャンプAI講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる

機械学習

これだけは知っておきたい！Photoshopのレイヤー操作の基本

Photoshopの基本中の基本となる「レイヤー操作」について初心者向けに解説した記事です。 Photoshopのファイルはレイヤーという透明のフィルムが何枚も重なっている状態で管理されています。背景・オブジェクト・文字などのレイヤーを分けることによって、それぞれ違う描画モードを設定したり、他のレイヤーの情報に影響を与えずに画像を編集できます。 (※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています。) 目次iPhone7の新機能カラーバリエーション価格スペック(前世代との比較あり)iPhoneアプリの裏側をちょっとだけ知っておきたいまとめ大石ゆかり田島メンター！！今日はレイヤーについて教えてください。田島悠介 Photoshop内の透明なフィルム、その1枚1枚をレイヤーというんだ。各レイヤーにはそれぞれ「描画モード」というものを設定することができるようになっているよ。大石ゆかり「描画モード」ですか？田島悠介レイヤー内の要素を、画像全体の中でどのような合成方法で使用するかという機能なんだ。試しにレイヤーを作成してモードを変更してみようか。レイヤーの「描画モード」レイヤーには様々な種類が存在します。今回はいくつか基本的なものを紹介します。田島悠介レイヤーを新規作成すると「通常」の状態で作成されるよ。また、レイヤーの描画モードはいつでも変更可能なんだ。大石ゆかりずいぶんたくさん種類がありますね！でも、これだけあると何を使っていいか分からなくなりませんか～？田島悠介各モードをクリックするとその場で画像に反映されるので、画面を見ながらどれを使ったらいいか考えることもできるからね。よく使う描画モードについて見てみよう。例として、背景のレイヤー0の上に、もみじの葉以外の部分が透明の状態になっているレイヤー1があるとします。このレイヤー1にいくつかの代表的な描画モードを設定してみましょう。描画モードは赤枠の部分をクリックすることで変更が可能です。描画モード「通常」初期設定されている描画モードが「通常」です。上のレイヤーにあるものが優先して表示され、透過の部分は下のレイヤーが見えます。描画モード「乗算」下のレイヤーの色と上のレイヤーの色を掛け合わせ、色が暗くなる演算を行います。どんな色でも黒と掛け合わせると演算結果は黒になります。逆にどんな色でも白を掛け合わせると変化はありません。描画モード「スクリーン」下のレイヤーの色と上のレイヤーの色を掛け合わせ、色が明るくなる演算を行います。描画モード「乗算」の時とは反対に、どんな色でも白と掛け合わせると演算結果は白になります。逆にどんな色でも黒を掛け合わせると変化はありません。レイヤーの「不透明度」各レイヤーには不透明度を設定できます。初期設定では100％になっており、数値を下げると下のレイヤーが透けて見えるようになります。以下は、文字ともみじのレイヤーの透明度を50％に、描画モードを通常に設定しています。 [PR] プログラミングで挫折しない学習方法を動画で公開中背景レイヤー背景レイヤーという、透明ピクセルの存在しない特殊なレイヤーがあります。このレイヤーは最背面に固定されており、描画モードや不透明度を設定できません。背景レイヤーは通常のレイヤーへ変更することが可能です。背景レイヤーを右クリックし「背景からレイヤーへ」を選択します。レイヤーから背景へ変更する場合は、背景に変更したいレイヤーを選択した状態で、上メニューの「レイヤー」→「新規」→「レイヤーから背景へ」を選択します。すると、レイヤー内の透明部分が背景色で塗りつぶされ、最背面に固定されます。用途に合わせて使い分けてください。レイヤーの新規作成・複製・削除最後にレイヤーの新規作成・複製・削除といった基本操作を紹介します。レイヤーを新しく作成する場合は、このアイコンをクリックします。レイヤーを削除する場合は、削除したいレイヤーを選択した状態でこのアイコンをクリックします。 (レイヤーを右クリック→「レイヤーを削除」でもOKです。) また、レイヤーを右クリックして「レイヤーを複製」を選択すると、同じレイヤーを新たに作成できます。この時、複製されるレイヤーは描画モードや不透明度も元のレイヤーと同じ状態で作成されます。今回の記事は以上です。田島悠介レイヤーの複製や削除もよく使う機能だから覚えておこう。大石ゆかりちなみにレイヤーを分けると、具体的にどんないいことがあるんですか？田島悠介例えば文字と画像、それぞれの不透明度を別にしたり、背景部分にだけフィルターを適用したりすることが可能になる。しかも別レイヤーに分けておくことによって、好きなときに変えたい箇所だけを調整することができるよ。大石ゆかり画面内の要素によって、いろいろなレイヤーを使い分けるのが大事なんですね。よく分かりました！ Photoshopを学習中の方へこれで解説は終了です、お疲れさまでした。 Photoshopを調べたけど分かりづらい副業や転職後の「現場で使える」知識やスキルを身につけたい Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。

Photoshop

【ゼロから作る！】初心者から始める！iPhoneアプリの開発手順とは

iPhoneアプリの開発手順をゼロから紹介していきます。今回の記事では、プログラミングをやったことがないという初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。「iPhoneアプリを作る上で準備しなければならないもの」「iPhoneアプリをリリースしてみたい」「iPhoneアプリで収益を上げたい」などそれぞれシチュエーションに分けて細かく紹介しています。では、iPhoneアプリの開発手順を実際に見ていきましょう！目次iPhone7の新機能カラーバリエーション価格スペック(前世代との比較あり)iPhoneアプリの裏側をちょっとだけ知っておきたいまとめ今回の登場人物田島悠介（29）現役エンジニアで田島アプリスクールの代表。人の成長を見るのが一番のやりがいになっている。テックアカデミーのメンター。好きな映画は『トスカーナの休日』大石ゆかり（24）テックアカデミーの受講生。 Instagramには3つの写真加工アプリで編集してからアップするという。大石ゆかり田島メンター！こういうインスタみたいなアプリってどうやって作るんですかー？田島悠介おっ！ゆかりちゃんもアプリ作ってみたいの？大石ゆかりはいっ！！だってアプリ作れたら稼げるって聞いたから！田島悠介 (すごいミーハー感が・・・) じゃあ、せっかくだからiPhoneアプリを公開する手順をひととおり説明していくね！ゆかりちゃんが気になってるお小遣い稼ぎの方法も最後に紹介するからね！大石ゆかりやった〜！！ありがとうございます！（これで世界一周行けるかな♪） iPhoneアプリ開発で準備するもの iPhoneアプリを作る前に準備すべきものが2つあります。 Mac Xcode iPhoneアプリ（iOSアプリ）の開発を進めるためには上の2つが必要になります。実際にApp Storeにリリースしたいと思っている方は、リリースまでに準備すべき6つのことをご覧ください。すでにMacを持っている方は、Xcodeのインストール方法をご覧ください。大石ゆかり田島さん、iPhoneアプリってWindowsのパソコンじゃ作れないんですか？？田島悠介良い質問だね！iPhoneアプリを作るためのXcodeをインストールしたり、あとで紹介するアプリをリリースするためにMacが必要なんだ。大石ゆかりそうなんですね！やっぱりMacの方がかっこいいですもんね。田島悠介 (やっぱりどこかミーハーなんだよなあ・・・) じゃあ次は実際にアプリを作ってみる流れを説明するね！ WindowsはiPhoneアプリ開発ができないのか？ WindowsでiPhoneアプリを開発することは可能です。しかし、iPhoneアプリをリリースすることが難しいです。 iPhoneアプリをリリースするためには、必ずMacが必要です。それではWindowsユーザーは、最新のMacを購入する必要があるかというとそうではありません。様々な考え方がありますが、わかりやすい指標で言うと、Xcodeの動作が可能なMacであれば、最新のMacでなくても大丈夫です。そして、iPhoneアプリの開発だけに絞るとMacのみで開発可能です。 UnityでiPhoneアプリ開発 Unityとは、Unity Technologiesが開発するゲーム開発環境です。 C#やJavaScriptを利用してゲーム開発が可能です。 C 、C++、Objective-C で書かれたカスタムのネイティブな関数を C# スクリプトから呼び出すことも可能です。 Unityでゲーム開発を行うメリットは、アセットストアの素材を利用できることです。アセットストアでは、音楽、キャラクター、ほぼできあがっている状態のゲームテンプレートなどが無料・有料で販売されています。 React NativeでiPhoneアプリ開発 React Nativeとは、Facebookが開発しているReact.jsというJavaScriptのライブラリを利用した、モバイル端末用のJavaScriptフレームワークです。 JavaScriptを利用すれば開発できるということで、これまでのiPhoneアプリ開発に比べ、格段に開発者の裾野が広がりました。ネイティブUIを利用してTypeScriptも利用できることから、フロントエンドエンジニアと言われているJavaScriptを得意とするエンジニアも、iPhoneアプリ開発に取り組むことが可能です。 IonicでiPhoneアプリ開発 Ionic FrameworkはIonicが開発する、オープンソースのUIツールキットです。 HTML、CSS、JavaScriptを使っているフロントエンドエンジニアであれば使いやすいと思います。 Angular や React 、 Vue といったJavaScriptの人気フレームワークと併用して、TypeScriptも利用可能です。 iOS、Android、 Webアプリ（PWA可能）、 Electronで動作します。 ReactNativeとの違いは、UIがWeb Componentを利用しており、アプリ内でコンテンツを表示するWebView上で動作するという点です。 FlutterでiPhoneアプリ開発 FlutterはGoogleがリリースしている開発フレームワークです。 Dartという言語を利用します。現在Flutter2がリリースされたことで、基本実装で同じコードをネイティブアプリ(iOS、Android)、Windows、macOS、Linuxで利用可能になりました。 ToyotaもFlutterを採用する計画があるそうです。 MonacaでiPhoneアプリ開発 Monacaとは、HTMLとJavaScriptを利用した開発環境です。 Monacaではクラウド上での開発が可能です。クラウド上での開発が可能ということは、手元のPCに開発環境を構築する必要がないというメリットがあります。 RAD StudioでiPhoneアプリ開発 RAD StudioはWindows、Android、iOS、macOS、Linuxアプリケーション構築をサポートする統合開発環境です。 C++とDelphiという言語で開発可能です。有償製品のため、サポートが充実しています。無料トライアルも可能です。 [PR] プログラミングで挫折しない学習方法を動画で公開中Xcodeで利用するプログラミング言語 XcodeでiPhoneアプリを開発する上で、SwiftとObjective-Cが利用されます。 Objective-CでiPhoneアプリ開発も可能ですが、Apple自身がSwiftの利用を推奨しているため、初心者の方にはSwiftの利用をおすすめします。 Swift Swiftは、2014 年からApple製品専用の言語として開発されました。 AppleはiPhoneアプリを開発する際、Swiftを推奨しています。 Objective-Cよりシンプルで、初心者にも使いやすく、処理速度も速いです。実際にアプリを作ってみるせっかくXcodeをインストールしたらオリジナルのiPhoneアプリを作ってみたいと思うはずです。作りたいものが浮かばないという人は、サンプルアプリを紹介しているので、そのまま真似して作ってみるのも良いでしょう。もし、実際にiPhoneアプリを作ろうと思ったら「企画→設計→開発」といった流れが一般的です。企画企画では、いつ誰が何のために使うのかなど具体的にアプリのイメージを考えます。個人で作るアプリであれば自分が欲しいと思うものが良いでしょう。設計設計では、画面設計図を作りましょう。手書きでも良いですが最近では、ProttやCacooといったツールで誰でも簡単に作成できるのでぜひ試してみてください。開発企画や設計が終わったら実際にアプリを作っていきます。 iPhoneアプリは、Storyboard(ストーリーボード)というところで画面を作り、ソースコードを書いて正常な処理や動作を行います。例えば、写真のアプリを作る場合「カメラを起動している画面」と「写真を保存する画面」が少なくとも必要です。 1．カメラでボタンを押して写真を撮る 2．ライブラリに写真を保存するこの1と2を連動させるためにコードを書く必要があります。そして、完成したら自分のiPhoneでテストしてみましょう。実際にiPhoneでサクサク動くかどうか確認しておくことは重要です。大石ゆかりソースコードってなんですか？田島悠介ソースコードというのは、コンピュータに何か命令を送る時に使う言葉なんだよ。僕らが日本語や英語で会話するように、コンピュータにも特有の言語があるんだよね。 iPhoneアプリを作るときはSwift(スウィフト)っていう言語を使うことが多いよ！大石ゆかり Swiftって言うんですか？？テイラー・スウィフトとは何か関係があったりするんですかー？田島悠介いやいやテイラー・スウィフトとは何も関係ないよ(笑) (それにしてもすごい連想だな・・・) アプリをリリースしてみる iPhoneアプリを開発したら一般にリリースします。 App Storeに公開するためには、iTunesConnect, DeveloperCenterというサイトで設定し、申請を行います。ちなみにリリースさせるためにはAppleのDeveloper登録が必要で年間11,800円かかります。参考サイトサルでもできるiOSアプリ公開手順～App store 登録～田島悠介最初にも言ったけど、iPhoneアプリをリリースするためにはMacでなければならないんだ。ちなみにiPhoneアプリをリリースする際はAppleによる審査があるから覚えておこうね。大石ゆかりなんで審査なんてするんですか〜？田島悠介アプリを使う時に登録した個人情報が外に漏れないといったセキュリティ面や不快な表現がないかどうかの確認をするためだよ。大石ゆかりへえ〜意外と厳しいんですね！田島悠介そうなんだよね。だからみんな開発が終わってもたくさんテストして不具合がないか確認するんだよね。さて最後は、ゆかりちゃんお待ちかねのアプリでの稼ぎ方について説明していくよ！大石ゆかりわあ〜！待ってました！アプリで収益を得る iPhoneアプリで収益を上げるためには3つの方法があります。有料ダウンロード広告アプリ内課金有料ダウンロードは、アプリを有料で販売することです。有料アプリはゲームが多く購入される傾向にあります。広告はアプリ内に広告を表示して収益を得ます。アプリ自体は無料で使ってもらい、広告を出すことで収益が上げられます。アプリ内課金はゲームによく使われます。ゲーム内のアイテムを販売するなどして収益を得ます。広告などを利用すれば個人でもアプリで稼ぐことができるでしょう。田島悠介ちなみにゆかりちゃんはどんなアプリを作りたいの？大石ゆかり撮った写真にプリクラみたいに可愛くスタンプとか文字を載せたいんです。あと、フィルターもおしゃれにして。とにかく可愛くデコレーションができるアプリが欲しくて、できるならアプリで稼げたらいいなあなんて思ってます。田島悠介面白そうなアプリだね！そのアプリで収益をあげようと思ったら例えば、無料のスタンプやフィルターを用意しておいて、もっとおしゃれなものを使いたいと思ったら課金するみたいな感じが良いかもね。大石ゆかりなるほど〜！いろいろ教えていただきありがとうございましたっ！おさらい iPhoneアプリの開発にはMacが必要！アプリを作る時は企画→設計→開発という順番で進めよう！アプリのリリースにはAppleのDeveloper登録が必要！アプリで収益を得るには3つの方法がある！監修してくれたメンター中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。WordPressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。ボランティア活動：小学生がオリジナルAndroidアプリをGoogle Playでリリース、NHK Whyプログラミング入賞、全国Programming Festival入賞、中学生がSNS型PWAアプリリリースする市クラブ講座活動を行っている。 iPhoneアプリ開発を学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたいプログラミングを学習していて、このように思ったことはありませんか？テックアカデミーのiPhoneアプリコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、Swiftを学習・勉強して短期間でオリジナルのiOSアプリを開発できるようになります。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

iPhoneアプリ開発

【未来の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デザイナーのサポートで学びたい場合はご参加ください。

アプリデザイン

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

【発売開始！】知らなきゃ恥ずかしいiPhone7の変更点とは