ホーム/このサイトの作り方

MAKING / こはねデザインの制作記録

このサイトを、どう決めて作ったか。

構成・言葉・デザイン。それぞれを選んだ理由をご紹介します。

事業が伝えたいことと、見る人が知りたいことを整理し、伝わる順番を決めてから、見た目を作る。

このサイトも、その順番で制作しています。依頼を検討する方に、完成した画面だけでは見えにくい判断の過程をお伝えします。

01 / PURPOSE誰に、何を伝えるか

想定したのは、ホームページの依頼先を探し、「自分の事業を理解して作ってくれるか」を確かめたい方です。

完成したデザインに加え、何を相談できるか、構成や原稿をどう決めるか、どこまで対応するかを伝える必要があると考えました。

そのため、トップページでは早い段階で制作実績へ進めるようにしました。各事例には画像とともに課題や判断理由を掲載し、相談前に仕事の内容を確認できるサイトにしています。

02 / STRUCTUREホームページの構成を、どう決めたか

訪れた人が「自分の相談に合うか」を考えられるよう、制作実績を先に見せ、その後に考え方・対応内容・進め方・制作費の決め方をつなげています。

POINT 01言葉と写真から始める

冒頭では「デザインは、いちばん最後。」という制作姿勢を、短い言葉と作業風景のビジュアルで示しました。すぐ後に実績を置き、言葉だけで終わらず、実際の制作判断を見られる順番にしています。

POINT 02実績で、判断の具体例を見せる

制作実績では、何を作ったかに加え、誰に向けて、どんな理由で構成や言葉を選んだかを紹介。トップページで説明した考え方を、実際の案件で確かめられるようにしました。

POINT 03依頼前に知りたい情報をまとめる

対応範囲、制作の流れ、制作費の決め方、よくある質問を掲載しました。制作費はページ数だけで一律に示さず、内容と範囲を伺って概算、正式なお見積もりの順でお伝えします。

03 / WORDSキャッチコピーとサイトの言葉を、どう決めたか

「デザインは、いちばん最後。」は、制作の順番を伝えるために選んだ一行です。

見た目を作る前に、まず事業のことを知る。次に、見る人が何を知りたいかを考える。その両方をつなぐ順番と言葉を決めてからデザインする。その進め方が伝わるかを軸に、5つの候補を比べました。

候補	選ぶときに考えたこと
目に留まって、伝わる。	何をする人か、制作の進め方までは伝わりにくい。
デザインは、いちばん最後。	採用。「最初に何をするのか」という問いから、制作の考え方へつなげられる。
読む人から、逆算する。	考え方は伝わるが、ほかの制作者にも当てはまりやすい。
伝わる順番を、つくる。	「順番」が何を指すか、説明が必要になる。
デザインの前に、整理を。	分かりやすい一方、読み手の記憶に残る言い方をもう少し探したい。

一行だけで終わらせず、サイト内でも「事業を知る」「見る人を考える」「両方をつなぐ順番と言葉を決める」「見た目をつくる」という制作の順番を説明しています。

同じ考え方を、言い方を変えて伝える

「どれも、見た目の話ではありません。」「きれいなデザインは、納品物の一部でしかありません。」「設計がひとつなら、どこに出しても揃います。」という言葉も、同じ考え方から選んでいます。

悩み・制作実績・対応できること、それぞれの話題に合わせて、制作前の整理が何につながるのかを伝えています。

UPDATE制作を重ねながら、このサイトの言葉も見直す

このサイトを作った当初は、「見る人から逆算する」という考え方を強く出していました。

その後、実際の制作案件を進める中で、見る人のことだけではなく、事業の理念や実際の運用まで理解しなければ、その事業に合う伝え方や順番は決められないと、あらためて整理しました。

そこでTOPページも、「事業が伝えたいこと」と「見る人が知りたいこと」の重なるところを探す、という表現へ見直しています。完成したサイトを固定するのではなく、実際の仕事を通じて考え方が具体的になったときは、自分のサイトにも反映しています。

04 / DESIGN読みやすく整える

文章の内容と区切りが、見た目からも分かることを大切にしました。

書体や強調の量、行間などを調整し、見出しを拾って読むときにも、本文をじっくり読むときにも内容を追いやすい形にしています。

POINT 01見出しと本文の違いをつける

日本語の書体には秀英角ゴシックを採用。大きさや太さを調整して、見出し・本文・補足の役割を分けました。書体の名前だけで決めず、実際の文章を入れた画面で確認しています。

POINT 02細い罫線と余白で、話題を分ける

見出しの脇に細い縦線を置き、話題の切り替わりを分かりやすくしました。生成した作業風景のビジュアルは冒頭だけに使い、実績には実際の制作物を載せています。生成画像を実案件の成果物として見せないよう、役割を分けました。

POINT 03強調と改行を整理する

色や太字を使う場所を絞り、何を先に読んでほしいかを明確にしました。文章は意味のまとまりで段落に分け、パソコンとスマートフォンの両方で、改行や横幅を確認しています。

細部で確認したこと

数字と日本語の高さ、区切り線の見え方、背景と文字のコントラストも調整しました。装飾を加える際は、内容の理解や読みやすさに役立つかを確認しています。

05 / PROCESSホームページ制作で、AIをどう使い、何を確認したか

このサイトの制作では、生成AIをHTML・CSSの作成や修正案の検討に活用しています。AIに案出しや実装を手伝ってもらいながら、何を採用するかは、事業として伝えたいことと、見る人にとって分かりやすいかの両方を見て判断しています。

工程	確認すること
構成・原稿	読む人の疑問に答えているか。事業の内容や対応範囲と合っているか。
デザイン	重要な情報が見つかるか。文字や画像の配置に無理がないか。
表示・動作	画面幅を変えても読めるか。リンクや画像が正しく表示されるか。

お客様の制作でも、ヒアリングをもとに見出しと本文を入れた構成案をお見せします。事業の内容や実際の運用と合っているか、見る人にとって必要な情報が伝わるかを一緒に確認し、内容を整えてからデザイン・公開へ進めます。