現在のデバイス環境

デバイスの種類

カンプを制作する前に、現在のデバイス環境について押さえておく。

現在のデバイスは大きく3つに別れる。

  • PC
  • スマートフォン
  • タブレット

デバイスの大きさにもよるが、上記3つが主なデバイスになる。

レスポンシブデザインを考慮した場合、それぞれデバイスの最低の大きさでの表示を想定し作成することが基本となる。

デバイス毎のサイズ

1.PC

引用) http://gs.statcounter.com/

上の画像にあるようにトップは1920pxだが、次点に1366pxのモニターがある。

よって、PCの表示サイズは左右の余白込みで1366px以内で制作することが望ましい。

また、低シェアながら1280pxのモニターもあるため、1280px以内で収めることも候補となる。

2.スマートフォン

スマートフォンでの解像度は現在320px ~ 420pxのものが多いが、機種毎のばらつきが多いためタブレットサイズ以下のものを想定する。

タブレットの最小の横幅の想定はipad系列の768pxであるため、デバイスの横幅が767px以下のものをスマートフォンのレイアウトで表示する。

また、Retinaディスプレイのことを考慮した場合、画像サイズを2~3倍の大きさで作る必要がある。

3.タブレット

上記の2デバイスを踏まえ、タブレットの表示は768px ~ 1365px もしくは 768px ~ 1279pxの間となるが、768pxで余白を考慮し、綺麗に見えるデザインにしておく。

カンプ制作前に

制作時のルールを決める

制作する前にそのホームページはどういったターゲットをメインとするのか、カラーパターンはどうする、全体的なサイズ感はどうするかを決め、サイトのルールを明確とする

例:)

  • 文字のサイズを用途に合わせて固定する(大見出しは32px、小見出しは24px、本文は14px等)
  • 色を決める
  • marginやpaddingなど、要素同士の間隔のルールを作る
  • etc

テキストについて

1.テキストは段落テキストで制作する。

ポイントテキストで制作すると横幅や改行がわかりづらい。

2.フォントに気を遣う

デフォルトでwebで使用できるフォントは限られているため、特徴的なフォントを使う際はwebフォントを利用できるか確認した上で使用する。

また、webフォントによってはIE11などでカーニングや行間などに不具合が発生するため、できるだけ見出しのみなど長文に使用しない。

もしwebフォントがないテキストを使用する場合には画像で掲載することに成るが、レスポンシブの際に横幅に合わせて縮小することもあるため、工夫する。また、画像で掲載する場合はテキストとして掲載する場合に比べseoの上昇に悪影響がある。

3.表やグラフなどの使用する場合の注意点

表やグラフなどを使用する場合、PCでのサイズを意識して作るとスマートフォンでの表示の際、小さくなり視認が困難に成る場合が多い。

画像ではなくテキストデータとして制作した場合は視認性は問題ないが、横幅に合わせた対応ができるか、段の組み替えで対応できるかを意識して制作する。不安がある場合はコーダーに一度確認をとるなどするといい。

画像について

背景に透明な要素がある画像

切り抜き画像やロゴマークの場合、画像に透明部分ができるためpngで保存する(jpgだと透明部分が白と認識される)

また、psd内で透明にしたいときは事前に画像を切り抜く(乗算やスクリーンは使用しない)

マスクやフィルターを使用する際はスマートオブジェクトに変換する

マスクやフィルターは画像とグループ化しスマートオブジェクトに変換する。

フォント見本

フォントサイズ見本

フォントのサイズの見本一覧
なお、フォントの種類によって大きさは多少変わることを留意する


フォントサイズ10px

フォントサイズ12px

フォントサイズ14px

フォントサイズ16px

フォントサイズ18px

フォントサイズ20px

フォントサイズ24px

フォントサイズ28px

フォントサイズ32px

フォントサイズ36px

フォントサイズ42px

フォントサイズ48px

フォントサイズ56px

フォントサイズ64px

フォントサイズ72px

背景について

画像を背景に使う場合

画像を背景にする場合の設定についてコーディングの際には大まかに3種類の設定がある

  • 背景のサイズを指定する
  • 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
  • 縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する

レスポンシブ後の見せ方を含め、背景がどのように動くのかを意識する。

また、模様のようなパターンの画像を背景にする際は小さい画像をループさせて全画面に反映させるため、最小の単位でループできる画像を用意する。

 

ファーストビューについて

ファーストビュー(ページトップ)

トップページのメインビジュアルや、下層ページのサブビジュアルについて。

ページの一番最初に目に入る部分はスクロールせずに画面内に収まるように考える必要がある。

モニターの下りでも触れたが現在の主流は19:10のモニターなので画像の縮小なども考慮し、横1920pxに対し縦1080pxに収まるように意識する。

横幅いっぱいに画像を使用する場合、横1920pxに対し高さが半分以下になることが考えられるため、スマートフォンなどで見たさいに縦が100px程度になってしまうため、背景として使用し左右を見切れるように設定する、別の画像を用意するなど工夫する必要がある。

コンポーネント制作

コンポーネントとは

コンポーネントとは、簡単に言うとホームページの部品のこと。

例)ヘッダー、フッター、購入ボタン、バナーなど

コンポーネントの利用

フォトショップでは読み込んだファイルをリンク設定することができ、読み込んだファイルを更新した際、psd内でも更新することができる。

例)A.psd内にB.psdを配置し、B.psdを編集するとA.psd内に配置したB.psdも更新される。

メリット

この機能を生かし、ホームページでは絶対に存在する共通部分を別ファイルとして作成することで共通部分の修正があった時に全てのファイルに修正を即時に適応できる。また、一つのファイルに対してのレイヤー数を削減できるため、視認性の改善にもなる。

コーディング開始前の環境設定

現在の社内コーディング環境

1.使用エディタ

Atom

  • 起動が早い
  • 豊富なパッケージによる高い拡張性
  • フリーソフト

https://atom.io/

2.使用言語

HTML5

  • 必須

CSS3

  • 必須

SASS

  • 必須ではないが、極力使用

Javascript

  • jQuery
  • Vue.js

PHP

  • 主にWordPressで使用
  • フリーのお問い合わせフォームや投稿システムの利用等

3.備考

現在制作ずみの多くのページがwordpressで制作されているため、wordpress内で使用するphpなどは押さえておくべき。

コーディングの際にVue.jsやSASSを使用しているため、更新・修正の際に必要となるため、使用できるのが望ましい。

Flexbox

FlexBoxとは

flexboxとはcss3で追加されたレイアウト調整機能である。

floatのように横並びを作るときなどに使用する。

floatと比べた時のメリット

  • 高さの指定などが簡単
  • 要素の並び順を指定可能(逆向きなど)
  • 等間隔での配置などが容易

floatと比べた時のデメリット

  • IE11などで個別の設定が必要

参考リンク

日本語対応!CSS Flexboxのチートシートを作ったので配布します