課題作成(デザイン)11日目(訓練53日目) [通学日記]

今日でデザイン課題実習はおしまいです。

1時間目でデザインチェックが入り、
相変わらず、文字が大きいといわれました。
他は白ベースのページだったので、隙間を埋めるようにと言われました。
あとはロゴが少し大きいので小さめにすることという位です。

その後修正です。
ちなみにロゴはこちら(木目調のテクスチャを作成する)の方法で
木目調にしました。
早々にある程度終わらせ、
以前作っていた学校のサイトに手を加えることにしました。
メニューが今は角丸の四角だけだったのを
アイコン化しました。

午後はその作業と平行して面談。
実習先の希望と今後の予定の話。
5/16から実習という予定は変更になり、
5月中はHTMLコーディングをしながら面談をして、
それぞれに実習が始まるみたいです。

今日の面談で目指す方向が分かってきました。
やっぱりWebデザイナーを経てWebディレクターを目指すことにしました。
なんて言いながらショップで実習してたりして。
年齢的にTryできるのはラストチャンスかなと思いました。
Webで面白いことがしたいです。
仕事だから面白くないことも多いと思いますが、
でも面白いポジションだと思います。

SEだと管理職とかマネージャーって目指すにはちょっと違うかなと思っていたのですが
ちょっと立場が違うだけで、わくわくするものなんですね。
まぁ、現実見ればそうも言っていられないのでしょうけど、
夢は持っていたいですね!!


来週は、ポートフォリオ(作品集)の作成です。
実質2日なので、うまくまとめたいところです。


ではまた来週!!

クリアフィックスのバグ [学習情報]

以前にfloatのテキスト回り込みの解除をするのに
クリアフィックスという技を紹介しましたが
(教えてくれたのは先生です)、
after擬似クラスを使ったクリアフィックスには重要なバグが
潜んでいたことが分かりました。

それはIE7より前のIEのバグなんですが、
after擬似クラスが実装されていないので
afterは使えないというものです。

これについては、従来どおり、brや空divでclearするという手もありますが、
他にも回避方法がありました。

その要素にzoomプロパティを設定するという方法です。

.floatbox{
zoom:100%; /*old IE対策*/
}

.floatbox:after{
clear:both;
content:" ";
display:block;
font-size:0;
height:0;
overflow:hidden;
}


zoomプロパティはCSSハックの要領で
IEだけ適用するように記述するとさらに良いですね。
ここでは割愛するので、気になる人は調べてください。


で、古いブラウザに対応する必要があるのかというと、
自動ダウンロードして移行を促すFirefoxと、
黙って勝手にアップデートするChromeは必要ないのですが
IEは、結構古いブラウザでアクセスしてくる人が
アクセス解析をしていても目立ちます。
特にIE6。
好みの問題でアップデートしていない人や
古いOS(僕も持ってます)で使用していてアップデートできない人、
企業内でアップデートを禁止されているところなんかも結構あって
(社内のWebシステムが新しいブラウザに対応していないんですね)、
意外と侮れません。

課題作成(デザイン)10日目(訓練52日目) [通学日記]

今日も花屋さんのサイト作り。
今日で無事仕上がりました。

リボンはこちらのやり方でお世話になりました。
Tutorial_リボンの描き方
打ち込んだパラメータはまだ謎ですが、
後々理解できるようにがんばります。

昨日休んだので、無事出来上がるかどうか心配でしたが
あっさりと出来上がりました。
これなら昨日休まなければA案、B案2つできたな~と軽く後悔。
結局A案のみでチェックに臨みます。
B案はヘッダーの原石みたいなのはできましたが、
これは・・お蔵入りだろうなぁ。

あとは、今日実習先の一覧が発表になりました。
僕はショップ系に進むかシステム系へ進むか悩んでいます。
本当は純粋にWebデザインをやらせてくれるところが良いのだけれど、
それは無く、Webデザインをやっているところは
DTPかシステムを兼ねていて、
かつ自分のよさを活かせるのはWindowsなので、
行ける所が限られます(行きたい候補の中にはMac使いの会社もあります)。

就職活動みたいに面談をして、それから決めるということはなく
(前の転職のときは4社中3社から内定を頂いたので
 面談の内容から選ぶことができました。)、
はじめに希望順を決めて、それに沿って面談をしていくみたい。
詳しくは明日説明があるのですが、
どうなることでしょう。

まずはショップにするのかシステム系にするのか
そこを決めなければいけません。
難しい。両方やってみたい。

ショップは夢。
システム系は、業務フローが分かりそう。
今後3ヶ月で何を学ぶか。その後どうなりたいかをじっくりと考えなければ。
悩みます。

GWはこれでつぶれそうです。

なやむ~。

また明日!

課題作成(デザイン)9日目(訓練51日目) [通学日記]

この日はそのままダウン。
体調不良で初めて全日休みました。
知恵熱ですなぁ。

課題作成(デザイン)8日目(訓練50日目) [通学日記]

この日は、新課題開始の日でした。

新しい課題は花屋さん。
想定店舗は
・フラワーアレンジメントをやっている
・プリザーブドフラワーをやっている
で、注文としては
・ノングリッドタイプの自由な感じで作成して欲しい。
・柔らかく暖かいイメージで作成して欲しい。
というものです。
このほかにキーカラーも指定があります。

が、『ノングリッドタイプ』で全てが崩れ去ります。
え~!どうやってやるの???
週末中、インターネットを見られる時間はずーっと調べていました。
が、良い案は出ず。
ほとんど無策のまま、ラフ案作りに挑んだのでした。

妙案がひとつだけ思いつきました。
縦横にリボンを配して、ノングリッドな感じにしました。
まだ頭が固いなぁ。

結局、僕一人、ラフ案作成に用意された時間をオーバーし、
チェックを受けました。
指摘事項としては、オレンジがちょっと多いなぁというくらいでした。
ちょっと拍子抜けでした。

その後、デザインに入りました。


この日は居残りまでやりましたが、
帰ってからダウン。
そのまま寝てしまいました。




アンテナショップ ストロベリーフィールズ
ストア ストロベリーフィールズ
爪水虫 妊婦
夏フェス テント 寝袋



ベンツのパーツデザイン

今日は珍しく休日の更新(って初めてかもしれない)。

デザインといってもグラフィックデザインではなく
工業デザインや設計のお話。

今日用事で、町を歩いていてベンツのコンパクトカーを見かけました。

見て「!」となりました。

ワイパーの仕様が違ったのです。
普通のワイパーは→→に動きますが、
ベンツのワイパーは→←に動くのです。
言っていること分かりますか?
分かりにくいですね。
参考資料:http://www.mercedes-benz.co.jp/brand/safety/drive.html

この動きにすることでフロントウィンドウの真ん中が2重に払拭できるし、
全面的に払拭できるので視認性も良くなります。

でも。
・左右別の動きをするので、パーツ数が多くなり、コストアップにつながる。
・ワイパーが同じ領域にかぶさるような動きをするため
 少しずれるとぶつかる可能性がでて故障につながりやすい
といったデメリットがあります。
守りに入った責任者なら、このデザインは却下すると思います。

それをあえてGOサインを出した責任者は天晴れですね。
参考資料のページを見ても、ベンツは雨天走行にもこだわりを持っているようですね。
少し調べてみましたが、ワイパーに細かく改良を加えているメーカーは多いですが
大胆に改良を加えているのは主要メーカーではベンツだけみたいです。

すごい発見をしたと思いました。(個人的に)


今はWebデザインを始めていますが、
1年前まではソフトウェアデザインをしていました。
全てのデザインには理由があります。
本来そうあるべきです。
今やっている課題作成は、テクニックもないし経験も無いので
持っているわずかなテクニックで構成することに終始していて
イメージどおりにはできないし、
「何とか形にしました、現状のセンスはこんな感じです」みたいになっていますが、
早く、ターゲットに合わせたデザインが柔軟にできるようになりたいです。

僕の場合、組み合わせのセンスはあるようで、
それはソフトウェアにも発揮されていました。
Webデザインに関しても、早く引き出しを増やして
組み合わせの数を増やしていきたいと思います。


ちなみに僕は自動車関係の会社には3年弱在籍していましたが
(実際には半分は休職していたので、実質1年半在籍です)、
車にはほとんど興味がありません。
(その会社に入った理由は、名古屋に戻ってくることと
 会社に強みがあったこと、システム的にすごい強みがあったことで入りました)。
それでも「!」って思わせるベンツって、すごいと思いました。

課題作成(デザイン)7日目(訓練49日目) [通学日記]

今日まで高級車販売サイトの作成です。

今日は最初の2時間でバナーを作りました。

3時間目にデザインチェックが入りました。
指摘事項としては、
・全体的に文字やパーツが大きすぎる
・パーツ自体は良い
・高級店なので効果的に明朝を使うこと
・ロゴに高級感が無い

大きすぎる点は、ショップをやっているせいです。
訴求しようとするとどうしても大きめ大きめになってしまうのです。

明朝を使うように言われたのは、B案のキャッチコピーでした。
ここはA案で明朝を使っていたので、
あえてメイリオを使ったのですが、
あっさり却下でした。

ロゴは・・・今後の課題ですね。
高級感というより、ロゴそのものができないので
そこからですね。


午後は修正をしました。
午後の最後の時間に再度チェックが入るので
A案B案ともに修正を試みたのですが、
結局間に合わなかったため、
ロゴは手を入れず、文字とパーツのみ手を入れたA案のみチェックしてもらいました。
隙間のことを指摘されましたが、これを修正して
フィニッシュにしましょうとのことでした。
それを受けて、レイアウトの修正とバナーの変更(拡大)をしました。

居残り時間でB案の方もロゴをのぞいて出来上がりました。

月曜日からは、デザインの最終課題の花屋のページの作成です。
今日事前説明がありました。

ノングリッドレイアウトでとの注文があるのが難点です。
絵は書けないので、大きな写真をうまく使って
何とかしないといけないようです。
あくまでもFlashではなく、HTMLで表現できる範囲でとのことなので
できることできないことを調べないといけません。

う~ん、難しい。

がんばります!


では、また来週!

課題作成(デザイン)6日目(訓練48日目) [通学日記]

今日も高級車専門店のサイトデザインでした。

午前中の早い時間で、A案のリサイズは終わりました。
メインビジュアルは横にずらし、
グローバルメニューのボタンは両端を広げることで、
最小限の変更にとどめました。
ついでにグローバルメニューの余白に金属のテクスチャを貼り
モノトーン風にしました。

その後、B案のワイヤーフレームから、デザインまで行いました。
だいぶかかるかなとも思いましたが、
レイアウトやカラーリングが変わるだけなので、
思いのほかはかどり、大方作業が終わりました。

残りはバナー作成と、できたらロゴをもうひとつ良いのが作りたいです。
一応締め切り(デザインチェックの時間)は明日の3時間目なので、
バナーだけは仕上げるつもりです。



最近、苦手分野が浮き彫りになってきました。
アイコンやロゴ作成です。
これが苦手です。
写真を使ったサイトレイアウトはささっとできるのですが、
イラストになるとパタッと手が止まってしまいます。
この克服もしたいのですが、なかなか課題だけで手一杯で
練習にまでは手が回らないです。
どこかで時間をとらないとですが、
デザインの自習もあるので、なかなか難しいですね。
学校の設備が使える間になんとかしたいものです。


明日はデザインチェックと修正です。

では、また明日!

課題作成(デザイン)5日目(訓練47日目) [通学日記]

今日は高級車専門店のサイトデザインでした。

昨日懸案になっていた画像の型抜きはPhotoshopのレイヤーマスクで
なんとかできました。

その後通院で中抜けしました。

その後バナーを作り、その他も作りこみました。
とりあえず、後はロゴを作るところまでできたのですが
残り時間になって先生から、
「横は1024px以内ではなく、1024pxで作ってください」といわれてしまいました。
何故だ??
1024だと横スクロールが出てしまうのに。
でも、要求は要求なので受け入れることに。
明日、メインビジュアルと、グローバルメニューのデザインのやり直しです。

あとは、太い斜線の背景に挑戦しました。
テクスチャを作ってしまえば、結構簡単でした。
ただ、フォトショップで作ったものはイラストレータに取り込めず、
作り直しをしました。
これは僕のやり方が悪かったのかも。
今後の課題です。

明日は、メインビジュアルとグローバルメニューの再デザイン(リサイズ:大きくする)、
ロゴデザインをして、B案の作成をしようと思います。
なんとかあさってまでに、B案まで作成したいです。
でもちょっと無理かな。
がんばります!

では、また明日!



アンテナショップ ストロベリーフィールズ
ストア ストロベリーフィールズ
爪水虫 妊婦
夏フェス テント 寝袋



課題作成(デザイン)4日目(訓練46日目) [通学日記]

今日でカフェリニューアルの課題は終わりです。

午前中に再度チェックが入り、その修正をしました。
・キャッチコピーの文字送りを全体的に狭くして、狭くなりすぎたところだけ調整する
・下層ページにもキャッチコピーを入れてみる
・メニューはノートのような下線の入るテクスチャにしてみると良い
(これはできませんでした)


午前の最後の時間に、次の課題、高級自動車店の説明があり、
そちらの課題に移りました。
以前の先生の話では、ひとつの課題が終わるまでは次に進まないという話だったのですが、
その先生は、今月中はお休みになったので、
先生が変わり、方針も変わり、
みんな次の課題に移ることになりました。
課題が仕上がらないと、ポートフォリオもできないのですが
その問題はどうなるのかという問題もありますが、とりあえずそうなりました。

午後からはラフ案作成とラフスケッチ。
カフェリニューアルの時は、いきなり言われて泣きそうでしたが、
今回は2回目で、事前にテーマを知っていたこともあり
すんなり書けました。
できたらA案B案と時間があれば作ってくださいとのことだったので
2つ作りました。
最後の時間にはラフチェックが入り、
思ったほど、指摘が無くて怖いくらいでした。
指摘事項:
・A案、B案ともモノトーンになりすぎ。
 写真で明るくなればよいが、暖色系の色をポイントとして入れると良い

居残り時間でメインビジュアルを完成させ(2つの写真をブレンドしました)ました。
カフェリニューアルの時は不安だったので、
細かいスケジュールを作って進捗を確認していたのですが、
今回もやりますかねぇ。
できたら期間内に2案とも仕上げたいのですが、
明日は病院で中抜けしなくてはならないので、
結構つらいものがあります。
(2日で仕上げる必要があります)。
できるだけささっと終わらせて、
苦手なロゴデザインに時間を使いたいと思います。

今日は帰りがけ、写真の型抜きができなくて困ってしまいました。
帰ってきてから調べて、たぶんPhotoshopの方で、
レイヤーマスクを使ってやればよいみたいです。
明日またTryしてみます。

あと今日も本を買いました。
ちょうど良い、Web用のPhotoshopとIllustratorの使い方の本なので
重宝しそうです。

あとポートフォリオ(作品集)用に100均でA3のクリアファイルをみつけました。
企業に提出するのに100均?との思いもありますが、
企業によっては返してくれないところもあるようで、
外見(クリアファイル)については、そんなに重要視されないみたいです。
それよりも中身(作品)重視なんだそうです(Web調査による)。


今日のメモ:
・Photoshopのレイヤーマスクは使える
 グラデーションツールは1回では、すごく弱い。
 何回も繰り返してグラデーションをかけるとちょうど良くなる


では、また明日!

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。