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が入り乱れていてよくわからない時など有効(かもしれない)
これからGoogleAnalyticsの始める人のとりあえず読めための基礎の基礎の用語集
書いた
20161215 Qiitaコメント欄からご指摘いたただき一部記事修正
始めに
自分用の備忘録だけど、ようやっとGoogleAnalyticsを使い始めたので、本当に基本的な用語をまとめておく。
とりあえずこれでけ把握しておけばなんとなくは読めるはず。
用語集
閲覧数の種類
最初はこの違いがややこしい。
ここでは一人のユーザー、Aさんを例にたとえてみる。
ユーザー
閲覧してた人数を指す。 Aさんはとりあえず何度見ようと基本１。
ユーザーはブラウザ単位で判断されるため、 例えばAさんがデスクトップPCからと、スマートフォンから、 別々のブラウザで閲覧した場合は、２となる。
またcookieを拾っているため、保存されるのは2年なので、
最初の閲覧から2年がたった時点で、
新たに２となる。
(コメント欄でご指摘をいただき修正しました)
サイトへの最終アクセスから2年以上 経過したユーザーがサイトに訪問すると、新規ユーザーとしてカウントされる
cookieを削除した場合はユーザーが減る。
セッション
サイトが見られた回数を指す。 Aさんが朝昼夜三回サイトを閲覧したら３になる。
１回の閲覧が切り替わる条件は主に３つで、 -30分以上操作がない -その日の日付を跨いだ -参照元が変わる
PV
閲覧されたページ数を指す。 Aさんがサイトのページを6ページほど見たら６になる。
直帰率
1ページだけ見て離脱するセッションの割合を指す。
新規セッション
直近２年間のサイトの訪問のないセッションを指す。
要は基本的にご新規のお客様。
デフォルトチャネルグループ
集客→サマリ-→チャネルで見る
参照元のまとめ。
ここは主に使われる4つのみをあげる。
Organic Search
検索エンジンからの閲覧を指す。
Referral
別のサイトのリンクからの閲覧を指す。
例えば、このページの場合、私のブログにリンクが貼っているため、 そこから来て閲覧している場合はそれ。
Social
SNSからの閲覧を指す。
ただしGoogleがSNSと認識しているものになるので、 そうでない場合は上と同じになる。
Direct
どこからか不明な場合ここに入る。
例えば、URLを直接入力した場合、個人のブラウザのブックマークからの閲覧の場合などもここに入る。
Directが増えている理由
スマートフォンアプリからの流入
参照元の情報が設定されていない場合が多い
https→http
SSL化されているサイトから非SSLサイトへは参照元の受け渡しが行われない。
目標
GoogleAnalyticsではコンバネーションとして、 目標を設定できそれに対しての達成度を計測することもできる。 (必須ではない)
サイトの目的により必要なものを使うと良いだろう。
CV率=コンバネーション率 目標達成率
到達ページ
ユーザーに閲覧させたいページを設定。 (お問い合わせページ、購入ページ、サービス登録ページなど)
滞在時間
閲覧させたい時間 (○分以上など)
ページビュー数
ユーザーに閲覧させたいページの数 (○ページ)
イベント
閲覧者にさせたいアクション (ファイルのダウンロード、特定のURLのクリックなど)
