flow
作品概要
一度ブログをリニューアルし、記事を書いていたのですが、しばらく書いていく中で色々と不便な点が出てきたので、WordPressの復習という意味合いを込めてもう一度ブログを制作しました。デザインやコーディングしていく中で改善していくべき点は他に何かないかと考えながら制作していきました。
制作の過程・思考
Adobe XDを使って、ブログのトップページと記事ページをデザインしました。読みやすさを重視し、余計な装飾などはあまりしないで、どこに何があるのかわかりやすいように意識してデザインしました。前のブログではカテゴリーの一覧が下の方にあり、すぐにこの記事が見たいというときに下までスクロールしていかないのは良くないかなと考えたのでヘッダーのナビゲーションにカテゴリを表示させるようにしました。またフォントも前のブログのは個人的に気に入っていなかったのでトップの見出しではこのポートフォリオでも使用しているFuturaを使い、本文では読みやすさを考慮し、遊ゴシックを使っています。
前のブログの問題点が主に4つありました。リストにCSSが当たっておらず左側の点が消えたままになっていた、コードを直接記事に書いた時に整形済テキストになるがそこにCSSを当てていないので見た目が普通の文章と変わらない、画像が白だと、CSSで影をつけていないので背景と同化してしまい見にくい、ファビコンを設定していないと致命的な問題でした。なのでこの問題点をしっかり解決させるために、リストは四角形が左に表示されるように、整形済テキストは背景がグレーになるようにしました。もちろん画像もbox-shadowを使って影をつけました。ファビコンもちゃんと設定してあります。記事も書きやすくなり、ブログ自体も読みやすくなり結構気に入っています。細かいところまでしっかり考えることで自分自身が使いやすくなったり、見ている人たちに対してもより快適になるのでそこまで考えて制作できるかがやはり重要なんだと感じました。