01 コンセプト
『1年生前期の集大成』として制作したオリジナルブログサイトです。
初めてデザインからコーディング、CMS構築までを自分で行った作品になります。
余計なものは入れず、極めてシンプルでスマートな誰が見ても分かりやすいデザインというものをコンセプトに制作を進めました。
02 仕様
- デザインテーマは自由
- CMS構築はWordPressで行うこと
03 使用ツール
Photoshop・Illustrator・HTML・CSS・PHP
04 制作期間
3ヶ月
05 工夫した点
このサイトを作る上で工夫した点は、シンプルなデザインの中でもどれだけ個性を出せるか、というところです。ブログデザインはやはり見やすさ、分かりやすさが一番大切だと思うのですが、モチベーション高く更新を続けていくためにもちょっとした自分らしさをスパイスとして加えたかったので、ロゴや見出しのデザイン、投稿ページのグローバルナビゲーションのデザインなど細かいところにもこだわりました。
ロゴは紙に何十パターンもの案を書いて、このブログに似合いそうだなというものを激選しました。あえて手書き感を残すことで小洒落た感じを演出しました。
配色についてはアクセントカラーに、目に優しい緑をセレクトし、ベースカラーは真っ白だと目が疲れてしまうと思ったので少し暗い白をセレクトしました。
07 制作過程
トップページのラフ画です。
余計なものは入れず、見たいものをサクッと見れるようにデザインしました。
シングルページのラフ画です。
PC版では画面左側にグローバルナビゲーションを固定しました。上にあっても良いとは思うのですが、そうすると一行の文字量が多くなり、読む人が疲れてしまうのではないかと考えたので、左側に固定することにしました。
シングルページのスマホ版のラフ画です。
スマホ版でサイドにグローバルナビゲーションを表示すると、どうしても見にくくなってしまうし、まずスマホの横幅はそこまで長くないので、ナビゲーションが上にあっても読みやすさの点では全く問題はないと判断したので、スマホ版はハンバーガーメニューにしてあります。
試行錯誤したロゴ案です。
筆記体風から機械風のロゴまで色々なものを考えてかきだしてみた結果、一番しっくりきた右下のデザインに決定しました。
08 完成作品
作品URL https://momokaaa.parasite.jp/blog/
