FormOPENHomeAboutMaciPhoneEvernoteWebWordPressFoodHOME>Design>Web初心者だった私がWEBデザイナーになって1年半で勉強したこと・使用しているツールまとめ2013/11/05DesignWebWeb初心者だった私がWEBデザイナーになって1年半で勉強したこと・使用しているツールまとめプロフィールに記しておりますとおり、私は現在デザイン会社にて働いております。昨年の3月、5年ほどやっていた「DTP・グラフィックのデザイン・レイアウト業務」から「Web担当」に相なり、日々勉強しながら仕事に臨んでおると言う状況です。そのちょっと前までHTMLは妖精が書いていると思っていた私にとって、あまりに勝手の違う作業内容。最初は途方に暮れておりましたが、Twitter等で知り合うことのできた先輩Webデザイナーさん達のおかげもあり、現在では自分でWordPressのテーマを作成できるまでに成長することができました。頭を叩くと「セマンティック!」と音が鳴るまでになりました。そんなわけでここいらで一度、自分がDTP→WEB担当になるにあたって勉強したこととか使っているツールとかをデロッとまとめておきたいと思います。勉強したことまずは業務をする上で必要不可欠になった言語や、作業効率を上げるために勉強したことなどをまとめてみます。CSSまぁまずはここが理解できなければなにも始まりません。ドットインストールで基礎を学んだり、タグ辞典を買ってみたり、とほほのWWW入門など、解説サイトを巡ったりしながら勉強しました。jQueryいまやリッチなWebサイト制作には欠かせないjQuery。1からプラグインを作成できるような技術力はもっておりませんが、こちらも基本的な部分は有る程度理解できるようになりました。先述のドットインストールさんや、下記のドーナツ本で基礎とプラグインのカスタマイズ方法などを学びました。AmazonKindle楽天ブックス↑こちらの本はjQueryを勉強したいならば特にオススメです:)おかげさまで、「jQueryの初級者向け入門講座」なんて記事を書けるほどになったのは大変によい経験でした。これからもまだまだお勉強していきます。7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座WordPressこのブログのおかげでWordPressの基礎の基礎はわかっているつもりなのですが、先日初めて業務でのWordPress構築があり、少しつっこんだ勉強をして作業に臨みました。詳細なカスタマイズとなるとまだまだ圧倒的に技術不足が否めないので勉強は継続中です。「htmlすら知らなかった私が2週間でWordpressの新テーマを作成するまでにやったこと」と参考にした記事まとめ死ぬほど簡単にローカルにWordPress環境を構築できる「BitNami」の導入方法!(Mac編)作業効率UPのために覚えたことEmmet(Zen-Coding)HTML、CSSのコーディングを高速化することのできるプラグイン、「Emmet」(旧Zen-Coding)。早い段階から手を出したような気がします。これを使えると使えないのとではコーディングのスピードに天と地ほどの差が生まれると思います。早めに覚えて良かったという技術です。CompassCSSを記述するために開発されたメタ言語である「Sass」。学習コストが低いとは言い難いですが、多少扱えるようになったことでものすごくコーディングが早くなりました:)気分的にはこんな感じです。直書きには戻りたくありません。さはいえ、使いこなせていない機能がまだたくさんありますのでこれも引き続き勉強ですな。AmazonKindle楽天ブックス↑ちなみに、Sassを勉強するのであればこの本がチョーオススメです。今度レビュー書きます。使用しているツールなどここからは、Web担当となって覚えた、使い始めたアプリやツールなどをご紹介。Illustratorデザイナーには必需品、PhotoshopとIllustrator。これらに関してはWeb担当になってから覚えた、というよりは以前から使えていたのですが、WebデザインをPhotoshopでする上での環境設定についてなど、印刷物をデザインする際とは異なる注意点を学びました。AmazonKindle楽天ブックス↑こちらの本で、私が最初につまずいたIllustrator・PhotoshopでWebデザインをする上での注意点を学ぶことができます。レビュー:Webデザイナーになりたい全ての人が読むべき本「プロになるためのWebデザイン入門講座」Slicyコーディングの際、非常に面倒くさいのがPhotoshopからの画像のスライス作業。「Slicy」はその画像のスライスを超絶楽にしてくれるツールです。:)Hype簡単にHTML5アニメが作成できるオーサリングツール「Hype」。ダウンロードした時は「業務で使うことはあるめえ」とタカをくくっていたのですが、ちょっとしたアニメーションを作成するなど、意外と使いどころがあって重宝してます。脱Flash!素人でも簡単にHTML5アニメが作成できるMacアプリ「Hype」を使ってみた。Textを使用しております。素敵なUIはさることながら、数あるプラグインによる高いカスタマイズ性、作業効率を上げてくれるショートカットキー・豊富な機能などが目白押しでもはや離れることができません。2」をDLしてみた&導入したプラグインTextExpanderスニペットと呼ばれる省略形を打ち込むことで、それに対応する定型文を入力してくれるアプリ「TextExpander」。ブログの為に導入したアプリですが、業務の際に使用することで素早いコーディングを可能にしてくれます。私にとって欠かす事の出来ないアプリケーションです。:)@OZPAをフォローとまぁ現在勉強中の言語・使用中のアプリなどはこんな感じでしょうか。勉強不足の部分や使いこなせていないツールもゴロゴロとございますので、シコシコと勉強していく所存です。OZPA名前:OZPA(おつぱ)東京在住・デザイン会社勤務のブロガー。1984年1月1日生まれ。