情報収集

資料を確認し、エンドユーザーに見せたいコンテンツは何か、他社と差別化できるコンテンツは何かアピールするポイントを決めます。

• ヒアリングシート、サイト構成図の確認
• 現行サイトがある場合は現行サイトの確認・読み込み
• 同じカテゴリの他社サイトの構成、デザイン調査（コーポレートサイト、採用サイト、病院など特定のカテゴリのサイト）

調査結果をmiroにまとめたサンプルの一部：コーポレートサイトのコンテンツについて

https://miro.com/app/board/uXjVMKcbSaE=/?share_link_id=388570558369

使用ツール

制作するサイトの課題設定、フロントの構成案作成

調査した内容をもとに、今回のサイトの方向性やテーマを設定します。
同時に手書きでフロントページの構成案も作成します。

• 目的を達成するために、メインにおくコンテンツ
• 掲載コンテンツの順番
• ターゲット
• サイトの雰囲気

サイトデザインの方向性の確定

参考サイト・イメージから、ざっくりとしたサイトデザインの方向性を決めます。
それに合わせて使うモチーフについても方向性を決めます。
（例）やわらかい、かっちりしている、にぎやか、落ち着いている、など

ワイヤー作成

下記のポイントに従って作成します。

• どこに、何を、どれくらいの数で掲載するのかがわかる
• コンテンツ部分の最大幅をどれくらいでそろえるのかがわかる

使用ツール

カンプを作成する際には下記の点に留意しています。

• 画像やイラストは後ほど描きだすことを考慮して、元画像や変更できるデータを保存しておく
• スマホでの表示も考慮にいれてコンテンツの配置を決める

使用ツール

カンプサンプル

コーディングの際には下記の点に留意しています。

• タイトルやリスト、ボックスなどのパーツは使い回せるようにつくる
• 適宜コメントを入れて、どこに記述があるのか分かりやすいようにする
• パーツの役割によって、接頭語をつけたclass名にして役割がわかるようにする
• classやidは決まった場所にいれて、後ほどの更新がしやすいようにする

使用ツール