こんにちは。コンスキです。
今回は「2ページ目の文章を考える+文章を入れる」という作業を行います。
文章はイラストよりも先
1ページ目のデザインカンプ作り終わったことで反省する点がありました。
それは作業の順番です。
1ページ目(TOPページ)のデザインカンプを作成するときの作業の順番を思い出してみると、
「イラストを描く」→「文章を入れる」
という順番でした。
でも良く考えたら、この順番はよくないことに気がつきました。
なぜ良くないかというと、本来、ホームページの内容は、ホームページ作成を頼んで下さったお客さんの意向で決まるからです。
そうなるとページに書かれている文章とイラストとの相性をよくするためには、イラストの方を変えてく必要があります。
「文章を入れる」→「イラストをかく」
の順番の方でデザインカンプを作った方が、最終的な一体感が高まると思いました。
ということで、2ページ目からは文章を先に入れていくことにします。
文章を入れる
次の画像にある「⚪️⚫️」の部分に文章を入れていきます。

ただ、新しく文章を考える必要はありません。
このホームページを作り出したとき↓に、考えてありました。
ということで、考えてあった文章を入れるだけで済みました。

見出しを整える
ワイヤーフレームから見出しには手を加えてないので、味気ない状態です。




色や太さ、フォントなどを整えて、見出しっぽい見た目にしていきます。




文章の書体を整える
見出しの見た目が整ったところで、次はその見出しの内容部分の見た目も整えていきます。
整える前の全体図がこちらです↓

整えた後の全体像がこちらです↓

コメント