インディーズや個人、中小企業をデザインの力でバックアップしたい

ウェブデザイン

ウェブデザイン

テンプレート販売

テンプレート販売

企画

企画・音楽・映像・PR

2012年5月16日水曜日

ウェブデザイン。ナビゲーションーバーなんていらない?

ウェブデザインが洗練されてきたなーという印象の2012。

なんだかどこもかしこも一昔前であればプロでしか作れなかったサイトばかりのような印象があります。

先週、代々木公園でアースデーというイベントがあったので、その関連記事でこちらを何気なく読んでいました。ONE SHIPS PROJECT〜アースデイ東京・事務局長 濱中さんをお迎えして〜

なんだかすっと記事が入ってきて集中できた感じ?

さらっと別のページにネットサーフィンしようと思った時に

あれ?

と気付いたのです。

メニュー(ナビゲーション)がない



最近のデザインの定番


一、ヘッダーをクリックすると表紙に戻る


一、パンくずリストで、今いるページの階層がわかる


ひょっとして・・・これで充分?




たとえばテレビ・・・



昔のテレビはディスプレイの横に決まってチャンネルが付いていました。

大昔はダイヤルだし、その後はボタン式、右に付いたら下に付いたり、いつしかそれは、ディスプレイを見ているときは見えない位置に移動して、今ではリモコン操作。

これが進化形なんでしょうね。

テレビってどれもこれもスタイリッシュになりましたよね。


ウェブレイアウトにも言えるのかもしれません。


どんなデザインの進化にもそれなりの理由があるわけで、それを自分の専門領域でも採用していくことは質の向上への近道なのかもしれません。


ところで企業サイトや一般サイトでどのようにページを移動していますか?



表紙→会社概要→サービス→問い合わせ


と横に移動していますか?

それとも、仮にナビゲーションバーがあったとしても、


表紙→会社概要→表紙→サービス→表紙


と一度、表紙に戻っていませんか?二度手間、三度手間であったとしても、表紙に情報を充実させることが主流の今日、一度、表紙に戻って、今見たコンテンツが全体のどの位置でどのくらいの扱いで言及されているのか、その他、どんなコンテンツがあるのか等を確認しに一回一回表紙に戻りませんか?

とりわけ、それぞれのサイトでは上にあったり、右にあったり、左にあったりするナビゲーションバーをクリックするよりもどのサイトでも決まった位置にあるヘッダーで表紙に戻ることのほうが自然なのかもしれません。

可能性として・・・


ナビゲーションバーはいらないのかもしれない

ヘッダーで表紙に戻れれば充分なのかもしれない


と思いませんか???


なによりナビゲーションバーがCOOLだったりかわいかったりすることは少ないですよね。
このページのようにナビゲーションバーがない(正確には上にマウスを重ねると出てきますが見せていない)ことのなんともスタイリッシュなこと・・・

このサイトの表紙にはナビゲーションバーが出てきますが、それでも、ナビゲーションを際立たせないことを考えた極力小さいデザインであることがわかります。

常にドーンと目立つところにメニューを載せ続けても美しくない?

たしかに、ナビゲーションバーというやつは目立つスペースを占領しますね。
デザインの教科書は、目立たせろといったコンセプトのものが多いですが、どうも、違うかもしれない・・・疑い始めました。

うーん。。。たしかにデカイし目立つし、じゃまといえばじゃまのような気もしないではない・・・

悩み中です。。。

2012年5月9日水曜日

情報をとにかく盛り込もうと思うお客さんが多い

会社の媒体デザインのお話です。


情報量の小さなもの順に並べると


社章やマーク<ロゴ<看板<名刺<チラシ<会社案内<ウェブサイト

という順番になると思います。


よくあるお客さんの要望は

とにかく情報を盛り込みたい!というもので


1.社章に業種を入れて欲しい

2.ロゴにキャッチコピーを入れて欲しい

3.看板にサービスの詳細を載せて欲しい

4.名刺におすすめ商品を掲載して欲しい

5.チラシに会社概要を掲載して欲しい

6.会社案内に各商品の詳細を全て網羅して欲しい


というものが多いです。

これは、それより一つ情報量の多いツールでやりましょう!と言うことが多いです。

適度な情報量をオーバーすることで、窮屈な感じ、何が言いたいのかよくわからない感じ、そういう「感じ」が生まれることが多いです。

逆に余白が多いと、余裕のある感じ、安心する感じなどが生まれます。

それができないわけではなくて、ひとつ上のツールで!これがおすすめなんです。

とりわけ、社章などのマークやロゴはクールであること、かわいいこと等が必須条件で、そのことによって、人の目を引きつけるという役割。

看板はそこに何があるかをわからせる役割

チラシはその商品がどういうものか説明する役割

などなど上手に使いこなすことが大切なんだと思っています。


どうも余白をもったいない、白い部分に何かが入るなどと考えがちなのですが、白という色の持つ力、余白のつくりだす感じは、視覚的なインパクトとして、とても重要な要素なんですよね。



にほんブログ村 ベンチャーブログ 起業・独立支援へ
にほんブログ村
人気ブログランキングへ ブログランキング

2012年5月3日木曜日

ロゴはイメージカラーの補色(反対の色)で作るのがベスト。

ロゴはイメージカラーとは真逆の「補色」で作るのがコツ!

企画室創希のウェブサイトの色調を調整してみました。

というのも、ロゴをオレンジにしたためなのです。

全体の調和を考えずにロゴだけを思いつきで作ったため、いざ、ウェブサイトに当て込むとどうにもしっくりこない。

時間ができたときに調整しようと思っていたのですが、ようやくGWに時間ができたので色味の調整。

やっぱり色の持つ力にハッとさせられました。

かなりしっくりする印象です。

まず、色の相関図を見たことがありますか?

これはカーテン屋さんですが、このページをご覧下さい。

反対側にある色を補色と言います。赤の場合は青緑になります。

ある一定の色の中にこの補色をワンポイントで入れると際立つという特色があります。

今回、私はオレンジのロゴを作りました。

オレンジの補色は?

オレンジは黄赤と黄の中間くらいだから、その逆に位置する青と紫の中間くらいの色になるわけです。

というわけえ、サイト全体を濃い青で覆います。

するとこのロゴが際立って、全体としてまとまってきます。

いかがでしょうか?

というわけで、テクニックとして、企業や団体でイメージカラーがある場合、その補色でロゴを作ることをオススメします。

もしくは、イメージカラーでロゴを作ったときは、サイトの全体的なトーンは、その補色で作成することになります。

たくさんの色をあちこちに使うのは基本的にNG。ただし、スーパーの広告などの場合は例外になります。

にほんブログ村 ベンチャーブログ 起業・独立支援へ
にほんブログ村
人気ブログランキングへ ブログランキング

Lesson5 画像を差し替える

Lesson5 画像を差し替える。

Simple7 カスタマイズ第五弾です。

 前回はページのリンクの編集を行いました。 状態は以下のようになっていると思います。


この船の画像を差し替えないことにはどうにもオリジナルということにはなりません。

(この画像は私が旅行で撮影したものなので著作権上なんら問題は無いのですが・・・)

差し替えてみましょう。

今回は、ソフトを何も使わずにきているので、趣旨をそらすことなく、ただ、Windowsに最初から入っているアクセサリは使わせていただきます。

まず、この画像の大きさを説明しますと、横は320px、縦が171pxです。

横に関してはスマートフォンサイズで設定してあるので必ず合わせていただきますが、縦はお好みで差し替えることが可能です。


では、表紙で使いたい画像を用意しましょう。

デジカメで撮ったものでもOKですし、ネットでフリー素材を探してもOKです。

仮にこの画像に差し替えてみたいと思います。


windowsのプログラム、アクセサリからペイントを立ち上げます。


立ち上がったら、表紙にしたい画像をペイントで開いて、サイズ変更をクリック


横のサイズを320ピクセルに設定します。

これで、保存。保存する場所は、このウェブサイトのフォルダの中の"img"というフォルダです。
ファイルの名前は、半角英小文字か数字でつけてください。

仮にsakura.jpgという名前をつけました。

では、ウェブサイトのプログラムに戻りましょう。

プログラムの上の方にある、画像を決めているタグを見つけて下さい。これです。


<img src="img/photo01.jpg" width="320" height="171" alt="7colors">

この中のphoto01.jpgというのは画像の名前なので、これを先ほど作った、sakura.jpgに差し替えます。
ここで注意したいのが、画像の大きさを自分で作成した画像の大きさに数値を合わせて下さい。
widthが横、heightが縦です。

この場合、横は変更なし、縦が213ピクセルになりました。

また、alt="7colors"は画像のタイトルを表しています。この場合は、タイトル画像ですので、ウェブサイトのタイトルに変更してあげましょう。

alt="MY SIMPLE LIFE"

全てを編集するとタグはこうなります。

<img src="img/sakura.jpg" width="320" height="213" alt="MY SIMPLE LIFE">

ブラウザの表示はこうなりました。


若干、青いデザインに桜は似合わなかったかもしれませんね。
でも、文章と画像の差し替えができるようになりました。ということはオリジナル画像をつくることができれば、またはフリー素材が手元にあれば、いくらでもカスタマイズは可能ということになります。

最終的に、企画室創希のスマートフォンサイトのようにデザインすることも可能というわけです。

全5回にわたってSImple7を題材にHTMLの編集の仕方を説明してきましたが、いかがでしたでしょうか?

興味を持たれた方は、HTMLのタグを勉強してみるとまだまだたくさんの技があることに興味を抱くと思います。

このテンプレートは既にスタイルシートで各タグをデザインしてありますが、HTMLだけでなくスタイルシート(CSS)も勉強すると更にデザインは自由自在になります。

----------------------------------------------

ここで扱っているテンプレートはこちらからダウンロードできます。


----------------------------------------------



にほんブログ村 ベンチャーブログ 起業・独立支援へ
にほんブログ村
人気ブログランキングへ ブログランキング

2012年5月2日水曜日

Lesson4 リンクを編集する

Simple7 カスタマイズ第四弾です。

 前回はページの<p>タグの編集を行いました。

 状態は以下のようになっていると思います。


もう、ゴールは近いですよ。

ここからが真骨頂かもしれません。

リンクの設定です。

元から各ページへのリンクは完了されていますので、メインメニューのリンク設定は省きます。
※省きますが、こちらの説明を見れば、アレンジが可能になると思います。

今回はこの部分


FacebookやTwitterのリンクが設定できるようになっていますが、

え?Facebookやってない・・・Twitterやってない・・・という方、大丈夫です。

リンクはどこでも大丈夫。

メモ帳を開いてこの部分を見つけて下さい。

<nav class="vlist-nav block">
  <ul>
    <li><a href="#" target="_blank">FaceBook</a></li>
    <li><a href="#" target="_blank">Twitter</a></li>
    <li><a href="#" target="_blank">blog</a></li>
    <li><a href="#" target="_blank">プロフサイト</a></li>
  </ul>
</nav>

まず、リンクしたいページ名が<a href="#" target="_blank">と</a>で挟まれた部分です。

そして、そのURL(アドレス)をその#の中に打ち込みます。

全てのプログラムに言えることですが、「"」は絶対に消さないで下さいね。

これでリンクが完了します!簡単ですよね。



----------------------------------------------

ここで扱っているテンプレートはこちらからダウンロードできます。


----------------------------------------------


にほんブログ村 ベンチャーブログ 起業・独立支援へ
にほんブログ村
人気ブログランキングへ ブログランキング

Lesson3 コンテンツを編集する

Simple7 カスタマイズ第三弾です。

前回はページの小見出し<h2>タグの編集を行いました。

状態は以下のようになっていると思います。


順番に上から行きましょう。

次はこのウェブサイトを説明する文章を編集します。

ウェブサイトの「見える部分」のプログラムは、見出し、文章(段落)、画像の3要素から成り立っています。

今日はその文章の編集の仕方。

次のタグを見つけて下さい。前回やった<h2>タグの下ですね。


<p class="produce">後はテキストを編集するだけで完成です。</p>

本来、<p>だけでも文章は表示されますが、ここでは、スタイルシートというものでproduceというclassとを指定しています。(意味がわからなければ「そうなのか・・・」と思っていただくだけで結構です。)

この文章のデザインをこの場合、ブルーを使用していますが、背景をブルーにして文字を白抜きにするというデザイン設定をスタイルシートでプログラミングしてあるわけです。

詳しくは、スタイルシートを勉強するとわかると思いますがここでは特に疑問を思わず、このタグで挟まれたテキストを編集してみます。

この文章を、ウェブサイトの説明文、紹介文に書き換えます。

たとえば

「このウェブサイトは私のライフスタイルを紹介していきます」

にしてみましょう。


図のようになりましたか?いかがでしょうか?2行になり若干2行目の余白が気になります。

では、「ライフスタイルを」で改行してみたいと思います。

改行は、<br>タグを入れます。

「このウェブサイトは私のライフスタイルを<br>紹介していきます」

にしてみると・・・


改行されました。更にこの文章を中心にしたい!など、どんどん欲が出てくるわけですが、方法だけ記しておきます。

<p class="produce" align="center">

元のタグに半角スペースを空けてalign="center"を付け加えます。
詳しくはHTMLのリファレンス等を参照してみて下さい。
また、この下に<h3>タグ、<p>タグと続きますが、もうおわかりだと思います。そのまま、タグで挟まれたコンテンツを書き換えればOKです。class="produce"が付け加えられていない<p>タグが登場しますが、この場合、普通の黒文字文章になります。

文章を付け加えたい箇所に<p>タグで説明を加えるなど、これで自由にコンテンツの編集や追加ができるようになったと思います。


----------------------------------------------

ここで扱っているテンプレートはこちらからダウンロードできます。


----------------------------------------------




にほんブログ村 ベンチャーブログ 起業・独立支援へ
にほんブログ村
人気ブログランキングへ ブログランキング

Lesson2 ウェブサイトの小見出しを編集する

Simple7 カスタマイズ第二弾です。

前回はページのタイトルと見出し<h1>タグの編集を行いました。

状態は以下のようになっていると思います。


では、次に小見出しの編集をしてみます。

<h2>タグの編集


<h2>7COLORS</h2>となっている部分を編集します。

<h1>はサイトのタイトルなのに対して、<h2>は基本的にページタイトルに使われます。

絶対そうしなければならない決まりではないですが、ルールには従った方が後々、検索エンジンが内容を理解してくれやすくなります。

では、このページは表紙ですので<h2>にもタイトル同様、MY SIMPLW LIFEと打ち込んでみましょう。

打ち込んだら、メモ帳を上書き保存して、ブラウザに戻り、更新。


いかがでしょうか?サンプルと同じようになりましたか?

この要領で必要であれば<h3>も編集してみて下さい。

----------------------------------------------

ここで扱っているテンプレートはこちらからダウンロードできます。


----------------------------------------------


にほんブログ村 ベンチャーブログ 起業・独立支援へ
にほんブログ村
人気ブログランキングへ ブログランキング