Space.ツイートする1.リキッド(可変幅)でデザインするPC向けのWebサイトのレイアウトには、ブラウザーのウィンドウサイズに関わらず一定の幅で表示を固定する「固定幅」デザインと、ブラウザーの幅に合わせて変化する「可変幅(リキッド)」デザインがあります。PCサイトにおける固定幅と可変幅の違い。固定幅ではブラウザーのウィンドウ幅を変えてもレイアウトは変わらないスマートフォンサイトのデザインでも固定幅、可変幅を選択できますが、特別な理由がなければ可変幅を採用しましょう。スマートフォンの画面サイズは端末によって異なり、本体の向き(縦・横)によっても画面サイズが変動するため、画面幅を固定するのは好ましくありません。画面よりもコンテンツ幅が大きい場合、コンテンツが表示領域外にはみ出しますが、iPhoneではスクロールバーが表示されないので、はみ出していることが一目では分かりません。逆に、縦向きでの表示を前提に固定幅で制作すると、横方向にしたときに余白部分が目立ち、IS01のように横向きでしか表示できない端末では閲覧しづらくなります。スマートフォンではスクロールバーが表示されないため、画面領域外にあるコンテンツが分かりづらい縦画面を前提に固定幅で制作すると横向きにしたときに余白が目立つ実際に可変幅に対応するのはHTML/CSSコーディング段階での作業になりますが、デザインカンプを作る際には横幅を問うような装飾を施さないように注意します。横方向に伸縮しづらいボタンや背景画像は避け、伸縮しても違和感がないようにしましょう。可変幅では伸縮した際に違和感がないように素材をデザインする2.画面の向きに応じてデザインするスマートフォンでは本体の向きによって画面の幅が大きく変わるため、縦向きの画面では最適なデザインでも横画面では見づらくなる場合があります。以下のように横画面にしたときに単純に1行の文字数を増やすと読みづらくなります。Wikipediaのスマートフォンサイト。横向きにすると本文部分が単純に横に伸びるため読みづらいそこで、縦画面と横画面でレイアウトを変更して、本文の長さが変わらないようにするのも手です。画面幅に応じた複雑な制御は、CSSの「メディアクエリー」を使って対応できます。具体的な実装方法は今後の連載で紹介しますが、デザイン段階では縦・横両方の画面カンプを用意しておきましょう。イザ!のスマートフォンサイト。横向きにするとナビゲーション部分が移動する。Explorer(IE)に合わせて、本文(テキスト)をMSゴシックでデザインし、タイトルや見出しには見栄えのよい画像を使うのが一般的です。XPのIEとiPhoneのSafariの表示の違い。PCサイトではアンチエイリアスが効かない環境を想定して、大きな見出しには画像を使うことが多い一方、スマートフォンでは通信速度の遅い3G回線でも閲覧されることを考慮し、画像の使用頻度を減らしてページの容量を抑えるほうがよいでしょう。iPhoneのヒラギノ角ゴやAndroidのDroidフォントは常にアンチエイリアスが効いた状態で表示されるので、画像化しなくても十分美しく表示されます。CSS3のテキストシャドウなどを使うとそれなりに見栄えよくできます。した特徴も踏まえて、タイトルや見出しをデザインするときは画像化する必要があるか、十分に検討しましょう。JAPANのスマートフォンサイト。見出し部分は画像を使わず、CSS3のテキストシャドウで処理している4.アクセシビリティを考慮し十分なコントラストをiPhoneをはじめ現在市場に出回っているスマートフォンは、すべてフルカラー液晶を搭載しているため、色についてはそれほど気を使う必要はありません。将来的には電子ペーパーを利用したAndroid端末など、白黒液晶や色数に制限のある端末が現れる可能性もあります。アクセシビリティに配慮する意味でも、背景色と文字色には十分なコントラストを取ってきましょう。外出先などの強い太陽光の下でスマートフォンを使うと、白地に黒の文字を組み合わせたデザインが見づらいことがあります。そこで、あえて背景を黒などの濃い色にし、文字色を白にすると読みやすくなります。サイトの印象を大きく左右するため、必ず採用できる方法ではありませんが、選択肢として頭に入れてくとよいでしょう。NAVERのトップページ。一覧へDESIGNjQueryでiPhone風スライドパネルを作ろうスマートフォン向けのWebサイトでは「動き」を演出することが多い。jQueryを使ってiPhone風のスライドパネルを作ってみよう。DESIGNCSS+jQueryでクロスデバイスサイトを作ろうPC向けのWebサイト(HTML)はそのまま利用し、CSSとJavaScriptだけでレイアウトやデザインを変更する「クロスデバイスサイト」の作り方を説明する。DESIGNJavaScriptで振り分けてスマホサイト完成!実例に学ぶスマートフォンサイトの制作方法。HTML5/CSS3で制作したページにiPhone/Androidならではのリンクを設定し、PCサイトと振り分ける処理を作成しよう。DESIGNHTML5/CSS3で作るスマートフォンサイトの基本スマートフォンサイトの制作方法を実際のプロジェクトの流れに沿って解説。Photoshopでデザインカンプを作成して基本のHTML/CSSをコーディングしよう。今回からスマートフォンサイトの制作方法を実際のプロジェクトの流れに沿って解説する実践編。実在するサイトを例にワイヤーフレームを作成しよう。DESIGNスマートフォンサイトをデザインする7つのポイントiPhone/Android向けサイトの制作方法を学ぶ連載企画。今回は、スマートフォンサイトをデザインするときに気を付けたいポイントを解説する。この記事の編集者は以下の記事をオススメしていますDESIGN実践!iPhone&Androidサイト制作ガイド「WebサイトをiPhoneやAndroidで見やすく表示したい」「スマートフォンをターゲットにしたWebサイトをデザインしたい」――そんなWeb制作者のための入門ガイド。PCサイト制作のノウハウを生かして作るスマートフォン(iPhone/Android)対応サイト制作の基礎知識から実践的なテクニックまで解説します。CS4/5」が登場した。00TRENDスマートフォン時代のモバイルサイトの条件とは?「スマートフォン時代の携帯サイト作成術」が開催され、Web制作者らがiPhone/Androidサイトの制作ノウハウを共有した。スマホお気に入り一覧マイページ。