デザイン・制作のポータルサイト ｜ デジナーレカフェ
今回はフリーのアイコン素材を使って、ショッピングサイトのグローバルメニューをつくります。
今回は、素材がない時のデザイン方法を、キービジュアルをデザインする場合に絞って考えてみたいと思います。
入稿された写真素材のサイズが小さい・解像度が低い！そんな時のデザイン対処方法です。
グローバルナビ編の続編！簡単で見栄えのする見出しを作りましょう。今回はいくつかパターンをご紹介します。
デザインを作る上で、必要となってくるのがテイストです。見た目も雰囲気もとても左右される大切な内容です。今回は、テイストの作り方についてご説明します。
デザインを作る上で必要なテイストについて、今回は後編としてテイストの作り方を実践的にご説明します。
初心者にとってとっつきにくいペンツール。思い通りに描けないという方もこれを読めば、きっと使いこなせるはず！
初心者にとってペンツールは、どう使えばいいか悩むところではないでしょうか？ なんとなく線は引けても、思い通りに描けないと…
ペンツールの使い方をある程度マスターしたら今度は、トレースをしてましましょう。今回は、写真をトレースしてイラストにします。
今回は時間をかけずに作成するロゴの作り方をご紹介します。例としてWebサイトのロゴの作り方をまとめました。
今回はイラストレーターの効果を使って、手書き風のイラストにチャレンジ。ちょっと手を加えるだけでデザインに温かみがでてきます。
作る時に悩んでしまうのは、作り方のルールを知らないからなのかもしれません。そこで今回は、悩まずロゴを作れるポイントをご紹介します。
まずは、グローバルナビの文字を決めましょう。
今回はショッピングサイトのグローバルナビなので、「ホーム」「商品一覧」「ショップガイド」「よくある質問」「カートを見る」「お問い合わせ」の６つの項目にしました。
※クリックで拡大します。
下地は、6等分にして薄くグレー～白のグラデーションをかけます。グラデーションをつけることにより、立体感がでてきます。
※クリックで拡大します。
拡大したものが下の図です。グレーの縁取りとグラデーションの塗りの間に、1pxの白いラインが入っています。細かいところですが、このラインがあると全体が引き締まります。
下部に下線を入れてポイントを作ります。この下線もグラデーションにして、立体感をだします。
※クリックで拡大します。
下は拡大図です。
フリー素材のアイコンを探します。
探すポイントとしては、デザインテイストにあったものを探すことです。アイコン自体のデザインだけでなく、実際にグローバルナビに使用した時に浮かないかどうかも重要です。
今回は、右図のアイコンセットを使用しました。
商用利用可のWEB素材が無料な素材屋
（http://ec-sozai.net/ecalic01.html）
1項目ずつアイコンを探してもよいのですが、色味や雰囲気など、テイストが似たようなものを探すのは大変ですので、まずはこのようなセットを使うことをおすすめします。
サイズもテイストも合っているので、使いやすいですね。
早速アイコンを配置してみましょう。素材のままだと大きすぎるので、縮小しました。
縮小する際につぶれしまったり、ぼやけてしまう場合もあるのでほどほどに。ぼやけてしまったらシャープをかけましょう。
※クリックで拡大します。
文字だけの場合よりも華やかになりますし、アイコンがあるとより情報が直感的に伝わると思います。
グローバルナビの項目数が多い時は情報量が多くなりすぎてしまい、逆にわかりにくくなってしまうのでおすすめできません。素材は便利ですが、使いすぎないようにしましょう。あくまでもポイントに！
うまく素材を使って、素敵なサイトを作ってみてください。