Design KillerモバイルアプリWebサイトのヒントと例

モバイルシーンはここ数年で指数関数的に成長しました。 Google PlayのAndroidアプリと一緒にiOS App Storeは、スマートフォン愛好家にとって2つのホットスポットとなっています。スマートフォンユーザーの数が増えるにつれて、何百人ものモバイルアプリ開発者が新しいアイデアを市場に投入するようになっています。.

最も人気のあるアプリは彼ら自身のウェブサイトを伴っています. これはマーケティングやあなたの名前を公開するのに役立ちます。また、どちらのApp StoreよりもずっときれいなオンラインURLです。私はモバイルアプリケーションを成功させるにはWebプレゼンスがほとんど必要だと思います.

この記事では、私はいくつかを見てみたい モバイルアプリWebサイトの最も一般的なデザイントレンド. そのようなレイアウトを構築するために従うべき厳密なルールブックはありません。そうではなく、Webデザイナーがオーディエンスを獲得する上でうまくいくことを見出したいくつかのユニークなガイドラインと傾向があります。私のiOS開発ガイドと組み合わせると、素晴らしいモバイルアプリをまとめてそのWebサイトを構築することもできます。.

以下のこれらの概念をチェックして、あなた自身のアプリケーションWebサイトのレイアウトにいくつか実装してみてください。.

デバイスのスクリーンショット

モバイルアプリのウェブサイトの定番は、アプリケーションのスクリーンショットでなければなりません。訪問者はあなたのアプリにだけ興味があります、そしてスクリーンショットを通してよりもその目的を明示するためのどんなより速い方法？デバイスショットを任意のレイアウトスタイルに合わせることができるので、それは制限要因ではありません.

Easy Chefは、多くのデバイスショットを使用するスペインのiOSアプリです。レイアウトの一番上の部分には、さまざまなビューのスライドショープレビューがあります。しかし、下にスクロールすると、iPhoneのディスプレイを使用している他の図に気付くでしょう。これらのパネルには、詳細なラベルと拡大された画面ビューが含まれています。私は実際に有益な製品グラフィックのデザインについて以前の記事で書いています.

他の興味深い設定はTweetbotギャラリーページにあります。これはiPhone用の非常に人気のあるTwitterクライアントであり、開発者はスクリーンショットのスライドショーケースをまとめました。あなたのレイアウトのスペースを節約しようとしているなら、これはより簡単な解決策かもしれません。訪問者は特定のビューを探すためにスクロールダウンする必要はありません。 jQueryは実装が簡単で、スライド式のiPhoneスクリーンプレビューをすばやくまとめることができます。追加の詳細を含めるのは難しいかもしれませんが、これは別のセクションに追加できます。.

App Storeのバッジ

アプリケーションの構築が終わったら、このテクニックも無意味には思えません。バッジはすぐにアプリマーケットプレイスへのダウンロードリンクとして認識されます。 AndroidユーザーとiOSユーザーの両方が自分のブラウザーからアプリを直接見ることができます。そうしないと、スマートフォンで見たときにリダイレクトされます。.

Webサイトが新しいレイアウトに更新されたので、例としてInstagramを使うのが好きです。 Androidマーケットプレイス（Google Play）とiOS App Storeをサポートするバッジがあります。どちらのバッジもデザインがとてもシンプルで一目で簡単に識別できます。もっと複雑なデザインを探しているなら、クイックドリブル検索をお勧めします。才能のあるデザイナーは、建設的な批判のために彼らのアプリストアバッジの概念をしばしば共有します.

モバイルソーシャルネットワーク

FacebookとTwitterはモバイルに切り替えました、しかしこれは他のネットワークが発芽するのを止めませんでした。ソーシャルネットワーキングがモバイルアプリを使ってまったく新しいプラットフォームのコミュニケーションを可能にしているのを見ています.

Localmindは、Foursquareに似た概念で実行されます。ここでは、アカウントを登録してローカルの場所へのチェックインを開始します。質問を残したり、他の人の質問に答えたりすることができます。彼らのウェブサイトはとてもフレンドリーで、新参者をもてなしてくれます。私は、カスタムマップの背景でデザインされた一番上のバナーセクションが特に好きです。それらのグラデーションと背景テクスチャの使用はウェブサイトにそれ自身の人生を与えます.

最小限の写真共有

Poseは、ミニマリストデザインに似た理想を持つ別のモバイルネットワークです。 iOSとAndroidの両方のデバイス用のモバイルアプリをダウンロードできます。気持ちはweheartitに似ていますが、それはモバイルファッション愛好家のためのものです。アプリ全体は、ファッション、髪、化粧、そして魅力に焦点を当てています。.

ユーザーは自分の服、服、またはアクセサリーの写真を撮って、ネットワークを介してそれらを共有することができます。ポーズについて注意すべきことの1つは、Webサイトをどれだけ早く閲覧できるかです。会社のブログ、連絡先の詳細などを簡単に見つけることができます。他のアプリWebサイトでは、これらの企業機能を見逃してしまうことがよくあります。.

あなたがメディアから注目を集めることを望むならば、あなたのウェブサイトを本物のソーシャルネットワーキング製品のように見せ、感じさせることが重要です。あなたは（広告や有料購読によって）あなたのアプリを売ろうとしているだけでなく、ネットワーク自体も売っています。ソーシャルアプリは、通常のアプリWebサイトを設計するよりも間違いなくトリッキーです。しかし、彼らはまた、ユーザーからのダウンロード数が増えており、モバイルにとってエキサイティングな新しい分野です。.

謙虚な始まりから

Webデザイナーは、とんでもないグラフィックやアイコンをまとめることができるとは限りません。ありがたいことに、アプリのWebサイトは、Adobe Photoshopがどれだけの価値を持っているかという点で重要ではありません。このレイアウトスタイルでは、ミニマリズムのほうがはるかにうまくいくと実感しています。.

Leef AppはiPhone用に新しくリリースされたForrstクライアントです。彼らのウェブサイトには大胆なダウンロードボタンと一緒に美しいアプリのスクリーンショットが含まれています。すべてのページテキストは、アップルのフォントや配色と同じように単純化されています。.

Leefのウェブサイトを素晴らしいものにしているのは、各ページ要素の率直な性質です。それは露骨で前線上に何も隠されていない、または脇に押しやられています。私はあなたの最初のモバイルアプリのウェブサイトとしてこのスタイルを試すことをお勧めします。あなたはより少ない一口を最小にして、注意をつかむものに集中することによって多くを学ぶことができます.

素敵な空白

また、見事にシンプルなWood Camera App Webサイトもあります。彼らのレイアウトは無地の白い背景と中央揃えのコンテンツ以外は何も持っていません。このコンテンツには、いくつかのデフォルトのスクリーンショット、App Storeのバッジ、およびいくつかの追加の主要機能が含まれています.

あなたがミニマリズムと空白があなたのレイアウトにとって重要であると感じるならば、それを固執してください！ Wood Cameraは特に気の利いたウェブサイトのレイアウトではありませんが、ナビゲートがとても簡単です。彼らのサイトは、開発者の公式ページを除いて、他のどのコンテンツにもリンクしていません。これはアプリとそれが提供できるものに焦点を合わせ続けます。それは派手なグラフィックよりはるかに重要です。派手なアートワークは悪い考えではありませんが、適切な実装が必要です。.

カラフルなイラスト

ミニマリストのアプローチとまったく反対のことは、私が全く崇拝しているユニークなイラストによる作品です。多くの場合、この追加の詳細情報によって、アプリが完全に販売されることがあります。私が関係することができる1つの例はiPhoneのためのバリスタアプリケーションです。彼らのサイトのヘッダーは小さなベクトルのカプチーノとエスプレッソの飲み物でいっぱいです.

しかし、ページを下にスクロールしたときに他の画像がないことに注意してください。この全体のトップセクションは、iPhoneアプリのために特別に設計されました。 ランディングページ. ベクトルはすぐにあなたの目を引くだけでなく、アプリが何であるかについてのヒント.

Kitchenatorは料理の単位と焼きの単位を変換する同様のiOSアプリです。彼らのヘッダーのレイアウトは豊かな木製の質感、市松模様のテーブルクロス、そして水のミニスプーンを使用しています。この画像は、あなたがコンテンツを読み飛ばす前に、このアプリの目的を示唆しています。.

このデザインスタイルは実際にはレイアウト全体に浸透しています。フッター領域は、同様の木製の背景と同じフォントの選択肢の多くと一致します。これは、非常に強力なグラフィックを含む非常に単純なWebサイトのレイアウトの例です。.

アプリのウェブサイト：プレミアムショーケース

ちょっとした目玉がなければどんな記事が完成するでしょうか？上記のテクニックに加えて、この美しいモバイルアプリWebサイトのギャラリーもまとめました。ロゴとナビゲーションスキーム、およびドメインURLに注意してください。専門家が何をしているかを研究することによって、あなたはデザインの傾向を理解してあなた自身のプロジェクトでそれらを使うことができます.

ボスケアプリ