【web制作を】模写コーディングができるようになったら、次にすべきこと【仕事にする】

こんにちは、ガタガタです。

html/css勉強の仕上げとして、模写コーディングを行う人は多いと思います。でも、模写コーディングができるようになったら、次に何をするか考えていますか？

模写ができるまでになったのは非常に素晴らしいことで、html/cssの勉強を始めた人の中でも、ここまで辿り着けるのは少しです。

ただ、それでもあなたが実力不足なのも事実。絶えず技術を磨き、トレンドをキャッチする力が必要になります。

それに、ただコーディングができるだけでは、特にフリーランスで仕事を取るのは難しいです。もう一つくらい強みを持っておくことで、他のコーダーと差をつけるのも良いでしょう。

そこでこの記事では、現役Webデザイナー/コーダーの私が模写コーディングができるようになったら次にやっておくといいことを挙げてみます。

この中の全てを学ぶ必要はありませんが、2つくらいは実践しておくと、実力が格段にアップするはずです。

コーディングの技術をもっと磨く

こちらはほぼ必須の作業です。よりコーディングを上達するため、次の取り組みをするといいでしょう。

もっと難しいサイトを模写してみる

技術を磨くにはとにかく練習です。数をこなすことで、コーディングのコツを掴むことができますし、標準的なレイアウトや流行のデザインを覚えられるメリットもあります。

模写するサイトの基準は以下のとおり。

そして何より、自分が「このサイト、いいな」と思ったサイトを模写しましょう。その方がモチベーションが保てますし、達成感もあるからです。

効率的なコーディングを学ぶ

だらだらとコーディングをするのではなく、時間をかけずサクサクとコーディングできる方法を常に模索しましょう。

スニペットを使ってみる

コーディング用のテキストエディタには「スニペット」という機能が備わっています。いわゆる定型文を登録する機能です。よく使うコードは積極的に登録し、作業を短縮化しましょう。
Atomのスニペット機能で複数行定番コードのコーディング効率をアップさせる方法

テキストエディタにプラグインを入れてみる

テキストエディタにプラグインを入れることで、便利な機能を追加することもできます。ある程度コーディングに慣れたら、テキストエディタを自分の好みに合わせてカスタムし、快適なコーディング環境を構築しましょう。

Atomなら、以下のものがオススメです。

Atom以外のエディタでも、似たような機能が付けられるはずですので、いいなと思ったものがあったら探してみて下さい。

Sass（もしくはLess）を勉強する

Sass・Lessとは、cssをより効率的かつ変更に強く書くことのできる拡張言語です。Sassの中にはさらに、scss・sassの2種類があり、それぞれ書き方が異なります。

細かいところはそれぞれ異なりますが、共通して次のような特徴があります。

• 変数が使えるため、突然の仕様変更に強い
• ネストを使った入れ子構造で書くことができる
• 四則演算や関数が使える
• そのままでは使えないため、コンパイルしてcss形式に変換する必要がある

要するに、もっとプログラミング的な書き方ができるのです。メンテナンス性や効率に優れていて、使い方を覚えてしまえば、非常に便利。

今やWeb制作の現場ではcssそのものより、これら拡張言語がスタンダードになっている場合が多いようです。学習コストはかかりますが、使いこなせるようになるとリターンもかなり大きいです。もはや必須レベルかも。

どの言語を覚えるかはお好みで選んでいただければ良いですが、Web制作初心者にオススメしたいのはscssです。書き方のルールが最もcssに近く、理解しやすいからです。使用者が多いこともオススメの理由。

こちらの書籍は、Sass（scss）の入門にぴったりの一冊です。

「Sassを覚えた方がいいのはわかったけど、何からすればいいか分からない……」という初心者から、「なんとなく使えるようになったけど、もっとバリバリにSassを使いこなしたい！」という中級者にまでオススメできる良書です。

コードの添削をしてもらう

ある程度自信がついたら、その道のプロに制作物を見てもらうのも有用な手です。気付かないうちに無駄なコードや、メンテナンス性の悪いコードを書いてしまっていたり、最新の教材を使って学んだつもりでも、最先端の制作現場ではその知識はもう古い……なんてこともあり得ます。

もしもあなたがプログラマーやコーダーのコミュニティに属しているなら、誰か信頼できる方に依頼してみるのがいいでしょう。

そうでなければ、クラウドソーシングサイトに依頼を出してみるのも一つの手です。

私はココナラで依頼を出し、信頼できそうな方に添削をお願いしました。いろいろなアドバイスをいただくことができ、非常に有意義でした。
ココナラ

【ココナラ】良い提案を獲得できる公開依頼の書き方と取引の流れ【出品者目線で書く】

ココナラの公開依頼、初めてだとどう書けばいいか悩んでしまいますよね。この記事では、「良い提案の集まる公開依頼の書き方」と「ココナラでの取引の流れ」を紹介します。取引のシステムはサービスによって仕様が違いますが、「公開依頼の書き方」は他のサービスでも使えますので、ぜひ参考にしてください。

他の知識・スキルを磨く

コーディング一本で勝負するよりは、関連する他のスキルも習得したほうが有利です。いくつか有用なスキルを挙げますので、興味を持てそうなものに触れてみるといいでしょう。

WordPressを学んでみる

html/cssを学んだ人にとって、最も重要度が高いのが「WordPressの知識」でしょう。

今やWordPressは個人・組織、企業・行政を問わずさまざまなサイトで使われているCMSです。自分でイチからテーマを作る……までは行かなくても、少なくともカスタマイズ系の依頼が来たときもスムーズに対応できる程度の知識はつけておくべきです。

できれば自分でサーバーを借りて、自由にいじれるWordPressを設置し、練習台にするのが望ましいです。

上記の本は、WordPressサイトの使い方から仕組み、テーマの成り立ちがわかりやすく解説されています。オススメの一冊です。

SEO対策を学んでみる

コーダーのSEO対策で重要なのは、いかに正しく検索エンジンへ情報を伝えられるコードを書くか、ということです。これまでSEO対策についてあまり学べていなかった方なら、次の一冊を読むことでSEO対策について総合的に学ぶことができます。

SEO対策もWeb制作をする上ではとても重要なポイント。基礎だけでも抑えておく必要はあります。総合的に触れてみて、面白そうだと思ったらSEO対策を極めてみるのもいいでしょう。

デザインを学んでみる

コーディングをする中で、サイトのレイアウトに興味が湧いてくる方もいらっしゃると思います。そんな方はWebデザインについて勉強するのもいいですね。

有名な本ですが、このサイトはWebデザインにも応用可能な考え方がたくさん詰まっています。ターゲット層を選定した上で、ターゲットごとにわかりやすいデザインを作るための、基本的な考えがわかる本です。

デザインを作るのが、コードを書くより面白いと感じたら、いっそWebデザイナーを目指すのもアリですね。

Javascript、PHPを学んでみる

コードを書くのが楽しくて仕方ない、もっと動的なサイトが作れるようになりたいという方は、別の言語を学ぶと良いでしょう。

特にJavascriptはアニメーションをつけたりするのに役立ちますし、PHPはWordPressなどでも用いられているように、もっとダイナミックなサイトを作ることができます。

基礎的なところはドットインストールなどの無料動画サイトで十分学ぶことができます。ご自分の作りたいものに合わせて学習しましょう。

ドットインストール

まとめ

模写コーディングはゴールではなく、コーダーとしてのスタートラインです。模写ができるようになったら、コーディング技術を磨くことはもちろん、他にもやれることはいろいろあります。

ぜひ、いろんなことに挑戦して、自分だけの強みを見つけていってください！

こちらもオススメ

【実力をつけて】コーディング模写ができるようになったら、どんな自作サイトを作ればいい？【案件獲得に繋げる】