私はフリーの案件でも主にLPデザイン案件を中心にしてるのである程度のデザインとコーディングスピードを求められる事が多いです。
私はデザインと静的コーディングの案件は時給計算すると時給2000〜3500円にはなっています。
案件の単価によっては時給4000〜5000円の時もあります。
これはサイト制作丸ごとの案件なのでデザインも込みです。
これからますますコーディング単体の仕事は生産性や価値が求められなくなっていくのでデザイナーとしてはコーディングは時短化して制作するデザインの方に価値を出したい所です。
コーディングなしでwebサイト作れるサービスWix、studioとかあるともう普通のHTML/CSSコーディングでは単価をあげる事はできないと思っています。
WordPressも無料のテンプレートがあるせいで単価安いと思ってるクライアント多いですし。
（WordPress案件に関しては私は積極的には個人では受注していません。予算が少ない所が多いので）
Photoshopは使わず、Adobe XDでデザインを作りコーディングする
今はPCとスマホのUIデザインをプロトタイプ（デザインカンプ）で作成する時代に移り変わっているのでAdobe XD、Illustratorのベクターソフトの方がデザイン制作はしやすいです。
最近、私はAdobe XDで企業サイトデザイン、LPデザインを作成する事が増えました。
XDが今ほど機能が整っていない時はIllustratorで主にwebデザインをしていました。
Illustratorはシンボル化、カラースウォッチの機能はCSSと考え方が似てるのでPhotoshopよりはコーディングしやすかったです。
AdobeXDだとCSSを抜き出せるプラグインやデザインスペックの機能があるので
断然コーディングは他のAdobeソフトよりもAdobe XDの方がしやすいです。
動作の軽さも魅力です。
デザインを微調整しながらコーディング作業も同時にやるという事も可能です。
CCライブラリでIllustratorで作ったアイコン、イラスト素材を保存するとXDでも使いやすいし、素材をなくしてしまう心配もないです。
デザイン素材の一元管理はXDかIllustratorの方がしやすいです。
どうしてもPSD納品が必須な時は下記のようにPhotopeaというサイトでXDデータをPSDに変換するようにしてます。
MacアプリAlfredを使う
Alt+スペースのショートカットでパソコン内のファイル検索や調べ物でよく見るサイトのURLを記録できるランチャーアプリと呼ばれるものです。
コーディングって大半が調べ物しながら作業すると思うので調べる作業の時短になります。
過去にAlfredについて記事を書いています。
Emmetのエクステンションを追加しておく
私は主にHTMLでだけEmmetを使っていますがマークアップが速くなるのでおすすめです。
brackets-emmet
https://github.com/emmetio/brackets-emmet
仕事でよく使うコードはスペニットで記録しておく
Brackets Snippetsというエクステンションでスペニットが使えるようになります。
よく使うコードを記録してコピペできたり、トリガーのショートカットで記録したコードをHTMLでもCSSでも呼び出せるので便利です。
Brackets Snippets
https://github.com/chuyik/brackets-snippets
CSSはSassでコーディングできるようにBracketsにエクステンションを追加する
CSSはSass使う方がメンテが楽になるし、コードの使い回しもしやすくなります。
私は主にBootstrapでサイト構築する事が多いのでよくSassは使います。
Sassを使えるとフレームワークを使用してデザインに応じて必要なコンポーネント（UIの部品）を呼び出すような使い方もできるのでコードを書く量やCSSの容量も減ります。
デザイナーの人はGUIツールやエディタの拡張機能を使ったSassコーディング方法の方が簡単で導入も楽だと思います。
Brackets-sass
https://github.com/jasonsanjose/brackets-sass
複数環境のパソコンでBracketsの拡張機能、スペニットの機能が使えるようにする方法
Dropboxでシンボリックリンクを作成してファイルをPC間で共有させると同期されるようになります。
シンボリックリンクは会社のPCのエディタ環境を自宅のエディタと同期したい場合にすごく便利です。
私はコマンド入力はできないのでMacのアプリSymbolicLinkerを使ってBracketsのシンボリックリンクを作成しました。
以下は参考記事です。
Bracketsエディタの設定を複数PC環境で同期させる方法
BootstrapなどのCSSフレームワークを使う
ペライチサイトや企業サイトまで幅広いweb制作案件で私は主にBootstrapを使用しています。
なぜならレスポンシブサイトがHTMLタグを囲うだけで作成できますし。
コンポーネントのパーツも多いです。
Sass使えるようになったらBootstrapや他のCSSフレームワークを使うとコーディング時短になると思います。
CSSフレームワークを使うと公式サイトに対応ブラウザが書いてあるので自分でブラウザ間の崩れを確認する手間が省けます。
自分が書いたオリジナルCSSコードの表示チェックだけで終わります。
最近はシンプルにCSS軽くしたい事もあってPure.cssも使うようになりました。
こちらはパーツは少ないですがテーブルやフォームのCSSもあるのでお問い合わせフォーム付きのLPや企業サイトも作れるとは思います。
足りないUIパーツは自分でCSS追加してサイト制作しています。
古いIEブラウザにも対応してる数少ないCSSフレームワークなので低予算でIEブラウザに対応したレスポンシブサイト作る時に便利です。
確認したところIE11,IE10では崩れてはいませんでした。
私は自分自身でCSSフレームワークは作らないけど、BootstrapとPure.cssにSCSS追加してデザインカスタマイズしてコーディングしています。
投稿者プロフィール
最新の投稿
＼noteで記事販売中／
ランサーズで受注したいフリーランス・副業の方向けの記事を書きました
【宣伝】ランサーズでLP制作パッケージ販売中
※当サイト経由と違って別途手数料が発生します。手数料の関係で当サイトとは制作金額や提供サービスに違いがあることもあります。ご興味があればお気軽にご相談ください。
