モバイル機器の設計に関する考察

最初のiPhoneがリリースされたとき、それは技術の世界を席巻しました。それ以来、約5年が経過し、スマートフォン市場でも人気が高まり、マイクロソフトもWindows 7 OSおよびパートナーとの競争に巻き込まれました。今日のスマートフォンには非常に多くのインターネットユーザーがいるため、モバイルWebサイトの数が急激に増加すると予想するのは常識です。.

ただし、モバイルWeb用の設計は、一般的なWeb設計とはまったく異なる操作です。当社のWebサイトは大画面用に設計されていますが、スマートフォンの画面サイズはそれに比べて非常に小さいため、厄介なユーザビリティの問題につながります。. 新しい設計基準と実践 スムーズなユーザーエクスペリエンスを備えた優れたモバイルサイトデザインには、非常に必要.

このガイドでは、スマートフォンのモバイルブラウザ用のユーザーフレンドリーなサイトをデザインしようと思います。私はあなたがより良いモバイルウェブサイトをデザインするためのベストプラクティスと便利な開発者ツールについて話しますので、ジャンプの後にそれに入りましょう。!

強力なユーザーエクスペリエンスの計画

あなたがモバイルウェブサイトを構築するとき、それは重要です ユーザーを常に念頭に置いてください, 最終的にはあなたのウェブサイトはユーザーが楽しむことができるように設計され作成されています。モバイルWebサイトがデスクトップ環境と同じように動作することをユーザーが期待することは間違いなく一般的です。 ユーザーエクスペリエンスをフレンドリーに保つ 成功するモバイルサイトを構築しながらあなたの主な焦点であるべきです.

ユーザにとって考慮すべきユーザビリティの概念がたくさんあります。これらの考慮事項が含まれます 画面サイズ, インライン画像, ハイパーリンク, フォントサイズ, そして ページナビゲーション. 私たちはより良いユーザビリティのためにあなたのウェブサイトを切り開くためのあなたのためのモバイルユーザビリティデザインについて書いています。ガイドのほかに、あなたは常にする必要があります 新しいアイディアに気をつけて あなたのサイトを改善するために.

強力なユーザーエクスペリエンスを計画することはまたあなたがすべきことを意味します ユーザーがWebサイトとどのように対話するかを検討する. デスクトップでは、Webサイトはマウスとキーボードでやり取りできますが、スマートフォンではユーザーは タッピング, フリック, そして スワイプ あなたのサイトの周りの彼らの道。おそらく、ユーザーができるようにサイトを設計する必要があります。 これらの物理的な動きで簡単にサイト情報にアクセスする.

ページを短く、きれいにする

あらゆるウェブサイトの肉とジャガイモは ページコンテンツ. 各Webページ 大量の有用な情報を保持している テキスト、写真、ビデオなど、ユーザーのために。また、テキストを分割するのに役立ちますが、それはテクニックとしてモバイルデバイスにはお勧めできませんが、数ページに渡って続くニュース記事やブログ記事を見つけるでしょう より多くのページをロードする必要があるため、ユーザー側の待ち時間が長くなります。.

それが絶対に必要でない限り、私はお勧めします ページのコンテンツを短く保つ. それはまたそれを甘いように見せることを考慮する必要があります フォントをもっと大きなサイズにスタイルする そして多分 脇の動画. あなたのコンテンツがフルディスプレイで表示されれば、それは自然に注目を集めます。最適化は言うまでもなく実際にはページのスキャンをずっと簡単にします。これはまた理由でもあります 単一列レイアウト 法案を完璧に収める.

ほとんどの場合、モバイルブラウザはデスクトップブラウザほど速くウェブページをロードすることはないでしょう、そしてこれはあなたの読者をいらいらさせるかもしれません、それがあなたがする必要がある理由です コンテンツとウェブサイトを最適化する 高速コンテンツロード用。どちらでもできます 全内容を保ちながら記事を短くする, あるいは単に 不要な画像を削除する. 美しさの代わりに単純さにあなたの焦点を置いてください.

あなたの中心的なナビゲーションは、ページ間を移動しようとしているあなたの訪問者にとっての命の恩人です。モバイルデバイスでは、スクリーンリンクは元々ずっと小さく表示されるため、タップするのははるかに困難です。この問題を解決するための重要な調整は、 ナビゲーションリンクのフォントとスペースを最大にする, ブロック領域全体を占有している可能性があります。代わりにできます 本物のiPhoneアプリケーションのタブバーに似せてナビゲーションバーをデザインする, 上で紹介したもののように.

モバイルCSSスタイルの構築

読みやすさと使いやすさを向上させるためにモバイルWebサイトを最適化する方法がわかったので、CSSスタイルについて話すことをお勧めします。各CSSスタイルシートには、フォント、サイズ、位置、および表示設定に関するプロパティを持つ多くのセレクタが含まれています。それは携帯電話に来るときあなたは注意を払うべきである ブロックがどのように配置されるか.

（画像ソース：スマッシングマガジン）

始めるための1つの分野は サイトのラッパー幅をパーセンテージにリセットする. 位置、行の高さ、フォントサイズ、およびdivの幅の単位としてピクセルを使用するのが一般的ですが、モバイルを扱うときは、ページを 各デバイス間の流体と遷移. コンテナーdivを100％幅に設定すると、コンテンツが 端を越えて流れることなく、ポートレート/ランドスケープモードを簡単に塗りつぶす.

あなたがあなたの全体のレイアウトを再構築しようとしている人々の1人であるならば、あなたがいることを確認してくださいですべてを打つ リセット. また段落、見出し、ナビゲーションリンクはすべて次のように設定します。 表示ブロック; それで、あなたはその直線的なプリントスタイルの気分を得ます. 余白と余白を再配置して、レイアウトから膨張を取り除きます。. テーブルを避ける 可能であれば、これらはデバイス間でバグの多い結果をもたらす傾向があるので.

大きな画像もデバイス間の面倒です。あなたのウェブサイトの画像の大部分は480pxより大きくレンダリングされるでしょう、そしてあなたはそれらにコンテナを壊させたくないかもしれません。最初の選択肢は 画像が自然にサイズ変更できるように幅を100％に設定します. 確かに可能です あなたのウェブサイト用に異なる画像セットを作成する そしてブラウザエージェントに基づいてそれらを異なってレンダリングします、しかし正直なところこれはあなたの側により多くの作品を追加するので、試してみてください 本当に必要なときだけテクニックを使う.

iPhone用のWebサイトの設計

モバイル市場のシェアはかなり大きく、分割されていますが、Appleは自分のiDeviceで大きな部分を占めています。 iPhoneとiPadはどちらもタッチスクリーン機能を内蔵したモバイルインターネット対応デバイスです。彼らは同じデフォルトのWebブラウザ、Safari、および他のオプションのホスト全体を備えています.

iPhone固有のWebサイトでは、画面サイズをターゲットにする必要があります。固定画面サイズは 古いiPhoneモデルでは320x480px そして iPhone 4およびiPhone 4S用640x960ピクセル.

iPhoneの画面はスペースに限られています。あなたが持っているべきです 1ブロックのコンテンツが必要に応じて表示される. 単一の列に要素を保持する 頭痛を軽減します 流動的なレイアウトを可能にする “記入する” 縦モードと横モードの両方. そのためには、おそらく別のテンプレートを作成して、訪問者がiPhoneを使用しているかどうかを確認する方法を見つける必要があります。以下の小さなPHPコードはうまくいくはずです。

基本的にその論理は私たちの世界を引っ張ります $ _SERVER HTTPエージェント用の変数で、単語が “iphone” どこにでも現れます。そうであれば、私たちの訪問者はiPhoneを使用していることがわかり、そこから私たちはわずかに異なるHTMLまたはまったく新しいテンプレートレイアウトを作成することができます！これはまた使用することができます iPhone固有のスタイルシートを含める, ページタイトルの変更、画像の削除、またはほぼすべての動的効果.

新しいスタイルを提供することになると、もっと簡単な方法があります。前述のように、iPhoneの最大画面サイズは960ピクセル幅です。したがって、新しいCSS 3メディアクエリを使用すると、サイトのメインスタイルシートに直接スタイルを追加できます。のみ iPhoneに表示します。以下は小さなコード例です。

@media画面と（最大デバイス幅：960ピクセル）/ * iPhone css * /

これはうまくいく CSSはブラウジングエージェントとそのプロパティを検出できるようになりました. 最大画面幅も検出できるプロパティの1つです。.

iPhoneデバイス用のオールインワンのモバイルWebサイトを設計するのはそれほど難しくありません。参照するには例が多すぎます（CSS iPhoneなど）。. 勉強に忙しい 恐れないで UIデザインにおける新しい技術の実験.

モバイルjQueryスクリプト

フロントエンドWeb開発者の大多数はjQueryライブラリに精通しています。それは、コーディング効果、アニメーション、ドロップダウンメニュー、そして他の多くのブラウザ内機能のためのいくつかの素晴らしい速記を提供します、そしてそれはちょうどjQuery Mobileの発表でもっと素晴らしいものになります。それは ハイテクに直接ジャンプすることはお勧めできません そしてどこでも効果をあなたのウェブサイトにロードします、しかしテスト目的のために高度な機能性は非常にうまくいくことができます.

jQuery Mobileは、基盤となる完全な環境を提供するため、通常のjQueryとは少し異なります。それらのファイルを扱うとき、それらはJavaScriptだけではなく、ボタン、リンク、およびトランジション効果のためのCSSスタイルでもあります。あなたはまだHTMLコードでWebページを書いていますが、jQuery Mobileチームは オプションのUIデザイン機能を多数提供. このフレームワークでできることはたくさんありますが、 フレームワークはまだベータ版です, 単純な効果に固執しましょう.

DevGrowブログの小さなチュートリアルにいくつかの素晴らしい例があります。公式サイトには、試すためのデモも用意されています。 HTML属性を使用していることに注意してください。, データ遷移 定義済みの値を使ってアニメーション効果を追加します。これらには、スライド、ポップ、フリップ、フェードなどが含まれます。これらの効果を味わうには、小さなDevGrowの例をご覧ください。.

効果と移行はかなりきちんとしており、jQueryを使ってモバイルインターフェース全体を厳密に構築できるという事実も、このプラットフォームにとって大きな前進ですが、ベータ版のみのプラットフォームでは、モバイルサイト全体を構築することはお勧めしません。彼らのライブラリは、特に 執筆時点ですべての主要スマートフォンでサポートされていない （特にWindows Phone 7）、それは確かに時間とともに良くなるでしょう.

最終的には、この新しいモバイルフレームワークに慣れることをお勧めします。前あらゆるプロジェクトにライブでデプロイする.

役に立つ開発者ツール

モバイル開発者は、コーディングやデザインのリソースを調べているだけではありません。強力なモバイルフレームワークはもちろんのこと、ソフトウェアツールとIDEに対する需要もあります。 Web開発はかなりの労力を必要とする困難な作業ですが、追加のツールを利用することはあなたの仕事をずっと簡単にするでしょう.

Opera Mobileエミュレータ

携帯サイトがどのようにレンダリングされているかを確認する方法をお探しですか？あなたがインターネットにアクセスできるスマートフォンを持っていない場合、これは大きな痛みになる可能性があります。または、アップデートがサーバーにプッシュされるたびにスマートフォンを使用してサイトをテストしたくない場合もあります。さて、Opera Mobile Emulatorはあなたの携帯サイトをテストするための素晴らしいソフトウェアです。.

エミュレータはサポートしています 20のモバイルプロファイル サムスンギャラクシーS、HTCの欲望、さらにはモトローラXoomのようなタブレットなど。設定することも可能です カスタム解像度 そして 画素密度 集中的なテスト目的のために。何よりも、設定作業をあまりする必要はなく、数回クリックするだけで済みます。.

ダウンロードは完全に無料で、ソフトウェアはMac OS XとWindowsの両方の環境で動作します。彼らの開発者は、適切なWeb標準を作成し、モバイルレンダリングエンジンを調整することに熱心に取り組んでいます。あなたが道に沿ってあなたを助けるために追加のツールを探しているなら私は彼らの他の開発ツールをお勧めします.

PhoneGap

堅牢なモバイルアプリケーションを構築するためにHTML 5を介して開発されたAPIは多くありません。特に携帯電話のランドスケープにはこのような種類のWebサイトが欠けているため、PhoneGapがニッチをうまく埋めているのはまさにそのためです。彼らのプラットフォームはあなたを簡単にさせます HTML5ベースのアプリケーションを6つの異なるプラットフォーム上のネイティブアプリケーションとして構築する.

このプロセスは、まずコードを圧縮し、それをPhoneGapのアプリケーションフレームワークに渡すことによって機能します。そこからあなたのアプリは、Android、iOS、Windows Phone 7、そしてBlackBerryを含むモバイル市場の大部分に到達することができます。.

あなたが少し混乱しているならば、あまり心配しないでください。彼らのサポートページはプロセスをきれいに概説して、役に立つリソースへのリンクを提供します。すでに開発されているアプリは、美しいライブラリスタイルのポートフォリオにまとめられています。あなたはそれからスクリーンショットでデバイスによって分類することができる彼らの完全なアプリコレクションをチェックしてください.

アプタナスタジオ

Aptanaウェブサイトは彼らの開発ツールについて学ぶための最高の場所です。最新のスイートリリース、Aptana 3.0.3は、Web開発、CSSスタイル、およびHTMLタグのネストのための完全に統合されたIDEを特徴としています。無料ダウンロードする！彼らは開発者にとって非常に便利である3つすべての主要なオペレーティングシステム（Linuxを含む）のためのパッケージを提供します。.

Aptanaを特別なものにしているのは、小さなWebアプリケーションをどれだけ早く開発してデザインをテストできるかです。スタジオスイートでは、 Ruby on Rails、PHP、Python、または単にHTML / CSS上で動作するWebアプリケーションを迅速に開発してテストする, そして彼らのコードハイライト機能は最近改良されました。 新しいHTML 5およびCSS 3タグライブラリを含める. それはまたGit統合、内蔵端末、コードデバッガ、そして他の巧妙な機能のほんの一握りが付属しています.

モバイルGUIキットとアイコン

景品が横たわっていないウェブは何だろうか？ Webデザイナーにとって、ユーザーインターフェースの重要性は他にもありません。シンプルなGUIは手に入れるのが難しく、最もクリエイティブなデザイナーだけが実用的なソリューションを考え出しました。.

ただし、Webデザイナーがテストするために利用できる無料で質の高いリソースが多数あります。これらのGUIキットは、主にAdobe PhotoshopまたはFireworks用に設計されており、要素を移動してそれらをフラットイメージファイルとしてエクスポートできます。.

アイコンは持っていると非常に便利なリソースです。デザイナーはこれまで以上に無料のセットを作成してオンラインでそれらを提供しています。そのようなウェブサイトGlyphishには、無料アイコンとプロアイコンの両方のショーケースがあります。これらのデザインは、モバイルテンプレートとアプリデザインで使用される単一のテーマに基づいています.

モバイルデバイスのプロトタイピングテンプレートの私達のコレクションは、Webサイトおよびアプリケーション開発の旅に沿ってあなたにとって大きな助けになるでしょう。強力なグラフィカルインターフェースが完成するまでコーディングを開始しないでください。これらのWebキットを使用すると、正しい方向に進むことができます。.

iOS 5 GUIキット

iPhone UIのベクトル要素

iPhoneアプリアイコンキット

ワイヤーフレームマグネット（DIYキット）

AndroidインターフェースのGUI