スマホサイトの制作時に注意することと対策まとめ
始めに
スマートフォンのサイト制作の際に注意、意識すべきこととその対策法を簡単にまとめました。
あくまでスマホサイト制作のまとめであり、レスポンシブデザインのまとめではないです。
(また別の注意点があるということですね)
スマホサイトの制作時に注意すること
デバイス幅は固定されている
PCとは違い基本的にスマートフォンではブラウザを縮小、拡大はできません。 デバイス幅は固定幅になります。
どうする？
viewport設定をしてあげます。
<meta name="viewport" content="width=device-width,initial-scale=1">
viewportとは
meta要素に name="viewport" を追加すると、文書の表示領域を設定することができます。
HTML5/ページ全般/meta要素 表示領域を設定する - TAG index
詳しい説明は割愛しますが、スマホの時はこの幅で表示しますよ、って設定してあげることができます。
スマホの画面の大きさに合わせて表示幅を変化させてあげることも出来ます。
(機会があればviewportの詳しい記事も書くかも。)
デバイス幅が機種でバラバラ
iPhone5,6,7にandroidに機種によってバラバラ。ほぼ無限です。
どうする？
リキッドデザインで作ります。 幅はpxで指定しません。
% rem em
上のviewportで表示領域を変化させたら、 次は画像や文字をブラウザの大きさに合わせて変化するように設定します。
wi-fiのない3G回線など遅い環境を想定
ブロードバンド環境やwi-fiのないところでは、スマホはまだまだかなり遅いスピードになるかもしれません。
重いサイトは表示に時間がかかってしまうので、軽量化を考えなければいけません。
画像やJavaScript、動画を極力減らします。
またはスマホ用の軽量なものを用意するといいでしょう。圧縮はもちろんしましょう。
どうする？
CSS3のanimationの利用も考えます。 JavaScriptでの表現に近いことがanimationでも可能だったりします。
状況に合わせて使い分けるのも大事です。
タッチパネル操作で作る
スマホでは、タッチ、フリックなど指を使って操作します。よってマウスやスマートパッドを用いて小さなカーソルでの操作とはまた違う画面設計が必要です。
手の大きさ、小さな画面の中でも使いやすいことを意識しなければいけません。
どうする？
直感的に操作できる設計にします。
タッチ操作の指の大きさを意識します。
まとめ
大きく分けてですが、PCサイトの制作と比べてもこれはどの違いが出てきます。
レスポンシブのサイトにしてもそのまま縮めるだけでは、これらの使いやすさは実現しません。
ユーザビリティを意識した設計をしましょう。
Webサイト、作るその前に〜 制作現場キックオフで決めておきたいこと、諸々
はじめに
さあ、作るぞ！その前に！
実際に作り出す前に、確認と決め事、準備を行うのは大事。
特にチームで制作を行う場合、ここを怠ると後で苦しみます、確実に。
特にマークアップその前に、と言った感じの話が多いです。
ざっくりですが、まとめ。
制作前に決めたいこと
制作仕様書
どこまで対応するのか、どこまでは切り捨てるのかを決めます。これは案件によって変わってきますね。 また、開発環境もこの時点でしっかり足並みを揃えておきます。
着地点を決めた上で制作しないとコーディングの際にズレが発生したり、 無駄な努力も発生します。 やること、やらないことを決めちゃいます。
コーディングルール
コーディングの記述にルールを決めます。
- インデントするのか
- インデントは何スペース分か
- class、IDのルール決め
- コメントの入れ方
マークアップする人が増えれば増えるほど、癖が後々思いもしない 不具合を起こします。 防ぐためにもしっかり書き方はなるべく細かいところまで統一します。
以下に参考になりそうなガイドラインも載せておきます。
参考になりそうなガイドライン
Google HTML/CSS Style Guide まとめ - 天下のGoogleさんのガイドラインの和訳
コーディングガイドライン HTML5版 ver1.0 - 大阪の制作会社Qriptのガイドライン、分かりやすい
新人コーダーに知っておいて欲しい命名則の考え方[画像・ID・class名]｜クロノドライブ - 具体的な命名規則の例が表にされていて非常に参考になる
デザインカンプ
簡単なサイトの場合や、 BootstrapなどのCSSフレームワークを使う場合のclass名をつけるだけで UIが壊れる場合以外は、 カンプをチェックし、問題なければマークアップしていきます。
遷移図
ユーザーして移動していく導線を決めます。
特に、大規模に複雑なサイトになる程導線も複雑になります。 しっかり具現化しておくことが重要です。
webライティング
サイト内に入れる文章です。
クライアントからもらえる場合はいいのですが、 カタログ、雑誌からこちらでリライトする場合もあります。
先に考えてメモ帳などにまとめておいた方が、後からコピペで貼り付けるだけなので コーディングの手を止めて考えなくていいので楽だと思います。
やりながら考えるとしんどいです。
スタイルガイド自動生成ツール
今は便利なものがありまして、モジュール一覧ページの自動生成ツールがあります。
残念ながら、まだ試せてませんが、まとめておきます。
FrontNote -Node.js StyleGuide Generator-
Hologram — Style Documentation Build System
まとめ
いかがでしたでしょうか？ 準備あれば憂いなし、という言葉があるように制作においとも準備が必要です。 もちろんすでに会社で働いている方には当たり前のことばかりでしょうが。
面倒かも知れませんがこれらの事前準備は、作業中に中断してのミーティングを減らすため、 必ず結果的に効率も上がります。
私はスクールに通っている頃から、実際の制作現場を想定して準備を行い、 チームで制作を心がけていました。 今学ばれている方はこれらを踏まえての制作をすることでより実戦に近い経験を得られるのではないでしょうか。
この記事はQiitaに投稿したものに加筆し投稿しています。 qiita.com
CSSの優先度を覆す最後の手段、!importantについて
書いた
!importantとは
!importantをつけるとclass、IDなどのCSSの優先度を無視して最優先で適用することができる。
実例
<div class="example">
<h2>ここに適用したい</h2>
</div>
.example h2{
color: blue;
}
h2{
color: red !important;
}
値の後ろに!importantをつけて使う。
CSSのポイント換算
少しおさらい、
|セレクタ|詳細度| :---|:---- |style=""|1000| |ID(#)|100| |class(.)|10| |タグ|1|
このようにCSSは加算式で優先順位が決めれている。
!importantはこれら一切を無視して適用される
実際どこで使うのか考える
実際、制作時に使うと破綻を持ち込みそうな予感しかしないし、最後の手段として覚えておく程度だと思ったが、少し考えて見た。
CMSやwebサイト作成ソフトで使う
WordPressなどのCMSや、Jimdoなどの最初からマークアップされているものに少しCSSを足したいとき、もうclassやIDが入り乱れていてよくわからない時など有効(かもしれない)
