仕事でWEB作成経験のない私が、WEBサイト作成で仕事ができるまで

仕事でWEB作成経験のない私が、WEBサイト作成で仕事ができるまで

今回は、WEB作成経験がなかった私が、
どうやってWEBサイト作成で仕事ができるまでを
思い出しながら書いてみました。

 

プログラマー、とはいえ

 

以前からとてもお世話になっている方から、
「プログラマーだったんだよね?WEBサイトとか作れる?」
と聞かれたあの冬。

 

内容は、その方のお知り合いの方がHPが必要になったので、
相談に乗ってほしい、との事でした。

 

 

 

プログラマーと言っても、
C言語とJAVA、あとPerlの経験なので、
ゴリゴリのWEBプログラマーではなかったけど、

 

直前のベンチャーではWEBサイトの構成をみるために、
HTMLやCSSは少し(頭では)理解していたし、
WordPressを少し触ってはいました。

 

あと、実は昔(6年前?)、独学でお遊びでHPを作成した事はありました。

 

しかし、当時は今ほどの学習環境もなく、本を頼りに作成したので、
出来上がったWEBサイトは、

 

今見返すとあまりにあまりのショボさで、
レンタルサーバーの契約期限切れとともに闇に葬りました。

 

 

とはいえ、

 

なんと言っても実績はある(!)から、
作成の流れは分かるし、

話を聞くと、それほど複雑なWEBサイトを希望、ではないので

 

期限に余裕を持たせて、作成を引き受けました。

 

 

勉強

 

最近のWEBサイト作成の動向を詳細に追っていたわけではないので、
まずは参考にするために色々なWEBサイトを閲覧してみました。

 

「おお、こんなエフェクトもできるのか!」
「フレームワークもたくさんあるな~」

 

と、できる事が増えたのにはとてもワクワクしましたが

 

一方では、

 

ブラウザもChromeやEdge、IEもまだあるし、
Firefox、Safariなどなど、表示が微妙に変わるから
そこの対応が必要だし、

さらにスマートフォンではAndroidとiOS。

スマホならレスポンシブ対応もしなくては・・・。

 

なので、少なくとも

 

・各種ブラウザー対応必要

・スマホ画面(タブレットも)に最適になるようにレスポンシブ対応必要

 

 

 

 

その時に一番参考にしたのは

 

ドットインストールでした。

 

動画と音声で説明をしてくれるのですが、

例えばまず、レッスンの最初 or 最後だけ見て

 

「このレッスンを進めると、どんな事(どこまでの事)が出来るんだろう?」

 

というのを確認して、必要なところを最初に勉強。

 

大枠が出来上がってから、足りない部分は他のレッスンだったり、
ネットで検索して補完していました。

 

その時、ネットで良く参考にしていたのは

 

Webクリエイターボックス

コリス

Qiita

 

あとは適宜検索をして使えそうなところを勉強して取り入れる、
という流れで作成できました。

 

作成後

 

出来上がったサイトですが、まだまだ手直しが必要であり

特にデザインは基本的な事が欠落していたので、
そこを勉強しました。

 

と言っても、特別な事ではなくて、

 

見た目の統一

 

を意識するようにしました。

 

 

・画像の配置の間隔をまとまりごとに均一化

・フォントの選定と統一

・色の持つ意味を考えて使用する

 

デザインというと、芸術性の高いこと、
と考えがちですが、全体の統一と調和を図るだけで、
非常に見やすいWEBサイトが作成できます。

 

※本来は作成前にしっかり決めておくところでした(;’∀’)

 

現在

 

作ったサイトのいくつかを実績としていて、
そのおかげで新しい作成の依頼もいただいています。

 

それでも自分の知識、技術的な部分ではまだまだ、と感じているので、
引き続きデザインの勉強と、

 

ドットインストール

Progate

CodePen

Udemy

Aidemy

 

で学習しながら、最新の動向も注視しています。

 

最後に

 

私の場合、7割作成のイメージができれば、チャレンジするようにしています。

(少なくとも5割あれば検討する)

 

イメージできていれば、必要な技術などは都度ネットや本で探せるので、
チャレンジしてみると良いと思います( ´∀` )

 

後は、とにかく作る事。

部分的でもいいから、実績としてのサンプルがあると
話がスムーズに進みました。

※例えば、自作のモーダルウィンドウのサンプルをいくつか用意しておくと、
サンプル見せながら
「この部分はJavaScriptを使用して、他にこんな事を試してみました。」
と説明ができて、説得力がありました。

 

あとは、

「なに作ろうか?」

と迷ったら、

・学習サイトのサンプルを数値や効果を変更して動きがどうなるかを試す。
・自分が良い、と思ったWEBサイトの構成や動きを自分で再現してみる。

 

なんかをやってみて、部品としてためておくと
いざ本番作成!の時にイメージしやすかったり、
一部の修正だけで部品として当て込むことができて
日数を短縮できたりできます。

※ただし、WEBサイトにあるサンプルなどをそのままコピペして使用・
公開するのは著作権上の問題があると思いますので注意しましょう。

 

 

今回は、私の場合、ということで投稿してみました。
人によってさまざまなアプローチがあると思うので、
色々と試してみてください。

 

タイトルが回文ぽくなっている( ´∀` )

 

 

スポンサードリンク

 

WEB制作・プログラムカテゴリの最新記事