ホーム > 亀の子記（日記）ど素人が独学でHTMLやPHPを勉強してサイトを作る日記

【53日目】サイトデザインに「余裕」を持たせてあげたい！

Posted:2020.10.22　 Last Update:2020.10.22

サイトを作成し始めて53日。昨日はサイト作成開始からの日数を自動計算するPHPを作成して、自動的に日記の日付が入るようになりました！少しのことですが、毎日の負担が減って嬉しいです。

今日やること

さて、現在はサイトの見栄えや運用性をよくする作業をしています。やりたいことをリスト化していたのですが、7個中6個が終りました！やりたいことリストはこんな感じ。進みましたねぇ。

今日は最後の「ブログ/記事ページの見栄えを整えつつ、記事画面もスマホ対応にする」に挑みたいと思います。以前にも取り組もうとして挫折したんですよね（笑）。今日こそは、前進したい！

最近作業を進めている間、他の方のサイトをよく見て周っていました。スタイルシートの書き方やデザインなどの参考にするために見ていたのですが、見やすいサイトってありますよね。自分のサイトとその方たちのサイトの何がそんなに違うのか、と。

最初は自分のサイトに余分な余白が多いと思っていたんです。で、それを埋めようと頑張りました。

そして、空白を埋めた今、思うこと。

「画面に余裕が感じられない」

言葉で説明するよりも画面を見てもらった方が早いと思うので、今このサイトで一番おしゃれなはずの「亀の工期（開発記事）」ページのスクショを下に貼り付けておきます。

問題点はものすごくたくさんあると思うのですが、いくつかあげると、まずは3点かな。今日は記事ページの改善をしたいと言いながら、トップページの改善になっていますが…。

まずはサイトの不要な文字情報を減らしていきたいと思います。初心者あるあるでしょうか。とにかく言い訳がしたくて、必要じゃないことまでたくさん説明していました。誰も気にしていないことを延々と…。「読みやすいな」と思うサイトには、言い訳なんか一つもない！不要な情報はガンガン削除しました。

次に、ナビゲーションバーの自己主張を封じます。サイトを作成し始めて17日目にすごくデザインを考えて作ったナビゲーションバー。さようなら。とっても勉強になりました。シンプルなデザインに変更します。

最後に、「適度な」隙間を情報と情報の間に入れたいのですが、…適度ってなんだろう。とりあえずやってみます。

途中であまりにも説明が少なすぎないかな？と他の方のサイトを見てみたら、ナビゲーションバーに自己紹介を入れている方が多かったので真似してみました。自己紹介文を考えるのにめちゃくちゃ時間を使ってしまった…。うん、一時間近く！たった200文字程度が、なぜこんなに難しいのか…。

結果、サイトの見栄えはこんな感じに変化しました。うん、余裕ができた！

まだ改善できるところはあるのでしょうけど、すぐには思いつかないのでこれくらいにしておきます。

ついでに行間なども設定していたら、思いがけず記事本文も見やすくなったので、今日最初に目標にしていた「ブログ/記事ページの見栄えを整えつつ、記事画面もスマホ対応にする」も完了できてしまいました！

やることリスト全部完了しましたよ！今日はここまでにしておこう。…と言っても、自己紹介を考えるのに時間を使い過ぎて、もう時間もないんですけどね…。

明日は、これまで宿題で残っていたことを洗い出して解決していきたいと思います。

ロードマップで進み具合を見ると下記の通りです。サイト作成開始35日目から取り組んでいる「コンテンツに合わせてサイトを修正、スマホにも対応する」が今日で終りました。（たぶん）