僕は元々グラフィクのデザインしか出来なかったのですが、独学でweb制作を学び今ではwebの仕事の割合が多くなりました。
印刷物のデザインはwebに比べて単価が安いので、web制作のスキルを身に付けておいて本当に良かったなと感じています。
web制作の勉強を始める時は、ほぼ100%の人がhtmlとcssをまず最初に勉強しますが、htmlとcssの習得は基礎中の基礎なのでその後何のwebスキルを身に付けるかがとても大事です。
そこで実際に未経験から独学でweb制作を勉強して、仕事としてコンスタントに依頼を受けられるまでに習得したweb制作スキルをご紹介したいと思います。
まずはここから！web制作の基礎を学ぶHTML・CSS・メディアクエリ
web制作における必須スキル、それはhtml・css・メディアクエリを使用したレスポンシブ対応の静的なサイトが制作できるようになる事です。
とりあえずこの知識がないと話になりませんのでまず勉強して下さい。
ちなみに初期の頃に僕がやった勉強方法をまとめているので参考にどうぞ。
制作スピードアップ！グリッドシステムの理解+レスポンシブデザインの効率化にBootstrap
続いて習得したいのがBootstrapの知識です。
BootstrapとはTwitter社で開発されたCSSフレームワークの一つです。
あらかじめよく利用するWebパーツや各レイアウトのデザインが用意されているので、それらを組み合わせる事でスピーディーに効率よくサイト制作を行う事が可能です。
例えばCSSでボタンのデザインを装飾する方法を知らなくても、Bootstrapを使えば簡単にボタンが作れたりとか。
グラフィックデザインで言うテンプレートみたいなものですね。
デザインのスキルがなくても既にデザインされている名刺のテンプレートに沿って名前などを打ち替えるだけで、誰でも簡単に名刺デザインが出来ちゃうみたいなイメージです。
そのような使い方も便利ですがBootstrapを使用する一番の理由は、Bootstrapのグリッドシステムを理解することでレスポンシブデザイン対応サイトがめちゃめちゃ楽に作れるという事です。
とても理解しやすい動画がありますので詳しくはこちらをご覧ください。
このようにBootstrapを使用すればレスポンシブデザイン対応サイトがとても効率よく制作できるんですよね！
ちなみに僕はグリッドシステムだけ取り入れて、その他の装飾などは自分でCSSを書いています。
その理由は装飾部分も全てBootstrapを使うとデザインのオリジナリティーが無くなるからです。
Bootstrapを使っていないwebデザイナーさんは是非取り入れてみて下さい。
一番依頼の多いweb制作スキル！ブログ投稿機能実装など動的でリッチなサイト制作にWordPress
HTMLとCSSを理解し、Bootstrapのグリッドシステムを理解してレスポンシブ対応サイト制作の効率化が習得できれば次はWordPressです。
WordPressを理解すればブログ投稿機能・ECサイト機能・お問合せフォームなど、通常プログラミングの知識が無いと実装が難しい機能をプラグインなどで簡単に実装する事が可能になります。
※WordPressで使う多少のPHPの知識は必要ですが、ググればデザイナーでも理解できる程度。
実際にWordPressを使ったサイト制作やテンプレートカスタムの依頼案件はとても多いので、現在のweb制作には必須のスキルと言えるでしょう。
WordPressオリジナルテーマの作成方法はこちらの参考書がオススメです。
デザイン性を高めるweb制作スキル！スクロール時にエフェクトで動きを取り入れるjQueryやCSS
サイトに動きのあるエフェクトを取り入れれば一気にデザイン性を高める事が出来ます。
サイトに動きを追加する場合JavaScriptを利用しますが、JavaScriptの知識がなくてもjQueryやCSSを使えばコピペである程度対応できます。
例えば、このようなエフェクトがあります。
FadeThis
ページスクロール時に画像などにフェードインした動きを実装できるエフェクト。
デモはこちら
ダウンロードはこちら
Block Reveal Effects
ページスクロール時にオサレな動きを実装できるエフェクト。
デモはこちら
ダウンロードはこちら
Animate.css
ボタンなどにアニメーションを実装できるエフェクト。
ダウンロード+デモはこちら
紹介した以外にも様々なエフェクトが配布されています。
こういった動きを取り入れるだけで簡単にデザイン性を高められますので、やりすぎない程度に取り入れてみて下さい。
番外編！継続して良いサイトをチェックしてwebデザインスキルを高める
制作スキルでは有りませんが、常日頃から良いデザインのサイトをチェックして目を肥やすのも大切です。
デザインの良いサイトを定期的にチェックしておけば、テキストや色の使い方・トレンドのデザインなどが勉強できるので制作スキルと同じくらいデザインスキルは大切です。
オススメのwebデザインのギャラリーサイトは下記を参考にどうぞ。
まとめ
以上、僕が実際に学んだweb制作スキルでした。
WordPressでの制作が出来るようになればコーディング案件がかなり取りやすくなるので、なるべく早く身に付けられるよう頑張ってくださいね。
クラウドワークスやランサーズなどのマッチングサイトには、毎日web制作案件が沢山アップされているので案件を探している方は登録必須のサービスです。
フリーランスデザイナーがCrowdWorks(クラウドワークス)とLancers(ランサーズ)を3ヶ月間本気でやってみた結果
関連記事:
・CrowdWorksとLancersで仕事を受ける為にやった事〜準備編〜
・CrowdWorks(クラウドワークス)とLancers(ランサーズ)で仕事を受ける為にやった事〜受注編〜
LINE@で質問や相談、お仕事の依頼などを受け付けております。
- お仕事の依頼をしたい。
- 記事の内容をもっと詳しく知りたい。
- デザイナーやフリーランスの働き方について聞きたい。
コメントを残す