ビジョンを実際のアプリに落とし込むまでの9つのステップとは

誰しも「こんなものを作りたい」と思ってもアイデアが形にならないまま終わってしまった経験があるかと思います。自分の描いているビジョンを実際にアプリとして形にするための9ステップを紹介しているので、起業を考えている人はぜひご覧ください。

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

本稿は、Codementorのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Android OSアプリ開発者のAbinash Neupane 氏によって投稿されました。

あなたにも朝起きたときに、大ヒットして億万長者になれるような創造的なアイデアを思いついたことがあるでしょうか。未来を変えることができるようなアイデアを思くことは誰にでもあります。その中の多くのアイデアは空想に終わりますが、中には私たちの生活を大きく変えるような可能性を秘めたものもあります。

ビジョンを実際のアプリとして実現し、未来を変えるためのステップを見てみましょう！

ほとんどのアイデアが単なる「アイデア」で終わってしまうのは、適切なガイドがないためです。

アプリ開発を大量のコードを書くだけの作業だと思っている人もいますが、コードを書くことはアプリ開発の中の1つのステップにすぎません。良いアプリを開発するには、その他にも大切なステップがあります。これら9つのステップを紹介していきます。

1. 最初のステップ

最初のステップはビジョンを広げるのに役立ちます。最初のステップの前に、アプリのアイデアを考える必要があります。アイデアは整理されたものでなくても、ぼんやりとしたビジョンでも構いません。

最初のステップでは、アプリを開発する目的やゴールを定め、ゴールを達成するための計画を詳細に立てます。また、すでに似たようなアプリが世の中に存在していないか、調べておきます。

initiation-phase-android-development-620x252

下の画像はプロジェクトの計画の一例で、プロジェクトに必要となるすべてのタスク、段階、マイルストーン（プロジェクトの進捗管理のための各節目）を設定したものです。

プロジェクトによっては、チームのメンバー全員が最初のゴール、目的、価格などを把握できるように、長期的な製品ライフサイクルを見据えて「プロジェクト計画書」を作成することもあります。

app-wireframing-620x397

アプリについてのアイデアをデバイスのスクリーン上に描いておくのもいいでしょう。

また、スケッチを描くのもビジョンを明確にするのに役立ちます。アプリの主な機能、およそのレイアウトや構造などを、スケッチに描いておけば、アプリのコンセプトを視覚的につかめます。

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

2. 要件工学（RE：Requiment Engineering）

requirements-620x213

アプリについて明確なビジョンやゴールを設定したら、次は要件工学です。

このステップでは、アプリのゴールを拡張します。アプリによって実現できることや、ユーザーにとってのメリットを定義します。

また、ターゲットとなるユーザーを設定することで、価格戦略や市場戦略に役立てましょう。プロジェクトが予算内に収まるかどうかもチェックします。アプリの開発が実行可能かどうか話し合うのもいいでしょう。

要件工学で使える「5W」の問いは多数あります。

アプリのゴールは何か？（What）
このアプリはなぜ他とはちがうのか？（Why）
誰がこのアプリを使うのか？（Who）
ユーザーはいつアプリを使うか？（When）
ユーザーがアプリから得られる最大のメリットは何だろう？（What）
ユーザーはどんな場面でアプリを使うのか？（Where）

収益

profit-from-app-620x348

アプリを開発するときには、収益を図る方法を考えておくことも必要です。例えば次のような方法があります。

有料アプリ
In-App Purchase（iOSにおいてアプリ内課金を可能とするAppleの組込みテクノロジー）
Admob（アプリの収益を高めるためのGoogleの広告サービス）
iAd（iOSのアプリ内に実装できる広告）

マイルストーン（プロジェクトの進捗管理のための各節目）

マイルストーンを設定するメリットは、タスク、開発にかかる時間などの管理が容易になることです。

スケジュール管理を時間軸ベースで把握するのに役立ちます。平均すると、AndroidやiOSのアプリ開発には約18週間（約4ヵ月半）かかります。

ワイヤーフレームとストーリーボード

app-wireframes-620x405

次のステップは、アプリの動作性を示すために、ワイヤーフレーム（レイアウト）やストーリーボード（ユーザーの利用体験を漫画のような一連の画像で表現したもの）を作成することです。最初のビジョンをよりクリアーに表現できます。

ワイヤーフレームでは開発するアプリの、モックアップやプロトタイプを作成します。モックアップやプロトタイプを作成できるアプリには、Balsamiq、Moqups、HotGlooなどがあります。

3. 技術的な指標の分析

statistics-and-analytics-620x267

次の技術的な指標について分析をします。

スケーラビリティ（拡張性）：アプリの潜在的な成長可能性
アベイラビリティ（可用性）：ダウンタイム（故障や停止などでシステムを使えない時間）を考慮した、システムの利用可能率
メンテナビリティ（保守性）：保守管理のしやすさ
モジュラーアプローチ
パフォーマンス
ポータビリティ（移植性）：例えば、AndroidやWindows PhoneなどのOSに対応したマルチプラットフォームであること
ユーザビリティ：エンドユーザーを中心に考えた開発
バージョン管理

このステップにおいては、アプリを開発するために必要なテクノロジーについて話し合います。例えば、アプリに必要なバックエンドの処理を行う技術、データベースの決定などです。SQLiteのようなデータベースを使えば、起動中のアプリを閉じても、データを失うおそれはありません。

次のようなテーマについても話し合います。

アプリのデータを格納する必要はあるか？あるとしたら、どのように格納するか？
どのようなタイプのデータベースを利用するか？
アプリは静的なのか動的なのか？
アプリに求められるセキュリティ要件は？
アプリのセキュリティの欠陥にはどのように対処するか？
サードパーティーの製品を統合するか？するとしたら何を選ぶか？
将来的にアプリの開発をさらに進めるかどうか？

分析を終えたら、次のような項目を含んだ「プロジェクト文書」を作成しましょう。

導入
問題の提示
目的
方法
予算とスケジュール
リファレンス（仕様や機能の解説）

project-documentation-620x557

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

・困ったときに、質問や相談できる相手がいるため挫折しなかった
・プロとして必要なスキルのみを深く学べたので無駄がなかった
・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に無料相談に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まですべて無料でご利用できます。
無理な勧誘は一切ないので、お気軽にご参加ください。

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

4.デザイン

Rendered Look and Feel - User Experience Concept

デザインのステップでは、ワイヤーフレームを、クリーンで魅力的なユーザーインターフェース（UI）に作り変えることで、グラフィカルユーザインタフェース（GUI）を作成します。

UXデザイナーはインタラクティビティの高いデザイン要素を設計できますし、アプリの外観や使いやすさに関することはUIデザイナーに頼むこともできます。

message-app-ui-620x464

アプリストアで目立たせるためには、使いやすく高品質なデザインのユーザーインターフェースにするべきです。デザインは、ブランド戦略を考慮したものにしましょう。また、モバイル端末のスクリーンサイズの違いに応じた解像度で設計します。

5. 開発

male-illustration-engineer-620x331

この開発のステップは、主にプログラマーが分担します。開発に使うテクノロジーは、ステップ3の分析であらかじめ定めておきます。また、ステップ4で考えたデザインを取り入れて、実際のアプリへと実現します。

また、開発と並行してテストも実施して、バグやエラーの早期発見と解決に努めましょう。プログラマーは、アプリのバックエンドの処理を定めるソースコードの記述と管理も行うことになります。

OS（プラットフォーム）ごとにそれぞれソフトウェア開発キット（SDK）があります。また、アプリをどのOS（プラットフォーム）向けに開発するかによって、ネイティブ言語が決まります。

最後に、ステップ2の要件工学（RE）で作成した要件を基準にして結果を評価します。また、ステップ4のデザインの基準からも評価します。例えば、アプリケーションが実際にAndroid 2.3以降のバージョンのOSをサポートできているかを確認します。

6. テスト

why-is-testing-necessary-620x247

ここまで来たらアプリの基本は完成です！このステップでは、ターゲットとなるユーザーに試用してもらいます。このテストは、モバイルアプリの開発プロセスの中でも特に重要なものです。

テストにおいては、アプリの機能性、ユーザビリティ、整合性（コンシステンシー）などを試して、もし問題があればアプリを公開する前に修正します。

テストの手法にはいろいろなタイプがあります。例えば、Android Studioで提供されているテストツールなどを利用できます。ここではテストの一般的な手法について述べます。

自動テスト

自動テストはアプリの開発中に行われます。自動テストは、アプリがデバイス上で動くかどうか、またコードが機能するかどうかを確かめることが目的です。

単体テスト（ユニットテスト）や統合テスト（インテグレーションテスト）も、自動テストの一部です。

ユーザ受け入れテスト（UATテスト：User Acceptance Testing）

alphabetatestingphase

ユーザ受け入れテストとは、開発したアプリをユーザーが利用できるか試すプロセスです。ターゲットとなるユーザーの何人かに実際にアプリを試用してもらいます。

アプリがこのユーザー受け入れテストに合格したら、今までの設計が現実的に機能していると確かめられたことになります。ユーザー受け入れテストはアルファテストとベータテストから構成されます。それぞれ見ていきましょう。

アルファテスト（Alpha Testing）

アルファテストは、アプリの開発に関係したユーザーにアプリを試用してもらうことで行います。つまりこの場合のユーザーとは、アプリに使われているテクノロジーや、アプリの機能をあらかじめ知っている人物です。

ベータテスト（Beta Testing）

ベータテストは、アプリに使われているテクノロジーを知らない、いわば実際のユーザーにアプリを試用してもらうことで行います。ベータテストを実施する意味は、アプリが現実の利用環境で上手く機能するかを試すことです。

7. アプリの公開

google-play-store-3-620x387

ここまで上手く行ったら、次のステップはいよいよアプリの公開です！このステップでは、アプリを各OSのストアに公開します。AndroidアプリはGoogle Play、iOSアプリはApp Storeの各ストアへアップロードします。

Google Playにアプリを公開するには、25米ドルの登録料が必要ですが、登録後はデベロッパーアカウントでアプリをいくつでも公開できます。App StoreにiOSアプリを公開するには、Apple Developer Program への参加料金として99米ドル支払う必要があります。

8. 保守管理（メンテナンス）

アプリをストアに公開してユーザーがアプリを使い始めたら、次はアプリの保守管理（メンテナンス）を継続的に行います。ユーザーのニーズと期待に応えられるような保守管理をしましょう。

ユーザーからのフィードバックは、ユーザーがどのようにアプリを使っているかをよく理解するために大切なもので、アプリ解析ツールのソフトウェアが役に立ちます。ダウンロード数だけでなく、どんなユーザーがいつ、どこで、どのようにアプリを使っているかが分かります。

feat-hed-mobile

ユーザーのアクセス経路
アクティブユーザー率（Activation percentage：利用頻度が高いユーザーの率）
リテンション率（Retention percentage：ユーザーの再訪率）
リファラル（Referral：ユーザーがアプリにアクセスするきっかけとなったリンク元）の有無

などを知ることができます。アプリ解析ツールは、ステップ6のテストの段階から導入するのがいいでしょう。

人気のある解析ソフトウェアです。※（）は主な対応OS、開発環境、言語など

Apsalar (iOS、Android)
Flurry (iOS、Android、Windows Phone、Blackberry、Java ME)
Mixpanel (iOS、Android)
Google Mobile Analytics：Googleモバイルアナリティクス (iOS、 Android)
Localytics：ロカリティクス (iOS、Android、Windows Phone、Blackberry、HTML5)
Countly (iOS、Android、Windows Phone、Blackberry)

アプリのパフォーマンスを追跡することで、必要があれば修正を加えることができます。

また追加のサポートが必要かどうか通知してくれるサービスもあります。解析によって、アプリの評価やユーザーのフィードバックもモニタリングできます。

9. マーケティング

featimg_mobile-app-marketing-620x280

アプリの開発が完了したら、アプリを効果的に市場に売り出しましょう。アプリの開発と同時並行して段階に応じて、広告やマーケティングを行いましょう。広告とマーケティングの2つがこのステップの要です。

あなたの開発したアプリを、ストアにあるその他無数のアプリから目立たせることが重要です。アプリのダウンロード数を増やす方法には、Googleアドセンスなどがあります。他のアプリ内の広告で、あなたの開発したアプリを宣伝することができます。

結論

今回はライフサイクルを考慮したアプリ開発の主なステップを紹介しました。

これらの9つのステップについて正しい知識を備えれば、アプリの開発に成功できます。また、必要であればいつでもその道のエキスパートにアドバイスを求めるといいでしょう。

[お知らせ]TechAcademyでは初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。アプリ開発からWebサービスの開発、UI/UXデザインなどアイデアを形にしたいと思っている方は、ぜひご覧ください。

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

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

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

「受けてよかった」と感じていただけるようカウンセラーやエンジニア・デザイナーがあなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

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

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

【プログラミング要らず！】初心者でも使える！スマホアプリが開発できるおすすめツール11選

自分でプログラミングしなくてもスマホアプリを開発できてしまうツールがあることをご存知でしょうか。今回紹介するツールを使えば手軽にスマホアプリ開発をするこ...

スマートフォンアプリ開発

React Nativeとネイティブアプリでの開発の違いとは

本稿は、Course Reportのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、TurnToTechのAditya Naraya...

スマートフォンアプリ開発

【Webサイトをアプリに変換！】誰でも簡単に「Joren」でアプリが作れる！

自分で持っているWebサイトをアプリにできるサービス「Joren」が登場しています。 WebサイトのURLを入力することで、スマホアプリを簡単に作成できる...

スマートフォンアプリ開発

マネタイズ手法を徹底比較！モバイルアプリ市場の現在とこれからのトレンド

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、instinctools EE Labs...

スマートフォンアプリ開発

ASOの施策にも役立つ！App StoreとGoogle Playを徹底比較

本稿は、Eminesoftのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Eminesoftの編集長でありマーケターのEllina...

スマートフォンアプリ開発

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

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

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

Webデザイン

Pythonのテストフレームワークunittestとpytestの違いを現役エンジニアが解説【初心者向け】

Pythonのテストフレームワークunittestとpytestの違いについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次1. 最初のステップ2. 要件工学（RE：Requiment Engineering）3. 技術的な指標の分析4.デザイン5. 開発6. テスト7. アプリの公開8. 保守管理（メンテナンス）9. マーケティング結論そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Pythonのテストフレームワークunittestとpytestの違いについて、詳しく説明していくね！大石ゆかりお願いします！テストフレームワークとはテストフレームワークとは、ソフトウェアのテストを支援してくれる機能群のことをいいます。この機能を使用してテスト用コードを作成し、テスト用コードから開発したコードを呼び出して、期待通りの結果が出力されるのかをテストします。このテスト用コードは再利用できるため、テストを手動で行うよりも効率的にテストできます。このようなメリットがあるため、開発現場でもテストフレームワークを使用したテストが行われています。 unittestについてまず、Pythonの標準モジュールで提供されているテストフレームワーク unittestについて紹介します。 unittestは、Javaでテストを行う際に使われるJUnitに触発されて開発されています。そのため、他の言語で標準で取り入れられているテストフレームワークと同様の方法でテストできます。つまり、unittestを使ったテストが分かれば、他言語のフレームワークを使ったテストもしやすくなります。今回は、以下の引数の数を2倍にする関数のテストにおいて、unittestを使用してみましょう。 # 引数の数を2倍する def num_double(num): return 2 * num まず、こちらのコードをnum_double.pyというファイル名で保存しましょう。続いて、以下のテスト用コードをtest.pyというファイル名で保存しましょう。 import unittest from num_double import num_double class Test_num_double(unittest.TestCase): def test_num_double(self): num = 3 expected = 6

Python

ほとんどのデザイナーが気付いていない「UXの4つの間違い」とは

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、HooktoWin.comの共同設立者であるAndrew McDermott氏によって投稿されました。デザイナーは不可能を可能にすることを期待されます。信じられないほど複雑なプロセスを、シンプルで美しいものに作り変えるよう求められることも、何度もあるかもしれません。そして成功したときには、ロックスターになったような気分を味わえるでしょう。しかし、こうした大きな期待に応えられなかったときには、ひどく落ち込むかもしれません。デザイナーには完璧主義者の人が多く、自分自身が自分に対する最悪の批評家であることもよくあります。間違いを自分の責任と見なして、全てを台無しにしてしまったかのように思うこともあります。それでも、落胆するような状況において間違いを受け入れることで、これを成長と学びの機会とすることができるはずです。もし本当のことをお伝えするとしたら…… デザイナーが気づいていない真実：間違いのほとんどは、デザイナーの責任ではありません。辛い現実：いずれにしても、デザイナーは責任を負うことになります。デザイナーに不足しているのは、人についての知識新規の仕事やプロジェクトにおける、デザイナーの目標設定の仕方が、間違いの原因というわけではありません。ほとんどの場合、実際はその逆です。デザイナーは、多くの人が気にしないような細部のデザインまで、こだわりを持って熱心に取り組みます。神は細部に宿ることを知っているからです。問題となるのは、人についての知識が不足しがちなことです。これは、デザイナーが学校で教えられないことですが、仕事に大きな影響を与えます。もしデザイナーが正規の（または非正規の）教育を受けていれば、その過程で自分独自のデザインを究めることを求められます。また、デザインの原則、デザインと配色の関係、色彩なども学びます。しかし、これだけでは十分ではありません。デザインや美術について教育を受けることはあっても、人について深く学ぶ機会はありません。こうした理解不足は、デザインに影響し、ひいては予期しないUXの間違いの原因となります。デザイナーに不足しているのは、人についての知識なのです。 UXの間違い1：ユーザーが実際以上に多くを知っていると思い込むことデザイナーは合理的な人々です。インターフェースの設計に多くの時間を費やすため、デザインがWeb上でどのように機能するかを直感的に理解しています。「これは常識だ！」とデザイナー自身が思っていても、実際はそうではないこともあります。デザイナーにとっての常識が、ユーザーにも通用するとは限りません。デザイナーは設計に多くの時間を費やしているために、よく知っているだけなのです。また、デザイナーがプロフェッショナルであるのに対して、ユーザーが同等の専門性を備えていないこともあります。こうした理由から、ユーザーに対して次のように仮定するのは、間違いです。適切な質問を選ぶことができる設定の操作について理解しているアイコン、マーク、ロゴの意味を知っているコンテンツに意識を集中し続けることができる Webサイトで提供している指示をよく読んでそれに従う必要とするコンテンツの見つけ方を知っている問題の核心が見えてきたでしょうか？デザイナーがこのように仮定すること自体は合理的ですが、問題を引き起こすおそれがあります。なぜなら、こうした仮定は現実に基づいたものではないからです。利用方法が全く分からないユーザーもいますユーザーの中には設定の操作が初めてという人もいますあなたの設計したサイトを、乱雑で混乱するようなデザインだと思うユーザーもいます関心が他に向いているマルチタスク型のユーザーは、コンテンツに集中するほど時間がありません指示に従うのを拒むユーザーもいますほとんどのユーザーは、見ているコンテンツについて詳しく知っていませんこうした場面でデザイナーに求められる仕事は、「迷える羊の群れを、頭数を減らして束ねる」ことです。条件に合うユーザーだけを選び抜き、意図したプロセス通りに彼らがサイトを利用できるような設計にします。その他の条件に合わないユーザーは、除外します。 UXの間違い2：ユーザーのためのデザイン「ユーザーのためのデザイン」は、ここ数年で繰り返し提言されているアドバイスで、頭にたたき込まれているデザイナーも多いかもしれません。デザイナーは、ユーザーのニーズをよく理解して、ユーザーを中心にデザインするよう教えられています。しかし、このアドバイスには見落としている点があります。「なぜ？」と不思議に思うかもしれません。見境なく教え込まれているアドバイスですから。その見落としている点とは、必ずしも全てのユーザーがターゲット・オーディエンス（Target audience：広告やマーケティングにおいて、目標とする顧客）と一致するとは限らないことです。サイトを利用しているユーザーが、「求めているユーザー」像と一致しないことがあるのです。例として、Googleを考えてみましょう。 Googleは、そのエネルギーや注意の大半をユーザーに向けています。Googleにとってのユーザーとは、検索者です。検索者により良いユーザー体験を提供するために、多くの時間と巨額の資金を投資しているのです。しかし、検索者がGoogleの唯一のユーザーでしょうか？実は、その他にもGoogleのユーザーは存在しています。広告主：Googleは広告主が自らの命令に従うことをよく知っています。Googleは、広告主やサイト運営者に対してポリシーを公開しています。もし彼らがGoogleのポリシーに違反して、好き勝手に利用するとしたら、広告掲載やサイトは強制停止されます。ボット（クローラ）：Googleは、ボットなどによってサイト上で「通常以上のトラフィックが検出」された場合に、これをブロックします。検索している主体が人間でも、誤検知（False positive）によりブロックされてしまうこともよくあります。詐欺者：Googleは詐欺サイトもブロックしています。例えば、偽のダウンロードボタンをクリックすると、ランサムウェア（ransomeware）がコンピュータにインストールされるよう仕組んであるサイトなどです。検索者：Googleの検索エンジンの利用者です。このユーザーたちこそGoogleに利益をもたらしています。彼らが広告をクリックしたり、アプリケーションを利用したり、ソフトウェアをダウンロードすることで、Googleに収益が発生する仕組みになっています。 Googleは、自らの目標や利益に反するユーザーに対しては、ユーザーエクスペリエンスの提供を拒否しているのです。 Googleは、ほとんど全てのユーザーに提供されていますが、Googleのユーザーリストに載っていない人々（ボット）は締め出されます。広告主が検索者にスパムを送信するとしたら、広告掲載を強制停止されます。Googleは、自らの目標や利益に反するユーザーに対しては、提供を拒否しているのです。「ユーザーのためのデザイン」は、デザイナーがターゲット・オーディエンスだけに意識を向けるという前提があってこそ有益なアドバイスになることは、十分理解できるかと思います。しかし、多くのデザイナーがユーザーについて見落としている重要な点は他にもあります。それは次の「UXの間違い3」で述べるとしましょう。 [PR] プログラミングで挫折しない学習方法を動画で公開中UXの間違い3：フリクションが不十分であること Webデザインにおける「フリクション（friction）」とは、Webサイト（のレイアウトに使われている要素）の利用を阻害することを意味します。一般にデザイナーたちは、フリクションを悪いものだと考えています。Webサイトを上手く設計しなければ、意図した通りにユーザーが行動しないおそれもあります。こうしたイメージから、デザイナーはフリクションを恐れがちです。しかし、全てのWebサイトにはフリクションが必要です。もし音楽を聴いていて、うるさいと感じたらどうしますか？おそらく音量を下げますね？同じことがフリクションにも当てはまります。ユーザーは音楽に、フリクションは音量調節のダイヤルに、それぞれ例えることができます。望ましいユーザーだけをWebサイトに集めるために、いわばフリクションというダイヤルで、音量を上げたり下げたり調整するのです。フリクションを活用しているWebサイトの例を、次にいくつかご紹介します。 Craigslist（クレイグズリスト）：Craigslistは、同じ広告を50回連続で投稿されたりするのを嫌がります。そのため、Ghostingという技術によってフリクションを生み出しています。ユーザーがスパムを送信したり、広告を過度に多数回投稿した場合には、広告はブロックされて誰にも見えないように非表示になります。 Google：Googleはユーザーに自らのポリシーを尊重してもらいたいようです。もしサイトを悪用したり、検索結果を利用してWebスクレイピング（Web scraping）を行えば、「通常と異なる」ユーザーとして検出されます。さらに警告を無視するとブロックされます。 Quora：Q&Aのサイトです。利用ガイドラインはシンプルで、「Be nice, be respectful.（マナーと節度をもって利用すること）」というポリシーを掲げています。このポリシーを無視するユーザーには警告を与え、ブロックまたは利用禁止にします。フリクションを利用することで、他のユーザーにとって安全なサイトであることを保証しているのです。Quoraのサイトのシステムは、ユーザー体験の質を最大限に高めるようにデザインされています。デザイナーにとってフリクションは、問題となるかもしれません。しかしそれはデザイナーが、フリクションというダイヤルを調整する方法を知らなかったり、またはフリクションが存在すること自体知らないからです。デザイナーのフリクションに対する理解が不足していると、フリクションに過剰反応してしまったり、皮肉なことに望ましくないユーザーにWebサイトを悪用されることも起こり得ます。では、フリクションを具体的に実装するとしたら、どのようになるのでしょうか？例を見てみましょう。問い合わせフォームに、キャプチャを3～4つほど複数設けて、人間であることを判別する利用に至るまでのステップ数を必要以上に増やすことで、ユーザーをふるいにかける文字で埋め尽くされたページ、またはデザイン要素がぎっしりと並んだページにする入力フォームを必要以上に多く設置することで、ユーザーを疲労させ、興味を失わせる（逆に入力フォームを十分に設置しないとしたら、全てのユーザーのアクセスを容易にすることになります。）コンテンツと関連性の低いストックフォトや画像を使うことで、ユーザーがコンテンツの意味を理解する妨げとするユーザーに個人情報や支払い情報の入力を求める一方で、サイト運営者の顔写真や個人情報などは可能な限り非公開にしておくフリクションは重要な設計であり、その形やサイズは様々ですが、多くのデザイナーが理解に苦戦するのは確かです。 UXの間違い4：上司の指示にいつも忠実であることこの間違いを回避するには勇気を要します。それに加えて、さらに重要なことですが、目標を明確に理解していることも必要です。現在デザインしている要素は、どのような完成形が望ましいのか、開発しているWebサイトの目標は何なのかなどです。目標に関するこうした質問にクリアで決定的な答えを出しておくことは、必須ですその理由は、あなたの上司、会社の役員会、クライアント、関係責任者から、目標に反する要求をされることがあるからです。相手の要求通りに進めたら良い結果は生まれないと、経験から予測できることもあるかもしれません。当初の目標に反して進めた結果、失敗プロジェクトとなるおそれもあります。もっとも、「指示通りに仕事をこなしてさえいれば、彼らは報酬を支払ってくれるから構わない。」という考えで、上司に協調するのは簡単ですが。自分の意見を声に出して伝えることが非常に重要です上司が自分自身のために行動しない場合には、あなたが上司に代わって行動することが重要です。もし上司が、彼ら自身の利益を損なうような指示を出してきたら、あなたの意見を声に出して伝えましょう。悪いニュースを伝えるべき場面です。上司に彼ら自身が犯そうとしている間違いを理解してもらうためです。もし自分の意見を声に出して伝えないことが習慣化したら、平凡なポートフォリオしか生まれないほとんどのデザイナーは自分の意見をはっきりと伝えることはありません。仕事を失ったり、キャリアに傷が付くのを恐れているからです。しかし、そのことが逆にこうした事態を招く原因となります。この間違いに対処する手立てが何もない場合にはデザイナーとしてチームに参加したときに、計画やデザインがすでに決定されていた場合にはどうするべきでしょうか？まずチームの他のメンバーと話し合いを持ちましょう。そして自分の意見をサポートする根拠（例えば、リサーチ、レポート、データなど）を十分に用意した上で、プロジェクトの責任者に意見を伝えましょう。最初は不可能に思えるかもしれませんが、実際には行うことは可能です。小さなステップから始めて、段階を追ってゆっくりと進めてみましょう。あなたはデザイナーとしてプロフェッショナルです。デザインツールを活用すれば、他の人が見逃してしまうようなUXの間違いを見つけることもできると思います。間違いを正すことで、複雑なプロセスを、シンプルで美しいものへと作り変えることができるでしょう。 [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。プログラミングを独学で学習していて、このように感じた経験はないでしょうか？・調べてもほしい情報が見つからない・独学のスキルが実際の業務で通用するのか不安・目標への学習プランがわからず、迷子になりそうテックアカデミーでは、このような

アプリデザイン

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

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

Webデザイン

【サイト改善を劇的に！】Webサイト上でA/Bテストを行う4つの明確なメリットとは

本稿は、Webdesigner Depotのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。本記事はBen Moss氏によって投稿されました。 A/Bテストは一般的に、Webサイト上の異なる要素をテストするために利用されてきました。そしてそれらは、数値的に優劣が測定可能な領域でのみ利用されてきました。しかし残念ながら、これまでA/BテストはWebサイト全体のデザインを向上させる術としてあまりにも軽視されてきていました。 A/Bテストは正しく行えばWebサイトのコンバージョン率を飛躍的に向上させる強力なツールになりえます。 A/Bテストを行う際は、時間をかけて仮説を立て、A/Bテストを実施します。そして、7日間から10日間かけてデータ収集から結論を出すまで行います。最終的に、どのデザインが一番良い、どのデザインがコンバージョン率を向上させるかなどを導いていきます。それでは、このテスト手法がコンバージョン向上に寄与する要素とは何でしょうか？ A/BテストはWebサイトのパフォーマンスを測定する A/Bテストを実施している最中は、あなたは主なWebサイト運営上の指標を分析することができます。それを行うことで、現状のWebサイトがどの程度のパフォーマンスで、新しいデザインの場合はどれだけ向上するかを確認することができます。 Google Analyticsなどの計測ツールを使う場合、現状のWebサイトのパフォーマンスを、大きく3つの軸から見ることができます。基本的な測定項目・ユニークページビュー： 1人のユーザーの1セッション中のページビュー数で測定されます。・ページビュー：ページが何回見られたかの指標です。この指標の範囲は製品ページやブログ、コンタクトページなどに制限されず、どのページも計測対象になります。・ユーザー数：何人Webサイト、もしくは特定のページに訪問したかを測定する指標です。・モバイル：モバイルデバイスでWebサイトに訪問したユーザーの数を確認する指標です。異なるモバイルデバイスで訪問された場合は別々に測定されます。この指標は、Webサイトのデザインをモバイルユーザー向けにするか、デスクトップユーザー向けにするかを検討する上での指標となります。・Medium/Source：どのチャネルがWebサイトにユーザーを誘引しているかを確認できます。・ロケーション：ユーザーがどこの地域から訪問しているか確認できます。これは、よりターゲットを絞ったコンテンツ制作や広告設計のヒントになります。エンゲージメント指標・平均滞在時間：平均してユーザーがどれだけ特定のページに滞在したかを見ることで、どれだけユーザーを惹きつけられたかを測ります。・ページ/セッション： Webサイトに訪れたユーザーがどれだけ多くのページを一回の訪問で見たかを測る指標です。・新規/リピート：どれだけ新規/リピートユーザーが多いか確認する指標で、リピート訪問するほど訪問者を惹きつけられたかどうかを判断します。・リファラー：外部のWebサイトがどれだけWebサイトのコンテンツへリンクを貼ったりシェアしたりしているかを確認できます。成約率指標・ゴールコンバージョン率：全体のコンバージョン率です。この指標は、全体のゴール数を全体のセッション数で割ったものです。・ゴール完了：どれだけ速くゴールにたどり着けたか、また、マーケティングとA/Bテストを適宜調整すべきかを示してくれます。売上トランザクション： Webサイトの収益率や、Webサイト上でどれだけのトランザクション(購買)を実現できたかを示します。購買期間：ユーザーが新しいデザインのWebサイトから購買するのにどれだけの期間を要するか推測する基となります。数日から数週間にわたることもあります。アシストコンバージョン：何が購買を決断するのに貢献したかを確認する指標です。 A/BテストはWebサイトの課題を見つけるのに役立つ A/Bテストは、どこのエリアに課題があり、売上を上げるためにはどこのエリアを改善すべきかを示してくれる素晴らしいツールです。A/Bテストで見つけた課題を解決していくなかで、あなたはWebサイトのコンバージョン率をあげながら、Webサイトのデザインを向上させていくことができます。 A/Bテストを行う中で、あなたは以下に紹介する項目の課題を見つけることができるでしょう。・画像：残念ながら、多くのデザイナーは質のいい画像を使用していません。これは全体的な売り上げに影響すると同時に、提供しているサービスの全体的な評判にも影響を及ぼします。・コールトゥアクション(CTA)： CTAは多くのデザイナーが頭を悩ます部分です。CTAは、異なるポータルやネットワークを介してユーザーにつながることを促進するというものです。Webサイトのコンバージョンが売上や定期購読、ダウンロードであれば、あなたは魅力的でよくデザインされたコールトゥアクションをつくり、ユーザーのモチベーションを上げなければなりません。・コンタクト詳細：多くのデザイナーは特に変哲の無いコンタクトページを作りがちです。それを見直して、ソーシャルメディアやオプトイン、問い合わせフォームや住所や電話番号などの企業情報を掲載したコンタクトページの設計を研究しましょう。・ナビゲーション：ナビゲーションもWebサイトのレイアウトやデザインによって課題を持ちえます。Webサイトのナビゲーションは、訪問者を混乱させずに目的のページに最低限のクリックで辿り着けるようにしなければなりません。また、ナビゲーションには、明確にラベルを付けて、ユーザーが欲している情報にたどり着くために何をクリックしているか分かるようにしなければなりません。 [PR] プログラミングで挫折しない学習方法を動画で公開中A/Bテストは実験を可能にする A/Bテストは、訪問者がWebサイト上の何が好きで、何が嫌いかを確認する様々なデザインテストや分析をする機会を与えてくれます。テストする際は以下の項目もチャレンジできます。訪問者のフロー：どうやってポイントAからポイントBにたどり着いたかレイアウト：メニューやボタンサイズ、フォーマットなどのレイアウトテキスト：ヘッドラインや詳細、コールトゥアクションやコンテンツそのものビジュアル要素：イメージやカラー、ビデオやブランドロゴなど A/Bテストを行う際、コンバージョン率を上げるために、以下の取り組みを行っています。・ユーザーがゴールにたどり着くまでに気を散らすであろう要素を排除しています。その対象はナビゲーションエリアかもしれません。・コールトゥアクションに注力しています。なぜなら、テキストは一定の人に想定と異なった捉え方をされてしまうことがあるからです。・一貫性を持つようにしています。そして、A/Bテスト中は1つの要素の変化だけを検証します。・A/Bテストはサイト全体の質の向上を狙い、一つ一つのページの最適化を狙うものにしないようにしています。訪問者が好むWebサイトを制作しているときは、あなたは全体のコンバージョン率を上げるチャンスを持っています。A/Bテストの結果をもとにWebサイトのデザインを変更していくことは、訪問者を惹きつけるのに大いに役立つことでしょう。 A/BテストはWebサイトのマーケティングポテンシャルを上げる A/BテストはあなたのWebサイトを効果的で収益性の高いサイトに変化させるための優れたツールです。丁寧にA/Bテストの結果を分析することで、コンバージョンを最大化するための要素に修正を加えていくことができます。コンバージョンを向上させる最も優れた方法は、あなたがA/Bテストから得た全てをWebサイトに反映していくことです。ここからは、あなたができるいくつかの取り組みを紹介していきます。指標のターゲット： A/Bテストの前に、A/Bテスト時に達成したい目標を決めて、テスト後にA/Bテストが成功だったか失敗だったか判断できるようにしておくと良いでしょう。フィードバック： Webサイトにユーザーが訪問した際に、フォームなどでフィードバックをもらえる仕組みを入れておきましょう。トラフィックの多いページの選定：ランダムにページを選んでテストをする前に、Webサイトを効果的なマーケティングツールにするにはトラフィックの多いページを先に取り組むべきです。トラフィックの多いページはより多くの人に見られ、より多くの人が訪問します。一般的にランディングページはA/Bテストをしてデータを集め解析すべき鍵となるページと言われています。コンバージョン率を上げ、思い込みや仮説だけでの行動を減らすことで、競争において有効なレバレッジがかけられるでしょう。 [お知らせ]TechAcademyでは初心者でもWebマーケターになれるWebマーケティングオンラインブートキャンプを開催しています。SEOも含めてメンターのサポートによって短期間で習得可能です。プログラミングを独学で学習していて、このように感じた経験はないでしょうか？・調べてもほしい情報が見つからない・独学のスキルが実際の業務で通用するのか不安・目標への学習プランがわからず、迷子になりそうテックアカデミーでは、このような学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供

Webマーケティング

デザイナー必見！クオリティの高いUIを作るために必要な7つの要素とは

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UX Phoenixのインテグレーションマネジャー、エンジニアであるSamella Garcia氏によって投稿されました。ユーザーインターフェース（UI）のデザインは最近のホットな話題ですが、それには理由があります。デジタルエクスペリエンスが私たちの生活の大部分を占めるようになり、クオリティの高いユーザーエクスペリエンス（UX）の価値が今まで以上に高まっているのです。モバイル技術、デジタル技術、 IoTの今後の目覚ましい成長を考慮すれば、UIのクオリティは現時点で重要であるだけではなく、将来的にはさらに重要になるでしょう。 Webサイトから、車内の液晶ディスプレイ、部屋のサーモスタットに至るまで、私たちの毎日は数多くのUIで溢れています。ユーザーはデジタルディスプレイの体験を増やすにつれて、数年前よりも質の高い体験を期待するようになりました。そのため、企業にとって顧客への良いUXを慎重に検討することが不可欠です。この記事では、クオリティの高いUIを作るために大事な7つの要素をご紹介します。 1. シンプルさ優れたインターフェースは目立つものではありません。派手な装飾や不必要なデザイン要素から構成されてはいません。質の高いUIは、合理的でシンプルなデザイン要素から構成されているのです。インターフェースをデザインするときには、機能やコンテンツを追加する前に、「ユーザーがタスクを実行するときに、本当に必要なものであるかどうか？」を考えてください。インターフェースの構成要素は、ユーザーにとって必要最小限なものにします。自己満足のためだけに要素を加えるのではなく、UXのクオリティに意識を集中しましょう。「シンプルさ」の原則を見事に実践している例が、MAAEMOのWebサイトです。MAAEMOはノルウェーのレストランで、Webサイトのトップページに最初に表示されるのは、予約のオプション（左上のBook a table）のみです。すっきりとしたインターフェースにするために、その他のオプションは、右上のハンバーガーメニュー（三本線が平行に並んだボタン）に隠されているのです。どこから予約したらいいかを探すために、複雑なナビゲーションによって無駄な時間を取られることもありません。 2. 明瞭さ明瞭さは、Webサイトやアプリにおいて最も重要なことの1つです。UIが存在する唯一の目的は、ユーザーとシステムのやり取りを促進することです。ユーザーはインターフェースの使い方がわからない場合、不満を感じて利用をやめるかもしれません。明瞭さを高めるには、ボタン要素やアクションボタンに、わかりやすくて正確なラベルを付けます。また、メッセージング（データの通信）もシンプルにする必要があります。ラベル、ナビゲーション、コンテンツを読みやすいものにするほど、ユーザーにとって何をすべきか明らかになります。また、最初の原則は「シンプルさ」であったことを思い出してください。長い説明でごちゃごちゃと散らかすのは避けましょう。ユーザーにとって読む価値のある説明でないとしたら、UXの邪魔になるだけです。2語の代わりに1語でも説明可能なら、そうする方が良いでしょう。ラベルとメッセージを簡潔にすることによって、見やすいデザインにして、ユーザーの読む時間を短縮しましょう。テキストを簡潔かつ正確なものにできれば、優れたUXを生み出す効果があります。努力を要するかもしれませんがその価値はあります。 [PR] プログラミングで挫折しない学習方法を動画で公開中3. 一貫性一貫性のあるインターフェースによって、UXを高める使用パターンを実現できます。ユーザーが求めているのは、製品の使い方を一度理解したら、他の画面上でも同じように操作できるような体験です。そのためにはインターフェース全体において言語、レイアウト、デザインを統一します。そうすることで、ユーザーが仕組みを理解するのを助け、ユーザーの効率性を向上し、UXを高める効果があります。 4. 親しみやすさ UXデザインの目標の1つは、ユーザーにとって直感的なインターフェースを作ることです。UIが「直感的」であるとは、ユーザーにとって自然に理解できることを意味します。これを実現するには、設計において「親しみやすさ」を活用することが重要です。 UIは、ユーザーがその使い方をすでに理解していれば、親しみやすいと感じられます。ユーザーは何をするべきかを知っているため、使い方を考える必要がないのです。ユーザーにとってシステムのやり取りが容易になるように、「親しみやすさ」を活用したデザインにできる部分がないか検討しましょう。例として、近年多くのアプリにハンバーガーメニュー（三本線が平行に並んだボタン）が使われています。ユーザーはこのアイコンを見ればそれがメニューであるとすぐにわかります。メニューを探してその使い方を考えるのに時間がかかることもありません。例として、Born ShoesのWebサイトを見てみましょう。ユーザーにとって使いやすいサイトにするために、ユーザーにとって親しみやすいアイコンが、親しみやすい位置に配置されています。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。コスパ・タイパ最適化の参考として、

Webデザイン

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

ビジョンを実際のアプリに落とし込むまでの9つのステップとは

目次

1. 最初のステップ

2. 要件工学（RE：Requiment Engineering）