WEBCRE8.jp > 考える > Web制作（コーダー）の実務で個人的に使っている技術やツールと今後使いたいもの

Web制作（コーダー）の実務で個人的に使っている技術やツールと今後使いたいもの

この記事は約11分ぐらいで読めます

2014年の振り返りとしてはちょっと遅いですが、今後の制作環境のために最近特に使っている技術と、今後使っていくつもりのある技術などをさらっと確認してみました。

Web制作のどんどん便利になっていますが、色んな細かい作業が便利になるとともにやることも増えていきます。当たり前ですよね、技術が簡単になるってことは他の人だって覚えちゃうってことですから。

その変化に追いつくために私も必死に勉強はしているわけですが、様々な事情によって実務で使うのは難しかったり本格的な導入は見送っていたりすることもありますよね。今年は便利なツールをどんどん採り入れて、実務でもできることの幅を増やしていきたいと思ってます。

というわけで、この記事では今普通にWeb制作で使っている主な技術やツール、そしてこれから使いたいものも合わせてざっくり挙げてみます。一緒に働く相手や勤める会社、行う業務の量などによってこの辺は変わってくると思いますが、私（仕事は主にコーダーです）の場合はこんなもんですよ！という感じです。

参考リンクや書籍も合わせてどうぞ。

使っているもの

HTML5セマンティック要素

IE8がHTML5の要素に対応していないため使ったり使わなかったりだったheader、sectionなどのセマンティック要素はもう普通に使っています。trusted online casino 段々ノウハウ的なものもWebにたまってきているので実務に使いづらいと考えていた人はそろそろ振り返ってみてはいかがでしょうか。

関連して、ながしまさん（@hail2u）のHTML Best Practicesはオススメです。

ちなみにIE8以下対応はほとんどやらなくなりました。具体的にはhtml5shivとかIE用の条件分岐、CSSのテクニックなどでプロパティーやセレクターも積極的に使いやすいものを選択するようになってきました。

HTML5KARUTAを作って二年以上が経ちました。実は完売したことによりひっそりWebでの販売を終了しているのですが、今後も第三版の作成など、この取り組みは続けていきたいと思っていますので応援のほどをよろしくお願いします！w 最近はカルタを採り入れた社内セミナーなどを行ったりもしていますので、興味のある方はmail@webcre8.jpにご連絡くださいー。

あ、そういえば今月行われるHTML5 Conferenceには私もhtml5jマークアップ部として登壇しますので興味のある方はどーぞ遊びにきてください★

Webフォント、アイコンフォント

Webサイトに配置されているアイコンやピクトグラム的なものはほぼ何でもアイコンフォントに置き換えてます。必要に応じてFont Awesomeなどの既存のアイコンフォントを使うときもありますが、Webサイトの雰囲気にそのどれかがマッチするとは限らないですし、当然出来合いのセットにないアイコンもあります。そういうときはPhotoshopやIllustratorでベクターデータを作成し、アイコンフォントにします。フォントファイルの生成はWebサービスならGlyphter、アプリならGlyphsを使ってます。Glyphsはまだそこまで使いこなせてませんけど…。

アイコンフォントはもちろんWebフォントにしますし、通常のWebフォントも使います。今のところ実務で日本語フォントまで使ったことはないですが、欧文フォントはいったんWebフォントを検討します。

タスクランナー

ちょっと前までGruntを使っていましたが、最近Gulpに乗り換えました。別に乗り換えたのはGruntに明確な不満があったわけでもなく両方使えた方が困らないだろうという感じだったんですが、GruntとBracketsを使っているときはたまにブラウザーへの反映がされないときがあって困っていたのが、全く発生しなくなったのでありがたい感じです。これGruntのせいでこうなってたのかわかんないですが＞＜あと実行も早い気がします。

CSSプリプロセッサー

前はこういうの使うと普通のCSS書けなくなる！なんて言ってて避けたりもしてましたがそんなことも言ってられないのでSassを勉強しました。Sassにしたのは単純に周りと情報の共有がしやすいというのと、既にデファクトスタンダードになりつつあって廃れなさそうだからです。

めっちゃ便利最初は何も気にせず使ってたんですが、吐き出したCSSが地獄のように見づらくなったりして（Beautifyとかそういう意味でなくルールセットが飛び散って見渡しづらいとか）、Sassファイルの編集に終始する一人作業の間はあまり気にならなかった問題がだんだん表層化しました。せっかくなんでそこまで意識して使いたいですね。中級者目指します。

[レビュー]Web制作者のためのSassの教科書 — 一から覚えるところからSassのトピックを網羅した本 – WEBCRE8.jp

Web制作者のためのSassの教科書これからのWebデザインの現場で必須のCSSメタ言語

posted with amazlet at 13.09.23

平澤隆森田壮
インプレスジャパン
売り上げランキング: 1,045

Amazon.co.jpで詳細を見る

コマンドラインツール

ターミナルからnpmでファイルをさくっとダウンロードしたり、ちょっとした繰り返し作業も一発で実行してくれるツールが色々あって、やっと苦手意識も減ってきました。

まだ全然使いこなせてはいないんですが、前に比べて意味が分からず門前払いを食らっていた便利なツールがちょっとづつ使えるようになってきました。

気になったのでこもりさん（@chiper）が販売しているDevelopment Environments for Web Designersというのを買ってみました。今あまりWebデザイナーではないけどw

Brackets

メインで使っているエディターです。もともとはエディターの移行を考えていてSublime Textがあまりなじまなかったときに、プラグインが入れられリアルタイムリロードが簡単にできるエディターとして触ってみました。以降ずっと使っています。Advent Calendarは全然人が集まらなかったですけどユーザー増えてくれると嬉しいなあ。

プレゼン・コード共有

仕事と言えるレベルでスライドを使って発表することが増えてきたのでreveal.jsをめっちゃ使ってます。以前はhtml5slideを使ってましたが、あまりかっこよくなかったので…w HTMLのスライドを使っているのはなるべくWeb技術で完結させたいという個人的な理由です。エディターとブラウザーだけで制作から利用まで完結するってのはやっぱいいなと。

あと、CodePenの有料会員なのでサンプルコードの共有にCodePenを使ったりします。適当に作ったものとかも公開してます。

You Sakai on CodePen

プロジェクト管理、コミュニケーションツール

チャットワークを急に使うことが増えました。どのプロジェクトも横断的に見渡せて、ページを切り替えることなく使えるのが好きです。

クラウドストレージ

Dropboxからテスト状態のプレビュー、ファイルの受け渡し、終わったものはCreative Clouds Filesに投げ込んでいくとかそんな感じです。

その他

文章を書くときはほとんどがマークダウンになりました。正直、ディレクターさんとか原稿の提出までマークダウンに統一してほしいですね…見出しの等級とかが別にテキスト形式でも伝わるわけですから一番いいはず。

WordPressを使ってWebサイトを構築することが圧倒的に多いですが、素のHTMLや他のシステムを組み込む形で制作をすることもあります（システムは自分では触らないことが多いです）。デザインソフトは完全にAdobeオンリーで、Creative Cloudsを使っていますが基本的にCCを使っていて2014はスルーしてます。がっつりデザインすることがあまりなくなってしまってそっち系の開拓はしてないというのもあります…。

あとは相変わらずWebサービスを中心に便利なものを使ってます。スライド作成ツールではまだ使ってませんがSlidesが気になってます。先日紹介したCloudConvertもめちゃ使ってます。

ファイル形式変換サービスはCloudConvertが最強ぽい – WEBCRE8.jp

これから使いたいもの

以下、個人的には使っているけどまだ実務でガッツリとは使えていないものとかです。これらを積極的に使える環境づくりに注力したいですねー★

Git

ぼちぼち使っていますが、まだ実務には導入できてない状態です。GitHubも個人的には使っていて、こっちは実務ってわけにもいかないでしょうが…有料会員になってプライベートを作るのもアリですね。プライベートならBitbucketのアカウントもあるので仕事と個人プロジェクトで分けるべきかな。

WAI-ARIA

勉強中です。去年の年末頃からWebアクセシビリティーのイベントが行われたりしていて活発ですが、もちろんWAI-ARIAもその技術の一部として今後注目されるようになるのではないかなと思っています。

実際の事例としては、武蔵野美術大学のサイトでしっかり使われていますね。あと、jQuery UIのようにフレームワークが採り入れると普及も早まるのではないでしょーか。海外のようにアクセシビリティー対応の義務化みたいな流れが強まればセマンティックなHTMLを書くことと合わせて必須スキルとなっていく可能性もありますし、勉強したいところです。