こんにちは！
急に寒くなりましたねー。
いよいよ秋ですねー。
インターン生のOigamiです！
今日は読書の秋、と言う事で先日からの引き続き、図書館サイトのトップページのデザインを考えていきます。
ロゴデザインやグローバルナビ、バナーデザイン、デザインする部分っていうのはいくつかあるんですけど、
やはり一番時間がかかるというか、こだわりたい部分というのは、メインビジュアルの部分ですよね。
Mainvisual
メインビジュアルというのは、その名前の通りサイトにアクセスした時に一番初めに出てくる大きい画像のことです。
サイトのイメージの根本となる部分でもあるので、ここには時間かけたいですよね。
で、広告とかフライヤーのデザインで参考になりそうなものもたくさんある訳です。
その中で使えそうだな、と思った技術を紹介しておきますね
使える画像が限られている
画像を探すのがめんどｋ・・・ゲフンゲフン
時間が限られていたり、お客さんから提供される画像が少ない場合に使える手です。
使う画像はこれにします。
写真が良いので、これに文字入れるだけでもカッコよくなりそうですが(笑)
サイズは960px×500pxのMainviusualを想定します。
こんな感じで二つ並べて、左側の画像は彩度、明度ともにあげて、ビビっとな感じにします。instagramなんかでこんな色合いの写真よく見ますね。シャレオツな感じに見えます
逆に右側の画像はモノトーンにします
このモノトーンの部分にタイトルや文字を入れると完成です。
タイトルや文字の入れる場所によっては、左右の画像を入れ替えてみるのも良いかもしれないですね。
モノトーンに文字を入れる時は背景色と同化してしますので、色を付けるか、光彩(外側)などで調節してくださいね。
画像が少なければ増やせばいい
これも強引な手ですが、なかなかかっこよく見えるので紹介しておきます
まずはメインとなる部分を切り抜きます
それから、こんな感じで配置します
で、はじめの何の加工もしていない画像から
この白い部分に入るスペースで画像を切り抜いていきます
拡大してモノクロにしてみたり
角度を付けてみたり
どこか分からない画像を使ったり(天井と窓付近です)
拡大して、もっと彩度あげてみたり
で、足りない画像を作っていきます
基本的にベースで配置してる画像の拡大で切り抜いていくと良いと思います
こんな感じで完成。
Mainvisualというかフライヤーっぽいですね(笑)
画像や文字の配置を変えたりするだけでも、かなりイメージが違って見えるので色々と試しがいがありますね。
とまぁ、こんな感じで便利な配置の方法が他にもいくつかあるので、それはまた機会があれば紹介しますね。
本屋さんに行くとDTPの雑誌(専門書より雑誌がおすすめ)、でも特集組まれていたりするのでおすすめです。
ちなみに、このTHE CITY CAFE MOONは実在しませんのであしからず。
そして今回のMainvisual
実はまだ手直しする予定です
前々回のペルソナのイメージから、雑貨系のサイトのイメージで作成しました。
コラージュっぽい雰囲気で作ろうと思ってたんですが・・思ってたよりもメルヘンな感じに・・・
後ろの木の板の背景は固定で、前にある画像は動かす予定です。
動かしてみないと分からんなー、と言う事で今日の作業はおしまい！
ここまで見てくださってありがとうございます。
by Oigami