ホームページ制作 Archive

皆さんお疲れ様です。よんです。

さて、今日はバナーをまた一つ制作してみました。と、言っても少し前にバナーのほうは先にアップしていたのですが・・・

先日、ブログの右メニューにニシキプリントメインサイトへのバナーを作りましたが、今日は印刷ページへのリンクバナーです。

まずは以前同様、簡単なラフを作成。

基本的に先に何を入れるかを決めておいて、そこからイラストレーターで肉付けしていきます。

最初のラフはあくまで参考です。もし、良いアイデアが浮かんだら後付けということも・・・（汗）

以前にバナー制作をした際に社内から、バナー制作は最初どれくらいのサイズで作るの？という質問が出ました。

基本的に私はピクセル単位の実寸で作っています。このバナーだと、横幅190px、縦幅55pxの枠を用意し、そこに素材や文字を入れていきます。大きいサイズで作るということもできないことはないですが、縮小段階で文字がつぶれたり、最初の見た目と若干変わってしまうことがあるので、最初からアップするサイズで作ると間違いはありません。

また、作るだけならIllustratorよりPhotoshopのほうが作りやすいと思います。私の場合はイラストレーターのほうがいろいろデザインがしやすいという点から使っています。

このバナーの素材です。


そして完成がこちらの画像になります。



次回はホームページ制作サイトへのリンクバナーを作りたいと思います。

皆さんこんにちわ。よんです。

さてタイトルにあるように今回はバナー作成を記事にしてみました。

ホームページなどには決まってあるものですね。

このサイトの右横に表示されていると思いますが、ニシキプリントメインサイトへの誘導バナーです。ここで誘導バナーと言ってしまうと元も子もないと言えばないのですが・・・

このバナーですが、作ってみるとなかなか奥が深いものです。

バナーの目的は、ユーザーが見て、そこをクリックし、先のページが見たくなるような魅力的なものに仕上げなければならない・・・とは言っても、実際に作ってアップし、どれだけクリックされたかなどの効果を見てみないことには分からないものです。

というわけで、このバナーの制作を簡単にご紹介します。

まずモックアップと言いますか、簡単に仕上がり図をラフで書きます（手書き）


そしてそれを元にパーツを準備。私の場合は、いつもAdobeのIllustratorで素材をいじくってます。


実際にはもっとたくさんいろいろなパーツ、アイコンなどを使って思考錯誤するのですが、とりあえず完成したもののパーツを掲載してみました。

そして完成がこのバナーです。


・・・読みにくいでしょうか？

バナーのサイズなどはそのサイトの表示する位置、幅で決まります。

今回は、このブログ横のサイドメニューに入れるということで、190px × 55pxで制作しました。

縦幅をもう数ピクセルあってもよかったですね・・・また修正するかもしれません。

小さい幅の中にどれくらいの情報量を入れるかというのも考えどころです。むしろ幅に合わせた文章作りをしないといけないでしょう。

別のバナーも制作中なので、またご紹介していきたいと思います。