コロナ時代な今ウェブ制作の仕事を副業でするならボクならこうアドバイスする(したかった)~スキル編~

※2020.10.26テコ入れしました

どうもです。五体満足じゃないクリエイティブディレクターのぐっさんです。

今回は、以前…確か2011年だと思うんですけど、職業訓練校の講師をやってまして。その時の受講生が、SNSのメッセージで相談を受けました。主婦で子育てしながら、webデザインの案件が受けれないかと。そのためにはどういった勉強&復習をすれば良いかという質問でした。

今回はその人に向けたメッセージな感じが強めですけど、同じ様な人もしくは副業として考えてる人にも読んで何かしらのヒントになればと思い書いていきます。

実際問題、ある程度はその人にはメッセージで伝えたんですけど… どうもしっくり来ないと言うか全部伝えるにはこれが1番かな〜と。

0:対象となる方

今回は、副業として考えてる人、あくまでも少し知識がある方で子育てしながら副業としてやっていければ…というケースでお話ししますが、知識ゼロのひとや制作会社に就職したい人も何かしらの参考になればと思います

1:ボクが思う必要なスキル

どうでしょう。ボク的にはページデザインよりも、マークアップなスキルの方が必要、期待されるんやないかな〜と思います。案件的にも数が多そうな感じ。

勿論、グラフィックデザインスキルも必要だとは思うんでその辺は後述しようと思います。

マークアップで必要な言語は絶対に必須項目はhtmlcssの知識でしょうが今現在は『html5とcss3』の知識も合わせて覚えておかないとと思いますがどうでしょう。

ちょうどボクがクモ膜下出血と脳梗塞を発症する4年前にスタンダードになり始めた頃だったと思います。

今はインタラクティブな事がhtmlとcssで出来る事が増えて来て実装も多くなってきている印象。なもんで、合わせて覚えておくべきだとは思います。

覚えておく事で、制作会社の下請け案件とかフリーランスの方同士でチームを組んで大きなプロジェクトを。って時に自信を持って参加出来る確率が上がってきます(勿論それだげでは足りない時もありますけど…)

ちなみにcssに関してはこういう書籍がありますがかなりのオススメです!

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

あとは最近必須項目じゃないかな〜とは思うのが

sass,less
JavaScript,jQuery

ですね。いわゆるcssの拡張言語インタラクティブなプログラミング言語てすね。当時ボクも講師してた頃は各種勉強会やネットで合間時間に必死に吸収してはいました。もし制作会社に就職したいと思うならこの辺もバリバリ書けるってのは理想なんですけど、ある程度書き方や使い方が分かって、副業としてやるのであれば忘れたらネットで思い出して書けるって位で良いかなぁ〜と思いますが。

実際問題なんですけど、ボクもクモ膜下出血と脳梗塞を患って現場離れて4年が過ぎsassとJavaScriptは入院生活である程度は覚えたのですが、まだまだ実践としてつかえるかどうか心配な所です^^;

そうそう前述したCSS設計の教科書。コレってシリーズ化されてまして、これのsassのヤツもかなりオススメです。ボクも持ってます!このweb制作者のための教科書シリーズは他にもあって全部かなりオススメでボクも殆ど読んでます。

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ Web制作者のための教科書シリーズ

後最近はcssフレームワークの知識があった方が案件を受ける幅が広がるんじゃないかなと思います。ちなみにcssフレームワークの話だけでひとつ記事が出来ます…てか以前Tumblrのブログで書いたんですけど^^;→その記事はコチラ

いわゆるbootstrapとかFoundationとかMaterializeとか。

使い方とカスタムの仕方は知っておいた方が良いかなぁと思います。全部試しましたが個人的にはMaterializeを自主制作&実務案件に多用していました。

サイト・アブリ両方これを使って制作してるモノが多いくなったと思いますよ。他にも cssフレームワークあるんで一度勉強がてら見てみるといいと思います

レスポンシブ対応のおすすめCSSフレームワーク5選【2020年版】│CSS│SYMMETRIC Web開発ブログ

それでは上記の勉強方法(実際にボクも使っている)サービスetcをご紹介します

2:勉強方法

実際にボクもこうやって独学で学びました。ちなみにボクは基礎の基礎は、デザインスクールで学びましたが、それ以降は独学です。

デザインのお仕事やWEB制作のお仕事はスクールや大学に行かないと学べないかな〜と思われる人がいるかと思いますが、実際問題独学でも仕事は受けれます!

ただ唯一学べないかな〜と思うのは業界の仕事のやり方ですね。

さて。前フリはこの辺にして、実際にスキルアップするためのWEBサービスを紹介します。

ドットインストール

ドットインストール

会員登録は基本無料です!(有料のプレミアム会員あり)

各種SNSアカウントを持っていましたら登録は簡単ですよ!
ボクはプログラミング全般はコチラで勉強しました。わかりやすい解説と一本の動画がコンパクトでして、集中力が短いボクにも大丈夫やったです!
キャッチコピーだと思いますが「3分動画でマスターできるプログラミング学習サービス」

このサイトは目的別?にチュートリアル動画をまとめてるので、まずそちらを制覇してから個人的に覚えたい事や足りない所を補っていけばいいかな~と個人的には思います

各種フレームワークの公式サイトのチュートリアル

cssフレームワークに関しては公式サイトのチュートリアルが充実じていると思います!
前編英語のサイトで日本語はありませんが、自分で翻訳したり。まぁ英語のサイトではありますがある程度は翻訳なしでもわかりましたよ。
サイトによっては動画とテキスト両方あります!

英語が苦手っていう人は使ってみた感想などをブログに書いてる人も多いのでそちらも調べて活用するといいかもしれません。Google先生に聞いたらほとんどの事は教えてもらえますよww

例えば……

bootstrapは日本語の公式サイトができてました。

はじめに – Bootstrap 4.5 – 日本語リファレンス

はじめに – Bootstrap 4.5 – 日本語リファレンス https://getbootstrap.jp/docs/4.5/getting-started/introduction/

ボクがよく使ってたMaterializだと

Documentation

– Materialize https://materializecss.com/

Youtubeを活用する

後最近は有り難い事にYouTube動画も充実してるからそれを参考にすると言う方法もありだと思います。
ざっと観てみて参考になりそうだな〜と思う動画貼っつけておきます。

【入門】WEBデザイナーとして月5万稼ぐ手順〜ステップマップ付き〜(#27)
web制作フリーランスとして初案件を獲得するまでにやったこと【今ならこうするも解説】

有難い事ですね。現場を体験してる人が副業で動画、スキルを公開しているのは。これならお金をかけずに知識を得れる。後はモチベーションとやる気次第^^;

ちなみにですがボクが最近メインでやってる映像制作のスキルは全てYouTubeのチュートリアル動画です!デザインスクールでは学んでいません。(多分デザインソフトの知識はデザインスクールで学んだ事の応用かなとは思いますが)

と、言う事でコーティングの面でのスキルアップのお話しをしましたが、人によっては「デザイン力をアップさせたい!」という人もいるかと思いますよね。

3:グラフィックデザインのスキルアップ方法

次にグラフィックデザインスキルアップのお話しをします。

よく言われる事ですが「デザインはセンスが必要」的な事を言われていますが、敢えてボクは真っ向から否定しようかなと思います。

デザインはセンスと言われる人の多くはデザイン→アート(芸術)と一緒に考えてる人が多いからです。

商業デザインは法則と理論と目を肥やす事とやる気でスキルアップは出来ると思います!

ちなみにボクは中学校時代は美術は2でしたから^^;こんなボクでもお仕事貰えたんです。

ボクのデザインスキルは本とネットです!
日頃から活用しているものをご紹介します

a:オススメ本

1:なるほどデザイン

タイトルのようにデザインの法則を「なるほど~」というふうに学べる一冊

2:スマートフォンデザインでラクするために

コレ自体は2013年の発売だそうで、情報が古そうだと思われがちですが、スマートフォンデザインとありますが、お仕事でデザインする前の意識のあり方などが書いてある今でも読み直す一冊。

個人的には著者の石嶋 未来さんの本はすごく勉強になるし目からウロコものですね。この次の「神速photoshop」にも関わっています。実は石嶋 未来さんってすげ~人なんです。ボクが紹介するのもおこがましいw

3:神速Photoshop[Webデザイン編]

Illsutratorでページデザインできるようになりましたが、まだまだphotoshopでするところが今でも多いと思いますのでどっちでもできるようになっておくのがベターかなと思います
グラフィックデザイン編ではありますがコチラもありますので……..

神速Illustrator[グラフィックデザイン編

4:Webデザインの現場ですぐに役立つ Photoshop仕事術

ボクはIllsutrator派なんでちょっとPhotoshopでデザイン….というのが苦手でして^^;….苦手克服で買ったのがこの一冊です

b:ギャラリーサイトで良いデザインを見る。できたら真似る!

良いデザインwebページを網羅したいわゆる「ギャラリーサイト」というのがありまして。そこでただ単に見るだけではなく「なんでこんなデザインにしたんだろう?」と考えるのがポイントかなと思います。多くのデザイナーさんはなんでこのデザインにしたかを説明できます!その理由を考えることは上達の近道なんじゃないかな~と

よく見てたギャラリーサイトは……

あとはこんなのもあります!

Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト

web制作で有名なLIGさんのサイトではギャラリーサイトについてまとめてる記事があります

(参考)Webデザインの参考になるギャラリーサイト30選【保存版】 | 株式会社LIG

時間があればそのページをスクリーンショットしてデザインソフトで真似するとなお上達が早いと思います

(参考)Webデザインのスキルを磨こう!Webサイト模写のススメ | Webクリエイターボックス

もう1つは、ピンタレストを観る事!これは空いた時間にスマホでもアプリ立ちあげて見れるから手軽です。自分が見たいデザインを検索することもできますし、多くのデザイナーさんがアイデアづくりにも取り入れてるだろうと思います。ボクも然り。

Pinterest

最後に…..お仕事の内容の話し

ボクの感じですが、WEB制作の案件の割合的にはコーティング単体7割ページデザイン3割じゃなかろうかと思います(あくまで個人的です)。勿論案件によってはデザイン+コーティングのフルスクラッチ案件もあるかと思いますが、数が少ないかな〜と。部分部分な案件を多く取って行って自分自身の副業(ワーク)スタイルを決めて行った方が良いと思います。

では、実際にどうやってお仕事を見つけるか…..のお話しなんですが長くなり過ぎたので次回に持ち越しします^^;

現在鋭意編集中ww一応乞うご期待ということで締めさせていただきやす

Posted by キタグチ タイチ

コメントを残す