emuramemoemuramemo製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ2014-11-18画面サイズの多様化。6クライアントの予算に余裕のある時にはセットで依頼があるスマートフォンサイト制作。その作り方も様々です。以下のscriptをheadに記述し、320px幅で作ったデザインを端末の画面サイズに合わせてzoomする方法です。);});</script>iPhone4のRetinaディスプレイが登場した時も、幅は320pxの2倍である640pxだったので、画像素材をそれに合わせて作っておけば違和感なく表示できていました。この方法では、320pxという決まった幅でデザイン・コーディング作業をするので、比較的簡単にスマートフォンサイトを作ることができます。「この作り方最高!」と思っていました。iPhone6が発売されるまでは。Plusの画面幅iPhone6は画面幅が今までのiPhoneとは異なる倍率になっています。1080px日本人の多くが所有しているiPhone様なので、もう画面サイズの多様化からは逃れられません。iPhone6や6Plusのサイズにも最適化されるスマートフォンサイトの作り方を新たに考える必要がでてきます。MVNOが流行ったり、Y!mobileの大々的な宣伝でnexusやらの大画面スマートフォンも増えてくると思いますし、この先iPhone5sがターゲットから外れた時に320pxの枠で作るのも変です。今まで作ったスマートフォンサイトをnexus5で見た感じ、意外とまだ大丈夫!いい感じ!と思えたのですが、後々違った方法でのスマートフォンコーディングが必要になってくるかもしれません。スマートフォンサイトの作り方のメリット・デメリット320pxズームで作る方法メリット・幅が決まっているのでデザイン、コーディングがしやすい・どんな端末で見てもデザインが同じで崩れない・ピクセルベースで作れるので複雑なレイアウトも可能デメリット・単純に拡大されるだけなので大画面スマートフォンで見ると野暮ったい(文字が大きく表示され、かんたんスマホっぽくなる)・横向き表示は見れたものじゃないiPhone5sがターゲットのうちはこの方法で作っていくと思います。そのうち、320pxの基準値を大きくして制作することも考えられます。この方法で作ってるスマートフォンサイトほとんど見ませんよね...。Well.~AJINOMOTOメリット・様々な画面サイズに適応できる・横向き表示にしても使用に耐えられるデメリット・%表示を使うのでコーディング感覚が難しい・伸縮するので「これ!」ときまったデザインがない・複雑なレイアウトには向かない・大画面スマートフォンで見ると、余白が多く間延びしたデザインになるスマートフォンサイト集をみてるとこのタイプが一番多かったです。森永乳業メリット・画面サイズに応じた適切なレイアウト、情報量を表示出来る・HTMLは一つで済むのでソース修正はPC、スマートフォン、タブレットとあわせても一箇所だけで済むデメリット・CSSの記述が複雑かつ多くなる・HTMLの記述を充分に考えてつくらないといけない・デザインの段階からもHTMLの知識が必要なので敷居が高い・レイアウト修正が入った時は地獄とても理想的なんですが、デザインの数だけコーディングが必要で、しかもそれを一つのHTMLで作らないといけないのでものすごく大変です。wordpress使ってる人はテンプレートを使って簡単に導入できそうな気もします。他にはBootstrapなどのCSSフレームワークを使ったらいいのでしょうか。予算と制作期間をがっつり組んでもらわないと気が進まないコーディングです。サイトをちらほら見てみたところ、「横幅100%の伸縮デザイン」が無難ですが有望な印象。多いということは、ある種、正解の一つです。スマートフォンサイトの作り方を勉強したのもiPhone4が発売したかどうかの3、4年くらい前なので、最近のトレンドを踏まえた上でもう一回勉強しなおさないといけないですね。時代の流れは早いです。23:58あなたにおすすめの記事プロフィールid:emj1025Webデザイナー。デザイン・ギター・宅録を少々。このブログでは気になった製品、HTML/CSS、Webデザイン、音楽などを記事にしています。IIJmioへMNP転入申し込みをしました。Reserved.引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。