WEBデザイナーが作業効率を上げる為の【12項目】とおすすめ環境
2020/04/25
コーディングの作業効率をあげるには
私が「WEBデザイナー の作業効率を上げる方法」で思いつくことは、いくつかあります。
作業効率を上げる為の項目を挙げていきます。
- HTML、またはPHPファイルのテンプレート（ひな形）を用意して、入力箇所を減らす。
テンプレート（ひな形）のバリエーションを増やす。 - CSSフレームワーク（Bootstrap など）を利用する。
レスポンシブデザインを簡単に組み込むことが出来る。 - タイピング速度を上げる。
- パソコンのスペックを上げる。
- DreamWeaverのライブビュー機能を使う。
- エディタソフトのオートコンプリート（自動補完）、入力補助機能、バリデータ(構文チェック)を利用する。
- PHP開発環境「XAMPP」を利用する。
- FirefoxのFirebugやGoogleChromeのデベロッパーツールを利用する。
恋するエディタ「Sublime Text」を導入する。
「Sublime Text」についての記事はコチラ→- Emmet（Zen-Coding）をエディタにインストールする。
- WordPressのテーマを利用する。
- 没頭できる環境を作る。WEB開発ツールや身の回りの環境（デスク＆チェア・マウス＆キーボード）
「コーディング量を減らす」「タイピング速度を上げる」「パソコンの処理速度を上げる」「ツールと開発環境を改善する」など、集中力が途切れないために、没頭できる環境を作ることが重要です。
その他には、事前にテストサーバー＆ドメインで機能を検証し、バグのチェックを行う。チームの場合、食い違いでのやり直し、修正を防ぐなど。
作業効率をあげるための優先順位
タイピング速度
私は、WEBデザイナーがタイピング速度を必要以上に上げても、あまり効果がないと思います。
経験談を一つ上げさせてもらうと、
タイピング速度を測るサイト：イータイピングで、Sランクの上の忍者クラスの人と作業をしたことがありますが、先に仕上げたのは私でした。いくらタイピングが速くても、プランニングがうまくできないと、やり直しで作業が増えてしまします。
パソコンスペック
パソコンのスペックは、エディタがフリーズしない程度。とはいえ、使うソフトだけを起動するのは大変ですし、起動と終了にはパソコンに負荷がかかるので、頻繁に使用するソフトをすべて起動した状態で動作するスペックは必要ですね。（保存忘れでフリーズし、絶望を味わう）
エディタソフトの入力補助
WEB開発環境の改善は、かなり優先順位が高いです。
事前検証やデバックのために、Firebug、またはデベロッパーツールは必須。エディタの構文チェックやオートコンプリートもミスを減らす重要な機能です（Sublime Textがオススメ）。
XAMPP（PHP開発環境）
「XAMPP」は、自分のパソコンを仮想サーバーに出来ます。テスト用のレンタルサーバーとドメインを用意した方が早い気がしますが、メリットはアップロードする必要がないので、即反映される点。
Emmet（Zen-Coding）
Emmet（Zen-Coding）のいいところは、「高速でHTMLタグを記述」「様々なツールに対応している」ということです。DreamWeaver・Subilme Text・ATOMなどのエディタソフトがインストール可能です。
実は、WordPressでもEmmetが使えるプラグインがあります。「Emmet」と伝家の宝刀「コピー＆ペースト」を状況に応じて使い分けるのがいいと思います。
デバックツール
デバックツールの「FirefoxのFirebug」「GoogleChromeのデベロッパーツール」は、両方とも機能・インターフェースは同じで、Firebugは、日本語です。エラー表記の仕方が若干違うので、片方で理解できなかったら、もう一方で検証してみるのもアリです。
WordPress
WordPressは、テーマとプラグインで拡張するとWEB開発ツールに変わります。
「CMS（ワードプレスなど）を使うより、自分でコーディングした方が自由にデザイン出来るから」と思う人もいるでしょう。
ですが、ワードプレスの構造を理解して、自由にカスタマイズできるようになると、驚異的なスピードでWEBデザインが可能です。
理由としては、
- 導入したい機能をプラグインのワンクリックで設置。（コンタクトフォーム など）
- 外観の変更もフロントエンド（管理画面上）で完了。
- SEO対策に強い。
WordPressのSEO効果とメリットについて → - テンプレートファイルの編集で、より柔軟なカスタマイズが可能。
テンプレートファイルの階層について → - 搭載されているテンプレートタグ、インクルードタグ、条件分岐タグで様々な呼び出し。
ワードプレスを使用することで、作業効率を上げる為の項目、１と２をすでに満たしています。インストール時に自動生成されるので、テンプレート（ひな形）は必要ありません。
CSSフレームワークについても、今はレスポンシブデザインじゃないテーマの方が少ないくらいです。
ハイクオリティな有料テーマを使うと、外観デザインは無料テーマとは比べものにならないくらい細やかな設定が出来て、スタイルシートの編集は格段に少なくなります。
世界で売れているハイクオリティーな有料テーマについて →
オススメするWEB開発ツールの組み合わせ
- CMS:WordPress
- テキストエディタ：Sublime Text
- エディタの拡張：Emmet(Zen-Coding)
- デバックツール：Firebug/デベロッパーツール
- 自分：それなりのタイピング速度
- パソコン：頻繁に使用するソフトを立ち上げた状態でサクサク動作。
- 身の回り：いい感じのデスク＆チェア
WordPressを使って WEBページ を構築し、Sublime Text で テンプレートファイル を編集します。
WordPress と Sublime Text にそれぞれ Emmet をインストールして、 Firebug を使ってデバック作業を行います。
ワードプレス内のエディタ と テンプレートファイル編集 の使い分けについて →
作業効率 を上げれば、プランニング や 打ち合わせ、 SEO対策 に時間を多く使えるようになります。