はじめに
今回からこのブログをどうやって作ったのかについて解説します。なぜブログを作ったのかについては、前回の記事で解説していますので、是非一度読んでいただけると幸いです。
この【デザイン編】では何を目標に、どんな手順でデザインしたのかを解説します。
一応
「０から」が一体どこからなのかを説明すると「ほぼプレーンなVPSを借りるところから」です。フロントエンド部分はほぼ全て自分でコードを書いていて、WordPress等のサービスは使用していません。
インフラやフレームワークについては今後の【コーディング編】で解説する予定です。
完成品
まず先に完成品を見せちゃいます。ていうかポートフォリオページ以外は既に見られてますね。
ご存知の通りシンプルです。しかし素人なりにそこそこうまく作れた気がします。自分では結構気に入っていて、とくにBlogページのNewArticleと記事タイトルの黒い帯の部分が好きです。
1枚めは現時点（2024/5/26時点）で未実装のポートフォリオページです。
このポートフォリオページ、My Expertiseのコーナーを作りましたが、まだ何のスキルもないので正直書けることがありません。My Worksも同様です。
（このポートフォリオページの実装はもう少し温めようかな、、、。）
ポートフォリオページ
ブログページ
制作手順について
今回デザインを作成するにあたって以下の手順で作成しました。
- ブログの機能要件、デザイン要件を決める
- 参考になりそうなWebサイトをあさる。
- 気に入ったサイトを手本にFigma上で再現 ＆ 自分のブログに合うようにカスタムする
- イメージが固まったらデザインしていく
- 完成
手順を書きましたが、上記の１〜５をきれいになぞっていったわけではありません。デザインをしていると「ああしよう、やっぱこうしたい、ああでも、、、」が無限に出てきます。１〜４を行ったり来たりしながら、完成に近づけていきました。
ここからはそれぞれの手順について解説していきます。
1. ブログの機能要件、デザイン要件を決める
何を作るのかをここで決めます。自分のやりたいこと、必要な要素を書き出します。
今回は以下の要件を満たすことを目標にデザインをしました。
機能要件
- Markdown形式で記事がかけること
- h1タグ：フォントサイズ: 40
- h2：フォントサイズ: 32
- h3：フォントサイズ: 24
- 通常のテキスト：フォントサイズ18（太字、下線、指定カラーに対応）
- 画像：PNG、GIF、JPGに対応。サイズは横幅いっぱいにする。
- URL：Webページのクリック用のリンクボタン&サムネイルが表示されるようにする。
- 動画URL：YouTube動画が再生できるようにする
- Tipsセクション：コールアウト表示のデザインを作る
- BLOG、PORTFOLIOなどのタブがあること
- 記事に目次が存在すること
- タグ機能があること
- ダークモードに対応していること
デザイン要件
- シンプルなモノクロを基調としたデザイン
- レスポンシブ（スマホ、タブレット）に対応していること
- ポートフォリオページ掲載内容
- 顔写真
- 自己紹介文
- 簡単な経歴
- スキル
- 制作物（WORKS）
- ブログページ掲載内容
- サムネイル画像
- 記事の一覧表示
- 目次
- ヘッダー、フッター
もう少しありますが長くなってしまうのでこのくらいで。
まずデザイン要件と機能要件の違いについて解説します。こちらの要件を見ていると、「これデザイン要件じゃないの？」となる思われる部分がいくつかあります。逆も然りです。
結論から申し上げますと、機能要件はJavaScriptでのコーディングが必要になるパーツ、デザイン要件はCSSでのコーディングのみで解決するパーツ、という分け方をしています。（そこまで厳密ではありません）
ここらへんは自分がわかればいいかなという感じで、ざくっと書いてます。
それとこの要件は最初に全て決めたのではなく、デザインをしながら何回も書き直しています。デザインして、要件を見直して、修正して、デザインして、要件を見直して、、、、の繰り返しです。ある意味、一人アジャイル開発と言えるかもしれません（ちょっと違うと思いますが）。
ちなみに行き当たりばったりとも言います（正しくはこっち）。
2. 参考になりそうなWebサイトをあさる
白状しましょう。このブログはいろいろなWebデザインの寄せ集めです。
要件が決まったらいざデザイン！とはならないのが素人です。自分が「いいな〜」と思ったサイトをいくつかピックアップし、それを参考にデザインをします。（つまりパクr….）
そして世の中には素晴らしいWebサイトがあり、数多のおしゃれなWebデザインをまとめたサイトが色々あります。
この手のサイトは見始めると余裕で１時間以上経ってたりします。恐ろしいですね。
3. 気に入ったサイトを手本にFigma上で再現 ＆ 自分のブログに合うようにカスタムする
今、「Figma上でわざわざ再現する必要あるか？」と思った人がいるかもしれません。いないかもしれません。
この作業を行った理由はシンプルです。それは
Figmaの練習のため
です。
正直Figmaを良くわかってなかったので操作になれるために模写してました。おかげで良い練習になったのはもちろん、自分の手元にいくつか良い素材を集めることができました。
デザインの模写練習、おすすめです。
4. イメージが固まったらデザインしていく
素材集まったし、こーゆー感じで行くか、、、。
的な雰囲気でデザインを作り始めました。素材を作ったり貼り付けたりしていくうちに、自分のこだわりが出てきます。要件決めたり、Figmaを練習したりするのは正直めんどくさかったですが、デザインが楽しかったのでヨシ！です。
デザイン時は以下の点に注意していました。
- 端をそろえること
- パーツごとの幅を統一すること（ヘッダーとタイトルの幅、記事の舌部分とフッターの幅など）
- グリッド線に従うこと
- シンプルにデザインすること
特に最後の「シンプルにデザインすること」が重要だと個人的に思ってます。
しばらく同じページをデザインしていると、だんだんと目が慣れてきます。目が慣れてくると「このページ簡素じゃね？」となってきます。そうなると何かが物足りなくなってきて、色々つけたしたくなります。しかしここは我慢。最終的にシンプルでそれなりにオシャレなデザインが作れたと思います。
余計なものをつけない覚悟が良いデザインを作るんじゃないかなと、素人なりに感じます。
最後に
たったこれだけのページですが、デザインには約２週間ほどかかりました。Figmaの操作方法を勉強していた時間を合わせると約１ヶ月。トータルで４０時間以上はかかったと思います。
ここまでデザインに時間をかけたのは「自分のブログに愛着をもつため」です。
このブログは自分のエンジニアリングの勉強のアウトプット先として制作しました。しかし勉強もブログでのアウトプットも、どちらも継続できるとは思っていません。自分の性格的に既存のサービスで投稿しても、１ヶ月もしないうちにやめている可能性の方が高いです。そこで、自分で０からデザインしたブログを作れば、愛着も湧くし継続につながるんじゃないかなーと。
結果的に愛着は持てていますし、このブログでやりたいことも色々とアイデアは出てきているので、しばらくは継続できそうな予感がしています。（希望的観測）
ではでは次回の記事で。
良いエンジニアライフを。