• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2013/11/05

Web初心者だった私がWEBデザイナーになって1年半で勉強したこと・使用しているツールまとめ

Webの勉強
プロフィールに記しておりますとおり、私は現在デザイン会社にて働いております。
昨年の3月、5年ほどやっていた「DTP・グラフィックのデザイン・レイアウト業務」から「Web担当」に相なり、日々勉強しながら仕事に臨んでおると言う状況です。

そのちょっと前までHTMLは妖精が書いていると思っていた私にとって、あまりに勝手の違う作業内容。最初は途方に暮れておりましたが、Twitter等で知り合うことのできた先輩Webデザイナーさん達のおかげもあり、現在では自分でWordPressのテーマを作成できるまでに成長することができました。頭を叩くと「セマンティック!」と音が鳴るまでになりました。

そんなわけでここいらで一度、自分がDTP→WEB担当になるにあたって勉強したこととか使っているツールとかをデロッとまとめておきたいと思います。


勉強したこと

まずは業務をする上で必要不可欠になった言語や、作業効率を上げるために勉強したことなどをまとめてみます。

言語など

HTML & CSS

HTML、CSS
まぁまずはここが理解できなければなにも始まりません。ドットインストールで基礎を学んだり、タグ辞典を買ってみたり、とほほのWWW入門など、解説サイトを巡ったりしながら勉強しました。

jQuery

jQuery
いまやリッチなWebサイト制作には欠かせないjQuery。まだ1からプラグインを作成できるような技術力はもっておりませんが、こちらも基本的な部分は有る程度理解できるようになりました。
先述のドットインストールさんや、下記のドーナツ本で基礎とプラグインのカスタマイズ方法などを学びました。

参考:あらゆるプログラミング言語学習のきっかけに!神サービス「ドットインストール」で貴方も勉強しようず!!

↑こちらの本はjQueryを勉強したいならば特にオススメです:)

おかげさまで、「jQueryの初級者向け入門講座」なんて記事を書けるほどになったのは大変によい経験でした。これからもまだまだお勉強していきます。

WordPress

WordPress
このブログのおかげでWordPressの基礎の基礎はわかっているつもりなのですが、先日初めて業務でのWordPress構築があり、少しつっこんだ勉強をして作業に臨みました。
ただ、詳細なカスタマイズとなるとまだまだ圧倒的に技術不足が否めないので勉強は継続中です。

作業効率UPのために覚えたこと

Emmet(Zen-Coding)

Emmet
HTML、CSSのコーディングを高速化することのできるプラグイン、「Emmet」(旧Zen-Coding)。割と早い段階から手を出したような気がします。
これを使えると使えないのとではコーディングのスピードに天と地ほどの差が生まれると思います。早めに覚えて良かったという技術です。

Sass & Compass

SASS、COMPASS
CSSを記述するために開発されたメタ言語である「Sass」。学習コストが低いとは言い難いですが、多少扱えるようになったことでものすごくコーディングが早くなりました:)
気分的には

にったじゅん

こんな感じです。ごめん言い過ぎた。でも直書きには戻りたくありません。
さはいえ、使いこなせていない機能がまだたくさんありますのでこれも引き続き勉強ですな。

↑ちなみに、Sassを勉強するのであればこの本がチョーオススメです。今度レビュー書きます。


使用しているツールなど

ここからは、Web担当となって覚えた、使い始めたアプリやツールなどをご紹介。

デザインツール

Photoshop & Illustrator

Photoshop Illustrator
デザイナーには必需品、PhotoshopとIllustrator。
これらに関してはWeb担当になってから覚えた、というよりは以前から使えていたのですが、WebデザインをPhotoshopでする上での環境設定についてなど、印刷物をデザインする際とは異なる注意点を学びました。

↑こちらの本で、私が最初につまずいたIllustrator・PhotoshopでWebデザインをする上での注意点を学ぶことができます。オススメです。

Slicy

Slicy
コーディングの際、非常に面倒くさいのがPhotoshopからの画像のスライス作業。
「Slicy」はその画像のスライスを超絶楽にしてくれるツールです。

価格: ¥3,000 (記事公開時)
カテゴリ: グラフィック&デザイン

Hype

Hype
簡単にHTML5アニメが作成できるオーサリングツール「Hype」。ダウンロードした時は「業務で使うことはあるめえ」とタカをくくっていたのですが、ちょっとしたアニメーションを作成するなど、意外と使いどころがあって重宝してます。

価格: ¥3,000 (記事公開時)
カテゴリ: グラフィック&デザイン

コーディング

Sublime Text

Sublime text
DreamWeaver→Codaを経て、エディタは長らくSublime Textを使用しております。
素敵なUIはさることながら、数あるプラグインによる高いカスタマイズ性、作業効率を上げてくれるショートカットキー・豊富な機能などが目白押しでもはや離れることができません。

TextExpander

TextExpander
スニペットと呼ばれる省略形を打ち込むことで、それに対応する定型文を入力してくれるアプリ「TextExpander」。ブログの為に導入したアプリですが、業務の際に使用することで素早いコーディングを可能にしてくれます。もはや私にとって欠かす事の出来ないアプリケーションです。

価格: ¥3,500 (記事公開時)
カテゴリ: 仕事効率化

とまぁ現在勉強中の言語・使用中のアプリなどはこんな感じでしょうか。まだまだ勉強不足の部分や使いこなせていないツールもゴロゴロとございますので、シコシコと勉強していく所存です。おわり。

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×