XcodeでiPhoneアプリの起動画面を変更する方法【初心者向け】

XcodeでiPhoneアプリの【起動画面】を変更する方法を初心者向けに解説した記事です。追加する画面、画像サイズ（2種類）、iOSシミュレーターでの確認方法まで、基礎から理解できる内容になっています。

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

Xcodeを使って、iPhoneアプリの起動画面を変更する方法を初心者向けに紹介していきます。

iPhoneアプリの見た目で変更できるポイントとして、UIパーツやアイコンがあります。

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。

iPhoneアプリの起動画面を変更する

まずはナビゲーションエリアから、Generalを選択し、Launch Imagesの項目を探します。Sourceという項目があるので、その右端の”→”をクリックして、画像追加画面に移動します。

DropShadow-11

すると、画像の追加画面が表示されます。

DropShadow-21

この赤枠で囲った部分に画像をドラッグ&ドロップすることで追加していきます。

なお、今回はiPhoneアプリとしていますが、iPadアプリでも方法は同じです。

起動画面用の画像を用意する

画像の追加画面まで確認できたら、一度Xcodeは最小化して起動画面用の画像を用意しましょう。

今回はPhotoshopを使って用意してみました。見た目にこだわるのが目的ですので、アプリのイメージに沿ったものを用意しましょう。

画像のサイズ

ここで、注意しなければならないのが起動画面用の画像のサイズです。

先ほどの画面でわかるように、”2×”と”R4”の2種類があります。それぞれ画像の高さが下記の通り異なりますので注意しましょう。これは、iPhone Retina(4inch)とiPhone Retina(3.5inch)に対応するために必要です。

2×：640px × 960px
R4：640px × 1136px

また、.jpgファイルでは読み込みエラーが出ることがありますので、.pngファイルを用意すると良いでしょう。

画像の用意ができたら、先程の画像追加画面に戻ってドラッグ&ドロップで画像を追加します。完了するとこのように表示されます。

DropShadow-31

[PR] iPhoneアプリ開発コース

iOSシミュレーターでチェックする

起動画面に設定した画像はiOSシミュレーターで確認することができます。

今回は、R4(iPhone Retina(4inch))は緑色の画像にしました。

DropShadow-41

もう1つの、2×(iPhone Retina(3.5inch))ではクリーム色の画像にしました。例として画像の色を変えましたが、iOSシミュレーターのデバイスによって別の画像が表示されることが理解できたと思います。

DropShadow-51-1

今回の記事は以上です。

iPhoneアプリのアイコンを変更する方法の記事もあるので、合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。

XcodeでUIPageControlを追加する方法【初心者向け】

iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。今回は、XcodeでUIPageControl（ページコントロール...

iPhoneアプリ開発

開発効率を上げる！Swiftでextensionを使って機能を拡張する方法

Swiftでextensionを使う方法について解説しています。 extensionを使うことで、クラスを拡張することができ、効率よく開発を行うことができ...

iPhoneアプリ開発

XcodeでUITextFieldを追加する方法【初心者向け】

iPhoneアプリ開発の際に便利なUIパーツをXcodeから追加する方法を紹介する記事です。今回は、XcodeでUITextField（テキストフィール...

iPhoneアプリ開発

XcodeでUISwitchを追加する方法【初心者向け】

iPhoneアプリの開発に便利なXcodeのUIパーツを紹介する記事です。今回は、XcodeでUISwitch（スイッチ）を追加する方法を紹介します。 ...

iPhoneアプリ開発

今さら聞けない！Xcodeをインストールする方法【iOSアプリの統合開発環境】現役エンジニアが解説

iPhone（iOS）用のネイティブアプリを開発するにはXcodeが必要です。しかし、Xcodeのインストール方法や開発環境の構築方法を知らなければ、i...

iPhoneアプリ開発

繰り返し処理！Swiftで書くwhile/for文の使い方【初心者向け】

Swiftでの繰り返し処理の書き方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。ここでは、whi...

iPhoneアプリ開発

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

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

iPhoneアプリの開発手順をゼロから紹介していきます。今回の記事では、プログラミングをやったことがないという初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。「iPhoneアプリを作る上で準備しなければならないもの」「iPhoneアプリをリリースしてみたい」「iPhoneアプリで収益を上げたい」などそれぞれシチュエーションに分けて細かく紹介しています。では、iPhoneアプリの開発手順を実際に見ていきましょう！目次iPhoneアプリの起動画面を変更する起動画面用の画像を用意するiOSシミュレーターでチェックする今回の登場人物田島悠介（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] iPhoneアプリ開発コース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アプリ開発

WordPressでアイキャッチ画像を設定する方法【初心者向け】

WordPressでは、記事1つ1つにサムネイル画像（アイキャッチ画像）を設定できます。ブログの記事冒頭や記事一覧ページに配置されている、一番目を引く画像です。テックアカデミーマガジンの場合は、このように表示されています。アイキャッチ画像を設定すると、下記のメリットがあります。記事の内容がひと目で分かる記事一覧の画面でわかりやすい記事のクリック率が上昇する SNSなどでシェアされた時に目立つそこで今回は、アイキャッチ画像の設定方法について簡単にご紹介します。目次iPhoneアプリの起動画面を変更する起動画面用の画像を用意するiOSシミュレーターでチェックする大石ゆかり田島メンター！！記事一覧で見た時に記事ごとに画像が表示されていると思うんですけど、あれってどうやって表示するんですか〜？田島悠介アイキャッチ画像のことだね。それなら記事ごとに設定するんだけど・・・ちょっとやってみようか。大石ゆかりはい、お願いします！ Gutenberg（標準ブロックエディタ）でWordPressのアイキャッチ画像を設定する方法 WordPressバージョン5.0から、標準エディタがブロックエディタ（通称Gutenberg）に変更になっています。ここでは、ブロックエディタでアイキャッチ画像を設定する方法をご説明します。【Gutenberg】アイキャッチ画像の設定エリアを表示する Gutenbergでは、アイキャッチ画像は記事投稿画面でデフォルトで表示されています。アイキャッチ画像の右側の∨マークをクリックすると、∧マークに切り替わり、「アイキャッチ画像の設定」ボタンが表示されます。【Gutenberg】アイキャッチ画像を設定する「アイキャッチ画像の設定」ボタンをクリックします。上部の「ファイルのアップロード」タブをクリックすると、次のような画面が表示されます。「ファイルの選択」ボタンをクリックして、設定したい画像を選択しアップロードしてください。アップロードが完了したら、右下に表示される「アイキャッチ画像を設定」のボタンをクリックします。投稿画面に、設定したアイキャッチ画像が反映されます。これで設定は完了です。設定する画像を間違えた場合には、「画像の置換」ボタンをクリックし、選択し直すことができます。また、「アイキャッチ画像の削除」というテキストリンクをクリックして、設定の削除もできます。設定は右上の「下書き保存」ボタンをクリックするまで保存されませんのでご注意ください。旧エディタ（Classic Editor）でWordPressのアイキャッチ画像を設定する方法 WordPressは5.0から、標準のエディタがブロックエディタ（Gutenberg）になりました。しかし旧バージョンから使用している方は、いままでの旧エディタ（Classic Editor）のほうが使い慣れている方も多いでしょう。 Classic Editorはプラグインとして追加することで、切り替えが可能です。ここでは旧エディタ（Classic Editor）でアイキャッチ画像を設定する方法をご説明します。アイキャッチ画像は記事投稿画面で設定できるのですが、デフォルトの記事投稿場面で表示されていない場合には、以下の手順で表示させてみましょう。投稿編集画面で、右上に表示される「表示オプション▼」というボタンをクリックします。すると、投稿画面で表示されるオプションリストが表示されます。その中から「アイキャッチ画像」を探し、チェックボックスにチェックしましょう。すると、投稿画面の右サイドに、「アイキャッチ画像」のエリアができます。これでアイキャッチ画像追加の準備はできました。【旧エディタ】アイキャッチ画像を設定するアイキャッチ画像設定エリアの、「アイキャッチ画像を設定」というテキストリンクをクリックします。すると、画像追加画面が立ち上がるので、設定したい画像を選択しアップロードしてください。アップロードが完了したら、右下に表示される「アイキャッチ画像を設定」のボタンをクリックします。投稿画面に、設定したアイキャッチ画像が反映されます。間違ってアップロードしてしまった場合は、「アイキャッチ画像を削除」というテキストリンクをクリックし、またやり直せば大丈夫です。記事を公開し、どのように反映されているかを見てみましょう。これでアイキャッチ画像の設定は完了です。 [PR] iPhoneアプリ開発コースWordPressのアイキャッチ画像が表示されないときの対処法とは大石ゆかり田島メンター！！アイキャッチ画像を設定したんですけど、表示されません…！田島悠介原因はいくつかあるから順番に対処法みていこうか。大石ゆかりお願いします！ここではWordPressのアイキャッチ画像が表示されないときの対処法をご説明します。前述した設定の通りアイキャッチ画像が保存されているのであれば、テーマの設定にアイキャッチ画像の機能を有効化する関数が設定されていない場合が考えられます。オリジナルで作成したテーマなどを利用している場合などにも、functions.phpの設定の有無でアイキャッチ画像は表示されない場合があります。 functions.php /** * アイキャッチ画像の機能を有効化 */ add_theme_support( 'post-thumbnails' ); いままで表示されていたアイキャッチ画像が表示されなくなったような場合は、プラグインの競合が起きている場合がほとんどです。このような場合は、有効化しているプラグインを順番に無効化していきます。これにより、影響をおよぼしているプラグインを特定できます。プラグインが特定できたら、しばらくそのプラグインを無効化して、次のバージョンアップなどで問題が修正されるのを待つのが方法の1つです。または代替できるようなプラグインを探して、そちらに差し替えるなどの方法があります。最後にもう一度各投稿記事を開いて、アイキャッチ画像が正しく設定できているかも確認してみましょう。 WordPressのアイキャッチ画像の最適なサイズとはアイキャッチ画像のサイズは、デフォルトでは「設定」の「メディア設定」の数値で決まります。画像はWordPressにアップロードすると、この設定によりメディアライブラリにオリジナルサイズを加えて指定されたサイズで登録されます。縦横比が上記の設定と違う場合は、以下のように横の長さを基準としてそれぞれの画像サイズで保存されます。この例では、元の画像は横620pxで縦349pxの画像です。この場合、メディア設定の大のサイズ指定よりも小さい画像なので、フルサイズはオリジナルのサイズ、中が横300pxを基準として縦横比で縮小したもの、サムネイルは横150pxを基準として中央で正方形にトリミングした画像です。 4番目の例は、「サムネイルを実寸法にトリミングする」のチェックマークをオフにした場合の画像です。この場合は、サムネイルは同じ縦横比を保ったまま縮小されます。固定または投稿ページに画像ブロックで配置した画像のサイズは、右側のプルダウンメニューから選択できます。アイキャッチ画像はSNSのOGP画像としても使われることも多いので、最適なサイズは横1200px × 縦630pxとされています。様々なSNSでの画像の表示を確認したい場合は、以下のサイトなどを利用すると便利です。 OGP画像シミュレータまとめ：アイキャッチ画像を設定して魅力的なサイトを作ろう標準のブロックエディタ、旧エディタでのアイキャッチ画像の設定方法、アイキャッチ画像が表示されない場合の対処方法、最適なアイキャッチ画像のサイズと設定や確認方法をご紹介しました。アイキャッチ画像はこのように記事の冒頭に表示されるので、テキストだけよりぐっと見た目が華やかになりましたね。アイキャッチ画像を適切に設定して、より魅力的なサイトにしていきましょう。他のカスタマイズ方法として、WordPressのウィジェット編集方法の記事もあります。大石ゆかりアイキャッチ画像があると、記事のイメージがつかめていいですね♪ 田島悠介そうだね。　アイキャッチ画像は一覧にすると特に印象に残りやすいから、必ず設定しておいたほうが良いね！大石ゆかりはい、分かりました！ WordPressを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい WordPressでのサイト制作を学習していて、このように思ったことはありませんか？テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。

WordPress

ヒーローイメージで印象を大きく変える10のデザイン事例

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UI/UXデザイナーのNick Babich氏によって投稿されました。あなたのWebページを訪問したユーザーは、何らかの反応を示すでしょう。ユーザーの反応は、肯定的であれ否定的であれ、大部分は彼らが何を見るかによって決定されます。視覚はおそらく人間の最も優れた感覚であるため、ヒーローイメージは、ユーザーの関心を引く最も手っ取り早い方法の1つといえます。大胆で、グラフィックを使用した、メッセージ性の強い画像は、ユーザーの関心を引きます。ヒーローイメージすぐにユーザーを惹き込み、ミニマリストデザインのアプリやWebサイトにおいて完璧な中心的存在となるでしょう。ヒーローイメージは単なる美しい画像以上の存在です。それは強力なコミュニケーションツールです。この記事では、ヒーローイメージの使用に関するヒントをいくつか紹介します。 1. Webサイトの内容と関連性を持たせるヒーローイメージは導入として考えてください。ヒーローイメージはユーザーに、Webサイトの他の部分に何を期待できるかを連想させるものです。ヒーローイメージの目的は、あなたのWebサイトが何であるか、また伝えたいアイデアは何であるかを、瞬時に訪問者に伝えます。ヒーローイメージがWebサイトのコンテンツの意図を上手く伝えていない場合、ユーザーに役立つものにはなりません。かえって画面上の貴重なスペースを無駄に使い、ときには混乱の原因にさえなります。画像がブランドや製品に対する先入観に合わないと、ユーザーは混乱します。悪い画像選択の代表的な例、誰もがこの画像（上記参照）が銀行ローンに関連することに気づくとは限りません。画像選びは妥協してはいけません。あなたが創造しようとしているキャンペーン、テーマ、目的に合うものを選んでください。上記のLunet Eyewearのヒーローイメージを見てください。Webサイトのメッセージを明確に伝えています。画像のコンテンツはブランドを表しているのです。製品の宣伝または販売のためにWebサイトを使用している場合、ヒーローイメージの利点を活かすことができるはずです。製品のコンテクストに合うヒーローイメージを使用してください。そして、製品の外観だけでなく、実際の設定で製品がどのように機能するかを示しましょう。製品を販売する最良の方法は、商品それ自身に販売させることです。ヒーローイメージは製品のメリットのデモを行うことができます。デジタル製品やサービスについても同様です。互換性のあるデバイス上でのスクリーンショットのモックアップを作成し、あなたのアプリやサービスの使用感を人々に伝えましょう。 Slackは、ヒーローイメージとしてアプリのインターフェースを採用しています。もちろん、ヒーローイメージのデザインと選択は難しいことです。そこで、Angie Schottmuller氏はヒーローイメージの判断基準として、7つのポイントで構成されるフレームワークを作成しました。キーワードの関連性画像はターゲットキーワードを視覚化できているでしょうか？目的の明確さ画像はWebサイトのメッセージを明確に伝えていますか？デザインのサポート画像は行動喚起（Call To Action）を促すためにページフローをシームレスにサポートしていますか？信頼性画像はあなたのブランドを信頼感のあるものとして表現していますか？付加価値画像は関連性を高めたり、ユーザーにとってのメリットを示していますか？望みの感情イメージは、あなたがユーザーに望むアクションを引き起こさせる感情を描写していますか？主人公としての顧客顧客は製品を購入したら主人公になれるということを描写していますか？ 2. 画像を中心的存在にするヒーローイメージは、少ない情報を伝えるには完璧な環境です。はっきりと目立つものがよいでしょう。ユーザーはWebサイトに訪問する度に立ち止まって眺めることになるでしょう。しかし、画像ですべてを伝える必要があるという意味ではありません。むしろ画像は、関連性を持たせた方法で、メッセージを視覚的に強化することが必要なのです。 [PR] iPhoneアプリ開発コース3. 感情的に説得力のある画像を選択するデザインにも感情を組み込むべきです。感情的な影響を与え、インスピレーションを生み出し、あなたがユーザーに望む感情を高めるような画像を選択するべきです。結局のところ、人々が重要な意思決定をするときに、しばしば感情は理性を上回ります。肯定的な感情を刺激することによって、ユーザーとのつながりを構築することができます。 4. 読み込みとレンダリングは可能な限り早くするヒーローイメージは重要な設計要素なので、素早くレンダリングする必要があります。残念なことにヒーローイメージの多くのデザインは、HID（ヒーローイメージ遅延）という現象に悩まされています。これは主に、スクリプトやCSSのスタイルシートによって読み込みがブロックされることが原因です。デザイナーは、ヒーローイメージがいつ表示されるかに焦点を当てる必要があります。しかし、これは想像以上に厄介です。モダンブラウザでは、いつコンテンツが表示可能になるかを知るためのフックがありません。 1つの簡単な例は「インラインスクリプトタイマー」であり、これは時間を記録し、imgタグの直後に置かれるものです。コードは次のようになります。 <img src="hero.jpg" onload="performance.mark('hero1')"> <script>performance.mark('hero2')</script> このコードはUser Timing APIを利用しており、Steve氏の作成したテストページでどのように動作するかを見ることができます。 5. 高解像度の画像を使用する画像は、ピクセル化（画像が粗くなり個々の画素が見えること）したりぼやけて表示されるべきではありません。低画質の画像ほど悪いものはありません。ヒーローイメージは、画像がすべてであり、第一印象が重要になります。そのため高画質の画像を使用しましょう。重要なヒーローイメージの場合、要素とsrcset属性やsizes属性を使用して、さまざまな画像のバリエーションを提供することが重要です。低画質の画像 vs. 適正にサイズ調整された画像 6. 異なる画面サイズを考慮する画像は、ディスプレイやプラットフォームに合わせて適切なサイズにしてください。すべてのデバイスに合わせて画像を最適化します。これは、小さなデバイスでは、大きな画像をサイズ変更（リサイズ）またはより小さな画像と交換することです。レスポンシブデザインのWebサイトの開発者は、たとえモダンなWebサイトの場合でも、さまざまなデバイスに合う最適な画像解像度を選択することに苦労します。すべての画面解像度とデバイスに対して、1つの画像では足りないことは明らかです。Webサイトは、すべての異なるデバイスにおいて、またすべての異なる解像度、ピクセル密度、向きにおいて完璧に表示されるように適応しなければなりません。レスポンシブWebサイトを構築する際、開発者が直面する主な課題の1つは、メディア（特に画像）の管理、操作、配信です。幸い、この問題の解決策があります。レスポンシブブレークポイントジェネレーターは、画像のブレークポイントをインタラクティブに生成するのに役立つ、無料のオープンソースのWebツールです。レスポンスブレークポイントジェネレーターは、複数のサイズの画像を管理するのに役立ち、レスポンシブデザイン画像のブレークポイントをインタラクティブに生成できます。 7. 行動喚起（Call To Action）を強調するデザインの主役はヒーローイメージにするとしても、行動喚起（Call To Action、以降CTA）などの要素も含める必要があります。ただし、CTAはヒーローイメージと競合させるべきではありません。色は強調のために非常に重要です。CTAのボタンは他の要素よりも明るい色で目立つようにするべきです。 CTAのボタンの視覚的な重みは、ヒーローイメージと均斉がとれるようにしましょう。ぼかし効果を行動喚起（CTA）にテストするぼかし効果を使用して、ページの視覚的階層をテストしましょう。ぼかし効果のテストは、ユーザーの視線が本当にあなたの思惑通りに移動するかを実験する手助けとなる、簡単なテクニックです。必要な手順は、Webサイトのスクリーンショットを撮り、Adobe XDでオブジェクトのぼかし効果を適用することです。例として、以下のCharity WaterのWebページを見てください。ページのぼやけたバージョンでは、どの要素が目立っているように見えますか？その印象をあなたが気に入らなければ、戻って修正しましょう。ぼかし効果のテストは、デザインの焦点と視覚的階層を明らかにするテクニックです。 8. コントラストをデザインする画像の上にあるタイポグラフィが読みやすいか確認してください。太文字で読みやすくて画像と調和する、しかし画像から独立して目立つようなタイプフェイスを選択してください。画像の上にテキストを配置する予定の場合、画像の主要部分が見えて、認識可能であることを確認してください。オーバーレイおそらく最も簡単な方法は、シンプルなテキストを画像の上に直接置くことです。ただし、テキストと画像のコントラストが十分でない場合は、画像全体に半透明色のオーバーレイを加えると効果的です。 Outlinesは、カラーオーバーレイを使用しています。ブランドカラーを使用すれば、ヒーローイメージを向上させることができます。既存の製品やブランドのデザインをしている場合は、特定の色がすでにそれらに関連付けられている可能性が高いでしょう。原色を特定し、それを画像の前面に表示してみましょう。 Cliqueのヒーローイメージは、アプリの青いインターフェースの色調と合っています。スクリム（scrim）あるいは、スクリムを使用してテキストにコントラストを追加することもできます。スクリムは、オーバーレイされたテキストをより読みやすく柔らかい印象にするために使用される、半透明のレイヤーです。不透明度の値はコンテキストに依存します。デザインに応じてグラデーションの不透明度を選択します。一部のヒーローイメージには、以下に表示される画像のように暗めの60％のグラデーションが必要です。 9. 実際の人物画像を使用する人物画像を使用することは、ユーザーの関心を引くのに非常に効果的な方法です。私たち人間は、人物の顔を見ると彼らとつながっているように感じ、単に商品を買っているような気分にはなりません。しかし多くの企業のWebサイトで、「信頼を築く」ための偽善的な印象の人物画像が使用されていることは、残念です。ユーザビリティテストでは、純粋に装飾的な画像（以下に示すような）がデザインに価値付加を与えることは滅多になく、ユーザー体験を向上させるというより、むしろ逆効果であると示されています。したがって、笑顔で無難な印象のビジネスパーソンの画像を理由もなく使用するのは避けてください。不自然な画像は、浅はかで偽善的な印象をユーザに残します。実践上役に立つルールは、あなたのアプリやWebサイトのキャラクターのイメージに合う人物の高品質の画像を使用することです。画像は、商品、企業文化の本物を表現したものでなければなりません。以下にいくつかのヒントがあります。混雑したショットの画像は避けてください。主役となる被写体が1つの写真を使用します。本物のストーリー性を持つ画像を追求してください。興味深い活動をしている人々の写真を撮ってください。製品がある場合、人々がその製品を使用している写真を撮ることも検討してください。 10. ヒューマンタッチな（人間的な触れ合いの感じられる）イラストヒーローイメージは単なるビジュアルです。あらゆる種類の画像を利用することができます。イラストは人気の高い選択肢になりつつあり、時には写真よりも個性豊かな表現が可能です。イラストは、画像のコンテンツとテクニックによる詳細なデザインの両方を、より制御できます。ユニークなイラストを使用すると、他のサービスと差別化され、より良いブランドの知名度を高めることができるでしょう。 Dropboxは、簡単に理解できるイラストを使用してメッセージを明確に示し、複雑なアイデアを伝えます。イラストは想像力に訴えかけ、見る人との間に強いつながりを確立します。イラストが機能するためには、容易に認識可能なものでなければならず、それが伝える情報は見る人が異なるとしても同じ様に解釈されるものでなければならないのです。複数のイラストを使用する場合、一貫性がなければなりません。ソースが同じであるように、つまり同じ人がイラストを描いたように、見えるようにしましょう。結論クオリティが高く、見るのが楽しく、コンテンツと上手く機能する限り、ヒーローイメージは素晴らしい選択肢です。この技巧を最大限に活用するには、十分なコントラストとCTAのある設計にしましょう。また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを作ることが可能です。独学に限界を感じている場合はご検討ください。

Webデザイン

Xcodeのストーリーボードを使う方法【iPhoneアプリの画面が簡単に作れる】

Xcodeを使ってiPhoneアプリを開発する際に使える「ストーリーボード（Storyboard）」という機能があります。これを使うと、視覚的かつ直感的にアプリの開発を進めていくことができます。今回はアプリ開発初心者でも使えるように、ストーリーボードの使い方をお伝えします。Storyboardの入門としてお読みください。なおこの内容は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプをもとに紹介しています。目次今回の記事は少し長いので、下記の順番で説明していきます。ストーリーボードとは Xcodeでプロジェクトを開始するストーリーボードの背景色を変えるストーリーボードに画面を追加するストーリーボードにボタンを設置するボタンをタップしたら画面が切り替わるようにするシミュレータで確認するストーリーボードとはストーリーボード（Storyboard）とは、Xcode4.2から導入された機能です。ストーリーボードを使うと、アプリ画面のUIパーツのレイアウトや画面遷移を視覚的に作成することができます。使う際にプログラミングの知識は不要ですので、ドラッグ&ドロップなどの操作で簡単に使うことができます。なお、本記事ではXcode5.1のバージョンを使用しています。 Xcodeのインストール方法がわからない場合は、Xcodeのインストール方法の記事をご覧ください。 [PR] iPhoneアプリ開発コースXcodeでプロジェクトを開始するそれではストーリーボードを使ってみましょう。ストーリーボードを使うには、Xcodeでプロジェクトを開始する必要があるので、まずはそこから解説します。最初にXcodeを起動しましょう。最初に下のような画面が出てきますので、赤枠をクリックします。次に、どのようなプロジェクトにするか聞かれますので、赤枠（1）を選び、Next（2）をクリックしましょう。さらに、プロジェクト名や開発するAppの対象デバイスを入力（1）し、Next（2）をクリックします。最後にプロジェクトの保存先を聞かれます（1）ので、保存先を選択していきましょう。ここでCreate（2）をクリックすればプロジェクトが開始されます。ここまでは簡単ですね。プロジェクトが開始できたらいよいよストーリーボードを編集していきます。ストーリーボードの背景色を変えるストーリーボードは、「Main.Storyboard」を開いて操作することになります。 Xcodeの左ペイン、ファイルツリー表記にある、”Main.storyboard”をクリックしましょう。すると、ストーリーボード編集画面に切り替わります。ここで表示された画面の背景色を変更してみます。背景色の変更は、変更したいストーリーボードの画面を選択し、右ペインの(1)から”View”を開きます。すると、中段あたりに”Background”とあるのがわかると思います(2)。これをクリックすると、背景の種類を選択できるようになりますので、一番下にある”Other”をクリックします。ここでカラーパネルが表示されますので、好きな色に変更しましょう。今回はわかりやすいように、赤にしてみました。背景色の変更方法は以上です。ストーリーボードに画面を追加する iPhoneアプリを開発するとなると複数の画面を用意して、切り替えて使うことが多いと思います。ここでは、ストーリーボードでもう1つの画面を追加してみます。右ペイン中段に、4つのアイコンがあります。その右から2番目のアイコンをクリックし、”Veiw Controller”を探しましょう。それをストーリーボード画面にドラッグ＆ドロップします。これだけで、ストーリーボードに画面が追加されました。赤枠が元の画面、黄枠が追加した画面です。ストーリーボードにボタンを設置する続いて、ストーリーボード内にボタンを設置してみます。コードを追加すればイラストをボタンにすることも可能ですが、今回はシンプルなボタンにします。先ほど、画面を追加したメニューを下に進んでいくと、”Button”という項目があります。これを、ボタンを設置したい画面にドラッグ＆ドロップしていきましょう。今回は元の画面（背景色赤）にボタンを設置しました。同様に追加した画面（背景色白）にもボタンを追加しておきましょう。ボタンをタップしたら画面が切り替わるようにするさらに、設置したボタンをタップしたら追加した画面に切り替わる（遷移する）ようにしていきます。これができればアプリっぽいものができ上がります。先ほど設置したボタンをControlキーを押しながらクリックし、画面遷移させたい画面にドラッグ＆ドロップします。線が表示されるのですぐにわかると思います。ここで画像のようなメニューがポップアップで表示されます。これは、「ボタンをタップしたらどういうアクションにするか」を選ぶ画面です。今はなにも考えず赤枠の”modal”を選択しておきましょう。すると、下の画像の赤枠のように画面間に矢印マークが追加されます。これで画面は遷移しますが、遷移した先に何もないためそれ以上進めなくなってしまします。そこで、白い画面（追加した画面）から赤い画面（元の画面）に戻るように設定しましょう。やり方は先ほどと同じです。白い画面にボタンを設置して、赤い画面にControlキー＋ドラッグ&ドロップをします。そうすると、先ほどの矢印マークが2重になり、赤→白、白→赤となっているはずです。シミュレータで確認するここまで完了したら、正しくアプリが動作するかをiPhoneのシミュレータで確認します。メニューバー左上にある再生ボタンをクリックするだけです。（Xcodeのショートカットキーなら⌘＋R です) シミュレータでボタンをタップします。このように白い画面が表示されれば成功です。ここでさらに、ボタンをクリックするともとの赤い画面に戻ることも確認できると思います。今回の記事は以上です。かなり基礎的な内容でしたが、Xcodeのストーリーボードの使い方がわかったのではないでしょうか。合わせて初心者向けのXcodeショートカットキーの記事も読むと、よりXcodeが使いこなせるようになると思います。 [お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。

iPhoneアプリ開発

Javaで画像の縮小・拡大をする方法を現役エンジニアが解説【初心者向け】

Javaで画像の縮小・拡大をする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Javaについてそもそもよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まるでしょう。なお本記事は、TechAcademyのオンラインブートキャンプJava講座の内容をもとに作成しています。田島悠介今回は、Javaに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介画像の縮小拡大をする方法について詳しく説明していくね！大石ゆかりお願いします！目次 Javaでの画像の扱い方 BufferedImageクラスとは画像を縮小する方法画像を拡大する方法実際に書いてみよう Javaでの画像の扱い方 Javaでは、画像を扱うためのクラスとして、ImageIOクラスが準備されています。 ImageIOクラスでは、下記の操作が可能です。画像を読み込む別のファイルに書き込む [PR] iPhoneアプリ開発コースBufferedImageクラスとは BufferedImageクラスはメモリ上に画像データを読み込ませたり、物体を描写するためのクラスです。 BufferedImageクラスは、使用することで画像を縮小、拡大することもできます。画像を縮小する方法画像を縮小する方法は以下の通りです。 BufferedImage 元画像 = ImageIO.read(new File("java.png")); BufferedImage 変数 = new BufferedImage(縮小時の画像の横幅, 縮小時の画像の縦幅, BufferedImage.TYPE_3BYTE_BGR);] 変数.createGraphics().drawImage(元画像.getScaledInstance( 縮小時の画像の横幅, 縮小時の画像の縦幅, Image.SCALE_AREA_AVERAGING) ,0, 0, 縮小時の画像の横幅, 縮小時の画像の縦幅, null); カラーの画像に対して縮小する際にBufferedImageクラスで縮小時のサイズでオブジェクトを作成します。そして、BufferedImageクラスのcreateGraphics().drawImageメソッドを使うことで、縮小時のサイズのオブジェクトに元画像のデータを書きこむことが可能です。画像を拡大する方法画像を拡大する方法は以下の通りです。 BufferedImage 元画像 = ImageIO.read(new File("java.png")); BufferedImage 変数 = new BufferedImage(拡大時の画像の横幅, 拡大時の画像の縦幅, BufferedImage.TYPE_3BYTE_BGR);] 変数.createGraphics().drawImage(元画像.getScaledInstance( 拡大時の画像の横幅, 拡大時の画像の縦幅, Image.SCALE_AREA_AVERAGING) ,0, 0, 拡大時の画像の横幅, 拡大時の画像の縦幅, null); 拡大の時も縮小の時と同じ流れで行うことが可能です。実際に書いてみようここでは、実際に画像を拡大・縮小してみましょう。プログラムソースコード import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.util.Locale; import javax.imageio.IIOImage; import javax.imageio.ImageIO; import javax.imageio.ImageWriteParam; import javax.imageio.ImageWriter; import javax.imageio.plugins.jpeg.JPEGImageWriteParam; import javax.imageio.stream.ImageOutputStream; public class Sample {

Java

XcodeでiPhoneアプリのシミュレーターを使う方法【初心者向け】

iPhoneアプリを開発する際に使うXcodeですが、iPhoneのシミュレーターを使うこともできます。そこで今回はiOSシミュレーターの使い方を解説します。 iPhoneアプリを開発するときは、必ず動作確認が必要ですので覚えておきましょう。ちなみに、スマートフォンサイトを閲覧するときのシミュレーターとしても役立ちます。なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。 XcodeでiOSシュミレータを起動する iOSシミュレーターはXcodeから簡単に起動することができます。やり方は2つあります。1つは⌘＋RのXcodeのショートカットキーで開発中のアプリを実行する方法です。もう1つはXcodeのメニューから起動させる方法です。スクリーンショットにあるように、Xcodeを起動したら、「Xcode > Open Developer Tool >iOS Simulator」と選択すると起動できます。なお、iPhoneのシミュレーターはPCの解像度によってiPhoneの外枠が表示されないことがあります。より大きな解像度のディスプレイを使っている場合は外枠が表示されます。表示されなくても動作に問題はありませんのでご安心ください。作成中のアプリを確認する iOSシミュレーターの役割は、作成中のアプリの動作を確認することです。開発が一段落したらアプリを起動して、自分の思い通りに動作をするか確認しましょう。起動するとこのように開発したアプリが選べるので、クリックするだけです。このデモでは、開発しているアプリのアイコンをTechAcademyに変えてみました。アイコンの変更の仕方はiPhoneアプリのアイコンを変える方法の記事をご覧ください。アプリのアイコンをクリックすると、このようにアプリの動作を確認できるようになります。また、マウスでクリックすることも可能です。 [PR] iPhoneアプリ開発コースSafariを起動する裏ワザという程ではありませんが、アプリの確認方法以外にも便利な点があります。それは、iPhoneのシミュレーターからWebブラウザのSafariを起動できるところです。 URLの入力にも対応しているので、ご自身のサイトがiPhoneで閲覧するとどのように見られるのかを確認することもできます。デバイスを切り替える iOSシミュレーターはデバイスを追加して、バージョンを変更することも可能です。 Xcodeの左上にあるボタンをクリックすると、このようにデバイスの変更が可能です。iPhoneのサイズで4インチ、3.5インチなどを選べる他、iPadもここから選ぶことができます。前述の通り、Safariも開けるのでWebブラウザでどように表示されるかの動作確認にも便利です。また、デバイスは追加することも可能です。上記画像の「More Simulators」をクリックするとこのような画面が表示されます。ここで候補が表示されますので、各シミュレーターの横にある下矢印のボタンをクリックするとダウンロードが開始されます。ダウンロードが完了すると、選択できるデバイスに選択肢として追加されます。今回の記事は以上です。簡単に使えてとても便利なので、ぜひ使いこなしてみてください。シミュレーターの使い方がわかったら、iPhone(iOS)アプリを実機でテストしてみましょう。 [お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。

iPhoneアプリ開発

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

XcodeでiPhoneアプリの起動画面を変更する方法【初心者向け】

iPhoneアプリの起動画面を変更する