練習用デザインの作成

Adobe Fireworksの使い方やデザインの講義等が一段落したので、いよいよAdobe Dreamweaver研修用のデザイン作りに入る。

研修用の本は、

(ゼロからのステップアップ！)
Adobe Dreamweaver CS5 with Fireworks CS5 for Windows & Mac

  である。

まずは、本の中のデザインを参考にして色やイメージを考えて作るのである、レイアウトは本に沿って作るので本の通りに行う。

本の中の参考デザインです。

全体のデザインが変わると本に沿った通りに作ることが出来ないとの事、幅は750ピクセル、各パーツのサイズも決められた通りに作る事に成る。

ただし、一部のパーツは出版社のサイトからダウンロードして利用するとが出来る。

と　 

で、必要なところを切り出して使用する、上部のカメラとバラである、切り出しもだんだん手際よく成ってくる。

作ったのが下記のデザインで、ど素人デザイナーとしての最初のデザインである。

黒を基調にしたが、花の黄色がちょっと不似合かもしれないが、探してくるのが面倒臭いのでこのまま利用した、この後Webページ作りの実習に入る事に成る。

Web作成ソフトのDreamweaver等の参考本等は沢山出ているようである。

　　 　　 等々です。

ネットで副業しようと思ってる方にはこんな本も参考になるかもしれません。

本の画像をクリックするとAmazonのサイトに行きます。

簡単に画像を合成

訓練も３週間近くになり、実践的な実技が入ってきました。

「写真を撮ってみたけど背景がもう一つ！だ」こんな事良くあることです、例えばレストランを撮ってみたけど、空の感じが綺麗でない！。

レストランの写真、バックの空が。

空の写真はこんなのが有るのだが、と言ったとき。

最近は簡単に合成が出来る、以前からあって小生が知らなかっただけだと思いますが。

まずレストランの写真からレストラン以外を消して、*バックの空が切り取られている*

空の画像に、レストランを重ねて出来上がりとなる。

勿論、各イメージは個別で編集可能である、バックの空を夕焼けに変更も簡単にできる、しかし、デザインのセンスが良くなることはない、努力次第と言ったところだろう。

簡単に編集ができることは、Webページの出来栄えは各人のデザインセンスに左右されると言う事だ、少し辛いところがある。

黄金比・白銀比について

振り返ってみながらノートを紐解くと結構いろんなこと教えてもらっているもんだ、すっかり忘れてしまっていた。

Webデザインのイメージレイアウトについてです。
レイアウトに写真などを組み込む事が多いと思います、サイズを決めるうえで縦横のサイズについて黄金比と白銀比と言った比率が有ります。

黄金比とは
最も美しいとされる比「1:(1+√5)/2」のことで、近似値は1:1.618、約5:8です、「その美しさをWebデザインでも」というのがエントリの趣旨です。
**今のデジタルテレビは16：9＝8：4.5で若干違うみたいです。
Webデザインの場合、横幅を固定し、縦幅は固定しないデザインが一般的です（ディスプレイサイズを考え、文字数の増加は横方向のスクロールなしに、縦方向へのスクロールで対応している）。Flashで作られたサイトなどは、縦幅も横幅も固定している場合があります。

Webデザインに黄金比を取り入れようとした場合、全体の横幅と横幅の比からそれぞれの幅を求める必要があります。Flashサイトなどで縦幅も固定する場合は、縦方向の比も計算する必要があります。

黄金比について
http://ja.wikipedia.org/wiki/%E9%BB%84%E9%87%91%E6%AF%94

白銀比は
用紙サイズ（A3やA4など）や建物などに採用されている比「1:√2」のことで、近似値は1:1.4142、約5:7です。日本建築には古くから白銀比が用いられ、法隆寺の五重塔を上から見た投影平面図における辺（短辺と長辺）の関係も白銀比になっています。白銀比は別名「大和比」と呼ばれるくらい日本に浸透しています。「絞り値、シャッター速度、被写界深度の関係を覚えよう！」に登場した「絞り」も、ルート2が大きなポイントでした。

Webデザインに白銀比を取り入れようとした場合、全体の横幅と横幅の比からそれぞれの幅を求める必要があります。Flashサイトなどで縦幅も固定する場合は、縦方向の比も計算する必要があります。

白銀比について
http://ja.wikipedia.org/wiki/%E7%99%BD%E9%8A%80%E6%AF%94

　　　　　　　　　白銀比
　　

フィボナッチ数列と黄金比
これらはまったく似てもにつかない様に見えますが，２つの間には隠された関係があります。それは，フィボナッチ数列の隣同士の数の比をとるとその比が次第に黄金比に近づいていく，という性質です。つまり，フィボナッチ数列の隣同士の数の比は，黄金比の近似的な値が並んでいる，ということです

「ギリシャのパルテノン神殿」この建物の縦横の比が黄金比に近いと言われています。
「巻き貝の中でも一際美しいオーム貝」もこの数列を元にした螺旋を描いています。
自然界にはこういったことは沢山あるそうです、安定感、安心感を与えられるのでしょうか、デザインにしても結構使われているのではないでしょうか。

ホント自然とは不思議なものですね！！。

イメージカラーについて

だんだん進んでいき今回はイメージカラーについて教わった事です。

Webデザインを行うに当たって、対象者への訴求力向上にため、年代・　男女・季節等にあったイメージのカラーで配色を行うと良いとのことである。

参考ですが、色と季節を見ると

赤色--夏を感じさせる色。

黄色--春・夏を感じさせる色。

紫色--梅雨（初夏）を感じさせる色。

茶色--秋を感じさせる色。

黒色--冬を感じさせる色

みたいな感じです。

男性的・女性的、メルヘンチックなどいろいろありますが、テーマーを作成して配色を作るツールとして、アドビシステムズ社の「Adobe Kuler」があります、最近バージョンのIllustratorやPhotoshopでは直接Adobe Kulerにアクセスすることが可能です。

デザインのカラーについては理解できないことが多い、こういった部分の感性が不足しているのではないかと考えてしまいます、じっくりと勉強をしたいもんです。

Webページの配色について

少しづつWebデザインに入っていく、ページ全体についてのカラーの考え方である。

Webカラーの考え方を要約すると

配色の考え方
　（カラーの事がわからなくても失敗しにくい）
使う色を3色ベースにする
1・70％　メイン---ベースカラー
2・25％　メイン---サブカラー
3・ 5％　アクセント

色の選び方
1・1・70％　メイン---ベースカラー
背景などの広い色面を彩る色です
背景などになる色なので白や薄い（明度が高い）色が扱いやすい
サブカラーの明度を上げた色にすると使いやすい
2・25％　メイン---サブカラー
　メインカラーはある程度（明度の低い）色が扱いやすい
　明度が高いと文字が読めない
　明度が低いと読みやすい使いやすい
3・ 5％　アクセント
　少ない色調でアクセントを出す色です
　メインカラーから離れた色相にすると鮮やかになります

に成るらしい、しかし教育していく過程で個性を埋没させ「既成観念」として植えつけられたのではないだろうか？

勉強の方法としては
1・参考のWebページを選ぶ。
2・テンプレートのWebページを張り込む。
　　Fireworksですると色が簡単にキャプチャーできます。

**テンプレートです／空白部にWebページを貼る。

3・Webページを見ながら、下部の部分に色を設定する。

　　
**白鷹とMINIのトップページをばらしたところです。

色々なページをやってみると良いと思う、ホントに勉強になる事が多いもんです。
ただ、Fireworksの使い方を全然知らない状態で行ったもんで、Fireworksの使い方を本で調べながらだったので、訓練中は沢山は出来なかった。
予習・復習をしないとダメでしたね、しかし、気力と体力と知力がついていかない、訓練に来ている他の人は良く分っているんだと感心感心の連続でした。

Webページ構成の勉強

訓練はワイヤーフレームに関しての勉強に入った。

Webデザインにおけるワイヤーフレームとは、Webページの構成を大枠で示したもののこと。または、Webページの骨組となるボックスのこと、いわばWebページの見取り図のようなもの、Webサイトの骨組みをしっかり作っておくと、デザインする段階でスムーズに仕事がすすむそうです。

WikipediaやIT用語辞典によると
ワイヤーフレーム (wire frame) とは、コンピュータ上で3次元グラフィックスを扱う際に使われる立体表現方法の一つ。立体図形を、その輪郭を表す線のみで表現する手法、と有りました。

一般のwebサイトを参考に枠組みを作る練習と、一般的なワイヤーフレームの形から編集したりします。

標準テンプレートのＴＯＰページです

上はwebページを参考に作ったもので、下は編集前の一般的なワイヤーフレームです。
色々なサイトを書き下ろしていくと、勉強になるしWebページの見方も色々な方向から見ることが出来る。

ワイヤーフレームが出来るとデザインに引き継ぎを行っていく、ワイヤーフレームをいかに完成度を高くするかが、以後の作業効率を高める事につながる様である。

ディレクションって何だ？

Webデザイン基礎知識
Web訓練の最初は、サイトマップを作ることから始まった。
ディレクション実習と言うそうな。
　まずは、--ヒアリング
　そして、--サイトマップに関することである
ヒアリングは
Webを作る理由や構成・検索ワード等を、打ち合わせや情報を収集して纏める事である。
サイトマップはディレクトリ構成のようなものである。

パワーポイントで作ったのサイトマップ

サイトマップも後で出てくるワイヤーフレームもパワーポイントで作る、色々便利なソフトも出ているパワーポイントでは非効率的である、visioで作るとかなり時間が節約できるし、後での活用も広がる。

ココで良くわからなかったのが「ディレクション」
広辞苑にもWikiにも掲載されていない、英語表現ではdirectionになっていまして、方角・傾向・指揮・命令・監督が直訳らしい。
----------------------------
ディレクション【direction】
１ 指導。管理。監督。演出。指揮。「本の―を手がける」
２ 方角。方向。
３ 傾向。また、目的。

（Direct）…を導く，指導する
（tion）動詞に付けて「行為, 状態, 結果など」を意味する名詞を作る
-------------である。

ディレクションは、（Directory）ファイルを整理・管理するための、階層構造（ツリー構造）を持つグループ名から来ていて、効率・効果的にサイトマップを作ることかと最初は思っていましたが、違うみたいでした。

Webの記事を引用すると-------------
ディレクションって言葉ですが、広告代理店関係の営業やＷｅｂ制作業界の人間が好んで、客先でまで口にする言葉ですが、その言葉を話した相手に対して、その意味は？って聞いてみたのですが全員が”打合せです”って言葉が返ってきました。
じゃあ最初っから打ち合わせって言葉を使えば良さそうなものですが、何故かジワジワとこのディレクションって言葉が広まりだして来ているようですが、広辞苑にもWikiにも掲載されていないようですので、実際のところ何処かの広告代理店かなにかが、社内で使っていた言葉が徐々に外でも使い出しているって所が本当のところではないでしょうかね？
参照さしていただいたページです
http://jyouhoukan.net/column/381_direction.htm
---------------言った所です

広辞苑にもWikiにも掲載されていないと言う事は、まだ仲間内の言葉と言ったものなのでしょうか、日本だけしか通用しなかったりして、何でも難しくいって値打ちをつけようとしているのでしょう。

Webディレクションに関しての書籍は

色々あるみたいです、最後までよく出てくる言葉だったが、いまいちよく理解できませんでした。

素人っぽいってなんなのよ！

学習環境もとりあえず出来た事なので、職業訓練での内容を振り返ってみたい。

デザイン訓練の中で「素人っぽい」と言う言葉をよく聞きました、「素人っぽい」って何だ？。
解らないことはインターネットで調べればいい、何とも便利な時代に成ったもんです。

「素人っぽいデザイン」を調べてみると

素人っぽいデザインから抜け出すために、心がけたい5つのポイント
・ユーザビリティを無視した配置
・エフェクトをかけすぎる！
・色を使いすぎる
・文字がみにくい！
・余白や行間がバラバラ！

酷評に値するデザインというのは
・どぎつい色使いをする
・奇抜な演出、表現手法は用いる
・文書はこまめに段落分けしない、適度に見出しを設けない
・長い文書を強制的に改行したり、センターぞろえをする

フムフム、あっさりとして見やすい事といった所かな？
上のイラスト、ど素人っぽさ一杯といったところでしょ、色一杯使って、影付けて、変な文字使って、イラスト傾けて、時間をかけてダメにする、暇人のする事って。

下のボタンは、上が加工前、下が７ステップ加工を施したものです、講師からいただいた資料を基に加工したものです、確かに見やすく成っています。

こんな記事もありました。
素人っぽいデザインから脱却するためのデザインチップス
・1pxのボーダーを使う
・1pxのドロップシャドウをかける
・グラデーションを薄くかける
・テクスチャを薄くいれる
・ストライプを薄くかける
・ハイライトを入れる
・アイコンを使う
・リスト画像を使う
・透かす
・途中で切り落とす
・ボックスからはみ出す

上の加工したボタンには結構取り込まれています、勉強しなきゃいけませんね。
でも、ど素人はど素人なりの良さって無いんでしょうかね、インターネット見ているの殆んど「ど素人」さんでしょ！、デザイン見るより記事みたいんだと思うんだけど。