【Web制作過程】デザインカンプを修正する

サイト 修正 Webデザイン
falconp4によるPixabayからの画像

こんにちは、コンスキです。

前回までで、このホームページのデザインカンプをおおかた作り終えることができました。

全ページのデザインカンプを改めて見たところ、気になる部分があったため修正していきます。

ナビゲーションバー

現在のナビゲーションバーは下のようになっています。

見直してみると、角丸の枠で囲んでいる部分に違和感がありますね。

ひと昔前のホームページみたいです。

枠をなくしてみます。

よくなったとは思いますが、イラストと文字が一体になっていない感じがします。

「別にイラストなくてもいいんじゃない?」と思うような見た目になってしまいました。

そこで、イラストと文字を縦に並べてみます。

少しは今っぽくなったと思います。

メインビジュアル

現在のメインビジュアルはこんな感じです。

角丸をなくす

角丸になっていることが気になります。

個性的になると思って角丸にしたのですが、これが古い印象を与える原因になっている気がします。

角丸をなくしてみます。

横幅を広げる

今度は、横幅が気になります。

メインビジュアルの横幅がコンテンツ幅に揃えられているからかもしれません。

横幅をアートボードいっぱいまで広げてみます。

よくなったのではないでしょうか?

TOPページ以外も同じように変更してみます。

ページタイトルを表示する

今どのページにいるのか分かりづらいので、メインビジュアルに今いるページのタイトルを表示させようと思います。

文字が見やすいようにメインビジュアルの上にフィルターを重ねて、その上からタイトルを書きます。

完成形

今回の修正後の全体像がこちらになります。

残りのページのデザインカンプを全部載せるとページが長くなってしまうので、2ページ目のものだけ載せておきます。

コメント

タイトルとURLをコピーしました