askw Portfolio

ポートフォリオのデザインを考える

カテゴリ:

,

## ルールを決める

今回は、ポートフォリオのデザインを決めていきます。

まずは、その場の思い付きでルールをごたごた決めていくことが無いように、ルールを決めていきます。

その１：コンセプト

Webエンジニアのポートフォリオサイトということで、コンセプトは信頼感・誠実さ・理路整然・落ち着き・読みやすさを優先してイメージします。また出身地が北海道の海沿いで、流氷が名物であったことから、氷や海のイメージを足していきたいと思います。ここから、具体的に色などのルールを決めます。

その２：色

個人的にはカラフルで見栄えのいいものが好きなのですが、ここは上で挙げたコンセプトに則り、水色やグレーを基調とした落ち着いた色を使っていこうと思います。ということで、ここまで決めたらChatGPTに提案してもらって….

役割色名カラーコード用途
ページ背景Ice Gray#F5F8FAサイト全体の背景
メイン背景Snow White#FFFFFFカード、本文エリア
薄い氷色Drift Ice Blue#E6F4F8セクション背景、淡い装飾
メインアクセントSea Blue#2F8FB3ボタン、リンク、強調
濃いアクセントDeep Sea Blue#0F5F7A見出しの一部、ホバー、重要ボタン
見出し文字Charcoal Navy#1F2933H1、H2、強い文字
本文文字Slate Gray#374151通常本文
補足文字Cool Gray#6B7280日付、カテゴリ、注釈
枠線Ice Border#DCE7ECカード枠線、区切り線

これで決定。

その３：文字

まず文字フォントは、PCの使い手にもなじみ深く、かつPCに標準搭載されていて表示藻は綾愛「游ゴシック」をメインに使っていきます。

文字ルールについては、これもChatGPTの助けを借りて….

種類役割サイズ目安太さ色主な用途注意点
H1ページ全体の主題36px〜40px700#1F2933トップページのメインコピー、各固定ページのタイトル、日記記事タイトル1ページに基本1つだけ使用する
H2大きなセクション見出し26px〜30px700#1F2933このサイトについて、できること、スキル、制作日記などセクションの区切りとして使い、上の余白を広めに取る
H3小見出し・カード見出し20px〜22px600〜700#1F2933Webアプリケーション開発、PHP、WordPressなどの小項目本文より少し目立たせる。大きくしすぎない
本文通常の説明文16px400#374151プロフィール文、説明文、日記本文行間を広めにして、長文でも読みやすくする
補足補助的な情報13px〜14px400#6B7280投稿日、カテゴリ、タグ、注釈本文より目立たせない
リンク他ページへの導線16px前後400〜500#2F8FB3本文中リンク、詳細ページへのリンククリックできることが分かる見た目にする
ボタン文字行動を促す文字15px〜16px600ボタン色に応じて白 or #2F8FB3プロフィールを見る、制作日記を見る、お問い合わせ文言は短く、行き先が分かる内容にする
ナビゲーションサイト内の案内14px〜15px500#374151ホーム、プロフィール、スキル、日記など短く分かりやすいメニュー名にする

これも完成。文字色は真っ黒ではなく、青みのあるグレーを使用し、流氷や海をイメージした落ち着いた配色になじませるようにしたいと思います。

その４：余白

余白については、堅いシステムほど敷き詰め過ぎず、かといってスカスカにならないようにしたいと思います。あとは、これまでの経験上８の倍数（または４の倍数）でマージンを取ることが多かったので、これに従っていきたいと思います。ここまで決めたら、ChatGPTにアドバイスしてもらって….

対象余白目安用途考え方
ページ上部64px〜96pxページタイトル周辺ページの始まりとして、ゆったり見せる
セクション間64px〜96px「プロフィール」「スキル」「日記」などの大きな区切り別の内容に切り替わったことが分かるようにする
セクション内の見出し下16px〜24pxH2と説明文の間見出しと本文がセットだと分かる距離にする
H3と本文の間8px〜16px小見出しと説明文の間近い関係なので離しすぎない
段落同士16px〜24px本文の段落間長文でも読みやすくする
カード内余白24px〜32pxスキルカード、制作実績カードなど窮屈に見えないように内側に余白を取る
カード同士24px〜32pxカード一覧の間隔カード同士がくっついて見えないようにする
ボタン上の余白24px〜32px説明文とボタンの間行動導線として少し目立たせる
ボタン内余白上下12px〜14px / 左右20px〜24pxボタンのクリック領域押しやすく、見た目にも安定させる
日記本文の見出し上40px〜56px記事内のH2前話題の切り替わりを分かりやすくする
日記本文の見出し下16px〜20pxH2と本文の間見出しと本文を近づける
フッター上部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を頼りにすることで大まかに理解することができた。

次にやること

– 今回定めたルールをもとに、トップページからページの表示を改修していく

投稿をさらに読み込む