direction コーディングしよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

コーディングしよう

ディレクション|2019年02月19日

2019年02月19日
  • このエントリーをはてなブックマークに追加

デザインのフェーズが終わったら、いよいよコーディングです。

HTML×CSSだけではありません。
フロントエンドやバックエンド、WORDPRESSも含みます。
ここで、作ったデータを形にし、納品できるように作っていきましょう。

コーディングでディレクターがやることは、主に細かい情報の提供。
そして、確認と心地良さのフィードバックです。

確認とは、ミスやエラーが無いかのチェック。
ブラウザやデバイスでチェックし、崩れが無いかの確認。

心地良さとは、触った時の動きや挙動なのです。
触った時のボタンの動きや、使っている時の心地良さ。

そして、コーダーに伝える情報がいくつかあります。
下記の内容は、あらかじめ準備して伝えておきましょう。

  • metaタグ
  • フォーム送信先のメールアドレス
  • メールフォームの自動返信メール内容
  • Googleアナリティクスなどの計測ツールタグ
  • SNSアカウント情報
  • クライアントのサーバー情報
  • デザインデータ

不要なものもあるかもしれませんが、こんな感じです。
コーダー側では、知りえない情報ですからね。
metaタグもしっかり作って提供してください。

コーディングを始める前に、具体的な動きのイメージも伝えてください。
参考サイトを提供すると、コーダーもイメージをブレさせずに作れます。

納期に関しても、もちろん早めに伝えてください。
コーディングは少し長めで、5日は前倒しで伝えると良いでしょう。

なぜなら、今回は完璧に仕上げていく必要があるからです。
細かいエラーやミスは可能な限り消し去っていきましょう。

後からでも修正できるからと気を抜いてはいけません。
1回目の提出では、大抵ミスが膨大にあるものです。
そういうものだと思って、じっくり確認していきましょう。

確認する項目

でも、どんなポイントに気をつけて、確認すれば良いのでしょうか。
下記にチェック項目をまとめていきますので、参考にしてみてください。

  • 誤字脱字がないか
  • レイアウトに崩れはないか ( スマートフォンやタブレット含む )
  • リンク切れを起こしている箇所はないか
  • レスポンシブの際に変なレイアウトになっていないか
  • 触り心地は理想通りになっているか
  • 全ての機能にバグはないか
  • 画像にaltタグは入っているか
  • 渡した情報は設定されているか
  • メールフォームはしっかり送信されるか
  • faviconはついているか
  • OGPは設定してあるか

上記を目安に確認してみてください。
改めて言いますが、最初は大抵、ミスが多数あるものです。
詳しくキャプチャつきなどで、修正依頼してあげてください。

基本的に予算が少なければ、レスポンシブはコーダーにお任せです。
大抵、パソコン版 / mac版を作ってからスマホ / タブレット版に合わせていきます。
予算がある場合はしっかりデザインを作って渡してあげましょう。

なお、レイアウト確認する際には、必ず下記のブラウザは確認しましょう。

  • Google Chrome
  • Safari
  • firefox
  • Microsoft Edge

つい先日まではインターネットエクスプローラーも加わっていました。
しかしサポートが打ち切られるそうで、今後、どんどん不要になるでしょう。

タブレッドやスマートフォンに関しては、あるものは実機で確認。
無いものはデベロッパーツールのエミュレーターを使います。
以上の確認を得て、納品版に近づけていきます。

コーダーと楽しく優しく

たまに、こんな修正に対してこんな言い方をするディレクターがいます。
ほんの少ししか修正も無いのに「すごくミス多いです」と言うのです。
これは本当に意味不明なのですが、実在します。

正直、5箇所程度の誤字くらいであれば、数分で直せます。
それを何を血迷ったか大げさに、プレッシャーをかける人がいるのです。
ちなみに、これは業界トップ3の大手代理店に見られる傾向ですね。

プレッシャーかけたって、イラっとするだけですし、無意味です。
ただただ、モチベーションを下げる行為でしかありません。

デザイナーとの時もそうなのですが、すべてはモチベーションです。
モチベーションが上がればレスポンスも早くなります。
もちろん、下がればレスポンシブや対応にもムラがでます。
実際、働いているのは人間なので、そういうものなのです。

だからこそ、コーダーには優しく接してください。
ミスや間違いも、無意味にプレッシャーをかける必要はありません。
さらにミスや間違いが増えてしまうだけです。
なんなら、エラーの確認はディレクターの役目です。

互いにモチベーションを維持できるよう、柔らかく伝えましょう。
なんならジョークや気さくな内容を交えて伝えてください。
堅苦しいメッセージやメールにする必要はありません。

どんな状況も、楽しませるような雰囲気で伝えましょう。
できるディレクターは、大抵その伝え方が上手なのです。

デザインの変更は受け付けない

一通りコーディングが終わったら、クライアントと最終チェックをしましょう。
最終チェックでは、あくまで最後の動作確認です。
大きなデザインや内容の変更は、絶対に受け付けてはいけません。

受け付けるなら、次のフェーズかもしくは契約形態を月額制に変えましょう。
ここで変更を受け付ければ、一気に終わりの見えない泥沼に陥ります。
なんども変更を要求されて、結果、納品まで行き着けません。

欲求を断る交渉力がディレクターの能力とも言えます。
断るというよりも、どちらかと言えば、納得させる力です。

変更を言われても、しっかり作っていれば、全てのデザインに意味があります。
その意味を壊して変更することですから、何か設計に影響が出るはずです。
予定していた導線が実現できなくなったり、視認性が悪くなったり。
変更しない方がベストという理論武装ができれば、相手も無理に変更できません。

時々、言われたことを全て受けてしまうYESマンがいます。
そんなディレクターは徹底的に嫌われるだけです。
だって、自分の交渉力のなさを全てクリエイターに押し付けるわけですから。
尻拭いするクリエイターが、もっとも損をしてしまいます。
案件が終わらない分、自分たちも損をしてしまうでしょう。

だからこそ、しっかり話をまとめてください。
なるべく追加の工数を発生させてはいけません。
もし追加でなにかするなら、月額か再見積もりです。
交渉力をフルに活用して、相手を納得させる力が必要です。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら