Home > スポンサー広告 > スマホサイト作成のコツと作業環境

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/127-0d47c6ca
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > スマホサイト作成のコツと作業環境

Home > ウェブ > スマホサイト作成のコツと作業環境

スマホサイト作成のコツと作業環境

  • vanillate
  • 2015-01-07 Wed 14:54:10
  • ウェブ
blog_2015-01-07.png

スマホサイトを「デザインカンプ作成→プレビュー→コーディング→プレビュー→実環境確認」とスムーズにすすめるためのチェックポイントを書きだしてみました。

■ デザインカンプの作成

カンプの作成はphotoshopや、fireworksで行うことになると思います。

横幅はretinaに合わせて640px(@2x)で作成する

カンプファイルの横幅は、320pxの2倍の640pxで作成します。
画像スライスも640pxの縮尺で書きだしします。

フォントサイズ、画像サイズを偶数にしておく

コーディング時には、320pxベースで作成していくため、
画像サイズ、フォントサイズの数値を偶数にしておくことで表示のズレを事前に防げます。
奇数だと、割った時に数値を丸める方法もありますが
偶数のものと奇数のもので縮尺が微妙に違ってきてしまいます。

アイコンは、ウェブフォントを使ったほうが扱いやすい

シンプルなアイコンについては、極力ウェブフォントを使ったほうが
扱いやすいかもしれません。
独自アイコンは、jsなどでretina用調整を。

カンプの確認

カンプ時点でスマホプレビューするときは、Invision等にアップロードしてスマホから見ると実際の縮尺がわかりやすいです。

■ コーディング

もともとあるPCサイトを切り崩す場合と、新規作成する場合の2通りがあります。

HTMLのバージョンはhtml5で

ベースとなるhtmlのバージョンはhtml5でいいと思います。

viewportの設定

<head>タグ内に、viewportの設定をします。
<meta name="viewport" content="width=device-width">

PCサイトを切り崩す場合

PCサイトをベースにする場合はviewportだけ設定して崩すようにCSSを上書きしていく。(ベースファイルを上書きでなく、コピペして新規用意。)
→CSSを切り替える方法をとる場合はHTMLを触らないように注意しながら切り崩す

全体のコーディングはレスポンシブ+リキッド風に。

レスポンシブというよりは、リキッド寄りの横幅100%で配置していくようにすると
タブレットではないモバイルデバイスの幅問題は解消できるかなとおもいます。

→レスポンシブのスマホ表示の設定と、リキッドを合わせたような処理をします。

横の空間はすべて%指定、縦の空間はpxかem。

画像を一番簡単にretina化

imgタグのwidthとheightを1/2に指定します。

■ CSS

androidもiOSもCSS3が使えます。

背景をretinaサイズに

背景をretinaサイズにするには、
1/2サイズをwidth,heightで指定した上で
background-size: 100%;
を指定する。

デバッグ関連

・Xcodeの iOS Simulator でならローカルファイルが見れるので便利です。
・コーディング上では、320pxサイズでプレビューしながらすすめるとよいです。
・640pxと320pxの両方を広げて確認しながらすすめるといい感じです。

画像はcodaのスクショです。このスタイルがよかったですー。

表示切り替え(シンプルにHTMLを切り分けたい場合。)

htaccessに追加。/spで表示の場合:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /sp/ [R,L]
</IfModule>

<a href=“//xxx.com/?mode=pc">PC用サイトはこちら</a>

というリンクをスマホ用ページへ貼り付け。
PC→スマホは、普通にリンクで /sp へアクセス。

ちなみに、WordPress表示切り替えはプラグインを使ったり、レスポンシブにしたり、is_mobile()を使ったりします。


スマホサイトを作るときも、コツというか、スムーズにつくる設定や考え方があるので、そのあたりをまとめてみました。640pxでつくるとフォントサイズとかPCと比べるとすごく大きくカンプ上では作ることになるので、そういうのにも慣れないとですねー。
retinaディスプレイで編集する場合はさらにphotoshopをretina設定にしているか、2倍を解除設定にしているかによっても表示が変わってきてしまいます。
やりやすい環境をカスタマイズしていきたいですね。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/127-0d47c6ca
Listed below are links to weblogs that reference
スマホサイト作成のコツと作業環境 from バニデザノート

Home > ウェブ > スマホサイト作成のコツと作業環境

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。