2012年11月3日土曜日

WEBデザインの練習をしてみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
とりあえず目標的なものとして
①使えるウェブデザインとコーディングを身に着ける。
②1つのWEBサイトを作って更新、管理する。

①については
個人で独学でやっている状態では自身を持って自分のスキルを説明しにくい
また実際に要求されるサイト作りに必要なノウハウを知ることができない。
ということから、やはり自分が作りたいものを作るだけでなく
他人が作りたいものを作れるようにもなっていきたいというのが動機です。

②については
逆に自分でサイトを管理する際に必要なものを覚えたいというのが動機です。
いくつか趣味で作りましたが正直、無管理ほったらかしと言う状態で
ユーザーの分析やサイトのレイアウトの分析といった作る以外の部分は
まったくといってやっていないからです。

さっそく①の使えるウェブデザインとマークアップ、コーディングを身に着けることを目標に
一番参考になると思われるプロが作った実際のサイトのデザインコードをみつつ
真似て作ってみました。

アップロード先URL






















元の公式サイト(http://www.kobayashi.co.jp/
勝手に同じようなデザインのものを作ってますが、実際に運営するわけでないので大丈夫でしょう
タイトル属性も入れてないの検索効果もないでしょう)

どうでしょう、ざっと見た感じでは似たように作れたんではないでしょうか

今回、作業を一度通し、今の自分でどこまでできるかチェックする感じでやっていきました。
手順は
①デザインカンプ作成
 画像加工ソフトですべて位置から書き直し
 できた画像をスライスして素材に

②マークアップ
 HTMLでのマークアップ、各種配置
 CSSでのレイアウト

③Javascriptコーディング
 文字サイズ変更、トップに戻る、メインビジュアルスライド
 ほぼコピペでコードを追いながら理解する感じで

デザインカンプ作成で7時間程度、その他で7時間程度でしょうか
この辺ももっと早く、正確にこなしていく必要があります。

デザインについてフリーソフトのGIMPでやっていますが
作る分にはとくに問題なさそうですね
出来栄えはというと、自分なりにはある程度確認できたと満足している部分がありますが
実際はもっと丁寧に仕上げる必要がありそうですね
この辺のチェックは自分では甘くなってしまうのが独学の悪いところです
でも繰り返し練習していけば同じように作れるようになると信じていますが。

マークアップについては
クロスブラウザ対応や特にCSSの理解が不十分だと感じました
この辺も繰り返し練習か

Javascirptコーディングについては
Jquery一本でいいと思いますが自分で組むにはまだまだ速い。
よく使う機能を見て言ってそこから必要なコードの理解をしていこう

ていうことでどんどんサイトを真似て実際に使う技術を吸収しつつ
フリーランスのWEBサービスの依頼なんかをつついてみたいなと考えています。

あと、3ヶ月ぶりの更新ですが
応用情報技術者の試験の勉強でサイト作りを中断していました。
10月末に実際受けましたが、難しいですねえ・・・。
午前は覚えてマークシートなので楽な方ですが
午後は記述がたくさんあるので実際の業務についていないと
なかなかそれっぽい答えにたどり着けないですね
5問は全て埋めたのですが、残り1問のうちいくつか空欄で残しちゃって
たぶん来年またうけることになるでしょう

資格はそれ自体で役に立たないことのほうが多いですが
勉強やスキルアップの動機には十分なので
またいくつか選んで並行してやっていこうかな

0 件のコメント:

コメントを投稿