簡単に画像を合成

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

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

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

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

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

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

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

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

簡単に編集ができることは、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ディレクションに関しての書籍は

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

ふらっと太山寺となでしこの湯

ここ数日間いい天気だったので、野良仕事のしすぎなのか少し疲れた、以前に比べると体力が無くなっている、自由になる時間も多くなってきたので以前から廻っている「兵庫県観光百選」の今を少しづつ回ってみることにした。

神戸市西区の伊川谷に太山寺と言う本堂が国宝のお寺がある、近くになでしこの湯と言った温泉がある、疲れをとりがてら太山寺にも行ってみた、近くなんだが４０数年前に当時の同期達とキャンプに行ったときに訪れて以来である。

太山寺本堂の説明である、神戸市内の建造物の中で唯一の国宝だそうです。

花もなく一部工事中の状態で少し チョット寂しさがありましたが、工事は今月中に終わるとのことである。

三重の塔も国宝と思っていたが、県指定文化財とのことである。

仁王門から奥ノ院までさほど距離はない、若葉が出たときに行って見ると綺麗だろうなと思いながらウロウロとし、疲れをとるためになでしこの湯に行く。
太山寺となでしこの湯は歩いて十分程度である、神戸市地下鉄の学園都市駅となでしこの湯はマイクロバスが送迎をしているし、宿泊設備もある。

左が宿泊設備で、右がなでしこの湯である、外には足湯があり足をつけて本でも読むといいのかもしれない、湯につかるとやっぱり疲れは取れるもんである。

****++
兵庫県観光百選について（兵庫県政１００年協賛出版）
出版社・神戸新聞社　　発行・昭和４２（1967）年１０月１５日
定価･５００円（〒９０）/発売当時　　Ｂ５サイズ　３００ページ
兵庫県観光百選は、明治百年にちなんで 、県下から百ヶ所の観光地を選び出し、その開発と保存に協力しようと、神戸新聞社、デイリースポーツ社、兵庫県観光連盟の共催で行われたもの。
本は、昭和４２年１月１０日から神戸新聞紙上に連載された記事を加筆増補し出版されています。

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

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

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

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

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

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

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

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

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

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

学習環境-2・CentOS実装

バーチャルPCのインストールが出来たので後は各OSの導入である。

WindowsXPの導入に関しては、通常のインストールとほぼ同じように導入ができる、インストール終了後アップデートを行った方がいい。
IEに関しては「IE6」でWebページの表示テストを行うので、アップデートする時に注意が必要である。
環境の設定が終わったらコピーをしておくといい、いつでも再利用が可能になるシステムが潰れたときでもすぐに対応できる。

CentOS6の導入にかんしては沢山の記事がある。
-----------------
CentOS 6.0 インストール、設定の記事です。
(オヤジのサーバ構築奮戦記！)
http://wikiwiki.jp/poiuy/?CentOS%A5%A4%A5%F3%A5%B9%A5%C8%A1%BC%A5%EB
(CentOSで自宅サーバー構築)
http://centossrv.com/centos6.shtml
(Server World)
http://www.server-world.info/query?os=CentOS_6&p=install
-----------------

最近のLinuxは簡単にインストールが出来てしまう、XPとCentOSのインストール完了するとＶＭｗａｒｅに登録され個別に起動することが出来る。

各ＯＳを起動すると

長らく使用する機会がなかったが、2000年当時のVMware WorkstationやVirtual PC2004に比べると使い勝手が格段に進んでいる。

CentOS6の導入は簡単だったが、設定に時間がかかってしまった、初めてインストールしたにしては上出来である、設定に関しては「Server World」を参考にさせていただきました。

CentOS6の導入ステップ
1・インストールメディア　CentOS6　パッケージ利用
2・構築環境　VMwareで仮想PCとして導入
3・VMware環境
　　割り当てCPU　1CPU
　　割り当てMEM　1GB
　　LAN接続　ブリッジ接続
4・CentOS6設定項目
　　SV名　test
　　導入形態　Desktop
　　導入アプリ
　　　apacheサーバー　／CGI　PHP　ユーザーディレクトリ
　　　FTPサーバー
　　　SSHサーバー

5・導入手順
　　　5-1　CentOS6　標準インストール
　　　　Partitionの設定
　　　　boot　200M　→　768Mに変更
　　　　swap　2048M
　　　5-2　ファイアウォール設定／Security解除　**SELinux無効化
　　　http://www.server-world.info/query?os=CentOS_6&p=initial_conf&f=2
　　　5-3　ネットワーク設定　192.168.**.***/24
　　　5-4　エディッター（vim）の設定　今回導入なし
　　　5-5　SSHサーバー設定　今回検証用の為詳細設定せず
　　　5-6　Webサーバー（apache）の導入
  Httpd標準インストールすみ
  CGIの有効化

httpd インストール/設定、CGI設定
http://www.server-world.info/query?os=CentOS_6&p=httpd&f=1
PHP　インストール
http://www.server-world.info/query?os=CentOS_6&p=httpd&f=2
Userdir　の設定
http://www.server-world.info/query?os=CentOS_6&p=httpd&f=4
MySQL インストール
http://www.server-world.info/query?os=CentOS_6&p=mysql
phpMyAdmin　インストール
http://www.server-world.info/query?os=CentOS_6&p=mysql&f=1

何とか動いている、問題が出たときに対応すればいいと思い今回はWindows環境にxamppをいれて一応の完了とするが、再度時間をとってインストールと設定をしてみようと思う。

学習環境-1・構成どうする？

チョット一服したので、学習環境を作ってみることにする、後で参考になるといいなと書き留めてみた。

学習環境はどうしようか？？

最近はパソコンの能力も高くなってきたし、色々なバーチャルＰＣの環境も無料で利用することが出来るようになっている。
主なものにVirtual PC2007、VMware Player、Oracle VM VirtualBox、Hyper-V等がある。
簡単さはVirtual PC2007見たいだがWindowsOS以外とUSBが未対応なので、Web上での記事も多くLinux、FreeBSDやUSBをサポートしているVMware Playerで行うことにする。

必要ないのかもしれないが、勉強の為LinuxでAphacheサーバーを組んで学習環境を作ってみたい。

VMwareのインストールはいたって簡単、VMｗａｒｅのサイトからダインロードすると簡単にインストールできる。
ファイルはVMware-player-4.0.2-591240.exeで、サイズは116M程度である。

ダウンロードサイト
http://www.vmware.com/jp/products/desktop_virtualization/player/overview

＠ITのVMwareインストール等の説明サイト
http://www.atmarkit.co.jp/fwin2k/verification/vpcwin07/vpcwin07_01.html

詳しく知りたい方には関連の書籍は色々あります--

ダウンロードしてインストールしショートカットをクリックすると

VMwareの画面が立ち上がる、後は仮想マシンの作成を行っていけばいい。

今回は、Windows7をホストマシンにし、ゲストでLinuxのＣｅｎｔOS６、Ｗｉｎ　ＸＰ（IE6検証用）を入れてみることにする。
何故ＣｅｎｔOS６かと言うと、田舎の本屋さんでこれしか売っていなかった、NETで買えば色々あるのだが、思い立ったら即と悪い性分である何回も間違っては本棚の肥やしになっているものがある。

　

はじめてのCentOS6 Linuxサーバ構築編--買った本です

こんな本も参考になりますよ！！

できるPRO Apache Webサーバー Apache2/1.3対応 (できるPROシリーズ)

できるPRO Fedora 12 Linux 完全活用編 (できるPROシリーズ)

次は各OSなどを導入していこう。

職業訓練の終講式

今日は朝から天気が良い、雲がほとんどない。
朝行くと教室は閉まったままである、少し早かったからなのかと思っていたのだが、生徒は集まってくるが一向に教室が開く気配がない、カギを持って帰った人がまだ来ないとの事、最後の最後でチョットナ～！といった所である。
教室が開いたのは１０時の３分前、教室も開いたが、皆の口も開いてしまった。

終了証書、履修証明書などの配布があり、各自と講師陣の一言で終講式は終わる、総訓練時間は「690時間」になる。
最低賃金の「739円」で乗じてみると「50万と9910円」かけた事になる、これだけの物が身に付いたかどうかは之から次第である。

終講式後集団で昼食会、ワイワイガヤガヤ３時間チョット、座敷だったので年老いた小生にとっては少しきつい。
２次会にカラオケに行くとのことだったが、音程の範囲が狭くて音程に合わない歌い方（音痴とも言う）しか出来ないので早々に理由をつけて退散する、人付き合いの悪いのはいつまでたっても変わらない。

早々に勉強ができる環境を作りたいと思うが、明日も天気がいいらしいので、夏野菜用の菜園の手入れをしておかないと又雨になってしまいそうである、しかし早いうちに作らないと記憶はどんどんと容赦なく減っていく。
やっと出来た、ところで何するんだっけ？では寂し過ぎると言うものである。

とうとう明日から「ぷー太郎生活」が始まってしまう、ヤレヤレ如何したものか！！。

職業訓練もいよいよ最後

明日で６ヵ月間の訓練期間が終わる、振り返ってみると、Web作成のあらまししか解らなかったな～～と、いった所である、とてもとても実践で役に立つようには思えない。

勿論学校ではないので、勉強より実習が中心であるのは仕方がないと思うのだが、基礎知識の無い状態での実習では、その場しのぎの「見せかけの技術」に終わってしまう。

ほかの所はどの様なものだろうと、記事を検索していたら「phaのニート日記   ネットは無職を救う」と言うブログの中に下記の様な記事があった。

---記事-------
知らないと損する職業訓練
授業は全部で３ヶ月あって、学ぶ内容は、最初の２ヶ月でHTMLとCSSの基礎、Fireworksの使い方、DreamWeaverの使い方、Flashの使い方、JavaScriptなどを学び、最後の１ヶ月で修了制作として企業から依頼を受けたという設定で架空の企業サイトを一つ作り上げるというものだった。
--中省略--
３ヶ月みっちり学んで、かなりウェブデザイン能力が向上したと思う（まあ向上したといってもまだまだ素人レベルですが）。同じクラスの人たちも、みんな訓練前はウェブ業界とは全然関係ない人たちがほとんどだったんだけど、訓練で身に付けた技術を生かしてウェブ業界で働きはじめている人が結構いるみたい
-----以上引用部分です

訓練の内容の薄さに少しショックを受ける、倍の６カ月もあるのに内容はと言うと・・・・・・、考えてしまうな～～。
前回の卒業生で、WEB業界で働いている人はいないと聞いている、地域性もあるかもしれませんが、大阪と地方では全然違うとの事です。

訓練校によって進め方がいろいろあるので仕方ないことかもしれない、だが、教えてほしい所がハッキリしているのであれば良い所であるだろう、講師の人のレベルは高いし時間もある、サーバーのレンタル事業も行っているのでWEBに関して幅広く相談は出来る。

後は自分で切磋琢磨（かっこええ～言葉）してスキルを高めるしかないか、とりあえず明日で終わる事は間違いの無い事である。
この際だから、勉強、開発、検証の環境を作ってしまおうと思う、セキュリティを気にしなくていい環境での構築は然程難しくはあるまい。

コラ！、勝手に開けるな

PCを置いてある部屋には猫が入ってこないようにしている、以前は自由に入れるようにしていたのだが、以前液晶ディスプレーにオシッコをかけられ使えなくなった事があったので自由に出入り出来ないようにしている。
冬は部屋にいて石油ファンヒータを使っているときは、その前で寝ている、温かくするように囲いもしているので気持ちがいいのだろう。

チョット用があったので、猫を部屋から出して戸を閉めていたが、少しして帰ってみると寝ているではないか！！。

ウツラ、ウツラ・・・・、ああ～気持ちいい～

アレ、閉めてなかったけと思っていたのだが、あるとき部屋の外へ出していたとき、ガタガタと音がするので見ると、戸をあけて入ってくる、前足で一寸隙間をあけ、両手で体を使って戸を開ける、

この間10秒ちょっとである、器用なもんである。

今は戸につっかい棒をするようにしている、チョット忘れると中に入っている、そのうちにはつっかい棒も外されるかもしれない、戸に爪が引っ掻からないようにしないといけない事になるようである。