Overview
4つの工程で進めています。
聴く、整理する、つくる、確かめる。
案件によって前後することはありますが、
考え方の順番は変わりません。
-
聴く
目的、ターゲット、サイトの役割、
デザインの意図、更新の方法。
制作をはじめる前に、
必要な前提を揃えます。目的や前提を、
先に揃える。 -
構造化する
情報の優先順位、HTMLの構造、
画面幅での変化、更新できる範囲。
実装に入る前に、
決めておくことを決めます。実装前に、
判断の基準を整える。 -
形にする
整理した内容をもとに、細部を調整しながら
コードに落とし込みます。
見た目の再現だけでなく、
状態の変化や動き、公開後の更新まで含めて
実装します。変更や更新も見ながら
組み立てる。 -
確かめる
デザインとの比較、各環境での表示、
操作とフォームの確認。
気になった箇所を調整し、
納品できる状態まで持っていきます。確認して、
必要なところを整える。
つくるものを、先に決める。
ご依頼の内容をそのまま作業として受け取らず、
何のためのサイトで、
誰に何を届けたいのかを先に確認します。
作業ではなく、目的から確認する。
「このページをつくってほしい」という
ご依頼にも、その手前に目的があります。
何を達成したいのか、誰に向けたものなのか。
先に伺っておくことで、
実装中の判断がぶれにくくなります。
曖昧な部分は、提案を添えて確認する。
デザインの支給がある場合は、
見た目だけでなく、意図や要素同士の関係まで
読み取ります。
読み取りきれない箇所やカンプにない仕様は、
条件を整理して案を添えて確認します。
公開後のことも、この時点で伺う。
更新の頻度と担当者、
更新したい範囲、公開の方法と時期。
公開後にどこで、どのように使われるのかも含め、
制作に入る前に確認します。
checkpoint
- 目的とゴール
- 想定するターゲット
- サイトの役割
- デザインの意図
- 必要な機能
- 更新の方法と範囲
- 公開の時期と方法
どう形にするかを、
先に考える。
確認した内容を整理し、
実装に必要な構造やルールを組み立てます。
先に方針を整えておくことで、
制作中の判断がぶれにくくなります。
-
Priority
情報の優先順位
何を最初に読ませ、何を補足として置くか。
ページの目的から逆算して、
要素の順番と強弱を決めます。順番が決まると、
見出しの階層も決まる。 -
Markup
HTMLの構造とコンポーネント
見出し・リスト・セクションの対応を決め、
繰り返し使う部品を切り出します。
あとから項目が増えても
崩れない単位にしておきます。同じ見た目でも、
意味が違えば分ける。 -
Responsive
画面幅による変化
PC と SP のカンプだけでなく、
その間の画面幅での変化まで整理します。
縮めるのではなく、優先順位と読み順から
置き直す考え方で組み立てます。カンプの間も、
考える。 -
Update
更新できる範囲
WordPress で運用する場合、
どこを誰が更新するのかを先に決めます。
更新される前提の箇所は、
そのように実装します。更新されない前提で
組まない。 -
Behavior
UIの挙動と確認事項
開閉やスクロールに連動する動きは、
仕様を先に決めます。
デザインだけで決まらない部分は、
条件を整理してこの段階で確認します。動きの仕様は、
言葉にしないと決まらない。
整理した内容は、
そのまま実装中の判断基準になります。
途中で仕様が変わった場合は、
この段階に戻って整理し直します。
見た目の先まで、実装する。
デザインを再現するだけでなく、
操作したときの変化や動き、
公開後の更新まで考えて実装します。
決めた構造を、実装につなげる。
Structureで整理した情報の順番や役割を
もとに、HTMLの構造へ落とし込みます。
内容の意味や役割に合ったマークアップを
大切にし、あとから見ても分かりやすい構造で
組み立てます。
操作したときまで、使いやすく。
開閉・選択・読み込み中など、操作によって
表示が変わる部分も含めて実装します。
カンプにない状態が必要な場合は、
既存のデザイン意図を踏まえて案を考え、
必要に応じて確認しながら補完します。
内容の変化に、対応できるように。
文字数や件数など、更新によって内容が
変わる箇所は、公開後の増減も想定して
レイアウトを調整します。
WordPressでは、入力項目や
管理画面の見え方も含め、
更新する方が迷いにくい形に整えます。
必要な動きを、目的に合わせて。
アニメーションやUIの動きは、
読みやすさや操作を妨げないよう
調整しながら実装します。
見せるために動かすのではなく、情報の
伝わり方やサイト全体の印象に合わせます。
主な実装範囲
HTML / CSS(SCSS) / JavaScript /
jQuery / PHP / WordPress
レスポンシブ / フォーム /
アニメーション / アクセシビリティ
つくり終えてから、
確かめる。
デザインとの違いや、
環境による表示・動作を確認しながら、
必要な箇所を調整して仕上げます。
デザインと並べて、見比べる。
余白・文字サイズ・行間・色を、
支給されたデータと突き合わせて確認します。
意図して変えた箇所がある場合は、
理由を添えてお伝えします。
環境を変えて、
同じように動くかを見る。
PC とスマートフォン、
主要なブラウザでの表示と操作を確認します。
フォームの送信や、
WordPress からの更新も実際に試します。
気づいた点を、確認して整える。
確認の中で見つけた不足や崩れは、
必要に応じて修正します。
こちらだけで判断しない方がよいものは、
影響する範囲や対応案を添えてご相談します。
checkpoint
- デザインとの比較
- PC / スマートフォン表示
- 主要ブラウザでの表示
- 操作とリンクの確認
- フォームの送信確認
- WordPress の更新確認
- ご指摘への対応
ここでの Improve は、
制作中から納品までの確認と調整を指しています。
公開後の継続的な運用・改善については、
別途ご相談いただけます。
Notes
案件に合わせて、
進め方は変わります。
-
工程は前後したり、
一部を省略することがあります。 -
デザイン支給の案件では、
元データの意図を尊重して実装します。 -
案件での具体的な判断は、
Worksで紹介しています。