それでもわたしはおうちにいたい

おうちが大好きな私がなるべく楽しく暮らすためのブログ

webデザイナーとしてできるようになったことと足りてないことを振り返る

f:id:alysantwanet:20170710193615j:plain

webデザイナーを2年経験して、改めて自分の能力を見つめ直した時に
「あれ、なんか色々できるようになったと思ったけど、本当に成長してる?」
って不安になったので、もっと冷静に考えてみました。

やってみたこととか苦労した点とかも含めて、少し振り返ってみます。

できるようになったこと

Sass

f:id:alysantwanet:20170710190755j:plain

とても便利でよく使います。変数を使ったり、mixinを使ったり、ファイルをパーツごとに分けて管理できるのも便利です。

webデザイナーになって2、3ヶ月くらいの時期に、cssの書き方もまだわからないことまみれの状態で導入したので、当時は思い通りにコンパイラできなくて困ったり、謎のエラーが出たり、Mac環境の人とWin環境の人の間で出力の差があったりで大変苦労した思い出があります。黒い画面を叩いたり、GUIもScoutやpreprosやKoalaを一通り試して、結果的にKoalaを使うことになりました。

Sassの勉強は下記の本を使っていました。これは本当に詳しく書いているのでおすすめです。

SassじゃなくてCSSだけど、同じシリーズのこちらの本もかなりおすすめ。むしろこっちを先に読んでからSassをやったほうが良いかも?

初期のころはclassをつけるだけですごく時間がかかってましたし、管理面も問題だらけでしたが、こちらの本を読んだことで私のコードがぐっとマシになったと思います。

Git

f:id:alysantwanet:20170710190822j:plain

今はSourceTreeを使ってBitbucketで管理しています。使えるようになるとこれほど心強いものはないですね!

Gitを利用していない頃は、会社の皆でFTPにあるデータの上書き合戦をして何時間も残業とかアホなことをしていました。(あの時は途方に暮れてイライラしたな〜もうやりたくない・・・笑)

一番初期のGitでの管理は、初心者にも優しいということでUniversionを利用していました。でも当時はめちゃくちゃバグが多くて、プッシュができなくなったりサーバーが動かなくなったりで大変でした。(今はきっとそんなことなくなっているはず・・・)それに、ブランチを切って作業する必要がでてきたので、「ちょっと学習コストはかかるけどBitbucketで管理しよう!」ということになり、SourceTreeとBitbucketの導入が始まりました。

まぁ、これもチーム皆で足並みを揃えて使って行こうとすると、やはり思った以上の時間がかかりましたね。。。全員が謎のエラーメッセージや予期せぬコンフリクトに怯えることなく、スムーズに業務ができるようになるまで3ヶ月くらいかかった気がします。飲み込みの速さの違いや、作業環境の違い、業務の内容など色々な影響がありました。

でも、時間はかかりましたが、チームの皆がちゃんと使えるようになると、控えめに言っても「最高!」と思いました。

教科書には下記の「Gitが、おもしろいほどわかる基本の使い方33」を使用しました。

gulp

f:id:alysantwanet:20170710190836j:plain

これも普段黒い画面をあまり使わない私にとっては導入するのに時間がかかってしまったんですが、設定さえ済ますことができれば作業がとてもスムーズにできるので感動しました!初期はnpmの使い方から調べて、jsの書き方もわからぬまま設定ファイルの調整に挑み、設定だけで半日以上かかっていました。

コードを保存する度にブラウザをリロードしてくれ、更にサーバーにアップしていない開発中のサイトをスマホタブレットで確認することができるbrowser-syncや、保存するたびにSassファイルをコンパイルしてくれるgulp-sass、ベンダープレフィックスを自動付与してくれるgulp-autoprefixerなどを主に使ってました。

重くないデータの作り方

f:id:alysantwanet:20170710192122j:plain

Webデザイナーになりたてのころは、バナー一つ作るだけでもデータがすごく重くなってしまうことがありました。(超高解像度の写真をスマートオブジェクトで使用したり。。。)これはレイヤー管理を見直し、画像データを適切なサイズに直すなどの工夫でどんどん改善していけました。

私は職場でPhotoshopCCを使っていたので、Psデータをリンクファイルにして読み込ませたりして、データサイズを小さくするように気をつけていました。

足りてないなと思うこと

デザインのバリエーション

良くも悪くも「私が作った感」が出てしまうので、もっと違うテイストを模索したいなーと思ってます。得手不得手はあるものですが、引き出しは大いに越したことがないですもんね。

動的な表現

お恥ずかしながらJSをあまり書けないこともあり、動くものを作ることが苦手です。

職場ではそういうのが得意な人にお願いしていたので、今後は自分でもある程度書けるようになりたいです。

個人的な作品

ほんまこれ・・・!人のサイトばっかり作るんじゃなくて個人的に何か作ってみたりとか、新しい表現を試してみることをもっとやっておけばよかった・・・!って今更思っています。

 

まとめ

できることは色々増えてるんですけど、もっと根本的な制作物のクオリティーを上げていきたいなーと思いました。SassやGitやGulpが使えても、制作物がへっぽこな場合だって十分に有り得るので、その点は気をつけなくちゃいけないなーと・・・\(^0^)/

新しい便利機能を知るとつい試してみたくなっちゃうんですが、それが今の自分の能力に見合っているのかは考えた方が良いかもですね・・・(新しい技術を使えるようになると自分がちょっとできる人になったような気がしてしまうので注意!!)

webデザイナーとしてのベースの能力って多分「SassやGit、Gulpが使えること」を真っ先にあげる人っていないんじゃないかなーと思います。それよりもまずは、違和感のないデザインや、正しい構造のコードを書けるスキルが必要だと思うんです。

今の自分に足りてないものを冷静に見つめ直して、弱いところを強化していくことがとっても大事!バランスよく成長していきたいですね。

alysantwanet.hatenablog.com

alysantwanet.hatenablog.com