## ルールを決める
今回は、ポートフォリオのデザインを決めていきます。
まずは、その場の思い付きでルールをごたごた決めていくことが無いように、ルールを決めていきます。
その１：コンセプト
Webエンジニアのポートフォリオサイトということで、コンセプトは信頼感・誠実さ・理路整然・落ち着き・読みやすさを優先してイメージします。また出身地が北海道の海沿いで、流氷が名物であったことから、氷や海のイメージを足していきたいと思います。ここから、具体的に色などのルールを決めます。
その２：色
個人的にはカラフルで見栄えのいいものが好きなのですが、ここは上で挙げたコンセプトに則り、水色やグレーを基調とした落ち着いた色を使っていこうと思います。ということで、ここまで決めたらChatGPTに提案してもらって….
| 役割 | 色名 | カラーコード | 用途 |
|---|
| ページ背景 | Ice Gray | #F5F8FA | サイト全体の背景 |
| メイン背景 | Snow White | #FFFFFF | カード、本文エリア |
| 薄い氷色 | Drift Ice Blue | #E6F4F8 | セクション背景、淡い装飾 |
| メインアクセント | Sea Blue | #2F8FB3 | ボタン、リンク、強調 |
| 濃いアクセント | Deep Sea Blue | #0F5F7A | 見出しの一部、ホバー、重要ボタン |
| 見出し文字 | Charcoal Navy | #1F2933 | H1、H2、強い文字 |
| 本文文字 | Slate Gray | #374151 | 通常本文 |
| 補足文字 | Cool Gray | #6B7280 | 日付、カテゴリ、注釈 |
| 枠線 | Ice Border | #DCE7EC | カード枠線、区切り線 |
これで決定。
その３：文字
まず文字フォントは、PCの使い手にもなじみ深く、かつPCに標準搭載されていて表示藻は綾愛「游ゴシック」をメインに使っていきます。
文字ルールについては、これもChatGPTの助けを借りて….
| 種類 | 役割 | サイズ目安 | 太さ | 色 | 主な用途 | 注意点 |
|---|
| H1 | ページ全体の主題 | 36px〜40px | 700 | #1F2933 | トップページのメインコピー、各固定ページのタイトル、日記記事タイトル | 1ページに基本1つだけ使用する |
| H2 | 大きなセクション見出し | 26px〜30px | 700 | #1F2933 | このサイトについて、できること、スキル、制作日記など | セクションの区切りとして使い、上の余白を広めに取る |
| H3 | 小見出し・カード見出し | 20px〜22px | 600〜700 | #1F2933 | Webアプリケーション開発、PHP、WordPressなどの小項目 | 本文より少し目立たせる。大きくしすぎない |
| 本文 | 通常の説明文 | 16px | 400 | #374151 | プロフィール文、説明文、日記本文 | 行間を広めにして、長文でも読みやすくする |
| 補足 | 補助的な情報 | 13px〜14px | 400 | #6B7280 | 投稿日、カテゴリ、タグ、注釈 | 本文より目立たせない |
| リンク | 他ページへの導線 | 16px前後 | 400〜500 | #2F8FB3 | 本文中リンク、詳細ページへのリンク | クリックできることが分かる見た目にする |
| ボタン文字 | 行動を促す文字 | 15px〜16px | 600 | ボタン色に応じて白 or #2F8FB3 | プロフィールを見る、制作日記を見る、お問い合わせ | 文言は短く、行き先が分かる内容にする |
| ナビゲーション | サイト内の案内 | 14px〜15px | 500 | #374151 | ホーム、プロフィール、スキル、日記など | 短く分かりやすいメニュー名にする |
これも完成。文字色は真っ黒ではなく、青みのあるグレーを使用し、流氷や海をイメージした落ち着いた配色になじませるようにしたいと思います。
その４：余白
余白については、堅いシステムほど敷き詰め過ぎず、かといってスカスカにならないようにしたいと思います。あとは、これまでの経験上８の倍数（または４の倍数）でマージンを取ることが多かったので、これに従っていきたいと思います。ここまで決めたら、ChatGPTにアドバイスしてもらって….
| 対象 | 余白目安 | 用途 | 考え方 |
|---|
| ページ上部 | 64px〜96px | ページタイトル周辺 | ページの始まりとして、ゆったり見せる |
| セクション間 | 64px〜96px | 「プロフィール」「スキル」「日記」などの大きな区切り | 別の内容に切り替わったことが分かるようにする |
| セクション内の見出し下 | 16px〜24px | H2と説明文の間 | 見出しと本文がセットだと分かる距離にする |
| H3と本文の間 | 8px〜16px | 小見出しと説明文の間 | 近い関係なので離しすぎない |
| 段落同士 | 16px〜24px | 本文の段落間 | 長文でも読みやすくする |
| カード内余白 | 24px〜32px | スキルカード、制作実績カードなど | 窮屈に見えないように内側に余白を取る |
| カード同士 | 24px〜32px | カード一覧の間隔 | カード同士がくっついて見えないようにする |
| ボタン上の余白 | 24px〜32px | 説明文とボタンの間 | 行動導線として少し目立たせる |
| ボタン内余白 | 上下12px〜14px / 左右20px〜24px | ボタンのクリック領域 | 押しやすく、見た目にも安定させる |
| 日記本文の見出し上 | 40px〜56px | 記事内のH2前 | 話題の切り替わりを分かりやすくする |
| 日記本文の見出し下 | 16px〜20px | H2と本文の間 | 見出しと本文を近づける |
| フッター上部 | 64px〜96px | 本文終了後からフッターまで | ページの終わりに余裕を持たせる |
ルール表が完成。情報は整理して、余白はやや広めに。ただし、関係のある情報は離しすぎないという方針で、ルールが決まりました。
その５：レイアウト
レイアウト、すなわち本文や日記、スキルを書いたカードやリンク用ボタン等の配置と色味をを考えます。
| 対象 | ルール | 目的 |
|---|
| ページ全体 | 中央寄せ | 画面全体に広がりすぎず、落ち着いた印象にする |
| 本文 | 左揃え | 長文を読みやすくする |
| コンテンツ最大幅 | 960px〜1120px | 情報量が多いページでも整理して見せる |
| 長文エリア最大幅 | 720px〜840px | 日記やプロフィール本文を読みやすくする |
| トップページ | セクションごとに分ける | 情報の流れを分かりやすくする |
| スキル・制作実績 | カード型で整理 | 比較しやすく、一覧性を高める |
| スマホ表示 | 1カラム | 横幅が狭くても読みやすくする |
またカードのルールについては、
| 項目 | ルール | 目的 |
|---|
| 背景色 | #FFFFFF | 本文や背景から分離し、読みやすくする |
| 枠線 | #DCE7EC | カードの境界を自然に見せる |
| 角丸 | 14px前後 | 硬すぎず、柔らかすぎない印象にする |
| 影 | ごく薄く | 浮いて見せるが、重くしすぎない |
| 内側余白 | 24px〜32px | 窮屈に見せない |
| カード間余白 | 24px〜32px | カード同士を読み分けやすくする |
| 見出し | H3を使用 | カードの内容をすぐ理解できるようにする |
| 本文 | 短めにする | 一覧性を保つ |
| アクセント | 水色を小さく使う | 流氷・海の印象を足す |
そしてボタンは、
| 種類 | 見た目 | 用途 |
|---|
| メインボタン | 濃い水色背景 + 白文字 | 一番押してほしい導線 |
| サブボタン | 白背景 + 水色文字 + 水色枠線 | 補助的な導線 |
とします。（ChatGPTにきくとすぐにまとめてくれてすごい。）
その６：画像、アイコン、装飾
どんどん決めていきます。まずは画像については
| 対象 | 使い方 | ルール |
|---|
| プロフィール画像 | 人柄や雰囲気を伝える | 必須ではない。使う場合は清潔感・信頼感を優先する |
| 制作実績画像 | 作ったものの画面を見せる | スクリーンショットを使用し、サイズ感を揃える |
| 日記画像 | 作業内容の補足 | 必要な場合のみ使用する |
| 装飾画像 | 雰囲気づくり | 多用しない。流氷・海の印象は色や余白で表現する |
| アイキャッチ画像 | 記事一覧で目を引く | 全記事で無理に設定しなくてもよい |
見た目のルールも決めます（枠線や角丸など）
| 項目 | ルール |
|---|
| 角丸 | カードと同じく、少しだけ角丸にする |
| 枠線 | 必要に応じて薄いグレーの枠線を付ける |
| 影 | 使う場合はごく薄くする |
| サイズ | 同じ種類の画像はサイズ感を揃える |
| 余白 | 画像の上下左右に十分な余白を取る |
| 代替テキスト | 画像の内容が分かる説明を入れる |
各アイコンについても同様。
| 対象 | 使い方 | ルール |
|---|
| スキルカテゴリ | Backend、Frontendなどの補助 | 小さく使う。主張させすぎない |
| ボタン | 必要な場合のみ矢印などを付ける | なくてもよい |
| 制作実績 | 使用技術やリンクの補助 | 統一された雰囲気のものを使う |
| 日記 | カテゴリや投稿日の補助 | 基本は文字だけで十分 |
アイコンの見た目は
| 項目 | ルール |
|---|
| 色 | #2F8FB3 または #6B7280 を基本にする |
| サイズ | 16px〜24px程度 |
| 線の太さ | 細め〜中くらいで統一する |
| 種類 | 線画系で揃える |
| 使用数 | 1セクション内で使いすぎない |
そして装飾ルール。一応、真面目なサイトなのでアニメーションは派手にせず、静かに整ったイメージでまとめます。
| 装飾 | 使い方 | ルール |
|---|
| 背景色 | セクションの切り替え | 淡い水色 #E6F4F8 を一部に使う |
| 枠線 | カードや区切り | 薄いグレー #DCE7EC を使う |
| 角丸 | カード・画像・ボタン | 使うが、大きくしすぎない |
| 影 | カードの浮き上がり | ごく薄く使う |
| 下線 | 見出しやリンク | 水色で控えめに使う |
| グラデーション | ファーストビューなど | 使うならかなり淡くする |
いやー、ここまででもたくさんの決め事が必要でしたが、まだ続きます。
その７：日記ページのルール
学習ログとしても、忘備録としてもとても重要な日記ページ。ここは、特に注意して決めていこうと思います。
日記一覧の表示ルールは以下のようにします。
| 要素 | ルール |
|---|
| 表示内容 | タイトル、投稿日、カテゴリ、抜粋、続きを読む |
| 本文 | 全文表示しない |
| レイアウト | カード型で一覧表示する |
| 画像 | 必須ではない |
| 余白 | カード同士に十分な余白を取る |
| 文字 | タイトルを目立たせ、投稿日は控えめにする |
そして、日記本文ページは、以下のルールで運用します。
| 要素 | ルール |
|---|
| H1 | 記事タイトル |
| メタ情報 | 投稿日・カテゴリを控えめに表示 |
| H2 | 話題の大きな区切り |
| H3 | 補足的な小見出し |
| 本文 | 16px、行間広め |
| コードや設定 | コードブロックを使って分離する |
| 画像 | 必要な場合のみ使用する |
そしてテンプレートルールは
## 日記本文ルール
日記本文は、前半を「作業の流れを読める文章」、後半を「作業ログ」として整理する。
前半では、作業した内容、つまずいたこと、調べたこと、解決したことを時系列で書く。
後半では、以下の定型文を入れてから、作業ログを箇条書きでまとめる。
「というわけで、今回の作業はここまでとします。
以下、作業ログ」
作業ログには、以下の項目を入れる。
- 今回の作業の目標
- 今回やったこと
- つまずいたこと
- 解決したこと
- 学んだこと
- 次にやること
こんな感じ。
きれいに整えすぎて、無機質な技術記事にする必要はありません。
今回のサイトでは、学習している過程を見せる ことも価値です。
とChatGPTさんも言っているので、あまり型にはこだわらずとも、ある程度のテンプレートは押さえておきます。
その８：スマホページの表示ルール
現代においては、PCはなくスマホで全ての作業を完結させる、という文化も存在します[要検証]。なので、スマホ表示についてもルールを決めておきましょう。
| 対象 | ルール |
|---|
| レイアウト | 基本は1カラム |
| 横幅 | 画面端に文字を寄せすぎない |
| 左右余白 | 16px〜24px程度 |
| カード | 縦並びにする |
| ボタン | 押しやすいサイズにする |
| 文字 | 小さくしすぎない |
| メニュー | 項目を増やしすぎない |
| 画像 | 横幅に合わせて縮小する |
その９：やってはいけないことリスト
その場の思い付きで方針転換しないように、やってはいけないことリストも作成します。
- 色を増やしすぎない
- フォントを増やしすぎない
- 画像を意味なく置かない
- アイコンを大量に並べない
- ページごとに見た目を変えすぎない
- 影を強くしすぎない
- 角丸を大きくしすぎない
- 余白をその場の感覚で決めない
- ボタンの見た目をページごとに変えない
- 中央寄せを多用しすぎない
- アニメーションに頼りすぎない
- 装飾で内容をごまかさない
ようやく、ルールが整いました。
## ルールを決めてみて思ったこと
一通りルールを決めてみて、これまで自分が個人で作ったサイトのデザインがめちゃくちゃになってしまう理由が分かったような気がします。とくに、思い付きで色や配置を決めてしまうので、何時まで経っても統一的なCSSが作れず、各ページにCSSを設定して結果ページごとにデザインが微妙に異なる、といったことがありました。ここまでルールが決められれば、先に統一的なCSSを作って、微調整していくということができるのだな、と思いました。このあたりについては、バックエンドだけいじっていると得られない経験だったので、今回一通りルールを決めてみてよかったと思います。
あとは、だいぶChatGPTに頼ってしまったなと思います。色味はともかくレイアウトや文字サイズについては、ベストプラクティスが分からずほとんど丸投げしてしまいました。これについては、勉強をしていきたいなと思います。
次回からは、このルールをもとにページを改修していきたいと思います。
というわけで、今回の作業はここまでとします。
以下、作業ログ
今回の作業の目標
– ページ全体のデザインルールを決定する
今回やったこと
– ページ全体のデザインルールの決定
学んだこと
一通りルールを決めて、全体的な方向性なしではCSSを統一することができないなと学ぶことができた。また、まず何を決めるべきかについてChatGPTを頼りにすることで大まかに理解することができた。
次にやること
– 今回定めたルールをもとに、トップページからページの表示を改修していく
