たにぐちログ

プログラミング

【経験談】模写と仕事で一体何が違ったのか

 

今回の記事では、僕がコーダーとしての仕事をいくつか経験して感じた「仕事と模写」の間にあるものについて書いていきます。

模写のクオリティは人それぞれあると思いますが、そのクオリティがどうであれ、模写からは学べないことが仕事では必要になってきます。

そのことについて知らないと、仕事が取れた時に失敗してしまうか、死ぬ気で作業することになってしまうので早めに知っておく方が良いと思います。

僕が初案件を獲得するまでに学習したことは以前記事にしたことがほとんどすべてなので、僕自身はこのことをあまり理解しないまま、クラウドソーシングで制作会社からお仕事をいただいてかなり苦しみました。

結局何を学ぶべきなの？初案件を獲るまでに僕が学習した内容を紹介

作業期間は、毎日全ての時間を検索と作業に費やして、徹夜まですることになってしまいました。

みなさんは僕のように無駄に苦しまずに済むように、準備できることは先に準備しておいて欲しいので、この記事を書くことにしました。

なので、僕が感じた範囲ではありますが、仕事と模写の間にあるものについて説明していきます。

そもそも模写と仕事では何が違うのか

まず、模写と仕事の違いについて考えましょう。

これを理解することで、模写だけでは十分ではないということが分かると思います。

模写で行う作業を大まかに羅列すると次のような流れだと思います。

  1. 見本サイトのデザインを確認する
  2. 画像を準備する（拡張機能でダウンロードor似ている画像使用）
  3. HTML/CSS/jQueryを書く
  4. 全体的にデザインが近ければ完成

完成度については人それぞれだと思いますが、多くの人は「目視でデザインが近ければ完成」としているのではないでしょうか？（僕はそうでした笑

一方仕事での作業の流れは以下のようになっています。

  1. デザインデータから画像を書き出す
  2. デザインデータから要素や余白pxの情報を読み取る
  3. デザインデータからフォント情報を読み取る
  4. 指定があればリセットCSSを使用する
  5. フォルダ構造を正しく作る（コーポレートサイトの時）
  6. HTML/CSS/jQueryを書く
  7. 挙動のチェック
  8. ファイルのアップロードor送信

デザインデータの工程を細かく分けているのは僕がかなり苦しんだからです笑

仕事での工程を模写と比べると、模写での「1デザイン確認」,「2画像準備」工程がより重たくなって、「4チェック」の工程がより厳しくなるといった感じですね。

仕事と模写の違いが大まかにわかったところで、僕が思う仕事に必要なことを一つずつ説明していきます。

模写と仕事の間で違ったこと

それでは実際に僕に足りていなかった知識や技術を

  • コーディング前
  • コーディング中
  • コーディング後

の3段階に分けて紹介していきます。

コーディング前

コーディング前にすることのなかで、デザインデータとフォントの扱いは模写ではやったことがなかったのでかなり苦しみました。

デザインデータ

まずデザインデータを扱うという部分から模写とは大きく違いますよね。

模写ではデザインデータを扱わなかったので僕はここで大きく苦しみましたね笑

Adobe XDは使用したことがなかったので、デザインデータが渡される前にダウンロードして使い方を検索しておきました。

はにわまんさんの記事がわかりやすかったのでオススメです。

「Adobe XDのデザインカンプからコーディングに必要な画像や値を取得する方法」

フォント

Adobe XDの基本的な使い方がわかっていてもフォントが読み込まれているかどうかを確認していなかったために僕はめちゃくちゃ苦しみました。

デザインデータを読み込んでいる画面で、「環境にないアセット」が存在している場合は要注意です。

フォントがパソコン本体に存在していないので依頼主からフォントデータをもらってパソコンにインストールしましょう。（Webフォントの場合、もらう必要はありません。）

僕はフォントをインストールするものだと知らなかったので、フォントがインストールできると気付くまでにかなり時間がかかりました笑

コーディング中

コーディング中に苦しんだこととしては、HTML/CSSの規則と正しいフォルダ構造を作ることでしたね。

僕の初案件はコーポレートサイト制作だったので、共通CSSを作らなければなりませんでした。

模写では単ページのみだったので、共通CSSという概念すら知りませんでした。

結局共通CSSについて調べて、ヘッダーとフッターとカード部分や文字サイズなどを共通CSSとしました。

どこまでを共通CSSに書くかは人によって異なっているようだったので、どれが正解かわからずかなり混乱したのも覚えています笑

また、CSSには目次をつけなければなりませんでしたが、調べてもなかなか欲しい情報にたどり着けなかったのでかなり困りました。

CSSのコメントアウトの書き方と制作現場での使用サンプルを紹介

このページではCSSのコメントアウトに関して現場での使われ方が詳しく書かれていたのでオススメです。

フォルダ構造は見本の構造を教えていただいていたのですが、最初はその方法を気にせずに進めていたので、最後にパスを変更することになって余計な手間がかかってしまいました。

コーディング後

コーディング後にはサイトの挙動をチェックするのですが、特定の幅では表示が崩れるといったことが起きてはいけないので、チェックの厳しさは模写とは大きく違いましたね。

また、コーディング後にはテストアップや、アップロードの作業をすることになります。

テストアップする場合は自分のサーバーにアップロードしなければならないので、サーバーの準備とFTPソフトの使い方を学んでおきましょう。

僕はエックスサーバーとお名前.comで準備していたのでここは問題ありませんでしたが、持っていない人は仕事を取る前に準備しておきましょう。

エックスサーバー

お名前.com

ちなみに僕は予備ドメインが欲しかったのでお名前.comで5つのドメインを契約しています笑

  • このブログ用
  • プロフィールサイト用
  • 仕事で使うようの空きドメイン
  • サイト移行などでテストする用の空きドメイン
  • 空きドメイン

空きドメインに関してはキャンペーンで1円とかで契約していて、更新はしない予定です。

準備をしておいたほうが圧倒的に楽

今回紹介したことを僕は知らずに初案件を受注して、かなり苦しみました。

納期が短かったのもありますが、毎日14時間くらい作業して、最後の日は徹夜してなんとかなった感じでした。

このように、今回紹介したことを知らない状態で受注すると本当に限界レベルで消耗することになります。

僕の場合はなんとか納品して、最終的には評価5もいただけました。

ですが、苦しむのをわかっていてあえて同じ体験をする必要は全くないので、みなさんは同じ苦しみを味わうことのないように今回紹介したことを知っておいて欲しいです。

また、僕が今回紹介したことの多くは東京フリーランスさんの30Daysトライアルで経験できるので、そちらでデザインデータからピクセルパーフェクトで再現する経験をしておくことを強くオススメします。

最後に僕の反省点をまとめておきます。

  • adobeXDの使い方を知っておくべきだった
    • 要素間の距離の測り方(要素を選択してAltキーを押せば、距離がでてきます)
    • 環境にないフォントの意味が分かっていなかった(インストールされていないフォントが使われているという意味)
  • フォントはインストールするものだと知っておくべきだった(フォントファイル右クリックでインストールできます)
  • 共通CSSを後から作ってしまったけど、最初に作っておくべきだった
  • フォルダ構造を適当に始めてしまい、後からの修正が大変だったので最初からきれいにする
  • 求められるクオリティの高さが分かっていなかった(基本的には寸分違わずだと思ったほうがいいです)
  • デベロッパーツールのNetworkタブにも使い慣れておきたい(どこのファイルがロードできていないかわかって便利だった)

今回紹介したことは仕事で求められるかなり基本的な部分だと思うので知っておいた方がいいとは思います。

ただ、やる前に全てを知っておくのは不可能なので、死ぬ気でやりきる覚悟を持って挑戦する気持ちも大事だと思います。

事前にできる準備はしつつ、覚悟を持って挑戦していきましょう！