kamenokoki.com

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

Posted:  Last Update:

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

今日やること

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

  1. ファイルの構成を修正し、関連するPHPの呼び出しなどを変更する ←完了
  2. ブログと記事の、それぞれのトップページを作る ←完了
  3. サイトのトップページを作り直す ←完了
  4. ブログ/記事ページの見栄えを整えつつ、記事画面もスマホ対応にする ←今ここ
  5. 日記の「何日目」を自動で入れられるようにする ←完了
  6. ファビコンを作る ←完了
  7. 記事に目次を入れる ←完了

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

サイトの問題点を洗い出す

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

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

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

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

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

サイトの問題点を洗い出す

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

  1. 不必要な文字情報が多すぎる
  2. 脇役のはずのナビゲーションバーの自己主張が激しい
  3. 情報と情報の間の距離が近い

サイトの見栄えを整える

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

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

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

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

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

サイトの問題点を洗い出す

まあまあ満足

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

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

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

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

おまけ:ロードマップ

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

  • 準備 - サイトの全体像を決める
  • 使用するプログラミング言語を決めて環境を整える
  • サイトの基本構造を作って公開する
  • 収益化に最適なサイトにアップグレードする
    • コンテンツを充実させる(他の作業と同時進行)
    • サイトを見てもらえるようにサーチエンジンに登録する
    • sitemap.xmlとRSSを作成する
    • コンテンツに合わせてサイトを修正、スマホにも対応する ←今ここ
    • お問い合わせページを作る
    • 検索ボックスを作る
    • サイトマップページを作る
    • 個人情報に関するページを作る
    • SEOとセキュリティについて調べ、対応する
  • GoogleアドセンスとAmazonアソシエイトの申し込みをする
  • ローカルで簡単に入力ができるようにフォームを作る
  • フォローアップ - より収益化に向いたサイト構造に変更する
記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

広告