リニューアルデザイン1うさこが勤める「ホームページ制作会社トゥーウェイズ」では、毎年秋にデザインのリニューアルをしています。
仕事が空いてきたので、今年もそろそろリニューアルを行いたいと思っています。
せっかくなので、このブログで、リニューアルの様子をレポートしたいと思います。
リアルタイムでご紹介していくという奇特なレポートなので是非お楽しみ下さい。

企画部分はもう何ヶ月もかけて考えてきたので、制作部分だけのレポートです。
今日はまず、デザイン案の制作です。

デザインはPhotoshopで制作します。
イメージがつかみやすいよう、ブラウザ枠をキャプチャして、そのスペースで作成することが多いですね。
Windowsを使っている場合「Alt+PrintScreen」Macintoshを使っている場合「コマンド+Shift+4」でブラウザ枠のキャプチャをとることができます。

コンテンツのサイズですが、現在大きなサイズも出てきてはいますが、文字の読みやすさ等を考え、今回はコンテンツ幅を780ピクセルで制作することにします。

1)背景色の設定
トゥーウェイズのコーポレートカラーは黄緑とやまぶき色です。
毎回背景にはグレーや白を使用していましたが、今回はイメージ一新ということで、背景に色を持って来ることにしました。
グラデーションとしたことにより、深みのあるものになります。

2)グローバルメニューの設定
今回のリニューアルでは、ホームページ制作、イラスト制作、システム構築、グラフィックデザインの4つのサイトを立ち上げようと思っているため、ページ上部に、全部のサイトを行き来するためのグローバルメニューを設けました。
コンテンツ部分と別であることを明確にするため、グレーのグラデーションを選択しました。
1)のグリーンの方が浮き上がって見えるように、シャドウをつけています。

3)コンテンツエリアの設定
コンテンツ部分は、淡色に農色で文字を書きたいため、白にしました。1)のグリーンが浮き上がって見えるようにしているため、コンテンツエリアは凹んで見えるようにシャドウをつけています。

4)ロゴ部分の設定
ロゴは意味的にも全体にかかるものですから、一番上に乗っかって見えるようにしています。
全体がグリーンばかりのため、ここで山吹色を使用しています。

5)メインイメージの設定
コンテンツエリアの場所取りをきちんとするため、メインイメージは濃い色を持ってきています。色彩がおかしくならないよう、同系色の緑をベースとしています。ここも単一色ではのっぺりして軽くなるため、全体に柄を入れています。Photoshopのブラシで葉と蝶を使い、単調にならないよう工夫しています。
写真は自分でとったものです。パスを切ったものを何枚か配置しています。
文字は白でフォントはモアリアくっきり見えるよう、ドロップシャドウをかけています。

6)メニューエリアの設定
まだメニューは大雑把に枠をとっただけですが、さらに深い緑をおこうと思っています。
上半分が濃い緑、下が白、その境界となり、ナビゲーションに迷わないようにするために目だたせなくてはなりません。
細かなデザインは明日にまわします。

7)お問い合わせボタン
重要なのがお問い合わせボタンです。メニューの一部でありながら、メニューより目だたなければなりません。
今回はちょうどコーポレートカラーの、実家のぴぃちゃんにお問い合わせ札を持って(くわえて)もらうことにしました。
ぴぃちゃんのカラダが枠をはみ出していること、お問い合わせ札が傾いていること、これらはお問い合わせボタンを目だたせるためのちょっとした工夫です。

8)最新情報
新着情報エリアです。今日の所はとりあえずの場所取りです。
左側の文章エリアとの区別をきちんとするため、枠を太目にしています。

今日はこのくらいの作業をしました。
所要時間、約3時間です。

明日はこのデザイン案をさらにブラッシュアップしていきます。

ブログランキング このエントリーをはてなブックマークに追加